Merge version_1 into main #2
325
src/app/page.tsx
325
src/app/page.tsx
@@ -16,231 +16,122 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="ShopStyle"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="ShopStyle"
|
||||
button={{ text: "Shop Now", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
logoText="ShopStyle"
|
||||
description="Discover curated collections designed for your modern lifestyle. Quality craftsmanship meets contemporary design."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blend-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160094.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
logoText="ShopStyle"
|
||||
description="Discover curated collections designed for your modern lifestyle. Quality craftsmanship meets contemporary design."
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blend-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160094.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Home",
|
||||
name: "Ceramic Vase",
|
||||
price: "$45",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-autumn-clothes_23-2149071320.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Fashion",
|
||||
name: "Leather Handbag",
|
||||
price: "$120",
|
||||
rating: 4,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bag-hanging-from-furniture-item-indoors_23-2151073531.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Decor",
|
||||
name: "Table Lamp",
|
||||
price: "$89",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-modern-chair-with-beige-cushion-it-room_181624-30416.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Fashion",
|
||||
name: "Wristwatch",
|
||||
price: "$199",
|
||||
rating: 5,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-lady-with-green-eyes-expressing-positive-emotions-front-camera-studio-shot-shorthaired-girl-elegant-wristwatch_197531-26291.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Beauty",
|
||||
name: "Skincare Set",
|
||||
price: "$65",
|
||||
rating: 4,
|
||||
reviewCount: "92",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-rocks-arrangement_23-2148761481.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Home",
|
||||
name: "Coffee Mug",
|
||||
price: "$25",
|
||||
rating: 5,
|
||||
reviewCount: "150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-white-ceramic-cup-white-surface_181624-4173.jpg",
|
||||
},
|
||||
]}
|
||||
title="Curated Collections"
|
||||
description="Hand-picked essentials for your everyday life."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Home", name: "Ceramic Vase", price: "$45", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-autumn-clothes_23-2149071320.jpg" },
|
||||
{ id: "p2", brand: "Fashion", name: "Leather Handbag", price: "$120", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/bag-hanging-from-furniture-item-indoors_23-2151073531.jpg" },
|
||||
{ id: "p3", brand: "Decor", name: "Table Lamp", price: "$89", rating: 5, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/small-modern-chair-with-beige-cushion-it-room_181624-30416.jpg" },
|
||||
{ id: "p4", brand: "Fashion", name: "Wristwatch", price: "$199", rating: 5, reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/attractive-lady-with-green-eyes-expressing-positive-emotions-front-camera-studio-shot-shorthaired-girl-elegant-wristwatch_197531-26291.jpg" },
|
||||
{ id: "p5", brand: "Beauty", name: "Skincare Set", price: "$65", rating: 4, reviewCount: "92", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-rocks-arrangement_23-2148761481.jpg" },
|
||||
{ id: "p6", brand: "Home", name: "Coffee Mug", price: "$25", rating: 5, reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-white-ceramic-cup-white-surface_181624-4173.jpg" },
|
||||
]}
|
||||
title="Curated Collections"
|
||||
description="Hand-picked essentials for your everyday life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Designed for Living"
|
||||
description={[
|
||||
"At ShopStyle, we believe in the beauty of simplicity. Our products are sourced with care to ensure longevity, style, and utility in every piece.",
|
||||
"We work directly with artisans and small studios to bring you pieces that aren't just objects, but part of your story.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Designed for Living"
|
||||
description={[
|
||||
"At ShopStyle, we believe in the beauty of simplicity. Our products are sourced with care to ensure longevity, style, and utility in every piece.", "We work directly with artisans and small studios to bring you pieces that aren't just objects, but part of your story."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about shopping with us."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day hassle-free return policy on all unworn, unused items.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Yes, we ship to over 50 countries worldwide. Shipping costs calculated at checkout.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How can I track my order?",
|
||||
content: "You will receive a tracking link via email as soon as your order ships.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "Are your products sustainable?",
|
||||
content: "We prioritize working with artisans using eco-friendly materials and ethical processes.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "How do I contact customer support?",
|
||||
content: "Our support team is available via email at support@shopstyle.com, 24/7.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about shopping with us."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "What is your return policy?", content: "We offer a 30-day hassle-free return policy on all unworn, unused items." },
|
||||
{ id: "q2", title: "Do you ship internationally?", content: "Yes, we ship to over 50 countries worldwide. Shipping costs calculated at checkout." },
|
||||
{ id: "q3", title: "How can I track my order?", content: "You will receive a tracking link via email as soon as your order ships." },
|
||||
{ id: "q4", title: "Are your products sustainable?", content: "We prioritize working with artisans using eco-friendly materials and ethical processes." },
|
||||
{ id: "q5", title: "How do I contact customer support?", content: "Our support team is available via email at support@shopstyle.com, 24/7." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Have questions? We're here to help you find exactly what you need."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message",
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blend-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160094.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Have questions? We're here to help you find exactly what you need."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your message", required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blend-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160094.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ShopStyle"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ShopStyle"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "#products" },
|
||||
{ label: "New Arrivals", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Returns", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user