diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3a5b658..9e2f9a5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,86 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Award, CheckCircle, MapPin, Zap, Sparkles, Shield, ImageIcon, Calendar } from 'lucide-react';
+import { Award, CheckCircle, MapPin, Zap, Sparkles, Shield, ImageIcon, Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+interface BeforeAfterImage {
+  before: string;
+  after: string;
+  alt: string;
+}
+
+const beforeAfterImages: BeforeAfterImage[] = [
+  {
+    before: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934365.jpg",    after: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193571.jpg",    alt: "Interior detailing transformation - before and after"
+  },
+  {
+    before: "http://img.b2bpic.net/free-photo/close-up-driver-recharging-ev-vehicle-battery-low-angle-shot_482257-130130.jpg",    after: "http://img.b2bpic.net/free-photo/male-hand-with-foam-sponge-washing-car_1157-36587.jpg",    alt: "Paint correction transformation - before and after"
+  }
+];
+
+function BeforeAfterGallery() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [showComparison, setShowComparison] = useState(false);
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % beforeAfterImages.length);
+    setShowComparison(false);
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev - 1 + beforeAfterImages.length) % beforeAfterImages.length);
+    setShowComparison(false);
+  };
+
+  const current = beforeAfterImages[currentIndex];
+
+  return (
+    <div className="w-full flex flex-col gap-6 items-center">
+      <div className="relative w-full max-w-2xl rounded-lg overflow-hidden bg-gradient-to-br from-var(--card) to-var(--background)">
+        {showComparison ? (
+          <div className="flex gap-2 w-full aspect-square">
+            <div className="w-1/2 h-full overflow-hidden">
+              <img src={current.before} alt={`Before: ${current.alt}`} className="w-full h-full object-cover" />
+            </div>
+            <div className="w-1/2 h-full overflow-hidden">
+              <img src={current.after} alt={`After: ${current.alt}`} className="w-full h-full object-cover" />
+            </div>
+          </div>
+        ) : (
+          <img src={current.after} alt={current.alt} className="w-full aspect-square object-cover" />
+        )}
+      </div>
+
+      <button
+        onClick={() => setShowComparison(!showComparison)}
+        className="px-6 py-3 rounded-lg bg-var(--primary-cta) text-var(--primary-cta-text) font-semibold hover:opacity-90 transition-opacity"
+      >
+        {showComparison ? "Show After" : "Compare Before & After"}
+      </button>
+
+      <div className="flex gap-4 items-center">
+        <button
+          onClick={handlePrev}
+          className="p-2 rounded-full border border-var(--accent) hover:bg-var(--card) transition-colors"
+          aria-label="Previous image"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+        <span className="text-sm text-var(--foreground)">
+          {currentIndex + 1} / {beforeAfterImages.length}
+        </span>
+        <button
+          onClick={handleNext}
+          className="p-2 rounded-full border border-var(--accent) hover:bg-var(--card) transition-colors"
+          aria-label="Next image"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+}
 
 export default function LandingPage() {
   return (
@@ -105,31 +184,23 @@ export default function LandingPage() {
       </div>
 
       <div id="results" data-section="results">
-        <ProductCardThree
-          title="Real Transformations"
-          description="Before and after results from our most recent projects. Every detail restored, every vehicle revitalized."
-          tag="Before & After Gallery"
-          tagIcon={ImageIcon}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="bento-grid"
-          animationType="scale-rotate"
-          products={[
-            {
-              id: "result-1",              name: "Luxury Interior Restoration",              price: "Professional Grade Detailing",              imageSrc: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934365.jpg",              imageAlt: "Interior detailing transformation - before and after"
-            },
-            {
-              id: "result-2",              name: "Exterior Paint Correction",              price: "Full Exterior Detail",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-driver-recharging-ev-vehicle-battery-low-angle-shot_482257-130130.jpg",              imageAlt: "Paint correction transformation - before and after"
-            },
-            {
-              id: "result-3",              name: "Wheel & Tire Restoration",              price: "Complete Wheel Detail",              imageSrc: "http://img.b2bpic.net/free-photo/male-hand-with-foam-sponge-washing-car_1157-36587.jpg",              imageAlt: "Wheel restoration transformation - before and after"
-            }
-          ]}
-          buttons={[{ text: "Schedule Your Transformation", href: "#contact" }]}
-          buttonAnimation="slide-up"
-          ariaLabel="Before and after gallery showcasing Perfect It Detailing results"
-        />
+        <div className="container mx-auto px-4 py-16">
+          <div className="max-w-4xl mx-auto">
+            <div className="text-center mb-12">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-var(--accent) text-var(--foreground) text-sm font-semibold mb-4">
+                <ImageIcon className="w-4 h-4" />
+                <span>Before & After Gallery</span>
+              </div>
+              <h2 className="text-4xl md:text-5xl font-bold text-var(--foreground) mb-4">
+                Real Transformations
+              </h2>
+              <p className="text-lg text-var(--foreground) opacity-80">
+                Before and after results from our most recent projects. Every detail restored, every vehicle revitalized.
+              </p>
+            </div>
+            <BeforeAfterGallery />
+          </div>
+        </div>
       </div>
 
       <div id="testimonials" data-section="testimonials">