first commit

2025-12-02 14:42:40 +05:30
commit e87bdd45a1
66 changed files with 9380 additions and 0 deletions
--- a/app/(public)/_homeComponents/Header.tsx
+++ b/app/(public)/_homeComponents/Header.tsx
@@ -0,0 +1,107 @@
+"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;