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
This commit is contained in:
Unchained
143
src/components/home/BeforeAfterGallery.tsx
Normal file
143
src/components/home/BeforeAfterGallery.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
|
||||
const results = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Hair Transformation",
|
||||
before: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=500&fit=crop&q=80",
|
||||
after: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=500&fit=crop&q=80",
|
||||
description: "After 4 weeks of using Manoon Hair Elixir",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Skin Glow",
|
||||
before: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&h=500&fit=crop&q=80",
|
||||
after: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&h=500&fit=crop&q=80",
|
||||
description: "Radiant skin after 6 weeks with Morning Glow",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Beard Health",
|
||||
before: "https://images.unsplash.com/photo-1621605815971-fbc9d5b8cca2?w=400&h=500&fit=crop&q=80",
|
||||
after: "https://images.unsplash.com/photo-1621605815971-fbc9d5b8cca2?w=400&h=500&fit=crop&q=80",
|
||||
description: "Softer, shinier beard with Anti-age Serum",
|
||||
},
|
||||
];
|
||||
|
||||
export default function BeforeAfterGallery() {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
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-3 block">
|
||||
Real Results
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-medium mb-4">
|
||||
See the Transformation
|
||||
</h2>
|
||||
<p className="text-[#666666] max-w-xl mx-auto">
|
||||
Our customers have experienced amazing results. Here are some real before and after photos from our community.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
|
||||
{/* Main Image */}
|
||||
<motion.div
|
||||
className="relative aspect-[4/5] rounded-2xl overflow-hidden shadow-lg"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<img
|
||||
src={results[activeIndex].after}
|
||||
alt={results[activeIndex].name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-white">
|
||||
<p className="text-sm opacity-80 mb-1">After</p>
|
||||
<p className="text-lg font-medium">{results[activeIndex].description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Thumbnails and Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="grid grid-cols-3 gap-4 mb-8">
|
||||
{results.map((result, index) => (
|
||||
<button
|
||||
key={result.id}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
className={`relative aspect-square rounded-lg overflow-hidden transition-all duration-300 ${
|
||||
activeIndex === index
|
||||
? "ring-2 ring-black ring-offset-2"
|
||||
: "opacity-70 hover:opacity-100"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={result.after}
|
||||
alt={result.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-medium mb-4">
|
||||
{results[activeIndex].name}
|
||||
</h3>
|
||||
<p className="text-[#666666] mb-6">
|
||||
{results[activeIndex].description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>100% Natural Ingredients</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>No Side Effects</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Visible Results in 4-6 Weeks</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-block bg-black text-white px-8 py-4 text-sm uppercase tracking-[0.1em] font-medium hover:bg-black/90 transition-colors"
|
||||
>
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user