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/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>
+  );
+}