212 lines
9.5 KiB
TypeScript
212 lines
9.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Shop", id: "products"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="MODA"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="MODA"
|
|
description="Crafting timeless pieces for the modern individual."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/fashionable-long-legs-brunette-model-long-black-cloak-posed-outdoor-winter-day-against-old-grunge-wall_627829-14032.jpg"
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Our Philosophy"
|
|
description={[
|
|
"At MODA, we believe that clothing should be a reflection of your personality.", "We prioritize sustainability and quality in every stitch."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "Essential Tee", price: "$35", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-serious-girl-posing-with-copy-space_23-2148311268.jpg"},
|
|
{
|
|
id: "2", name: "Denim Jacket", price: "$89", variant: "Blue", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-man-dressed-jeans-jacket-fashion-male-isolated-white-wall-studio_158538-26497.jpg"},
|
|
{
|
|
id: "3", name: "Linen Trousers", price: "$65", variant: "Beige", imageSrc: "http://img.b2bpic.net/free-photo/full-length-cheerful-adult-lightskinned-lady-wears-light-brown-suit-home-standing-against-white-wall-concept-enjoying-weekend-vacation_197531-31258.jpg"},
|
|
{
|
|
id: "4", name: "Street Hoodie", price: "$75", variant: "Grey", imageSrc: "http://img.b2bpic.net/free-photo/neighborhood-lifestyle-friends_23-2149746741.jpg"},
|
|
{
|
|
id: "5", name: "Leather Belt", price: "$45", variant: "Tan", imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg"},
|
|
{
|
|
id: "6", name: "Canvas Tote", price: "$25", variant: "Natural", imageSrc: "http://img.b2bpic.net/free-photo/environment-friendly-objects-wooden-background_23-2148289737.jpg"},
|
|
]}
|
|
title="New Arrivals"
|
|
description="Explore our latest collection of essentials."
|
|
/>
|
|
</div>
|
|
|
|
<div id="collection" data-section="collection">
|
|
<ProductCatalog
|
|
layout="section"
|
|
products={[
|
|
{
|
|
id: "7", name: "Summer Hat", price: "$30", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-business-woman_23-2147626285.jpg"},
|
|
{
|
|
id: "8", name: "Silk Scarf", price: "$50", rating: 4,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-urban-environment_23-2147961453.jpg"},
|
|
{
|
|
id: "9", name: "Wool Beanie", price: "$20", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/graceful-woman-wearing-white-blouse-trendy-hat-posing-with-eyes-closed-exotic-plant-front-highway-beautiful-young-woman-standing-with-hand-up-sand-near-road-enjoys-evening_197531-2894.jpg"},
|
|
{
|
|
id: "10", name: "Casual Socks", price: "$15", rating: 4,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/neighborhood-lifestyle-friends_23-2149746740.jpg"},
|
|
{
|
|
id: "11", name: "Cotton Cap", price: "$25", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535704.jpg"},
|
|
{
|
|
id: "12", name: "Wallet", price: "$40", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-carrying-bag-with-flowers_23-2149708093.jpg"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alice G.", role: "Creative", company: "Studio", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-skater-girl-trendy-dressed-sitting-longboard-skatepark_613910-6045.jpg"},
|
|
{
|
|
id: "2", name: "Bob R.", role: "Developer", company: "Tech", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/charming-young-girl-with-blonde-hair-dressed-pink-jacket-holds-skateboard-posing-near-guardrail-against-black-white-sea-coast-background_613910-4609.jpg"},
|
|
{
|
|
id: "3", name: "Charlie D.", role: "Designer", company: "Agency", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830349.jpg"},
|
|
{
|
|
id: "4", name: "Dana S.", role: "Photographer", company: "Freelance", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-hipster-male-man-looking-camera_197531-33424.jpg"},
|
|
{
|
|
id: "5", name: "Evan F.", role: "Architect", company: "Design", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-airport-talking-phone_1303-19687.jpg"},
|
|
]}
|
|
title="What Our Customers Say"
|
|
description="Hear from the MODA community."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "What is your return policy?", content: "You can return items within 30 days of purchase."},
|
|
{
|
|
id: "f2", title: "Do you ship internationally?", content: "Yes, we ship to over 50 countries worldwide."},
|
|
{
|
|
id: "f3", title: "How do I care for my garments?", content: "Please check the care label on each garment for specific instructions."},
|
|
]}
|
|
title="FAQs"
|
|
description="Have questions? We have answers."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Get In Touch"
|
|
description="We'd love to hear from you."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/elevated-view-diary-digital-tablet-pen-keyboard-coffee-cup-desk_23-2148061557.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830380.jpg"
|
|
logoText="MODA"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Sustainability", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Shipping", href: "#"},
|
|
{
|
|
label: "Returns", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|