Merge version_1 into main #2
341
src/app/page.tsx
341
src/app/page.tsx
@@ -2,257 +2,124 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="MODERN"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MODERN"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
imagePosition="right"
|
||||
title="Timeless Essentials, Modern Aesthetic"
|
||||
description="Crafting premium garments for the conscious urban wardrobe. Designed for longevity, built for style."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/gbd6de8c3787525ac450bd0c82417cee0182e32711dd9df76bd72119cf72315efa218dbaeeb9b5385fdc89774ba67b0dbab7a557067eacc4e9002299c14bc04c7_1280.jpg"
|
||||
imageAlt="Modern fashion editorial"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{ variant: "radial-gradient" }}
|
||||
imagePosition="right"
|
||||
title="Timeless Essentials, Modern Aesthetic"
|
||||
description="Crafting premium garments for the conscious urban wardrobe. Designed for longevity, built for style."
|
||||
buttons={[{ text: "Shop New Arrivals", href: "#products" }]}
|
||||
imageSrc="https://pixabay.com/get/gbd6de8c3787525ac450bd0c82417cee0182e32711dd9df76bd72119cf72315efa218dbaeeb9b5385fdc89774ba67b0dbab7a557067eacc4e9002299c14bc04c7_1280.jpg"
|
||||
imageAlt="minimalist fashion editorial studio portrait"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Crafted with Purpose"
|
||||
description="We believe in the power of simplicity. Every piece in our collection is thoughtfully designed to outlast fast trends, using only the highest quality materials."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Sustainable Sourcing",
|
||||
description: "Ethically sourced fabrics for a lower footprint.",
|
||||
},
|
||||
{
|
||||
title: "Expert Craftsmanship",
|
||||
description: "Hand-finished details ensure lasting quality.",
|
||||
},
|
||||
{
|
||||
title: "Timeless Design",
|
||||
description: "Pieces that evolve with your personal style.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g3508a9895f9a8e10ee1fba3e04116fe1898231d51fa0b4f71c53977ad6ec95929b5a90f02c0955dbb4f5b61be097fc53ad22c3db83a5bf67b114a6ca6950c728_1280.jpg"
|
||||
imageAlt="Quality textile craftsmanship"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Crafted with Purpose"
|
||||
description="We believe in the power of simplicity. Every piece in our collection is thoughtfully designed to outlast fast trends, using only the highest quality materials."
|
||||
bulletPoints={[
|
||||
{ title: "Sustainable Sourcing", description: "Ethically sourced fabrics for a lower footprint." },
|
||||
{ title: "Expert Craftsmanship", description: "Hand-finished details ensure lasting quality." },
|
||||
{ title: "Timeless Design", description: "Pieces that evolve with your personal style." },
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g3508a9895f9a8e10ee1fba3e04116fe1898231d51fa0b4f71c53977ad6ec95929b5a90f02c0955dbb4f5b61be097fc53ad22c3db83a5bf67b114a6ca6950c728_1280.jpg"
|
||||
imageAlt="clothing brand sustainable workshop"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "MODERN",
|
||||
name: "Essential Crew Tee",
|
||||
price: "$45",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "https://pixabay.com/get/g1b33601fe38a9a442cf9b469793e093d31f945fe73b9d3083ae35e7106a0fc0748737d4a30ec0cda8bd53afb193e998f663515137c31085368f35ede27ef6575_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "MODERN",
|
||||
name: "Urban Structured Jacket",
|
||||
price: "$180",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "https://pixabay.com/get/g57bb75b48cefc925716f4d451ca3a4eba34cb5d5513e39c1fff094d2d6c2a912cafa7361050fa517448ec4b36e5db2f0976891308882062ef0e937e07975e401_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "MODERN",
|
||||
name: "Signature Tailored Pant",
|
||||
price: "$120",
|
||||
rating: 4,
|
||||
reviewCount: "92",
|
||||
imageSrc: "https://pixabay.com/get/g7cbb8fb1e52e5ca7708db647cbc7605b9b31da44c455821395857a6865ac8c8d61411edbf2881e40c9a91cde2652392b065f0b46587d9236f6fb8ee1a68116c9_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="Core Collection"
|
||||
description="Minimalist staples for the modern lifestyle."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "MODERN", name: "Essential Crew Tee", price: "$45", rating: 5, reviewCount: "120", imageSrc: "https://pixabay.com/get/g1b33601fe38a9a442cf9b469793e093d31f945fe73b9d3083ae35e7106a0fc0748737d4a30ec0cda8bd53afb193e998f663515137c31085368f35ede27ef6575_1280.jpg" },
|
||||
{ id: "p2", brand: "MODERN", name: "Urban Structured Jacket", price: "$180", rating: 5, reviewCount: "85", imageSrc: "https://pixabay.com/get/g57bb75b48cefc925716f4d451ca3a4eba34cb5d5513e39c1fff094d2d6c2a912cafa7361050fa517448ec4b36e5db2f0976891308882062ef0e937e07975e401_1280.jpg" },
|
||||
{ id: "p3", brand: "MODERN", name: "Signature Tailored Pant", price: "$120", rating: 4, reviewCount: "92", imageSrc: "https://pixabay.com/get/g7cbb8fb1e52e5ca7708db647cbc7605b9b31da44c455821395857a6865ac8c8d61411edbf2881e40c9a91cde2652392b065f0b46587d9236f6fb8ee1a68116c9_1280.jpg" },
|
||||
]}
|
||||
title="Core Collection"
|
||||
description="Minimalist staples for the modern lifestyle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Great quality",
|
||||
quote: "The most comfortable t-shirt I own. Exceptional fabric.",
|
||||
name: "Alex R.",
|
||||
role: "Creative Director",
|
||||
imageSrc: "https://pixabay.com/get/gb41ea1c98267b7054c3f711e3c9322ca96840a7f6ad844ec54050e2521105a794218777d7b03926684638d2362c4ff4c0854bf9c6f16dd910351cc826b780d69_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Simply elegant",
|
||||
quote: "Perfect cut and durable materials. My wardrobe staple.",
|
||||
name: "Jordan S.",
|
||||
role: "Architect",
|
||||
imageSrc: "https://pixabay.com/get/g2180984e139ac09bd112088dcf0cc4448b2ff0a0681b7ecef11b81c341ba35354cc8b12d228ec75af899a5da7f4ddb22dbf6f18bcbacb66a853062c35bc6c101_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Worth every penny",
|
||||
quote: "I have been wearing this jacket for two years and it still looks brand new.",
|
||||
name: "Elena M.",
|
||||
role: "Entrepreneur",
|
||||
imageSrc: "https://pixabay.com/get/gfda7e77d6d9cba9309f2197bb8968e0891045ddc7974d2b52c45d087f9d75e5f80ed1c437497e597f83b9fc2325e77a6f1953e0d4a21fe4736d41d99c85fe562_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Minimalist perfection",
|
||||
quote: "Exactly what I was looking for. Clean lines and great fit.",
|
||||
name: "Sam P.",
|
||||
role: "Designer",
|
||||
imageSrc: "https://pixabay.com/get/g42f09c02d9b65e6d8ab7af6c9981e316a81e4efe37efa48c3c5d855d9bc8c594187625aa435e1d1f3483bf23788ffc2462591c534071118e98baea0f3e1f9915_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Stellar Service",
|
||||
quote: "Fast delivery and the packaging was completely sustainable. Will buy again.",
|
||||
name: "Lucas K.",
|
||||
role: "Photographer",
|
||||
imageSrc: "https://pixabay.com/get/gb41ea1c98267b7054c3f711e3c9322ca96840a7f6ad844ec54050e2521105a794218777d7b03926684638d2362c4ff4c0854bf9c6f16dd910351cc826b780d69_1280.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Loved by Our Community"
|
||||
description="Hear what our wearers have to say."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Great quality", quote: "The most comfortable t-shirt I own. Exceptional fabric.", name: "Alex R.", role: "Creative Director", imageSrc: "https://pixabay.com/get/gb41ea1c98267b7054c3f711e3c9322ca96840a7f6ad844ec54050e2521105a794218777d7b03926684638d2362c4ff4c0854bf9c6f16dd910351cc826b780d69_1280.jpg" },
|
||||
{ id: "t2", title: "Simply elegant", quote: "Perfect cut and durable materials. My wardrobe staple.", name: "Jordan S.", role: "Architect", imageSrc: "https://pixabay.com/get/g2180984e139ac09bd112088dcf0cc4448b2ff0a0681b7ecef11b81c341ba35354cc8b12d228ec75af899a5da7f4ddb22dbf6f18bcbacb66a853062c35bc6c101_1280.jpg" },
|
||||
{ id: "t3", title: "Worth every penny", quote: "I have been wearing this jacket for two years and it still looks brand new.", name: "Elena M.", role: "Entrepreneur", imageSrc: "https://pixabay.com/get/gfda7e77d6d9cba9309f2197bb8968e0891045ddc7974d2b52c45d087f9d75e5f80ed1c437497e597f83b9fc2325e77a6f1953e0d4a21fe4736d41d99c85fe562_1280.jpg" },
|
||||
{ id: "t4", title: "Minimalist perfection", quote: "Exactly what I was looking for. Clean lines and great fit.", name: "Sam P.", role: "Designer", imageSrc: "https://pixabay.com/get/g42f09c02d9b65e6d8ab7af6c9981e316a81e4efe37efa48c3c5d855d9bc8c594187625aa435e1d1f3483bf23788ffc2462591c534071118e98baea0f3e1f9915_1280.jpg" },
|
||||
{ id: "t5", title: "Stellar Service", quote: "Fast delivery and the packaging was completely sustainable. Will buy again.", name: "Lucas K.", role: "Photographer", imageSrc: "https://pixabay.com/get/gb41ea1c98267b7054c3f711e3c9322ca96840a7f6ad844ec54050e2521105a794218777d7b03926684638d2362c4ff4c0854bf9c6f16dd910351cc826b780d69_1280.jpg" },
|
||||
]}
|
||||
title="Loved by Our Community"
|
||||
description="Hear what our wearers have to say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Join our newsletter for early access to new arrivals and exclusive brand updates."
|
||||
buttons={[
|
||||
{
|
||||
text: "Subscribe Now",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Join our newsletter for early access to new arrivals and exclusive brand updates."
|
||||
buttons={[{ text: "Subscribe Now" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Sustainability",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Brand",
|
||||
items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Values",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 MODERN Clothing. All rights reserved."
|
||||
bottomRightText="Privacy | Terms"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "All Products", href: "#products" }, { label: "New Arrivals", href: "#" }, { label: "Sustainability", href: "#" }] },
|
||||
{ title: "Brand", items: [{ label: "Our Story", href: "#about" }, { label: "Values", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }, { label: "Contact Us", href: "#contact" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 MODERN Clothing. All rights reserved."
|
||||
bottomRightText="Privacy | Terms"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user