Merge version_1 into main #1
401
src/app/page.tsx
401
src/app/page.tsx
@@ -19,290 +19,145 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="SoleStyle"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="SoleStyle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="SoleStyle"
|
||||
description="Step into comfort and style with our premium collection of footwear designed for every occasion."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Men",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Shop Women",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/legs-female-shoppers_23-2147688683.jpg"
|
||||
imageAlt="Collection of premium shoes"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="SoleStyle"
|
||||
description="Step into comfort and style with our premium collection of footwear designed for every occasion."
|
||||
buttons={[
|
||||
{ text: "Shop Men", href: "#products" },
|
||||
{ text: "Shop Women", href: "#products" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/legs-female-shoppers_23-2147688683.jpg"
|
||||
imageAlt="Collection of premium shoes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="Our Story"
|
||||
title="Crafted for Every Step"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="Our Story"
|
||||
title="Crafted for Every Step"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Modern Leather Sneaker",
|
||||
price: "$89.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shoes_1203-8135.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Formal Leather Pumps",
|
||||
price: "$129.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-shoes_1157-18540.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Dynamic Sports Runner",
|
||||
price: "$105.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-stairs_23-2148747405.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Suede Ankle Boots",
|
||||
price: "$145.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-ice-skates-still-life_23-2150558971.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Casual Summer Loafers",
|
||||
price: "$75.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-employee-got-fired_1157-50782.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Classic Ballet Flats",
|
||||
price: "$65.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-girl-shoes-sitting-stair_176420-6852.jpg",
|
||||
},
|
||||
]}
|
||||
title="Latest Collection"
|
||||
description="Explore our curated selection of high-quality footwear."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Modern Leather Sneaker", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/shoes_1203-8135.jpg" },
|
||||
{ id: "p2", name: "Formal Leather Pumps", price: "$129.50", imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-shoes_1157-18540.jpg" },
|
||||
{ id: "p3", name: "Dynamic Sports Runner", price: "$105.00", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-stairs_23-2148747405.jpg" },
|
||||
{ id: "p4", name: "Suede Ankle Boots", price: "$145.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-ice-skates-still-life_23-2150558971.jpg" },
|
||||
{ id: "p5", name: "Casual Summer Loafers", price: "$75.99", imageSrc: "http://img.b2bpic.net/free-photo/european-employee-got-fired_1157-50782.jpg" },
|
||||
{ id: "p6", name: "Classic Ballet Flats", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-girl-shoes-sitting-stair_176420-6852.jpg" }
|
||||
]}
|
||||
title="Latest Collection"
|
||||
description="Explore our curated selection of high-quality footwear."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
title: "Happy Customers",
|
||||
description: "Shoes sold to happy walkers",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ice-skates-studio-still-life_23-2150558965.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Styles Available",
|
||||
description: "Designed for all your needs",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-street_1157-4766.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "20+",
|
||||
title: "Years Experience",
|
||||
description: "Crafting comfort since 2004",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pensive-guy-wearing-shirt-sitting-stairs-outside-near-building-with-industrial-exterior_613910-18357.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Footwear trusted by our growing community."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10k+", title: "Happy Customers", description: "Shoes sold to happy walkers", imageSrc: "http://img.b2bpic.net/free-photo/ice-skates-studio-still-life_23-2150558965.jpg" },
|
||||
{ id: "m2", value: "500+", title: "Styles Available", description: "Designed for all your needs", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-street_1157-4766.jpg" },
|
||||
{ id: "m3", value: "20+", title: "Years Experience", description: "Crafting comfort since 2004", imageSrc: "http://img.b2bpic.net/free-photo/young-pensive-guy-wearing-shirt-sitting-stairs-outside-near-building-with-industrial-exterior_613910-18357.jpg" }
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Footwear trusted by our growing community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
role: "Designer",
|
||||
testimonial: "The best shoes I've ever purchased!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-white-hoodie-winter-fashion_53876-105546.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "John Doe",
|
||||
role: "Teacher",
|
||||
testimonial: "So comfortable for standing all day.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/browneyed-shorthaired-beautiful-woman-linen-red-dress-black-belt-smiles-widely-holds-coffee-cup-computer-tablet-lady-sits-chair-cozy-room_197531-27870.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Ross",
|
||||
role: "Professional",
|
||||
testimonial: "Stunning quality and fast shipping.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-fashionable-businessman_158595-4710.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mike Brown",
|
||||
role: "Athlete",
|
||||
testimonial: "Perfect for my weekend runs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-women-choose-clothes-store_78492-3896.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jane Wilson",
|
||||
role: "Student",
|
||||
testimonial: "Love the style and the fit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-holding-takeaway-coffee-while-standing-near-cafe-outdoors_613910-18470.jpg",
|
||||
},
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="What our clients are saying about SoleStyle."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Miller", role: "Designer", testimonial: "The best shoes I've ever purchased!", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-white-hoodie-winter-fashion_53876-105546.jpg" },
|
||||
{ id: "t2", name: "John Doe", role: "Teacher", testimonial: "So comfortable for standing all day.", imageSrc: "http://img.b2bpic.net/free-photo/browneyed-shorthaired-beautiful-woman-linen-red-dress-black-belt-smiles-widely-holds-coffee-cup-computer-tablet-lady-sits-chair-cozy-room_197531-27870.jpg" },
|
||||
{ id: "t3", name: "Elena Ross", role: "Professional", testimonial: "Stunning quality and fast shipping.", imageSrc: "http://img.b2bpic.net/free-photo/young-fashionable-businessman_158595-4710.jpg" },
|
||||
{ id: "t4", name: "Mike Brown", role: "Athlete", testimonial: "Perfect for my weekend runs.", imageSrc: "http://img.b2bpic.net/free-photo/two-women-choose-clothes-store_78492-3896.jpg" },
|
||||
{ id: "t5", name: "Jane Wilson", role: "Student", testimonial: "Love the style and the fit.", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-holding-takeaway-coffee-while-standing-near-cafe-outdoors_613910-18470.jpg" }
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="What our clients are saying about SoleStyle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer returns?",
|
||||
content: "Yes, we accept returns within 30 days of purchase.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What materials do you use?",
|
||||
content: "We use high-quality leather, suede, and breathable mesh.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How long is shipping?",
|
||||
content: "Shipping usually takes 3-5 business days.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
sideDescription="We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer returns?", content: "Yes, we accept returns within 30 days of purchase." },
|
||||
{ id: "f2", title: "What materials do you use?", content: "We use high-quality leather, suede, and breathable mesh." },
|
||||
{ id: "f3", title: "How long is shipping?", content: "Shipping usually takes 3-5 business days." }
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
sideDescription="We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Fashion Weekly",
|
||||
"Style Modern",
|
||||
"Retail Chic",
|
||||
"Urban Shoe",
|
||||
"Global Trend",
|
||||
"Elite Design",
|
||||
"Metro Fashion",
|
||||
]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Featured in leading fashion publications."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Fashion Weekly", "Style Modern", "Retail Chic", "Urban Shoe", "Global Trend", "Elite Design", "Metro Fashion"
|
||||
]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Featured in leading fashion publications."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Subscribe for exclusive offers and new arrivals."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Subscribe for exclusive offers and new arrivals."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="SoleStyle"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Men",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Women",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="SoleStyle"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Men", href: "#products" }, { label: "Women", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user