From 8633d1c304b495176ff8d0ecb469d45dd4c7a489 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 20:11:40 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 122 +++++++++++++++++++++++++++++++++++++----------
 1 file changed, 98 insertions(+), 24 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d062b4a..f103bba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,9 +9,24 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Sparkles } from 'lucide-react';
+import { Sparkles, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [activeSlider, setActiveSlider] = useState<string | null>(null);
+
+  const beforeAfterSliders = [
+    {
+      id: "slider-1",      title: "Window Restoration",      subtitle: "Spotless Results",      beforeImage: "http://img.b2bpic.net/free-photo/woman-cleaning-house-rubber-gloves-wiping-window_1157-46775.jpg",      afterImage: "http://img.b2bpic.net/free-photo/medium-shot-man-cleaning-window_23-2148521051.jpg",      beforeAlt: "Before: Dirty window",      afterAlt: "After: Sparkling clean window"
+    },
+    {
+      id: "slider-2",      title: "Patio Revival",      subtitle: "Stain Removed",      beforeImage: "http://img.b2bpic.net/free-photo/person-standing-skateboard-streetside-alley_53876-42811.jpg",      afterImage: "http://img.b2bpic.net/free-photo/young-blonde-housewife-cleaning-house-doors_259150-58904.jpg",      beforeAlt: "Before: Dirty patio",      afterAlt: "After: Clean pristine patio"
+    },
+    {
+      id: "slider-3",      title: "Door & Frame Cleaning",      subtitle: "Like New",      beforeImage: "http://img.b2bpic.net/free-photo/hands-with-gloves-disinfecting-gate-handle_23-2148705105.jpg",      afterImage: "http://img.b2bpic.net/free-photo/close-up-spray-bottle-with-chemical_23-2148529570.jpg",      beforeAlt: "Before: Dirty door frame",      afterAlt: "After: Pristine door and frame"
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -104,29 +119,88 @@ export default function LandingPage() {
       </div>
 
       <div id="before-after" data-section="before-after">
-        <ProductCardOne
-          title="Before & After Transformations"
-          description="See the remarkable difference our service makes"
-          tag="Real Results"
-          products={[
-            {
-              id: "1",              name: "Window Restoration",              price: "Spotless Results",              imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-house-rubber-gloves-wiping-window_1157-46775.jpg",              imageAlt: "Before: Dirty window"
-            },
-            {
-              id: "2",              name: "Window Gleam",              price: "Crystal Clear",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-cleaning-window_23-2148521051.jpg",              imageAlt: "After: Sparkling clean window"
-            },
-            {
-              id: "3",              name: "Patio Revival",              price: "Stain Removed",              imageSrc: "http://img.b2bpic.net/free-photo/person-standing-skateboard-streetside-alley_53876-42811.jpg",              imageAlt: "Before: Dirty patio"
-            },
-            {
-              id: "4",              name: "Patio Perfection",              price: "Like New",              imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-housewife-cleaning-house-doors_259150-58904.jpg",              imageAlt: "After: Clean pristine patio"
-            }
-          ]}
-          gridVariant="two-columns-alternating-heights"
-          animationType="scale-rotate"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
+        <div className="w-full py-20 px-4 md:px-8 bg-gradient-to-b from-transparent via-background to-transparent">
+          <div className="max-w-7xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">Before & After Transformations</h2>
+              <p className="text-lg text-foreground/70 mb-2">See the remarkable difference our service makes</p>
+              <div className="inline-block px-4 py-2 bg-primary-cta/10 rounded-full text-sm font-medium text-primary-cta">Real Results</div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6">
+              {beforeAfterSliders.map((slider) => (
+                <div
+                  key={slider.id}
+                  className="relative group cursor-pointer"
+                  onClick={() => setActiveSlider(activeSlider === slider.id ? null : slider.id)}
+                >
+                  <div className="relative h-80 md:h-96 rounded-lg overflow-hidden shadow-lg border border-accent/20">
+                    {/* Before Image */}
+                    <img
+                      src={slider.beforeImage}
+                      alt={slider.beforeAlt}
+                      className="absolute inset-0 w-full h-full object-cover"
+                    />
+
+                    {/* After Image Overlay - Initially Hidden */}
+                    <div
+                      className={`absolute inset-0 overflow-hidden transition-all duration-500 ease-out ${
+                        activeSlider === slider.id ? "opacity-100" : "opacity-0"
+                      }`}
+                      style={{
+                        clipPath: activeSlider === slider.id ? "inset(0 0 0 0)" : "inset(0 100% 0 0)"
+                      }}
+                    >
+                      <img
+                        src={slider.afterImage}
+                        alt={slider.afterAlt}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+
+                    {/* Divider Line */}
+                    <div
+                      className={`absolute top-0 bottom-0 w-1 bg-white/80 shadow-lg transition-all duration-500 ${
+                        activeSlider === slider.id ? "opacity-100" : "opacity-0"
+                      }`}
+                      style={{
+                        left: activeSlider === slider.id ? "50%" : "0%"
+                      }}
+                    />
+
+                    {/* Labels */}
+                    <div className="absolute top-4 left-4 bg-black/60 px-3 py-1 rounded text-white text-sm font-medium">
+                      Before
+                    </div>
+                    {activeSlider === slider.id && (
+                      <div className="absolute top-4 right-4 bg-primary-cta/80 px-3 py-1 rounded text-white text-sm font-medium">
+                        After
+                      </div>
+                    )}
+
+                    {/* Click Indicator */}
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/10 transition-all duration-300">
+                      <div className="bg-primary-cta/90 p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-110">
+                        {activeSlider === slider.id ? (
+                          <ChevronLeft className="w-6 h-6 text-white" />
+                        ) : (
+                          <ChevronRight className="w-6 h-6 text-white" />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Info Below Slider */}
+                  <div className="mt-4 text-center">
+                    <h3 className="text-lg font-semibold text-foreground">{slider.title}</h3>
+                    <p className="text-sm text-foreground/60 mt-1">{slider.subtitle}</p>
+                    <p className="text-xs text-primary-cta mt-2 font-medium">Click to reveal transformation</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="why-us" data-section="why-us">
-- 
2.49.1