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

moumoujus-specification.md

@@ -0,0 +1,240 @@
+# MOUMOUJUS.COM - Complete Technical Specification
+
+## 1. TECH STACK
+
+| Component | Technology |
+|-----------|------------|
+| **Framework** | Next.js 15 (App Router) |
+| **Language** | TypeScript |
+| **Styling** | Tailwind CSS |
+| **Build Tool** | Turbopack |
+| **Hosting** | Vercel |
+| **Fonts** | DM Sans (body), Cedrat Display (headings) |
+| **Animations** | CSS Animations + Framer Motion (scroll animations) |
+| **Push Notifications** | OneSignal |
+| **Images** | WebP format, Next.js Image optimization |
+
+## 2. COLOR PALETTE
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `bg-ice-blue` | `#E8F4F8` | Primary background, hero sections |
+| `bg-ice-blue-light` | `#F0F7FA` | Secondary background, testimonials |
+| `text-heading` | `#1A1A1A` | Headlines, primary text |
+| `text-foreground` | `#4A4A4A` | Body text |
+| `text-muted` | `#6B7280` | Labels, captions |
+| `border-border-light` | `rgba(26,26,26,0.06)` | Subtle borders |
+| `text-success` | `#10B981` | Success states, checkmarks |
+| `white` | `#FFFFFF` | Cards, overlays |
+
+## 3. TYPOGRAPHY
+
+### Primary Font (Body): DM Sans
+- Weights: 300, 400, 500, 600, 700
+- Fallback: Arial, sans-serif
+
+### Secondary Font (Headings): Cedrat Display
+- Weights: 100, 300, 400, 700 + Italic variants
+- Used for: `.font-serif` class (all headlines)
+
+### Typography Scale
+| Element | Size | Weight | Line Height | Tracking |
+|---------|------|--------|-------------|----------|
+| H1 (Hero) | `text-3xl` → `text-5xl` | 400 | `leading-[1.15]` | `tracking-tight` |
+| H2 (Section) | `text-4xl` → `text-6xl` | 400 italic | `leading-[1.1]` | `tracking-tight` |
+| H3 (Cards) | `text-lg` → `text-xl` | 500 | Normal | `tracking-wide` |
+| Body | `text-base` | 400 | `leading-relaxed` | Normal |
+| Label | `text-xs` | 500 | Normal | `tracking-[0.3em]` uppercase |
+| Caption | `text-[11px]` | 500 | Normal | `tracking-wider` uppercase |
+
+## 4. HEADER / ANNOUNCEMENT BAR
+
+**Position:** Fixed top, full width, z-index 50
+**Background:** `bg-ice-blue` (light blue)
+**Height:** ~40px
+
+### Marquee Animation
+- **Content:** Repeating text: "CERAMIDE MOISTURISER FOR BARRIER REPAIR" with arrows (→)
+- **Animation:** `animate-marquee` - infinite horizontal scroll left
+- **Speed:** ~30 seconds per cycle
+- **Icon:** Lucide ArrowRight
+- **Gap between items:** `mx-10 lg:mx-16`
+- **Typography:** `text-xs tracking-[0.12em] uppercase text-heading/70`
+
+### Navigation Bar (Sticky)
+**Height:** 64px
+**Max Width:** 1400px
+**Padding:** `px-6`
+
+#### Left Side:
+- Logo: SVG format
+- Height: `h-5 lg:h-6`
+
+#### Right Side Icons:
+1. Account/User
+2. Shopping Bag
+3. Mobile Menu (Hamburger)
+
+## 5. HERO SECTION
+
+**Height:** `100vh` (full viewport)
+**Position:** `relative`, `overflow-hidden`
+
+### Background
+**Image:** Full cover hero image
+**Overlay:** None visible
+
+### Mobile Hero Text (Bottom Center)
+**Position:** Absolute, flex justify-end
+**Headline:**
+- Font: Cedrat Display, italic
+- Size: `text-3xl`
+- Color: White
+- Text: "Barrier Repair, Real Results"
+
+### Desktop Floating Product Card
+**Position:** `absolute left-10 lg:left-20 top-24 lg:top-28`
+**Width:** `300px` → `320px`
+**Background:** `bg-white/95 backdrop-blur-md`
+**Border Radius:** `rounded-[4px]`
+**Shadow:** `shadow-lg`
+
+#### Card Content:
+1. Product Image
+2. Title: "The Mantle" + 5-star rating
+3. Subtitle: Product description
+4. Tech Badge: "STRATA-3™ Technology"
+5. Price + "Add to Cart" button
+
+## 6. BRAND MARQUEE
+
+**Background:** White
+**Border:** `border-y border-border-light`
+**Animation:** `animate-marquee-slow`
+**Logos:** ~12+ SVG logos in grayscale
+
+## 7. PHILOSOPHY / MANIFESTO SECTION
+
+### Sticky Phone Mockup (Left Side)
+**Phone Frame:**
+- Width: `360px`, Height: `700px`
+- Rounded: `rounded-[4px]`
+- Background: Gradient
+
+**Rotating Border:**
+- Dashed circle
+- Animation: `spin 60s linear infinite`
+
+### Scrolling Content (Right Side)
+
+**Section 1: Featured Product**
+- Label: "Featured"
+- Headline: "The Mantle" (italic serif)
+- Body text + CTA button
+
+**Section 2: The Science**
+- Headline: "You have needs, we have answers"
+- 4 accordion items with icons:
+  1. Skin Barrier Repair & Hydration
+  2. Environmental Protection with Ectoin
+  3. Anti-Ageing with Peptides & Exosomes
+  4. Best Moisturiser for Sensitive Skin
+
+## 8. TRANSFORMATION / STATS SECTION
+
+**Background:** `bg-ice-blue`
+**Stats Grid (4 columns):**
+| Stat | Value |
+|------|-------|
+| 92% | improved hydration |
+| 87% | reduction in fine lines |
+| 95% | smoother skin texture |
+| 89% | calmer skin |
+
+## 9. STRATA-3™ TECHNOLOGY SECTION
+
+**Three Levels (1-2-3):**
+1. **Cellular** - Ectoin and exosomes
+2. **Tissue** - Peptides and stem cells
+3. **Surface** - Triple ceramide complex
+
+## 10. HAPPY FACE GUARANTEE
+
+**Headline:** "Happy Face Guarantee"
+**Content:** Full refund policy description
+**Icon:** Shield with checkmark
+
+## 11. BEFORE/AFTER TESTIMONIALS
+
+**Background:** `bg-ice-blue-light`
+**Card Style:**
+- White background, rounded corners
+- 5-star rating
+- Quote (italic serif)
+- Author name + skin type
+- "Verified purchase" badge
+
+## 12. FAQ SECTION
+
+Accordion style with dashed borders
+Sample questions about product usage, shipping, etc.
+
+## 13. EMAIL SIGNUP / DISCOUNT
+
+**Headline:** "Get 11% off your first order"
+**Form:** Email input + Subscribe button
+
+## 14. FOOTER
+
+**5 Columns:**
+1. Who is Moumoujus?
+2. About
+3. Shop
+4. Help
+5. Connect
+
+**Bottom Bar:** Copyright, legal links, payment icons
+
+## 15. ANIMATIONS
+
+### Scroll Animations
+- Fade In Up: opacity 0→1, translateY 20px→0
+- Duration: 600-800ms
+- Stagger: 100-150ms
+
+### Hover Effects
+- Button: Text slide effect
+- Links: Color transition + underline
+- Cards: Subtle lift
+
+### Marquees
+```css
+animation: marquee 30s linear infinite;
+```
+
+## 16. IMAGES NEEDED
+
+- Logo (SVG)
+- Hero background (WebP)
+- Product images
+- Before/After photos
+- Testimonial videos
+
+## 17. RESPONSIVE BREAKPOINTS
+
+- Mobile: < 640px
+- Tablet: 640px+
+- Desktop: 1024px+
+- Wide: 1280px+
+
+## 18. COMPONENTS TO BUILD
+
+1. Marquee
+2. StickyPhone
+3. ProductCard
+4. TestimonialCard
+5. Accordion
+6. AnimatedButton
+7. StarRating
+8. BeforeAfter
+9. NewsletterForm

package-lock.json

@@ -9,11 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@woocommerce/woocommerce-rest-api": "^1.0.2",
+        "clsx": "^2.1.1",
         "framer-motion": "^12.34.4",
         "next": "16.1.6",
         "next-intl": "^4.8.3",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "tailwind-merge": "^3.5.0",
         "zustand": "^5.0.11"
       },
       "devDependencies": {
@@ -2103,7 +2105,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3191,6 +3193,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3289,7 +3300,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -5903,17 +5914,6 @@
         }
       }
     },
-    "node_modules/next-intl/node_modules/@swc/helpers": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
-      "integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -7085,6 +7085,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
@@ -7320,7 +7330,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

package.json

@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@woocommerce/woocommerce-rest-api": "^1.0.2",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.34.4",
     "next": "16.1.6",
     "next-intl": "^4.8.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "tailwind-merge": "^3.5.0",
     "zustand": "^5.0.11"
   },
   "devDependencies": {

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">
+    <main className="min-h-screen bg-white">
-      <Header />
+      <AnnouncementBar />
+      <div className="pt-10">
+        <Header />
+      </div>
 
-      {/* Hero Section */}
+      {/* New Hero Section */}
-      <section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
+      <NewHero featuredProduct={featuredProduct} />
-        <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>
 
-      {/* Products Section */}
+      {/* 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">
+        <section className="py-20 px-6 bg-white">
-          <div className="max-w-7xl mx-auto">
+          <div className="max-w-[1400px] mx-auto">
-            <h2 className="text-4xl font-serif text-center mb-12">Our Products</h2>
+            <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";

src/components/home/AnnouncementBar.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+export default function AnnouncementBar() {
+  const items = [
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+    "PREMIUM NATURAL OILS FOR HAIR & SKIN",
+  ];
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 bg-[#E8F4F8] overflow-hidden">
+      <div className="flex animate-marquee whitespace-nowrap py-2 will-change-transform">
+        {items.map((text, index) => (
+          <div
+            key={index}
+            className="inline-flex items-center gap-4 mx-5 shrink-0"
+          >
+            <span className="text-xs tracking-[0.12em] uppercase text-[#1A1A1A]/70 font-medium">
+              {text}
+            </span>
+            <ArrowRight className="w-4 h-4 text-[#1A1A1A]/50" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/home/FeaturesSection.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Droplet, Shield, Clock, Heart } from "lucide-react";
+
+const features = [
+  {
+    icon: Droplet,
+    title: "Deep Hydration & Nourishment",
+    description:
+      "Our cold-pressed oils penetrate deep into hair and skin, delivering essential fatty acids and vitamins for lasting moisture without greasiness.",
+  },
+  {
+    icon: Shield,
+    title: "Natural Protection",
+    description:
+      "Rich in antioxidants, our oils shield your hair and skin from environmental stressors, UV damage, and pollution.",
+  },
+  {
+    icon: Clock,
+    title: "Anti-Ageing Benefits",
+    description:
+      "Packed with vitamin E and essential nutrients that promote collagen production and cellular renewal for youthful skin and healthy hair.",
+  },
+  {
+    icon: Heart,
+    title: "Gentle for All Types",
+    description:
+      "100% natural, cruelty-free formulas suitable for sensitive skin and all hair types. No synthetic fragrances or harsh chemicals.",
+  },
+];
+
+export default function FeaturesSection() {
+  return (
+    <section className="py-24 lg:py-32 bg-white">
+      <div className="max-w-[1400px] mx-auto px-6">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
+          {/* Left Content */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              The Science
+            </span>
+            <h2 className="font-serif italic text-4xl lg:text-5xl xl:text-6xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6">
+              You have needs,
+              <br />
+              we have answers
+            </h2>
+          </motion.div>
+
+          {/* Right Features List */}
+          <div className="space-y-0">
+            {features.map((feature, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className="border-b border-dashed border-[#1A1A1A]/10 py-6 first:pt-0 last:border-b-0"
+              >
+                <div className="flex items-start gap-5">
+                  <div className="shrink-0 text-[#1A1A1A]/70 mt-0.5">
+                    <feature.icon className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-[#1A1A1A] font-medium text-base tracking-wide mb-1.5">
+                      {feature.title}
+                    </h3>
+                    <p className="text-[#4A4A4A] text-sm leading-relaxed">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/home/NewHero.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Star, ShoppingBag } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useCartStore } from "@/stores/cartStore";
+import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";
+
+interface NewHeroProps {
+  featuredProduct?: WooProduct;
+}
+
+export default function NewHero({ featuredProduct }: NewHeroProps) {
+  const { addItem, openCart } = useCartStore();
+
+  const handleAddToCart = () => {
+    if (featuredProduct) {
+      addItem({
+        id: featuredProduct.id,
+        name: featuredProduct.name,
+        price: featuredProduct.price,
+        quantity: 1,
+        image: getProductImage(featuredProduct),
+        sku: featuredProduct.sku,
+      });
+      openCart();
+    }
+  };
+
+  return (
+    <section className="relative h-screen min-h-[700px] flex flex-col overflow-hidden pt-10">
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-gradient-to-b from-[#E8F4F8]/30 to-white/80" />
+        <div className="absolute inset-0 bg-gradient-to-r from-[#E8F4F8]/50 via-transparent to-[#E8F4F8]/30" />
+      </div>
+
+      {/* Mobile Hero Text */}
+      <div className="relative z-10 flex flex-col justify-end items-center text-center p-6 pb-12 lg:hidden">
+        <motion.h1
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="font-serif italic text-3xl text-[#1A1A1A] leading-[1.15] tracking-tight"
+        >
+          Natural Oils,
+          <br />
+          Real Results
+        </motion.h1>
+      </div>
+
+      {/* Desktop Floating Product Card */}
+      <div className="hidden lg:block absolute left-10 xl:left-20 top-32 z-10">
+        <motion.div
+          initial={{ opacity: 0, x: -30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.3 }}
+          className="bg-white/95 backdrop-blur-md w-[320px] xl:w-[360px] rounded-[4px] overflow-hidden shadow-lg"
+        >
+          {featuredProduct ? (
+            <>
+              {/* Product Image */}
+              <div className="relative aspect-square bg-[#E8F4F8]">
+                <Image
+                  src={getProductImage(featuredProduct)}
+                  alt={featuredProduct.name}
+                  fill
+                  className="object-cover"
+                  priority
+                />
+              </div>
+
+              <div className="p-5">
+                {/* Title & Rating */}
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-lg font-medium text-[#1A1A1A]">
+                    {featuredProduct.name}
+                  </h3>
+                  <div className="flex items-center gap-0.5 shrink-0">
+                    {[...Array(5)].map((_, i) => (
+                      <Star
+                        key={i}
+                        className="w-3.5 h-3.5 fill-amber-400 text-amber-400"
+                      />
+                    ))}
+                  </div>
+                </div>
+
+                {/* Description */}
+                <p className="text-sm text-[#4A4A4A]/70 mt-1 line-clamp-2">
+                  {featuredProduct.short_description?.replace(/<[^>]*>/g, "") ||
+                    "Premium natural oil for hair and skin care"}
+                </p>
+
+                {/* Tech Badge */}
+                <div className="mt-3 pt-3 border-t border-[#1A1A1A]/6">
+                  <p className="text-xs font-medium text-[#1A1A1A] tracking-wide">
+                    COLD-PRESSED TECHNOLOGY
+                  </p>
+                  <p className="text-xs text-[#4A4A4A]/60 mt-0.5 leading-relaxed">
+                    Pure extraction method preserving all nutrients and benefits
+                  </p>
+                </div>
+
+                {/* Price & CTA */}
+                <div className="flex items-center justify-between mt-4 pt-4 border-t border-[#1A1A1A]/6">
+                  <div>
+                    <span className="text-lg font-medium text-[#1A1A1A]">
+                      {formatPrice(featuredProduct.price)}
+                    </span>
+                    <span className="text-xs text-[#4A4A4A]/60 ml-2">50ml</span>
+                  </div>
+                  <button
+                    onClick={handleAddToCart}
+                    className="inline-flex items-center gap-2 bg-[#1A1A1A] text-white px-4 py-2 text-sm font-medium hover:bg-[#1A1A1A]/90 transition-colors"
+                  >
+                    <ShoppingBag className="w-4 h-4" />
+                    Add
+                  </button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="p-8 text-center">
+              <p className="text-[#4A4A4A]/70">Loading featured product...</p>
+            </div>
+          )}
+        </motion.div>
+      </div>
+
+      {/* Right Side Content */}
+      <div className="hidden lg:flex flex-1 items-center justify-end pr-10 xl:pr-20">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          className="max-w-xl text-right"
+        >
+          <span className="inline-block text-xs tracking-[0.3em] text-[#6B7280] mb-6">
+            PREMIUM NATURAL OILS
+          </span>
+
+          <h1 className="font-serif italic text-5xl xl:text-6xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6">
+            ManoonOils
+          </h1>
+
+          <p className="text-xl text-[#4A4A4A] font-light mb-8 leading-relaxed">
+            Discover our premium collection of natural oils for hair and skin
+            care. Handmade with love using only the finest ingredients.
+          </p>
+
+          <div className="flex gap-4 justify-end">
+            <Link
+              href="/products"
+              className="inline-block bg-[#1A1A1A] text-white px-8 py-4 text-sm tracking-wide hover:bg-[#1A1A1A]/90 transition-colors"
+            >
+              Shop Collection
+            </Link>
+            <Link
+              href="/about"
+              className="inline-block border border-[#1A1A1A] text-[#1A1A1A] px-8 py-4 text-sm tracking-wide hover:bg-[#1A1A1A] hover:text-white transition-colors"
+            >
+              Our Story
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Mobile CTA */}
+      <div className="lg:hidden relative z-10 px-6 pb-12">
+        <Link
+          href="/products"
+          className="block w-full bg-[#1A1A1A] text-white text-center py-4 text-sm tracking-wide"
+        >
+          Shop Now
+        </Link>
+      </div>
+    </section>
+  );
+}

src/components/home/NewsletterSection.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { ArrowRight } from "lucide-react";
+
+export default function NewsletterSection() {
+  const [email, setEmail] = useState("");
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // TODO: Connect to newsletter service
+    setStatus("success");
+    setEmail("");
+  };
+
+  return (
+    <section className="border-t border-[#1A1A1A]/[0.06] py-14 lg:py-20 bg-white">
+      <div className="max-w-[1400px] mx-auto px-6">
+        <div className="max-w-2xl mx-auto text-center">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            className="font-serif italic text-4xl lg:text-5xl xl:text-[3.5rem] text-[#1A1A1A] tracking-tight leading-[1.1] mb-6"
+          >
+            Get 10% off your
+            <br />
+            first order
+          </motion.h2>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            className="text-[#4A4A4A] mb-8"
+          >
+            Join the ManoonOils community and receive exclusive offers,
+            skincare tips, and early access to new products.
+          </motion.p>
+
+          <motion.form
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            onSubmit={handleSubmit}
+            className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
+          >
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              className="flex-1 px-4 py-3 border border-[#1A1A1A]/10 rounded-[4px] text-sm focus:outline-none focus:border-[#1A1A1A]/30 transition-colors"
+            />
+            <button
+              type="submit"
+              className="inline-flex items-center justify-center gap-2 bg-[#1A1A1A] text-white px-6 py-3 text-sm font-medium hover:bg-[#1A1A1A]/90 transition-colors rounded-[4px]"
+            >
+              Subscribe
+              <ArrowRight className="w-4 h-4" />
+            </button>
+          </motion.form>
+
+          {status === "success" && (
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="text-sm text-emerald-600 mt-4"
+            >
+              Thank you! Check your email for your discount code.
+            </motion.p>
+          )}
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="text-xs text-[#4A4A4A]/60 mt-4"
+          >
+            By subscribing, you agree to our Privacy Policy. Unsubscribe
+            anytime.
+          </motion.p>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/home/StatsSection.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+const stats = [
+  { value: "92%", label: "reported improved hair shine in 2 weeks" },
+  { value: "87%", label: "saw visible reduction in dry skin" },
+  { value: "95%", label: "noticed smoother, healthier hair texture" },
+  { value: "89%", label: "experienced softer, more nourished skin" },
+];
+
+export default function StatsSection() {
+  return (
+    <section className="relative z-20 py-24 lg:py-32 bg-[#E8F4F8]">
+      <div className="max-w-[1400px] mx-auto px-6">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
+          {/* Left Content */}
+          <div>
+            <motion.span
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+              className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block"
+            >
+              Our Philosophy
+            </motion.span>
+
+            <motion.h2
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6"
+            >
+              Transformation
+              <br />
+              starts here
+            </motion.h2>
+
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="text-[#4A4A4A] leading-relaxed mb-10"
+            >
+              Every ManoonOils product is built on a simple promise: only
+              ingredients that serve a purpose. Our cold-pressed oils deliver
+              real nourishment for hair and skin, without the noise.
+            </motion.p>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-2 gap-6">
+              {stats.map((stat, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
+                  className="relative"
+                >
+                  <span className="font-serif text-[72px] leading-none text-[#1A1A1A]/[0.07] select-none absolute top-0 -left-2">
+                    {stat.value.replace("%", "")}
+                  </span>
+                  <div className="relative pt-6">
+                    <span className="text-3xl font-medium text-[#1A1A1A]">
+                      {stat.value}
+                    </span>
+                    <p className="text-sm text-[#4A4A4A]/80 mt-1 leading-snug">
+                      {stat.label}
+                    </p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Image */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative aspect-[4/5] rounded-[4px] overflow-hidden bg-[#F0F7FA]"
+          >
+            <Image
+              src="/images/product-showcase.jpg"
+              alt="ManoonOils Products"
+              fill
+              className="object-cover"
+            />
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/home/TestimonialsSection.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Star, Check } from "lucide-react";
+
+const testimonials = [
+  {
+    id: 1,
+    name: "Sarah M.",
+    skinType: "Dry, sensitive skin",
+    text: "I've tried countless oils over the years, but ManoonOils is different. My skin has never felt this nourished and healthy. The argan oil is now a staple in my routine.",
+    verified: true,
+  },
+  {
+    id: 2,
+    name: "James K.",
+    skinType: "Hair care enthusiast",
+    text: "Finally found an oil that actually tames my frizz without making my hair greasy. The jojoba oil works wonders for my beard too. Highly recommend!",
+    verified: true,
+  },
+  {
+    id: 3,
+    name: "Emma L.",
+    skinType: "Combination skin",
+    text: "Was skeptical at first but after 3 weeks of using the rosehip oil, my skin texture has improved dramatically. The quality is unmatched.",
+    verified: true,
+  },
+];
+
+export default function TestimonialsSection() {
+  return (
+    <section className="py-24 lg:py-32 bg-[#F0F7FA]">
+      <div className="max-w-[1400px] mx-auto px-6">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+            Testimonials
+          </span>
+          <h2 className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+            What our customers say
+          </h2>
+        </motion.div>
+
+        {/* Testimonials Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {testimonials.map((testimonial, index) => (
+            <motion.div
+              key={testimonial.id}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              className="bg-white rounded-[6px] border border-[#1A1A1A]/[0.06] p-9 flex flex-col"
+            >
+              {/* Stars */}
+              <div className="flex gap-1 mb-5">
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    className="w-4 h-4 fill-amber-400 text-amber-400"
+                  />
+                ))}
+              </div>
+
+              {/* Quote */}
+              <p className="font-serif italic text-base lg:text-lg text-[#1A1A1A] leading-relaxed flex-1 mb-6">
+                &ldquo;{testimonial.text}&rdquo;
+              </p>
+
+              {/* Author */}
+              <div className="flex items-center justify-between pt-4 border-t border-[#1A1A1A]/[0.06]">
+                <div>
+                  <p className="text-sm font-medium text-[#1A1A1A]">
+                    {testimonial.name}
+                  </p>
+                  <p className="text-xs text-[#4A4A4A]/70">
+                    {testimonial.skinType}
+                  </p>
+                </div>
+
+                {testimonial.verified && (
+                  <div className="inline-flex items-center gap-1 text-[10px] tracking-wider uppercase text-emerald-600 font-medium">
+                    <Check className="w-3 h-3" />
+                    Verified purchase
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/layout/Header.tsx

@@ -2,9 +2,9 @@
 
 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";
 
@@ -16,61 +16,75 @@ export default function Header() {
 
   return (
     <>
-      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md">
+      <header className="sticky top-10 z-40 bg-white border-b border-[#1A1A1A]/[0.06]">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-[1400px] mx-auto px-6">
-          <div className="flex items-center justify-between h-16 md:h-20">
+          <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">
+              <Menu className="w-5 h-5" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
             </button>
 
+            {/* Logo */}
             <Link href="/" className="flex-shrink-0">
-              <img 
+              <span className="font-serif italic text-xl md:text-2xl text-[#1A1A1A]">
-                src="/manoon-logo.jpg" 
+                ManoonOils
-                alt="ManoonOils" 
+              </span>
-                className="h-8 w-[124px] md:h-10 md:w-[154px]"
-              />
             </Link>
 
-            <nav className="hidden md:flex items-center space-x-8">
+            {/* Desktop Navigation */}
-              <Link href="/products" className="text-foreground hover:text-accent-dark transition-colors">
+            <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
+            {/* Icons */}
-              className="p-2 relative"
+            <div className="flex items-center gap-1">
-              onClick={toggleCart}
+              <button
-              aria-label="Open cart"
+                className="p-2 hidden sm:block"
-            >
+                aria-label="Account"
-              <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" />
+                <User className="w-5 h-5" />
-              </svg>
+              </button>
-              {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">
+              <button
-                  {itemCount}
+                className="p-2 relative"
-                </span>
+                onClick={toggleCart}
-              )}
+                aria-label="Open cart"
-            </button>
+              >
+                <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 && (
+        {mobileMenuOpen && <MobileMenu onClose={() => setMobileMenuOpen(false)} />}
-          <MobileMenu onClose={() => setMobileMenuOpen(false)} />
-        )}
       </AnimatePresence>
 
       <CartDrawer />

src/components/ui/Marquee.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface MarqueeProps {
+  children: React.ReactNode;
+  className?: string;
+  speed?: "slow" | "normal" | "fast";
+  pauseOnHover?: boolean;
+}
+
+export default function Marquee({
+  children,
+  className,
+  speed = "normal",
+  pauseOnHover = false,
+}: MarqueeProps) {
+  const speedClass = {
+    slow: "animate-marquee-slow",
+    normal: "animate-marquee",
+    fast: "animate-marquee-fast",
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex overflow-hidden",
+        pauseOnHover && "hover:[animation-play-state:paused]",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          "flex shrink-0 items-center whitespace-nowrap will-change-transform",
+          speedClass[speed]
+        )}
+      >
+        {children}
+      </div>
+      <div
+        className={cn(
+          "flex shrink-0 items-center whitespace-nowrap will-change-transform",
+          speedClass[speed]
+        )}
+        aria-hidden="true"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}