Update src/app/page.tsx

Merge version_3 into main

src/app/layout.tsx

@@ -8,7 +8,8 @@ const manrope = Manrope({
 });
 
 export const metadata: Metadata = {
-  title: "Taishan Construction | Premium Hardscape & Building Services Toronto",  description: "Premium interlock driveways, patios, landscaping & construction services across the GTA. Free 3D design, expert installation, luxury results."};
+  title: "Taishan Construction | Premium Hardscape & Building Services Toronto",  description: "Premium interlock driveways, patios, landscaping & construction services across the GTA. Free 3D design, expert installation, luxury results."
+};
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -2,17 +2,89 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Building2, Eye, CheckCircle2, Palette, Users, MessageCircle, Sparkles, ArrowRightLeft, Cog, Footprints, Home, Zap, Shield, Hammer, Trees, Droplet, Frame, Lightbulb, Crown, Phone } from 'lucide-react';
+import { Building2, Eye, CheckCircle2, Palette, Users, MessageCircle, Sparkles, ArrowRightLeft, Cog, Footprints, Home, Zap, Shield, Hammer, Trees, Droplet, Frame, Lightbulb, Crown, Phone, Calendar } from 'lucide-react';
+import React, { useState } from 'react';
+
+interface BeforeAfterImagePair {
+  beforeSrc: string;
+  afterSrc: string;
+  title: string;
+}
+
+const BeforeAfterCard: React.FC<{
+  pair: BeforeAfterImagePair;
+  isHovered: boolean;
+}> = ({ pair, isHovered }) => {
+  const [sliderPosition, setSliderPosition] = useState(50);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const newPosition = ((e.clientX - rect.left) / rect.width) * 100;
+    setSliderPosition(Math.max(0, Math.min(100, newPosition)));
+  };
+
+  return (
+    <div
+      className="relative w-full h-64 rounded-lg overflow-hidden cursor-col-resize bg-gray-900"
+      onMouseMove={handleMouseMove}
+      onMouseLeave={() => setSliderPosition(50)}
+    >
+      <div className="absolute inset-0">
+        <img
+          src={pair.afterSrc}
+          alt="After"
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div
+        className="absolute inset-0 overflow-hidden"
+        style={{ width: `${sliderPosition}%` }}
+      >
+        <img
+          src={pair.beforeSrc}
+          alt="Before"
+          className="w-full h-full object-cover"
+          style={{ width: `${(100 / sliderPosition) * 100}%` }}
+        />
+      </div>
+      <div
+        className="absolute top-0 bottom-0 w-1 bg-white shadow-lg transition-colors"
+        style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
+      >
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-full p-2 shadow-lg">
+          <ArrowRightLeft size={16} className="text-gray-900" />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
+        <p className="text-white text-sm font-semibold">{pair.title}</p>
+      </div>
+    </div>
+  );
+};
 
 export default function LandingPage() {
+  const [servicesHoveredCard, setServicesHoveredCard] = useState<string | null>(null);
+  const [galleryHoveredCard, setGalleryHoveredCard] = useState<string | null>(null);
+
+  const beforeAfterPairs: BeforeAfterImagePair[] = [
+    {
+      beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=1",      afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=1",      title: "Rendering vs. Completed Project"
+    },
+    {
+      beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1",      afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=1",      title: "3D Design to Reality"
+    },
+    {
+      beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=2",      afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=2",      title: "Luxury Interlock Installation"
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -26,7 +98,7 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="fixed top-0 left-0 right-0 z-50">
         <NavbarStyleApple
           brandName="Taishan"
           navItems={[
@@ -36,11 +108,14 @@ export default function LandingPage() {
             { name: "Process", id: "process" },
             { name: "Contact", id: "contact" }
           ]}
+          button={{
+            text: "Book Appointment Now",            href: "#contact"
+          }}
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <HeroSplitDualMedia
+      <div id="hero" data-section="hero" className="pt-20">
+        <HeroBillboardCarousel
           title="Toronto's Trusted Interlock & Construction Specialists"
           description="Premium landscaping and construction services across the GTA. Designed with precision. Built to last."
           tag="Luxury Construction"
@@ -52,18 +127,24 @@ export default function LandingPage() {
             },
             {
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=1",              imageAlt: "Luxury construction detail"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1",              imageAlt: "Construction detail"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=1",              imageAlt: "Project showcase"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772751184333-vby3bqvq.png",              imageAlt: "Taishan Gallery"
             }
           ]}
-          rating={5}
-          ratingText="1000+ Projects Completed"
           buttons={[
             { text: "Get Your Free 3D Design", href: "#contact" },
             { text: "Visit Our Showroom", href: "#showroom" }
           ]}
           buttonAnimation="slide-up"
-          mediaAnimation="slide-up"
           tagAnimation="slide-up"
-          textBoxClassName="max-w-2xl"
+          containerClassName="max-w-full"
           titleClassName="text-5xl lg:text-6xl font-bold leading-tight tracking-tight"
           descriptionClassName="text-lg lg:text-xl leading-relaxed"
           tagClassName="inline-flex items-center gap-2 font-semibold uppercase tracking-wider"
@@ -72,9 +153,9 @@ export default function LandingPage() {
 
       <div id="taishan-effect" data-section="taishan-effect">
         <SplitAbout
-          title="The Taishan Effect"
-          description="Why homeowners choose Taishan Construction for their premium hardscape and construction projects."
-          tag="Why Choose Taishan"
+          title="Why Choose Taishan"
+          description="Premium quality, professional service, and guaranteed satisfaction for every project."
+          tag="The Taishan Advantage"
           tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -82,19 +163,13 @@ export default function LandingPage() {
           mediaAnimation="slide-up"
           bulletPoints={[
             {
-              title: "Free 3D Project Visualization",              description: "See your complete project before construction begins with our professional rendering service",              icon: Eye
+              title: "6-Year Warranty",              description: "Complete coverage and peace of mind on all materials and workmanship",              icon: Shield
             },
             {
-              title: "Professional Project Planning",              description: "Detailed timelines, material specifications, and structured installation processes",              icon: CheckCircle2
+              title: "10,000 sq ft Showroom",              description: "Explore real samples and design options in person to make confident selections",              icon: Building2
             },
             {
-              title: "Outdoor Material Showroom",              description: "Explore real samples and design options in person to make confident material selections",              icon: Palette
-            },
-            {
-              title: "Experienced Installation Teams",              description: "Certified professionals with years of expertise in premium hardscape installation",              icon: Users
-            },
-            {
-              title: "Clear Communication & Timelines",              description: "Transparent updates throughout your project with professional project management",              icon: MessageCircle
+              title: "Free 3D Design Technology",              description: "See your complete project before construction begins with professional renderings",              icon: Eye
             }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1"
@@ -109,8 +184,8 @@ export default function LandingPage() {
 
       <div id="3d-design" data-section="3d-design">
         <FeatureHoverPattern
-          title="See Your Project Before We Build It"
-          description="Taishan Construction offers complimentary 3D project renderings so you can visualize your driveway, backyard, or porch before construction begins. This allows homeowners to make confident decisions before investing in their project."
+          title="Experience Breathtaking 3D Design Technology"
+          description="Taishan Construction offers complimentary 3D project renderings with a custom client portal where you can view your design, track progress, and access project documents anytime, anywhere. Visualize your driveway, backyard, or porch before construction begins with crystal-clear photorealistic renderings."
           tag="3D Design Technology"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
@@ -119,6 +194,10 @@ export default function LandingPage() {
               icon: Eye,
               title: "Photorealistic Renderings",              description: "Crystal-clear 3D visualizations showing materials, lighting, landscaping, and final details",              button: { text: "Get Free 3D Design", href: "#contact" }
             },
+            {
+              icon: Calendar,
+              title: "Custom Client Portal",              description: "Access your project anytime with dedicated portal for designs, progress updates, and documentation"
+            },
             {
               icon: ArrowRightLeft,
               title: "Before & After Comparisons",              description: "Side-by-side views showing current property and your completed dream project transformation"
@@ -134,95 +213,147 @@ export default function LandingPage() {
       </div>
 
       <div id="services" data-section="services">
-        <FeatureHoverPattern
-          title="Our Services"
-          description="Premium construction and landscaping services for Toronto and the Greater Toronto Area. Each project is crafted with precision and built to last."
-          tag="Complete Solutions"
-          features={[
-            {
-              icon: Cog,
-              title: "Interlock Driveways",              description: "Professional interlock paving with premium materials and expert installation"
-            },
-            {
-              icon: Palette,
-              title: "Backyard Patios",              description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
-            },
-            {
-              icon: Footprints,
-              title: "Walkways",              description: "Decorative and functional pathways connecting your property with style"
-            },
-            {
-              icon: Building2,
-              title: "Retaining Walls",              description: "Structural and aesthetic walls for landscaping and property management"
-            },
-            {
-              icon: Home,
-              title: "Natural Stone Porches",              description: "Premium stone entry features creating impressive curb appeal"
-            },
-            {
-              icon: Zap,
-              title: "Landscape Lighting",              description: "Professional outdoor lighting systems enhancing ambiance and security"
-            },
-            {
-              icon: Hammer,
-              title: "Decks",              description: "Custom wooden decks designed for durability and aesthetic appeal"
-            },
-            {
-              icon: Shield,
-              title: "Fences",              description: "Privacy fences and decorative fencing solutions for residential properties"
-            },
-            {
-              icon: Trees,
-              title: "Rock Beds & Landscaping",              description: "Landscape design elements that enhance property value and curb appeal"
-            },
-            {
-              icon: Droplet,
-              title: "Basement Waterproofing",              description: "Professional waterproofing solutions protecting your foundation and home"
-            },
-            {
-              icon: Frame,
-              title: "Interior Renovations",              description: "Premium interior construction and renovation services for Toronto homes"
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          tagAnimation="slide-up"
-          cardTitleClassName="text-5xl font-bold mb-4"
-        />
+        <div className="px-6 lg:px-12 py-16 lg:py-24">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-12">
+              <p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Complete Solutions</p>
+              <h2 className="text-4xl lg:text-5xl font-bold mb-4">Our Services</h2>
+              <p className="text-lg text-foreground/80">Premium construction and landscaping services for Toronto and the Greater Toronto Area. Each project is crafted with precision and built to last.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {[
+                {
+                  id: "interlock",                  icon: Cog,
+                  title: "Interlock Driveways",                  description: "Professional interlock paving with premium materials and expert installation"
+                },
+                {
+                  id: "patios",                  icon: Palette,
+                  title: "Backyard Patios",                  description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
+                },
+                {
+                  id: "walkways",                  icon: Footprints,
+                  title: "Walkways",                  description: "Decorative and functional pathways connecting your property with style"
+                },
+                {
+                  id: "retaining",                  icon: Building2,
+                  title: "Retaining Walls",                  description: "Structural and aesthetic walls for landscaping and property management"
+                },
+                {
+                  id: "porches",                  icon: Home,
+                  title: "Natural Stone Porches",                  description: "Premium stone entry features creating impressive curb appeal"
+                },
+                {
+                  id: "lighting",                  icon: Zap,
+                  title: "Landscape Lighting",                  description: "Professional outdoor lighting systems enhancing ambiance and security"
+                }
+              ].map((service) => (
+                <div
+                  key={service.id}
+                  className="relative group"
+                  onMouseEnter={() => setServicesHoveredCard(service.id)}
+                  onMouseLeave={() => setServicesHoveredCard(null)}
+                >
+                  <div className="p-6 rounded-lg border border-accent/20 bg-card hover:border-primary-cta/40 transition-all duration-300">
+                    <service.icon className="w-8 h-8 text-primary-cta mb-4" />
+                    <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
+                    <p className="text-foreground/70 text-sm">{service.description}</p>
+                  </div>
+                  {servicesHoveredCard === service.id && (
+                    <div className="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
+                      <div className="text-center text-white p-4">
+                        <p className="font-semibold">See examples of this service</p>
+                        <p className="text-sm text-white/80">in our project gallery</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="bg-card rounded-lg p-8 border border-accent/20">
+              <h3 className="text-2xl font-bold mb-6">Interlock Driveway Showcase</h3>
+              <p className="text-foreground/80 mb-8">Hover over the slider to see our photorealistic 3D renderings compared to actual completed projects:</p>
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {beforeAfterPairs.map((pair, index) => (
+                  <BeforeAfterCard
+                    key={index}
+                    pair={pair}
+                    isHovered={galleryHoveredCard === `service-${index}`}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="gallery" data-section="gallery">
-        <BlogCardThree
-          title="Project Gallery"
-          description="Explore our portfolio of premium hardscape and construction projects across the GTA."
-          tag="Portfolio Showcase"
-          tagAnimation="slide-up"
-          blogs={[
-            {
-              id: "project-1",              category: "Premium Projects",              title: "Luxury Residential Development",              excerpt: "High-end construction showcasing precision craftsmanship and attention to detail",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=2",              imageAlt: "Luxury residential project",              authorName: "Taishan Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg",              date: "2024"
-            },
-            {
-              id: "project-2",              category: "Premium Projects",              title: "Contemporary Hardscape Design",              excerpt: "Large format pavers with sophisticated layout and professional finishing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=2",              imageAlt: "Contemporary hardscape design",              authorName: "Taishan Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg",              date: "2024"
-            },
-            {
-              id: "project-3",              category: "Premium Projects",              title: "Luxury Outdoor Living Space",              excerpt: "Complete outdoor transformation with premium materials and expert installation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=2",              imageAlt: "Luxury outdoor living space",              authorName: "Taishan Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg",              date: "2024"
-            },
-            {
-              id: "project-4",              category: "Premium Projects",              title: "Premium Patio Entertainment Area",              excerpt: "Multi-level design with integrated features and ambient lighting",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=3",              imageAlt: "Premium patio area",              authorName: "Taishan Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg",              date: "2024"
-            },
-            {
-              id: "project-5",              category: "Premium Projects",              title: "Natural Stone Entry Design",              excerpt: "Custom stone work creating impressive curb appeal and property value",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=3",              imageAlt: "Natural stone entry design",              authorName: "Taishan Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg",              date: "2024"
-            },
-            {
-              id: "project-6",              category: "Premium Projects",              title: "Professional Landscape Installation",              excerpt: "Complete landscape design and installation enhancing property flow",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=3",              imageAlt: "Professional landscape design",              authorName: "Taishan Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg",              date: "2024"
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          cardTitleClassName="text-5xl font-bold mb-4"
-        />
+        <div className="px-6 lg:px-12 py-16 lg:py-24">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-12">
+              <p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Portfolio Showcase</p>
+              <h2 className="text-4xl lg:text-5xl font-bold mb-4">Project Gallery</h2>
+              <p className="text-lg text-foreground/80">Explore our portfolio of premium hardscape and construction projects across the GTA.</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {[
+                {
+                  id: "project-1",                  title: "Luxury Residential Development",                  category: "Premium Projects",                  beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=2",                  afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=2",                  description: "High-end construction showcasing precision craftsmanship and attention to detail"
+                },
+                {
+                  id: "project-2",                  title: "Contemporary Hardscape Design",                  category: "Premium Projects",                  beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=2",                  afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=2",                  description: "Large format pavers with sophisticated layout and professional finishing"
+                },
+                {
+                  id: "project-3",                  title: "Luxury Outdoor Living Space",                  category: "Premium Projects",                  beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=3",                  afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=3",                  description: "Complete outdoor transformation with premium materials and expert installation"
+                },
+                {
+                  id: "project-4",                  title: "Premium Patio Entertainment Area",                  category: "Premium Projects",                  beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=3",                  afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=3",                  description: "Multi-level design with integrated features and ambient lighting"
+                },
+                {
+                  id: "project-5",                  title: "Natural Stone Entry Design",                  category: "Premium Projects",                  beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=4",                  afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=4",                  description: "Custom stone work creating impressive curb appeal and property value"
+                },
+                {
+                  id: "project-6",                  title: "Professional Landscape Installation",                  category: "Premium Projects",                  beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=4",                  afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=4",                  description: "Complete landscape design and installation enhancing property flow"
+                }
+              ].map((project) => (
+                <div
+                  key={project.id}
+                  className="group"
+                  onMouseEnter={() => setGalleryHoveredCard(project.id)}
+                  onMouseLeave={() => setGalleryHoveredCard(null)}
+                >
+                  <div className="rounded-lg overflow-hidden border border-accent/20">
+                    {galleryHoveredCard === project.id ? (
+                      <BeforeAfterCard
+                        pair={{
+                          beforeSrc: project.beforeSrc,
+                          afterSrc: project.afterSrc,
+                          title: project.title
+                        }}
+                        isHovered={true}
+                      />
+                    ) : (
+                      <div className="h-64 relative overflow-hidden">
+                        <img
+                          src={project.afterSrc}
+                          alt={project.title}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-4 flex flex-col justify-end">
+                          <p className="text-xs text-white/70 mb-2">{project.category}</p>
+                          <h3 className="text-lg font-semibold text-white">{project.title}</h3>
+                          <p className="text-sm text-white/80 mt-2">{project.description}</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="showroom" data-section="showroom">