Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -9,7 +9,7 @@ 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 ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+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";
 
@@ -25,7 +25,7 @@ export default function LandingPage() {
         cardStyle="soft-shadow"
         primaryButtonStyle="shadow"
         secondaryButtonStyle="layered"
-        headingFontWeight="semibold"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -66,19 +66,8 @@ export default function LandingPage() {
       imageAlt="Luxury Rolex-style Watch"
       mediaAnimation="slide-up"
       fixedMediaHeight={true}
-      avatars={[
+      avatars={[]}
-        {
+      avatarText=""
-          src: "http://img.b2bpic.net/free-photo/young-man-checking-time-his-watch-against-black-background_23-2147937487.jpg",          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",          alt: "Happy customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-concentrated-young-man_171337-17412.jpg",          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",          alt: "Distinguished collector"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-schooler-teenage-boy-eyeglasses-dressed-stylish-jacket_613910-11986.jpg",          alt: "Premium buyer"},
-      ]}
-      avatarText="Trusted by discerning collectors worldwide."
       marqueeItems={[
         {
           type: "text-icon",          text: "Precision Engineering",          icon: Cog,
@@ -105,36 +94,28 @@ export default function LandingPage() {
   </div>
 
   <div id="collection" data-section="collection">
-      <ProductCardTwo
+      <ProductCardThree
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
+      gridVariant="one-large-right-three-stacked-left"
       useInvertedBackground={false}
       products={[
         {
-          id: "watch-1",          brand: "Premier Time",          name: "Chronos Black Dial",          price: "$12,500",          rating: 5,
+          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"},
-          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",          brand: "Premier Time",          name: "Veridian Green Dial",          price: "$12,800",          rating: 5,
+          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"},
-          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",          brand: "Premier Time",          name: "Oceanic Blue Dial",          price: "$12,700",          rating: 5,
+          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"},
-          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",          brand: "Premier Time",          name: "Lumina White Dial",          price: "$12,600",          rating: 5,
+          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"},
-          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",          brand: "Premier Time",          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",          brand: "Premier Time",          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="Exquisite Collection"
-      description="Each timepiece in our curated collection embodies exceptional craftsmanship and timeless design, reflecting an unparalleled legacy of horological artistry."
+      description="A curated selection of mechanical masterpieces, where precision engineering meets timeless design."
       className="py-20 lg:py-32"
-      cardClassName="shadow-lg rounded-xl"
+      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-bold"
+      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>
 
@@ -163,33 +144,40 @@ export default function LandingPage() {
 
   <div id="authenticity" data-section="authenticity">
       <MetricCardThree
-      animationType="blur-reveal"
+      animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
         {
           id: "m1",          icon: ShieldCheck,
-          title: "Authentic Watches",          value: "100%"},
+          title: "Authentic",          value: "100% Verified"},
         {
-          id: "m2",          icon: ShieldCheck,
+          id: "m2",          icon: Cog,
-          title: "Professional Inspection",          value: "Certified"},
+          title: "Expert Certified",          value: "Precision Inspection"},
         {
           id: "m3",          icon: Lock,
           title: "Secure Purchase",          value: "Guaranteed"},
         {
           id: "m4",          icon: User,
-          title: "Personal Consultation",          value: "Expert Guidance"},
+          title: "Personalized",          value: "Concierge Service"},
         {
           id: "m5",          icon: Award,
-          title: "Warranty & Service",          value: "Comprehensive"},
+          title: "Comprehensive",          value: "Warranty & Care"},
       ]}
-      title="Assured Authenticity & Trust"
+      buttons={[
-      description="Every watch we offer is backed by rigorous verification, ensuring your complete confidence in every purchase."
+        {
+          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-10 shadow-lg rounded-xl"
+      cardClassName="p-6 lg:p-8 rounded-2xl bg-card border border-border transition-all duration-300 hover:shadow-xl"
-      iconClassName="text-accent h-10 w-10"
+      iconClassName="text-primary-cta h-10 w-10 mb-4"
-      metricTitleClassName="text-xl font-semibold"
+      metricTitleClassName="text-lg font-semibold tracking-tight"
-      valueClassName="text-4xl lg:text-5xl font-bold"
+      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>
 

src/app/styles/variables.css

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