Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,134 +1,133 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
-import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
+import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
 import ProductCardThree from "@/components/sections/product/ProductCardThree";
 import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
-import ContactFaq from "@/components/sections/contact/ContactFaq";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Star, Check, Award, Flame, Zap, Heart, MapPin, Utensils } from "lucide-react";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Sparkles, Zap } from "lucide-react";
+
+export default function Home() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Menu", id: "menu" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
       contentWidth="medium"
-      sizing="large"
-      background="blurBottom"
-      cardStyle="subtle-shadow"
-      primaryButtonStyle="primary-glow"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Menu", id: "menu" },
-            { name: "About", id: "about" },
-            { name: "Delivery", id: "delivery" },
-            { name: "Location", id: "location" },
-            { name: "Order Now", id: "order" },
-          ]}
-          brandName="PANDA BURGER"
-          bottomLeftText="Premium Fast Food"
-          bottomRightText="Klass in Every Bite"
-        />
-      </div>
+      <NavbarLayoutFloatingOverlay
+        navItems={navItems}
+        brandName="Panda Burger"
+        button={{ text: "Order Now", href: "https://example.com" }}
+      />
 
       <div id="hero" data-section="hero">
-        <HeroBillboardRotatedCarousel
-          title="Not Just a Burger. It&apos;s a Standard."
-          description="Premium burgers. Fresh ingredients. Fast delivery."
-          background={{ variant: "plain" }}
-          tag="5.0 Customer Rating"
-          tagIcon={Star}
-          tagAnimation="slide-up"
+        <HeroSplitTestimonial
+          background={{ variant: "glowing-orb" }}
+          title="Premium Luxury Dining Experience"
+          description="Indulge in our exquisite menu crafted with the finest ingredients and modern culinary techniques"
+          tag="Premium Selection"
+          tagIcon={Sparkles}
+          imagePosition="right"
+          imageSrc="/panda-hero.jpg"
+          imageAlt="Premium Panda Burger dish"
+          testimonials={[
+            {
+              name: "Sarah Johnson",              handle: "Food Critic",              testimonial: "Absolutely exquisite. The flavors are sophisticated and the presentation is immaculate.",              rating: 5,
+              imageSrc: "/avatar-1.jpg"},
+            {
+              name: "Michael Chen",              handle: "Restaurateur",              testimonial: "A masterclass in premium fast food. Every element is perfected.",              rating: 5,
+              imageSrc: "/avatar-2.jpg"},
+          ]}
           buttons={[
-            { text: "View Menu", href: "#menu" },
-            { text: "Order Now", href: "#order" },
+            { text: "Explore Menu", href: "menu" },
+            { text: "Reserve Table", href: "https://example.com" },
           ]}
+          mediaAnimation="blur-reveal"
           buttonAnimation="slide-up"
-          carouselItems={[
-            {
-              id: "carousel-1",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beef-burger-with-salad_23-2148784488.jpg?_wi=1",              imageAlt: "Premium signature burger"
-            },
-            {
-              id: "carousel-2",              imageSrc: "http://img.b2bpic.net/free-photo/cook-holding-tasty-burgers-front-view_23-2149897387.jpg",              imageAlt: "Double beef burger"
-            },
-            {
-              id: "carousel-3",              imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-breast-meat-salad_74190-6128.jpg",              imageAlt: "Crispy chicken burger"
-            },
-            {
-              id: "carousel-4",              imageSrc: "http://img.b2bpic.net/free-photo/burger-closeup-fast-food-cheat-meal-concept-junk-food_169016-67425.jpg",              imageAlt: "Spicy jalapeño burger"
-            },
-            {
-              id: "carousel-5",              imageSrc: "http://img.b2bpic.net/free-photo/hamburger-tasty-french-fries-tomatoes_23-2148374850.jpg",              imageAlt: "Classic panda burger"
-            },
-            {
-              id: "carousel-6",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-delicious-burger-composition_23-2148868223.jpg",              imageAlt: "Gourmet burger showcase"
-            },
-          ]}
-          autoPlay={true}
-          autoPlayInterval={4000}
-          ariaLabel="Hero section with rotating burger carousel"
         />
       </div>
 
       <div id="about" data-section="about">
-        <TestimonialAboutCard
-          tag="Our Promise"
-          tagIcon={Check}
-          tagAnimation="slide-up"
-          title="Why Everyone Says &quot;Klass&quot;"
-          description="At Panda Burger, we don&apos;t just make fast food — we craft flavor. Every bun is toasted to perfection. Every patty is juicy, bold, unforgettable. Every order meets our standard."
-          subdescription="Fresh ingredients • Premium quality • Fast delivery • Consistent taste"
-          icon={Award}
-          imageSrc="http://img.b2bpic.net/free-photo/burger-ingredients_1339-1537.jpg"
-          imageAlt="Chef preparing premium burger"
-          mediaAnimation="slide-up"
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: "text", content: "Crafted with" },
+            { type: "image", src: "/panda-logo.svg", alt: "Panda Burger logo" },
+            { type: "text", content: "and refined excellence" },
+          ]}
           useInvertedBackground={false}
+          buttons={[
+            { text: "Our Story", href: "https://example.com" },
+            { text: "Learn More", href: "https://example.com" },
+          ]}
         />
       </div>
 
       <div id="menu" data-section="menu">
+        <FeatureCardSeven
+          features={[
+            {
+              id: 1,
+              title: "Signature Panda Burger",              description: "Our iconic burger featuring premium wagyu beef, truffle aioli, aged cheddar, and crispy pancetta on brioche. A masterpiece of luxury fast food.",              imageSrc: "/menu-1.jpg",              imageAlt: "Signature Panda Burger"},
+            {
+              id: 2,
+              title: "Golden Crispy Fries",              description: "Hand-cut potatoes fried to golden perfection, seasoned with Himalayan salt and truffle oil. Served with premium dipping sauces.",              imageSrc: "/menu-2.jpg",              imageAlt: "Golden Crispy Fries"},
+            {
+              id: 3,
+              title: "Artisan Beverage Selection",              description: "Curated drinks from premium sources. From cold brew coffee to exotic fruit beverages, each selection complements our menu perfectly.",              imageSrc: "/menu-3.jpg",              imageAlt: "Artisan Beverages"},
+            {
+              id: 4,
+              title: "Gourmet Dessert Experience",              description: "Indulge in our signature desserts including matcha-infused treats and chocolate delicacies, handcrafted daily by our pastry artisans.",              imageSrc: "/menu-4.jpg",              imageAlt: "Gourmet Desserts"},
+          ]}
+          title="Our Curated Menu"
+          description="Each item is carefully crafted to deliver an unforgettable luxury dining experience"
+          textboxLayout="default"
+          animationType="blur-reveal"
+          useInvertedBackground={false}
+          tag="Premium Items"
+          tagIcon={Zap}
+        />
+      </div>
+
+      <div id="products" data-section="products">
         <ProductCardThree
           products={[
             {
-              id: "1",              name: "Panda Classic",              price: "$12.99",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-cheesy-meat-burger-with-seasonings-dark-surface-meat-bun-sandwich-fries_140725-82155.jpg",              imageAlt: "Panda Classic burger",              initialQuantity: 1,
+              id: "1",              name: "Classic Panda Burger",              price: "$24.99",              imageSrc: "/product-1.jpg",              imageAlt: "Classic Panda Burger",              onProductClick: () => console.log("Product clicked"),
             },
             {
-              id: "2",              name: "Double Panda",              price: "$16.99",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-burger-plate-high-angle_23-2149897391.jpg",              imageAlt: "Double Panda burger",              initialQuantity: 1,
+              id: "2",              name: "Double Excellence Burger",              price: "$34.99",              imageSrc: "/product-2.jpg",              imageAlt: "Double Excellence Burger",              onProductClick: () => console.log("Product clicked"),
             },
             {
-              id: "3",              name: "Spicy Panda",              price: "$13.99",              imageSrc: "http://img.b2bpic.net/free-photo/yummy-burger-wooden-table_23-2148374847.jpg",              imageAlt: "Spicy Panda burger",              initialQuantity: 1,
+              id: "3",              name: "Premium Combo Set",              price: "$42.99",              imageSrc: "/product-3.jpg",              imageAlt: "Premium Combo Set",              onProductClick: () => console.log("Product clicked"),
             },
             {
-              id: "4",              name: "Chicken Panda",              price: "$14.99",              imageSrc: "http://img.b2bpic.net/free-photo/spanish-serrano-ham-sandwich-isolated-white-background_123827-24834.jpg",              imageAlt: "Chicken Panda burger",              initialQuantity: 1,
-            },
-            {
-              id: "5",              name: "Golden Fries",              price: "$4.99",              imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-box-fries-with-sauces_23-2148238517.jpg",              imageAlt: "Golden Fries",              initialQuantity: 1,
-            },
-            {
-              id: "6",              name: "Sides & Extras",              price: "$5.99",              imageSrc: "http://img.b2bpic.net/free-photo/fast-food-meal-with-copy-space_23-2148273001.jpg",              imageAlt: "Onion rings and mozzarella sticks",              initialQuantity: 1,
+              id: "4",              name: "Luxury Feast Bundle",              price: "$59.99",              imageSrc: "/product-4.jpg",              imageAlt: "Luxury Feast Bundle",              onProductClick: () => console.log("Product clicked"),
             },
           ]}
-          title="Our Menu"
-          description="Premium burgers, crispy sides, and fresh drinks crafted to perfection"
-          tag="Signature Selection"
-          tagIcon={Flame}
-          tagAnimation="slide-up"
-          buttons={[{ text: "View All Items", href: "#" }]}
-          buttonAnimation="slide-up"
+          title="Premium Selections"
+          description="Discover our finest offerings, handpicked for the discerning palate"
           textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
-          carouselMode="buttons"
+          gridVariant="four-items-2x2-equal-grid"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -136,126 +135,81 @@ export default function LandingPage() {
         <TestimonialCardTwelve
           testimonials={[
             {
-              id: "1",              name: "Sarah Chen",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Sarah Chen"
-            },
+              id: "1",              name: "Sophie P.",              imageSrc: "/testimonial-1.jpg",              imageAlt: "Sophie P."},
             {
-              id: "2",              name: "Marcus Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-business-leader-showing-statistics_1262-2964.jpg",              imageAlt: "Marcus Johnson"
-            },
+              id: "2",              name: "Marcus R.",              imageSrc: "/testimonial-2.jpg",              imageAlt: "Marcus R."},
             {
-              id: "3",              name: "Elena Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-home_23-2149412549.jpg",              imageAlt: "Elena Rodriguez"
-            },
+              id: "3",              name: "Elena V.",              imageSrc: "/testimonial-3.jpg",              imageAlt: "Elena V."},
             {
-              id: "4",              name: "David Kim",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-young-businesswoman-your-own-business-gives-lot-benefits_329181-11452.jpg",              imageAlt: "David Kim"
-            },
+              id: "4",              name: "David K.",              imageSrc: "/testimonial-4.jpg",              imageAlt: "David K."},
+            {
+              id: "5",              name: "Isabelle M.",              imageSrc: "/testimonial-5.jpg",              imageAlt: "Isabelle M."},
           ]}
-          cardTitle="Loved by Everyone Who Tries It"
-          cardTag="Trusted by Thousands"
-          cardTagIcon={Heart}
-          cardAnimation="blur-reveal"
+          cardTitle="Trusted by thousands of luxury dining enthusiasts"
+          cardTag="Join our community"
+          cardAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="delivery" data-section="delivery">
-        <FeatureCardTwentyThree
-          features={[
-            {
-              id: "1",              title: "30 Minutes or Less",              tags: ["Guarantee", "City Wide"],
-              imageSrc: "http://img.b2bpic.net/free-photo/top-view-thoughtful-young-adult-wearing-red-blouse-hat-gloves-medical-mask-delivering-order-sitting-scooter-yellow-wall_179666-33486.jpg?_wi=1",              imageAlt: "Fast delivery service"
-            },
-            {
-              id: "2",              title: "Hot & Fresh Guarantee",              tags: ["Premium", "Quality"],
-              imageSrc: "http://img.b2bpic.net/free-photo/top-view-thoughtful-young-adult-wearing-red-blouse-hat-gloves-medical-mask-delivering-order-sitting-scooter-yellow-wall_179666-33486.jpg?_wi=2",              imageAlt: "Fresh delivery"
-            },
-          ]}
-          title="Fast. Fresh. Reliable."
-          description="Hot and fresh at your door. No compromise. No delay."
-          tag="Delivery"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          buttons={[
-            { text: "Order Now", href: "#order" },
-            { text: "Call Us", href: "tel:+1234567890" },
-          ]}
-          buttonAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-        />
-      </div>
-
-      <div id="location" data-section="location">
-        <ContactFaq
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
           faqs={[
             {
-              id: "1",              title: "What are your hours?",              content: "Monday - Sunday: 11:00 AM - 11:00 PM. Special hours may apply on holidays."
-            },
+              id: "1",              title: "What makes Panda Burger premium?",              content:
+                "We source only the finest ingredients, including wagyu beef, organic produce, and artisanal sauces. Each burger is crafted with meticulous attention to detail and culinary precision."},
             {
-              id: "2",              title: "Do you have delivery?",              content: "Yes! We deliver within 30 minutes to most areas. Order through our app or call us directly."
-            },
+              id: "2",              title: "Do you offer customization?",              content:
+                "Absolutely. We believe in personalization. Our chefs will customize any burger to your preferences, from ingredient selection to preparation style."},
             {
-              id: "3",              title: "Can I order online?",              content: "Absolutely. Order online anytime, and we&apos;ll have your food ready for pickup or delivery."
-            },
+              id: "3",              title: "What are your delivery options?",              content:
+                "We offer premium delivery with temperature-controlled packaging to ensure your meal arrives in perfect condition. We also offer dine-in and takeout services."},
+            {
+              id: "4",              title: "Do you cater for events?",              content:
+                "Yes, we provide exclusive catering services for corporate events, private dinners, and special occasions. Contact our catering team for personalized quotes."},
           ]}
-          ctaTitle="Visit Panda Burger"
-          ctaDescription="Experience premium quality in person. Walk-in or call ahead."
-          ctaButton={{ text: "Get Directions", href: "#" }}
-          ctaIcon={MapPin}
+          imageSrc="/faq-image.jpg"
+          imageAlt="Panda Burger dining experience"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about our premium service"
+          textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
-          accordionAnimationType="smooth"
+          mediaPosition="left"
+          faqsAnimation="slide-up"
+          mediaAnimation="blur-reveal"
         />
       </div>
 
-      <div id="final-cta" data-section="final-cta">
-        <TestimonialAboutCard
-          tag="Ready?"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          title="Ready to Taste the Standard?"
-          description="Order now and experience why everyone says: &quot;Klass.&quot;"
-          subdescription="Premium fast food. Unforgettable quality. Every time."
-          icon={Utensils}
-          imageSrc="http://img.b2bpic.net/free-photo/high-angle-beef-burger-with-salad_23-2148784488.jpg?_wi=2"
-          imageAlt="Premium Panda Burger"
-          mediaAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
+      <div id="contact" data-section="contact">
+        <FooterSimple
           columns={[
             {
-              items: [
+              title: "Navigate",              items: [
+                { label: "Home", href: "/" },
                 { label: "Menu", href: "#menu" },
                 { label: "About", href: "#about" },
-                { label: "Delivery", href: "#delivery" },
+                { label: "Contact", href: "#contact" },
               ],
             },
             {
-              items: [
-                { label: "Order Online", href: "#order" },
-                { label: "Loyalty Program", href: "#loyalty" },
-                { label: "Careers", href: "#" },
+              title: "Services",              items: [
+                { label: "Dine In", href: "https://example.com" },
+                { label: "Delivery", href: "https://example.com" },
+                { label: "Catering", href: "https://example.com" },
+                { label: "Events", href: "https://example.com" },
               ],
             },
             {
-              items: [
-                { label: "Contact Us", href: "#location" },
-                { label: "Location", href: "#location" },
-                { label: "Instagram", href: "https://instagram.com" },
-              ],
-            },
-            {
-              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Feedback", href: "#" },
+              title: "Company",              items: [
+                { label: "About Us", href: "https://example.com" },
+                { label: "Careers", href: "https://example.com" },
+                { label: "Press", href: "https://example.com" },
+                { label: "Blog", href: "https://example.com" },
               ],
             },
           ]}
-          logoText="🐼 PANDA BURGER"
+          bottomLeftText="© 2025 Panda Burger. All rights reserved."
+          bottomRightText="Premium Luxury Dining"
         />
       </div>
     </ThemeProvider>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-open-sans), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-open-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: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
+  --background: #f9f8f4;
+  --card: #f0ede6;
+  --foreground: #2b1f15;
+  --primary-cta: #c67c4e;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --secondary-cta: #f9f8f4;
+  --secondary-cta-text: #2b1f15;
+  --accent: #d4c5b9;
+  --background-accent: #e8ddd0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);