Files
70bfa309-8f9d-44ff-9d47-e37…/src/app/page.tsx
2026-03-12 03:02:00 +00:00

276 lines
14 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Award, CheckCircle, Crown, Heart, Sparkles, Star, Zap } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Shop Now", href: "products" }}
brandName="Aure Gear"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Experience Premium Athletic Gear"
description="Discover Aure Gear's cutting-edge collection of high-performance clothing designed for athletes and fitness enthusiasts. Premium quality, modern style, and ultimate comfort in every piece."
tag="New Collection"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "plain" }}
buttons={[
{ text: "Shop Collection", href: "products" },
{ text: "Learn More" }
]}
buttonAnimation="slide-up"
carouselItems={[
{
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/asian-store-employee-suggesting-trendy-items-client-wheelchair-user_482257-108841.jpg", imageAlt: "modern athletic wear display"
},
{
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/fresh-air-is-what-we-really-like_329181-15067.jpg", imageAlt: "professional sports clothing line"
},
{
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-stretching_23-2149235422.jpg", imageAlt: "premium athletic clothing modern"
},
{
id: "4", imageSrc: "http://img.b2bpic.net/free-vector/metallic-cogwheel-symbol-dark-background-industry-equipment_1017-61354.jpg", imageAlt: "modern sports outfit showcase"
},
{
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/gym-composition-with-sport-elements_23-2147915651.jpg", imageAlt: "athletic apparel premium display"
},
{
id: "6", imageSrc: "http://img.b2bpic.net/free-vector/landing-page-sport-with-image_23-2148361054.jpg", imageAlt: "sports fashion modern showcase"
}
]}
autoPlay={true}
autoPlayInterval={4000}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
title="Featured Products"
description="Browse our curated selection of premium athletic wear and accessories. Each item is designed for performance and style."
tag="Best Sellers"
tagIcon={Award}
tagAnimation="slide-up"
products={[
{
id: "1", name: "Performance Athletic Jacket", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-training-outside_23-2148799688.jpg", imageAlt: "modern athletic jacket display"
},
{
id: "2", name: "Premium Running Shoes", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-moving-upstairs-downstairs_74855-2595.jpg", imageAlt: "premium athletic shoes modern"
},
{
id: "3", name: "Sport Accessories Kit", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-sport-elements_23-2149006302.jpg", imageAlt: "sports accessories collection display"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Products", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
tag="About Aure Gear"
tagIcon={Zap}
tagAnimation="slide-up"
title="Elevating Your Athletic Lifestyle"
description="Aure Gear Team"
subdescription="Performance Innovators Since 2020"
icon={Heart}
imageSrc="http://img.b2bpic.net/free-photo/asian-store-employee-suggesting-trendy-items-client-wheelchair-user_482257-108841.jpg"
imageAlt="Aure Gear Collection"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
<div id="features" data-section="features">
<FeatureCardSeven
title="Why Choose Aure Gear"
description="Our commitment to quality, style, and performance sets us apart in the athletic wear industry."
tag="Features"
tagIcon={CheckCircle}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "Premium Materials", description: "We use only the finest fabrics and materials sourced from premium suppliers worldwide. Every garment is crafted for durability and comfort.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-training-outside_23-2148799688.jpg"
},
{
id: 2,
title: "Expert Design", description: "Our design team brings years of experience creating performance wear that looks as good as it performs. Modern aesthetics meet functional engineering.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-stretching_23-2149235422.jpg"
},
{
id: 3,
title: "Sustainable Practices", description: "We're committed to environmental responsibility. Our manufacturing process minimizes waste and uses eco-friendly materials whenever possible.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-sport-elements_23-2149006302.jpg"
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Discover More", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Choose Your Plan"
description="Flexible membership options to suit your lifestyle and fitness goals."
tag="Membership"
tagIcon={Zap}
tagAnimation="slide-up"
plans={[
{
id: "basic", badge: "Popular", badgeIcon: Star,
price: "$29/month", subtitle: "Perfect for Getting Started", buttons: [{ text: "Get Started", href: "#" }],
features: [
"Access to full product catalog", "Member-exclusive discounts", "Free shipping on orders $50+", "Priority customer support"
]
},
{
id: "pro", badge: "Best Value", badgeIcon: Sparkles,
price: "$59/month", subtitle: "For Committed Athletes", buttons: [{ text: "Subscribe Now", href: "#" }],
features: [
"Everything in Basic", "Early access to new collections", "Free shipping on all orders", "Personal styling consultation", "VIP rewards program"
]
},
{
id: "elite", badge: "Most Popular", badgeIcon: Crown,
price: "$99/month", subtitle: "Ultimate Performance Experience", buttons: [{ text: "Go Elite", href: "#" }],
features: [
"Everything in Pro", "Custom gear creation service", "1-on-1 coaching sessions", "Exclusive brand partnership events", "Lifetime warranty on all items"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Options", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="What Our Customers Say"
description="Join thousands of satisfied athletes and fitness enthusiasts who trust Aure Gear for their performance wear needs."
tag="Testimonials"
tagIcon={Heart}
tagAnimation="slide-up"
testimonials={[
{
id: "1", name: "Sarah Johnson", role: "Marathon Runner", company: "Elite Fitness Club", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg", imageAlt: "professional portrait headshot modern"
},
{
id: "2", name: "Michael Chen", role: "Personal Trainer", company: "Peak Performance Gym", rating: 5,
imageSrc: "http://img.b2bpic.net/free-vector/flyer-template-business-with-photo_52683-22635.jpg", imageAlt: "professional portrait photo headshot"
},
{
id: "3", name: "Emily Rodriguez", role: "Yoga Instructor", company: "ZenFlow Studios", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", imageAlt: "headshot portrait professional photo"
},
{
id: "4", name: "David Kim", role: "CrossFit Athlete", company: "Strength & Conditioning", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg", imageAlt: "professional business portrait photo"
}
]}
kpiItems={[
{ value: "50K+", label: "Happy Customers" },
{ value: "98%", label: "Satisfaction Rate" },
{ value: "4.9★", label: "Average Rating" }
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Read More Reviews", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to transform your athletic wardrobe? Join Aure Gear today and experience premium performance wear designed for champions."
animationType="entrance-slide"
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "Learn More", href: "#features" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Aure Gear"
copyrightText="© 2025 Aure Gear. All rights reserved."
columns={[
{
title: "Shop", items: [
{ label: "New Arrivals", href: "#products" },
{ label: "Best Sellers", href: "#products" },
{ label: "Collections", href: "#products" },
{ label: "Sale", href: "#products" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Story", href: "#about" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "Help Center", href: "#" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}