Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -3,14 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import { Award, Coffee, Facebook, Instagram, Users } from "lucide-react";
 
 export default function LandingPage() {
@@ -31,22 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Menu",
-          id: "#menu",
-        },
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Reviews",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "Menu", id: "#menu" },
+        { name: "About", id: "#about" },
+        { name: "Reviews", id: "#testimonials" },
+        { name: "Contact", id: "#contact" },
       ]}
       brandName="Piccolo Cafe"
     />
@@ -56,14 +44,9 @@ export default function LandingPage() {
       <HeroLogo
       logoText="Piccolo Cafe"
       description="Your artisanal sanctuary in Taman Equine. Where every cup tells a story and every moment feels like home."
-      buttons={[
-        {
-          text: "View Our Menu",
-          href: "#menu",
-        },
-      ]}
+      buttons={[{ text: "View Our Menu", href: "#menu" }]}
       buttonAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-with-people_1162-118.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-with-people_1162-118.jpg?_wi=1"
     />
   </div>
 
@@ -74,42 +57,12 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={true}
       products={[
-        {
-          id: "1",
-          name: "Signature Latte",
-          price: "RM 12.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-making-coffee_23-2150354576.jpg",
-        },
-        {
-          id: "2",
-          name: "Buttery Croissant",
-          price: "RM 8.50",
-          imageSrc: "http://img.b2bpic.net/free-photo/croissants-pan-with-cup-tea-honey-dipper-flat-lay-wooden-kitchen-towel_176474-8195.jpg",
-        },
-        {
-          id: "3",
-          name: "Avocado Toast",
-          price: "RM 18.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/plate-profiteroles-served-with-chocolate-sauce_114579-2339.jpg",
-        },
-        {
-          id: "4",
-          name: "Cold Brew",
-          price: "RM 14.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-pouring-milk-into-coffee-cup_23-2149600729.jpg",
-        },
-        {
-          id: "5",
-          name: "Chicken Club",
-          price: "RM 22.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/fresh-healthy-food-breakfast-lunch-ideas-bread-with-cheese-avocado-greenery_8353-8795.jpg",
-        },
-        {
-          id: "6",
-          name: "Matcha Cheesecake",
-          price: "RM 16.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-delicious-tiramisu-cafe_1303-25266.jpg",
-        },
+        { id: "1", name: "Signature Latte", price: "RM 12.00", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-making-coffee_23-2150354576.jpg" },
+        { id: "2", name: "Buttery Croissant", price: "RM 8.50", imageSrc: "http://img.b2bpic.net/croissants-pan-with-cup-tea-honey-dipper-flat-lay-wooden-kitchen-towel_176474-8195.jpg" },
+        { id: "3", name: "Avocado Toast", price: "RM 18.00", imageSrc: "http://img.b2bpic.net/plate-profiteroles-served-with-chocolate-sauce_114579-2339.jpg" },
+        { id: "4", name: "Cold Brew", price: "RM 14.00", imageSrc: "http://img.b2bpic.net/hand-pouring-milk-into-coffee-cup_23-2149600729.jpg" },
+        { id: "5", name: "Chicken Club", price: "RM 22.00", imageSrc: "http://img.b2bpic.net/fresh-healthy-food-breakfast-lunch-ideas-bread-with-cheese-avocado-greenery_8353-8795.jpg" },
+        { id: "6", name: "Matcha Cheesecake", price: "RM 16.00", imageSrc: "http://img.b2bpic.net/young-woman-eating-delicious-tiramisu-cafe_1303-25266.jpg" },
       ]}
       title="Handcrafted Delights"
       description="Discover our curated selection of specialty coffee, fresh pastries, and artisanal light bites."
@@ -121,21 +74,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="The Piccolo Philosophy"
       metrics={[
-        {
-          icon: Coffee,
-          label: "Beans Roasted Weekly",
-          value: "50kg+",
-        },
-        {
-          icon: Users,
-          label: "Happy Customers",
-          value: "10k+",
-        },
-        {
-          icon: Award,
-          label: "Years Brewing",
-          value: "5",
-        },
+        { icon: Coffee, label: "Beans Roasted Weekly", value: "50kg+" },
+        { icon: Users, label: "Happy Customers", value: "10k+" },
+        { icon: Award, label: "Years Brewing", value: "5" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -146,135 +87,58 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      negativeCard={{
-        items: [
-          "No artificial flavors",
-          "Zero compromise",
-          "Always authentic",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Fresh, local beans",
-          "Ethical sourcing",
-          "Skilled baristas",
-        ],
-      }}
+      negativeCard={{ items: ["No artificial flavors", "Zero compromise", "Always authentic"] }}
+      positiveCard={{ items: ["Fresh, local beans", "Ethical sourcing", "Skilled baristas"] }}
       title="Why Choose Piccolo"
       description="We take the extra steps to ensure your cafe experience is truly exceptional."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
+      <TestimonialCardFive
+      title="Voices of the Cafe"
+      description="See why our neighbors call us their favorite home away from home."
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah L.",
-          handle: "@sarah_l",
-          testimonial: "The best latte in Taman Equine, hands down. So cozy!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cheerful-girl-with-tattooes-dreadlocks-is-sitting-food-court-while-drinking-coffee_613910-17170.jpg",
-        },
-        {
-          id: "2",
-          name: "Mark D.",
-          handle: "@mark_d",
-          testimonial: "Perfect spot to get some work done. Atmosphere is unbeatable.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-sitting-table-cafe-working_1157-26422.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily C.",
-          handle: "@emily_c",
-          testimonial: "Love the avocado toast. Always fresh and served with a smile.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-brunette-woman-drinks-morning-coffee-cafe_613910-12094.jpg",
-        },
-        {
-          id: "4",
-          name: "David T.",
-          handle: "@david_t",
-          testimonial: "Friendly staff, excellent coffee, and a great vibe. Highly recommended.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/two-male-friends-together-restaurant_23-2150520083.jpg",
-        },
-        {
-          id: "5",
-          name: "Chloe Y.",
-          handle: "@chloe_y",
-          testimonial: "Such a lovely place to spend weekend mornings. Truly local.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/funny-time-with-best-friend_329181-2903.jpg",
-        },
+        { id: "1", name: "Sarah L.", date: "Oct 2024", title: "Cozy Vibes", quote: "The best latte in Taman Equine, hands down. So cozy!", tag: "Review", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-cheerful-girl-with-tattooes-dreadlocks-is-sitting-food-court-while-drinking-coffee_613910-17170.jpg" },
+        { id: "2", name: "Mark D.", date: "Nov 2024", title: "Perfect Workspace", quote: "Perfect spot to get some work done. Atmosphere is unbeatable.", tag: "Review", avatarSrc: "http://img.b2bpic.net/businesswoman-sitting-table-cafe-working_1157-26422.jpg" },
       ]}
-      showRating={true}
-      title="Voices of the Cafe"
-      description="See why our neighbors call us their favorite home away from home."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "1",
-          title: "Do you offer Wi-Fi?",
-          content: "Yes, we have high-speed complimentary Wi-Fi for all our guests.",
-        },
-        {
-          id: "2",
-          title: "Are you pet-friendly?",
-          content: "Our patio area is perfectly pet-friendly. Your furry friends are welcome!",
-        },
-        {
-          id: "3",
-          title: "Can I book a table?",
-          content: "We work on a first-come, first-served basis, but larger parties are welcome to call ahead.",
-        },
-      ]}
+      <FaqBase
       title="Frequently Asked"
       description="Have questions about our cafe? Here are the most common ones."
       faqsAnimation="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={true}
+      faqs={[
+        { id: "1", title: "Do you offer Wi-Fi?", content: "Yes, we have high-speed complimentary Wi-Fi for all our guests." },
+        { id: "2", title: "Are you pet-friendly?", content: "Our patio area is perfectly pet-friendly. Your furry friends are welcome!" },
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactCTA
+      tag="Contact Us"
+      title="Join the Piccolo Community"
+      description="Get our latest specials and local updates straight to your inbox."
+      buttons={[{ text: "Subscribe" }]}
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Visit Us"
-      title="Find Us in Taman Equine"
-      description="Come grab a coffee at our neighborhood spot. We can't wait to serve you."
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-girl-holding-welcome-sign_23-2148639792.jpg"
-      mediaAnimation="slide-up"
-      buttonText="Subscribe for Specials"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-with-people_1162-118.jpg?_wi=2"
       logoText="Piccolo Cafe"
-      copyrightText="© 2025 Piccolo Cafe Taman Equine. All rights reserved."
-      socialLinks={[
-        {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
-        },
-        {
-          icon: Facebook,
-          href: "#",
-          ariaLabel: "Facebook",
-        },
+      columns={[
+        { title: "Visit", items: [{ label: "Taman Equine", href: "#" }] },
+        { title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] }
       ]}
     />
   </div>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);