mirror of
https://github.com/karpathy/nanochat.git
synced 2026-05-11 18:30:27 +00:00
748d2e561c
LandingNav was max-w-3xl which forced "How it works" and "Try samosaChaat" to wrap on two lines. Bumps the pill to 1100px, tightens the link padding, demotes the @ handle to lg+, and adds whitespace-nowrap to every chip so nothing wraps again. Default theme is now dark — the no-flash init script adds .dark unless the user has explicitly stored 'light', and the useTheme hook seeds from the same logic. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
64 lines
3.0 KiB
TypeScript
64 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
|
|
export default function LandingNav() {
|
|
const { authenticated } = useAuth();
|
|
const ctaHref = authenticated ? '/chat' : '/login';
|
|
const ctaLabel = authenticated ? 'Open chat' : 'Try samosaChaat';
|
|
|
|
return (
|
|
<nav className="relative z-20 px-4 pt-5 flex justify-center">
|
|
<div className="flex items-center gap-1 px-2 py-1.5 rounded-full bg-white/80 dark:bg-ink-soft/80 backdrop-blur-md border border-cream-border/70 dark:border-ink-border shadow-[0_8px_30px_rgba(180,120,40,0.08)] w-full max-w-[1100px]">
|
|
{/* Brand */}
|
|
<Link
|
|
href="/"
|
|
aria-label="samosaChaat home"
|
|
className="flex items-center gap-2 pl-3 pr-4 py-1.5 rounded-full hover:bg-cream/60 dark:hover:bg-ink-elev transition-colors whitespace-nowrap"
|
|
>
|
|
<svg viewBox="0 0 28 28" width={22} height={22} fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" className="text-saffron">
|
|
<path d="M4 22 L14 5 L24 22 Z" />
|
|
<circle cx="14" cy="17" r="1.4" fill="currentColor" />
|
|
</svg>
|
|
<span className="font-display text-[1.05rem] font-semibold text-gray-900 dark:text-ink-text tracking-tight">
|
|
samosaChaat
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Center links */}
|
|
<div className="hidden md:flex items-center gap-1 mx-auto text-[0.78rem] font-medium uppercase tracking-[0.08em] text-gray-600 dark:text-ink-text-soft">
|
|
<a href="#features" className="px-3 py-2 rounded-full whitespace-nowrap hover:text-gray-900 dark:hover:text-ink-text transition-colors">Why</a>
|
|
<a href="#how" className="px-3 py-2 rounded-full whitespace-nowrap hover:text-gray-900 dark:hover:text-ink-text transition-colors">How it works</a>
|
|
<a
|
|
href="https://github.com/manmohan659/nanochat"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="px-3 py-2 rounded-full whitespace-nowrap hover:text-gray-900 dark:hover:text-ink-text transition-colors"
|
|
>
|
|
Github
|
|
</a>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<a
|
|
href="https://instagram.com/samosachaat.art"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hidden lg:inline-flex px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap text-gray-700 dark:text-ink-text-soft hover:text-gray-900 dark:hover:text-ink-text transition-colors"
|
|
>
|
|
@samosachaat
|
|
</a>
|
|
<Link
|
|
href={ctaHref}
|
|
className="px-5 py-2.5 rounded-full bg-gray-900 dark:bg-ink-text text-white dark:text-ink text-sm font-medium whitespace-nowrap shadow-[0_8px_24px_rgba(0,0,0,0.18)] hover:shadow-[0_10px_28px_rgba(0,0,0,0.25)] hover:-translate-y-px transition-all"
|
|
>
|
|
{ctaLabel}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|