Merge version_3_1782020959938 into main #2
@@ -1,117 +1,39 @@
|
||||
import { ShieldCheck, Clock, Award, Heart, BadgeCheck } from "lucide-react";
|
||||
// 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.
|
||||
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
||||
import HeroOverlayMarquee from "@/components/sections/hero/HeroOverlayMarquee";
|
||||
import TeamGlassCards from "@/components/sections/team/TeamGlassCards";
|
||||
import FeaturesResultsComparison from "@/components/sections/features/FeaturesResultsComparison";
|
||||
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
|
||||
import TeamOverlayCardsGrid from "@/components/sections/team/TeamOverlayCardsGrid";
|
||||
import FaqSimple from "@/components/sections/faq/FaqSimple";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import ResultsSection from './HomePage/sections/Results';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage() {
|
||||
|
||||
import GuaranteeSection from './HomePage/sections/Guarantee';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<StyleProvider siteBackground="aurora" heroBackground="none" buttonVariant="arrow">
|
||||
<StyleProvider siteBackground="aurora" heroBackground="none" buttonVariant="arrow">
|
||||
<SiteBackgroundSlot />
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Ergonomic Innovation"
|
||||
title="Relieve Back Pain, Reclaim Life"
|
||||
description="Experience targeted lumbar stability with ExoBrace. Engineered for comfort and support to help you move freely and pain-free every single day."
|
||||
primaryButton={{ text: "Shop ExoBrace", href: "#contact" }}
|
||||
secondaryButton={{ text: "(800) 555-EXO", href: "tel:8005553961" }}
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3FQnTcOyziVE8zaGbBoApT7HNH7/uploaded-1782020677582-8z4c66ay.png"
|
||||
avatarsSrc={["http://img.b2bpic.net/free-photo/portrait-handsome-man-living-room_329181-626.jpg", "http://img.b2bpic.net/free-photo/beautiful-woman-training-summer-park_1157-23812.jpg", "http://img.b2bpic.net/free-photo/business-man-using-laptop-office_1303-26999.jpg"]}
|
||||
avatarsLabel="Trusted by 5,000+ happy customers"
|
||||
items={[
|
||||
{ text: "Medical-Grade Stability", icon: ShieldCheck },
|
||||
{ text: "All-Day Comfort", icon: Clock },
|
||||
{ text: "Engineered Design", icon: Award },
|
||||
{ text: "Posture Correction", icon: Heart },
|
||||
{ text: "Breathable Fabric", icon: BadgeCheck },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<HeroSection />
|
||||
<GuaranteeSection />
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<TeamGlassCards
|
||||
tag="Support Technology"
|
||||
title="Features That Define Relief"
|
||||
description="ExoBrace combines advanced materials with ergonomic science to target your specific pain points."
|
||||
members={[
|
||||
{ name: "Adaptive Compression", role: "Customizable fit for individual comfort levels", imageSrc: "http://img.b2bpic.net/free-photo/rolled-bandage_23-2147612241.jpg" },
|
||||
{ name: "Breathable Mesh", role: "Stay cool and comfortable during extended wear", imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2148934927.jpg" },
|
||||
{ name: "Stabilizing Stays", role: "Reinforced support to reduce spine load", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-female-medical-skeleton_1048-6005.jpg" },
|
||||
{ name: "Slim Profile", role: "Discreet fit under your daily clothing", imageSrc: "http://img.b2bpic.net/free-photo/view-matchsticks-with-geometric-shapes_23-2149600201.jpg" },
|
||||
{ name: "Anti-Slip Grip", role: "Stays in place even during physical activity", imageSrc: "http://img.b2bpic.net/free-photo/texture-close-up-metal_23-2148198951.jpg" },
|
||||
{ name: "Easy Adjust", role: "Quick-tighten pulleys for instant tension", imageSrc: "http://img.b2bpic.net/free-photo/metallic-shiny-personal-garment-color_1203-6417.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<ServicesSection />
|
||||
|
||||
<div id="results" data-section="results">
|
||||
<FeaturesResultsComparison
|
||||
tag="Real-World Impact"
|
||||
title="Proven Relief"
|
||||
description="Watch how users transition from limited mobility to full, active living."
|
||||
items={[
|
||||
{ treatment: "Lower Back Strain", detail: "2 weeks of consistent use", beforeSrc: "http://img.b2bpic.net/free-photo/front-view-disgruntled-man-bent-because-his-neck-hurts_179666-43054.jpg", afterSrc: "http://img.b2bpic.net/free-photo/full-length-view-woman-overalls-sneakers_197531-19794.jpg" },
|
||||
{ treatment: "Posture Support", detail: "4 weeks for habit correction", beforeSrc: "http://img.b2bpic.net/free-photo/man-office-stretching-work-day_23-2150468527.jpg", afterSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-cube_23-2149448560.jpg" },
|
||||
{ treatment: "Chronic Discomfort", detail: "Immediate support usage", beforeSrc: "http://img.b2bpic.net/free-photo/side-view-anxious-man-working_23-2149729592.jpg", afterSrc: "http://img.b2bpic.net/free-photo/full-shot-man-with-laptop-tablet_23-2149366502.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<ResultsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="ExoBrace has been a game changer for my daily workflow. I can finally stand at my desk for hours without that familiar, nagging lower back ache."
|
||||
rating={5}
|
||||
author="Marcus T., Verified User"
|
||||
avatars={[{ name: "Marcus", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-living-room_329181-626.jpg" }, { name: "Sarah", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-training-summer-park_1157-23812.jpg" }, { name: "David", imageSrc: "http://img.b2bpic.net/free-photo/business-man-using-laptop-office_1303-26999.jpg" }]}
|
||||
/>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamOverlayCardsGrid
|
||||
tag="Our Mission"
|
||||
title="Built by Experts"
|
||||
description="Our team of ergonomic specialists and physical therapists are dedicated to your back health."
|
||||
members={[
|
||||
{ name: "Dr. Sarah Chen", role: "Orthopedic Specialist", imageSrc: "http://img.b2bpic.net/free-photo/blonde-doctor-nurse-with-stethoscope-isolated-white-background_627829-8910.jpg" },
|
||||
{ name: "James Miller", role: "Product Designer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-factory-worker-standing-factory-production-hall_342744-210.jpg" },
|
||||
{ name: "Elena Rossi", role: "Rehab Consultant", imageSrc: "http://img.b2bpic.net/free-photo/portrait-friendly-doctor-isolated-gray_1328-5246.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<TeamSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
tag="Common Questions"
|
||||
title="Everything About ExoBrace"
|
||||
description="Find out why our support belt is the #1 choice for lumbar relief."
|
||||
items={[
|
||||
{ question: "Can I wear it under my clothes?", answer: "Yes, the slim profile of ExoBrace is designed to be invisible beneath everyday clothing." },
|
||||
{ question: "How long can I wear it?", answer: "It is recommended to wear it during high-activity hours or prolonged standing, but it is comfortable enough for all-day use." },
|
||||
{ question: "Is it adjustable?", answer: "Absolutely. The micro-adjust pulley system allows you to change the compression level in seconds." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
tag="Get in Touch"
|
||||
title="Ready for Relief?"
|
||||
description="Contact us for sizing advice or bulk order inquiries. We are here to support you."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help your back?", rows: 4, required: true }}
|
||||
buttonText="Send Message"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780755.jpg"
|
||||
/>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</StyleProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
24
src/pages/HomePage/sections/Contact.tsx
Normal file
24
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
// 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 ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
tag="Get in Touch"
|
||||
title="Ready for Relief?"
|
||||
description="Contact us for sizing advice or bulk order inquiries. We are here to support you."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help your back?", rows: 4, required: true }}
|
||||
buttonText="Send Message"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780755.jpg"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/Faq.tsx
Normal file
22
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// 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 FaqSimple from "@/components/sections/faq/FaqSimple";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
tag="Common Questions"
|
||||
title="Everything About ExoBrace"
|
||||
description="Find out why our support belt is the #1 choice for lumbar relief."
|
||||
items={[
|
||||
{ question: "Can I wear it under my clothes?", answer: "Yes, the slim profile of ExoBrace is designed to be invisible beneath everyday clothing." },
|
||||
{ question: "How long can I wear it?", answer: "It is recommended to wear it during high-activity hours or prolonged standing, but it is comfortable enough for all-day use." },
|
||||
{ question: "Is it adjustable?", answer: "Absolutely. The micro-adjust pulley system allows you to change the compression level in seconds." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/pages/HomePage/sections/Guarantee.tsx
Normal file
25
src/pages/HomePage/sections/Guarantee.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { ShieldCheck } from 'lucide-react';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
|
||||
export default function GuaranteeSection() {
|
||||
return (
|
||||
<section id="guarantee" data-webild-section="guarantee" className="w-full py-12 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<ScrollReveal variant="fade">
|
||||
<div className="card p-8 md:p-12 flex flex-col md:flex-row items-center justify-center gap-6 text-center md:text-left border border-primary-cta/20">
|
||||
<div className="flex-shrink-0 bg-background p-4 rounded-full shadow-sm">
|
||||
<ShieldCheck className="w-12 h-12 text-primary-cta" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-foreground mb-2">30-Day Risk-Free Trial & Money-Back Guarantee</h2>
|
||||
<p className="text-lg text-accent max-w-3xl">
|
||||
Experience the ExoBrace difference completely risk-free. If you don't feel significant relief within 30 days, return it for a full refund. No questions asked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
30
src/pages/HomePage/sections/Hero.tsx
Normal file
30
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import { ShieldCheck, Clock, Award, Heart, BadgeCheck } from "lucide-react";
|
||||
import HeroOverlayMarquee from "@/components/sections/hero/HeroOverlayMarquee";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Ergonomic Innovation"
|
||||
title="Relieve Back Pain, Reclaim Life"
|
||||
description="Experience targeted lumbar stability with ExoBrace. Engineered for comfort and support to help you move freely and pain-free every single day."
|
||||
primaryButton={{ text: "Shop ExoBrace", href: "#contact" }}
|
||||
secondaryButton={{ text: "(800) 555-EXO", href: "tel:8005553961" }}
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3FQnTcOyziVE8zaGbBoApT7HNH7/uploaded-1782020677582-8z4c66ay.png"
|
||||
avatarsSrc={["http://img.b2bpic.net/free-photo/portrait-handsome-man-living-room_329181-626.jpg", "http://img.b2bpic.net/free-photo/beautiful-woman-training-summer-park_1157-23812.jpg", "http://img.b2bpic.net/free-photo/business-man-using-laptop-office_1303-26999.jpg"]}
|
||||
avatarsLabel="Trusted by 5,000+ happy customers"
|
||||
items={[
|
||||
{ text: "Medical-Grade Stability", icon: ShieldCheck },
|
||||
{ text: "All-Day Comfort", icon: Clock },
|
||||
{ text: "Engineered Design", icon: Award },
|
||||
{ text: "Posture Correction", icon: Heart },
|
||||
{ text: "Breathable Fabric", icon: BadgeCheck },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/Results.tsx
Normal file
22
src/pages/HomePage/sections/Results.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "results" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesResultsComparison from "@/components/sections/features/FeaturesResultsComparison";
|
||||
|
||||
export default function ResultsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="results" data-section="results">
|
||||
<FeaturesResultsComparison
|
||||
tag="Real-World Impact"
|
||||
title="Proven Relief"
|
||||
description="Watch how users transition from limited mobility to full, active living."
|
||||
items={[
|
||||
{ treatment: "Lower Back Strain", detail: "2 weeks of consistent use", beforeSrc: "http://img.b2bpic.net/free-photo/front-view-disgruntled-man-bent-because-his-neck-hurts_179666-43054.jpg", afterSrc: "http://img.b2bpic.net/free-photo/full-length-view-woman-overalls-sneakers_197531-19794.jpg" },
|
||||
{ treatment: "Posture Support", detail: "4 weeks for habit correction", beforeSrc: "http://img.b2bpic.net/free-photo/man-office-stretching-work-day_23-2150468527.jpg", afterSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-cube_23-2149448560.jpg" },
|
||||
{ treatment: "Chronic Discomfort", detail: "Immediate support usage", beforeSrc: "http://img.b2bpic.net/free-photo/side-view-anxious-man-working_23-2149729592.jpg", afterSrc: "http://img.b2bpic.net/free-photo/full-shot-man-with-laptop-tablet_23-2149366502.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/pages/HomePage/sections/Services.tsx
Normal file
25
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamGlassCards from "@/components/sections/team/TeamGlassCards";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<TeamGlassCards
|
||||
tag="Support Technology"
|
||||
title="Features That Define Relief"
|
||||
description="ExoBrace combines advanced materials with ergonomic science to target your specific pain points."
|
||||
members={[
|
||||
{ name: "Adaptive Compression", role: "Customizable fit for individual comfort levels", imageSrc: "http://img.b2bpic.net/free-photo/rolled-bandage_23-2147612241.jpg" },
|
||||
{ name: "Breathable Mesh", role: "Stay cool and comfortable during extended wear", imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2148934927.jpg" },
|
||||
{ name: "Stabilizing Stays", role: "Reinforced support to reduce spine load", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-female-medical-skeleton_1048-6005.jpg" },
|
||||
{ name: "Slim Profile", role: "Discreet fit under your daily clothing", imageSrc: "http://img.b2bpic.net/free-photo/view-matchsticks-with-geometric-shapes_23-2149600201.jpg" },
|
||||
{ name: "Anti-Slip Grip", role: "Stays in place even during physical activity", imageSrc: "http://img.b2bpic.net/free-photo/texture-close-up-metal_23-2148198951.jpg" },
|
||||
{ name: "Easy Adjust", role: "Quick-tighten pulleys for instant tension", imageSrc: "http://img.b2bpic.net/free-photo/metallic-shiny-personal-garment-color_1203-6417.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/Team.tsx
Normal file
22
src/pages/HomePage/sections/Team.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "team" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamOverlayCardsGrid from "@/components/sections/team/TeamOverlayCardsGrid";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<TeamOverlayCardsGrid
|
||||
tag="Our Mission"
|
||||
title="Built by Experts"
|
||||
description="Our team of ergonomic specialists and physical therapists are dedicated to your back health."
|
||||
members={[
|
||||
{ name: "Dr. Sarah Chen", role: "Orthopedic Specialist", imageSrc: "http://img.b2bpic.net/free-photo/blonde-doctor-nurse-with-stethoscope-isolated-white-background_627829-8910.jpg" },
|
||||
{ name: "James Miller", role: "Product Designer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-factory-worker-standing-factory-production-hall_342744-210.jpg" },
|
||||
{ name: "Elena Rossi", role: "Rehab Consultant", imageSrc: "http://img.b2bpic.net/free-photo/portrait-friendly-doctor-isolated-gray_1328-5246.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
18
src/pages/HomePage/sections/Testimonials.tsx
Normal file
18
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
// 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";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="ExoBrace has been a game changer for my daily workflow. I can finally stand at my desk for hours without that familiar, nagging lower back ache."
|
||||
rating={5}
|
||||
author="Marcus T., Verified User"
|
||||
avatars={[{ name: "Marcus", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-living-room_329181-626.jpg" }, { name: "Sarah", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-training-summer-park_1157-23812.jpg" }, { name: "David", imageSrc: "http://img.b2bpic.net/free-photo/business-man-using-laptop-office_1303-26999.jpg" }]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user