Merge version_1 into main #2
336
src/app/page.tsx
336
src/app/page.tsx
@@ -13,247 +13,117 @@ import TextAbout from '@/components/sections/about/TextAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Ethereal Wear"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Ethereal Wear"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Ethereal Wear"
|
||||
description="Timeless clothing designed for the modern individual, crafted with intention and the finest materials."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/gdd33ed2b17337a93a65d97b90ad05bb1752eaf297416ba53fa1221f49346d43b4edb713253ce6ce236557abdb205f553ce678f1d5c1d102d74006a5f571bce1e_1280.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://pixabay.com/get/g76aba0fd055a59e0af124f47fc35666e68e5ef7c7c897a0e354530b366c985e1e03587ae99bb2ac4c5f17a22ef8cb8e8395d495b9b3a309520983065a6a0f24b_1280.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g762ab3578fcb970eda51252daed76a64d535659d5580ac0224bb2f7ef0090e9f4e334374bde0246280c8c1b583e835f9952d8d584e670f8af84d2b7f7fb0fe40_1280.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g89a90c370a682bba9f4cb7a189311fd4af7d6fd8075a3decc86ba9d2e11fbce01e4876e8c749d7217b92d5327067c0819d37d37b01feff2b5f8d5c3b3f53fbcf_1280.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/gb9aa557a07cfb4c51004ef51e54f5930629ee0cad056d33fbfac41dc7ec58bfaa86cf3f16dacdb48332cde6566dfaeb23d102097fd4b546f79dea1d17868975a_1280.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g76aba0fd055a59e0af124f47fc35666e68e5ef7c7c897a0e354530b366c985e1e03587ae99bb2ac4c5f17a22ef8cb8e8395d495b9b3a309520983065a6a0f24b_1280.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 10,000+ style enthusiasts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Ethical",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Organic",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Minimalist",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Ethereal Wear"
|
||||
description="Timeless clothing designed for the modern individual, crafted with intention and the finest materials."
|
||||
buttons={[{ text: "Shop Collection", href: "#products" }]}
|
||||
imageSrc="https://pixabay.com/get/gdd33ed2b17337a93a65d97b90ad05bb1752eaf297416ba53fa1221f49346d43b4edb713253ce6ce236557abdb205f553ce678f1d5c1d102d74006a5f571bce1e_1280.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "https://pixabay.com/get/g76aba0fd055a59e0af124f47fc35666e68e5ef7c7c897a0e354530b366c985e1e03587ae99bb2ac4c5f17a22ef8cb8e8395d495b9b3a309520983065a6a0f24b_1280.jpg", alt: "Customer" },
|
||||
{ src: "https://pixabay.com/get/g762ab3578fcb970eda51252daed76a64d535659d5580ac0224bb2f7ef0090e9f4e334374bde0246280c8c1b583e835f9952d8d584e670f8af84d2b7f7fb0fe40_1280.jpg", alt: "Customer" },
|
||||
{ src: "https://pixabay.com/get/g89a90c370a682bba9f4cb7a189311fd4af7d6fd8075a3decc86ba9d2e11fbce01e4876e8c749d7217b92d5327067c0819d37d37b01feff2b5f8d5c3b3f53fbcf_1280.jpg", alt: "Customer" },
|
||||
{ src: "https://pixabay.com/get/gb9aa557a07cfb4c51004ef51e54f5930629ee0cad056d33fbfac41dc7ec58bfaa86cf3f16dacdb48332cde6566dfaeb23d102097fd4b546f79dea1d17868975a_1280.jpg", alt: "Customer" },
|
||||
{ src: "https://pixabay.com/get/g76aba0fd055a59e0af124f47fc35666e68e5ef7c7c897a0e354530b366c985e1e03587ae99bb2ac4c5f17a22ef8cb8e8395d495b9b3a309520983065a6a0f24b_1280.jpg", alt: "Customer" },
|
||||
]}
|
||||
avatarText="Join 10,000+ style enthusiasts"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Sustainable" },
|
||||
{ type: "text", text: "Timeless" },
|
||||
{ type: "text", text: "Ethical" },
|
||||
{ type: "text", text: "Organic" },
|
||||
{ type: "text", text: "Minimalist" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Philosophy"
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Philosophy"
|
||||
buttons={[{ text: "Our Story", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Essential Linen Shirt",
|
||||
price: "$120",
|
||||
imageSrc: "https://pixabay.com/get/g85b2768e88bc4123e514364d78053fdacc59169f62157eb223d078af2d9b0b34c71a4b7c558e119d62335e47ae9cbbdca8ceee00e5f470f3344280d55c232315_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Organic Cotton Trousers",
|
||||
price: "$180",
|
||||
imageSrc: "https://pixabay.com/get/gbf09bb3379b87c35071c573d88ebab0a61c2009efb2427a16e89a00ab82df3a4aa24a917016e862b398c1249001a7332211ad75c11040dd2feb9658e8ed850d2_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Premium Wool Sweater",
|
||||
price: "$240",
|
||||
imageSrc: "https://pixabay.com/get/g63e775ff8eb7ae9c00fa72815b69d2bff95d8c18fdaa7f31439efaec28670b6212febc04a5e81b08f572ac25b950f99931b57d01c4737736d9b5fdbb813d1243_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Signature Trench",
|
||||
price: "$320",
|
||||
imageSrc: "https://pixabay.com/get/g85b2768e88bc4123e514364d78053fdacc59169f62157eb223d078af2d9b0b34c71a4b7c558e119d62335e47ae9cbbdca8ceee00e5f470f3344280d55c232315_1280.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Cotton Knit Tee",
|
||||
price: "$80",
|
||||
imageSrc: "https://pixabay.com/get/gbf09bb3379b87c35071c573d88ebab0a61c2009efb2427a16e89a00ab82df3a4aa24a917016e862b398c1249001a7332211ad75c11040dd2feb9658e8ed850d2_1280.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Discover our latest seasonal curation."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Essential Linen Shirt", price: "$120", imageSrc: "https://pixabay.com/get/g85b2768e88bc4123e514364d78053fdacc59169f62157eb223d078af2d9b0b34c71a4b7c558e119d62335e47ae9cbbdca8ceee00e5f470f3344280d55c232315_1280.jpg" },
|
||||
{ id: "2", name: "Organic Cotton Trousers", price: "$180", imageSrc: "https://pixabay.com/get/gbf09bb3379b87c35071c573d88ebab0a61c2009efb2427a16e89a00ab82df3a4aa24a917016e862b398c1249001a7332211ad75c11040dd2feb9658e8ed850d2_1280.jpg" },
|
||||
{ id: "3", name: "Premium Wool Sweater", price: "$240", imageSrc: "https://pixabay.com/get/g63e775ff8eb7ae9c00fa72815b69d2bff95d8c18fdaa7f31439efaec28670b6212febc04a5e81b08f572ac25b950f99931b57d01c4737736d9b5fdbb813d1243_1280.jpg" },
|
||||
{ id: "4", name: "Signature Trench", price: "$320", imageSrc: "https://pixabay.com/get/g85b2768e88bc4123e514364d78053fdacc59169f62157eb223d078af2d9b0b34c71a4b7c558e119d62335e47ae9cbbdca8ceee00e5f470f3344280d55c232315_1280.jpg" },
|
||||
{ id: "5", name: "Cotton Knit Tee", price: "$80", imageSrc: "https://pixabay.com/get/gbf09bb3379b87c35071c573d88ebab0a61c2009efb2427a16e89a00ab82df3a4aa24a917016e862b398c1249001a7332211ad75c11040dd2feb9658e8ed850d2_1280.jpg" }
|
||||
]}
|
||||
title="New Arrivals"
|
||||
description="Discover our latest seasonal curation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Elena R.",
|
||||
role: "Creative",
|
||||
testimonial: "The quality is unmatched. I love the minimalist approach.",
|
||||
imageSrc: "https://pixabay.com/get/g76aba0fd055a59e0af124f47fc35666e68e5ef7c7c897a0e354530b366c985e1e03587ae99bb2ac4c5f17a22ef8cb8e8395d495b9b3a309520983065a6a0f24b_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus J.",
|
||||
role: "Architect",
|
||||
testimonial: "Fits perfectly. My new daily essential.",
|
||||
imageSrc: "https://pixabay.com/get/g762ab3578fcb970eda51252daed76a64d535659d5580ac0224bb2f7ef0090e9f4e334374bde0246280c8c1b583e835f9952d8d584e670f8af84d2b7f7fb0fe40_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sophie K.",
|
||||
role: "Designer",
|
||||
testimonial: "Beautifully crafted and very comfortable.",
|
||||
imageSrc: "https://pixabay.com/get/g89a90c370a682bba9f4cb7a189311fd4af7d6fd8075a3decc86ba9d2e11fbce01e4876e8c749d7217b92d5327067c0819d37d37b01feff2b5f8d5c3b3f53fbcf_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "Sophisticated and timeless.",
|
||||
imageSrc: "https://pixabay.com/get/gb9aa557a07cfb4c51004ef51e54f5930629ee0cad056d33fbfac41dc7ec58bfaa86cf3f16dacdb48332cde6566dfaeb23d102097fd4b546f79dea1d17868975a_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sarah L.",
|
||||
role: "Curator",
|
||||
testimonial: "The fabric feels like luxury, perfect for every day.",
|
||||
imageSrc: "https://pixabay.com/get/g762ab3578fcb970eda51252daed76a64d535659d5580ac0224bb2f7ef0090e9f4e334374bde0246280c8c1b583e835f9952d8d584e670f8af84d2b7f7fb0fe40_1280.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="What Our Community Says"
|
||||
description="Hear from those who embrace the Ethereal aesthetic."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Elena R.", role: "Creative", testimonial: "The quality is unmatched. I love the minimalist approach.", imageSrc: "https://pixabay.com/get/g76aba0fd055a59e0af124f47fc35666e68e5ef7c7c897a0e354530b366c985e1e03587ae99bb2ac4c5f17a22ef8cb8e8395d495b9b3a309520983065a6a0f24b_1280.jpg" },
|
||||
{ id: "2", name: "Marcus J.", role: "Architect", testimonial: "Fits perfectly. My new daily essential.", imageSrc: "https://pixabay.com/get/g762ab3578fcb970eda51252daed76a64d535659d5580ac0224bb2f7ef0090e9f4e334374bde0246280c8c1b583e835f9952d8d584e670f8af84d2b7f7fb0fe40_1280.jpg" },
|
||||
{ id: "3", name: "Sophie K.", role: "Designer", testimonial: "Beautifully crafted and very comfortable.", imageSrc: "https://pixabay.com/get/g89a90c370a682bba9f4cb7a189311fd4af7d6fd8075a3decc86ba9d2e11fbce01e4876e8c749d7217b92d5327067c0819d37d37b01feff2b5f8d5c3b3f53fbcf_1280.jpg" },
|
||||
{ id: "4", name: "David W.", role: "Entrepreneur", testimonial: "Sophisticated and timeless.", imageSrc: "https://pixabay.com/get/gb9aa557a07cfb4c51004ef51e54f5930629ee0cad056d33fbfac41dc7ec58bfaa86cf3f16dacdb48332cde6566dfaeb23d102097fd4b546f79dea1d17868975a_1280.jpg" },
|
||||
{ id: "5", name: "Sarah L.", role: "Curator", testimonial: "The fabric feels like luxury, perfect for every day.", imageSrc: "https://pixabay.com/get/g762ab3578fcb970eda51252daed76a64d535659d5580ac0224bb2f7ef0090e9f4e334374bde0246280c8c1b583e835f9952d8d584e670f8af84d2b7f7fb0fe40_1280.jpg" }
|
||||
]}
|
||||
title="What Our Community Says"
|
||||
description="Hear from those who embrace the Ethereal aesthetic."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Join our newsletter for early access to new releases."
|
||||
buttons={[
|
||||
{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Join our newsletter for early access to new releases."
|
||||
buttons={[{ text: "Subscribe", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Ethereal Wear"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "All Items",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping Info",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Ethereal Wear"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "New Arrivals", href: "#products" }, { label: "All Items", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Shipping Info", href: "#" }, { label: "Returns", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user