2 Commits

Author SHA1 Message Date
71dff8bedf Update src/app/styles/variables.css 2026-06-10 03:58:13 +00:00
fab22612fe Update src/app/page.tsx 2026-06-10 03:58:13 +00:00
2 changed files with 77 additions and 231 deletions

View File

@@ -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: "#"},
],
},
]}
@@ -438,4 +284,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -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);