Spaces:
Sleeping
Sleeping
| "use client"; | |
| import { useState } from "react"; | |
| import Link from "next/link"; | |
| import { Button } from "@/components/ui/button"; | |
| import { Video, Menu, X } from "lucide-react"; | |
| import { AnimatePresence, motion } from "framer-motion"; | |
| import { UserAuth } from "@/components/auth/UserAuth"; | |
| import { LoginButton } from "@/components/auth/LoginButton"; | |
| export function Navbar() { | |
| const [isMenuOpen, setIsMenuOpen] = useState(false); | |
| return ( | |
| <nav className="fixed top-0 w-full z-50 border-b border-white/5 bg-slate-950/80 backdrop-blur-md"> | |
| <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div className="flex h-16 items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <Link href="/" className="flex items-center gap-2"> | |
| <img src="/logo.svg" alt="Logo" className="h-8 w-8" /> | |
| <span className="text-lg font-bold text-white">VidSimplify</span> | |
| </Link> | |
| </div> | |
| {/* Desktop Menu */} | |
| <div className="hidden md:block"> | |
| <div className="flex items-center gap-8"> | |
| <Link href="/#features" className="text-sm font-medium text-slate-400 hover:text-white transition-colors"> | |
| Features | |
| </Link> | |
| <Link href="/#showcase" className="text-sm font-medium text-slate-400 hover:text-white transition-colors"> | |
| Showcase | |
| </Link> | |
| <Link href="/api-docs" className="text-sm font-medium text-slate-400 hover:text-white transition-colors"> | |
| API | |
| </Link> | |
| <Link href="/pricing" className="text-sm font-medium text-slate-400 hover:text-white transition-colors"> | |
| Pricing | |
| </Link> | |
| </div> | |
| </div> | |
| <div className="hidden md:flex items-center gap-4"> | |
| <Button | |
| variant="ghost" | |
| className="text-slate-400 hover:text-white font-medium" | |
| onClick={() => window.open("https://calendly.com/aditya-vidsimplify/demo-call", "_blank")} | |
| > | |
| Book a Call | |
| </Button> | |
| <UserAuth /> | |
| <LoginButton | |
| text="Get Started" | |
| className="bg-white text-slate-900 hover:bg-slate-200 font-medium" | |
| /> | |
| </div> | |
| {/* Mobile Menu Button */} | |
| <div className="md:hidden flex items-center gap-2"> | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| className="text-slate-400 hover:text-white font-medium text-xs px-2" | |
| onClick={() => window.open("https://calendly.com/aditya-vidsimplify/demo-call", "_blank")} | |
| > | |
| Book Call | |
| </Button> | |
| <button | |
| onClick={() => setIsMenuOpen(!isMenuOpen)} | |
| className="text-slate-400 hover:text-white p-2" | |
| > | |
| {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Mobile Menu Dropdown */} | |
| <AnimatePresence> | |
| {isMenuOpen && ( | |
| <motion.div | |
| initial={{ opacity: 0, height: 0 }} | |
| animate={{ opacity: 1, height: "auto" }} | |
| exit={{ opacity: 0, height: 0 }} | |
| className="md:hidden border-t border-white/5 bg-slate-950" | |
| > | |
| <div className="space-y-1 px-4 pb-3 pt-2"> | |
| <Link | |
| href="/#features" | |
| className="block px-3 py-2 text-base font-medium text-slate-400 hover:bg-slate-900 hover:text-white rounded-md" | |
| onClick={() => setIsMenuOpen(false)} | |
| > | |
| Features | |
| </Link> | |
| <Link | |
| href="/#showcase" | |
| className="block px-3 py-2 text-base font-medium text-slate-400 hover:bg-slate-900 hover:text-white rounded-md" | |
| onClick={() => setIsMenuOpen(false)} | |
| > | |
| Showcase | |
| </Link> | |
| <Link | |
| href="/api-docs" | |
| className="block px-3 py-2 text-base font-medium text-slate-400 hover:bg-slate-900 hover:text-white rounded-md" | |
| onClick={() => setIsMenuOpen(false)} | |
| > | |
| API | |
| </Link> | |
| <Link | |
| href="/pricing" | |
| className="block px-3 py-2 text-base font-medium text-slate-400 hover:bg-slate-900 hover:text-white rounded-md" | |
| onClick={() => setIsMenuOpen(false)} | |
| > | |
| Pricing | |
| </Link> | |
| <div className="mt-4 pt-4 border-t border-white/5 flex flex-col gap-3"> | |
| <div className="px-3"> | |
| <Button | |
| variant="ghost" | |
| className="w-full justify-start text-slate-400 hover:text-white font-medium mb-2" | |
| onClick={() => { | |
| window.open("https://calendly.com/aditya-vidsimplify/demo-call", "_blank"); | |
| setIsMenuOpen(false); | |
| }} | |
| > | |
| Book a Call | |
| </Button> | |
| <LoginButton | |
| text="Get Started" | |
| className="w-full bg-white text-slate-900 hover:bg-slate-200 font-medium" | |
| onClick={() => setIsMenuOpen(false)} | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| </motion.div> | |
| )} | |
| </AnimatePresence> | |
| </nav> | |
| ); | |
| } | |