126 lines
2.9 KiB
TypeScript
126 lines
2.9 KiB
TypeScript
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Menu } from "lucide-react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { ThemeSwitch } from "./theme-switch";
|
|
import { Button } from "@/components/ui/button";
|
|
import { nanoid } from "nanoid";
|
|
import { Link } from "@tanstack/react-router";
|
|
|
|
const MainNavbar = () => {
|
|
return (
|
|
<div className="fixed left-0 top-0 z-50 box-border w-full border-b px-4 py-3 backdrop-blur-lg transition-all duration-300">
|
|
<Card className="flex items-center justify-between gap-6 border-0 bg-transparent shadow-none">
|
|
<ul className="hidden items-center gap-10 text-card-foreground md:flex">
|
|
<li className="font-medium text-primary">
|
|
<a href="#home">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#pricing">Pricing</a>
|
|
</li>
|
|
<li>
|
|
<a href="#faqs">FAQs</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="flex items-center">
|
|
<Button variant="secondary" className="hidden px-2 md:block">
|
|
<Link to="/sign-in">Login</Link>
|
|
</Button>
|
|
<Button className="ml-2 mr-2 hidden md:block"><Link to="/sign-up">Get Started</Link></Button>
|
|
|
|
<div className="mr-2 flex items-center gap-2 md:hidden">
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="h-5 w-5 rotate-0 scale-100" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>
|
|
<a href="#home">Home</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a href="#features">Features</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a href="#pricing">Pricing</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<a href="#faqs">FAQs</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Button variant="secondary" className="w-full text-sm">
|
|
Login
|
|
</Button>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Button className="w-full text-sm">Get Started</Button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<ThemeSwitch />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const landings = [
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 01",
|
|
route: "/project-management"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 02",
|
|
route: "/crm-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 03",
|
|
route: "/ai-content-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 04",
|
|
route: "/new-intro-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 05",
|
|
route: "/about-us-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 06",
|
|
route: "/contact-us-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 07",
|
|
route: "/faqs-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 08",
|
|
route: "/pricing-landing"
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
title: "Landing 09",
|
|
route: "/career-landing"
|
|
}
|
|
];
|
|
|
|
export default MainNavbar;
|