Fix product images and add carousel; add transformation carousel on mobile

src/components/home/BeforeAfterGallery.tsx

@@ -125,6 +125,16 @@ function BeforeAfterSlider({ result }: { result: typeof results[0] }) {
 }
 
 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">
@@ -143,8 +153,8 @@ export default function BeforeAfterGallery() {
           </h2>
         </motion.div>
 
-        {/* Two transformations side by side */}
-        <div className="flex gap-6 max-w-6xl mx-auto">
+        {/* 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}
@@ -159,6 +169,55 @@ export default function BeforeAfterGallery() {
           ))}
         </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"