Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1689ec28e | |||
| d9d690072b | |||
| 55f3853a5b | |||
| 194069bfdb | |||
| 82dfff548c | |||
| e28682da55 | |||
| 40e1824b60 | |||
| 6962e3b5c6 | |||
| 37bbd9aa34 | |||
| d200ea91a2 | |||
| df9a928fff | |||
| 317f5610f1 | |||
| 55a0bb11a2 |
404
src/app/page.tsx
404
src/app/page.tsx
@@ -3,16 +3,15 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
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 } from "lucide-react";
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,22 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Craft",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Craft", id: "about" },
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Zellwears"
|
||||
/>
|
||||
@@ -55,178 +42,35 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
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",
|
||||
imageAlt: "Premium leather jacket",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=1",
|
||||
imageAlt: "Handcrafted wallet",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478945.jpg",
|
||||
imageAlt: "Beautiful blonde woman in blue light",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/student-with-goth-style-school_23-2150576841.jpg",
|
||||
imageAlt: "Student with goth style at school",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186755.jpg",
|
||||
imageAlt: "Close up on engraving art tools",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg",
|
||||
imageAlt: "Handcrafted wallet",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg",
|
||||
imageAlt: "Premium leather jacket",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020777.jpg",
|
||||
imageAlt: "Portrait of beautiful woman posing with a blue jacket",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478935.jpg",
|
||||
imageAlt: "Beautiful blonde woman in blue light",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tailor-sketching-leather-tissue-high-quality-photo_114579-12211.jpg",
|
||||
imageAlt: "Tailor sketching on the leather tissue",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-shoemaker-cutting-leather_171337-12266.jpg",
|
||||
alt: "Shoemaker",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement_23-2148897983.jpg",
|
||||
alt: "Tailoring tool",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186735.jpg",
|
||||
alt: "Art tools",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-hand-cutting-leather_23-2148897980.jpg",
|
||||
alt: "Craftsman hand",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tailoring-items-arrangement-flat-lay_23-2148897982.jpg",
|
||||
alt: "Flat lay tool",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ connoisseurs globally"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jz8fog",
|
||||
alt: "Brand Logo",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/simple-logo-set_53876-94192.jpg",
|
||||
alt: "Brand Logo",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8h70on",
|
||||
alt: "Brand Logo",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8d6a1l",
|
||||
alt: "Brand Logo",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7h6zge",
|
||||
alt: "Brand Logo",
|
||||
},
|
||||
]}
|
||||
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?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186731.jpg?_wi=3" }, { imageSrc: "http://img.b2bpic.net/free-photo/blue-creased-leather-textured-background_53876-129753.jpg?_wi=3" }]}
|
||||
buttons={[{ text: "Shop Collection", href: "#products" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
<MediaAbout
|
||||
tag="Our Essence"
|
||||
title="Legacy in Every Stitch"
|
||||
description="We blend generational leather techniques with contemporary luxury design."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg"
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Heritage of",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg",
|
||||
alt: "Leatherwork detail",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Fine Craftsmanship",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
gridVariant="bento-grid"
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Classic Leather Trench",
|
||||
price: "$1250",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4336.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Everyday Leather Clutch",
|
||||
price: "$350",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hands-with-beautiful-nail-polish-rings-holding-small-black-bag_132075-12203.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Premium Leather Belt",
|
||||
price: "$180",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/morning-groom_1303-11598.jpg",
|
||||
},
|
||||
{ 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."
|
||||
@@ -234,213 +78,71 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
<MetricCardSeven
|
||||
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,
|
||||
},
|
||||
{ id: "m1", value: "15+", title: "Years Experience", items: ["Defining luxury standards."] },
|
||||
{ id: "m2", value: "100%", title: "Genuine Leather", items: ["Sourced ethically."] },
|
||||
{ id: "m3", value: "5k+", title: "Satisfied Clients", items: ["Worldwide delivery."] }
|
||||
]}
|
||||
title="A Standard of Quality"
|
||||
description="Our commitment to excellence reflected in every stitch."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
<TestimonialCardOne
|
||||
testimonials={[]}
|
||||
title="Distinguished Perspectives"
|
||||
description="Our clients share their experience with Zellwears."
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "James Anderson",
|
||||
date: "Oct 2023",
|
||||
title: "CEO",
|
||||
quote: "The leather quality is unmatched.",
|
||||
tag: "Elite",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-handsome-stylish-brunette-man-with-coat-shoulders-intently-looking-camera-outdoor_574295-1313.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-sitting-stair_158595-5482.jpg?_wi=2",
|
||||
imageAlt: "man wearing leather jacket",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah Miller",
|
||||
date: "Sep 2023",
|
||||
title: "Designer",
|
||||
quote: "Sophistication in every stitch.",
|
||||
tag: "Fashion",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/full-length-young-fashionable-caucasian-brunette-woman-with-red-lipstick-wears-black-clothes-glasses-holds-glass-booze-indoors_197531-32093.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-shoemaker-cutting-leather-textile_171337-12260.jpg?_wi=2",
|
||||
imageAlt: "man wearing leather jacket",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Robert Chen",
|
||||
date: "Aug 2023",
|
||||
title: "Architect",
|
||||
quote: "Perfectly structured and elegant.",
|
||||
tag: "Style",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-walking-sunny-day_1303-24613.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-process-leather-bag-leather-workshop_8353-6074.jpg",
|
||||
imageAlt: "man wearing leather jacket",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Elena Rossi",
|
||||
date: "Jul 2023",
|
||||
title: "Business Owner",
|
||||
quote: "A timeless piece of luxury.",
|
||||
tag: "Quality",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-male-cobbler-working-with-leather-textile_171337-12274.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-white-nude-woman-side-view_23-2149428731.jpg?_wi=2",
|
||||
imageAlt: "man wearing leather jacket",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Marcus Thorne",
|
||||
date: "Jun 2023",
|
||||
title: "Editor",
|
||||
quote: "Zellwears never disappoints.",
|
||||
tag: "Luxury",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-black-leather-jacket-standing-against-wall-looking-away_23-2148148137.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/retro-brown-man-leather-bag-bright-colorful-summer-park-hanging-leafes_158538-12266.jpg?_wi=2",
|
||||
imageAlt: "man wearing leather jacket",
|
||||
},
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Hear what our distinguished clients say about Zellwears."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
<FaqSplitMedia
|
||||
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 for all orders.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy for unused items in original condition.",
|
||||
},
|
||||
{ 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." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to your queries about our craftsmanship."
|
||||
faqsAnimation="slide-up"
|
||||
title="Need Clarity?"
|
||||
description="Explore our frequently asked questions for immediate assistance."
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
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}
|
||||
names={[
|
||||
"Vogue",
|
||||
"GQ",
|
||||
"Harper's Bazaar",
|
||||
"Forbes",
|
||||
"Elle",
|
||||
"Drapers",
|
||||
"Wallpaper",
|
||||
]}
|
||||
title="Trusted by Leaders"
|
||||
description="Featured in leading global publications."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Have a bespoke requirement or specific inquiry? Our concierge team is ready to assist."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Concierge",
|
||||
href: "mailto:hello@zellwears.com",
|
||||
},
|
||||
]}
|
||||
text="Our artisans are ready to bring your unique design vision to life."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
<FooterBase
|
||||
logoText="Zellwears"
|
||||
columns={[
|
||||
{
|
||||
title: "Collection",
|
||||
items: [
|
||||
{
|
||||
label: "Jackets",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Wallets",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Accessories",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Concierge",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Catalog", items: [{ label: "Jackets", href: "#" }, { label: "Wallets", href: "#" }] },
|
||||
{ title: "Brand", items: [{ label: "About", href: "#about" }, { label: "Concierge", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user