319 lines
9.7 KiB
TypeScript
319 lines
9.7 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="expand-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="small"
|
||
sizing="mediumLargeSizeLargeTitles"
|
||
background="grid"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="medium"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
navItems={[
|
||
{
|
||
name: "Collections",
|
||
id: "#products",
|
||
},
|
||
{
|
||
name: "Our Story",
|
||
id: "#about",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "#contact",
|
||
},
|
||
]}
|
||
brandName="MCKER"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplit
|
||
background={{
|
||
variant: "gradient-bars",
|
||
}}
|
||
title="Timeless Elegance, Crafted for You"
|
||
description="Discover MCKER’s signature collection of fine, artisanal jewelry. Where every piece tells a story of unmatched beauty and precision."
|
||
buttons={[
|
||
{
|
||
text: "Shop Collections",
|
||
href: "#products",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-bride-portrait_624325-3509.jpg"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-woman-bathrobe-drinking-coffee-by-pool_1303-21598.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/business-woman-with-mobile-phone_158595-965.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/closeup-portrait-gorgeous-young-woman-with-big-golden-earrings-using-eye-patches-pensive-european-girl-posing-turban_197531-25905.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/traditional-fashion-beauty-sensual-caucasian-woman-wearing-colorful-shawl-head-accessories-posing-with-hand-shoulder-isolated-gray-background_613910-4502.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-transgender-person-using-make-up-brush_23-2148827031.jpg",
|
||
alt: "Client",
|
||
},
|
||
]}
|
||
avatarText="Trusted by over 5,000+ collectors worldwide"
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "Ethically Sourced",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Handcrafted Excellence",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Timeless Designs",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Global Shipping",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Bespoke Services",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MetricSplitMediaAbout
|
||
useInvertedBackground={false}
|
||
title="The Art of Perfection"
|
||
description="At MCKER, we believe jewelry is a form of art. Every diamond is hand-selected, and every setting is crafted with dedication to excellence."
|
||
metrics={[
|
||
{
|
||
value: "100+",
|
||
title: "Unique Designs",
|
||
},
|
||
{
|
||
value: "20",
|
||
title: "Years Expertise",
|
||
},
|
||
{
|
||
value: "5k+",
|
||
title: "Happy Clients",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/process-working-with-iron-solder-making-new-part-lamp-closeup-photo-shoot_613910-20922.jpg"
|
||
mediaAnimation="blur-reveal"
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1",
|
||
name: "Signature Gold Ring",
|
||
price: "$1,200",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-transparent-glass_23-2150329681.jpg",
|
||
},
|
||
{
|
||
id: "p2",
|
||
name: "Diamond Stud Earrings",
|
||
price: "$2,500",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-aesthetic-golden-earrings-arrangement_23-2149846593.jpg",
|
||
},
|
||
{
|
||
id: "p3",
|
||
name: "Intricate Gold Bracelet",
|
||
price: "$1,800",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409243.jpg",
|
||
},
|
||
{
|
||
id: "p4",
|
||
name: "Classic Chrono Watch",
|
||
price: "$3,200",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring_23-2150329702.jpg",
|
||
},
|
||
{
|
||
id: "p5",
|
||
name: "Dainty Chain Necklace",
|
||
price: "$950",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-female-blue-shirt-wearing-beautiful-necklace-with-nice-pendant_181624-26541.jpg",
|
||
},
|
||
{
|
||
id: "p6",
|
||
name: "Sapphire Pendant",
|
||
price: "$4,100",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/wedding-engagement-rings-hang-stick_8353-706.jpg",
|
||
},
|
||
]}
|
||
title="Signature Collections"
|
||
description="Exquisite treasures designed to last a lifetime."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1",
|
||
name: "Eleanor Vance",
|
||
role: "Collector",
|
||
company: "FineArts",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-bathrobe-drinking-coffee-by-pool_1303-21598.jpg",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "Julian Thorne",
|
||
role: "Architect",
|
||
company: "ThorneDes",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-with-mobile-phone_158595-965.jpg",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "Sophia Moretti",
|
||
role: "Gallery Owner",
|
||
company: "MorettiCo",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-gorgeous-young-woman-with-big-golden-earrings-using-eye-patches-pensive-european-girl-posing-turban_197531-25905.jpg",
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "Adrian Chase",
|
||
role: "Curator",
|
||
company: "ChaseArt",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-fashion-beauty-sensual-caucasian-woman-wearing-colorful-shawl-head-accessories-posing-with-hand-shoulder-isolated-gray-background_613910-4502.jpg",
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "Isabella Rossi",
|
||
role: "Designer",
|
||
company: "RossiStyle",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-transgender-person-using-make-up-brush_23-2148827031.jpg",
|
||
},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "99%",
|
||
label: "Client Satisfaction",
|
||
},
|
||
{
|
||
value: "50+",
|
||
label: "Global Accolades",
|
||
},
|
||
{
|
||
value: "100%",
|
||
label: "Ethically Sourced",
|
||
},
|
||
]}
|
||
title="A Legacy of Trust"
|
||
description="Hear what our discerning clients say about their MCKER experience."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Private Consultation"
|
||
description="Book a personal viewing at our boutique or discuss a bespoke piece with our lead jeweler."
|
||
inputs={[
|
||
{
|
||
name: "name",
|
||
type: "text",
|
||
placeholder: "Your Name",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "email",
|
||
type: "email",
|
||
placeholder: "Email Address",
|
||
required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message",
|
||
placeholder: "How can we assist you?",
|
||
rows: 4,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/grey-eyed-young-woman-white-blouse-looks-into-camera-elegant-blonde-lady-light-shirt-dark-pants-pearl-necklace-poses-restaurant_197531-23180.jpg"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="http://img.b2bpic.net/free-photo/top-view-wedding-envelope-with-engagement-rings_23-2148455268.jpg"
|
||
logoText="MCKER"
|
||
columns={[
|
||
{
|
||
title: "Company",
|
||
items: [
|
||
{
|
||
label: "About Us",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "Contact",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Legal",
|
||
items: [
|
||
{
|
||
label: "Privacy Policy",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Terms of Service",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|