92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { LogIn } from "lucide-react";
|
|
import { ThemeSwitcher } from "@/components/theme-switcher";
|
|
import { useState } from "react";
|
|
|
|
export function HomeNavbar() {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="py-4 px-6 md:px-10 flex items-center justify-between border-b border-gray-800 bg-black text-white">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-bold text-2xl">Ember</span>
|
|
</div>
|
|
<nav className="hidden md:flex gap-6 items-center">
|
|
<Link href="#features" className="text-sm text-gray-400 hover:text-white transition-colors">
|
|
Features
|
|
</Link>
|
|
<Link href="#benefits" className="text-sm text-gray-400 hover:text-white transition-colors">
|
|
Benefits
|
|
</Link>
|
|
<Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">
|
|
<Button variant="ghost" className="text-gray-400 hover:text-white hover:bg-gray-900">
|
|
<LogIn className="h-4 w-4 mr-2" />
|
|
Log In
|
|
</Button>
|
|
</Link>
|
|
<Link href="/auth/login">
|
|
<Button className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">Get Started</Button>
|
|
</Link>
|
|
</nav>
|
|
<div className="md:hidden">
|
|
<Button variant="ghost" size="icon" onClick={() => setMenuOpen(!menuOpen)} className="text-white hover:bg-gray-900">
|
|
<span className="sr-only">Toggle menu</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<line x1="4" x2="20" y1="12" y2="12" />
|
|
<line x1="4" x2="20" y1="6" y2="6" />
|
|
<line x1="4" x2="20" y1="18" y2="18" />
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{menuOpen && (
|
|
<div className="md:hidden absolute top-16 left-0 right-0 bg-[#1C1C1C] border-b border-gray-800 p-4 z-50">
|
|
<div className="flex flex-col gap-4">
|
|
<Link
|
|
href="#features"
|
|
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Features
|
|
</Link>
|
|
<Link
|
|
href="#benefits"
|
|
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Benefits
|
|
</Link>
|
|
<Link
|
|
href="/auth/login"
|
|
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Log In
|
|
</Link>
|
|
<Link
|
|
href="/auth/register"
|
|
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Create Account
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|