Merge version_1 into main #2
294
src/app/page.tsx
294
src/app/page.tsx
@@ -20,125 +20,79 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
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">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Shop", id: "#products"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="StyleHub"
|
||||
button={{
|
||||
text: "Cart",
|
||||
}}
|
||||
text: "Cart"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Timeless Style, Modern Comfort"
|
||||
description="Discover curated clothing essentials designed for your everyday wardrobe. Sustainable, comfortable, and always in style."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@alexstyle",
|
||||
testimonial: "The best quality fabric I've found in years. Fits perfectly!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-shopping-bags-city_1303-16810.jpg",
|
||||
imageAlt: "Young woman with shopping bags in the city",
|
||||
},
|
||||
name: "Alex R.", handle: "@alexstyle", testimonial: "The best quality fabric I've found in years. Fits perfectly!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-shopping-bags-city_1303-16810.jpg", imageAlt: "Young woman with shopping bags in the city"},
|
||||
{
|
||||
name: "Jordan S.",
|
||||
handle: "@jordanmode",
|
||||
testimonial: "Finally, clothes that actually last. So worth the investment.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-brunette-woman-white-t-shirt-denim-pink-jacket-posing-with-smile-cute-bar_197531-17038.jpg",
|
||||
imageAlt: "Portrait of young brunette woman",
|
||||
},
|
||||
name: "Jordan S.", handle: "@jordanmode", testimonial: "Finally, clothes that actually last. So worth the investment.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-brunette-woman-white-t-shirt-denim-pink-jacket-posing-with-smile-cute-bar_197531-17038.jpg", imageAlt: "Portrait of young brunette woman"},
|
||||
{
|
||||
name: "Casey M.",
|
||||
handle: "@caseyclothes",
|
||||
testimonial: "Shipping was fast and the packaging was beautiful.",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-woman-holding-shopping-bags_23-2148624958.jpg",
|
||||
imageAlt: "Portrait of elegant woman holding shopping bags",
|
||||
},
|
||||
name: "Casey M.", handle: "@caseyclothes", testimonial: "Shipping was fast and the packaging was beautiful.", rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-woman-holding-shopping-bags_23-2148624958.jpg", imageAlt: "Portrait of elegant woman holding shopping bags"},
|
||||
{
|
||||
name: "Sam K.",
|
||||
handle: "@samstyle",
|
||||
testimonial: "Absolutely love the minimalistic designs. Very versatile.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-customer-with-paper-bags_23-2147652065.jpg",
|
||||
imageAlt: "Pretty customer with paper bags",
|
||||
},
|
||||
name: "Sam K.", handle: "@samstyle", testimonial: "Absolutely love the minimalistic designs. Very versatile.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-customer-with-paper-bags_23-2147652065.jpg", imageAlt: "Pretty customer with paper bags"},
|
||||
{
|
||||
name: "Taylor B.",
|
||||
handle: "@taylorfit",
|
||||
testimonial: "Great customer service and even better quality clothing.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-smartphone_23-2149731191.jpg",
|
||||
imageAlt: "Front view woman holding smartphone",
|
||||
},
|
||||
name: "Taylor B.", handle: "@taylorfit", testimonial: "Great customer service and even better quality clothing.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-smartphone_23-2149731191.jpg", imageAlt: "Front view woman holding smartphone"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2776.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2776.jpg"
|
||||
imageAlt="model wearing trendy street fashion"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-woman-holding-cute-dog_23-2150209108.jpg",
|
||||
alt: "Full shot woman holding cute dog",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-woman-holding-cute-dog_23-2150209108.jpg", alt: "Full shot woman holding cute dog"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-tall-arabian-man-model-white-shirt-jeans-sunglasses-posed-street-city-beard-attractive-arab-guy-against-red-wall_627829-2596.jpg",
|
||||
alt: "Stylish tall arabian man model",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-tall-arabian-man-model-white-shirt-jeans-sunglasses-posed-street-city-beard-attractive-arab-guy-against-red-wall_627829-2596.jpg", alt: "Stylish tall arabian man model"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-arabian-muslim-boy-with-originally-hair-sunglasses-posed-streets-ladder_627829-13727.jpg",
|
||||
alt: "Stylish arabian muslim boy",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-arabian-muslim-boy-with-originally-hair-sunglasses-posed-streets-ladder_627829-13727.jpg", alt: "Stylish arabian muslim boy"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2453.jpg",
|
||||
alt: "cute young woman outdoor",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2453.jpg", alt: "cute young woman outdoor"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563294.jpg",
|
||||
alt: "Beautiful young tattooed person",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-young-tattooed-person_23-2149563294.jpg", alt: "Beautiful young tattooed person"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable",
|
||||
},
|
||||
type: "text", text: "Sustainable"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Ethical",
|
||||
},
|
||||
type: "text", text: "Ethical"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium",
|
||||
},
|
||||
type: "text", text: "Premium"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless",
|
||||
},
|
||||
type: "text", text: "Timeless"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern",
|
||||
},
|
||||
type: "text", text: "Modern"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -151,19 +105,13 @@ export default function LandingPage() {
|
||||
description="We believe in clothing that bridges the gap between style and sustainability. Our pieces are crafted from premium materials that look as good as they feel."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Premium Materials",
|
||||
description: "100% organic cotton and sustainable blends.",
|
||||
},
|
||||
title: "Premium Materials", description: "100% organic cotton and sustainable blends."},
|
||||
{
|
||||
title: "Ethical Sourcing",
|
||||
description: "Fair wages and safe conditions for all workers.",
|
||||
},
|
||||
title: "Ethical Sourcing", description: "Fair wages and safe conditions for all workers."},
|
||||
{
|
||||
title: "Timeless Design",
|
||||
description: "Classic silhouettes built to last for seasons.",
|
||||
},
|
||||
title: "Timeless Design", description: "Classic silhouettes built to last for seasons."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blue-blouse-made-silk_23-2148237590.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blue-blouse-made-silk_23-2148237590.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="sustainable clothing fabric detail"
|
||||
/>
|
||||
@@ -173,50 +121,21 @@ export default function LandingPage() {
|
||||
<ProductCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Premium Essential Hoodie",
|
||||
price: "$89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-drinking-coffee_23-2149462143.jpg",
|
||||
imageAlt: "trendy hoodie apparel item",
|
||||
},
|
||||
id: "p1", name: "Premium Essential Hoodie", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-drinking-coffee_23-2149462143.jpg", imageAlt: "trendy hoodie apparel item"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Classic Denim Jacket",
|
||||
price: "$129",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-hipster-mixed-girl-with-perfect-whit-teeth-spending-great-time-outdoor_273443-1910.jpg",
|
||||
imageAlt: "stylish denim jacket apparel",
|
||||
},
|
||||
id: "p2", name: "Classic Denim Jacket", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/happy-hipster-mixed-girl-with-perfect-whit-teeth-spending-great-time-outdoor_273443-1910.jpg", imageAlt: "stylish denim jacket apparel"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Everyday Cotton Tee",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-green-monster-character-merchandise-collection_1308-185736.jpg",
|
||||
imageAlt: "modern t-shirt design apparel",
|
||||
},
|
||||
id: "p3", name: "Everyday Cotton Tee", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/cute-green-monster-character-merchandise-collection_1308-185736.jpg", imageAlt: "modern t-shirt design apparel"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Urban Daily Sneaker",
|
||||
price: "$110",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-plants-deco_23-2149192223.jpg",
|
||||
imageAlt: "minimalist sneaker shoe fashion",
|
||||
},
|
||||
id: "p4", name: "Urban Daily Sneaker", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-plants-deco_23-2149192223.jpg", imageAlt: "minimalist sneaker shoe fashion"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Premium Leather Belt",
|
||||
price: "$65",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-travel-items-arrangement_23-2148666246.jpg",
|
||||
imageAlt: "luxury accessory fashion detail",
|
||||
},
|
||||
id: "p5", name: "Premium Leather Belt", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-travel-items-arrangement_23-2148666246.jpg", imageAlt: "luxury accessory fashion detail"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Modern Baseball Cap",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-high-angle_23-2150264184.jpg",
|
||||
imageAlt: "trendy hat fashion accessory",
|
||||
},
|
||||
id: "p6", name: "Modern Baseball Cap", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-high-angle_23-2150264184.jpg", imageAlt: "trendy hat fashion accessory"},
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Shop the latest collection of essentials."
|
||||
@@ -230,28 +149,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Fast Shipping",
|
||||
description: "Get your orders within 3-5 business days.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-colorful-fabric-section-outdoor-market_181624-17441.jpg",
|
||||
imageAlt: "Closeup shot of a colorful fabric section in an outdoor market",
|
||||
title: "Fast Shipping", description: "Get your orders within 3-5 business days.", bentoComponent: "reveal-icon", icon: Zap
|
||||
},
|
||||
{
|
||||
title: "30-Day Returns",
|
||||
description: "Not satisfied? We'll make it right.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ShieldCheck,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2776.jpg?_wi=2",
|
||||
imageAlt: "Closeup shot of a colorful fabric section in an outdoor market",
|
||||
title: "30-Day Returns", description: "Not satisfied? We'll make it right.", bentoComponent: "reveal-icon", icon: ShieldCheck
|
||||
},
|
||||
{
|
||||
title: "Community Focus",
|
||||
description: "We donate 5% of profits to local artisans.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Heart,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-blouse-made-silk_23-2148237590.jpg?_wi=2",
|
||||
imageAlt: "Closeup shot of a colorful fabric section in an outdoor market",
|
||||
title: "Community Focus", description: "We donate 5% of profits to local artisans.", bentoComponent: "reveal-icon", icon: Heart
|
||||
},
|
||||
]}
|
||||
title="Why Choose StyleHub?"
|
||||
@@ -266,64 +170,28 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
role: "Designer",
|
||||
company: "Studio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-joyful-girl-pink-pantsuit-sitting-chair-happily-talking-her-phone-while-looking-camera-with-clothes-racks-background-fashion-boutique_574295-3546.jpg",
|
||||
imageAlt: "happy customer wearing fashion",
|
||||
},
|
||||
id: "t1", name: "Alice M.", role: "Designer", company: "Studio", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-joyful-girl-pink-pantsuit-sitting-chair-happily-talking-her-phone-while-looking-camera-with-clothes-racks-background-fashion-boutique_574295-3546.jpg", imageAlt: "happy customer wearing fashion"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Bob D.",
|
||||
role: "Engineer",
|
||||
company: "Tech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-shopaholic-standing-boutique-taking-many-hangers-with-clothes-trying-looking-with-dreamy-expression-aside-deciding-what-take-keeping-modern-mobile-phone-other-hand_273609-757.jpg",
|
||||
imageAlt: "satisfied shopper holding shopping bag",
|
||||
},
|
||||
id: "t2", name: "Bob D.", role: "Engineer", company: "Tech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-shopaholic-standing-boutique-taking-many-hangers-with-clothes-trying-looking-with-dreamy-expression-aside-deciding-what-take-keeping-modern-mobile-phone-other-hand_273609-757.jpg", imageAlt: "satisfied shopper holding shopping bag"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Chloe L.",
|
||||
role: "Artist",
|
||||
company: "Creative",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-short-hair-relaxing-outdoors_23-2149015726.jpg",
|
||||
imageAlt: "confident person wearing stylish clothes",
|
||||
},
|
||||
id: "t3", name: "Chloe L.", role: "Artist", company: "Creative", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-short-hair-relaxing-outdoors_23-2149015726.jpg", imageAlt: "confident person wearing stylish clothes"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David W.",
|
||||
role: "Writer",
|
||||
company: "Agency",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-shopping-city_23-2149273777.jpg",
|
||||
imageAlt: "happy customer portrait casual outfit",
|
||||
},
|
||||
id: "t4", name: "David W.", role: "Writer", company: "Agency", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-shopping-city_23-2149273777.jpg", imageAlt: "happy customer portrait casual outfit"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Eva J.",
|
||||
role: "Student",
|
||||
company: "University",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-curly-woman-pink-suit-sitting-near-mirror_197531-16809.jpg",
|
||||
imageAlt: "fashion blogger portrait style",
|
||||
},
|
||||
id: "t5", name: "Eva J.", role: "Student", company: "University", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-curly-woman-pink-suit-sitting-near-mirror_197531-16809.jpg", imageAlt: "fashion blogger portrait style"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Satisfied Customers",
|
||||
},
|
||||
value: "10k+", label: "Satisfied Customers"},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
value: "4.9/5", label: "Average Rating"},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Ethical Sourcing",
|
||||
},
|
||||
value: "100%", label: "Ethical Sourcing"},
|
||||
]}
|
||||
title="What Our Customers Think"
|
||||
description="Join thousands of satisfied shoppers worldwide."
|
||||
@@ -335,20 +203,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship globally to over 50 countries.",
|
||||
},
|
||||
id: "f1", title: "Do you offer international shipping?", content: "Yes, we ship globally to over 50 countries."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How can I track my order?",
|
||||
content: "You will receive a tracking link via email as soon as it ships.",
|
||||
},
|
||||
id: "f2", title: "How can I track my order?", content: "You will receive a tracking link via email as soon as it ships."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is your packaging recyclable?",
|
||||
content: "Absolutely. We use 100% recycled materials.",
|
||||
},
|
||||
id: "f3", title: "Is your packaging recyclable?", content: "Absolutely. We use 100% recycled materials."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know."
|
||||
@@ -361,14 +220,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue",
|
||||
"GQ",
|
||||
"Hypebeast",
|
||||
"Fashionista",
|
||||
"The Business of Fashion",
|
||||
"Elle",
|
||||
"Harper's Bazaar",
|
||||
]}
|
||||
"Vogue", "GQ", "Hypebeast", "Fashionista", "The Business of Fashion", "Elle", "Harper's Bazaar"]}
|
||||
title="Loved By Media"
|
||||
description="Featured in leading fashion publications."
|
||||
/>
|
||||
@@ -381,16 +233,10 @@ export default function LandingPage() {
|
||||
description="Have questions? Send us a message."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/indoor-shot-beautiful-happy-student-girl-blue-sweatshirt-using-wireless-headphones-having-online-examination-sitting-home-people-education-learning-technology-electronic-gadgets_343059-1924.jpg"
|
||||
@@ -402,13 +248,9 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="StyleHub"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Terms of Service", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user