Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
468
src/app/page.tsx
468
src/app/page.tsx
@@ -20,330 +20,172 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-shift"
|
||||
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">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="ZX Store"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="ZX Store"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="ZX Store: Redefining Modern Style"
|
||||
description="Discover curated collections that blend comfort with contemporary fashion. Quality apparel designed for the modern individual."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-young-girl-brown-coat-woman-riding-electric-scooter_1157-47569.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-african-american-woman-printed-tshirt-posed-outdoor-against-window_627829-2285.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/braless-woman-working-indoor_23-2150490529.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/lifestyle-concept-close-up-attractive-young-dark-haired-caucasian-woman-sunglasses-black-dress-smiling-looking-aside-with-happy-expression-talking-phone-with-mother-carrying-shopping_176420-5553.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blonde-shopping_1157-7680.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Worldwide Shipping",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Materials",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Aesthetic",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Eco-Friendly Production",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Customer Satisfaction",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "plain" }}
|
||||
title="ZX Store: Redefining Modern Style"
|
||||
description="Discover curated collections that blend comfort with contemporary fashion. Quality apparel designed for the modern individual."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-young-girl-brown-coat-woman-riding-electric-scooter_1157-47569.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/stylish-african-american-woman-printed-tshirt-posed-outdoor-against-window_627829-2285.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/braless-woman-working-indoor_23-2150490529.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/lifestyle-concept-close-up-attractive-young-dark-haired-caucasian-woman-sunglasses-black-dress-smiling-looking-aside-with-happy-expression-talking-phone-with-mother-carrying-shopping_176420-5553.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blonde-shopping_1157-7680.jpg", alt: "Customer" },
|
||||
]}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Worldwide Shipping" },
|
||||
{ type: "text", text: "Premium Materials" },
|
||||
{ type: "text", text: "Modern Aesthetic" },
|
||||
{ type: "text", text: "Eco-Friendly Production" },
|
||||
{ type: "text", text: "Customer Satisfaction" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Crafted for ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/back-view-woman-looking-wardrobe_23-2148304881.jpg",
|
||||
alt: "Sustainable fashion studio",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Daily Elegance",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Crafted for " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/back-view-woman-looking-wardrobe_23-2148304881.jpg", alt: "Sustainable fashion studio" },
|
||||
{ type: "text", content: " Daily Elegance" },
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Premium Jacket",
|
||||
price: "$120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-blue-denim-shirt_23-2148130363.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Summer Dress",
|
||||
price: "$89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/denim-pants-placed-display_150588-17.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Leather Bag",
|
||||
price: "$150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916726.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Knit Sweater",
|
||||
price: "$75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pile-winter-sweaters-with-pine-cones_23-2148312122.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Graphic Tee",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-still-life_23-2150176772.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Silk Scarf",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smooth-textured-handkerchief-hanging_23-2149091389.jpg",
|
||||
},
|
||||
]}
|
||||
title="Latest Arrivals"
|
||||
description="Explore our newest clothing essentials."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Premium Jacket", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-blue-denim-shirt_23-2148130363.jpg" },
|
||||
{ id: "p2", name: "Summer Dress", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/denim-pants-placed-display_150588-17.jpg" },
|
||||
{ id: "p3", name: "Leather Bag", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916726.jpg" },
|
||||
{ id: "p4", name: "Knit Sweater", price: "$75", imageSrc: "http://img.b2bpic.net/free-photo/pile-winter-sweaters-with-pine-cones_23-2148312122.jpg" },
|
||||
{ id: "p5", name: "Graphic Tee", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-still-life_23-2150176772.jpg" },
|
||||
{ id: "p6", name: "Silk Scarf", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/smooth-textured-handkerchief-hanging_23-2149091389.jpg" },
|
||||
]}
|
||||
title="Latest Arrivals"
|
||||
description="Explore our newest clothing essentials."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Sustainable Fabrics",
|
||||
description: "Eco-friendly materials for a better future.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-young-female-designer-working-sewing-machine_23-2147874998.jpg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Organic Cotton",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Recycled Polyester",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Ethical Sourcing",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-businesswoman-talking-phone_23-2147605020.jpg",
|
||||
imageAlt: "sustainable fashion manufacturing process",
|
||||
},
|
||||
]}
|
||||
title="The ZX Standard"
|
||||
description="We prioritize quality and ethics in every garment we produce."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Sustainable Fabrics", description: "Eco-friendly materials for a better future.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-young-female-designer-working-sewing-machine_23-2147874998.jpg"},
|
||||
items: [
|
||||
{ icon: CheckCircle, text: "Organic Cotton" },
|
||||
{ icon: CheckCircle, text: "Recycled Polyester" },
|
||||
{ icon: CheckCircle, text: "Ethical Sourcing" },
|
||||
],
|
||||
reverse: false
|
||||
},
|
||||
]}
|
||||
title="The ZX Standard"
|
||||
description="We prioritize quality and ethics in every garment we produce."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Growing Global Community"
|
||||
tag="Impact"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
description: "Happy Customers",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50+",
|
||||
description: "Collections Launched",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
description: "Satisfaction Rate",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Growing Global Community"
|
||||
tag="Impact"
|
||||
metrics={[
|
||||
{ id: "m1", value: "10k+", description: "Happy Customers" },
|
||||
{ id: "m2", value: "50+", description: "Collections Launched" },
|
||||
{ id: "m3", value: "99%", description: "Satisfaction Rate" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The quality of clothes at ZX Store is unmatched. I love their modern designs!"
|
||||
rating={5}
|
||||
author="Sarah J."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-girl-holding-bags-after-shopping_1163-346.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-african-american-man-model-gray-coat-jacket-tie-red-hat-with-mobile-phone-hands_627829-2833.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/group-businesspeople-meeting-indoors_23-2148824873.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-hanger_23-2149241349.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blonde-shopping_1157-7680.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The quality of clothes at ZX Store is unmatched. I love their modern designs!"
|
||||
rating={5}
|
||||
author="Sarah J."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/pretty-girl-holding-bags-after-shopping_1163-346.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/stylish-african-american-man-model-gray-coat-jacket-tie-red-hat-with-mobile-phone-hands_627829-2833.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/group-businesspeople-meeting-indoors_23-2148824873.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-holding-hanger_23-2149241349.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blonde-shopping_1157-7680.jpg", alt: "Customer" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Shipping time?",
|
||||
content: "We ship globally in 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Return policy?",
|
||||
content: "Free returns within 30 days.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Sizes available?",
|
||||
content: "We offer sizes from XS to XXL.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our store."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Shipping time?", content: "We ship globally in 3-5 business days." },
|
||||
{ id: "f2", title: "Return policy?", content: "Free returns within 30 days." },
|
||||
{ id: "f3", title: "Sizes available?", content: "We offer sizes from XS to XXL." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our store."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Join our newsletter for exclusive offers."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sympathetic-girl-stands-near-bulding_8353-213.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Join our newsletter for exclusive offers."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sympathetic-girl-stands-near-bulding_8353-213.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 ZX Store. All rights reserved."
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "All Products", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 ZX Store. All rights reserved."
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user