Bob AI: Made the hero photo larger by adjusting column widths and in

Merge version_2_1781469626587 into main

src/pages/HomePage.tsx

@@ -1,267 +1,36 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
-import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
-import { Award, Shield, Sparkles } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FeaturesSection from './HomePage/sections/Features';
+import ProductSection from './HomePage/sections/Product';
+import PricingSection from './HomePage/sections/Pricing';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialSection from './HomePage/sections/Testimonial';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplit
-      tag="Expert Masonry Services"
-      title="Elevate Your Outdoor Sanctuary"
-      description="Transforming landscapes with precision masonry and premium stone craftsmanship."
-      primaryButton={{
-        text: "Get A Quote",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "View Portfolio",
-        href: "#product",
-      }}
-      imageSrc="https://storage.googleapis.com/webild/users/user_3DDoG6wxn8WoZ83J8d4Vn8tzl2t/uploaded-1781469575760-v28ye42q.webp"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="Crafting Timeless Stone Elements"
-      descriptions={[
-        "At Elements Pro Masonry, we blend traditional craftsmanship with modern design principles. Every project we touch is treated as a lasting masterpiece.",
-        "We specialize in high-end residential hardscaping, from intricate stone patios to custom outdoor kitchens that stand the test of time and nature.",
-      ]}
-      primaryButton={{
-        text: "Our Process",
-        href: "#features",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesTaggedCards
-      tag="Our Expertise"
-      title="Precision Workmanship"
-      description="Excellence in every stone cut and mortar joint."
-      items={[
-        {
-          tag: "Detail",
-          title: "Artisan Stone Cutting",
-          description: "Precision fitted stones for seamless surfaces.",
-          primaryButton: {
-            text: "Learn More",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/archeology-dig-site-with-ancient-remains-discoveries_23-2151786828.jpg",
-        },
-        {
-          tag: "Efficiency",
-          title: "Structural Integrity",
-          description: "Built to withstand every climate.",
-          primaryButton: {
-            text: "Learn More",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brick-wall-dark-brown-closeup_169016-4053.jpg",
-        },
-        {
-          tag: "Design",
-          title: "Aesthetic Harmony",
-          description: "Blending stone textures with your home.",
-          primaryButton: {
-            text: "Learn More",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-restaurant-terrace_1127-2167.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="product" data-section="product">
-    <SectionErrorBoundary name="product">
-          <FeaturesRevealCardsBento
-      tag="Portfolio"
-      title="Our Work"
-      description="A glimpse into the transformations we deliver."
-      items={[
-        {
-          title: "Patio Designs",
-          description: "Luxurious limestone and slate patios.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-old-black-square-tiles-wall-lights-cool-wallpapers_181624-28438.jpg",
-        },
-        {
-          title: "Retaining Walls",
-          description: "Structural walls that double as art.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-14140.jpg",
-        },
-        {
-          title: "Fire Features",
-          description: "Stunning hearths and fire pits.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-heart-symbol-carved-tree_181624-21399.jpg",
-        },
-        {
-          title: "Stone Pathways",
-          description: "Artisan-laid garden walkways.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/bobblestone-path-with-moss_23-2151942469.jpg",
-        },
-        {
-          title: "Outdoor Kitchens",
-          description: "High-end masonry kitchens.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/bundles-basil-amaranth-marble-surface_114579-54860.jpg",
-        },
-        {
-          title: "Entrance Pillars",
-          description: "Grand masonry gate entries.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/famous-knossos-palace_268835-17455.jpg",
-        },
-        {
-          title: "Pool Coping",
-          description: "Perfectly finished stone edges.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/sweet-roll-with-green-marmalades-pinecones-white-plate-high-quality-photo_114579-26655.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSplitCards
-      tag="Investment"
-      title="Standard Packages"
-      description="Transparent pricing for high-end masonry."
-      plans={[
-        {
-          tag: "Popular",
-          price: "Custom",
-          period: "Project",
-          description: "Ideal for patios & walkways.",
-          primaryButton: {
-            text: "Get Quote",
-            href: "#contact",
-          },
-          featuresTitle: "Included:",
-          features: [
-            "Design consultation",
-            "Site assessment",
-            "Professional install",
-          ],
-        },
-        {
-          tag: "Elite",
-          price: "Custom",
-          period: "Project",
-          description: "For extensive landscaping transformations.",
-          primaryButton: {
-            text: "Get Quote",
-            href: "#contact",
-          },
-          featuresTitle: "Included:",
-          features: [
-            "3D renderings",
-            "Premium stone sourcing",
-            "Extended warranty",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsIconCards
-      tag="Trusted Professional"
-      title="By The Numbers"
-      description="Proven results in masonry excellence."
-      metrics={[
-        {
-          icon: Award,
-          title: "Projects Completed",
-          value: "150+",
-        },
-        {
-          icon: Shield,
-          title: "Years Experience",
-          value: "12",
-        },
-        {
-          icon: Sparkles,
-          title: "Happy Homeowners",
-          value: "145+",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="testimonial" data-section="testimonial">
-    <SectionErrorBoundary name="testimonial">
-          <TestimonialTrustCard
-      quote="The stone work they did is absolutely impeccable. A true artisan company."
-      rating={5}
-      author="James R., Homeowner"
-      avatars={[
-        {
-          name: "Client 1",
-          imageSrc: "http://img.b2bpic.net/free-photo/builder-showing-blueprint-colleague_23-2147711060.jpg",
-        },
-        {
-          name: "Client 2",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-young-brunette-girl-pink-shirt-holding-yoga-mat-smiling-camera-outdoors-healthy-lifestyle-concept_197531-32640.jpg",
-        },
-        {
-          name: "Client 3",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-talking-phone-park_1303-24876.jpg",
-        },
-        {
-          name: "Client 4",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-with-map-outdoors_23-2150283250.jpg",
-        },
-        {
-          name: "Client 5",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-business-worker-using-vr-glasses-working-office_839833-10645.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get Started"
-      text="Ready to transform your home? Reach out to Elements Pro Masonry today."
-      primaryButton={{
-        text: "Call Now",
-        href: "tel:5550123",
-      }}
-      secondaryButton={{
-        text: "Email Us",
-        href: "mailto:hello@elementspromasonry.com",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="Crafting Timeless Stone Elements"
+          descriptions={[
+            "At Elements Pro Masonry, we blend traditional craftsmanship with modern design principles. Every project we touch is treated as a lasting masterpiece.",
+            "We specialize in high-end residential hardscaping, from intricate stone patios to custom outdoor kitchens that stand the test of time and nature.",
+          ]}
+          primaryButton={{
+            text: "Our Process",
+            href: "#features",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Get Started"
+          text="Ready to transform your home? Reach out to Elements Pro Masonry today."
+          primaryButton={{
+            text: "Call Now",
+            href: "tel:5550123",
+          }}
+          secondaryButton={{
+            text: "Email Us",
+            href: "mailto:hello@elementspromasonry.com",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesTaggedCards
+          tag="Our Expertise"
+          title="Precision Workmanship"
+          description="Excellence in every stone cut and mortar joint."
+          items={[
+            {
+              tag: "Detail",
+              title: "Artisan Stone Cutting",
+              description: "Precision fitted stones for seamless surfaces.",
+              primaryButton: {
+                text: "Learn More",
+                href: "#",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/archeology-dig-site-with-ancient-remains-discoveries_23-2151786828.jpg",
+            },
+            {
+              tag: "Efficiency",
+              title: "Structural Integrity",
+              description: "Built to withstand every climate.",
+              primaryButton: {
+                text: "Learn More",
+                href: "#",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brick-wall-dark-brown-closeup_169016-4053.jpg",
+            },
+            {
+              tag: "Design",
+              title: "Aesthetic Harmony",
+              description: "Blending stone textures with your home.",
+              primaryButton: {
+                text: "Learn More",
+                href: "#",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/empty-restaurant-terrace_1127-2167.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+const primaryButton = {
+  text: "Get A Quote",
+  href: "#contact"
+};
+const secondaryButton = {
+  text: "View Portfolio",
+  href: "#product"
+};
+
+type HeroSplitProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
+      <HeroBackgroundSlot />
+      <div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
+        <div className="w-full md:w-5/12">
+          <div className="flex flex-col items-center md:items-start gap-3">
+            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+              <p>{"Expert Masonry Services"}</p>
+            </div>
+
+            <TextAnimation
+              text={"Elevate Your Outdoor Sanctuary"}
+              variant="slide-up"
+              gradientText={true}
+              tag="h1"
+              className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
+            />
+
+            <TextAnimation
+              text={"Transforming landscapes with precision masonry and premium stone craftsmanship."}
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
+            />
+
+            <div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3">
+              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+            </div>
+          </div>
+        </div>
+
+        <ScrollReveal variant="slide-up" delay={0.2} className="w-full md:w-7/12 h-100 md:h-[75vh] md:max-h-[85svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
+          <ImageOrVideo imageSrc={"https://storage.googleapis.com/webild/users/user_3DDoG6wxn8WoZ83J8d4Vn8tzl2t/uploaded-1781469575760-v28ye42q.webp"} />
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import { Award, Shield, Sparkles } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsIconCards
+          tag="Trusted Professional"
+          title="By The Numbers"
+          description="Proven results in masonry excellence."
+          metrics={[
+            {
+              icon: Award,
+              title: "Projects Completed",
+              value: "150+",
+            },
+            {
+              icon: Shield,
+              title: "Years Experience",
+              value: "12",
+            },
+            {
+              icon: Sparkles,
+              title: "Happy Homeowners",
+              value: "145+",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,54 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSplitCards
+          tag="Investment"
+          title="Standard Packages"
+          description="Transparent pricing for high-end masonry."
+          plans={[
+            {
+              tag: "Popular",
+              price: "Custom",
+              period: "Project",
+              description: "Ideal for patios & walkways.",
+              primaryButton: {
+                text: "Get Quote",
+                href: "#contact",
+              },
+              featuresTitle: "Included:",
+              features: [
+                "Design consultation",
+                "Site assessment",
+                "Professional install",
+              ],
+            },
+            {
+              tag: "Elite",
+              price: "Custom",
+              period: "Project",
+              description: "For extensive landscaping transformations.",
+              primaryButton: {
+                text: "Get Quote",
+                href: "#contact",
+              },
+              featuresTitle: "Included:",
+              features: [
+                "3D renderings",
+                "Premium stone sourcing",
+                "Extended warranty",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Product.tsx

@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "product" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductSection(): React.JSX.Element {
+  return (
+    <div id="product" data-section="product">
+        <SectionErrorBoundary name="product">
+              <FeaturesRevealCardsBento
+          tag="Portfolio"
+          title="Our Work"
+          description="A glimpse into the transformations we deliver."
+          items={[
+            {
+              title: "Patio Designs",
+              description: "Luxurious limestone and slate patios.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-old-black-square-tiles-wall-lights-cool-wallpapers_181624-28438.jpg",
+            },
+            {
+              title: "Retaining Walls",
+              description: "Structural walls that double as art.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-14140.jpg",
+            },
+            {
+              title: "Fire Features",
+              description: "Stunning hearths and fire pits.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-heart-symbol-carved-tree_181624-21399.jpg",
+            },
+            {
+              title: "Stone Pathways",
+              description: "Artisan-laid garden walkways.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/bobblestone-path-with-moss_23-2151942469.jpg",
+            },
+            {
+              title: "Outdoor Kitchens",
+              description: "High-end masonry kitchens.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/bundles-basil-amaranth-marble-surface_114579-54860.jpg",
+            },
+            {
+              title: "Entrance Pillars",
+              description: "Grand masonry gate entries.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/famous-knossos-palace_268835-17455.jpg",
+            },
+            {
+              title: "Pool Coping",
+              description: "Perfectly finished stone edges.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/sweet-roll-with-green-marmalades-pinecones-white-plate-high-quality-photo_114579-26655.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonial.tsx

@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonial" section.
+
+import React from 'react';
+import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialSection(): React.JSX.Element {
+  return (
+    <div id="testimonial" data-section="testimonial">
+        <SectionErrorBoundary name="testimonial">
+              <TestimonialTrustCard
+          quote="The stone work they did is absolutely impeccable. A true artisan company."
+          rating={5}
+          author="James R., Homeowner"
+          avatars={[
+            {
+              name: "Client 1",
+              imageSrc: "http://img.b2bpic.net/free-photo/builder-showing-blueprint-colleague_23-2147711060.jpg",
+            },
+            {
+              name: "Client 2",
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-young-brunette-girl-pink-shirt-holding-yoga-mat-smiling-camera-outdoors-healthy-lifestyle-concept_197531-32640.jpg",
+            },
+            {
+              name: "Client 3",
+              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-talking-phone-park_1303-24876.jpg",
+            },
+            {
+              name: "Client 4",
+              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-with-map-outdoors_23-2150283250.jpg",
+            },
+            {
+              name: "Client 5",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-man-business-worker-using-vr-glasses-working-office_839833-10645.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}