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>
31 lines
1.5 KiB
TypeScript
31 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import { LeafMark } from "@/components/ui/Logo";
|
|
|
|
/**
|
|
* Minimal cinematic nav — two destinations, two actions. Nothing else.
|
|
*/
|
|
export function Navbar() {
|
|
return (
|
|
<header className="fixed inset-x-0 top-0 z-40">
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4">
|
|
<Link href="/" className="flex items-center gap-2.5 font-display text-2xl text-paper">
|
|
<LeafMark size={26} /> Aartha
|
|
</Link>
|
|
<nav className="hidden items-center gap-1 rounded-full bg-white/[.07] p-1 font-mono text-[11px] uppercase tracking-[.15em] text-paper/75 backdrop-blur-md md:flex">
|
|
<a href="#product" className="rounded-full px-4 py-2 transition hover:bg-white/10 hover:text-paper">Product</a>
|
|
<a href="#pricing" className="rounded-full px-4 py-2 transition hover:bg-white/10 hover:text-paper">Pricing</a>
|
|
<a href="#faq" className="rounded-full px-4 py-2 transition hover:bg-white/10 hover:text-paper">FAQ</a>
|
|
</nav>
|
|
<div className="flex items-center gap-2">
|
|
<Link href="/dashboard" className="hidden rounded-full px-4 py-2 font-mono text-[11px] uppercase tracking-[.15em] text-paper/75 transition hover:text-paper sm:block">
|
|
Log in
|
|
</Link>
|
|
<Link href="/dashboard" className="rounded-full bg-paper px-4 py-2 font-mono text-[11px] font-bold uppercase tracking-[.15em] text-ink transition hover:bg-mint">
|
|
Get started →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|