280 lines
No EOL
11 KiB
TypeScript
280 lines
No EOL
11 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video, Megaphone, Calendar, BarChart } from "lucide-react";
|
|
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
|
|
import { useState } from "react";
|
|
|
|
const megaMenuData = [
|
|
{
|
|
icon: Sparkles,
|
|
title: "AI Social Media Content Generator",
|
|
description: "Create stunning social media posts in minutes",
|
|
route: "/ai-content-generator",
|
|
badge: "Popular"
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "AI Image Generator",
|
|
description: "Craft eye-catching thumbnails instantly",
|
|
route: "/ai-image-generator",
|
|
badge: "New"
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "AI-Powered Meta Ads Optimization",
|
|
description: "Create high-converting ads in seconds",
|
|
route: "/ai-meta-ads-optimization"
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: "SEO Geo Article Writer",
|
|
description: "Location-optimized content that ranks",
|
|
route: "/seo-geo-article-writer"
|
|
},
|
|
{
|
|
icon: Video,
|
|
title: "AI Video Generator",
|
|
description: "Turn text into engaging videos automatically",
|
|
route: "/ai-video-generator"
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "AI Bulk Content",
|
|
description: "SEO-optimized articles that drive traffic",
|
|
route: "/bulk-content"
|
|
},
|
|
{
|
|
icon: Calendar,
|
|
title: "Social Media Scheduler",
|
|
description: "Plan and automate your content calendar",
|
|
route: "/social-media"
|
|
},
|
|
{
|
|
icon: Megaphone,
|
|
title: "Social Media Post Generator",
|
|
description: "Captivate your audience with AI-powered posts",
|
|
route: "/social-media"
|
|
},
|
|
{
|
|
icon: BarChart,
|
|
title: "Social Media Analytics",
|
|
description: "Data-driven insights to grow your presence",
|
|
route: "/social-media"
|
|
}
|
|
];
|
|
|
|
export default function Header() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
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 */}
|
|
<div className="hidden md:flex items-center space-x-16 px-8 pt-5 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
|
|
<Link href="/" className="hover:text-purple-600 transition-colors duration-200">
|
|
Home
|
|
</Link>
|
|
|
|
<div
|
|
className="relative group"
|
|
onMouseEnter={() => setActiveMenu('features')}
|
|
onMouseLeave={() => setActiveMenu(null)}
|
|
>
|
|
<button className="flex items-center gap-1 hover:text-purple-600 transition-colors duration-200 font-semibold">
|
|
Features
|
|
{activeMenu === 'features' ? (
|
|
<ChevronUp className="w-4 h-4" />
|
|
) : (
|
|
<ChevronDown className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
|
|
{activeMenu === 'features' && (
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-full pt-4 w-[900px]">
|
|
<div className="bg-white rounded-2xl shadow-2xl border border-gray-100 p-8">
|
|
<div className="grid grid-cols-3 gap-6">
|
|
{megaMenuData.map((item, idx) => (
|
|
<Link
|
|
key={idx}
|
|
href={item.route}
|
|
className="group/item flex items-start gap-4 p-4 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-blue-50 transition-all duration-200 border border-transparent hover:border-purple-100"
|
|
>
|
|
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
|
|
<item.icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h4 className="font-semibold text-gray-900 group-hover/item:text-purple-600 transition-colors text-sm leading-tight">
|
|
{item.title}
|
|
</h4>
|
|
{item.badge && (
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
|
item.badge === "Popular"
|
|
? "bg-orange-100 text-orange-700"
|
|
: "bg-green-100 text-green-700"
|
|
}`}>
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-600 leading-relaxed mb-2">
|
|
{item.description}
|
|
</p>
|
|
<div className="flex items-center gap-1 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity">
|
|
<span className="text-xs font-medium">Learn more</span>
|
|
<ArrowRight className="w-3 h-3" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Link href="/#pricingSection" className="hover:text-purple-600 transition-colors duration-200">
|
|
Pricing
|
|
</Link>
|
|
|
|
<Link href="/contact" className="hover:text-purple-600 transition-colors duration-200">
|
|
Contact
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 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 transition-colors duration-200">
|
|
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 transition-colors duration-200">
|
|
Sign Up
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu with Sheet Component */}
|
|
<div className="md:hidden">
|
|
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
|
<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 overflow-y-auto">
|
|
<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 transition-colors"
|
|
onClick={handleClose}
|
|
>
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<div className="space-y-4">
|
|
<p className="text-lg font-semibold text-purple-600">Features</p>
|
|
<div className="grid gap-3 ml-2">
|
|
{megaMenuData.map((item, idx) => (
|
|
<Link
|
|
key={idx}
|
|
href={item.route}
|
|
className="flex items-center gap-3 p-3 rounded-lg hover:bg-purple-50 transition-colors"
|
|
onClick={handleClose}
|
|
>
|
|
<item.icon className="w-5 h-5 text-purple-600 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-medium text-sm text-gray-900">{item.title}</p>
|
|
<p className="text-xs text-gray-600">{item.description}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/#pricingSection"
|
|
className="hover:text-purple-600 text-lg transition-colors"
|
|
onClick={handleClose}
|
|
>
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/contact"
|
|
className="hover:text-purple-600 text-lg transition-colors"
|
|
onClick={handleClose}
|
|
>
|
|
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"
|
|
onClick={handleClose}
|
|
>
|
|
<button className="w-full font-bold px-5 py-3 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100 transition-colors">
|
|
Log in
|
|
</button>
|
|
</Link>
|
|
<Link
|
|
href="https://dashboard.planpostai.com/"
|
|
className="w-full"
|
|
onClick={handleClose}
|
|
>
|
|
<button className="w-full font-bold px-5 py-3 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700 transition-colors">
|
|
Sign Up
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |