From fca2c25e12f5891e61f92e08815ddaa554f077d1 Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 16:30:40 +0530
Subject: feat: added frontpage layout

---
 frontend/src/components/header.tsx | 287 +++++++++++++++++++++++++++++++++++++
 1 file changed, 287 insertions(+)
 create mode 100644 frontend/src/components/header.tsx

(limited to 'frontend/src/components/header.tsx')

diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
new file mode 100644
index 0000000..d64061a
--- /dev/null
+++ b/frontend/src/components/header.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Search,
+  ShoppingBag,
+  Heart,
+  User,
+  Menu,
+  Phone,
+  Mail,
+  Truck,
+  RefreshCw,
+  Shield,
+  Globe,
+} from "lucide-react";
+
+export function Header() {
+  const [cartItems] = useState(3);
+  const [wishlistItems] = useState(5);
+
+  const categories = [
+    {
+      title: "Women",
+      items: [
+        { name: "Dresses", href: "/women/dresses" },
+        { name: "Tops & Blouses", href: "/women/tops" },
+        { name: "Pants & Jeans", href: "/women/pants" },
+        { name: "Outerwear", href: "/women/outerwear" },
+        { name: "Accessories", href: "/women/accessories" },
+      ],
+    },
+    {
+      title: "Men",
+      items: [
+        { name: "T-Shirts", href: "/men/tshirts" },
+        { name: "Shirts", href: "/men/shirts" },
+        { name: "Pants & Jeans", href: "/men/pants" },
+        { name: "Jackets", href: "/men/jackets" },
+        { name: "Accessories", href: "/men/accessories" },
+      ],
+    },
+    {
+      title: "Kids",
+      items: [
+        { name: "Boys", href: "/kids/boys" },
+        { name: "Girls", href: "/kids/girls" },
+        { name: "Baby", href: "/kids/baby" },
+        { name: "Shoes", href: "/kids/shoes" },
+      ],
+    },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      {/* Top banner */}
+      <div className="bg-black text-white text-center py-2 px-4">
+        <p className="text-sm font-medium">
+          FREE SHIPPING ON ORDERS OVER $100 • NEW ARRIVALS EVERY WEEK
+        </p>
+      </div>
+
+      {/* Announcement bar */}
+      <div className="bg-neutral-100 text-center py-2 px-4">
+        <p className="text-sm">
+          🔥 <span className="font-semibold">WINTER SALE</span> - Up to 50% off on selected items
+        </p>
+      </div>
+
+      {/* Main header */}
+      <div className="border-b">
+        <div className="container mx-auto px-4">
+          <div className="flex h-16 items-center justify-between">
+            {/* Mobile menu */}
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-[300px] sm:w-[400px]">
+                <SheetHeader>
+                  <SheetTitle>Menu</SheetTitle>
+                </SheetHeader>
+                <nav className="mt-6 space-y-4">
+                  {categories.map((category) => (
+                    <div key={category.title} className="space-y-2">
+                      <h3 className="font-semibold">{category.title}</h3>
+                      <div className="ml-4 space-y-1">
+                        {category.items.map((item) => (
+                          <Link
+                            key={item.name}
+                            href={item.href}
+                            className="block py-1 text-sm text-muted-foreground hover:text-foreground"
+                          >
+                            {item.name}
+                          </Link>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </nav>
+              </SheetContent>
+            </Sheet>
+
+            {/* Logo */}
+            <div className="flex items-center">
+              <Link href="/" className="flex items-center space-x-2">
+                <Image
+                  src="/black-logo.png"
+                  alt="blcklst"
+                  width={120}
+                  height={40}
+                  className="h-8 w-auto"
+                  priority
+                />
+              </Link>
+            </div>
+
+            {/* Desktop Navigation */}
+            <NavigationMenu className="hidden md:flex">
+              <NavigationMenuList>
+                {categories.map((category) => (
+                  <NavigationMenuItem key={category.title}>
+                    <NavigationMenuTrigger className="font-medium">
+                      {category.title}
+                    </NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                      <div className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                        {category.items.map((item) => (
+                          <NavigationMenuLink key={item.name} asChild>
+                            <Link
+                              href={item.href}
+                              className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                            >
+                              <div className="text-sm font-medium leading-none">{item.name}</div>
+                            </Link>
+                          </NavigationMenuLink>
+                        ))}
+                      </div>
+                    </NavigationMenuContent>
+                  </NavigationMenuItem>
+                ))}
+                <NavigationMenuItem>
+                  <NavigationMenuLink asChild>
+                    <Link href="/sale" className="font-medium text-red-600 hover:text-red-700">
+                      Sale
+                    </Link>
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+
+            {/* Search Bar */}
+            <div className="hidden lg:flex flex-1 max-w-sm mx-8">
+              <div className="relative w-full">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search products..."
+                  className="pl-10 pr-4"
+                />
+              </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center space-x-2">
+              {/* Search icon for mobile */}
+              <Button variant="ghost" size="icon" className="lg:hidden">
+                <Search className="h-5 w-5" />
+              </Button>
+
+              {/* User menu */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    <User className="h-5 w-5" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  <DropdownMenuItem>
+                    <User className="mr-2 h-4 w-4" />
+                    My Account
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Truck className="mr-2 h-4 w-4" />
+                    Orders
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Heart className="mr-2 h-4 w-4" />
+                    Wishlist
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    Sign In
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Create Account
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              {/* Wishlist */}
+              <Button variant="ghost" size="icon" className="relative">
+                <Heart className="h-5 w-5" />
+                {wishlistItems > 0 && (
+                  <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs">
+                    {wishlistItems}
+                  </Badge>
+                )}
+              </Button>
+
+              {/* Cart */}
+              <Button variant="ghost" size="icon" className="relative">
+                <ShoppingBag className="h-5 w-5" />
+                {cartItems > 0 && (
+                  <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs">
+                    {cartItems}
+                  </Badge>
+                )}
+              </Button>
+
+              {/* Language/Currency */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    <Globe className="h-5 w-5" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem>🇺🇸 USD</DropdownMenuItem>
+                  <DropdownMenuItem>🇪🇺 EUR</DropdownMenuItem>
+                  <DropdownMenuItem>🇬🇧 GBP</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Service features */}
+      <div className="hidden md:block border-b bg-neutral-50">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-4 gap-4 py-2 text-xs text-muted-foreground">
+            <div className="flex items-center justify-center space-x-1">
+              <Truck className="h-3 w-3" />
+              <span>Free Shipping</span>
+            </div>
+            <div className="flex items-center justify-center space-x-1">
+              <RefreshCw className="h-3 w-3" />
+              <span>30-Day Returns</span>
+            </div>
+            <div className="flex items-center justify-center space-x-1">
+              <Shield className="h-3 w-3" />
+              <span>Secure Payment</span>
+            </div>
+            <div className="flex items-center justify-center space-x-1">
+              <Phone className="h-3 w-3" />
+              <span>24/7 Support</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+} 
\ No newline at end of file
-- 
cgit v1.2.3-59-g8ed1b