Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroSignup from '@/components/sections/hero/HeroSignup';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Flame, Star, Sparkles } from "lucide-react";
+import { Flame, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -21,134 +21,194 @@ export default function LandingPage() {
         defaultTextAnimation="background-highlight"
         borderRadius="pill"
         contentWidth="mediumLarge"
-        sizing="largeSizeMediumTitles"
+        sizing="largeSmallSizeLargeTitles"
         background="noiseDiagonalGradient"
-        cardStyle="glass-elevated"
+        cardStyle="gradient-radial"
-        primaryButtonStyle="primary-glow"
+        primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+      <NavbarLayoutFloatingInline
-        navItems={[
+      navItems={[
-            { name: "Home", id: "hero" },
+        {
-            { name: "About", id: "about" },
+          name: "Home",          id: "hero"},
-            { name: "Menu", id: "menu" },
+        {
-            { name: "Contact", id: "contact" }
+          name: "About",          id: "about"},
-        ]}
+        {
-        brandName="Ayam Panggang Mbak Indah"
+          name: "Menu",          id: "menu"},
-      />
+        {
+          name: "Contact",          id: "contact"},
+      ]}
+      brandName="Ayam Panggang Mbak Indah"
+      button={{ text: "Order Now", href: "#menu" }}
+    />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSignup
+      <HeroLogoBillboard
-        title="Authentic Indonesian Charcoal-Grilled Perfection"
+      background={{
-        description="Experience the legacy of Mbak Indah's secret family spices, slow-grilled to smoky, tender, flavorful perfection."
+        variant: "downward-rays-static"}}
-        tag="Tradition in Every Bite"
+      logoText="Ayam Panggang Mbak Indah"
-        background={{ variant: "glowing-orb-sparkles" }}
+      description="Authentic traditional charcoal-grilled chicken with secret family spices."
-        buttonText="Order Now"
+      buttons={[
-      />
+        {
+          text: "View Menu",          href: "#menu"},
+        {
+          text: "Contact Us",          href: "#contact"},
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/top-view-cookie-plates-dried-lemon-slices-with-copy-space-pullover_23-2148791017.jpg"
+      imageAlt="grilled chicken indonesian style rustic"
+      mediaAnimation="slide-up"
+    />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <TestimonialAboutCard
-        heading={[
+      useInvertedBackground={false}
-            { type: "text", content: "Over 20 Years of " },
+      tag="Our Story"
-            { type: "text", content: "Culinary Excellence" }
+      title="Crafted with Love"
-        ]}
+      description="From a small family kitchen to a beloved community staple, Mbak Indah has been perfecting the art of ayam panggang for over 20 years."
-        buttons={[{ text: "Discover Our History", href: "#menu" }]}
+      subdescription="Every chicken is marinated for 12 hours in our family spice blend and slow-grilled over authentic charcoal embers to deliver that unmistakable smoky, savory taste."
-        useInvertedBackground={false}
+      imageSrc="http://img.b2bpic.net/free-photo/nuts-falling-out-box_23-2147690222.jpg"
-      />
+      imageAlt="mbak indah restaurant interior"
+      mediaAnimation="slide-up"
+      icon={Flame}
+    />
   </div>
 
   <div id="menu" data-section="menu">
-      <ProductCardThree
+      <ProductCardOne
-        title="Our Signature Menu"
+      tag="Local Favorites"
-        description="A curated selection of traditional charcoal-grilled favorites."
+      tagIcon={Star}
-        gridVariant="bento-grid"
+      animationType="slide-up"
-        animationType="blur-reveal"
+      textboxLayout="default"
-        textboxLayout="default"
+      gridVariant="uniform-all-items-equal"
-        useInvertedBackground={false}
+      useInvertedBackground={true}
-        products={[
+      products={[
-            { id: "1", name: "Signature Ayam Panggang", price: "$12.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-cutting-delicious-turkey_23-2148681867.jpg" },
+        {
-            { id: "2", name: "Bumbu Rujak Chicken", price: "$13.99", imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-fish-sauce_1388-24.jpg" },
+          id: "1",          name: "Signature Ayam Panggang",          price: "$12.99",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-cutting-delicious-turkey_23-2148681867.jpg",          imageAlt: "grilled chicken served with sambal"},
-            { id: "3", name: "Traditional Tempeh", price: "$4.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-first-second-main-dish-lentil-soup-vegetable-salad-rice-with-meat-juice-table_140725-11420.jpg" }
+        {
-        ]}
+          id: "2",          name: "Bumbu Rujak Chicken",          price: "$13.99",          imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-fish-sauce_1388-24.jpg",          imageAlt: "grilled chicken platter indonesian"},
-      />
+        {
+          id: "3",          name: "Traditional Tempeh Plate",          price: "$4.99",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-first-second-main-dish-lentil-soup-vegetable-salad-rice-with-meat-juice-table_140725-11420.jpg",          imageAlt: "side dish tempeh tofu traditional"},
+        {
+          id: "4",          name: "House Sambal Bowl",          price: "$1.99",          imageSrc: "http://img.b2bpic.net/free-photo/red-hot-chilli-sauce-tomato-ketchup-chilli-sauce-puree-with-chili-pepper-tomatoes-garlic-wooden-cutting-board-stone-surface-top-view_1150-44567.jpg",          imageAlt: "spicy sambal bowl traditional"},
+        {
+          id: "5",          name: "Sticky Rice Dessert",          price: "$3.50",          imageSrc: "http://img.b2bpic.net/free-photo/black-sticky-rice-custard-banana-leaf-white-plate-with-butterfly-pea-flowers_1150-20712.jpg",          imageAlt: "traditional indonesian dessert"},
+        {
+          id: "6",          name: "Steam Rice Portion",          price: "$1.50",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-halves-coconut-stew_23-2148494726.jpg",          imageAlt: "steamed rice banana leaf"},
+      ]}
+      title="Our Signature Dishes"
+      description="Explore our authentic menu favorites."
+    />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardSix
-        testimonial="The smokiness of the charcoal combined with the secret spice blend is truly life-changing. A local treasure!"
+      animationType="slide-up"
-        author="Sarah Aris"
+      textboxLayout="default"
-        rating={5}
+      useInvertedBackground={false}
-        ratingAnimation="blur-reveal"
+      testimonials={[
-        avatarsAnimation="slide-up"
+        {
-        useInvertedBackground={false}
+          id: "1",          name: "Sarah A.",          handle: "@sarahfoodie",          testimonial: "The best ayam panggang I have ever tasted! So smoky and tender.",          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-woman-having-fun-restaurant_23-2149237471.jpg",          imageAlt: "happy customer eating indonesian food"},
-        avatars={[]}
+        {
-      />
+          id: "2",          name: "Budi K.",          handle: "@budik_culinary",          testimonial: "Authentic flavors that remind me of home. A true hidden gem.",          imageSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663875.jpg",          imageAlt: "young woman enjoying indonesian food"},
+        {
+          id: "3",          name: "Dina W.",          handle: "@dina_eats",          testimonial: "Highly recommended for families. Great taste and portions.",          imageSrc: "http://img.b2bpic.net/free-photo/group-friends-eating-restaurant_23-2148006577.jpg",          imageAlt: "family dinner table atmosphere"},
+        {
+          id: "4",          name: "Andi P.",          handle: "@andi_foodies",          testimonial: "The charcoal grill makes such a difference in flavor. Fantastic!",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-fried-chicken-with-different-seasonings-dark-space_140725-75651.jpg",          imageAlt: "man enjoying traditional indonesian food"},
+        {
+          id: "5",          name: "Siti M.",          handle: "@siti_kitchen",          testimonial: "Consistent, delicious, and always served fresh. Mbak Indah never fails.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-with-delicious-food_23-2149272787.jpg",          imageAlt: "senior diner smiling food review"},
+      ]}
+      title="What Our Diners Say"
+      description="Real experiences from local food lovers."
+    />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitText
-        title="Common Questions"
+      useInvertedBackground={true}
-        description="Got questions? We have answers."
+      faqs={[
-        faqsAnimation="blur-reveal"
+        {
-        textboxLayout="default"
+          id: "1",          title: "Do you offer delivery?",          content: "Yes, we partner with major food delivery apps for your convenience."},
-        useInvertedBackground={false}
+        {
-        faqs={[
+          id: "2",          title: "Are your ingredients fresh?",          content: "Absolutely. We source fresh, local chickens and organic spices daily."},
-            { id: "1", title: "How do we prepare the chicken?", content: "We marinate for 12 hours and grill over real charcoal." },
+        {
-            { id: "2", title: "Is it spicy?", content: "We offer various spice levels, from mild to traditional extra spicy." }
+          id: "3",          title: "Do you have indoor seating?",          content: "Yes, we offer a cozy, traditional dining area for all our customers."},
-        ]}
+      ]}
-      />
+      sideTitle="Frequently Asked Questions"
+      sideDescription="Everything you need to know about our grilled chicken."
+      faqsAnimation="slide-up"
+    />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardTwo
-        title="The Mbak Indah Standard"
+      animationType="slide-up"
-        description="Quality assured ingredients and traditional techniques."
+      textboxLayout="default"
-        gridVariant="bento-grid"
+      gridVariant="uniform-all-items-equal"
-        animationType="depth-3d"
+      useInvertedBackground={false}
-        textboxLayout="default"
+      metrics={[
-        useInvertedBackground={false}
+        {
-        metrics={[
+          id: "1",          value: "20+",          description: "Years of experience"},
-            { id: "1", value: "20+", title: "Years", description: "Culinary tradition", icon: Flame },
+        {
-            { id: "2", value: "100k+", title: "Customers", description: "Satisfied diners", icon: Star },
+          id: "2",          value: "100k+",          description: "Happy customers served"},
-            { id: "3", value: "50+", title: "Spices", description: "Unique blend", icon: Sparkles }
+        {
-        ]}
+          id: "3",          value: "50+",          description: "Secret spices used"},
-      />
+      ]}
+      title="Our Impact"
+      description="Numbers behind our traditional recipes."
+    />
   </div>
 
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
-        names={["Culinary Assoc.", "Food Guide Pro", "Local Eats", "Top Rated"]}
+      textboxLayout="default"
-        title="Recognized Excellence"
+      useInvertedBackground={true}
-        description="Endorsed by industry experts."
+      names={[
-        textboxLayout="default"
+        "Culinary Assoc.",        "Food Guide Pro",        "Delivery Partners",        "Award Winners",        "Local Permits"]}
-        useInvertedBackground={false}
+      title="Proudly Recognized By"
-      />
+      description="Local organizations and dining guides."
+    />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactCenter
-        tag="Get In Touch"
+      useInvertedBackground={false}
-        title="Ready to taste history?"
+      background={{
-        description="Join us for an unforgettable dining experience at our flagship location or order for delivery."
+        variant: "plain"}}
-        buttons={[{ text: "Book a Table" }, { text: "View Delivery Options" }]}
+      tag="Stay Updated"
-        background={{ variant: "sparkles-gradient" }}
+      title="Get Special Offers"
-        useInvertedBackground={false}
+      description="Sign up for our newsletter and never miss out on special deals."
-      />
+    />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterMedia
-        logoText="Ayam Panggang Mbak Indah"
+      imageSrc="http://img.b2bpic.net/free-vector/cafe-icon-set_1262-7474.jpg"
-        columns={[
+      imageAlt="ayam panggang logo design"
-            { title: "Menu", items: [{ label: "Dishes", href: "#menu" }, { label: "Sides", href: "#menu" }] },
+      logoText="Ayam Panggang Mbak Indah"
-            { title: "About", items: [{ label: "Our Story", href: "#about" }, { label: "Careers", href: "#" }] }
+      columns={[
-        ]}
+        {
-      />
+          title: "Navigation",          items: [
+            {
+              label: "Menu",              href: "#menu"},
+            {
+              label: "About",              href: "#about"},
+          ],
+        },
+        {
+          title: "Legal",          items: [
+            {
+              label: "Privacy Policy",              href: "#"},
+            {
+              label: "Terms of Service",              href: "#"},
+          ],
+        },
+      ]}
+    />
   </div>
       </ReactLenis>
     </ThemeProvider>

src/app/styles/variables.css

@@ -17,7 +17,7 @@
   --primary-cta-text: #f5f4ef;
   --secondary-cta: #ecebea;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #c6b180;
   --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */