Merge version_4 into main

Merge version_4 into main

src/app/contact/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="mediumSizeLargeTitles"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Catalog", id: "/#catalog" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Chronos Luxury"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Inquiry"
+            title="Contact Us"
+            description="Reach out to our global distribution team for wholesale inquiries."
+            mediaAnimation="slide-up"
+            imageSrc="http://img.b2bpic.net/free-photo/clockwork_53876-33673.jpg?_wi=2"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Chronos Luxury"
+            columns={[
+              { title: "Company", items: [{ label: "Home", href: "/" }, { label: "About", href: "/#about" }, { label: "Contact", href: "/contact" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
@@ -29,56 +29,27 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Catalog",          id: "catalog"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Catalog", id: "catalog" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Chronos Luxury"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboard
-      background={{
-        variant: "radial-gradient"}}
+      <HeroBillboardGallery
+      background={{ variant: "radial-gradient" }}
       title="Precision Timepieces. Distributed Globally."
       description="India's premier wholesale supplier of luxury watches. Delivering heritage, precision, and global export excellence."
-      buttons={[
-        {
-          text: "Partner With Us",          href: "#contact"},
+      buttons={[{ text: "Partner With Us", href: "/contact" }]}
+      mediaItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-rendering-steel-object_23-2151897644.jpg", imageAlt: "Luxury 3D Timepiece" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/pensive-bearded-man-dark-suit-is-checking-what-time-is-now-dark-photo-studio_613910-12654.jpg", imageAlt: "Bearded man" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/grayscale-closeup-shot-person-wearing-wristwatch_181624-3953.jpg", imageAlt: "Grayscale wristwatch" }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/beautiful-rendering-steel-object_23-2151897644.jpg"
-      imageAlt="Luxury 3D Timepiece"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/pensive-bearded-man-dark-suit-is-checking-what-time-is-now-dark-photo-studio_613910-12654.jpg",          alt: "Pensive bearded man"},
-        {
-          src: "http://img.b2bpic.net/free-photo/grayscale-closeup-shot-person-wearing-wristwatch_181624-3953.jpg",          alt: "Grayscale wristwatch"},
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-shot-hand-watch-with-bstrap-reflective-surface_181624-58668.jpg",          alt: "Closeup watch"},
-        {
-          src: "http://img.b2bpic.net/free-photo/cropped-image-young-afro-american-man-looking-watch_171337-9261.jpg",          alt: "Young man checking watch"},
-        {
-          src: "http://img.b2bpic.net/free-photo/stylish-man-looking-his-wristwatch_1153-447.jpg",          alt: "Stylish man looking at watch"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Precision"},
-        {
-          type: "text",          text: "Heritage"},
-        {
-          type: "text",          text: "Quality"},
-        {
-          type: "text",          text: "Integrity"},
-        {
-          type: "text",          text: "Global"},
-      ]}
     />
   </div>
 
@@ -100,18 +71,10 @@ export default function LandingPage() {
       textboxLayout="inline-image"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Automatics",          description: "The pinnacle of self-winding mechanical artistry.",          imageSrc: "http://img.b2bpic.net/free-photo/clockwork_53876-33673.jpg?_wi=1",          buttonIcon: ArrowRight,
-        },
-        {
-          title: "Chronographs",          description: "Precision performance for the modern professional.",          imageSrc: "http://img.b2bpic.net/free-photo/crop-man-reading-magazine_23-2147793091.jpg",          buttonIcon: ArrowRight,
-        },
-        {
-          title: "Dress Watches",          description: "Elegance for every formal occasion.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-hands-numbers-hour-marks-black-watch_181624-26818.jpg",          buttonIcon: ArrowRight,
-        },
-        {
-          title: "Limited Editions",          description: "Rare collectibles for the discerning collector.",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-hand-pants-pocket_1262-18152.jpg",          buttonIcon: ArrowRight,
-        },
+        { title: "Automatics", description: "The pinnacle of self-winding mechanical artistry.", imageSrc: "http://img.b2bpic.net/free-photo/clockwork_53876-33673.jpg?_wi=1", buttonIcon: ArrowRight },
+        { title: "Chronographs", description: "Precision performance for the modern professional.", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-reading-magazine_23-2147793091.jpg", buttonIcon: ArrowRight },
+        { title: "Dress Watches", description: "Elegance for every formal occasion.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-hands-numbers-hour-marks-black-watch_181624-26818.jpg", buttonIcon: ArrowRight },
+        { title: "Limited Editions", description: "Rare collectibles for the discerning collector.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-hand-pants-pocket_1262-18152.jpg", buttonIcon: ArrowRight },
       ]}
       title="Exquisite Collections"
       description="Explore our curated portfolio of global luxury timepieces, categorized by craftsmanship and movement."
@@ -124,21 +87,9 @@ export default function LandingPage() {
       textboxLayout="split-description"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",          name: "Arjun Mehta",          handle: "Boutique Owner",          testimonial: "Unmatched reliability and premium catalog depth.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924141.jpg"},
-        {
-          id: "2",          name: "Sarah Jenkins",          handle: "Luxury Retailer",          testimonial: "The best logistics for international export.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg"},
-        {
-          id: "3",          name: "Hiroshi Tanaka",          handle: "Watch Curator",          testimonial: "Exquisite curation, always ahead of the trends.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portriat-beautiful-business-woman-standing_23-2148317282.jpg"},
-        {
-          id: "4",          name: "Anita Rao",          handle: "Retail Partner",          testimonial: "Professional, efficient, and truly luxury-focused.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg"},
-        {
-          id: "5",          name: "Vikram Seth",          handle: "Distributor",          testimonial: "Reliable partner for our global operations.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pensive-charming-man_171337-17432.jpg"},
+        { id: "1", name: "Arjun Mehta", handle: "Boutique Owner", testimonial: "Unmatched reliability and premium catalog depth.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924141.jpg" },
+        { id: "2", name: "Sarah Jenkins", handle: "Luxury Retailer", testimonial: "The best logistics for international export.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg" },
+        { id: "3", name: "Hiroshi Tanaka", handle: "Watch Curator", testimonial: "Exquisite curation, always ahead of the trends.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portriat-beautiful-business-woman-standing_23-2148317282.jpg" },
       ]}
       showRating={true}
       title="Trusted by Global Retailers"
@@ -149,8 +100,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={true}
-      background={{
-        variant: "plain"}}
+      background={{ variant: "plain" }}
       tag="Inquiry"
       title="Partner With Our Distribution Network"
       description="Ready to expand your portfolio with our premium timepieces? Fill out the form below for wholesale and global export inquiries."
@@ -166,28 +116,12 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Chronos Luxury"
       columns={[
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Catalog",              href: "#catalog"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
-          ],
-        },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Catalog", href: "#catalog" }, { label: "Contact", href: "/contact" }] },
+        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #121212;
+  --background: #000000;
+  --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #d4af37;
+  --primary-cta: #cee7ff;
   --primary-cta-text: #000000;
-  --secondary-cta: #e5e5e5;
-  --secondary-cta-text: #000000;
-  --accent: #4a4a4a;
-  --background-accent: #1a1a1a;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #CEE7FF;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);