Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -3,147 +3,145 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
         defaultTextAnimation="background-highlight"
-        borderRadius="pill"
+        borderRadius="soft"
         contentWidth="medium"
         sizing="medium"
-        background="circleGradient"
+        background="noise"
         cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        { name: "Home", id: "hero" },
-        { name: "Menu", id: "menu" },
-        { name: "About", id: "about" },
-        { name: "Contact", id: "contact" },
-      ]}
-      brandName="CAFE BAGALO"
-      button={{ text: "Order Now", href: "#menu" }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Menu", id: "menu" },
+              { name: "Features", id: "features" },
+              { name: "Reviews", id: "testimonials" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="CAFE BAGALO"
+            button={{ text: "Order Now", href: "#menu" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{ variant: "radial-gradient" }}
-      title="CAFE BAGALO"
-      description="BBQ, Chinese, & Burgers. The heartbeat of Gulzar-e-hijri, serving up fresh flavors until 3 AM."
-      buttons={[
-        { text: "Order Now", href: "#menu" },
-        { text: "View Menu", href: "#menu" },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/high-angle-cups-coffee-with-milk_23-2148337174.jpg"
-      imageAlt="Grilled kebab platter restaurant"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplit
+            title="CAFE BAGALO"
+            description="Authentic BBQ, Chinese classics, and gourmet burgers in Gulzar-e-hijri, Karachi. Serving excellence until 3 AM daily."
+            buttons={[{ text: "Explore Menu", href: "#menu" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/side-view-cheeseburger-grilled-beef-patty-with-cheese-lettuce-burger-buns_141793-4806.jpg?_wi=1"
+            imageAlt="Cafe Bagalo signature burger"
+            background={{ variant: "sparkles-gradient" }}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="About CAFE BAGALO"
-      description="Situated in the heart of Karachi, we bring you the ultimate late-night comfort food experience. From sizzling BBQ skewers to flavorful Chinese classics and juicy burgers, we serve excellence every day until 3 AM. Dine-in, Takeaway, or Delivery—we are here for you."
-      bulletPoints={[
-        { title: "Dine-in", description: "Relax in our warm, inviting ambiance." },
-        { title: "Takeaway", description: "Quick pick-ups for those on the go." },
-        { title: "Delivery", description: "Deliciousness delivered right to your doorstep." },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-dining-room-with-round-table-red-chairs_23-2152001402.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            heading={[{ type: "text", content: "About CAFE BAGALO" }]}
+            useInvertedBackground={true}
+            className="py-20"
+          />
+        </div>
 
-  <div id="menu" data-section="menu">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      products={[
-        { id: "1", name: "Beef Burger (Customer Favorite)", price: "PKR 750", imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheeseburger-grilled-beef-patty-with-cheese-lettuce-burger-buns_141793-4806.jpg" },
-        { id: "2", name: "Chicken Chutney Roll", price: "PKR 250", imageSrc: "http://img.b2bpic.net/free-photo/matsusaka-wagyu-beef-sushi_1203-7815.jpg" },
-        { id: "3", name: "Special BBQ Platter", price: "PKR 1200", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tray-with-food-meat-fish-meals-along-with-different-sauces-brown-wooden-desk-food-meal-meat-cuisine_140725-28351.jpg" },
-      ]}
-      title="Our Menu"
-      description="Popular items cooked to perfection."
-    />
-  </div>
+        <div id="menu" data-section="menu">
+          <ProductCardThree
+            title="Our Culinary Delights"
+            description="From smoky BBQ to stir-fried Chinese and juicy burgers."
+            gridVariant="asymmetric-60-wide-40-narrow"
+            animationType="slide-up"
+            products={[
+              { 
+                id: "1", 
+                name: "Special BBQ Platter", 
+                price: "PKR 1200", 
+                imageSrc: "http://img.b2bpic.net/free-photo/top-view-tray-with-food-meat-fish-meals-along-with-different-sauces-brown-wooden-desk-food-meal-meat-cuisine_140725-28351.jpg",                onProductClick: () => console.log("Added Special BBQ Platter to cart")
+              },
+              { 
+                id: "2", 
+                name: "Dragon Chicken (Chinese)", 
+                price: "PKR 650", 
+                imageSrc: "http://img.b2bpic.net/free-photo/matsusaka-wagyu-beef-sushi_1203-7815.jpg",                onProductClick: () => console.log("Added Dragon Chicken to cart")
+              },
+              { 
+                id: "3", 
+                name: "Classic Beef Burger", 
+                price: "PKR 750", 
+                imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheeseburger-grilled-beef-patty-with-cheese-lettuce-burger-buns_141793-4806.jpg?_wi=2",                onProductClick: () => console.log("Added Classic Beef Burger to cart")
+              }
+            ]}
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        { id: 1, title: "Late Night Dining", description: "Open until 3 AM every day.", imageSrc: "http://img.b2bpic.net/free-vector/neon-cafe-open-sign-brick-wall_1048-7618.jpg" },
-        { id: 2, title: "Authentic BBQ", description: "Traditional recipes, charcoal grilled.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-barbecue-fire-with-coals_23-2148301316.jpg" },
-        { id: 3, title: "Fast Delivery", description: "Getting your food hot, fast, and fresh.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-getting-parcel-out-delivery_23-2149371960.jpg" },
-      ]}
-      title="Why Choose Us"
-      description="Your late-night destination."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            title="Restaurant Features"
+            description="Our commitment to quality, service, and authentic taste."
+            animationType="blur-reveal"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { id: "1", label: "Hours", title: "Open Until 3 AM", items: ["Late-night dining", "Quality late-night service"] },
+              { id: "2", label: "Taste", title: "Authentic Recipes", items: ["Charcoal grilled", "Fresh ingredients"] },
+              { id: "3", label: "Delivery", title: "Fast Karachi Delivery", items: ["Speedy service", "Hot delivery guaranteed"] }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        { id: "1", name: "Ali Khan", role: "Foodie", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/watching-funny-video-internet-with-coworkers-cafe-terrace-with-tasty-food_8353-10265.jpg?_wi=1" },
-        { id: "2", name: "Sara Ahmed", role: "Regular", company: "Local", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-female-with-broad-pleasant-smile-rests-sidewalk-cafe-alone-enjoys-good-rest-summer-vacation_273609-3491.jpg" },
-        { id: "3", name: "John Doe", role: "Visitor", company: "External", rating: 2, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-smiling-sitting-floor-white-wall_176420-8542.jpg" },
-        { id: "4", name: "Zainab R.", role: "Diner", company: "Local", rating: 3, imageSrc: "http://img.b2bpic.net/free-photo/good-humoured-caucasian-woman-enjoying-healthy-food-indoor-shot-smiling-girl-eating-salad_197531-17196.jpg" },
-        { id: "5", name: "Bilal Ahmed", role: "Diner", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/watching-funny-video-internet-with-coworkers-cafe-terrace-with-tasty-food_8353-10265.jpg?_wi=2" },
-      ]}
-      kpiItems={[
-        { value: "52", label: "Total Reviews" },
-        { value: "3.8", label: "Avg Rating" },
-        { value: "3AM", label: "Open Daily" },
-      ]}
-      title="Customer Reviews"
-      description="Average rating: 3.8/5 from 52 reviews."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardOne
+            title="Customer Feedback"
+            description="See what our customers in Gulzar-e-hijri say about us."
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Ali Khan", role: "Regular", company: "Karachi", rating: 5 },
+              { id: "2", name: "Sara Ahmed", role: "Foodie", company: "Local", rating: 5 },
+              { id: "3", name: "John Doe", role: "Diner", company: "Visitor", rating: 4 }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
-      tag="Visit Us"
-      title="Find Us"
-      description="Teachers Society Sector 19 A, Gulshan-e-Iqbal, Karachi. Phone: +92 320 2191633. Open until 3 AM."
-      imageSrc="http://img.b2bpic.net/free-vector/collection-taxi-app-interface-smartphone_23-2148476857.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            title="Contact & Location"
+            description="Visit us in Gulzar-e-hijri, Karachi. We are open for dine-in and delivery until 3 AM."
+            tag="Get in touch"
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="CAFE BAGALO"
-      columns={[
-        { title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }] },
-        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="CAFE BAGALO"
+            columns={[
+              { title: "Quick Links", items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }] },
+              { title: "Contact", items: [{ label: "+92 320 2191633", href: "tel:+923202191633" }] }
+            ]}
+          />
+        </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;
-  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
-  --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --background: #0f0d0c;
+  --card: #1c1816;
+  --foreground: #f7f2ed;
+  --primary-cta: #c85822;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #3d3632;
+  --secondary-cta-text: #f7f2ed;
+  --accent: #e0a16c;
+  --background-accent: #2a2624;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);