Bob AI: Add a text label to each image in the 'portfolio' section (a

Merge version_3_1780322210209 into main

src/pages/HomePage.tsx

@@ -1,12 +1,11 @@
-import AboutText from '@/components/sections/about/AboutText';
 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';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
 export default function HomePage() {
   return (
@@ -16,7 +15,7 @@ export default function HomePage() {
           <HeroBillboardTiltedCarousel
       tag="Transform Your Outdoor Space"
       title="Leading Landscaping Services in Texas"
-      description="From custom garden designs to meticulous lawn care, Texas GreenScapes brings beauty and functionality to your property. Experience the difference quality makes."
+      description="We create stunning, sustainable outdoor environments that enhance the beauty and value of your property."
       primaryButton={{
         text: "Explore Our Services",
         href: "#services",
@@ -51,9 +50,15 @@ export default function HomePage() {
 
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
-          <AboutText
-      title="Your Trusted Partner for Outdoor Beauty"
-    />
+      <section className="bg-background flex flex-col items-center justify-center text-center px-6">
+        <div className="max-w-content-width mx-auto">
+          <ScrollReveal variant="slide-up">
+            <h2 className="text-3xl md:text-5xl font-bold text-foreground tracking-tight">
+              Your Trusted Partner for Outdoor Beauty
+            </h2>
+          </ScrollReveal>
+        </div>
+      </section>
     </SectionErrorBoundary>
   </div>
 
@@ -97,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>
 
@@ -191,8 +242,7 @@ export default function HomePage() {
   <div id="faq" data-section="faq">
     <SectionErrorBoundary name="faq">
           <FaqSplitMedia
-      tag="Got Questions?"
-      title="Frequently Asked Questions"
+      tag="Got Questions?"title="Frequently Asked Questions"
       description="Find answers to common inquiries about our services, process, and what makes Texas GreenScapes the right choice for your landscaping needs."
       items={[
         {
@@ -224,8 +274,7 @@ export default function HomePage() {
   <div id="contact" data-section="contact">
     <SectionErrorBoundary name="contact">
           <ContactCta
-      tag="Ready for a Greener Space?"
-      text="Let's create the outdoor environment you've always dreamed of. Contact us today for a personalized consultation and a free estimate!"
+      tag="Ready for a Greener Space?"text="Let's create the outdoor environment you've always dreamed of. Contact us today for a personalized consultation and a free estimate!"
       primaryButton={{
         text: "Schedule a Consultation",
         href: "mailto:info@texasgreenscapes.com",
@@ -239,4 +288,4 @@ export default function HomePage() {
   </div>
     </>
   );
-}
+}