Merge version_1 into main #1
436
src/app/page.tsx
436
src/app/page.tsx
@@ -15,309 +15,159 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#shop",
|
||||
},
|
||||
{
|
||||
name: "Our Story",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "#faq",
|
||||
},
|
||||
]}
|
||||
brandName="MODA"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Shop", id: "#shop" },
|
||||
{ name: "Our Story", id: "#about" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Support", id: "#faq" },
|
||||
]}
|
||||
brandName="MODA"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Timeless Style, Crafted for You"
|
||||
description="Discover a collection that balances minimalist design with uncompromising quality. Modern apparel for the conscious wardrobe."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#shop",
|
||||
},
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fashion-collection-design-shopping-graphic-words_53876-144405.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-senior-looking-notebook_23-2148346228.jpg",
|
||||
alt: "Happy senior looking on the notebook",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/corporate-people-business-concept-young-woman-suit-sitting-office-having-conversation_1258-194620.jpg",
|
||||
alt: "Corporate people and business concept young woman in suit sitting in office and having conversation",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone_23-2148660681.jpg",
|
||||
alt: "Portrait of woman talking on the phone",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-trying-listening-some-sound_1187-3768.jpg",
|
||||
alt: "woman trying to listening some sound",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-low-angle_23-2149213172.jpg",
|
||||
alt: "Medium shot smiley woman low angle",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 20,000+ satisfied customers"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Timeless Style, Crafted for You"
|
||||
description="Discover a collection that balances minimalist design with uncompromising quality. Modern apparel for the conscious wardrobe."
|
||||
buttons={[
|
||||
{ text: "Shop Collection", href: "#shop" },
|
||||
{ text: "Our Story", href: "#about" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fashion-collection-design-shopping-graphic-words_53876-144405.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-senior-looking-notebook_23-2148346228.jpg", alt: "Happy senior looking on the notebook" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/corporate-people-business-concept-young-woman-suit-sitting-office-having-conversation_1258-194620.jpg", alt: "Corporate people and business concept young woman in suit sitting in office and having conversation" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone_23-2148660681.jpg", alt: "Portrait of woman talking on the phone" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-trying-listening-some-sound_1187-3768.jpg", alt: "woman trying to listening some sound" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-low-angle_23-2149213172.jpg", alt: "Medium shot smiley woman low angle" },
|
||||
]}
|
||||
avatarText="Join 20,000+ satisfied customers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Essential Tee",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/redhead-woman-listening-music-headphones-smiling_176420-8038.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Vintage Denim",
|
||||
price: "$120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-woman-bucket-hat-posing-outdoors-old-railway-station_181624-55447.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Silk Slip Dress",
|
||||
price: "$180",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-sexy-blond-woman-model-evening-dress-posing-blue-sky_158538-8278.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Oversized Knit",
|
||||
price: "$140",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-female-dressed-warm-hipster-white-sweater-posing-near-wall-street_158538-17157.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Leather Jacket",
|
||||
price: "$290",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-woman-posing_1153-2075.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Tailored Blazer",
|
||||
price: "$210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/classic-leather-jacket_1101-731.jpg",
|
||||
},
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Our latest seasonal essentials."
|
||||
/>
|
||||
</div>
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Essential Tee", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/redhead-woman-listening-music-headphones-smiling_176420-8038.jpg" },
|
||||
{ id: "p2", name: "Vintage Denim", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-woman-bucket-hat-posing-outdoors-old-railway-station_181624-55447.jpg" },
|
||||
{ id: "p3", name: "Silk Slip Dress", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/young-sexy-blond-woman-model-evening-dress-posing-blue-sky_158538-8278.jpg" },
|
||||
{ id: "p4", name: "Oversized Knit", price: "$140", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-female-dressed-warm-hipster-white-sweater-posing-near-wall-street_158538-17157.jpg" },
|
||||
{ id: "p5", name: "Leather Jacket", price: "$290", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-posing_1153-2075.jpg" },
|
||||
{ id: "p6", name: "Tailored Blazer", price: "$210", imageSrc: "http://img.b2bpic.net/free-photo/classic-leather-jacket_1101-731.jpg" },
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Our latest seasonal essentials."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafted with Purpose"
|
||||
description="We believe that the best pieces are made to last. Our design philosophy centers on clean lines, ethical sourcing, and timeless silhouettes."
|
||||
metrics={[
|
||||
{
|
||||
value: "100%",
|
||||
title: "Sustainably Sourced",
|
||||
},
|
||||
{
|
||||
value: "10+",
|
||||
title: "Years Expertise",
|
||||
},
|
||||
{
|
||||
value: "20k+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-plus-size-male-social-media-influencer_23-2151396712.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafted with Purpose"
|
||||
description="We believe that the best pieces are made to last. Our design philosophy centers on clean lines, ethical sourcing, and timeless silhouettes."
|
||||
metrics={[
|
||||
{ value: "100%", title: "Sustainably Sourced" },
|
||||
{ value: "10+", title: "Years Expertise" },
|
||||
{ value: "20k+", title: "Happy Clients" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-plus-size-male-social-media-influencer_23-2151396712.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Vogue",
|
||||
"Harper's Bazaar",
|
||||
"GQ",
|
||||
"The Cut",
|
||||
"Elle",
|
||||
"Cosmopolitan",
|
||||
"WWD",
|
||||
]}
|
||||
title="Featured in"
|
||||
description="Our work has been recognized by industry leaders."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Vogue", "Harper's Bazaar", "GQ", "The Cut", "Elle", "Cosmopolitan", "WWD"]}
|
||||
title="Featured in"
|
||||
description="Our work has been recognized by industry leaders."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
handle: "@alexstyle",
|
||||
testimonial: "The quality is simply unmatched. My favorite staple pieces.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/guy-presenting-gift-box-attractive-happy-lady_23-2148016809.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Jordan P.",
|
||||
handle: "@jordanmode",
|
||||
testimonial: "Finally, clothes that fit perfectly and feel incredible.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lovely-woman-sweater-posing-near-light-lamps_114579-81974.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam K.",
|
||||
handle: "@samwear",
|
||||
testimonial: "A masterclass in minimalist design. Love every single item.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452672.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Casey L.",
|
||||
handle: "@caseydesigns",
|
||||
testimonial: "Sophisticated, comfortable, and absolutely worth the investment.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-spring-day_285396-8001.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Taylor B.",
|
||||
handle: "@taylormodern",
|
||||
testimonial: "I get compliments everywhere I go. Simply the best.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/avatars-business-team-flat-design_23-2147575478.jpg",
|
||||
},
|
||||
]}
|
||||
title="Voices of Style"
|
||||
description="See why our customers love our pieces."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex R.", handle: "@alexstyle", testimonial: "The quality is simply unmatched. My favorite staple pieces.", imageSrc: "http://img.b2bpic.net/free-photo/guy-presenting-gift-box-attractive-happy-lady_23-2148016809.jpg" },
|
||||
{ id: "t2", name: "Jordan P.", handle: "@jordanmode", testimonial: "Finally, clothes that fit perfectly and feel incredible.", imageSrc: "http://img.b2bpic.net/free-photo/lovely-woman-sweater-posing-near-light-lamps_114579-81974.jpg" },
|
||||
{ id: "t3", name: "Sam K.", handle: "@samwear", testimonial: "A masterclass in minimalist design. Love every single item.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452672.jpg" },
|
||||
{ id: "t4", name: "Casey L.", handle: "@caseydesigns", testimonial: "Sophisticated, comfortable, and absolutely worth the investment.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-spring-day_285396-8001.jpg" },
|
||||
{ id: "t5", name: "Taylor B.", handle: "@taylormodern", testimonial: "I get compliments everywhere I go. Simply the best.", imageSrc: "http://img.b2bpic.net/free-vector/avatars-business-team-flat-design_23-2147575478.jpg" },
|
||||
]}
|
||||
title="Voices of Style"
|
||||
description="See why our customers love our pieces."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How is sizing?",
|
||||
content: "Our sizing runs true to size. Please see the size guide.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Shipping times?",
|
||||
content: "Standard shipping takes 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Return policy?",
|
||||
content: "We offer 30-day hassle-free returns on all unworn items.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/clothes-designers-working-store_23-2148915553.jpg"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our products."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How is sizing?", content: "Our sizing runs true to size. Please see the size guide." },
|
||||
{ id: "f2", title: "Shipping times?", content: "Standard shipping takes 3-5 business days." },
|
||||
{ id: "f3", title: "Return policy?", content: "We offer 30-day hassle-free returns on all unworn items." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/clothes-designers-working-store_23-2148915553.jpg"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our products."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
text="Have a specific request or need styling advice? We're here to help."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@moda.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "animated-grid" }}
|
||||
text="Have a specific request or need styling advice? We're here to help."
|
||||
buttons={[
|
||||
{ text: "Contact Us", href: "mailto:hello@moda.com" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="MODA"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#shop",
|
||||
},
|
||||
{
|
||||
label: "New In",
|
||||
href: "#shop",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 MODA Apparel. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="MODA"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [{ label: "All Products", href: "#shop" }, { label: "New In", href: "#shop" }],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [{ label: "Our Story", href: "#about" }, { label: "Careers", href: "#" }],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Returns", href: "#" }],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 MODA Apparel. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user