240 lines
9.0 KiB
TypeScript
240 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useState, useRef } from "react";
|
|
|
|
const results = [
|
|
{
|
|
id: 1,
|
|
name: "Facial Skin Transformation",
|
|
beforeImg: "https://minio-api.nodecrew.me/saleor/marketing/use_case_2.webp",
|
|
afterImg: "https://minio-api.nodecrew.me/saleor/marketing/use_case_2_1.webp",
|
|
timeline: "4-6 Weeks",
|
|
rating: 5,
|
|
reviewCount: 2847,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Skin Radiance Transformation",
|
|
beforeImg: "https://minio-api.nodecrew.me/saleor/marketing/use_case_3.webp",
|
|
afterImg: "https://minio-api.nodecrew.me/saleor/marketing/use_case_3_1.webp",
|
|
timeline: "6-8 Weeks",
|
|
rating: 5,
|
|
reviewCount: 1856,
|
|
},
|
|
];
|
|
|
|
function BeforeAfterSlider({ result }: { result: typeof results[0] }) {
|
|
const [sliderPosition, setSliderPosition] = useState(50);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (!containerRef.current) return;
|
|
const rect = containerRef.current.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
setSliderPosition(Math.max(0, Math.min(100, x)));
|
|
};
|
|
|
|
const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
|
|
if (!containerRef.current) return;
|
|
const rect = containerRef.current.getBoundingClientRect();
|
|
const x = ((e.touches[0].clientX - rect.left) / rect.width) * 100;
|
|
setSliderPosition(Math.max(0, Math.min(100, x)));
|
|
};
|
|
|
|
return (
|
|
<div className="flex-1 min-w-0">
|
|
{/* Before/After Slider */}
|
|
<div
|
|
ref={containerRef}
|
|
className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl cursor-ew-resize select-none"
|
|
onMouseMove={handleMouseMove}
|
|
onTouchMove={handleTouchMove}
|
|
>
|
|
{/* After Image */}
|
|
<img
|
|
src={result.afterImg}
|
|
alt="After - Smooth skin"
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
|
|
{/* Before Image (clipped) */}
|
|
<div
|
|
className="absolute inset-0 overflow-hidden"
|
|
style={{ width: `${sliderPosition}%` }}
|
|
>
|
|
<img
|
|
src={result.beforeImg}
|
|
alt="Before - Wrinkled skin"
|
|
className="absolute inset-0 h-full object-cover"
|
|
style={{ width: `${100 / (sliderPosition / 100)}%`, maxWidth: 'none' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Slider Handle */}
|
|
<div
|
|
className="absolute top-0 bottom-0 w-1 bg-white shadow-lg cursor-ew-resize"
|
|
style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
|
|
>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Labels */}
|
|
<div className="absolute top-3 left-3 bg-black/70 text-white px-3 py-1.5 rounded-full text-xs font-medium backdrop-blur-sm">
|
|
BEFORE
|
|
</div>
|
|
<div className="absolute top-3 right-3 bg-black/70 text-white px-3 py-1.5 rounded-full text-xs font-medium backdrop-blur-sm">
|
|
AFTER
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline and Rating */}
|
|
<div className="flex items-center justify-center gap-4 mt-4">
|
|
<div className="flex items-center gap-1.5">
|
|
<svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="text-xs font-medium">{result.timeline}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="flex">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" 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-xs text-[#666666]">({result.reviewCount.toLocaleString()})</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verified Badge */}
|
|
<div className="flex items-center justify-center gap-1.5 mt-2">
|
|
<svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<span className="text-xs text-green-700 font-medium">Verified</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BeforeAfterGallery() {
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
const goToPrev = () => {
|
|
setSelectedIndex(prev => prev === 0 ? results.length - 1 : prev - 1);
|
|
};
|
|
|
|
const goToNext = () => {
|
|
setSelectedIndex(prev => prev === results.length - 1 ? 0 : prev + 1);
|
|
};
|
|
|
|
return (
|
|
<section className="py-24 bg-[#faf9f7]">
|
|
<div className="container mx-auto px-4">
|
|
<motion.div
|
|
className="text-center mb-12"
|
|
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>
|
|
</motion.div>
|
|
|
|
{/* Desktop: Two transformations side by side */}
|
|
<div className="hidden md:flex gap-6 max-w-6xl mx-auto">
|
|
{results.map((result, index) => (
|
|
<motion.div
|
|
key={result.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className="flex-1 min-w-0"
|
|
>
|
|
<BeforeAfterSlider result={result} />
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile: Carousel with one transformation at a time */}
|
|
<div className="md:hidden relative max-w-md mx-auto">
|
|
<div className="overflow-hidden">
|
|
<motion.div
|
|
key={selectedIndex}
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<BeforeAfterSlider result={results[selectedIndex]} />
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Carousel Navigation */}
|
|
<button
|
|
onClick={goToPrev}
|
|
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center"
|
|
aria-label="Previous transformation"
|
|
>
|
|
<svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
onClick={goToNext}
|
|
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center"
|
|
aria-label="Next transformation"
|
|
>
|
|
<svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Dot Indicators */}
|
|
<div className="flex justify-center gap-2 mt-6">
|
|
{results.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setSelectedIndex(index)}
|
|
className={`w-2 h-2 rounded-full transition-all ${
|
|
selectedIndex === index ? "bg-black w-4" : "bg-gray-300"
|
|
}`}
|
|
aria-label={`Go to transformation ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<motion.div
|
|
className="text-center mt-12"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
>
|
|
<a
|
|
href="/products"
|
|
className="inline-block px-10 py-4 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333] transition-colors"
|
|
>
|
|
Start Your Transformation
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|