From 3833da05cab31befe766ea9c5e48e63ab94bacaf Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 1 Jun 2026 14:06:46 +0000
Subject: [PATCH] Switch to version 4: modified src/pages/HomePage.tsx

---
 src/pages/HomePage.tsx | 103 +++++++++++++++++++++++++++++------------
 1 file changed, 74 insertions(+), 29 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a7d128d..138ac0a 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,7 +1,6 @@
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesBentoGridCta from '@/components/sections/features/FeaturesBentoGridCta';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
 import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
 import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
@@ -103,34 +102,80 @@ export default function HomePage() {
 
   <div id="portfolio" data-section="portfolio">
     <SectionErrorBoundary name="portfolio">
-          <FeaturesImageBento
-      tag="Our Work"
-      title="Inspiring Outdoor Transformations"
-      description="Explore a gallery of our recently completed projects, showcasing the diversity of our designs and the quality of our craftsmanship across Texas."
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248302.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/nature-garden-leaves-background_1340-7945.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359701.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-12389.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-sitting-table_23-2149655613.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-cultivating-farming-plants-indoor-garden_23-2149854841.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/petunia-pansy-flowers-with-gardening-tools-peat-pot-rope-wooden-desk_23-2148181187.jpg",
-        },
-      ]}
-    />
+      <section className="bg-background relative">
+        <div className="max-w-content-width mx-auto px-6">
+          <div className="flex flex-col items-center text-center">
+            <ScrollReveal variant="slide-up">
+              <div className="inline-flex items-center rounded-full border border-primary-cta/20 bg-primary-cta/10 px-3 py-1 text-sm font-medium text-primary-cta mb-4">
+                Our Work
+              </div>
+              <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
+                Inspiring Outdoor Transformations
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-content-width mx-auto">
+                Explore a gallery of our recently completed projects, showcasing the diversity of our designs and the quality of our craftsmanship across Texas.
+              </p>
+            </ScrollReveal>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 auto-rows-[250px] md:auto-rows-[300px]">
+            {[
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248302.jpg",
+                title: "Desert Oasis Integration",
+                className: "md:col-span-2 md:row-span-2"
+              },
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/nature-garden-leaves-background_1340-7945.jpg",
+                title: "Lush Garden Retreat",
+                className: "md:col-span-1 md:row-span-1"
+              },
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359701.jpg",
+                title: "Zen Japanese Garden",
+                className: "md:col-span-1 md:row-span-2"
+              },
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-12389.jpg",
+                title: "Custom Stone Pathways",
+                className: "md:col-span-1 md:row-span-1"
+              },
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-sitting-table_23-2149655613.jpg",
+                title: "Outdoor Dining Space",
+                className: "md:col-span-2 md:row-span-1"
+              },
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/man-cultivating-farming-plants-indoor-garden_23-2149854841.jpg",
+                title: "Urban Greenhouse",
+                className: "md:col-span-1 md:row-span-1"
+              },
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/petunia-pansy-flowers-with-gardening-tools-peat-pot-rope-wooden-desk_23-2148181187.jpg",
+                title: "Seasonal Floral Design",
+                className: "md:col-span-1 md:row-span-1"
+              },
+            ].map((item, i) => (
+              <ScrollReveal 
+                key={i} 
+                variant="fade-blur" 
+                delay={i * 0.1} 
+                className={`relative group overflow-hidden rounded-theme ${item.className ||''}`}
+              >
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
+                <img 
+                  src={item.imageSrc} 
+                  alt={item.title}
+                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                />
+                <div className="absolute bottom-0 left-0 right-0 p-6 z-20">
+                  <h3 className="text-white text-lg md:text-xl font-bold translate-y-2 group-hover:translate-y-0 transition-transform duration-300">{item.title}</h3>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
     </SectionErrorBoundary>
   </div>