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

Merge version_2 into main

src/app/page.tsx

@@ -3,128 +3,333 @@
 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 FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import TextAbout from '@/components/sections/about/TextAbout';
-import { Coffee, Target, Users, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
+        defaultButtonVariant="text-shift"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="rounded"
-        contentWidth="mediumLarge"
+        contentWidth="smallMedium"
         sizing="largeSizeMediumTitles"
-        background="floatingGradient"
+        background="aurora"
-        cardStyle="glass-elevated"
+        cardStyle="inset"
-        primaryButtonStyle="primary-glow"
+        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="solid"
-        headingFontWeight="extrabold"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav">
-          <NavbarStyleCentered
+      <NavbarStyleApple
-            navItems={[
+      navItems={[
-              { name: "About", id: "#about" },
+        {
-              { name: "Features", id: "#features" },
+          name: "About",
-              { name: "Menu", id: "#menu" },
+          id: "#about",
-              { name: "Contact", id: "#contact" },
+        },
-            ]}
+        {
-            brandName="KACJ Coffee"
+          name: "Features",
-          />
+          id: "#features",
-        </div>
+        },
+        {
+          name: "Menu",
+          id: "#menu",
+        },
+        {
+          name: "Contact",
+          id: "#contact",
+        },
+      ]}
+      brandName="KACJ Coffee"
+    />
+  </div>
 
-        <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero">
-          <HeroSplitDualMedia
+      <HeroSplitKpi
-            background={{ variant: "sparkles-gradient" }}
+      background={{
-            title="Where Coffee Becomes an Art Form"
+        variant: "plain",
-            description="Discover the perfect harmony of ethically sourced beans, precision roasting, and handcrafted sourdough. Your daily ritual, elevated."
+      }}
-            tag="JB's Premier Specialty Roaster"
+      title="Crafted with Intention, Roasted with Passion"
-            rating={4.8}
+      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."
-            ratingText="4.8 Stars from 500+ Reviews"
+      kpis={[
-            mediaItems={[
+        {
-                { imageSrc: "http://img.b2bpic.net/free-photo/front-view-sliced-bread-with-brown-sugar-cubes_23-2148695488.jpg" },
+          value: "4.8",
-                { imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-cup-coffee-notebook_158595-661.jpg" }
+          label: "Customer Rating",
-            ]}
+        },
-            buttons={[{ text: "Explore Our Menu", href: "#menu" }]}
+        {
-          />
+          value: "100%",
-        </div>
+          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">
+  <div id="about" data-section="about">
-          <MetricSplitMediaAbout
+      <TextAbout
-            title="Our Craft, Your Morning Ritual"
+      useInvertedBackground={true}
-            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."
+      title="The Art of the Craft"
-            metrics={[
+      buttons={[
-              { value: "500+", title: "Reviews" },
+        {
-              { value: "100%", title: "Roasted In-House" },
+          text: "Our Roasting Method",
-              { value: "Daily", title: "Fresh Bakes" }
+          href: "#features",
-            ]}
+        },
-            imageSrc="http://img.b2bpic.net/free-photo/sliced-bun-cutting-board-high-angle_23-2148229098.jpg"
+      ]}
-          />
+    />
-        </div>
+  </div>
 
-        <div id="features" data-section="features">
+  <div id="features" data-section="features">
-          <FeatureCardTen
+      <FeatureCardEight
-            title="Why KACJ Stands Out"
+      textboxLayout="default"
-            textboxLayout="split"
+      useInvertedBackground={false}
-            animationType="slide-up"
+      features={[
-            features={[
+        {
-              {
+          title: "Single-Origin Excellence",
-                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" },
+          description: "Ethically sourced beans from the finest micro-lots across the globe.",
-                items: [{ icon: Coffee, text: "Ethically Sourced" }],
+          imageSrc: "http://img.b2bpic.net/free-photo/sliced-bun-cutting-board-high-angle_23-2148229098.jpg?_wi=1",
-                reverse: false
+        },
-              }
+        {
-            ]}
+          title: "Work-Friendly Oasis",
-          />
+          description: "Designed for focus, comfort, and productivity with high-speed connectivity.",
-        </div>
+          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">
+  <div id="menu" data-section="menu">
-          <ProductCardFour
+      <ProductCardOne
-            title="Artisan Signature Collection"
+      animationType="slide-up"
-            gridVariant="asymmetric-60-wide-40-narrow"
+      textboxLayout="default"
-            animationType="scale-rotate"
+      gridVariant="three-columns-all-equal-width"
-            useInvertedBackground={false}
+      useInvertedBackground={true}
-            products={[
+      products={[
-              { id: "1", name: "Dirty Latte", price: "RM 16", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/homemade-blackberry-galette_114579-1308.jpg" }
+        {
-            ]}
+          id: "p1",
-          />
+          name: "Dirty Latte",
-        </div>
+          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">
+  <div id="testimonials" data-section="testimonials">
-          <TestimonialCardFive
+      <TestimonialCardThirteen
-            title="Voices of the Community"
+      animationType="slide-up"
-            textboxLayout="split"
+      textboxLayout="default"
-            testimonials={[
+      useInvertedBackground={false}
-              {
+      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"
+        {
-              }
+          id: "1",
-            ]}
+          name: "Sarah",
-          />
+          handle: "@sarah_j",
-        </div>
+          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">
+  <div id="contact" data-section="contact">
-          <ContactCTA
+      <ContactCTA
-            tag="Get In Touch"
+      useInvertedBackground={true}
-            title="Visit Our Roastery"
+      background={{
-            description="Ready to experience the KACJ difference? Come visit our space or drop us a message."
+        variant: "plain",
-            buttons={[{ text: "Get Directions", href: "#" }]}
+      }}
-            background={{ variant: "glowing-orb" }}
+      tag="Visit Us"
-          />
+      title="Experience KACJ Today"
-        </div>
+      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">
+  <div id="footer" data-section="footer">
-          <FooterBaseReveal
+      <FooterBaseCard
-            logoText="KACJ Coffee"
+      logoText="KACJ Coffee"
-            columns={[
+      columns={[
-              { title: "Menu", items: [{ label: "Coffees", href: "#" }, { label: "Bakery", href: "#" }] }
+        {
-            ]}
+          title: "Navigation",
-          />
+          items: [
-        </div>
+            {
+              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;
+  --background: #f5f4ef;
-  --card: #0f172a;
+  --card: #dad6cd;
-  --foreground: #e2e8f0;
+  --foreground: #2a2928;
-  --primary-cta: #c4d8f9;
+  --primary-cta: #2a2928;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #041633;
+  --secondary-cta: #ecebea;
   --secondary-cta-text: #2a2928;
-  --accent: #2d30f3;
+  --accent: #ffffff;
-  --background-accent: #1d4ed8;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);