107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { Menu, X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { home } from "@/services/Constants";
|
|
|
|
const Header = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 10);
|
|
window.addEventListener("scroll", handleScroll);
|
|
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<motion.header
|
|
initial={{ y: -80 }}
|
|
animate={{ y: 0 }}
|
|
className={`fixed top-0 w-full z-50 transition-all duration-300
|
|
${scrolled ? "bg-white shadow-lg" : "bg-white md:bg-transparent"}
|
|
`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center py-4">
|
|
|
|
{/* 🔥 Logo */}
|
|
<motion.div whileHover={{ scale: 1.05 }}>
|
|
<Link href="/">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Company Logo"
|
|
className="w-36 h-auto object-contain cursor-pointer"
|
|
/>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
{/* 🖥️ Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
{home.navigation.map((item) => (
|
|
<motion.div key={item.name} whileHover={{ scale: 1.05 }}>
|
|
<Link
|
|
href={item.href}
|
|
className="text-gray-700 hover:text-purple-600 font-medium"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
<Button variant="ghost" className="font-medium">
|
|
Sign In
|
|
</Button>
|
|
<Button className="bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium">
|
|
Start Free Trial
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 📱 Mobile Menu Icon */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="md:hidden p-2 rounded-lg hover:bg-gray-100"
|
|
>
|
|
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* 📱 Mobile Drawer Menu */}
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
transition={{ duration: 0.2 }}
|
|
className="md:hidden pb-6"
|
|
>
|
|
<div className="flex flex-col space-y-4">
|
|
{home.navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-gray-700 hover:text-purple-600 font-medium"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<Button variant="outline" className="w-full">
|
|
Sign In
|
|
</Button>
|
|
<Button className="w-full bg-gradient-to-r from-purple-600 to-pink-600">
|
|
Start Free Trial
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</motion.header>
|
|
);
|
|
};
|
|
|
|
export default Header; |