Merge version_2_1781596746514 into main #1
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #f5faff;
|
||||
--card: #ffffff;
|
||||
--foreground: #001122;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #f5faff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #001122;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #7ba3cf;
|
||||
--background: #050505;
|
||||
--card: #0f0f0f;
|
||||
--foreground: #f0f0f0;
|
||||
--primary-cta: #8b5cf6;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #1f1f1f;
|
||||
--secondary-cta-text: #f0f0f0;
|
||||
--accent: #4c1d95;
|
||||
--background-accent: #1a1a1a;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1.5rem;
|
||||
|
||||
@@ -1,150 +1,27 @@
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
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 ProductsSection from './HomePage/sections/Products';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitMediaGrid
|
||||
tag="PRECISION. PERFORMANCE. PERSONALIZED."
|
||||
title="FROM OEM TO EXOTIX"
|
||||
description="Premium custom steering wheels built for control, comfort, and style."
|
||||
primaryButton={{
|
||||
text: "Build My Wheel",
|
||||
href: "/wheels",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Shop Now",
|
||||
href: "/wheels",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092005.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-sport-car-front-side-salon-view-black-wheel-with-metallic-silver-color-direction-door-open_114579-1166.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesImageBento
|
||||
tag="Collection"
|
||||
title="Precision Crafted Wheels"
|
||||
description="Upgrade your interior with our signature carbon and leather builds."
|
||||
items={[
|
||||
{
|
||||
title: "German Series",
|
||||
description: "Precision performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-robotic-vacuum-cleaner-flat-surface_23-2151736801.jpg",
|
||||
},
|
||||
{
|
||||
title: "Luxury Collection",
|
||||
description: "Absolute comfort.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163677.jpg",
|
||||
},
|
||||
{
|
||||
title: "Track Edition",
|
||||
description: "Built for speed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cushion-modern-car_1339-5504.jpg",
|
||||
},
|
||||
{
|
||||
title: "Limited Edition",
|
||||
description: "Exclusive finishes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150913773.jpg",
|
||||
},
|
||||
{
|
||||
title: "Alcantara Series",
|
||||
description: "Pro-grip texture.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/different-car-accessories-assortment_23-2149030429.jpg",
|
||||
},
|
||||
{
|
||||
title: "Forged Carbon",
|
||||
description: "High-durability build.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636227.jpg",
|
||||
},
|
||||
{
|
||||
title: "Performance Plus",
|
||||
description: "Custom engineering.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-288.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about your order."
|
||||
items={[
|
||||
{
|
||||
question: "What materials are your steering wheels made from?",
|
||||
answer: "Our steering wheels are crafted from premium materials including genuine leather, Alcantara, carbon fiber, and forged aluminum.",
|
||||
},
|
||||
{
|
||||
question: "Will this fit my vehicle?",
|
||||
answer: "Check the fitment section on each product page or contact us with your vehicle's year, make, and model.",
|
||||
},
|
||||
{
|
||||
question: "What are your shipping times?",
|
||||
answer: "Standard shipping takes 5-7 business days. Express shipping (2-3 days) is available at checkout.",
|
||||
},
|
||||
{
|
||||
question: "What is your return policy?",
|
||||
answer: "We offer a 30-day return policy on unused items in original packaging.",
|
||||
},
|
||||
{
|
||||
question: "Do I need professional installation?",
|
||||
answer: "We recommend professional installation for proper fitment and safety.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="The Exotix Ethos"
|
||||
descriptions={[
|
||||
"Exotix Steering was born from a passion for precision and the belief that the connection between driver and machine starts at the wheel.",
|
||||
"We leverage aerospace-grade materials and artisan-level craftsmanship to build interiors that don't just function—they inspire.",
|
||||
]}
|
||||
primaryButton={{
|
||||
text: "Our Story",
|
||||
href: "/about",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted By"
|
||||
title="Industry Experts"
|
||||
description="We are proud to be the interior choice for top-tier automotive builders and enthusiasts worldwide."
|
||||
names={[
|
||||
"Performance Garage",
|
||||
"EuroTech Tuning",
|
||||
"Carbon Dynamics",
|
||||
"Drift King Society",
|
||||
"Auto Aesthetics Pro",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SocialProofSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
26
src/pages/HomePage/sections/About.tsx
Normal file
26
src/pages/HomePage/sections/About.tsx
Normal 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="The Exotix Ethos"
|
||||
descriptions={[
|
||||
"Exotix Steering was born from a passion for precision and the belief that the connection between driver and machine starts at the wheel.",
|
||||
"We leverage aerospace-grade materials and artisan-level craftsmanship to build interiors that don't just function—they inspire.",
|
||||
]}
|
||||
primaryButton={{
|
||||
text: "Our Story",
|
||||
href: "/about",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Faq.tsx
Normal file
42
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// 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 FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about your order."
|
||||
items={[
|
||||
{
|
||||
question: "What materials are your steering wheels made from?",
|
||||
answer: "Our steering wheels are crafted from premium materials including genuine leather, Alcantara, carbon fiber, and forged aluminum.",
|
||||
},
|
||||
{
|
||||
question: "Will this fit my vehicle?",
|
||||
answer: "Check the fitment section on each product page or contact us with your vehicle's year, make, and model.",
|
||||
},
|
||||
{
|
||||
question: "What are your shipping times?",
|
||||
answer: "Standard shipping takes 5-7 business days. Express shipping (2-3 days) is available at checkout.",
|
||||
},
|
||||
{
|
||||
question: "What is your return policy?",
|
||||
answer: "We offer a 30-day return policy on unused items in original packaging.",
|
||||
},
|
||||
{
|
||||
question: "Do I need professional installation?",
|
||||
answer: "We recommend professional installation for proper fitment and safety.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/pages/HomePage/sections/Hero.tsx
Normal file
36
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// 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 HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitMediaGrid
|
||||
tag="PRECISION. PERFORMANCE. PERSONALIZED."
|
||||
title="FROM OEM TO EXOTIX"
|
||||
description="Premium custom steering wheels built for control, comfort, and style."
|
||||
primaryButton={{
|
||||
text: "Build My Wheel",
|
||||
href: "/wheels",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Shop Now",
|
||||
href: "/wheels",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092005.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-sport-car-front-side-salon-view-black-wheel-with-metallic-silver-color-direction-door-open_114579-1166.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Products.tsx
Normal file
57
src/pages/HomePage/sections/Products.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "products" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesImageBento
|
||||
tag="Collection"
|
||||
title="Precision Crafted Wheels"
|
||||
description="Upgrade your interior with our signature carbon and leather builds."
|
||||
items={[
|
||||
{
|
||||
title: "German Series",
|
||||
description: "Precision performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-robotic-vacuum-cleaner-flat-surface_23-2151736801.jpg",
|
||||
},
|
||||
{
|
||||
title: "Luxury Collection",
|
||||
description: "Absolute comfort.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163677.jpg",
|
||||
},
|
||||
{
|
||||
title: "Track Edition",
|
||||
description: "Built for speed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cushion-modern-car_1339-5504.jpg",
|
||||
},
|
||||
{
|
||||
title: "Limited Edition",
|
||||
description: "Exclusive finishes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150913773.jpg",
|
||||
},
|
||||
{
|
||||
title: "Alcantara Series",
|
||||
description: "Pro-grip texture.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/different-car-accessories-assortment_23-2149030429.jpg",
|
||||
},
|
||||
{
|
||||
title: "Forged Carbon",
|
||||
description: "High-durability build.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636227.jpg",
|
||||
},
|
||||
{
|
||||
title: "Performance Plus",
|
||||
description: "Custom engineering.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-288.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/SocialProof.tsx
Normal file
27
src/pages/HomePage/sections/SocialProof.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "social-proof" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SocialProofSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted By"
|
||||
title="Industry Experts"
|
||||
description="We are proud to be the interior choice for top-tier automotive builders and enthusiasts worldwide."
|
||||
names={[
|
||||
"Performance Garage",
|
||||
"EuroTech Tuning",
|
||||
"Carbon Dynamics",
|
||||
"Drift King Society",
|
||||
"Auto Aesthetics Pro",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user