221 lines
9.7 KiB
TypeScript
221 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import {
|
|
Award,
|
|
Facebook,
|
|
Heart,
|
|
Instagram,
|
|
Linkedin,
|
|
Mail,
|
|
MapPin,
|
|
ShoppingCart,
|
|
Sparkles,
|
|
TrendingUp,
|
|
Twitter,
|
|
Users,
|
|
Zap,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="floatingGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Sole & Style"
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Locations", id: "#" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Step Into Your Perfect Fit"
|
|
description="Discover trending styles and timeless classics. From casual sneakers to formal dress shoes, find exactly what you need with free shipping on orders over $50"
|
|
buttons={[
|
|
{ text: "Shop Now", href: "products" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-girl-s-legs-shoes-leaving-room_176420-55083.jpg"
|
|
imageAlt="Lifestyle shoe collection hero"
|
|
showDimOverlay={true}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Featured Collection"
|
|
description="Browse our handpicked selection of premium footwear for every occasion"
|
|
tag="New Arrivals"
|
|
tagIcon={Sparkles}
|
|
products={[
|
|
{
|
|
id: "1", name: "Urban Motion Sneaker", price: "$89.99", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-pensive-guy-wearing-shirt-sitting-stairs-outside-near-building-with-industrial-exterior_613910-18357.jpg", imageAlt: "Urban Motion Sneaker"},
|
|
{
|
|
id: "2", name: "Classic Leather Oxford", price: "$129.99", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/male-brown-footwear-close-up_1303-10300.jpg", imageAlt: "Classic Leather Oxford"},
|
|
{
|
|
id: "3", name: "Sport Trainer Pro", price: "$99.99", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/unrecognizable-athletic-woman-tying-sports-shoe-health-club_637285-8468.jpg", imageAlt: "Sport Trainer Pro"},
|
|
{
|
|
id: "4", name: "Casual Loafer Comfort", price: "$109.99", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18987.jpg", imageAlt: "Casual Loafer Comfort"},
|
|
]}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Trusted by shoe enthusiasts and everyday shoppers since 2005. We combine quality craftsmanship, competitive pricing, and exceptional customer service to help you find your perfect fit."
|
|
useInvertedBackground={true}
|
|
metricsAnimation="slide-up"
|
|
metrics={[
|
|
{ icon: ShoppingCart, label: "Products Available", value: "2,000+" },
|
|
{ icon: Users, label: "Satisfied Customers", value: "50,000+" },
|
|
{ icon: MapPin, label: "Physical Locations", value: "15" },
|
|
{ icon: TrendingUp, label: "Years in Business", value: "19" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Brands"
|
|
description="Our store partners with premium shoe brands worldwide to bring you authentic, high-quality footwear"
|
|
tag="Brand Partners"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Nike", "Adidas", "Puma", "New Balance", "Saucony", "Timberland", "Dr. Martens", "Clarks"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
|
|
{
|
|
id: "2", name: "Michael Chen", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
|
|
{
|
|
id: "4", name: "James Wilson", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"},
|
|
{
|
|
id: "5", name: "Lisa Anderson", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
|
|
{
|
|
id: "6", name: "David Kumar", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"},
|
|
]}
|
|
cardTitle="Over 50,000 customers worldwide trust us for quality footwear and exceptional shopping experiences"
|
|
cardTag="See what they say"
|
|
cardTagIcon={Heart}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Why Shop With Us"
|
|
description="Discover the benefits that make us the preferred choice for shoe shoppers"
|
|
tag="Advantages"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "100%", title: "Quality Guarantee", items: [
|
|
"Authentic products from verified brands", "30-day return policy", "Quality inspection on every order"],
|
|
},
|
|
{
|
|
id: "2", value: "FREE", title: "Fast Shipping", items: [
|
|
"Free shipping on orders over $50", "Express delivery available", "Track your order in real-time"],
|
|
},
|
|
{
|
|
id: "3", value: "24/7", title: "Customer Support", items: [
|
|
"Round-the-clock support team", "Live chat and email assistance", "Expert fitting advice"],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Newsletter"
|
|
title="Stay Updated with New Arrivals"
|
|
description="Subscribe to our newsletter for exclusive deals, style tips, and early access to new collections"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Sole & Style"
|
|
copyrightText="© 2025 Sole & Style. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com", ariaLabel: "Follow us on Facebook"},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com", ariaLabel: "Follow us on Instagram"},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com", ariaLabel: "Follow us on Twitter"},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|