5216abbcc0
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
74 lines
3.2 KiB
TypeScript
74 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function ProblemSection() {
|
|
return (
|
|
<section className="py-24 bg-[#faf9f7]">
|
|
<div className="container mx-auto px-4">
|
|
<motion.div
|
|
className="max-w-3xl mx-auto text-center"
|
|
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-4 block">
|
|
The Problem
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-medium mb-8 leading-tight">
|
|
Tired of Hair & Skin Products That Don't Deliver?
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto mt-12">
|
|
{[
|
|
{
|
|
icon: (
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
problem: "Dry, Damaged Hair",
|
|
description: "Products leave your hair brittle, frizzy, and breaking despite expensive treatments",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
problem: "Confusing Ingredients",
|
|
description: "Can't pronounce what's in your skincare. parabens, sulfates, synthetic fragrances—dangerous toxins",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
|
</svg>
|
|
),
|
|
problem: "No Real Results",
|
|
description: "Countless products promise miracles but deliver nothing but empty promises and wasted money",
|
|
},
|
|
].map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="text-center p-8 bg-white rounded-2xl shadow-sm border border-[#f0ede8]"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-red-50 flex items-center justify-center text-red-400">
|
|
{item.icon}
|
|
</div>
|
|
<h3 className="text-lg font-medium mb-3">{item.problem}</h3>
|
|
<p className="text-sm text-[#666666] leading-relaxed">{item.description}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|