Merge version_3_1781384577495 into main #4
@@ -1,166 +1,29 @@
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
||||
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 FeaturedSection from './HomePage/sections/Featured';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSectionSection from './HomePage/sections/FaqSection';
|
||||
import ContactCtaSection from './HomePage/sections/ContactCta';
|
||||
|
||||
|
||||
import ProductDetailsSection from './HomePage/sections/ProductDetails';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="Apex Athletics"
|
||||
description="Built for Performance. Designed for Everyday."
|
||||
primaryButton={{
|
||||
text: "Shop Shorts",
|
||||
href: "/shop",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "/about",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-athletic-wear-posing-stairs-outdoors_23-2148773867.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
<ProductDetailsSection />
|
||||
|
||||
<div id="featured" data-section="featured">
|
||||
<SectionErrorBoundary name="featured">
|
||||
<FeaturesImageBento
|
||||
tag="Collection"
|
||||
title="Built for Performance"
|
||||
description="Engineered with four-way stretch fabric and sweat-wicking technology to keep you moving."
|
||||
items={[
|
||||
{
|
||||
title: "5-Inch Inseam",
|
||||
description: "Designed for range of motion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-details_23-2149620438.jpg",
|
||||
},
|
||||
{
|
||||
title: "Sweat-Wicking",
|
||||
description: "Stay dry during intense sessions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-lifting-dumbbells-road_23-2147775512.jpg",
|
||||
},
|
||||
{
|
||||
title: "Hidden Pockets",
|
||||
description: "Secure storage for your essentials.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-near-shorts-fruits_23-2147750737.jpg",
|
||||
},
|
||||
{
|
||||
title: "Precision Fit",
|
||||
description: "Contours to your physique.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-with-closed-eyes_176420-3995.jpg",
|
||||
},
|
||||
{
|
||||
title: "Performance Fabric",
|
||||
description: "Lightweight and durable.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sportswoman_23-2148023661.jpg",
|
||||
},
|
||||
{
|
||||
title: "Four-Way Stretch",
|
||||
description: "Ultimate mobility in every move.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-gym-suit-indoors_23-2148267255.jpg",
|
||||
},
|
||||
{
|
||||
title: "Everyday Comfort",
|
||||
description: "From gym to the street.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fruits-near-shorts_23-2147750735.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturedSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialOverlayCards
|
||||
tag="Reviews"
|
||||
title="What Our Athletes Say"
|
||||
description="Hear from thousands of athletes performing at their best."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
role: "Crossfit Athlete",
|
||||
company: "Elite Gains",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-handsome-redhead-model-man-flannel-shirt-gray-background_613910-19110.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus B.",
|
||||
role: "Bodybuilder",
|
||||
company: "Iron Mind",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-doing-indoor-sport-gym_23-2149205541.jpg",
|
||||
},
|
||||
{
|
||||
name: "David L.",
|
||||
role: "Running Enthusiast",
|
||||
company: "RunFast",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-623.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sam T.",
|
||||
role: "Personal Trainer",
|
||||
company: "FitLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chris J.",
|
||||
role: "Powerlifter",
|
||||
company: "MaxStrength",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sporty-woman-sportswear-resting-bench-fitness_1153-9779.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
<SectionErrorBoundary name="faq-section">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers."
|
||||
categories={[
|
||||
{
|
||||
name: "General",
|
||||
items: [
|
||||
{
|
||||
question: "What is the return policy?",
|
||||
answer: "We offer a 30-day return policy on all unworn items.",
|
||||
},
|
||||
{
|
||||
question: "Are these shorts sweat-wicking?",
|
||||
answer: "Yes, our proprietary fabric wicks moisture away instantly.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSectionSection />
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<SectionErrorBoundary name="contact-cta">
|
||||
<ContactCta
|
||||
tag="Join Us"
|
||||
text="Join the community. Sign up for exclusive drops."
|
||||
primaryButton={{
|
||||
text: "Newsletter Signup",
|
||||
href: "/contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Support",
|
||||
href: "/contact",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactCtaSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
27
src/pages/HomePage/sections/ContactCta.tsx
Normal file
27
src/pages/HomePage/sections/ContactCta.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-cta" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactCtaSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<SectionErrorBoundary name="contact-cta">
|
||||
<ContactCta
|
||||
tag="Join Us"
|
||||
text="Join the community. Sign up for exclusive drops."
|
||||
primaryButton={{
|
||||
text: "Newsletter Signup",
|
||||
href: "/contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Support",
|
||||
href: "/contact",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
src/pages/HomePage/sections/FaqSection.tsx
Normal file
35
src/pages/HomePage/sections/FaqSection.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq-section" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSectionSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
<SectionErrorBoundary name="faq-section">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers."
|
||||
categories={[
|
||||
{
|
||||
name: "General",
|
||||
items: [
|
||||
{
|
||||
question: "What is the return policy?",
|
||||
answer: "We offer a 30-day return policy on all unworn items.",
|
||||
},
|
||||
{
|
||||
question: "Are these shorts sweat-wicking?",
|
||||
answer: "Yes, our proprietary fabric wicks moisture away instantly.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Featured.tsx
Normal file
57
src/pages/HomePage/sections/Featured.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 "featured" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturedSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="featured" data-section="featured">
|
||||
<SectionErrorBoundary name="featured">
|
||||
<FeaturesImageBento
|
||||
tag="Collection"
|
||||
title="Built for Performance"
|
||||
description="Engineered with four-way stretch fabric and sweat-wicking technology to keep you moving."
|
||||
items={[
|
||||
{
|
||||
title: "5-Inch Inseam",
|
||||
description: "Designed for range of motion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-details_23-2149620438.jpg",
|
||||
},
|
||||
{
|
||||
title: "Sweat-Wicking",
|
||||
description: "Stay dry during intense sessions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-lifting-dumbbells-road_23-2147775512.jpg",
|
||||
},
|
||||
{
|
||||
title: "Hidden Pockets",
|
||||
description: "Secure storage for your essentials.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-near-shorts-fruits_23-2147750737.jpg",
|
||||
},
|
||||
{
|
||||
title: "Precision Fit",
|
||||
description: "Contours to your physique.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-with-closed-eyes_176420-3995.jpg",
|
||||
},
|
||||
{
|
||||
title: "Performance Fabric",
|
||||
description: "Lightweight and durable.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sportswoman_23-2148023661.jpg",
|
||||
},
|
||||
{
|
||||
title: "Four-Way Stretch",
|
||||
description: "Ultimate mobility in every move.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-gym-suit-indoors_23-2148267255.jpg",
|
||||
},
|
||||
{
|
||||
title: "Everyday Comfort",
|
||||
description: "From gym to the street.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fruits-near-shorts_23-2147750735.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</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 Athletics"
|
||||
description="Built for Performance. Designed for Everyday."
|
||||
primaryButton={{
|
||||
text: "Shop Shorts",
|
||||
href: "/shop",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "/about",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-athletic-wear-posing-stairs-outdoors_23-2148773867.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
src/pages/HomePage/sections/ProductDetails.tsx
Normal file
66
src/pages/HomePage/sections/ProductDetails.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { Check } from 'lucide-react';
|
||||
|
||||
export default function ProductDetailsSection() {
|
||||
return (
|
||||
<div data-webild-section="product-details" id="product-details" className="py-24 bg-background">
|
||||
<div className="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-4">
|
||||
<div className="aspect-[4/5] bg-card rounded-lg overflow-hidden">
|
||||
<img src="http://img.b2bpic.net/free-photo/man-athletic-wear-posing-stairs-outdoors_23-2148773867.jpg" alt="Gym Shorts" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<h2 className="text-4xl font-bold text-foreground mb-2">Premium Performance Shorts</h2>
|
||||
<p className="text-2xl text-muted-foreground mb-6">$45.00</p>
|
||||
<p className="text-base text-muted-foreground mb-8">
|
||||
Engineered for maximum performance and everyday comfort. Featuring a 5-inch inseam, four-way stretch fabric, and hidden zipper pockets.
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">Color</h3>
|
||||
<div className="flex gap-3">
|
||||
<button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-foreground">
|
||||
<span className="w-8 h-8 rounded-full bg-black border border-border" />
|
||||
</button>
|
||||
<button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-transparent">
|
||||
<span className="w-8 h-8 rounded-full bg-gray-500 border border-border" />
|
||||
</button>
|
||||
<button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-transparent">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-600 border border-border" />
|
||||
</button>
|
||||
<button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-transparent">
|
||||
<span className="w-8 h-8 rounded-full bg-green-700 border border-border" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="text-sm font-semibold text-foreground uppercase tracking-wider">Size</h3>
|
||||
<button className="text-sm text-muted-foreground underline">Size Guide</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{["M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL", "7XL", "8XL"].map((size, i) => (
|
||||
<button
|
||||
key={size}
|
||||
className={`py-2 text-sm font-medium rounded-md border transition-colors ${i === 1 ? 'bg-foreground text-background border-foreground' : 'bg-card text-foreground border-border hover:border-foreground'}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Button text="Add to Cart" variant="primary" className="w-full py-4 text-lg mb-4" />
|
||||
<ul className="space-y-2 mt-6">
|
||||
{["5-inch inseam", "Lightweight performance fabric", "Sweat-wicking technology", "Hidden zipper pockets"].map((feature, idx) => (
|
||||
<li key={idx} className="flex items-center text-sm text-muted-foreground">
|
||||
<Check className="w-4 h-4 mr-2 text-foreground" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
57
src/pages/HomePage/sections/Testimonials.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 "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialOverlayCards
|
||||
tag="Reviews"
|
||||
title="What Our Athletes Say"
|
||||
description="Hear from thousands of athletes performing at their best."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
role: "Crossfit Athlete",
|
||||
company: "Elite Gains",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-handsome-redhead-model-man-flannel-shirt-gray-background_613910-19110.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus B.",
|
||||
role: "Bodybuilder",
|
||||
company: "Iron Mind",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-doing-indoor-sport-gym_23-2149205541.jpg",
|
||||
},
|
||||
{
|
||||
name: "David L.",
|
||||
role: "Running Enthusiast",
|
||||
company: "RunFast",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-623.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sam T.",
|
||||
role: "Personal Trainer",
|
||||
company: "FitLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chris J.",
|
||||
role: "Powerlifter",
|
||||
company: "MaxStrength",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sporty-woman-sportswear-resting-bench-fitness_1153-9779.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user