5 Commits

Author SHA1 Message Date
1432f1b1a3 Merge version_3_1781469688696 into main
Merge version_3_1781469688696 into main
2026-06-14 20:42:48 +00:00
kudinDmitriyUp
3df1650d50 Bob AI: Made the hero photo larger by adjusting column widths and in 2026-06-14 20:42:04 +00:00
8841cd1676 Merge version_2_1781469626587 into main
Merge version_2_1781469626587 into main
2026-06-14 20:40:53 +00:00
kudinDmitriyUp
9217fc7a28 Bob AI: Update the hero section to use the uploaded image: https://storage.googleapis.co 2026-06-14 20:40:50 +00:00
50a507ed58 Merge version_1_1781469187837 into main
Merge version_1_1781469187837 into main
2026-06-14 20:34:13 +00:00
9 changed files with 401 additions and 255 deletions

View File

@@ -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="http://img.b2bpic.net/free-photo/paradise-resort-sea-island-coast_1203-5692.jpg"
/>
</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 />
</>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}