Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 366bf59ccc | |||
| 71dff8bedf | |||
| fab22612fe |
290
src/app/page.tsx
290
src/app/page.tsx
@@ -21,10 +21,10 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
background="none"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
@@ -32,29 +32,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Shop", id: "#products"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="StyleCo"
|
||||
/>
|
||||
@@ -63,45 +51,28 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
title="Style That Speaks Volumes"
|
||||
description="Discover our latest collection designed for the modern trendsetter. Express yourself with confidence and elegance."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop New Arrivals", href: "#products"},
|
||||
{
|
||||
text: "Explore Collection",
|
||||
href: "#features",
|
||||
},
|
||||
text: "Explore Collection", href: "#features"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-outdoors_23-2149020037.jpg",
|
||||
imageAlt: "Diverse models showcasing latest fashion",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-outdoors_23-2149020037.jpg", imageAlt: "Diverse models showcasing latest fashion"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-blonde-fashion-model-white-suit-sits-soft-armchair_8353-5472.jpg",
|
||||
imageAlt: "High fashion runway shot",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-blonde-fashion-model-white-suit-sits-soft-armchair_8353-5472.jpg", imageAlt: "High fashion runway shot"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fascinating-brunette-woman-straw-hat-chilling-home-cozy-boho-interior_273443-1394.jpg",
|
||||
imageAlt: "Casual streetwear models in urban setting",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fascinating-brunette-woman-straw-hat-chilling-home-cozy-boho-interior_273443-1394.jpg", imageAlt: "Casual streetwear models in urban setting"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317779.jpg",
|
||||
imageAlt: "Minimalist fashion studio shoot",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317779.jpg", imageAlt: "Minimalist fashion studio shoot"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-fast-fashion-concept_23-2150805289.jpg",
|
||||
imageAlt: "Boho chic fashion models outdoor",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-fast-fashion-concept_23-2150805289.jpg", imageAlt: "Boho chic fashion models outdoor"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478950.jpg",
|
||||
imageAlt: "Bold vibrant clothing fashion",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478950.jpg", imageAlt: "Bold vibrant clothing fashion"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -114,17 +85,11 @@ export default function LandingPage() {
|
||||
description="We believe in creating timeless pieces that blend contemporary style with enduring craftsmanship. Every garment is a testament to our dedication to quality, ethical production, and your unique expression."
|
||||
metrics={[
|
||||
{
|
||||
value: "10+ Years",
|
||||
title: "In Fashion Excellence",
|
||||
},
|
||||
value: "10+ Years", title: "In Fashion Excellence"},
|
||||
{
|
||||
value: "5000+ Happy",
|
||||
title: "Customers Worldwide",
|
||||
},
|
||||
value: "5000+ Happy", title: "Customers Worldwide"},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Sustainable Fabrics",
|
||||
},
|
||||
value: "100%", title: "Sustainable Fabrics"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/thoughtful-tailor-looking-window_23-2148086077.jpg"
|
||||
imageAlt="Fashion designer working on a garment in a studio"
|
||||
@@ -142,65 +107,23 @@ export default function LandingPage() {
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "StyleCo",
|
||||
name: "The Modern Maxi Dress",
|
||||
price: "$89.00",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-nice-trendy-summer-dress_158538-15214.jpg",
|
||||
imageAlt: "Elegant black maxi dress",
|
||||
},
|
||||
id: "1", brand: "StyleCo", name: "The Modern Maxi Dress", price: "$89.00", rating: 5,
|
||||
reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-nice-trendy-summer-dress_158538-15214.jpg", imageAlt: "Elegant black maxi dress"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "StyleCo",
|
||||
name: "Classic Denim Jacket",
|
||||
price: "$75.00",
|
||||
rating: 4.5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-against-gray-wall_627829-2738.jpg",
|
||||
imageAlt: "Men's classic denim jacket",
|
||||
},
|
||||
id: "2", brand: "StyleCo", name: "Classic Denim Jacket", price: "$75.00", rating: 4.5,
|
||||
reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-against-gray-wall_627829-2738.jpg", imageAlt: "Men's classic denim jacket"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "StyleCo",
|
||||
name: "Boho Floral Summer Dress",
|
||||
price: "$65.00",
|
||||
rating: 4,
|
||||
reviewCount: "150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-summer-dress-vacation-beach-colorful-yellow-sunglasess-smiling-happy_285396-6636.jpg",
|
||||
imageAlt: "Floral print summer maxi dress",
|
||||
},
|
||||
id: "3", brand: "StyleCo", name: "Boho Floral Summer Dress", price: "$65.00", rating: 4,
|
||||
reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-summer-dress-vacation-beach-colorful-yellow-sunglasess-smiling-happy_285396-6636.jpg", imageAlt: "Floral print summer maxi dress"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "StyleCo",
|
||||
name: "Essential White Tee",
|
||||
price: "$29.00",
|
||||
rating: 5,
|
||||
reviewCount: "200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-teenager-sitting-looking-away-wondering_23-2148205471.jpg",
|
||||
imageAlt: "Unisex white t-shirt",
|
||||
},
|
||||
id: "4", brand: "StyleCo", name: "Essential White Tee", price: "$29.00", rating: 5,
|
||||
reviewCount: "200", imageSrc: "http://img.b2bpic.net/free-photo/male-teenager-sitting-looking-away-wondering_23-2148205471.jpg", imageAlt: "Unisex white t-shirt"},
|
||||
{
|
||||
id: "5",
|
||||
brand: "StyleCo",
|
||||
name: "Tailored High-Waist Trousers",
|
||||
price: "$95.00",
|
||||
rating: 4.5,
|
||||
reviewCount: "90",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-stylish-smiling-skinny-woman-with-curly-hair-walking-street-stairs-dressed-warm-brown-coat-blue-suit-autumn-trendy-fashion-street-style_285396-7078.jpg",
|
||||
imageAlt: "Women's high-waisted tailored trousers",
|
||||
},
|
||||
id: "5", brand: "StyleCo", name: "Tailored High-Waist Trousers", price: "$95.00", rating: 4.5,
|
||||
reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-stylish-smiling-skinny-woman-with-curly-hair-walking-street-stairs-dressed-warm-brown-coat-blue-suit-autumn-trendy-fashion-street-style_285396-7078.jpg", imageAlt: "Women's high-waisted tailored trousers"},
|
||||
{
|
||||
id: "6",
|
||||
brand: "StyleCo",
|
||||
name: "Cozy Knit Cardigan",
|
||||
price: "$110.00",
|
||||
rating: 5,
|
||||
reviewCount: "60",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-neatly-folded-knitted-items-pastel-color-light-background_169016-18269.jpg",
|
||||
imageAlt: "Warm cozy knit sweater",
|
||||
},
|
||||
id: "6", brand: "StyleCo", name: "Cozy Knit Cardigan", price: "$110.00", rating: 5,
|
||||
reviewCount: "60", imageSrc: "http://img.b2bpic.net/free-photo/close-up-neatly-folded-knitted-items-pastel-color-light-background_169016-18269.jpg", imageAlt: "Warm cozy knit sweater"},
|
||||
]}
|
||||
title="Shop Our Latest Arrivals"
|
||||
description="Explore new styles and essential wardrobe pieces for every occasion. Find your next favorite outfit and elevate your personal style with StyleCo."
|
||||
@@ -213,23 +136,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Premium Quality Fabrics",
|
||||
description: "We source only the finest materials, ensuring luxurious feel, exceptional comfort, and long-lasting wear for all our garments.",
|
||||
imageSrc: "asset://fabric-icon",
|
||||
imageAlt: "Premium fabric icon",
|
||||
},
|
||||
title: "Premium Quality Fabrics", description: "We source only the finest materials, ensuring luxurious feel, exceptional comfort, and long-lasting wear for all our garments.", imageSrc: "asset://fabric-icon", imageAlt: "Premium fabric icon"},
|
||||
{
|
||||
title: "Ethical & Sustainable Production",
|
||||
description: "Committed to responsible fashion, our production practices prioritize ethical labor and environmental sustainability, from design to delivery.",
|
||||
imageSrc: "asset://sustainable-icon",
|
||||
imageAlt: "Sustainable leaf icon",
|
||||
},
|
||||
title: "Ethical & Sustainable Production", description: "Committed to responsible fashion, our production practices prioritize ethical labor and environmental sustainability, from design to delivery.", imageSrc: "asset://sustainable-icon", imageAlt: "Sustainable leaf icon"},
|
||||
{
|
||||
title: "Exclusive & Unique Designs",
|
||||
description: "Stand out from the crowd with our original, trend-setting designs crafted by a team of visionary fashion artists, bringing you truly unique pieces.",
|
||||
imageSrc: "asset://design-icon",
|
||||
imageAlt: "Unique design icon",
|
||||
},
|
||||
title: "Exclusive & Unique Designs", description: "Stand out from the crowd with our original, trend-setting designs crafted by a team of visionary fashion artists, bringing you truly unique pieces.", imageSrc: "asset://design-icon", imageAlt: "Unique design icon"},
|
||||
]}
|
||||
title="Why Choose Our Apparel?"
|
||||
description="Experience the difference with our meticulously designed clothing. We focus on comfort, style, and durability in every stitch, ensuring you look and feel your best."
|
||||
@@ -241,14 +152,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue Daily",
|
||||
"Fashion Week Insider",
|
||||
"Style Magazine",
|
||||
"TrendSetters Global",
|
||||
"Elite Wear",
|
||||
"Global Attire Network",
|
||||
"Chic Living Co.",
|
||||
]}
|
||||
"Vogue Daily", "Fashion Week Insider", "Style Magazine", "TrendSetters Global", "Elite Wear", "Global Attire Network", "Chic Living Co."]}
|
||||
title="Trusted by Fashion Enthusiasts"
|
||||
description="Our commitment to style and quality has earned us recognition and partnerships within the fashion industry and with influential voices."
|
||||
speed={40}
|
||||
@@ -264,25 +168,15 @@ export default function LandingPage() {
|
||||
author="Jessica L., Fashion Blogger"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",
|
||||
alt: "Jessica L.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg", alt: "Jessica L."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5122.jpg",
|
||||
alt: "Michael T.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5122.jpg", alt: "Michael T."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/energetic-curly-haired-woman-dances-from-happiness-shakes-arms-makes-fist-bump-exclaims-gladfully-feels-overjoyed-wears-spectacles-white-fur-coat-isolated-pink-background-triumph-dance_273609-57316.jpg",
|
||||
alt: "Emily R.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/energetic-curly-haired-woman-dances-from-happiness-shakes-arms-makes-fist-bump-exclaims-gladfully-feels-overjoyed-wears-spectacles-white-fur-coat-isolated-pink-background-triumph-dance_273609-57316.jpg", alt: "Emily R."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/indoor-portrait-confident-thoughtful-male-freelancer-keeps-hand-chin-tries-decide-what_273609-8639.jpg",
|
||||
alt: "David K.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/indoor-portrait-confident-thoughtful-male-freelancer-keeps-hand-chin-tries-decide-what_273609-8639.jpg", alt: "David K."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-woman-posing-outdoors_23-2148618908.jpg",
|
||||
alt: "Sophia M.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/happy-woman-posing-outdoors_23-2148618908.jpg", alt: "Sophia M."},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -295,25 +189,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer free returns within 30 days of purchase for unworn items with tags attached. Please visit our 'Returns' page for detailed instructions on how to initiate a return.",
|
||||
},
|
||||
id: "1", title: "What is your return policy?", content: "We offer free returns within 30 days of purchase for unworn items with tags attached. Please visit our 'Returns' page for detailed instructions on how to initiate a return."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long does shipping take?",
|
||||
content: "Standard shipping typically takes 3-7 business days within the country. Expedited options are available at checkout. International shipping times vary depending on destination.",
|
||||
},
|
||||
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 3-7 business days within the country. Expedited options are available at checkout. International shipping times vary depending on destination."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we proudly ship worldwide! Shipping costs and delivery times will be calculated at checkout based on your location and chosen shipping method.",
|
||||
},
|
||||
id: "3", title: "Do you offer international shipping?", content: "Yes, we proudly ship worldwide! Shipping costs and delivery times will be calculated at checkout based on your location and chosen shipping method."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How do I find my size?",
|
||||
content: "Each product page features a detailed size guide to help you choose the perfect fit. We recommend comparing your measurements to the guide for accuracy.",
|
||||
},
|
||||
id: "4", title: "How do I find my size?", content: "Each product page features a detailed size guide to help you choose the perfect fit. We recommend comparing your measurements to the guide for accuracy."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-marketing-illustration_23-2151928207.jpg"
|
||||
imageAlt="Customer support person with a headset"
|
||||
@@ -332,28 +214,17 @@ export default function LandingPage() {
|
||||
description="Have a question, feedback, or need personalized styling advice? Our dedicated team is here to assist you with any inquiry. Reach out today!"
|
||||
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,
|
||||
},
|
||||
{
|
||||
name: "subject",
|
||||
type: "text",
|
||||
placeholder: "Subject",
|
||||
required: true,
|
||||
name: "subject", type: "text", placeholder: "Subject", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Your Message", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-sitting-city-park-looking-mobile-phone-holding-takeaway-coffee-cup_23-2148042561.jpg"
|
||||
@@ -368,66 +239,41 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
label: "New Arrivals", href: "#products"},
|
||||
{
|
||||
label: "Dresses",
|
||||
href: "#",
|
||||
},
|
||||
label: "Dresses", href: "#"},
|
||||
{
|
||||
label: "Outerwear",
|
||||
href: "#",
|
||||
},
|
||||
label: "Outerwear", href: "#"},
|
||||
{
|
||||
label: "Accessories",
|
||||
href: "#",
|
||||
},
|
||||
label: "Accessories", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Our Mission",
|
||||
href: "#features",
|
||||
},
|
||||
label: "Our Mission", href: "#features"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Careers", href: "#"},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact", href: "#contact"},
|
||||
{
|
||||
label: "Shipping & Returns",
|
||||
href: "#",
|
||||
},
|
||||
label: "Shipping Info", href: "#"},
|
||||
{
|
||||
label: "Size Guide",
|
||||
href: "#",
|
||||
},
|
||||
label: "Returns", href: "#"},
|
||||
{
|
||||
label: "Size Guide", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--background: #f5f4f0;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #15479c;
|
||||
--background-accent: #a8cce8;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #2c2c2c;
|
||||
--primary-cta-text: #f5f4f0;
|
||||
--secondary-cta: #f5f4f0;
|
||||
--secondary-cta-text: #1a1a1a;
|
||||
--accent: #8a8a8a;
|
||||
--background-accent: #e8e6e1;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user