spb/rareindex

1/**2 * The RareIndex mark: a cut stone (crown, girdle, pavilion) whose facets are drawn by an ascending3 * index line — rarity and market data in one shape. Source of truth: public/brand/rareindex-mark.svg4 * (favicons, PWA icons and share images are generated from it by scripts/brand-assets.mjs).5 */6export function LogoMark({ className, id = 'ri' }: { className?: string; id?: string }) {7  const gold = `${id}-gold`;8  const mint = `${id}-mint`;9  return (10    <svg viewBox="0 0 64 64" className={className} aria-hidden focusable="false">11      <defs>12        <linearGradient id={gold} x1="12" y1="22" x2="52" y2="54" gradientUnits="userSpaceOnUse">13          <stop offset="0" stopColor="#F1D08A" />14          <stop offset="1" stopColor="#C9963F" />15        </linearGradient>16        <linearGradient id={mint} x1="16" y1="42" x2="46" y2="24" gradientUnits="userSpaceOnUse">17          <stop offset="0" stopColor="#2FB673" />18          <stop offset="1" stopColor="#5FE3A1" />19        </linearGradient>20      </defs>21      <rect width="64" height="64" rx="14" fill="#0B0F19" />22      <rect x="0.75" y="0.75" width="62.5" height="62.5" rx="13.25" fill="none" stroke="#FFFFFF" strokeOpacity="0.08" strokeWidth="1.5" />23      <path d="M19 19.5H45L52.5 29.5 32 54.5 11.5 29.5Z" fill={`url(#${gold})`} fillOpacity="0.12" stroke={`url(#${gold})`} strokeWidth="3" strokeLinejoin="round" />24      <path d="M11.5 29.5H52.5" stroke={`url(#${gold})`} strokeWidth="2" strokeOpacity="0.55" strokeLinecap="round" />25      <path d="M16.5 34.5 24 42.5 31 32.5 37.5 38 46 26.5" fill="none" stroke={`url(#${mint})`} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />26      <path d="M40.5 26.5H46V32" fill="none" stroke={`url(#${mint})`} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />27    </svg>28  );29}3031/** Wordmark: "Rare" in the foreground colour, "Index" in brand gold. */32export function LogoWordmark({ className }: { className?: string }) {33  return (34    <span className={`font-semibold tracking-tight ${className ?? ''}`}>35      Rare<span className="text-[#C9963F]">Index</span>36    </span>37  );38}3940/** Static markup for Satori (next/og): no CSS variables, plain attributes, unique gradient ids. */41export function ogMark(size: number) {42  return (43    <svg viewBox="0 0 64 64" width={size} height={size}>44      <defs>45        <linearGradient id="og-gold" x1="12" y1="22" x2="52" y2="54" gradientUnits="userSpaceOnUse">46          <stop offset="0" stopColor="#F1D08A" />47          <stop offset="1" stopColor="#C9963F" />48        </linearGradient>49        <linearGradient id="og-mint" x1="16" y1="42" x2="46" y2="24" gradientUnits="userSpaceOnUse">50          <stop offset="0" stopColor="#2FB673" />51          <stop offset="1" stopColor="#5FE3A1" />52        </linearGradient>53      </defs>54      <rect width="64" height="64" rx="14" fill="#0B0F19" />55      <rect x="0.75" y="0.75" width="62.5" height="62.5" rx="13.25" fill="none" stroke="#FFFFFF" strokeOpacity="0.14" strokeWidth="1.5" />56      <path d="M19 19.5H45L52.5 29.5 32 54.5 11.5 29.5Z" fill="url(#og-gold)" fillOpacity="0.12" stroke="url(#og-gold)" strokeWidth="3" strokeLinejoin="round" />57      <path d="M11.5 29.5H52.5" stroke="url(#og-gold)" strokeWidth="2" strokeOpacity="0.55" strokeLinecap="round" />58      <path d="M16.5 34.5 24 42.5 31 32.5 37.5 38 46 26.5" fill="none" stroke="url(#og-mint)" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />59      <path d="M40.5 26.5H46V32" fill="none" stroke="url(#og-mint)" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />60    </svg>61  );62}63