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
This commit is contained in:
Unchained
@@ -2,58 +2,83 @@
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const badges = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
),
|
||||
stats: "4.9/5",
|
||||
label: "Average Rating",
|
||||
subtext: "Based on 2,847 reviews",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
||||
</svg>
|
||||
),
|
||||
stats: "50,000+",
|
||||
label: "Happy Customers",
|
||||
subtext: "Worldwide",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
),
|
||||
stats: "100%",
|
||||
label: "Natural Ingredients",
|
||||
subtext: "No additives",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
|
||||
</svg>
|
||||
),
|
||||
stats: "Free",
|
||||
label: "Shipping",
|
||||
subtext: "Orders over 3,000 RSD",
|
||||
},
|
||||
];
|
||||
|
||||
export default function TrustBadges() {
|
||||
return (
|
||||
<section className="py-12 bg-white border-y border-gray-100">
|
||||
<section className="py-14 bg-gradient-to-b from-[#faf9f7] to-white border-b border-[#e8e4e0]">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
className="flex flex-wrap items-center justify-center gap-8 md:gap-16"
|
||||
className="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<svg
|
||||
key={star}
|
||||
className="w-5 h-5 text-gold fill-gold"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">4.9/5 Average Rating</span>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 hidden md:block" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-gray-700">50,000+ Happy Customers</span>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 hidden md:block" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-gray-700">Secure Payment</span>
|
||||
</div>
|
||||
|
||||
<div className="h-8 w-px bg-gray-200 hidden md:block" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-gray-700">Free Shipping Over $50</span>
|
||||
</div>
|
||||
{badges.map((badge, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="flex flex-col items-center text-center p-6 bg-white rounded-2xl shadow-sm border border-[#f0ede8]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-[#1a1a1a] flex items-center justify-center text-white mb-4">
|
||||
{badge.icon}
|
||||
</div>
|
||||
<p className="text-2xl lg:text-3xl font-semibold text-[#1a1a1a] tracking-tight">
|
||||
{badge.stats}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-[#1a1a1a] mt-1">
|
||||
{badge.label}
|
||||
</p>
|
||||
<p className="text-xs text-[#888888] mt-1">
|
||||
{badge.subtext}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user