126 lines
3.6 KiB
TypeScript
126 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function Header() {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="flex items-center justify-between pr-8 absolute z-50 w-full">
|
|
<div className="flex items-center bg-white py-3 pr-6 pl-12 shadow-sm rounded-r-2xl">
|
|
<Image
|
|
src="/assets/images/logo.webp"
|
|
alt="Logo"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
<span className="ml-1 text-2xl font-bold text-[#ff256d]">
|
|
PlanPost AI
|
|
</span>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<ul className="hidden md:flex space-x-16 px-8 pt-8 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="#" className="hover:text-purple-600">
|
|
Feature
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#" className="hover:text-purple-600">
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#" className="hover:text-purple-600">
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Login & Sign Up Buttons */}
|
|
<div className="hidden md:flex space-x-4">
|
|
<button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
|
|
Log in
|
|
</button>
|
|
<button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<div className="md:hidden">
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
className="text-gray-800 focus:outline-none"
|
|
>
|
|
<svg
|
|
className="w-8 h-8"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M4 6h16M4 12h16m-7 6h7"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMobileMenuOpen && (
|
|
<div className="absolute top-16 left-0 w-full bg-white shadow-lg p-6 md:hidden">
|
|
<ul className="flex flex-col space-y-4 text-gray-800 font-medium">
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="hover:text-purple-600"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="hover:text-purple-600"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Feature
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="hover:text-purple-600"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="hover:text-purple-600"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|