Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
2026-06-09 22:31:43 +00:00
3 changed files with 107 additions and 253 deletions

View File

@@ -19,10 +19,10 @@ export default function LandingPage() {
defaultButtonVariant="directional-hover" defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight" defaultTextAnimation="background-highlight"
borderRadius="rounded" borderRadius="rounded"
contentWidth="small" contentWidth="medium"
sizing="largeSmallSizeMediumTitles" sizing="largeSizeMediumTitles"
background="floatingGradient" background="none"
cardStyle="glass-elevated" cardStyle="soft-shadow"
primaryButtonStyle="shadow" primaryButtonStyle="shadow"
secondaryButtonStyle="layered" secondaryButtonStyle="layered"
headingFontWeight="semibold" headingFontWeight="semibold"
@@ -32,25 +32,15 @@ export default function LandingPage() {
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "#home"},
id: "#home",
},
{ {
name: "Collection", name: "Collection", id: "#collection"},
id: "#collection",
},
{ {
name: "About", name: "About", id: "#about"},
id: "#about",
},
{ {
name: "Authenticity", name: "Authenticity", id: "#authenticity"},
id: "#authenticity",
},
{ {
name: "Contact", name: "Contact", id: "#contact"},
id: "#contact",
},
]} ]}
logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-business-opening-hours-illustration_23-2148859744.jpg" logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-business-opening-hours-illustration_23-2148859744.jpg"
logoAlt="Watch Center Logo" logoAlt="Watch Center Logo"
@@ -60,21 +50,17 @@ export default function LandingPage() {
<div id="home" data-section="home"> <div id="home" data-section="home">
<HeroSplit <HeroSplit
className="py-20 lg:py-32"
background={{ background={{
variant: "plain", variant: "plain"}}
}}
imagePosition="right" imagePosition="right"
title="Luxury Timepieces, Crafted for Presence" title="Luxury Timepieces, Crafted for Presence"
description="Discover premium watches with timeless design, authentic elegance, and a showroom-level buying experience." description="Discover premium watches with timeless design, authentic elegance, and a showroom-level buying experience."
buttons={[ buttons={[
{ {
text: "Explore Collection", text: "Explore Collection", href: "#collection"},
href: "#collection",
},
{ {
text: "Visit Showroom", text: "Visit Showroom", href: "#contact"},
href: "#contact",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/closeup-watch_53876-32028.jpg" imageSrc="http://img.b2bpic.net/free-photo/closeup-watch_53876-32028.jpg"
imageAlt="Luxury Rolex-style Watch" imageAlt="Luxury Rolex-style Watch"
@@ -82,64 +68,39 @@ export default function LandingPage() {
fixedMediaHeight={true} fixedMediaHeight={true}
avatars={[ avatars={[
{ {
src: "http://img.b2bpic.net/free-photo/young-man-checking-time-his-watch-against-black-background_23-2147937487.jpg", src: "http://img.b2bpic.net/free-photo/young-man-checking-time-his-watch-against-black-background_23-2147937487.jpg", alt: "Satisfied client"},
alt: "Satisfied client",
},
{ {
src: "http://img.b2bpic.net/free-photo/moody-thoughtful-black-young-model-wearing-blank-black-t-shirt-isolated-white_346278-1013.jpg", src: "http://img.b2bpic.net/free-photo/moody-thoughtful-black-young-model-wearing-blank-black-t-shirt-isolated-white_346278-1013.jpg", alt: "Happy customer"},
alt: "Happy customer",
},
{ {
src: "http://img.b2bpic.net/free-photo/portrait-concentrated-young-man_171337-17412.jpg", src: "http://img.b2bpic.net/free-photo/portrait-concentrated-young-man_171337-17412.jpg", alt: "Luxury watch owner"},
alt: "Luxury watch owner",
},
{ {
src: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-black-suit_158538-11494.jpg", src: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-black-suit_158538-11494.jpg", alt: "Distinguished collector"},
alt: "Distinguished collector",
},
{ {
src: "http://img.b2bpic.net/free-photo/portrait-schooler-teenage-boy-eyeglasses-dressed-stylish-jacket_613910-11986.jpg", src: "http://img.b2bpic.net/free-photo/portrait-schooler-teenage-boy-eyeglasses-dressed-stylish-jacket_613910-11986.jpg", alt: "Premium buyer"},
alt: "Premium buyer",
},
]} ]}
avatarText="Trusted by discerning collectors worldwide." avatarText="Trusted by discerning collectors worldwide."
marqueeItems={[ marqueeItems={[
{ {
type: "text-icon", type: "text-icon", text: "Precision Engineering", icon: Cog,
text: "Precision Engineering",
icon: Cog,
}, },
{ {
type: "image", 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"},
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: "text-icon", type: "image", src: "http://img.b2bpic.net/free-photo/square-clock-outdoors-still-life_23-2150436125.jpg", alt: "Circular clock outdoors still life"},
text: "Timeless Design", {
icon: Sparkles, type: "text-icon", text: "Exclusive Collection", icon: Crown,
}, },
{ {
type: "image", 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"},
src: "http://img.b2bpic.net/free-photo/square-clock-outdoors-still-life_23-2150436125.jpg",
alt: "Circular clock outdoors still life",
},
{ {
type: "text-icon", type: "text-icon", text: "Certified Authenticity", icon: ShieldCheck,
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>
@@ -151,68 +112,29 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={[
{ {
id: "watch-1", id: "watch-1", brand: "Premier Time", name: "Chronos Black Dial", price: "$12,500", rating: 5,
brand: "Premier Time", reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/close-up-black-smartwatch_23-2147797005.jpg", imageAlt: "Luxury watch with black dial"},
name: "Chronos Black Dial",
price: "$12,500",
rating: 5,
reviewCount: "24",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-black-smartwatch_23-2147797005.jpg",
imageAlt: "Luxury watch with black dial",
},
{ {
id: "watch-2", id: "watch-2", brand: "Premier Time", name: "Veridian Green Dial", price: "$12,800", rating: 5,
brand: "Premier Time", reviewCount: "19", imageSrc: "http://img.b2bpic.net/free-photo/white-clock-white-wall-interior_169016-49298.jpg", imageAlt: "Luxury watch with green dial"},
name: "Veridian Green Dial",
price: "$12,800",
rating: 5,
reviewCount: "19",
imageSrc: "http://img.b2bpic.net/free-photo/white-clock-white-wall-interior_169016-49298.jpg",
imageAlt: "Luxury watch with green dial",
},
{ {
id: "watch-3", id: "watch-3", brand: "Premier Time", name: "Oceanic Blue Dial", price: "$12,700", rating: 5,
brand: "Premier Time", reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/modern-black-watch-wrist-man-sitting-car_181624-58251.jpg", imageAlt: "Luxury watch with blue dial"},
name: "Oceanic Blue Dial",
price: "$12,700",
rating: 5,
reviewCount: "22",
imageSrc: "http://img.b2bpic.net/free-photo/modern-black-watch-wrist-man-sitting-car_181624-58251.jpg",
imageAlt: "Luxury watch with blue dial",
},
{ {
id: "watch-4", id: "watch-4", brand: "Premier Time", name: "Lumina White Dial", price: "$12,600", rating: 5,
brand: "Premier Time", reviewCount: "21", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-spring-time-change-concept_23-2149318302.jpg", imageAlt: "Luxury watch with white dial"},
name: "Lumina White Dial",
price: "$12,600",
rating: 5,
reviewCount: "21",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-spring-time-change-concept_23-2149318302.jpg",
imageAlt: "Luxury watch with white dial",
},
{ {
id: "watch-5", id: "watch-5", brand: "Premier Time", name: "Ebony Elite", price: "$13,200", rating: 5,
brand: "Premier Time", reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/businessman-hand-pants-pocket_1262-18152.jpg", imageAlt: "Luxury watch with black dial"},
name: "Ebony Elite",
price: "$13,200",
rating: 5,
reviewCount: "15",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-hand-pants-pocket_1262-18152.jpg",
imageAlt: "Luxury watch with black dial",
},
{ {
id: "watch-6", id: "watch-6", brand: "Premier Time", name: "Forest Sentinel", price: "$13,100", rating: 5,
brand: "Premier Time", reviewCount: "17", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-model-dressed-warm-overcoat-posing-studio_158538-11464.jpg", imageAlt: "Luxury watch with green dial"},
name: "Forest Sentinel",
price: "$13,100",
rating: 5,
reviewCount: "17",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-model-dressed-warm-overcoat-posing-studio_158538-11464.jpg",
imageAlt: "Luxury watch with green dial",
},
]} ]}
title="The Collection" title="The Collection"
description="Each timepiece in our curated collection embodies exceptional craftsmanship and timeless design, reflecting an unparalleled legacy of horological artistry." description="Each timepiece in our curated collection embodies exceptional craftsmanship and timeless design, reflecting an unparalleled legacy of horological artistry."
className="py-20 lg:py-32"
cardClassName="shadow-lg rounded-xl"
textBoxTitleClassName="font-bold"
/> />
</div> </div>
@@ -223,82 +145,51 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
id: "f1", 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"},
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", 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"},
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", 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"},
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", 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: "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" title="Our Unrivaled Experience"
description="We are dedicated to providing a luxury journey for every client, from selection to ownership." 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>
<div id="authenticity" data-section="authenticity"> <div id="authenticity" data-section="authenticity">
<MetricCardThree <MetricCardThree
animationType="depth-3d" animationType="blur-reveal"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
metrics={[ metrics={[
{ {
id: "m1", id: "m1", icon: ShieldCheck,
icon: ShieldCheck, title: "Authentic Watches", value: "100%"},
title: "Authentic Watches",
value: "100%",
},
{ {
id: "m2", id: "m2", icon: ShieldCheck,
icon: ShieldCheck, title: "Professional Inspection", value: "Certified"},
title: "Professional Inspection",
value: "Certified",
},
{ {
id: "m3", id: "m3", icon: Lock,
icon: Lock, title: "Secure Purchase", value: "Guaranteed"},
title: "Secure Purchase",
value: "Guaranteed",
},
{ {
id: "m4", id: "m4", icon: User,
icon: User, title: "Personal Consultation", value: "Expert Guidance"},
title: "Personal Consultation",
value: "Expert Guidance",
},
{ {
id: "m5", id: "m5", icon: Award,
icon: Award, title: "Warranty & Service", value: "Comprehensive"},
title: "Warranty & Service",
value: "Comprehensive",
},
]} ]}
title="Assured Authenticity & Trust" title="Assured Authenticity & Trust"
description="Every watch we offer is backed by rigorous verification, ensuring your complete confidence in every purchase." description="Every watch we offer is backed by rigorous verification, ensuring your complete confidence in every purchase."
className="py-20 lg:py-32"
cardClassName="p-6 lg:p-10 shadow-lg rounded-xl"
iconClassName="text-accent h-10 w-10"
metricTitleClassName="text-xl font-semibold"
valueClassName="text-4xl lg:text-5xl font-bold"
/> />
</div> </div>
@@ -308,30 +199,15 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ {
id: "q1", 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."},
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", 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."},
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", 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."},
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", 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."},
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", 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."},
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" 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" imageAlt="Customer service interaction about watches"
@@ -339,6 +215,9 @@ export default function LandingPage() {
title="Your Questions, Answered" title="Your Questions, Answered"
description="Navigate the world of luxury watches with confidence. Find answers to common inquiries about our collection and services." description="Navigate the world of luxury watches with confidence. Find answers to common inquiries about our collection and services."
faqsAnimation="slide-up" faqsAnimation="slide-up"
className="py-20 lg:py-32"
textBoxTitleClassName="font-bold"
faqsContainerClassName="shadow-lg rounded-xl"
/> />
</div> </div>
@@ -347,9 +226,9 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
title="Watch Center: The Art of Horology" title="Watch Center: The Art of Horology"
description={[ 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.", "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."]}
"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>
@@ -357,23 +236,18 @@ export default function LandingPage() {
<ContactText <ContactText
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{
variant: "plain", 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." 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={[ buttons={[
{ {
text: "WhatsApp Us", text: "WhatsApp Us", href: "https://wa.me/972551234567"},
href: "https://wa.me/972551234567",
},
{ {
text: "Call Now", text: "Call Now", href: "tel:+972551234567"},
href: "tel:+972551234567",
},
{ {
text: "Visit Our Showroom", text: "Visit Our Showroom", href: "#"},
href: "#",
},
]} ]}
className="py-20 lg:py-32"
contentClassName="shadow-lg rounded-xl"
/> />
</div> </div>
@@ -384,58 +258,38 @@ export default function LandingPage() {
logoText="Watch Center" logoText="Watch Center"
columns={[ columns={[
{ {
title: "Collection", title: "Collection", items: [
items: [
{ {
label: "All Watches", label: "All Watches", href: "#collection"},
href: "#collection",
},
{ {
label: "New Arrivals", label: "New Arrivals", href: "#"},
href: "#",
},
{ {
label: "Limited Editions", label: "Limited Editions", href: "#"},
href: "#",
},
], ],
}, },
{ {
title: "About Us", title: "About Us", items: [
items: [
{ {
label: "Our Story", label: "Our Story", href: "#about"},
href: "#about",
},
{ {
label: "Authenticity", label: "Authenticity", href: "#authenticity"},
href: "#authenticity",
},
{ {
label: "The Experience", label: "The Experience", href: "#premium-experience"},
href: "#premium-experience",
},
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [
{ {
label: "FAQ", label: "FAQ", href: "#faq"},
href: "#faq",
},
{ {
label: "Contact", label: "Contact", href: "#contact"},
href: "#contact",
},
{ {
label: "Warranty", label: "Warranty", href: "#"},
href: "#",
},
], ],
}, },
]} ]}
copyrightText="© 2024 Watch Center. All rights reserved." copyrightText="© 2024 Watch Center. All rights reserved."
className="pt-20 lg:pt-32"
/> />
</div> </div>
</ReactLenis> </ReactLenis>

View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-inter-tight), sans-serif; font-family: var(--font-inter), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-inter-tight), sans-serif; font-family: var(--font-libre-baskerville), serif;
} }

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #f5f4ef; --background: #f5f4f0;
--card: #dad6cd; --card: #ffffff;
--foreground: #2a2928; --foreground: #1a1a1a;
--primary-cta: #B8860B; --primary-cta: #B8860B;
--primary-cta-text: #f5f4ef; --primary-cta-text: #f5f4f0;
--secondary-cta: #2a2928; --secondary-cta: #f5f4f0;
--secondary-cta-text: #f5f4ef; --secondary-cta-text: #1a1a1a;
--accent: #c6b180; --accent: #d4af37;
--background-accent: #c6b180; --background-accent: #e8e6e1;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);