c48a11b13c
- Hero auto-rotates story backdrops every 5 seconds with 500ms fade transitions - ProductShowcase cards rotate with mint ring highlight on the active card - Inactive cards fade to 60% opacity on mobile, full opacity on desktop - New components: StoryBackdrop, StoryOnboarding, CountUp, lib/stories - Manual Another-story control still works Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
30 lines
1017 B
TypeScript
30 lines
1017 B
TypeScript
/** Compact leaf mark for dark surfaces (marketing nav, footer). */
|
|
export function LeafMark({ size = 26 }: { size?: number }) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden>
|
|
<path
|
|
d="M16 3C9 8 5.5 14 6.5 21.5 7.3 27 11.5 29.5 16 29.5c4.5 0 8.7-2.5 9.5-8C26.5 14 23 8 16 3Z"
|
|
fill="#1D9E75"
|
|
/>
|
|
<path
|
|
d="M16 8v18M16 14l-4.5-3.5M16 18l5-4"
|
|
stroke="#F6F0E7"
|
|
strokeWidth="1.6"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function Logo() {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<div className="grid size-10 place-items-center rounded-lg bg-forest text-lg font-bold text-white shadow-lift dark:bg-mint dark:text-ink">A</div>
|
|
<div>
|
|
<p className="font-display text-2xl leading-5 text-ink dark:text-paper">Aartha</p>
|
|
<p className="text-[11px] font-bold uppercase tracking-[0.18em] text-forest/70 dark:text-mint/80">Labs</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|