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/product/ProductDetail.tsx

@@ -9,6 +9,9 @@ import type { Product } from "@/types/saleor";
 import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
 import { getProductPrice, getLocalizedProduct } from "@/lib/saleor";
 import ProductCard from "@/components/product/ProductCard";
+import ProductBenefits from "@/components/product/ProductBenefits";
+import ProductReviews from "@/components/product/ProductReviews";
+import AsSeenIn from "@/components/home/AsSeenIn";
 
 interface ProductDetailProps {
   product: Product;
@@ -270,16 +273,16 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                 </div>
               </div>
 
-              {/* Add to Cart Button */}
+              {/* Add to Cart Button - Action verb + value */}
               {isAvailable ? (
                 <button
                   onClick={handleAddToCart}
                   disabled={isAdding}
-                  className="w-full h-16 bg-black text-white text-base uppercase tracking-[0.15em] font-medium hover:bg-[#333333] active:bg-[#1a1a1a] transition-colors disabled:opacity-50 disabled:cursor-not-allowed mb-8"
+                  className="w-full h-16 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333333] active:bg-[#1a1a1a] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed mb-6 hover:scale-[1.02] shadow-lg hover:shadow-xl"
                 >
                   {isAdding 
                     ? (locale === "EN" ? "Adding..." : "Dodavanje...")
-                    : (locale === "EN" ? "Add to Cart — Free Shipping" : "Dodaj u korpu — Besplatna dostava")
+                    : (locale === "EN" ? "Transform My Hair & Skin" : "Transformiši kosu i kožu")
                   }
                 </button>
               ) : (
@@ -288,12 +291,17 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                 </div>
               )}
 
-              {/* Free Shipping Note */}
-              <p className="text-center text-sm text-[#666666] mb-6">
-                {locale === "EN" 
-                  ? "Free shipping on orders over 3,000 RSD"
-                  : "Besplatna dostava za porudžbine preko 3.000 RSD"}
-              </p>
+              {/* Free Shipping Note - with urgency */}
+              <div className="flex items-center justify-center gap-2 mb-6">
+                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                </svg>
+                <p className="text-sm text-[#666666]">
+                  {locale === "EN" 
+                    ? "Free shipping on orders over 3,000 RSD"
+                    : "Besplatna dostava za porudžbine preko 3.000 RSD"}
+                </p>
+              </div>
 
               {/* Trust Indicators */}
               <div className="grid grid-cols-3 gap-4 mb-8 p-4 bg-[#f8f9fa] rounded-lg">
@@ -381,6 +389,9 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
         </div>
       </section>
 
+      {/* As Featured In - Full Width */}
+      <AsSeenIn />
+
       {/* Related Products */}
       {relatedProducts && relatedProducts.length > 0 && (
         <section className="py-20 lg:py-28 bg-[#f8f9fa]">
@@ -406,6 +417,12 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
           </div>
         </section>
       )}
+
+      {/* Product Benefits */}
+      <ProductBenefits locale={locale} />
+
+      {/* Customer Reviews */}
+      <ProductReviews locale={locale} productName={localized.name} />
     </>
   );
 }