Update src/app/page.tsx
This commit is contained in:
288
src/app/page.tsx
288
src/app/page.tsx
@@ -17,209 +17,107 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
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">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Trending",
|
||||
id: "trending",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="ShopModern"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Trending", id: "trending" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="ShopModern"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
logoText="ShopModern Essentials"
|
||||
description="Discover curated collections designed for the modern lifestyle. Fast shipping, premium quality."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#trending",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-texture-boutique-youtube-channel-art_23-2149342998.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="ShopModern Essentials"
|
||||
description="Discover curated collections designed for the modern lifestyle. Fast shipping, premium quality."
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "#trending" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-texture-boutique-youtube-channel-art_23-2149342998.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trending" data-section="trending">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Minimalist Watch",
|
||||
price: "$129.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343070.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Modern Urban Backpack",
|
||||
price: "$85.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Ergonomic Desk Lamp",
|
||||
price: "$45.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/vertical-flyer-pottery-with-clay-vessels_23-2148846390.jpg?_wi=1",
|
||||
},
|
||||
]}
|
||||
title="Trending Now"
|
||||
description="Our most popular picks this season."
|
||||
/>
|
||||
</div>
|
||||
<div id="trending" data-section="trending">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Minimalist Watch", price: "$129.00", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343070.jpg" },
|
||||
{ id: "p2", name: "Modern Urban Backpack", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg" },
|
||||
{ id: "p3", name: "Ergonomic Desk Lamp", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-psd/vertical-flyer-pottery-with-clay-vessels_23-2148846390.jpg" },
|
||||
]}
|
||||
title="Trending Now"
|
||||
description="Our most popular picks this season."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Story"
|
||||
tag="About Us"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore History",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Story"
|
||||
tag="About Us"
|
||||
buttons={[{ text: "Explore History", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
date: "Oct 2024",
|
||||
title: "Great quality!",
|
||||
quote: "The products are exactly as described.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-with-mobile-phone-shopping-bags-mall_662251-1464.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-texture-boutique-youtube-channel-art_23-2149342998.jpg?_wi=2",
|
||||
imageAlt: "modern minimalist online shop banner",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Bob D.",
|
||||
date: "Sep 2024",
|
||||
title: "Highly recommend",
|
||||
quote: "Shipping was incredibly fast.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman_329181-20199.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343070.jpg?_wi=2",
|
||||
imageAlt: "minimalist lifestyle product photo",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Charlie P.",
|
||||
date: "Aug 2024",
|
||||
title: "Amazing design",
|
||||
quote: "Really love the aesthetic.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/people-spending-time-together-experiencing-time-expansion_23-2151338335.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg?_wi=2",
|
||||
imageAlt: "modern lifestyle accessory clean studio",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Dana L.",
|
||||
date: "Jul 2024",
|
||||
title: "Best shop",
|
||||
quote: "Will be shopping here again.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-posing-with-coffee_23-2148452691.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/vertical-flyer-pottery-with-clay-vessels_23-2148846390.jpg?_wi=2",
|
||||
imageAlt: "premium lifestyle product minimalist design",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Erik S.",
|
||||
date: "Jun 2024",
|
||||
title: "Fantastic!",
|
||||
quote: "The craftsmanship is top-notch. Very satisfied.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-with-mobile-phone-shopping-bags-mall_662251-1464.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-with-mobile-phone-shopping-bags-mall_662251-1464.jpg",
|
||||
imageAlt: "happy customer portrait",
|
||||
},
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="Hear from our community."
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice M.", date: "Oct 2024", title: "Great quality!", quote: "The products are exactly as described.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-with-mobile-phone-shopping-bags-mall_662251-1464.jpg", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-texture-boutique-youtube-channel-art_23-2149342998.jpg" },
|
||||
{ id: "t2", name: "Bob D.", date: "Sep 2024", title: "Highly recommend", quote: "Shipping was incredibly fast.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman_329181-20199.jpg", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343070.jpg" },
|
||||
{ id: "t3", name: "Charlie P.", date: "Aug 2024", title: "Amazing design", quote: "Really love the aesthetic.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/people-spending-time-together-experiencing-time-expansion_23-2151338335.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg" },
|
||||
{ id: "t4", name: "Dana L.", date: "Jul 2024", title: "Best shop", quote: "Will be shopping here again.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-posing-with-coffee_23-2148452691.jpg", imageSrc: "http://img.b2bpic.net/free-psd/vertical-flyer-pottery-with-clay-vessels_23-2148846390.jpg" },
|
||||
{ id: "t5", name: "Erik S.", date: "Jun 2024", title: "Fantastic!", quote: "The craftsmanship is top-notch. Very satisfied.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-with-mobile-phone-shopping-bags-mall_662251-1464.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-smiling-woman-with-mobile-phone-shopping-bags-mall_662251-1464.jpg" },
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="Hear from our community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Shipping policy",
|
||||
content: "We ship worldwide in 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Returns",
|
||||
content: "Easy 30-day returns on all items.",
|
||||
},
|
||||
]}
|
||||
ctaTitle="Get In Touch"
|
||||
ctaDescription="Have questions? We're here to help."
|
||||
ctaButton={{
|
||||
text: "Contact Support",
|
||||
href: "mailto:support@shopmodern.com",
|
||||
}}
|
||||
ctaIcon={Mail}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Shipping policy", content: "We ship worldwide in 3-5 business days." },
|
||||
{ id: "q2", title: "Returns", content: "Easy 30-day returns on all items." },
|
||||
]}
|
||||
ctaTitle="Get In Touch"
|
||||
ctaDescription="Have questions? We're here to help."
|
||||
ctaButton={{ text: "Contact Support", href: "mailto:support@shopmodern.com" }}
|
||||
ctaIcon={Mail}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ShopModern"
|
||||
copyrightText="© 2025 ShopModern. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ShopModern"
|
||||
copyrightText="© 2025 ShopModern. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user