Files
a8610d6a-8d4e-46d2-b8e7-a37…/src/app/page.tsx
2026-03-09 05:05:05 +00:00

205 lines
11 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Award, Zap, Heart, Mail, Badge, Truck, RotateCcw, Shield } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="PrimeStep"
bottomLeftText="Premium Footwear"
bottomRightText="support@primestep.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="Step Into Excellence"
description="Discover premium footwear designed for comfort, style, and performance. From athletic excellence to everyday elegance."
tag="New Collection"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/man-choosing-foot-wear-mens-store_1303-30827.jpg"
imageAlt="Premium shoes collection"
buttons={[
{ text: "Shop Now", href: "products" },
{ text: "Explore Collection", href: "#features" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Featured Footwear"
description="Handpicked premium shoes for every occasion and lifestyle"
tag="Best Sellers"
tagIcon={Award}
tagAnimation="slide-up"
products={[
{
id: "1", brand: "PrimeStep", name: "Elite Runner Pro", price: "$129.99", rating: 5,
reviewCount: "2.4k", imageSrc: "http://img.b2bpic.net/free-photo/view-composition-with-neatly-arranged-organized-sport-items_23-2150275222.jpg", imageAlt: "Elite Runner Pro athletic shoe"
},
{
id: "2", brand: "PrimeStep", name: "Urban Casual Sneaker", price: "$94.99", rating: 5,
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/modern-man-with-tablet-stairs_23-2147986191.jpg", imageAlt: "Urban Casual Sneaker"
},
{
id: "3", brand: "PrimeStep", name: "Classic Business Loafer", price: "$159.99", rating: 5,
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/male-wedding-shoes_1303-10474.jpg", imageAlt: "Classic Business Loafer"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Shop All Products", href: "products" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Why Choose PrimeStep?"
description="We combine premium craftsmanship, cutting-edge comfort technology, and sustainable practices to create shoes that elevate your every step. Each pair is engineered for performance and built to last."
tag="About Us"
imageSrc="http://img.b2bpic.net/free-photo/shoemaker-workshop-making-shoes_171337-12252.jpg?_wi=1"
imageAlt="Premium shoe craftsmanship"
useInvertedBackground={false}
buttons={[{ text: "Learn Our Story", href: "#" }]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
title="What Makes Us Different"
description="Industry-leading features that set PrimeStep apart from the competition"
tag="Features"
tagIcon={Zap}
tagAnimation="slide-up"
features={[
{
id: "1", title: "Advanced Comfort Technology", author: "Engineering Team", description: "Our proprietary cushioning system provides all-day comfort with optimal support for any activity.", tags: ["Comfort", "Technology"],
imageSrc: "http://img.b2bpic.net/free-photo/woman-training-home-mat-using-dumbbells-skipping-rope_1303-27047.jpg", imageAlt: "Advanced cushioning technology"
},
{
id: "2", title: "Premium Materials & Craftsmanship", author: "Quality Control", description: "Each shoe is hand-inspected and made with the finest materials sourced globally for durability and style.", tags: ["Quality", "Craftsmanship"],
imageSrc: "http://img.b2bpic.net/free-photo/shoemaker-workshop-making-shoes_171337-12252.jpg?_wi=2", imageAlt: "Premium materials showcase"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="What Our Customers Say"
description="Real stories from satisfied customers who trust PrimeStep for their footwear needs"
tag="Testimonials"
tagIcon={Heart}
tagAnimation="slide-up"
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "The Elite Runner Pro shoes have transformed my running routine. Incredibly comfortable and stylish!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman_1262-20867.jpg", imageAlt: "Sarah Johnson"
},
{
id: "2", name: "Michael Chen", handle: "@mchen", testimonial: "Best investment I've made in footwear. The quality and craftsmanship are outstanding.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-pleased-male-with-curly-hair_176532-8136.jpg", imageAlt: "Michael Chen"
},
{
id: "3", name: "Emily Rodriguez", handle: "@emilyrodriguez", testimonial: "PrimeStep combines style with comfort perfectly. I wear them every single day.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/serious-executive-with-short-hair-crossed-arms_1149-89.jpg", imageAlt: "Emily Rodriguez"
},
{
id: "4", name: "David Kim", handle: "@davidkim", testimonial: "Fast shipping, excellent customer service, and shoes that actually live up to the hype.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-young-businessman-trendy-suit-smiling-standing-against-white-background_1258-170863.jpg", imageAlt: "David Kim"
}
]}
showRating={true}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Industry Leaders"
description="Our shoes are worn and recommended by top athletes and brands worldwide"
tag="Partners"
tagIcon={Badge}
tagAnimation="slide-up"
names={["Nike", "Adidas", "Puma", "Reebok", "Asics", "New Balance", "Converse"]}
logos={[
"http://img.b2bpic.net/free-vector/abstract-arrows-logo_1057-1739.jpg", "http://img.b2bpic.net/free-vector/flat-design-atheism-logo_23-2149240532.jpg", "http://img.b2bpic.net/free-vector/jaguar-logo-template_23-2149945440.jpg", "http://img.b2bpic.net/free-vector/collection-flat-business-logo_23-2147557714.jpg", "http://img.b2bpic.net/free-vector/collection-retro-fitness-badges_23-2147791215.jpg", "http://img.b2bpic.net/free-vector/gradient-abstract-logo_52683-8654.jpg", "http://img.b2bpic.net/free-vector/vintage-logo-collection_23-2147571855.jpg"
]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Newsletter"
tagIcon={Mail}
tagAnimation="slide-up"
title="Stay Updated"
description="Subscribe to our newsletter for exclusive offers, new releases, and footwear tips delivered straight to your inbox."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-flat-black-friday-webinar-template_23-2149131289.jpg"
imageAlt="Newsletter subscription"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="PrimeStep"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}