327 lines
14 KiB
TypeScript
327 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import ProductCardSix from '@/components/sections/product/ProductCardSix';
|
|
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import BlogCardSeven from '@/components/sections/blog/BlogCardSeven';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterSocial from '@/components/sections/footer/FooterSocial';
|
|
import { Linkedin, Mail, Twitter } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="noiseGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="minimal"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="StepStyle"
|
|
navItems={[
|
|
{ name: "Shop", id: "shop" },
|
|
{ name: "Collections", id: "collections" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Browse Shoes",
|
|
href: "shop"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitLarge
|
|
title="Step Into Style"
|
|
description="Discover our premium collection of shoes for every occasion. From casual comfort to bold statement pieces, find your perfect fit with exclusive designs and trending styles."
|
|
tag="Shoe Store"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045280682-cq1jxn74.jpg"
|
|
imageAlt="Premium shoe collection showcase"
|
|
buttons={[
|
|
{ text: "Shop Now", href: "shop" },
|
|
{ text: "View Collections", href: "collections" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Comfort meets " },
|
|
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766139083006-v50xgv4n.jpg", alt: "Fashion footwear" },
|
|
{ type: "text", content: " timeless style" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Explore Our Story", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="shop" data-section="shop">
|
|
<ProductCardSix
|
|
title="Featured Shoes"
|
|
description="Hand-picked styles from our latest collections. Featuring premium sneakers, elegant dress shoes, comfortable everyday wear, and exclusive limited editions."
|
|
tag="New Arrivals"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Urban Velocity Sneakers",
|
|
price: "$129.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045810718-px7f0did.jpg",
|
|
imageAlt: "Urban Velocity Sneakers"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Classic Leather Oxford",
|
|
price: "$189.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045810718-px7f0did.jpg",
|
|
imageAlt: "Classic Leather Oxford"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Comfort Cloud Slip-Ons",
|
|
price: "$99.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045810718-px7f0did.jpg",
|
|
imageAlt: "Comfort Cloud Slip-Ons"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEight
|
|
title="Trusted by thousands of shoe lovers worldwide"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045843364-dsl3ehhb.jpg"
|
|
imageAlt="Customer satisfaction metrics"
|
|
metrics={[
|
|
{ id: "1", value: "50K+", title: "Happy Customers" },
|
|
{ id: "2", value: "1000+", title: "Shoe Styles" },
|
|
{ id: "3", value: "4.9/5", title: "Average Rating" },
|
|
{ id: "4", value: "24/7", title: "Customer Support" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTen
|
|
title="Meet the passionate team behind StepStyle"
|
|
tag="Our Team"
|
|
members={[
|
|
{
|
|
id: "1",
|
|
name: "Emma Richardson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045843822-th04bajv.jpg",
|
|
imageAlt: "Emma Richardson"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Marcus Johnson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140102492-vbld5jll.jpg",
|
|
imageAlt: "Marcus Johnson"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Sofia Martinez",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767045843571-6vu2tgtk.jpg",
|
|
imageAlt: "Sofia Martinez"
|
|
}
|
|
]}
|
|
memberVariant="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardFive
|
|
title="What Our Customers Love"
|
|
description="Read reviews from customers who found their perfect shoes with us"
|
|
tag="Customer Reviews"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Jessica Chen, Product Designer",
|
|
date: "Date: 15 November 2024",
|
|
title: "Best comfort and style combo",
|
|
quote: "I've tried many shoe brands, but StepStyle's collection stands out. The quality is exceptional and the designs are truly unique. I get compliments every time I wear them!",
|
|
tag: "Verified Buyer",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735982136-fwsz9f0i.jpg",
|
|
avatarAlt: "Jessica Chen",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
|
|
imageAlt: "Customer review image"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Michael Torres, Architect",
|
|
date: "Date: 20 October 2024",
|
|
title: "Premium quality at fair prices",
|
|
quote: "Finally found a shoe store that delivers both style and substance. The craftsmanship is evident in every pair. Shipping was fast and customer service was incredibly helpful.",
|
|
tag: "Verified Buyer",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006149588-l9dz2o1t.jpg",
|
|
avatarAlt: "Michael Torres",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
|
|
imageAlt: "Customer review image"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Sarah Williams, Fashion Blogger",
|
|
date: "Date: 08 September 2024",
|
|
title: "My go-to shoe destination",
|
|
quote: "StepStyle has become my favorite place to shop for shoes. The variety is impressive, and everything I've purchased fits perfectly. Their return process is hassle-free!",
|
|
tag: "Verified Buyer",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
|
|
avatarAlt: "Sarah Williams",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
|
|
imageAlt: "Customer review image"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David Kim, Fitness Trainer",
|
|
date: "Date: 25 July 2024",
|
|
title: "Comfortable for all-day wear",
|
|
quote: "As someone who's on their feet all day, comfort is everything. StepStyle's athletic and everyday shoes are game-changers. My feet thank me every single day!",
|
|
tag: "Verified Buyer",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184703623-6mn9btum.jpg",
|
|
avatarAlt: "David Kim",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
|
|
imageAlt: "Customer review image"
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Lisa Anderson, Marketing Executive",
|
|
date: "Date: 12 June 2024",
|
|
title: "Exceeded my expectations",
|
|
quote: "I was skeptical about buying shoes online, but StepStyle made it easy. Their sizing guide is accurate, and the quality is better than what I expected. Definitely coming back!",
|
|
tag: "Verified Buyer",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735982136-fwsz9f0i.jpg",
|
|
avatarAlt: "Lisa Anderson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
|
|
imageAlt: "Customer review image"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="collections" data-section="collections">
|
|
<BlogCardSeven
|
|
title="Shoe Collections"
|
|
description="Explore our curated collections featuring the latest trends, timeless classics, and exclusive designer collaborations"
|
|
tag="Collections"
|
|
blogs={[
|
|
{
|
|
id: "1",
|
|
title: "Summer Sneaker Collection 2025",
|
|
date: "18 January 2025",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767043239120-nvo76k90.jpg",
|
|
imageAlt: "Summer sneaker styles"
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Luxury Dress Shoes for Every Occasion",
|
|
date: "05 January 2025",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767043239120-nvo76k90.jpg",
|
|
imageAlt: "Luxury dress shoe collection"
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Comfort Tech: Innovation Meets Style",
|
|
date: "15 December 2024",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767043239120-nvo76k90.jpg",
|
|
imageAlt: "Comfort technology shoes"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get In Touch"
|
|
description="Have questions about our shoes or need sizing help? We'd love to hear from you. Fill out the form and our team will respond within 24 hours."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "subject", type: "text", placeholder: "Subject", required: true },
|
|
{ name: "shoe_interest", type: "text", placeholder: "What shoe are you interested in?", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "Tell us how we can help...",
|
|
rows: 5,
|
|
required: true
|
|
}}
|
|
useInvertedBackground="noInvert"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005005544-ohrshy5z.jpg"
|
|
imageAlt="Customer support"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSocial
|
|
logoText="StepStyle"
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{ label: "New Arrivals", href: "shop" },
|
|
{ label: "Collections", href: "collections" },
|
|
{ label: "Best Sellers", href: "shop" },
|
|
{ label: "Sale", href: "shop" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{ label: "Size Guide", href: "#" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" },
|
|
{ label: "Track Order", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Mail, href: "mailto:hello@stepstyle.com", ariaLabel: "Email" }
|
|
]}
|
|
copyrightText="© StepStyle, Inc. 2025. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |