Merge version_2 into main #1
189
src/app/page.tsx
189
src/app/page.tsx
@@ -19,10 +19,10 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
@@ -30,21 +30,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Trust",
|
||||
id: "metrics",
|
||||
},
|
||||
name: "Trust", id: "metrics"},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Reviews", id: "testimonials"},
|
||||
]}
|
||||
brandName="MBROT"
|
||||
/>
|
||||
@@ -56,82 +48,44 @@ export default function LandingPage() {
|
||||
description="Redefining the modern wardrobe for the conscious individual. Premium quality, timeless design."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop Now", href: "#products"},
|
||||
{
|
||||
text: "View Lookbook",
|
||||
href: "#",
|
||||
},
|
||||
text: "View Lookbook", href: "#"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453348.jpg",
|
||||
imageAlt: "Streetwear Model",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453348.jpg", imageAlt: "Streetwear Model"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-black-outfit_23-2151044540.jpg",
|
||||
imageAlt: "Front view woman posing with black outfit",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-black-outfit_23-2151044540.jpg", imageAlt: "Front view woman posing with black outfit"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interested-african-man-chilling-stairs-inspired-guy-black-attire-sitting-steps-thinking-about-something_197531-22075.jpg",
|
||||
imageAlt: "Interested african man chilling on stairs",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interested-african-man-chilling-stairs-inspired-guy-black-attire-sitting-steps-thinking-about-something_197531-22075.jpg", imageAlt: "Interested african man chilling on stairs"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-posing-black-white_23-2149735213.jpg",
|
||||
imageAlt: "Front view couple posing black and white",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-posing-black-white_23-2149735213.jpg", imageAlt: "Front view couple posing black and white"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg",
|
||||
imageAlt: "Young woman standing in universe texture projection",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg", imageAlt: "Young woman standing in universe texture projection"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Heavyweight Hoodie",
|
||||
price: "£120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-plant-with-dark-curtain_23-2149640628.jpg",
|
||||
},
|
||||
id: "p1", name: "Heavyweight Hoodie", price: "£120", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-plant-with-dark-curtain_23-2149640628.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Oversized Tee",
|
||||
price: "£45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-creating-vision-board_23-2150061907.jpg",
|
||||
},
|
||||
id: "p2", name: "Oversized Tee", price: "£45", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-creating-vision-board_23-2150061907.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Cargo Trousers",
|
||||
price: "£145",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-fashion-boutique-template_23-2150632564.jpg",
|
||||
},
|
||||
id: "p3", name: "Cargo Trousers", price: "£145", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-fashion-boutique-template_23-2150632564.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Technical Jacket",
|
||||
price: "£280",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-earphones_23-2149429040.jpg",
|
||||
},
|
||||
id: "p4", name: "Technical Jacket", price: "£280", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-earphones_23-2149429040.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Leather Chelsea Boots",
|
||||
price: "£320",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-representing-virgo-zodiac-sign_23-2151006272.jpg",
|
||||
},
|
||||
id: "p5", name: "Leather Chelsea Boots", price: "£320", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-representing-virgo-zodiac-sign_23-2151006272.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Minimalist Cap",
|
||||
price: "£35",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/elegant-photographer-instagram-story-template-pack_742173-7697.jpg",
|
||||
},
|
||||
id: "p6", name: "Minimalist Cap", price: "£35", imageSrc: "http://img.b2bpic.net/free-vector/elegant-photographer-instagram-story-template-pack_742173-7697.jpg"},
|
||||
]}
|
||||
title="Featured Collections"
|
||||
description="Discover our latest seasonal staples, designed for durability and refined style."
|
||||
@@ -140,89 +94,49 @@ export default function LandingPage() {
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
title="Our Standards"
|
||||
tag="Quality Assured"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
description: "Ethically Sourced Fabric",
|
||||
},
|
||||
id: "m1", value: "100%", description: "Ethically Sourced Fabric"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24h",
|
||||
description: "Priority Dispatch UK",
|
||||
},
|
||||
id: "m2", value: "24h", description: "Priority Dispatch UK"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "12mo",
|
||||
description: "Extended Product Guarantee",
|
||||
},
|
||||
id: "m3", value: "12mo", description: "Extended Product Guarantee"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex Rivers",
|
||||
role: "Creative Lead",
|
||||
company: "Studio X",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-girl-business-clothes-posing-light-background-studio-concept-stylish-clothes-sophistication_78826-3394.jpg",
|
||||
},
|
||||
id: "t1", name: "Alex Rivers", role: "Creative Lead", company: "Studio X", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-girl-business-clothes-posing-light-background-studio-concept-stylish-clothes-sophistication_78826-3394.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah Jenkins",
|
||||
role: "Director",
|
||||
company: "Brand Co",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting-chair_23-2149213192.jpg",
|
||||
},
|
||||
id: "t2", name: "Sarah Jenkins", role: "Director", company: "Brand Co", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting-chair_23-2149213192.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mark Owen",
|
||||
role: "Freelancer",
|
||||
company: "Self",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-white-shirt_158595-1014.jpg",
|
||||
},
|
||||
id: "t3", name: "Mark Owen", role: "Freelancer", company: "Self", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-white-shirt_158595-1014.jpg"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Elena Voss",
|
||||
role: "Designer",
|
||||
company: "Agency Ltd",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg",
|
||||
},
|
||||
id: "t4", name: "Elena Voss", role: "Designer", company: "Agency Ltd", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Tom Baker",
|
||||
role: "Architect",
|
||||
company: "Firm One",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-sitting-couch_23-2148415817.jpg",
|
||||
},
|
||||
id: "t5", name: "Tom Baker", role: "Architect", company: "Firm One", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-sitting-couch_23-2148415817.jpg"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Customer Rating",
|
||||
},
|
||||
value: "4.9/5", label: "Customer Rating"},
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
value: "10k+", label: "Happy Clients"},
|
||||
{
|
||||
value: "Global",
|
||||
label: "Shipping",
|
||||
},
|
||||
value: "Global", label: "Shipping"},
|
||||
]}
|
||||
title="Community Voices"
|
||||
description="See why our customers trust the brand."
|
||||
@@ -231,18 +145,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Support"
|
||||
title="Need Assistance?"
|
||||
description="Our team is here to help with sizing, shipping, or returns."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get in Touch",
|
||||
href: "mailto:hello@mbrot.com",
|
||||
},
|
||||
text: "Get in Touch", href: "mailto:hello@mbrot.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -254,18 +165,14 @@ export default function LandingPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "#", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
href: "#", ariaLabel: "Twitter"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0A0A0A;
|
||||
--card: #161616;
|
||||
--foreground: #FFFFFF;
|
||||
--primary-cta: #FF8C42;
|
||||
--background: #050505;
|
||||
--card: #101010;
|
||||
--foreground: #f0f0f0;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #0A0A0A;
|
||||
--secondary-cta: #0A0A0A;
|
||||
--secondary-cta: #1c1c1c;
|
||||
--secondary-cta-text: #FFFFFF;
|
||||
--accent: #FF8C42;
|
||||
--background-accent: #1A1A1A;
|
||||
--accent: #333333;
|
||||
--background-accent: #1a1a1a;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user