bender/fb5a0c76-1da2-4fba-928b-a9fab5722a18
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-18 07:19:39 +00:00
parent 72aa71b3d8
commit 8c519d6b19
1 changed files with 139 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

521
src/app/page.tsx
View File

@@ -30,398 +30,155 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Shop",
id: "products",
},
{
name: "Trending",
id: "trending",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="StyleLife Fashion"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "Products", id: "products" },
{ name: "Trending", id: "trending" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="StyleLife Fashion"
button={{ text: "Shop Now", href: "#products" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
background={{
variant: "gradient-bars",
}}
title="StyleLife Fashion"
description="Luxurious comfort for your everyday aesthetic. Discover premium pieces curated with love and a touch of pixel-art magic."
buttons={[
{
text: "Shop New Arrivals",
href: "#products",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-dark-background-loneliness-concept_169016-66019.jpg?_wi=1",
imageAlt: "Fashion 1",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/person-surrounded-by-wavy-text_23-2150039704.jpg?_wi=1",
imageAlt: "Fashion 2",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-female-tourist-standing-tower-rooftop-enjoying_482257-22945.jpg",
imageAlt: "Fashion 3",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830398.jpg",
imageAlt: "Fashion 4",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-woman-wearing-stylish-fedora-hat_23-2150711559.jpg",
imageAlt: "Fashion 5",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-still-life_23-2150176762.jpg",
imageAlt: "Fashion 6",
},
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
background={{ variant: "gradient-bars" }}
title="StyleLife Fashion"
description="Luxurious comfort for your everyday aesthetic. Discover premium pieces curated with love and a touch of pixel-art magic."
buttons={[{ text: "Shop New Arrivals", href: "#products" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-dark-background-loneliness-concept_169016-66019.jpg", imageAlt: "Fashion 1" },
{ imageSrc: "http://img.b2bpic.net/free-photo/person-surrounded-by-wavy-text_23-2150039704.jpg", imageAlt: "Fashion 2" },
{ imageSrc: "http://img.b2bpic.net/free-photo/caucasian-female-tourist-standing-tower-rooftop-enjoying_482257-22945.jpg", imageAlt: "Fashion 3" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830398.jpg", imageAlt: "Fashion 4" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-woman-wearing-stylish-fedora-hat_23-2150711559.jpg", imageAlt: "Fashion 5" },
{ imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-still-life_23-2150176762.jpg", imageAlt: "Fashion 6" }
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Curated Elegance"
description="StyleLife Fashion blends high-end comfort with playful, unique identity. Every piece tells a story of refined luxury and cozy, minimalist charm."
imageSrc="http://img.b2bpic.net/free-photo/black-white-nude-woman-full-shot_23-2149428733.jpg"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Curated Elegance"
description="StyleLife Fashion blends high-end comfort with playful, unique identity. Every piece tells a story of refined luxury and cozy, minimalist charm."
imageSrc="http://img.b2bpic.net/free-photo/black-white-nude-woman-full-shot_23-2149428733.jpg"
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Silk Minimalist Blouse",
price: "$129",
variant: "Cream",
imageSrc: "http://img.b2bpic.net/free-photo/pullover-camera-laid-near-coffee-pinecones_23-2147912476.jpg",
},
{
id: "p2",
name: "Cashmere Knit Cardigan",
price: "$189",
variant: "Mocha",
imageSrc: "http://img.b2bpic.net/free-photo/collection-beige-tone-colored-pants_23-2150773386.jpg",
},
{
id: "p3",
name: "Structured Pleated Skirt",
price: "$145",
variant: "Dusty Pink",
imageSrc: "http://img.b2bpic.net/free-photo/woman-feel-freeze-wears-grey-coat_633478-2755.jpg",
},
{
id: "p4",
name: "Tailored Wool Trousers",
price: "$169",
variant: "Black",
imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-set-corporate-identity-template_93675-130790.jpg",
},
{
id: "p5",
name: "Classic Satin Dress",
price: "$210",
variant: "Champagne",
imageSrc: "http://img.b2bpic.net/free-photo/yellow-model-career-kit-arrangement_23-2150083956.jpg",
},
{
id: "p6",
name: "Premium Cotton Shirt",
price: "$95",
variant: "White",
imageSrc: "http://img.b2bpic.net/free-photo/valentines-day-still-life-design_23-2149246334.jpg",
},
]}
title="New Arrivals"
description="Discover our latest seasonal pieces designed for comfort and elegance."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Silk Minimalist Blouse", price: "$129", variant: "Cream", imageSrc: "http://img.b2bpic.net/free-photo/pullover-camera-laid-near-coffee-pinecones_23-2147912476.jpg" },
{ id: "p2", name: "Cashmere Knit Cardigan", price: "$189", variant: "Mocha", imageSrc: "http://img.b2bpic.net/free-photo/collection-beige-tone-colored-pants_23-2150773386.jpg" },
{ id: "p3", name: "Structured Pleated Skirt", price: "$145", variant: "Dusty Pink", imageSrc: "http://img.b2bpic.net/free-photo/woman-feel-freeze-wears-grey-coat_633478-2755.jpg" },
{ id: "p4", name: "Tailored Wool Trousers", price: "$169", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-set-corporate-identity-template_93675-130790.jpg" },
{ id: "p5", name: "Classic Satin Dress", price: "$210", variant: "Champagne", imageSrc: "http://img.b2bpic.net/free-photo/yellow-model-career-kit-arrangement_23-2150083956.jpg" },
{ id: "p6", name: "Premium Cotton Shirt", price: "$95", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/valentines-day-still-life-design_23-2149246334.jpg" }
]}
title="New Arrivals"
description="Discover our latest seasonal pieces designed for comfort and elegance."
/>
</div>
<div id="trending" data-section="trending">
<FeatureBento
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Korean Street Style",
description: "Urban chic meets cozy vibes in our latest drop.",
bentoComponent: "reveal-icon",
icon: Sparkles,
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-business-suit_1303-17722.jpg",
imageAlt: "Young beautiful woman in a business suit",
},
{
title: "Luxury Loungewear",
description: "Redefining comfy with premium textures.",
bentoComponent: "reveal-icon",
icon: Heart,
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-dark-background-loneliness-concept_169016-66019.jpg?_wi=2",
imageAlt: "Young beautiful woman in a business suit",
},
{
title: "Minimalist Basics",
description: "The foundation of an elegant wardrobe.",
bentoComponent: "reveal-icon",
icon: Star,
imageSrc: "http://img.b2bpic.net/free-photo/person-surrounded-by-wavy-text_23-2150039704.jpg?_wi=2",
imageAlt: "Young beautiful woman in a business suit",
},
]}
title="Trending Collections"
description="Explore the aesthetic favorites that our community loves right now."
/>
</div>
<div id="trending" data-section="trending">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Korean Street Style", description: "Urban chic meets cozy vibes.", bentoComponent: "reveal-icon", icon: Sparkles },
{ title: "Luxury Loungewear", description: "Redefining comfy.", bentoComponent: "reveal-icon", icon: Heart },
{ title: "Minimalist Basics", description: "The foundation.", bentoComponent: "reveal-icon", icon: Star }
]}
title="Trending Collections"
description="Explore the aesthetic favorites."
/>
</div>
<div id="outfits" data-section="outfits">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "o1",
title: "The Sunday Brunch",
price: "$345",
period: "Full Set",
features: [
"Blouse",
"Skirt",
"Matching Scarf",
],
button: {
text: "Shop Outfit",
},
imageSrc: "http://img.b2bpic.net/free-photo/woman-ballerina-s-dress-light-soft-loft-with-daylight_633478-1282.jpg",
imageAlt: "Woman in ballerina's dress in light soft loft with daylight",
},
{
id: "o2",
title: "The Urban Professional",
price: "$420",
period: "Full Set",
features: [
"Blazer",
"Trousers",
"Satin Top",
],
button: {
text: "Shop Outfit",
},
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-dark-background-loneliness-concept_169016-66019.jpg?_wi=3",
imageAlt: "Woman in ballerina's dress in light soft loft with daylight",
},
{
id: "o3",
title: "The Cozy Evening",
price: "$295",
period: "Full Set",
features: [
"Cashmere Knit",
"Wool Trousers",
],
button: {
text: "Shop Outfit",
},
imageSrc: "http://img.b2bpic.net/free-photo/person-surrounded-by-wavy-text_23-2150039704.jpg?_wi=3",
imageAlt: "Woman in ballerina's dress in light soft loft with daylight",
},
]}
title="Featured Outfits"
description="Complete curated looks for the modern aesthetic seeker."
/>
</div>
<div id="outfits" data-section="outfits">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "o1", title: "The Sunday Brunch", price: "$345", period: "Full Set", features: ["Blouse", "Skirt"], button: { text: "Shop" } },
{ id: "o2", title: "The Urban Professional", price: "$420", period: "Full Set", features: ["Blazer", "Trousers"], button: { text: "Shop" } }
]}
title="Featured Outfits"
description="Complete looks."
/>
</div>
<div id="bestsellers" data-section="bestsellers">
<MetricCardSeven
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "1.2k+",
title: "Items Sold",
items: [
"Minimalist Blouse",
"Knit Cardigan",
],
},
{
id: "m2",
value: "98%",
title: "Satisfied Customers",
items: [
"Quality Reviews",
"Shipping Speed",
],
},
{
id: "m3",
value: "500+",
title: "Style Stories",
items: [
"Lookbook Features",
"Social Tags",
],
},
]}
title="Our Best Sellers"
description="The items that define the StyleLife signature look."
/>
</div>
<div id="bestsellers" data-section="bestsellers">
<MetricCardSeven
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "1.2k+", title: "Items Sold", items: ["Blouse"] },
{ id: "m2", value: "98%", title: "Satisfied Customers", items: ["Reviews"] }
]}
title="Our Best Sellers"
description="Signature look."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Chloe L.",
role: "Fashion Blogger",
testimonial: "The coziest clothes I own, and they look stunning!",
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-woman-library-smiling_197531-33498.jpg",
},
{
id: "2",
name: "Sarah P.",
role: "Artist",
testimonial: "Love the minimalist designs and the cute pixel details.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-with-smile_285396-8364.jpg",
},
{
id: "3",
name: "Emma W.",
role: "Student",
testimonial: "Perfect for my daily aesthetic, really high quality.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-non-binary-person_23-2148760579.jpg",
},
{
id: "4",
name: "Mia S.",
role: "Graphic Designer",
testimonial: "Everything fits perfectly and feels so soft.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-posing_23-2148728587.jpg",
},
{
id: "5",
name: "Jasmine T.",
role: "Architect",
testimonial: "The best shopping experience online, so easy.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453350.jpg",
},
]}
title="Loved by You"
description="Our community shares their favorite StyleLife moments."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Chloe L.", role: "Blogger", testimonial: "Stunning!" },
{ id: "2", name: "Sarah P.", role: "Artist", testimonial: "Lovely!" }
]}
title="Loved by You"
description="Shared moments."
/>
</div>
<div id="gallery" data-section="gallery">
<BlogCardOne
textboxLayout="default"
useInvertedBackground={false}
title="Fashion Gallery"
description="Visual highlights from our latest seasonal lookbooks."
blogs={[
{
id: "g1",
category: "Lookbook",
title: "Spring Dreams",
excerpt: "Soft florals and light tones.",
imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756309.jpg",
authorName: "Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-girl-with-make-up-black-background_627829-7805.jpg",
date: "March 2025",
},
{
id: "g2",
category: "Catalog",
title: "Urban Ease",
excerpt: "Chic styles for city living.",
imageSrc: "http://img.b2bpic.net/free-photo/watch-blank-paper-father-s-day_23-2147683462.jpg",
authorName: "Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/woman-laying-floor-high-angle_23-2149735240.jpg",
date: "February 2025",
},
{
id: "g3",
category: "Editorial",
title: "Minimalist Vibe",
excerpt: "The power of simple shapes.",
imageSrc: "http://img.b2bpic.net/free-photo/view-woman-wearing-stylish-fedora-hat_23-2150711574.jpg",
authorName: "Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/beautiful-young-female-posing_23-2148880238.jpg",
date: "January 2025",
},
]}
/>
</div>
<div id="gallery" data-section="gallery">
<BlogCardOne
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
title="Fashion Gallery"
description="Visual highlights."
blogs={[
{ id: "g1", category: "Lookbook", title: "Dreams", excerpt: "Soft.", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756309.jpg", authorName: "Admin", authorAvatar: "", date: "2025" },
{ id: "g2", category: "Catalog", title: "Ease", excerpt: "Chic.", imageSrc: "http://img.b2bpic.net/free-photo/watch-blank-paper-father-s-day_23-2147683462.jpg", authorName: "Admin", authorAvatar: "", date: "2025" }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Newsletter"
title="Join the StyleLife Club"
description="Get exclusive updates, early access to new collections, and aesthetic styling tips."
buttons={[
{
text: "Subscribe Now",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
tag="Newsletter"
title="Join the StyleLife Club"
description="Get updates."
buttons={[{ text: "Subscribe" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="StyleLife Fashion"
copyrightText="© 2025 StyleLife Fashion. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="StyleLife Fashion"
copyrightText="© 2025"
socialLinks={[{ icon: Instagram, href: "#", ariaLabel: "Instagram" }]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}