92b6c830e1
Some checks failed
Build and Deploy / build (push) Has been cancelled
WARNING: This change breaks existing SEO URLs for Serbian locale. Changes: - Migrated from separate locale folders (src/app/en/, src/app/de/, etc.) to [locale] dynamic segments (src/app/[locale]/) - Serbian is now at /sr/ instead of / (root) - English at /en/, German at /de/, French at /fr/ - All components updated to generate locale-aware links - Root / now redirects to /sr (307 temporary redirect) SEO Impact: - Previously indexed Serbian URLs (/, /products, /about, /contact) will now return 404 or redirect to /sr/* URLs - This is a breaking change for SEO - Serbian pages should ideally remain at root (/) with only non-default locales getting prefix - Consider implementing 301 redirects from old URLs to maintain search engine rankings Technical Notes: - next-intl v4 with [locale] structure requires ALL locales to have the prefix (cannot have default locale at root) - Alternative approach would be separate folder structure per locale
231 lines
8.8 KiB
TypeScript
231 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useState, useRef } from "react";
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
|
|
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 t = useTranslations("BeforeAfterGallery");
|
|
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">
|
|
<div
|
|
ref={containerRef}
|
|
className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl cursor-ew-resize select-none"
|
|
onMouseMove={handleMouseMove}
|
|
onTouchMove={handleTouchMove}
|
|
>
|
|
<img
|
|
src={result.afterImg}
|
|
alt="After"
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
|
|
<div
|
|
className="absolute inset-0 overflow-hidden"
|
|
style={{ width: `${sliderPosition}%` }}
|
|
>
|
|
<img
|
|
src={result.beforeImg}
|
|
alt="Before"
|
|
className="absolute inset-0 h-full object-cover"
|
|
style={{ width: `${100 / (sliderPosition / 100)}%`, maxWidth: 'none' }}
|
|
/>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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">
|
|
{t("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">
|
|
{t("after")}
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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">{t("verified")}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BeforeAfterGallery() {
|
|
const t = useTranslations("BeforeAfterGallery");
|
|
const locale = useLocale();
|
|
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">
|
|
{t("realResults")}
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-medium mb-4">
|
|
{t("seeTransformation")}
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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"
|
|
>
|
|
<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"
|
|
>
|
|
<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>
|
|
|
|
<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 ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<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={`/${locale}/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"
|
|
>
|
|
{t("startTransformation")}
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |