Switch to version 1: modified src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -3,129 +3,334 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import { Coffee, Target, Users, MapPin } from "lucide-react";
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TextAbout from '@/components/sections/about/TextAbout';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="background-highlight"
-        borderRadius="pill"
-        contentWidth="mediumLarge"
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
         sizing="largeSizeMediumTitles"
-        background="floatingGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="extrabold"
+        background="aurora"
+        cardStyle="inset"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarStyleCentered
-            navItems={[
-              { name: "About", id: "#about" },
-              { name: "Features", id: "#features" },
-              { name: "Menu", id: "#menu" },
-              { name: "Contact", id: "#contact" },
-            ]}
-            brandName="KACJ Coffee"
-          />
-        </div>
+  <div id="nav" data-section="nav">
+      <NavbarStyleApple
+      navItems={[
+        {
+          name: "About",
+          id: "#about",
+        },
+        {
+          name: "Features",
+          id: "#features",
+        },
+        {
+          name: "Menu",
+          id: "#menu",
+        },
+        {
+          name: "Contact",
+          id: "#contact",
+        },
+      ]}
+      brandName="KACJ Coffee"
+    />
+  </div>
 
-        <div id="hero" data-section="hero">
-          <HeroSplitDualMedia
-            background={{ variant: "sparkles-gradient" }}
-            title="Where Coffee Becomes an Art Form"
-            description="Discover the perfect harmony of ethically sourced beans, precision roasting, and handcrafted sourdough. Your daily ritual, elevated."
-            tag="JB's Premier Specialty Roaster"
-            rating={4.8}
-            ratingText="4.8 Stars from 500+ Reviews"
-            mediaItems={[
-                { imageSrc: "http://img.b2bpic.net/free-photo/front-view-sliced-bread-with-brown-sugar-cubes_23-2148695488.jpg" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg" }
-            ]}
-            buttons={[{ text: "Explore Our Menu", href: "#menu" }]}
-          />
-        </div>
+  <div id="hero" data-section="hero">
+      <HeroSplitKpi
+      background={{
+        variant: "plain",
+      }}
+      title="Crafted with Intention, Roasted with Passion"
+      description="Single-origin beans roasted in-house, fresh sourdough baked daily, and signature Dirty Lattes that have earned a 4.8-star reputation across Johor Bahru and Singapore. Every detail — from the silkiness of our milk to the crunch of our pastry — is a reflection of our commitment to honest, exceptional coffee and artisan bakes."
+      kpis={[
+        {
+          value: "4.8",
+          label: "Customer Rating",
+        },
+        {
+          value: "100%",
+          label: "House Roasted",
+        },
+        {
+          value: "Daily",
+          label: "Fresh Bakes",
+        },
+      ]}
+      enableKpiAnimation={true}
+      buttons={[
+        {
+          text: "Visit Us",
+          href: "#contact",
+        },
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/front-view-sliced-bread-with-brown-sugar-cubes_23-2148695488.jpg"
+      mediaAnimation="slide-up"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg",
+          alt: "Customer",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg",
+          alt: "Customer",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg",
+          alt: "Customer",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg",
+          alt: "Customer",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg",
+          alt: "Customer",
+        },
+      ]}
+      avatarText="Trusted by thousands of coffee lovers"
+      marqueeItems={[
+        {
+          type: "text",
+          text: "Single Origin",
+        },
+        {
+          type: "text",
+          text: "Artisan Sourdough",
+        },
+        {
+          type: "text",
+          text: "Roasted Locally",
+        },
+        {
+          type: "text",
+          text: "JB Best Coffee",
+        },
+        {
+          type: "text",
+          text: "Fresh Daily",
+        },
+      ]}
+    />
+  </div>
 
-        <div id="about" data-section="about">
-          <MetricSplitMediaAbout
-            title="Our Craft, Your Morning Ritual"
-            description="We don't just brew coffee; we curate an experience. From sourcing micro-lot beans to baking fresh sourdough daily, our passion is in every detail."
-            metrics={[
-              { value: "500+", title: "Reviews" },
-              { value: "100%", title: "Roasted In-House" },
-              { value: "Daily", title: "Fresh Bakes" }
-            ]}
-            imageSrc="http://img.b2bpic.net/free-photo/sliced-bun-cutting-board-high-angle_23-2148229098.jpg"
-          />
-        </div>
+  <div id="about" data-section="about">
+      <TextAbout
+      useInvertedBackground={true}
+      title="The Art of the Craft"
+      buttons={[
+        {
+          text: "Our Roasting Method",
+          href: "#features",
+        },
+      ]}
+    />
+  </div>
 
-        <div id="features" data-section="features">
-          <FeatureCardTen
-            title="Why KACJ Stands Out"
-            textboxLayout="split"
-            animationType="slide-up"
-            features={[
-              {
-                title: "Single-Origin Excellence",                description: "Directly sourced micro-lots with traceable stories in every cup.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/coffee-near-typing-person_23-2147768827.jpg" },
-                items: [{ icon: Coffee, text: "Ethically Sourced" }],
-                reverse: false
-              }
-            ]}
-          />
-        </div>
+  <div id="features" data-section="features">
+      <FeatureCardEight
+      textboxLayout="default"
+      useInvertedBackground={false}
+      features={[
+        {
+          title: "Single-Origin Excellence",
+          description: "Ethically sourced beans from the finest micro-lots across the globe.",
+          imageSrc: "http://img.b2bpic.net/free-photo/sliced-bun-cutting-board-high-angle_23-2148229098.jpg?_wi=1",
+        },
+        {
+          title: "Work-Friendly Oasis",
+          description: "Designed for focus, comfort, and productivity with high-speed connectivity.",
+          imageSrc: "http://img.b2bpic.net/free-photo/coffee-near-typing-person_23-2147768827.jpg?_wi=1",
+        },
+        {
+          title: "Weekend Wonders",
+          description: "Curated photogenic experiences that keep explorers coming back for more.",
+          imageSrc: "http://img.b2bpic.net/free-photo/pensive-business-lady_1098-17148.jpg",
+        },
+        {
+          title: "Fresh Baked Daily",
+          description: "Authentic sourdough and pastries made in-house every morning.",
+          imageSrc: "http://img.b2bpic.net/free-photo/sliced-bun-cutting-board-high-angle_23-2148229098.jpg?_wi=2",
+        },
+        {
+          title: "Community Vibe",
+          description: "A warm space where people connect over a shared love for coffee.",
+          imageSrc: "http://img.b2bpic.net/free-photo/coffee-near-typing-person_23-2147768827.jpg?_wi=2",
+        },
+      ]}
+      title="Why KACJ Stands Out"
+      description="Excellence in every cup and every crumb."
+    />
+  </div>
 
-        <div id="menu" data-section="menu">
-          <ProductCardFour
-            title="Artisan Signature Collection"
-            gridVariant="asymmetric-60-wide-40-narrow"
-            animationType="scale-rotate"
-            useInvertedBackground={false}
-            products={[
-              { id: "1", name: "Dirty Latte", price: "RM 16", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg" }
-            ]}
-          />
-        </div>
+  <div id="menu" data-section="menu">
+      <ProductCardOne
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={true}
+      products={[
+        {
+          id: "p1",
+          name: "Dirty Latte",
+          price: "RM 16",
+          imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg?_wi=1",
+        },
+        {
+          id: "p2",
+          name: "Shokupan Sando",
+          price: "RM 22",
+          imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg?_wi=2",
+        },
+        {
+          id: "p3",
+          name: "Artisan Sourdough",
+          price: "RM 18",
+          imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg?_wi=3",
+        },
+        {
+          id: "p4",
+          name: "Single Origin Pour Over",
+          price: "RM 20",
+          imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg?_wi=4",
+        },
+        {
+          id: "p5",
+          name: "Berry Custard Danish",
+          price: "RM 12",
+          imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg?_wi=5",
+        },
+        {
+          id: "p6",
+          name: "House Espresso Blend",
+          price: "RM 45",
+          imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg?_wi=6",
+        },
+      ]}
+      title="Artisan Selections"
+      description="Our current signature lineup."
+    />
+  </div>
 
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive
-            title="Voices of the Community"
-            textboxLayout="split"
-            testimonials={[
-              {
-                id: "1",                name: "Sarah",                date: "2024-05-12",                title: "Exceptional Coffee",                quote: "The best Dirty Latte in Johor Bahru. Truly artisan.",                tag: "Regular",                avatarSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg"
-              }
-            ]}
-          />
-        </div>
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialCardThirteen
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      testimonials={[
+        {
+          id: "1",
+          name: "Sarah",
+          handle: "@sarah_j",
+          testimonial: "The best Dirty Latte I have had in JB, hands down.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg?_wi=1",
+        },
+        {
+          id: "2",
+          name: "Chen",
+          handle: "@chen_coffee",
+          testimonial: "I work here weekly. The WiFi is solid and the pastries are heavenly.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg?_wi=2",
+        },
+        {
+          id: "3",
+          name: "Emily",
+          handle: "@emily_explores",
+          testimonial: "Stopped by on a day trip from Singapore and it was worth the queue!",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg?_wi=3",
+        },
+        {
+          id: "4",
+          name: "David",
+          handle: "@david_coff",
+          testimonial: "Genuine artisan quality that feels rare in JB these days.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg?_wi=4",
+        },
+        {
+          id: "5",
+          name: "Maya",
+          handle: "@maya_eats",
+          testimonial: "So aesthetically pleasing, my feed loved the visit.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg?_wi=5",
+        },
+      ]}
+      showRating={true}
+      title="Voices of the Community"
+      description="Hear what our regulars say about their KACJ experience."
+    />
+  </div>
 
-        <div id="contact" data-section="contact">
-          <ContactCTA
-            tag="Get In Touch"
-            title="Visit Our Roastery"
-            description="Ready to experience the KACJ difference? Come visit our space or drop us a message."
-            buttons={[{ text: "Get Directions", href: "#" }]}
-            background={{ variant: "glowing-orb" }}
-          />
-        </div>
+  <div id="contact" data-section="contact">
+      <ContactCTA
+      useInvertedBackground={true}
+      background={{
+        variant: "plain",
+      }}
+      tag="Visit Us"
+      title="Experience KACJ Today"
+      description="Drop by our JB café for a fresh brew or reach out for inquiries."
+      buttons={[
+        {
+          text: "Get Directions",
+          href: "https://maps.google.com",
+        },
+      ]}
+    />
+  </div>
 
-        <div id="footer" data-section="footer">
-          <FooterBaseReveal
-            logoText="KACJ Coffee"
-            columns={[
-              { title: "Menu", items: [{ label: "Coffees", href: "#" }, { label: "Bakery", href: "#" }] }
-            ]}
-          />
-        </div>
+  <div id="footer" data-section="footer">
+      <FooterBaseCard
+      logoText="KACJ Coffee"
+      columns={[
+        {
+          title: "Navigation",
+          items: [
+            {
+              label: "About",
+              href: "#about",
+            },
+            {
+              label: "Menu",
+              href: "#menu",
+            },
+          ],
+        },
+        {
+          title: "Legal",
+          items: [
+            {
+              label: "Privacy Policy",
+              href: "#",
+            },
+            {
+              label: "Terms of Service",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+    />
+  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #020617;
-  --card: #0f172a;
-  --foreground: #e2e8f0;
-  --primary-cta: #c4d8f9;
+  --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #041633;
+  --secondary-cta: #ecebea;
   --secondary-cta-text: #2a2928;
-  --accent: #2d30f3;
-  --background-accent: #1d4ed8;
+  --accent: #ffffff;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);