Merge version_1 into main #1
432
src/app/page.tsx
432
src/app/page.tsx
@@ -16,316 +16,150 @@ import TextAbout from '@/components/sections/about/TextAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Heritage",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Collections",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="LOUIS VUITTON"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Heritage", id: "about" },
|
||||
{ name: "Collections", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="LOUIS VUITTON"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Timeless Elegance"
|
||||
description="Discover the art of refined luxury in every detail."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/creative-view-hands-with-curtains-shadows-from-window_23-2149657477.jpg"
|
||||
imageAlt="Louis Vuitton Hero"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-basket_23-2150329682.jpg",
|
||||
alt: "Luxury fashion portrait 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/creative-view-indoors-window-curtains_23-2149657515.jpg",
|
||||
alt: "Luxury fashion portrait 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/interior-design-with-white-vase-high-angle_23-2149551353.jpg",
|
||||
alt: "Luxury fashion portrait 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/elegant-wooden-hand-fan-white-table_23-2151990646.jpg",
|
||||
alt: "Luxury fashion portrait 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bootmaker-workshop-making-shoes_171337-12279.jpg",
|
||||
alt: "Luxury fashion portrait 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by global style icons"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Craftsmanship",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Heritage",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Excellence",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Luxury",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Timeless Elegance"
|
||||
description="Discover the art of refined luxury in every detail."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/creative-view-hands-with-curtains-shadows-from-window_23-2149657477.jpg"
|
||||
imageAlt="Louis Vuitton Hero"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-basket_23-2150329682.jpg", alt: "Luxury fashion portrait 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/creative-view-indoors-window-curtains_23-2149657515.jpg", alt: "Luxury fashion portrait 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/interior-design-with-white-vase-high-angle_23-2149551353.jpg", alt: "Luxury fashion portrait 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/elegant-wooden-hand-fan-white-table_23-2151990646.jpg", alt: "Luxury fashion portrait 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/bootmaker-workshop-making-shoes_171337-12279.jpg", alt: "Luxury fashion portrait 5" },
|
||||
]}
|
||||
avatarText="Trusted by global style icons"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Craftsmanship" },
|
||||
{ type: "text", text: "Heritage" },
|
||||
{ type: "text", text: "Excellence" },
|
||||
{ type: "text", text: "Timeless" },
|
||||
{ type: "text", text: "Luxury" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Excellence Since 1854"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout useInvertedBackground={true} title="Crafting Excellence Since 1854" />
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Mass market trends",
|
||||
"Short-term utility",
|
||||
"Common materials",
|
||||
"Compromised design",
|
||||
"Lack of soul",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Handcrafted artistry",
|
||||
"Timeless longevity",
|
||||
"Premium leather",
|
||||
"Master artisan touch",
|
||||
"Heritage tradition",
|
||||
],
|
||||
}}
|
||||
title="Why Choose Us"
|
||||
description="Unmatched quality meets legendary heritage."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
negativeCard={{ items: ["Mass market trends", "Short-term utility", "Common materials", "Compromised design", "Lack of soul"] }}
|
||||
positiveCard={{ items: ["Handcrafted artistry", "Timeless longevity", "Premium leather", "Master artisan touch", "Heritage tradition"] }}
|
||||
title="Why Choose Us"
|
||||
description="Unmatched quality meets legendary heritage."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Handbag",
|
||||
price: "$3,500",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535704.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Leather Wallet",
|
||||
price: "$800",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916729.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Travel Case",
|
||||
price: "$4,200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/inside-suitcase-are-placed-things-trip_23-2148328914.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Signature Belt",
|
||||
price: "$600",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/golden-easter-eggs-by-easter-decorations_1303-30816.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Luxury Shoes",
|
||||
price: "$1,200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-wearing-black-dress-boots_23-2149884569.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Evening Clutch",
|
||||
price: "$2,100",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916683.jpg",
|
||||
},
|
||||
]}
|
||||
title="Iconic Collections"
|
||||
description="Explore our signature designs."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Handbag", price: "$3,500", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535704.jpg" },
|
||||
{ id: "p2", name: "Leather Wallet", price: "$800", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916729.jpg" },
|
||||
{ id: "p3", name: "Travel Case", price: "$4,200", imageSrc: "http://img.b2bpic.net/free-photo/inside-suitcase-are-placed-things-trip_23-2148328914.jpg" },
|
||||
{ id: "p4", name: "Signature Belt", price: "$600", imageSrc: "http://img.b2bpic.net/free-photo/golden-easter-eggs-by-easter-decorations_1303-30816.jpg" },
|
||||
{ id: "p5", name: "Luxury Shoes", price: "$1,200", imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-wearing-black-dress-boots_23-2149884569.jpg" },
|
||||
{ id: "p6", name: "Evening Clutch", price: "$2,100", imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916683.jpg" },
|
||||
]}
|
||||
title="Iconic Collections"
|
||||
description="Explore our signature designs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "170+",
|
||||
title: "Years of History",
|
||||
items: [
|
||||
"Heritage",
|
||||
"Tradition",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Global Stores",
|
||||
items: [
|
||||
"Luxury",
|
||||
"Experience",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Handcrafted",
|
||||
items: [
|
||||
"Artisan",
|
||||
"Quality",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Global Presence"
|
||||
description="Defining luxury for over a century."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "170+", title: "Years of History", items: ["Heritage", "Tradition"] },
|
||||
{ id: "m2", value: "500+", title: "Global Stores", items: ["Luxury", "Experience"] },
|
||||
{ id: "m3", value: "100%", title: "Handcrafted", items: ["Artisan", "Quality"] },
|
||||
]}
|
||||
title="Global Presence"
|
||||
description="Defining luxury for over a century."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Fashion Editor",
|
||||
testimonial: "The quality is simply unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-woman-leather-black-skirt-white-blouse-holding-cup-cofee-take-away_273443-3360.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael D.",
|
||||
role: "Collector",
|
||||
testimonial: "A timeless piece of art.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blonde-short-haired-woman-posing-white-shirt_23-2149021781.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena R.",
|
||||
role: "Blogger",
|
||||
testimonial: "Every detail tells a story.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/slim-brunette-woman-black-sweater-crossed-arms_613910-7040.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
role: "Executive",
|
||||
testimonial: "Unparalleled sophistication.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-business-man-suit-grey-background_613910-15440.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Laura S.",
|
||||
role: "Influencer",
|
||||
testimonial: "Pure indulgence and style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-with-wet-hair-posing-studio-wearing-black-oversize-blazer-shiny-necklace_343596-7120.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="An unforgettable experience of luxury."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Fashion Editor", testimonial: "The quality is simply unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-woman-leather-black-skirt-white-blouse-holding-cup-cofee-take-away_273443-3360.jpg" },
|
||||
{ id: "2", name: "Michael D.", role: "Collector", testimonial: "A timeless piece of art.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-blonde-short-haired-woman-posing-white-shirt_23-2149021781.jpg" },
|
||||
{ id: "3", name: "Elena R.", role: "Blogger", testimonial: "Every detail tells a story.", imageSrc: "http://img.b2bpic.net/free-photo/slim-brunette-woman-black-sweater-crossed-arms_613910-7040.jpg" },
|
||||
{ id: "4", name: "David W.", role: "Executive", testimonial: "Unparalleled sophistication.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-business-man-suit-grey-background_613910-15440.jpg" },
|
||||
{ id: "5", name: "Laura S.", role: "Influencer", testimonial: "Pure indulgence and style.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-with-wet-hair-posing-studio-wearing-black-oversize-blazer-shiny-necklace_343596-7120.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="An unforgettable experience of luxury."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Authenticity",
|
||||
content: "All items are verified by our experts.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Global Delivery",
|
||||
content: "Worldwide shipping available.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Care Instructions",
|
||||
content: "Professional cleaning is recommended.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Authenticity", content: "All items are verified by our experts." },
|
||||
{ id: "f2", title: "Global Delivery", content: "Worldwide shipping available." },
|
||||
{ id: "f3", title: "Care Instructions", content: "Professional cleaning is recommended." },
|
||||
]}
|
||||
sideTitle="Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
text="Experience the world of luxury with us."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
text="Experience the world of luxury with us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="LOUIS VUITTON"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="LOUIS VUITTON"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Contact Support", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user