Merge version_2_1782591012686 into main #1
@@ -1,219 +1,30 @@
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
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 FeaturesSection from './HomePage/sections/Features';
|
||||
import ProductsSection from './HomePage/sections/Products';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="APEX"
|
||||
description="Redefining the standard of performance apparel through 3D-engineered design."
|
||||
primaryButton={{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "About Us",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/eighties-abstract-background-with-silver-triangles_23-2147573116.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBentoGrid
|
||||
tag="Technology"
|
||||
title="Built for the Future"
|
||||
description="Advanced material science meets cutting-edge aesthetic form."
|
||||
features={[
|
||||
{
|
||||
title: "Engineered Fabric",
|
||||
description: "Seamless, high-stretch materials.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-tin-can-kitchen-towel_23-2148785185.jpg",
|
||||
},
|
||||
{
|
||||
title: "3D Geometry",
|
||||
description: "Form that follows your movement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-rendering-jackets-display_23-2149745047.jpg",
|
||||
},
|
||||
{
|
||||
title: "Thermal Control",
|
||||
description: "Regulated body temperature.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-with-ruler-close-up_23-2148966942.jpg",
|
||||
},
|
||||
{
|
||||
title: "Aerodynamic",
|
||||
description: "Cutting wind resistance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005731.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Collection"
|
||||
title="New Arrivals"
|
||||
description="Experience the latest drop."
|
||||
items={[
|
||||
{
|
||||
title: "Apex Jacket",
|
||||
description: "Waterproof shell.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-rendering-jackets-display_23-2149745036.jpg",
|
||||
},
|
||||
{
|
||||
title: "Core Tee",
|
||||
description: "Technical cotton blend.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-rendering-jackets-display_23-2149745029.jpg",
|
||||
},
|
||||
{
|
||||
title: "Peak Denims",
|
||||
description: "Reinforced flex wear.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-men-jacket-mannequin-boutique-generated-by-ai_188544-43404.jpg",
|
||||
},
|
||||
{
|
||||
title: "Apex Cap",
|
||||
description: "Structured minimalist hat.",
|
||||
href: "#",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=nsufnw",
|
||||
},
|
||||
{
|
||||
title: "Utility Belt",
|
||||
description: "Modular storage.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mens-studded-leather-belt-with-metal-buckle-white-background_460848-12573.jpg",
|
||||
},
|
||||
{
|
||||
title: "Vision Shades",
|
||||
description: "UV protected lens.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-futuristic-gaming-virtual-reality-headset_23-2151133304.jpg",
|
||||
},
|
||||
{
|
||||
title: "Base Pack",
|
||||
description: "Technical carry system.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-tourist-going-mountain-trip-mask-with-backpack_179666-32101.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductsSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingSplitCards
|
||||
tag="Membership"
|
||||
title="Join the Elite"
|
||||
description="Exclusive access and rewards."
|
||||
plans={[
|
||||
{
|
||||
tag: "Entry",
|
||||
price: "$99",
|
||||
period: "Annual",
|
||||
description: "Core access to drops.",
|
||||
primaryButton: {
|
||||
text: "Join",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Included Perks",
|
||||
features: [
|
||||
"10% discount",
|
||||
"Early access",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Apex",
|
||||
price: "$299",
|
||||
period: "Annual",
|
||||
description: "Full access to ecosystem.",
|
||||
primaryButton: {
|
||||
text: "Join",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Included Perks",
|
||||
features: [
|
||||
"30% discount",
|
||||
"Priority support",
|
||||
"Vault access",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PricingSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Voice"
|
||||
title="Community Feedback"
|
||||
description="Join thousands who trust our design."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Leo K.",
|
||||
role: "Athlete",
|
||||
quote: "Unmatched quality and fit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-high-angle_23-2150264184.jpg",
|
||||
},
|
||||
{
|
||||
name: "Maria S.",
|
||||
role: "Designer",
|
||||
quote: "Finally, fashion that thinks.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/be-unique-logo-illustration_53876-78899.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jake P.",
|
||||
role: "Traveler",
|
||||
quote: "Perfect for high-intensity travel.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478993.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah T.",
|
||||
role: "Creator",
|
||||
quote: "Style meets functionality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-concept-human_23-2150688457.jpg",
|
||||
},
|
||||
{
|
||||
name: "Omar F.",
|
||||
role: "Pro",
|
||||
quote: "My new daily uniform.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-backpack-with-passport_23-2148927414.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Connect"
|
||||
text="Join our newsletter for exclusive drops."
|
||||
primaryButton={{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Follow Us",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.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 "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="Connect"
|
||||
text="Join our newsletter for exclusive drops."
|
||||
primaryButton={{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Follow Us",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Features.tsx
Normal file
21
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// 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 FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBentoGrid
|
||||
tag="Technology"
|
||||
title="Built for the Future"
|
||||
description="Advanced material science meets cutting-edge aesthetic form."
|
||||
features={[{"title":"Engineered Fabric","description":"Seamless, high-stretch materials.","imageSrc":"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=1000&auto=format&fit=crop"},{"description":"Form that follows your movement.","imageSrc":"https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=1000&auto=format&fit=crop","title":"3D Geometry"},{"description":"Regulated body temperature.","imageSrc":"https://images.unsplash.com/photo-1556821840-3a63f95609a7?q=80&w=1000&auto=format&fit=crop","title":"Thermal Control"},{"title":"Aerodynamic","description":"Cutting wind resistance.","imageSrc":"https://images.unsplash.com/photo-1578587018452-892bacefd3f2?q=80&w=1000&auto=format&fit=crop"}]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/pages/HomePage/sections/Hero.tsx
Normal file
28
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// 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 HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="APEX"
|
||||
description="Redefining the standard of performance apparel through 3D-engineered design."
|
||||
primaryButton={{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "About Us",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="https://images.unsplash.com/photo-1556821840-3a63f95609a7?q=80&w=2000&auto=format&fit=crop"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/pages/HomePage/sections/Pricing.tsx
Normal file
53
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
// 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="Membership"
|
||||
title="Join the Elite"
|
||||
description="Exclusive access and rewards."
|
||||
plans={[
|
||||
{
|
||||
tag: "Entry",
|
||||
price: "$99",
|
||||
period: "Annual",
|
||||
description: "Core access to drops.",
|
||||
primaryButton: {
|
||||
text: "Join",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Included Perks",
|
||||
features: [
|
||||
"10% discount",
|
||||
"Early access",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Apex",
|
||||
price: "$299",
|
||||
period: "Annual",
|
||||
description: "Full access to ecosystem.",
|
||||
primaryButton: {
|
||||
text: "Join",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Included Perks",
|
||||
features: [
|
||||
"30% discount",
|
||||
"Priority support",
|
||||
"Vault access",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Products.tsx
Normal file
21
src/pages/HomePage/sections/Products.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// 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 FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Collection"
|
||||
title="New Arrivals"
|
||||
description="Experience the latest drop."
|
||||
items={[{"href":"#","imageSrc":"https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=1000&auto=format&fit=crop","description":"Waterproof shell.","title":"Apex Jacket"},{"title":"Core Tee","description":"Technical cotton blend.","imageSrc":"https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?q=80&w=1000&auto=format&fit=crop","href":"#"},{"href":"#","imageSrc":"https://images.unsplash.com/photo-1542272604-787c3835535d?q=80&w=1000&auto=format&fit=crop","description":"Reinforced flex wear.","title":"Peak Denims"},{"href":"#","imageSrc":"https://images.unsplash.com/photo-1588850561407-ed78c282e89b?q=80&w=1000&auto=format&fit=crop","description":"Structured minimalist hat.","title":"Apex Cap"},{"imageSrc":"https://images.unsplash.com/photo-1553062407-98eeb64c6a62?q=80&w=1000&auto=format&fit=crop","href":"#","title":"Utility Belt","description":"Modular storage."},{"imageSrc":"https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=1000&auto=format&fit=crop","href":"#","title":"Vision Shades","description":"UV protected lens."},{"description":"Technical carry system.","title":"Base Pack","href":"#","imageSrc":"https://images.unsplash.com/photo-1553062407-98eeb64c6a62?q=80&w=1000&auto=format&fit=crop"}]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Testimonials.tsx
Normal file
21
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// 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 TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Voice"
|
||||
title="Community Feedback"
|
||||
description="Join thousands who trust our design."
|
||||
testimonials={[{"quote":"Unmatched quality and fit.","name":"Leo K.","role":"Athlete","imageSrc":"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=1000&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1000&auto=format&fit=crop","quote":"Finally, fashion that thinks.","name":"Maria S.","role":"Designer"},{"name":"Jake P.","quote":"Perfect for high-intensity travel.","role":"Traveler","imageSrc":"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1000&auto=format&fit=crop"},{"role":"Creator","name":"Sarah T.","quote":"Style meets functionality.","imageSrc":"https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1000&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1000&auto=format&fit=crop","name":"Omar F.","quote":"My new daily uniform.","role":"Pro"}]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user