Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -3,334 +3,129 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-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';
+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";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-shift"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="smallMedium"
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
         sizing="largeSizeMediumTitles"
-        background="aurora"
-        cardStyle="inset"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        background="floatingGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <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="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="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="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="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={true}
-      title="The Art of the Craft"
-      buttons={[
-        {
-          text: "Our Roasting Method",
-          href: "#features",
-        },
-      ]}
-    />
-  </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="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="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="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="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="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="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="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="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="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>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="KACJ Coffee"
+            columns={[
+              { title: "Menu", items: [{ label: "Coffees", href: "#" }, { label: "Bakery", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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