159 lines
7.7 KiB
TypeScript
159 lines
7.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import { Award, Shield, Star, Briefcase } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="noise"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Craft", id: "about" },
|
|
{ name: "Collection", id: "products" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="Zellwears"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Timeless Leather, Crafted for Excellence."
|
|
description="Zellwears delivers uncompromising luxury, blending traditional craftsmanship with modern design for the discerning individual."
|
|
leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1" }]}
|
|
rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg" }]}
|
|
buttons={[{ text: "Shop Collection", href: "#products" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Essence"
|
|
title="Legacy in Every Stitch"
|
|
description="We blend generational leather techniques with contemporary luxury design."
|
|
subdescription="Every piece is a testament to our commitment to quality, durability, and elegance."
|
|
icon={Briefcase}
|
|
imageSrc="http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg"
|
|
useInvertedBackground={true}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", name: "The Executive Jacket", price: "$899", imageSrc: "http://img.b2bpic.net/free-photo/black-white-nude-woman-side-view_23-2149428731.jpg?_wi=1" },
|
|
{ id: "p2", name: "The Signature Handbag", price: "$599", imageSrc: "http://img.b2bpic.net/free-photo/retro-brown-man-leather-bag-bright-colorful-summer-park-hanging-leafes_158538-12266.jpg?_wi=1" },
|
|
{ id: "p3", name: "The Minimalist Wallet", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/business-card-with-birds-wallet_53876-94947.jpg" }
|
|
]}
|
|
title="The Zellwears Collection"
|
|
description="Curated essentials for a lifestyle of sophistication."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
title="Our Impact"
|
|
description="Delivering excellence through dedication."
|
|
metrics={[
|
|
{ id: "m1", value: "15+", title: "Years Experience", description: "Defining luxury standards.", icon: Award },
|
|
{ id: "m2", value: "100%", title: "Genuine Leather", description: "Sourced ethically.", icon: Shield },
|
|
{ id: "m3", value: "5k+", title: "Satisfied Clients", description: "Worldwide delivery.", icon: Star }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
testimonials={[]}
|
|
title="Distinguished Perspectives"
|
|
description="Our clients share their experience with Zellwears."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
faqs={[
|
|
{ id: "f1", title: "What leather do you use?", content: "We source only top-tier full-grain European leather." },
|
|
{ id: "f2", title: "Do you ship worldwide?", content: "Yes, we provide expedited global shipping." },
|
|
{ id: "f3", title: "What is your return policy?", content: "We offer a 30-day return policy for unused items." },
|
|
]}
|
|
sideTitle="Need Clarity?"
|
|
sideDescription="Explore our frequently asked questions for immediate assistance."
|
|
faqsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
names={["Vogue", "GQ", "Forbes", "Elle", "Wallpaper"]}
|
|
title="Industry Recognition"
|
|
description="Featured in global fashion publications."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Inquire About Bespoke Pieces"
|
|
description="Our artisans are ready to bring your unique design vision to life."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Full Name" },
|
|
{ name: "email", type: "email", placeholder: "Email Address" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/tailor-sketching-leather-tissue-high-quality-photo_114579-12211.jpg"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Zellwears"
|
|
columns={[
|
|
{ title: "Catalog", items: [{ label: "Jackets", href: "#" }, { label: "Wallets", href: "#" }] },
|
|
{ title: "Brand", items: [{ label: "About", href: "#about" }, { label: "Concierge", href: "#contact" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |