140 lines
4.9 KiB
TypeScript
140 lines
4.9 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Menu } from "lucide-react";
|
|
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
|
|
|
|
export default function Header() {
|
|
return (
|
|
<nav className="flex items-center justify-between pr-4 absolute z-50 w-full">
|
|
<Link href="/">
|
|
<div className="flex items-center bg-white py-3 pr-6 pl-5 shadow-sm rounded-r-2xl">
|
|
<Image src="/planpost.png" alt="Logo" width={24} height={24} />
|
|
<span className="ml-1 text-2xl font-bold text-transparent bg-clip-text bg-text-gradient">
|
|
PlanPost AI
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Menu */}
|
|
<ul className="hidden md:flex space-x-16 px-8 pt-5 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
|
|
<li>
|
|
<Link href="/" className="hover:text-purple-600">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#feature" className="hover:text-purple-600">
|
|
Feature
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#pricingSection" className="hover:text-purple-600">
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#footerSection" className="hover:text-purple-600">
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Login & Sign Up Buttons */}
|
|
<div className="hidden md:flex space-x-4">
|
|
<Link href="https://dashboard.planpostai.com/">
|
|
<button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
|
|
Log in
|
|
</button>
|
|
</Link>
|
|
<Link href="https://dashboard.planpostai.com/">
|
|
<button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
|
|
Sign Up
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu with Sheet Component */}
|
|
<div className="md:hidden">
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<button className="text-gray-800 focus:outline-none mt-2">
|
|
<Menu className="w-8 h-8" />
|
|
<span className="sr-only">Open menu</span>
|
|
</button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[300px] sm:w-[350px] p-0">
|
|
<div className="flex flex-col h-full">
|
|
<div className="p-6">
|
|
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
|
|
<div className="flex items-center mb-8">
|
|
<Image
|
|
src="/planpost.png"
|
|
alt="Logo"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<span className="ml-1 text-2xl font-bold text-transparent bg-clip-text bg-text-gradient">
|
|
PlanPost AI
|
|
</span>
|
|
</div>
|
|
<ul className="flex flex-col space-y-6 text-gray-800 font-medium">
|
|
<li>
|
|
<Link href="/" className="hover:text-purple-600 text-lg">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#feature"
|
|
className="hover:text-purple-600 text-lg"
|
|
>
|
|
Feature
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#pricingSection"
|
|
className="hover:text-purple-600 text-lg"
|
|
>
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#footerSection"
|
|
className="hover:text-purple-600 text-lg"
|
|
>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="mt-auto p-6 border-t border-gray-200">
|
|
<div className="flex flex-col space-y-4">
|
|
<Link
|
|
href="https://dashboard.planpostai.com/"
|
|
className="w-full"
|
|
>
|
|
<button className="w-full font-bold px-5 py-3 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
|
|
Log in
|
|
</button>
|
|
</Link>
|
|
<Link
|
|
href="https://dashboard.planpostai.com/"
|
|
className="w-full"
|
|
>
|
|
<button className="w-full font-bold px-5 py-3 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
|
|
Sign Up
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|