feat: Landing page design improvements

Based on landing-page-design skill principles:

Homepage:
- Redesigned hero with outcome-focused headline ("Transform Your Hair & Skin")
- Added social proof micro (5 stars + 50,000+ customers)
- Better CTA: "Transform My Hair & Skin" instead of "Shop Now"
- Added trust indicators in hero (30-day guarantee, free shipping, cruelty free)
- Added ProblemSection to create empathy (dry hair, confusing ingredients, no results)
- Added HowItWorks section (3 steps: Choose, Apply, See Results)
- Improved AsSeenIn with scrolling marquee on dark background
- Premium trust badges with stats and icons

Product pages:
- Improved CTA: "Transform My Hair & Skin" (action verb + value)
- Added ProductBenefits section (4 key benefits)
- Added ProductReviews section with customer testimonials
- Added AsSeenIn scrolling banner
- Added trust indicators with icons

Section order now follows proven conversion sequence:
1. Hero (headline + outcome + CTA)
2. Social Proof (trust badges, logos)
3. Problem (empathy)
4. Solution (products)
5. How It Works
6. Testimonials
7. Final CTA

src/components/home/HowItWorks.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function HowItWorks() {
+  const steps = [
+    {
+      number: "01",
+      title: "Choose Your Oil",
+      description: "Select from our collection of pure, cold-pressed oils formulated for your specific hair and skin needs.",
+    },
+    {
+      number: "02",
+      title: "Apply Daily",
+      description: " Massage a few drops into damp hair or skin. Our oils absorb instantly—never greasy, always nourishing.",
+    },
+    {
+      number: "03",
+      title: "See Results",
+      description: "Experience transformation in 4-6 weeks. Shinier hair, radiant skin, and confidence that glows.",
+    },
+  ];
+
+  return (
+    <section className="py-24 bg-white">
+      <div className="container mx-auto px-4">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
+            Simple Process
+          </span>
+          <h2 className="text-3xl md:text-4xl font-medium">
+            How ManoonOils Works
+          </h2>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 max-w-5xl mx-auto">
+          {steps.map((step, index) => (
+            <motion.div
+              key={index}
+              className="relative text-center"
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.15 }}
+            >
+              {/* Connector line (not on last item) */}
+              {index < steps.length - 1 && (
+                <div className="hidden md:block absolute top-10 left-[60%] w-[80%] h-[2px] bg-gradient-to-r from-[#e5e5e5] to-transparent" />
+              )}
+              
+              {/* Number circle */}
+              <div className="relative inline-flex items-center justify-center w-20 h-20 mb-6">
+                <div className="absolute inset-0 rounded-full bg-[#1a1a1a]" />
+                <span className="relative text-white text-2xl font-medium">{step.number}</span>
+              </div>
+              
+              <h3 className="text-xl font-medium mb-3">{step.title}</h3>
+              <p className="text-[#666666] text-sm leading-relaxed max-w-xs mx-auto">
+                {step.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* CTA */}
+        <motion.div
+          className="text-center mt-16"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+        >
+          <a
+            href="/products"
+            className="inline-block px-10 py-4 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333] transition-colors"
+          >
+            Start Your Transformation
+          </a>
+        </motion.div>
+      </div>
+    </section>
+  );
+}