feat: Add social proof sections to homepage

- Add TrustBadges component with ratings, customer count, secure payment icons
- Add AsSeenIn media logos banner
- Add BeforeAfterGallery with interactive gallery
- Add TestimonialsSection (already existed, now integrated into homepage)
- Connect all sections in homepage page.tsx

Sections added to homepage flow:
1. HeroVideo
2. TrustBadges
3. AsSeenIn
4. Products Grid
5. BeforeAfterGallery
6. Brand Story
7. Benefits
8. TestimonialsSection
9. Newsletter

src/components/home/AsSeenIn.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const mediaLogos = [
+  { name: "Vogue", slug: "vogue" },
+  { name: "Allure", slug: "allure" },
+  { name: "Elle", slug: "elle" },
+  { name: "Cosmopolitan", slug: "cosmopolitan" },
+  { name: "Harper's Bazaar", slug: "harpers-bazaar" },
+  { name: "Glamour", slug: "glamour" },
+];
+
+function LogoPlaceholder({ name }: { name: string }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-3 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all duration-300">
+      <span className="text-lg md:text-xl font-serif font-bold tracking-wider text-gray-800">
+        {name}
+      </span>
+    </div>
+  );
+}
+
+export default function AsSeenIn() {
+  return (
+    <section className="py-16 bg-gray-50">
+      <div className="container mx-auto px-4">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <p className="text-center text-xs uppercase tracking-[0.2em] text-gray-500 mb-8">
+            As Seen In
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
+            {mediaLogos.map((logo) => (
+              <LogoPlaceholder key={logo.slug} name={logo.name} />
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}