soroush.asadi
9901c5e6d4
- audio: default background music is now the santoor track (calm Persian), rebuilt as a real plucked-santoor loop — fast metallic attack, shimmer overtones, soft tonic drone, longer Dastgah-e-Shur phrase - site: marketing logo is now the app's card-fan icon (Logo.tsx + icon.svg); hero features the big logo with gold halo, floating suit motifs, and polished section dividers Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
68 lines
3.1 KiB
TypeScript
68 lines
3.1 KiB
TypeScript
/**
|
|
* Brand mark — the app's card-fan icon (mirrors public/icon.svg): three gold-edged
|
|
* playing cards fanned out, a spade on the face card. Scales cleanly from the nav
|
|
* (≈34px) to the hero (≈160px). `glow` adds a soft gold halo for hero use.
|
|
*/
|
|
export function Logo({ size = 36, glow = false }: { size?: number; glow?: boolean }) {
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 512 512"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden
|
|
style={glow ? { filter: "drop-shadow(0 10px 36px rgba(212,175,55,0.35))" } : undefined}
|
|
>
|
|
<defs>
|
|
<radialGradient id="frbg" cx="50%" cy="36%" r="78%">
|
|
<stop offset="0" stopColor="#16284f" />
|
|
<stop offset="0.62" stopColor="#0a142e" />
|
|
<stop offset="1" stopColor="#060c1f" />
|
|
</radialGradient>
|
|
<linearGradient id="frgold" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stopColor="#f6e4a0" />
|
|
<stop offset="0.5" stopColor="#d4af37" />
|
|
<stop offset="1" stopColor="#b8860b" />
|
|
</linearGradient>
|
|
<linearGradient id="frface" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stopColor="#fffdf7" />
|
|
<stop offset="1" stopColor="#f1e6cd" />
|
|
</linearGradient>
|
|
<linearGradient id="frnavy" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stopColor="#1d356a" />
|
|
<stop offset="1" stopColor="#0a142e" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect width="512" height="512" rx="116" fill="url(#frbg)" />
|
|
<circle cx="256" cy="196" r="185" fill="#2dd4bf" opacity="0.07" />
|
|
<rect x="30" y="30" width="452" height="452" rx="100" fill="none" stroke="url(#frgold)" strokeWidth="6" opacity="0.6" />
|
|
|
|
<g transform="rotate(-25 256 396)">
|
|
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#frnavy)" stroke="url(#frgold)" strokeWidth="4" />
|
|
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" opacity="0.45" />
|
|
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75" />
|
|
</g>
|
|
<g transform="rotate(25 256 396)">
|
|
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#frnavy)" stroke="url(#frgold)" strokeWidth="4" />
|
|
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" opacity="0.45" />
|
|
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75" />
|
|
</g>
|
|
|
|
<g transform="translate(0 -24)">
|
|
<rect x="181" y="178" width="150" height="212" rx="16" fill="url(#frface)" stroke="url(#frgold)" strokeWidth="5" />
|
|
<rect x="193" y="190" width="126" height="188" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" />
|
|
<g transform="translate(256 268) scale(1.45)">
|
|
<path
|
|
d="M0,-44 C0,-44 -42,-6 -42,16 C-42,30 -31,40 -18,40 C-11,40 -5,37 0,32 C-2,44 -10,52 -20,55 L20,55 C10,52 2,44 0,32 C5,37 11,40 18,40 C31,40 42,30 42,16 C42,-6 0,-44 0,-44 Z"
|
|
fill="url(#frgold)"
|
|
stroke="#7a5a00"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|