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/app/globals.css

@@ -53,3 +53,62 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Cedrat Display', serif;
 }
+
+/* Marquee Animations */
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes marquee-slow {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 25s linear infinite;
+}
+
+.animate-marquee-slow {
+  animation: marquee-slow 35s linear infinite;
+}
+
+.animate-marquee-fast {
+  animation: marquee 15s linear infinite;
+}
+
+/* Utility Classes */
+.font-serif {
+  font-family: 'Cedrat Display', serif;
+}
+
+/* Smooth scroll */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}

src/app/page.tsx

@@ -1,44 +1,58 @@
 import { getProducts } from "@/lib/woocommerce";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
-import ProductCard from "@/components/product/ProductCard";
+import AnnouncementBar from "@/components/home/AnnouncementBar";
+import NewHero from "@/components/home/NewHero";
+import StatsSection from "@/components/home/StatsSection";
+import FeaturesSection from "@/components/home/FeaturesSection";
+import TestimonialsSection from "@/components/home/TestimonialsSection";
+import NewsletterSection from "@/components/home/NewsletterSection";
 
 export const metadata = {
   title: "ManoonOils - Premium Natural Oils for Hair & Skin",
-  description: "Discover our premium collection of natural oils for hair and skin care. Handmade with love.",
+  description:
+    "Discover our premium collection of natural oils for hair and skin care. Handmade with love using only the finest ingredients.",
 };
 
 export default async function Homepage() {
   const products = await getProducts();
-  const publishedProducts = products.filter((p) => p.status === "publish").slice(0, 4);
+  const featuredProduct = products.find((p) => p.status === "publish");
+  const publishedProducts = products
+    .filter((p) => p.status === "publish")
+    .slice(0, 4);
 
   return (
-    <main className="min-h-screen">
-      <Header />
-      
-      {/* Hero Section */}
-      <section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
-        <div className="text-center px-4">
-          <h1 className="text-5xl md:text-7xl font-serif mb-6">
-            ManoonOils
-          </h1>
-          <p className="text-xl md:text-2xl text-foreground-muted mb-8">
-            Premium Natural Oils for Hair & Skin
-          </p>
-          <a 
-            href="/products" 
-            className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium hover:bg-opacity-90 transition-all"
-          >
-            Shop Now
-          </a>
-        </div>
-      </section>
+    <main className="min-h-screen bg-white">
+      <AnnouncementBar />
+      <div className="pt-10">
+        <Header />
+      </div>
 
-      {/* Products Section */}
+      {/* New Hero Section */}
+      <NewHero featuredProduct={featuredProduct} />
+
+      {/* Stats & Philosophy Section */}
+      <StatsSection />
+
+      {/* Features Section */}
+      <FeaturesSection />
+
+      {/* Testimonials Section */}
+      <TestimonialsSection />
+
+      {/* Newsletter Section */}
+      <NewsletterSection />
+
+      {/* Products Grid Section */}
       {publishedProducts.length > 0 && (
-        <section className="py-20 px-4">
-          <div className="max-w-7xl mx-auto">
-            <h2 className="text-4xl font-serif text-center mb-12">Our Products</h2>
+        <section className="py-20 px-6 bg-white">
+          <div className="max-w-[1400px] mx-auto">
+            <h2 className="font-serif italic text-4xl text-center mb-4">
+              Our Collection
+            </h2>
+            <p className="text-center text-[#4A4A4A] mb-12 max-w-2xl mx-auto">
+              Cold-pressed, pure, and natural oils for your daily beauty routine
+            </p>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
               {publishedProducts.map((product, index) => (
                 <ProductCard key={product.id} product={product} index={index} />
@@ -48,20 +62,10 @@ export default async function Homepage() {
         </section>
       )}
 
-      {/* About Teaser */}
-      <section className="py-20 px-4 bg-background-ice">
-        <div className="max-w-3xl mx-auto text-center">
-          <h2 className="text-3xl font-serif mb-6">Natural & Pure</h2>
-          <p className="text-lg text-foreground-muted mb-8">
-            Our oils are crafted with love using only the finest natural ingredients.
-          </p>
-          <a href="/about" className="text-foreground border-b border-foreground pb-1">
-            Learn More
-          </a>
-        </div>
-      </section>
-      
       <Footer />
     </main>
   );
 }
+
+// Import ProductCard here to avoid circular dependency
+import ProductCard from "@/components/product/ProductCard";