Merge version_2_1781472706245 into main #4

Merged
bender merged 1 commits from version_2_1781472706245 into main 2026-06-14 21:35:55 +00:00
10 changed files with 453 additions and 252 deletions

View File

@@ -1,264 +1,41 @@
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import { Award, Building, Clock, Globe, Users } 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 ProcessSection from './HomePage/sections/Process';
import ProjectsSection from './HomePage/sections/Projects';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
{/* webild-stub @2026-06-14T21:35:49.515Z: Update the primary button text and subtitle to emphasize the free aspect of the consultation to reduce friction and increase clicks. Add a logo ticker section displaying logos of past residential/commercial clients to instantly validate you */}
import ClientsTickerSection from './HomePage/sections/ClientsTicker';export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg",
"http://img.b2bpic.net/free-photo/young-cute-couple-repairs-room_1157-25159.jpg",
"http://img.b2bpic.net/free-photo/smiley-couple-inside-their-new-home-holding-house-plans_23-2148895457.jpg",
"http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15675.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-real-estate-agent_23-2151065041.jpg",
]}
avatarText="Trusted by 100+ clients"
title="Transform Your Vision Into Remarkable Architecture"
description="Expert architectural design for residential and commercial projects. Schedule your free consultation today with our award-winning team."
primaryButton={{
text: "Book Your Consultation",
href: "#contact",
}}
secondaryButton={{
text: "View Portfolio",
href: "#projects",
}}
names={[
"Design",
"Integrity",
"Innovation",
"Quality",
"Precision",
]}
imageSrc="http://img.b2bpic.net/free-photo/ai-generated-modern-styled-entryway_23-2150692299.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<ClientsTickerSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="Our Philosophy"
title="Architecting Better Spaces"
description="With over two decades of experience, we specialize in creating spaces that balance form, function, and environment. Our approach is deeply collaborative, ensuring your unique needs are at the heart of every design decision."
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-working-project_23-2148903491.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="process" data-section="process">
<SectionErrorBoundary name="process">
<FeaturesDetailedSteps
tag="How We Work"
title="From Concept to Construction"
description="A clear, structured journey to turn your architectural vision into reality."
steps={[
{
tag: "01",
title: "Discovery",
subtitle: "Initial Consultation",
description: "We explore your goals, budget, and site constraints to establish a project vision.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-resort-lanzarote-spain-sunny-day_181624-23163.jpg",
},
{
tag: "02",
title: "Design",
subtitle: "Conceptual Planning",
description: "Turning requirements into innovative, functional designs with detailed drafting.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-making-her-bed-scandinavian-interior-style_53876-125364.jpg",
},
{
tag: "03",
title: "Construction",
subtitle: "Project Management",
description: "Supporting you through planning permissions and construction oversight to completion.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-office-buildings_1359-605.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ProcessSection />
<div id="projects" data-section="projects">
<SectionErrorBoundary name="projects">
<FeaturesImageBento
tag="Our Portfolio"
title="Recent Architectural Projects"
description="Explore our recent residential and commercial accomplishments."
items={[
{
title: "Modern Villa",
description: "Luxury residential design",
imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135770.jpg",
},
{
title: "Urban Apartment",
description: "Small footprint innovation",
imageSrc: "http://img.b2bpic.net/free-photo/morning-breakfast-still-life-coffee-croissant-tray-big-window_8353-8321.jpg",
},
{
title: "Office Complex",
description: "Commercial functionality",
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-modern-building-architecture_23-2148252760.jpg",
},
{
title: "Kitchen Reno",
description: "Interior design excellence",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-kitchen-drawer-with-wooden-dividers-interior-detail-modern-kitchen-island_169016-72791.jpg",
},
{
title: "Rooftop Garden",
description: "Sustainable space utilization",
imageSrc: "http://img.b2bpic.net/free-photo/brown-wooden-bench-near-green-plants_250224-356.jpg",
},
{
title: "Bath Detail",
description: "High-end finishing touches",
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756532.jpg",
},
{
title: "Townhouse",
description: "Urban development expertise",
imageSrc: "http://img.b2bpic.net/free-photo/houses-with-yacht-old-port-nesebar-bulgaria_627829-7533.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ProjectsSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Impact"
title="Our Professional Reach"
description="Measuring success through consistent quality and client satisfaction."
metrics={[
{
icon: Award,
title: "Awards Won",
value: "25+",
},
{
icon: Building,
title: "Projects Completed",
value: "150+",
},
{
icon: Users,
title: "Satisfied Clients",
value: "120+",
},
{
icon: Clock,
title: "Years Experience",
value: "20+",
},
{
icon: Globe,
title: "Cities Served",
value: "12",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialTrustCard
quote="Their team managed to capture everything we dreamed of for our home remodel. Exceptional creativity and professionalism."
rating={5}
author="Sarah Miller, Residential Client"
avatars={[
{
name: "Sarah Miller",
imageSrc: "http://img.b2bpic.net/free-photo/creative-workers-standing-near-work-table-being-happy-finish-their-work_273609-14159.jpg",
},
{
name: "John Doe",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-showing-approval_23-2148269236.jpg",
},
{
name: "Jane Smith",
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg",
},
{
name: "Robert Brown",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-laptop-hand-showing-thumb-up-sign_23-2147972892.jpg",
},
{
name: "Emily Davis",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-equipment_23-2149366625.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTabbedAccordion
tag="Support"
title="Frequently Asked Questions"
description="Common inquiries about our process."
categories={[
{
name: "Consultations",
items: [
{
question: "Is the first consultation free?",
answer: "Yes, we offer a free initial consultation to discuss your vision.",
},
{
question: "Do I need planning permission?",
answer: "Every project is unique; we guide you through planning requirements during the discovery phase.",
},
],
},
{
name: "Design",
items: [
{
question: "Can you design for small spaces?",
answer: "Absolutely, we specialize in maximizing functionality in small urban designs.",
},
{
question: "What is your style?",
answer: "We focus on warm, organic, and professional designs that stand the test of time.",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Let's Begin"
text="Ready to bring your architectural vision to life? Book your consultation today."
primaryButton={{
text: "Schedule Today",
href: "#",
}}
secondaryButton={{
text: "Contact Us",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,21 @@
// 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 AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="Our Philosophy"
title="Architecting Better Spaces"
description="With over two decades of experience, we specialize in creating spaces that balance form, function, and environment. Our approach is deeply collaborative, ensuring your unique needs are at the heart of every design decision."
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-working-project_23-2148903491.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
import LoopCarousel from '@/components/ui/LoopCarousel';
import TextAnimation from '@/components/ui/TextAnimation';
export default function ClientsTickerSection() {
const clients = [
"Apex Developments",
"Horizon Builders",
"Crestview Properties",
"Lumina Commercial",
"Sterling Estates",
"Vanguard Homes",
"Pinnacle Architecture",
"Elevate Design Group"
];
return (
<section data-webild-section="clients-ticker" id="clients-ticker" className="py-16 bg-card border-y border-border overflow-hidden">
<div className="w-content-width mx-auto px-4 md:px-8 mb-10 text-center">
<TextAnimation
text="Trusted by leading residential and commercial property owners"
variant="fade"
tag="p"
className="text-sm font-semibold text-muted-foreground uppercase tracking-wider"
gradientText={false}
/>
</div>
<LoopCarousel>
<div className="flex items-center gap-16 px-8">
{clients.map((client, i) => (
<span key={i} className="text-2xl md:text-3xl font-bold text-foreground/30 whitespace-nowrap">
{client}
</span>
))}
</div>
</LoopCarousel>
</section>
);
}

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="Let's Begin"
text="Ready to bring your architectural vision to life? Book your consultation today."
primaryButton={{
text: "Schedule Today",
href: "#",
}}
secondaryButton={{
text: "Contact Us",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,48 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "faq" section.
import React from 'react';
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTabbedAccordion
tag="Support"
title="Frequently Asked Questions"
description="Common inquiries about our process."
categories={[
{
name: "Consultations",
items: [
{
question: "Is the first consultation free?",
answer: "Yes, we offer a free initial consultation to discuss your vision.",
},
{
question: "Do I need planning permission?",
answer: "Every project is unique; we guide you through planning requirements during the discovery phase.",
},
],
},
{
name: "Design",
items: [
{
question: "Can you design for small spaces?",
answer: "Absolutely, we specialize in maximizing functionality in small urban designs.",
},
{
question: "What is your style?",
answer: "We focus on warm, organic, and professional designs that stand the test of time.",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,100 @@
/* 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 AvatarGroup from "@/components/ui/AvatarGroup";
const avatarsSrc = [
"http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg",
"http://img.b2bpic.net/free-photo/young-cute-couple-repairs-room_1157-25159.jpg",
"http://img.b2bpic.net/free-photo/smiley-couple-inside-their-new-home-holding-house-plans_23-2148895457.jpg",
"http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15675.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-real-estate-agent_23-2151065041.jpg"
];
const primaryButton = {
href: "#contact",
text: "Book Your Free Consultation"
};
const secondaryButton = {
text: "View Portfolio",
href: "#projects"
};
const names = [
"Design",
"Integrity",
"Innovation",
"Quality",
"Precision"
];
type HeroCenteredLogosProps = {
avatarsSrc: string[];
avatarText: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
names: string[];
hideMedia?: boolean;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const HeroInline = () => {
return (
<section aria-label="Hero section" className="relative h-svh flex flex-col mb-20">
<HeroBackgroundSlot />
{!undefined && (
<div className="absolute inset-0 z-0">
<ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/ai-generated-modern-styled-entryway_23-2150692299.jpg"} className="size-full object-cover" />
<div className="absolute inset-0 bg-background/80" />
</div>
)}
<div className="relative z-10 flex-1 flex items-center justify-center">
<div className="flex flex-col items-center gap-3 pt-8 w-content-width mx-auto text-center">
<AvatarGroup avatarsSrc={avatarsSrc} label={"Trusted by 100+ clients"} size="lg" />
<TextAnimation
text={"Transform Your Vision Into Remarkable Architecture"}
variant="fade"
gradientText={true}
tag="h1"
className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={"Expert architectural design for residential and commercial projects. Schedule your 100% free, no-obligation consultation today with our award-winning team."}
variant="fade"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
/>
<div className="flex flex-wrap 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>
<div className="relative z-10 w-content-width mx-auto pb-8 overflow-hidden mask-fade-x">
<div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
{[...names, ...names, ...names, ...names].map((name, index) => (
<div key={index} className="shrink-0 mx-3 px-4 py-2 card rounded">
<span className="text-xl font-semibold whitespace-nowrap text-foreground/75">{name}</span>
</div>
))}
</div>
</div>
</section>
);
};
export default function HeroSection() {
return (
<div data-webild-section="hero" id="hero">
<HeroInline />
</div>
);
}

View File

@@ -0,0 +1,48 @@
// 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, Building, Clock, Globe, Users } 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="Impact"
title="Our Professional Reach"
description="Measuring success through consistent quality and client satisfaction."
metrics={[
{
icon: Award,
title: "Awards Won",
value: "25+",
},
{
icon: Building,
title: "Projects Completed",
value: "150+",
},
{
icon: Users,
title: "Satisfied Clients",
value: "120+",
},
{
icon: Clock,
title: "Years Experience",
value: "20+",
},
{
icon: Globe,
title: "Cities Served",
value: "12",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,43 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "process" section.
import React from 'react';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProcessSection(): React.JSX.Element {
return (
<div id="process" data-section="process">
<SectionErrorBoundary name="process">
<FeaturesDetailedSteps
tag="How We Work"
title="From Concept to Construction"
description="A clear, structured journey to turn your architectural vision into reality."
steps={[
{
tag: "01",
title: "Discovery",
subtitle: "Initial Consultation",
description: "We explore your goals, budget, and site constraints to establish a project vision.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-resort-lanzarote-spain-sunny-day_181624-23163.jpg",
},
{
tag: "02",
title: "Design",
subtitle: "Conceptual Planning",
description: "Turning requirements into innovative, functional designs with detailed drafting.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-making-her-bed-scandinavian-interior-style_53876-125364.jpg",
},
{
tag: "03",
title: "Construction",
subtitle: "Project Management",
description: "Supporting you through planning permissions and construction oversight to completion.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-office-buildings_1359-605.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "projects" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProjectsSection(): React.JSX.Element {
return (
<div id="projects" data-section="projects">
<SectionErrorBoundary name="projects">
<FeaturesImageBento
tag="Our Portfolio"
title="Recent Architectural Projects"
description="Explore our recent residential and commercial accomplishments."
items={[
{
title: "Modern Villa",
description: "Luxury residential design",
imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135770.jpg",
},
{
title: "Urban Apartment",
description: "Small footprint innovation",
imageSrc: "http://img.b2bpic.net/free-photo/morning-breakfast-still-life-coffee-croissant-tray-big-window_8353-8321.jpg",
},
{
title: "Office Complex",
description: "Commercial functionality",
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-modern-building-architecture_23-2148252760.jpg",
},
{
title: "Kitchen Reno",
description: "Interior design excellence",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-kitchen-drawer-with-wooden-dividers-interior-detail-modern-kitchen-island_169016-72791.jpg",
},
{
title: "Rooftop Garden",
description: "Sustainable space utilization",
imageSrc: "http://img.b2bpic.net/free-photo/brown-wooden-bench-near-green-plants_250224-356.jpg",
},
{
title: "Bath Detail",
description: "High-end finishing touches",
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756532.jpg",
},
{
title: "Townhouse",
description: "Urban development expertise",
imageSrc: "http://img.b2bpic.net/free-photo/houses-with-yacht-old-port-nesebar-bulgaria_627829-7533.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 "testimonials" section.
import React from 'react';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialTrustCard
quote="Their team managed to capture everything we dreamed of for our home remodel. Exceptional creativity and professionalism."
rating={5}
author="Sarah Miller, Residential Client"
avatars={[
{
name: "Sarah Miller",
imageSrc: "http://img.b2bpic.net/free-photo/creative-workers-standing-near-work-table-being-happy-finish-their-work_273609-14159.jpg",
},
{
name: "John Doe",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-showing-approval_23-2148269236.jpg",
},
{
name: "Jane Smith",
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg",
},
{
name: "Robert Brown",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-laptop-hand-showing-thumb-up-sign_23-2147972892.jpg",
},
{
name: "Emily Davis",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-equipment_23-2149366625.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}