NicholaiVogel
633ef418d1
- Add all shadcn/ui components (button, card, form, dialog, navigation-menu, etc.) - Create main layout with navigation header and footer - Implement homepage with hero, showreel, featured projects, and capabilities - Build about page with studio origins, values, and capabilities - Create services page with detailed service offerings - Implement portfolio page with masonry grid for varying aspect ratios - Build contact page with 4-step multistep form - Add project and service data structures with placeholder content - Configure SEO metadata, canonical links, and JSON-LD schema - Add font preloading and image lazy-loading for performance - Configure Next.js Image for Unsplash remote patterns - Fix Navigation component to use modern Link pattern (remove legacyBehavior) - Add comprehensive README with project documentation
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
navigationMenuTriggerStyle,
|
|
} from "@/components/ui/navigation-menu";
|
|
|
|
export function Navigation() {
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/about", label: "About" },
|
|
{ href: "/services", label: "Services" },
|
|
{ href: "/portfolio", label: "Portfolio" },
|
|
{ href: "/contact", label: "Contact" },
|
|
];
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container flex h-16 items-center justify-between">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<span className="text-2xl font-bold">Biohazard VFX</span>
|
|
</Link>
|
|
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
{navItems.map((item) => (
|
|
<NavigationMenuItem key={item.href}>
|
|
<NavigationMenuLink asChild active={pathname === item.href}>
|
|
<Link href={item.href} className={navigationMenuTriggerStyle()}>
|
|
{item.label}
|
|
</Link>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|