Merge version_6_1780323139214 into main

Merge version_6_1780323139214 into main

src/pages/HomePage.tsx

@@ -1,12 +1,12 @@
-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";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
 export default function HomePage() {
   return (
@@ -16,7 +16,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 +51,15 @@ export default function HomePage() {
 
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
-          <AboutText
+      <section className="bg-background flex flex-col items-center justify-center text-center px-6">
-      title="Your Trusted Partner for Outdoor Beauty"
+        <div className="w-full 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 +103,82 @@ export default function HomePage() {
 
   <div id="portfolio" data-section="portfolio">
     <SectionErrorBoundary name="portfolio">
-          <FeaturesImageBento
+      <section className="bg-background relative">
-      tag="Our Work"
+        <div className="w-full max-w-content-width mx-auto px-6">
-      title="Inspiring Outdoor Transformations"
+          <div className="flex flex-col items-center text-center">
-      description="Explore a gallery of our recently completed projects, showcasing the diversity of our designs and the quality of our craftsmanship across Texas."
+            <ScrollReveal variant="slide-up">
-      items={[
+              <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
-          imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248302.jpg",
+              </div>
-        },
+              <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
-        {
+                Inspiring Outdoor Transformations
-          imageSrc: "http://img.b2bpic.net/free-photo/nature-garden-leaves-background_1340-7945.jpg",
+              </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.
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359701.jpg",
+              </p>
-        },
+            </ScrollReveal>
-        {
+          </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-12389.jpg",
+          
-        },
+          <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/side-view-people-sitting-table_23-2149655613.jpg",
+              {
-        },
+                imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248302.jpg",
-        {
+                title: "Desert Oasis Integration",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-cultivating-farming-plants-indoor-garden_23-2149854841.jpg",
+                className: "md:col-span-2 md:row-span-2"
-        },
+              },
-        {
+              {
-          imageSrc: "http://img.b2bpic.net/free-photo/petunia-pansy-flowers-with-gardening-tools-peat-pot-rope-wooden-desk_23-2148181187.jpg",
+                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) => (
+              <div key={i} className={item.className}>
+                <ScrollReveal 
+                  variant="fade-blur" 
+                  delay={i * 0.1} 
+                  className="w-full h-full"
+                >
+                  <div className="relative group overflow-hidden rounded-lg shadow-lg w-full h-full">
+                    <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" />
+                    <ImageOrVideo 
+                      imageSrc={item.imageSrc} 
+                      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>
+                  </div>
+                </ScrollReveal>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
     </SectionErrorBoundary>
   </div>
 
@@ -191,8 +245,7 @@ export default function HomePage() {
   <div id="faq" data-section="faq">
     <SectionErrorBoundary name="faq">
           <FaqSplitMedia
-      tag="Got Questions?"
+      tag="Got Questions?"title="Frequently Asked 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 +277,7 @@ export default function HomePage() {
   <div id="contact" data-section="contact">
     <SectionErrorBoundary name="contact">
           <ContactCta
-      tag="Ready for a Greener Space?"
+      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!"
-      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 +291,4 @@ export default function HomePage() {
   </div>
     </>
   );
-}
+}