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/app/page.tsx

@@ -7,6 +7,8 @@ import TrustBadges from "@/components/home/TrustBadges";
 import AsSeenIn from "@/components/home/AsSeenIn";
 import TestimonialsSection from "@/components/home/TestimonialsSection";
 import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
+import ProblemSection from "@/components/home/ProblemSection";
+import HowItWorks from "@/components/home/HowItWorks";
 
 export const metadata = {
   title: "ManoonOils - Premium Natural Oils for Hair & Skin",
@@ -40,6 +42,9 @@ export default async function Homepage() {
         {/* As Seen In */}
         <AsSeenIn />
 
+        {/* Problem Section - Create empathy */}
+        <ProblemSection />
+
         {/* Main Content */}
         <div id="main-content" className="scroll-mt-[72px] lg:scroll-mt-[72px]">
           {/* Products Grid Section */}
@@ -82,6 +87,9 @@ export default async function Homepage() {
           {/* Before/After Gallery */}
           <BeforeAfterGallery />
 
+          {/* How It Works */}
+          <HowItWorks />
+
           {/* Brand Story Section */}
           <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[#f8f9fa]">
             <div className="max-w-7xl mx-auto">