Redesign homepage with moumoujus-inspired layout

- Add AnnouncementBar with marquee animation
- Add NewHero with floating product card
- Add StatsSection with large stat numbers
- Add FeaturesSection with icons
- Add TestimonialsSection with cards
- Add NewsletterSection with signup form
- Update Header styling for new design
- Update globals.css with marquee animations
- Update page.tsx to use new components

All existing WooCommerce functionality preserved

src/components/layout/Header.tsx

@@ -2,75 +2,89 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence } from "framer-motion";
 import { useCartStore } from "@/stores/cartStore";
-import { formatPrice } from "@/lib/woocommerce";
+import { User, ShoppingBag, Menu } from "lucide-react";
 import MobileMenu from "./MobileMenu";
 import CartDrawer from "@/components/cart/CartDrawer";
 
 export default function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const { items, toggleCart } = useCartStore();
-  
+
   const itemCount = items.reduce((count, item) => count + item.quantity, 0);
 
   return (
     <>
-      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between h-16 md:h-20">
+      <header className="sticky top-10 z-40 bg-white border-b border-[#1A1A1A]/[0.06]">
+        <div className="max-w-[1400px] mx-auto px-6">
+          <div className="flex items-center justify-between h-16">
+            {/* Mobile Menu Button */}
             <button
-              className="md:hidden p-2"
+              className="lg:hidden p-2 -ml-2"
               onClick={() => setMobileMenuOpen(true)}
               aria-label="Open menu"
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
+              <Menu className="w-5 h-5" />
             </button>
 
+            {/* Logo */}
             <Link href="/" className="flex-shrink-0">
-              <img 
-                src="/manoon-logo.jpg" 
-                alt="ManoonOils" 
-                className="h-8 w-[124px] md:h-10 md:w-[154px]"
-              />
+              <span className="font-serif italic text-xl md:text-2xl text-[#1A1A1A]">
+                ManoonOils
+              </span>
             </Link>
 
-            <nav className="hidden md:flex items-center space-x-8">
-              <Link href="/products" className="text-foreground hover:text-accent-dark transition-colors">
+            {/* Desktop Navigation */}
+            <nav className="hidden lg:flex items-center gap-8">
+              <Link
+                href="/products"
+                className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
+              >
                 Products
               </Link>
-              <Link href="/about" className="text-foreground hover:text-accent-dark transition-colors">
+              <Link
+                href="/about"
+                className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
+              >
                 About
               </Link>
-              <Link href="/contact" className="text-foreground hover:text-accent-dark transition-colors">
+              <Link
+                href="/contact"
+                className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
+              >
                 Contact
               </Link>
             </nav>
 
-            <button
-              className="p-2 relative"
-              onClick={toggleCart}
-              aria-label="Open cart"
-            >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
-              </svg>
-              {itemCount > 0 && (
-                <span className="absolute -top-1 -right-1 bg-accent-dark text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
-                  {itemCount}
-                </span>
-              )}
-            </button>
+            {/* Icons */}
+            <div className="flex items-center gap-1">
+              <button
+                className="p-2 hidden sm:block"
+                aria-label="Account"
+              >
+                <User className="w-5 h-5" />
+              </button>
+
+              <button
+                className="p-2 relative"
+                onClick={toggleCart}
+                aria-label="Open cart"
+              >
+                <ShoppingBag className="w-5 h-5" />
+                {itemCount > 0 && (
+                  <span className="absolute -top-0.5 -right-0.5 bg-[#1A1A1A] text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">
+                    {itemCount}
+                  </span>
+                )}
+              </button>
+            </div>
           </div>
         </div>
       </header>
 
       <AnimatePresence>
-        {mobileMenuOpen && (
-          <MobileMenu onClose={() => setMobileMenuOpen(false)} />
-        )}
+        {mobileMenuOpen && <MobileMenu onClose={() => setMobileMenuOpen(false)} />}
       </AnimatePresence>
 
       <CartDrawer />