287 lines
14 KiB
TypeScript
287 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Award, Cog, Crown, Lock, ShieldCheck, Sparkles, User } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "Collection", id: "#collection"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Authenticity", id: "#authenticity"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-business-opening-hours-illustration_23-2148859744.jpg"
|
|
logoAlt="Watch Center Logo"
|
|
brandName="Watch Center"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplit
|
|
className="py-20 lg:py-32"
|
|
background={{
|
|
variant: "plain"}}
|
|
imagePosition="right"
|
|
title="Luxury Timepieces, Crafted for Presence"
|
|
description="Discover premium watches with timeless design, authentic elegance, and a showroom-level buying experience."
|
|
buttons={[
|
|
{
|
|
text: "Explore Collection", href: "#collection"},
|
|
{
|
|
text: "Visit Showroom", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/closeup-watch_53876-32028.jpg"
|
|
imageAlt="Luxury Rolex-style Watch"
|
|
mediaAnimation="slide-up"
|
|
fixedMediaHeight={true}
|
|
avatars={[]}
|
|
avatarText=""
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Precision Engineering", icon: Cog,
|
|
},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/alarm-clock-with-hour-minute-second-hand_23-2147943907.jpg", alt: "Close up on clock with time change"},
|
|
{
|
|
type: "text-icon", text: "Timeless Design", icon: Sparkles,
|
|
},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/square-clock-outdoors-still-life_23-2150436125.jpg", alt: "Circular clock outdoors still life"},
|
|
{
|
|
type: "text-icon", text: "Exclusive Collection", icon: Crown,
|
|
},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/old-white-clock-against-weathered-wall_23-2147943586.jpg", alt: "Close up on clock with time change"},
|
|
{
|
|
type: "text-icon", text: "Certified Authenticity", icon: ShieldCheck,
|
|
},
|
|
]}
|
|
titleClassName="font-bold"
|
|
descriptionClassName="text-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="collection" data-section="collection">
|
|
<ProductCardThree
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
gridVariant="one-large-right-three-stacked-left"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "watch-1", name: "Chronos Black Dial", price: "$12,500", imageSrc: "https://images.unsplash.com/photo-1616010078749-0d19f9d7c2a7?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Luxury watch with black dial"},
|
|
{
|
|
id: "watch-2", name: "Oceanic Blue Dial", price: "$12,700", imageSrc: "https://images.unsplash.com/photo-1629197943486-5d070b1e4c33?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Luxury watch with blue dial"},
|
|
{
|
|
id: "watch-3", name: "Veridian Green Dial", price: "$12,800", imageSrc: "https://images.unsplash.com/photo-1678841796791-039c3e4c4c23?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Luxury watch with green dial"},
|
|
{
|
|
id: "watch-4", name: "Lumina White Dial", price: "$12,600", imageSrc: "https://images.unsplash.com/photo-1621607507641-fdfd31b34c20?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", imageAlt: "Luxury watch with white dial"},
|
|
]}
|
|
title="Exquisite Collection"
|
|
description="A curated selection of mechanical masterpieces, where precision engineering meets timeless design."
|
|
className="py-20 lg:py-32"
|
|
cardClassName="rounded-xl p-6 lg:p-8 bg-card shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.01] active:scale-[0.99] border border-gray-200"
|
|
textBoxTitleClassName="font-extrabold text-4xl lg:text-5xl tracking-tight"
|
|
cardNameClassName="text-lg md:text-xl font-semibold mt-2"
|
|
gridClassName="gap-8 lg:gap-12"
|
|
/>
|
|
</div>
|
|
|
|
<div id="premium-experience" data-section="premium-experience">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", title: "Carefully Selected Watches", description: "Each timepiece is hand-picked for its exceptional heritage, craftsmanship, and enduring value.", tag: "Curated Excellence", imageSrc: "http://img.b2bpic.net/free-photo/craftswoman-working-workshop_107420-65252.jpg", imageAlt: "Watchmaker carefully selecting a watch"},
|
|
{
|
|
id: "f2", title: "Premium Showroom Experience", description: "Visit our exquisite showroom for a private viewing, where luxury meets unparalleled personal service.", tag: "Exclusive Access", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-colleagues-chatting-work_23-2149622893.jpg", imageAlt: "Luxury watch showroom interior"},
|
|
{
|
|
id: "f3", title: "Personalized Service", description: "Our experts offer bespoke advice, ensuring you find the perfect watch that resonates with your unique style.", tag: "Dedicated Expertise", imageSrc: "http://img.b2bpic.net/free-photo/married-elderly-couple-signing-marriage-certificate_53876-13392.jpg", imageAlt: "Personal consultation with a watch expert"},
|
|
{
|
|
id: "f4", title: "Elegant Buying Process", description: "Experience a seamless and sophisticated acquisition process, designed for your utmost convenience and discretion.", tag: "Effortless Acquisition", imageSrc: "http://img.b2bpic.net/free-photo/metal-pieces-close-up-background_23-2148882603.jpg", imageAlt: "Elegant watch transaction"},
|
|
]}
|
|
title="Our Unrivaled Experience"
|
|
description="We are dedicated to providing a luxury journey for every client, from selection to ownership."
|
|
className="py-20 lg:py-32"
|
|
itemClassName="shadow-lg rounded-xl"
|
|
cardTitleClassName="font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="authenticity" data-section="authenticity">
|
|
<MetricCardThree
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: ShieldCheck,
|
|
title: "Authentic", value: "100% Verified"},
|
|
{
|
|
id: "m2", icon: Cog,
|
|
title: "Expert Certified", value: "Precision Inspection"},
|
|
{
|
|
id: "m3", icon: Lock,
|
|
title: "Secure Purchase", value: "Guaranteed"},
|
|
{
|
|
id: "m4", icon: User,
|
|
title: "Personalized", value: "Concierge Service"},
|
|
{
|
|
id: "m5", icon: Award,
|
|
title: "Comprehensive", value: "Warranty & Care"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore Our Collection", href: "#collection"
|
|
}
|
|
]}
|
|
title="Assured Trust & Excellence"
|
|
description="Every timepiece in our collection undergoes stringent verification and is backed by our commitment to unparalleled quality and service."
|
|
className="py-20 lg:py-32"
|
|
cardClassName="p-6 lg:p-8 rounded-2xl bg-card border border-border transition-all duration-300 hover:shadow-xl"
|
|
iconClassName="text-primary-cta h-10 w-10 mb-4"
|
|
metricTitleClassName="text-lg font-semibold tracking-tight"
|
|
valueClassName="text-3xl lg:text-4xl font-extrabold tracking-tight mt-1"
|
|
textBoxTitleClassName="font-extrabold text-4xl lg:text-5xl tracking-tight"
|
|
textBoxDescriptionClassName="text-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "How do you ensure authenticity?", content: "Every watch undergoes a rigorous multi-point inspection by certified horologists and comes with official documentation guaranteeing its authenticity."},
|
|
{
|
|
id: "q2", title: "Do you offer international shipping?", content: "Yes, we provide secure and insured international shipping to most countries, ensuring your timepiece arrives safely and promptly."},
|
|
{
|
|
id: "q3", title: "Can I trade in my old watch?", content: "We offer a comprehensive trade-in program. Our experts will appraise your current timepiece to provide a fair market value towards a new acquisition."},
|
|
{
|
|
id: "q4", title: "What is your warranty policy?", content: "All new watches come with the manufacturer's international warranty. Pre-owned watches are backed by our in-house 12-month guarantee."},
|
|
{
|
|
id: "q5", title: "Do you offer financing options?", content: "We partner with selected financial institutions to offer flexible financing solutions tailored to your needs. Please inquire with our sales team for details."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/salesperson-helps-customer-fasten-gorgeous-bracelet-her-partner-prepares-pay-purchase-phone-using-nfc_166373-8870.jpg"
|
|
imageAlt="Customer service interaction about watches"
|
|
mediaAnimation="opacity"
|
|
title="Your Questions, Answered"
|
|
description="Navigate the world of luxury watches with confidence. Find answers to common inquiries about our collection and services."
|
|
faqsAnimation="slide-up"
|
|
className="py-20 lg:py-32"
|
|
textBoxTitleClassName="font-bold"
|
|
faqsContainerClassName="shadow-lg rounded-xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Watch Center: The Art of Horology"
|
|
description={[
|
|
"At Watch Center, we believe a watch is more than an accessory—it is a statement of presence, style, and status. We curate an exquisite collection for individuals who appreciate the intricate artistry and profound legacy of fine timepieces.", "As Israel's premier luxury watch boutique, we offer an unparalleled experience, blending expert guidance with an opulent showroom atmosphere. Discover your next heirloom and become part of a tradition that transcends time."]}
|
|
className="py-20 lg:py-32"
|
|
titleClassName="font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
text="Connect with our experts today. Whether you seek a rare timepiece, personalized consultation, or simply wish to experience our showroom, we are here to assist you."
|
|
buttons={[
|
|
{
|
|
text: "WhatsApp Us", href: "https://wa.me/972551234567"},
|
|
{
|
|
text: "Call Now", href: "tel:+972551234567"},
|
|
{
|
|
text: "Visit Our Showroom", href: "#"},
|
|
]}
|
|
className="py-20 lg:py-32"
|
|
contentClassName="shadow-lg rounded-xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241140.jpg"
|
|
imageAlt="Abstract luxury watch gears"
|
|
logoText="Watch Center"
|
|
columns={[
|
|
{
|
|
title: "Collection", items: [
|
|
{
|
|
label: "All Watches", href: "#collection"},
|
|
{
|
|
label: "New Arrivals", href: "#"},
|
|
{
|
|
label: "Limited Editions", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "About Us", items: [
|
|
{
|
|
label: "Our Story", href: "#about"},
|
|
{
|
|
label: "Authenticity", href: "#authenticity"},
|
|
{
|
|
label: "The Experience", href: "#premium-experience"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
{
|
|
label: "Warranty", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Watch Center. All rights reserved."
|
|
className="pt-20 lg:pt-32"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|