Update src/app/styles/variables.css

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 ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import ContactText from '@/components/sections/contact/ContactText';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { Award, Shield, Zap, MessageCircle } from "lucide-react";
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import { Award, MessageCircle } from "lucide-react";
 
 export default function LandingPage() {
   const whatsappNumber = "923000000000";
@@ -26,10 +26,10 @@ export default function LandingPage() {
         contentWidth="smallMedium"
         sizing="medium"
         background="circleGradient"
-        cardStyle="soft-shadow"
+        cardStyle="glass-depth"
         primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="light"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav" className="fixed top-0 left-0 right-0 z-50">
@@ -47,167 +47,121 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="Bites by Usama"
-      description="Where culinary perfection meets passion. We craft every dish with the finest ingredients to deliver a gourmet experience that defines excellence in every bite."
-      buttons={[
-        { text: "View Menu", href: "#product" },
-        { text: "Order Now", onClick: handleOrder },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/attractive-hipster-dressed-leather-jacket-eating-vegan-burger_613910-13879.jpg"
-      imageAlt="Luxurious gourmet burger and pizza presentation"
-    />
+      <HeroPersonalLinks
+        background={{ variant: "sparkles-gradient" }}
+        title="Bites by Usama"
+        linkCards={[
+            { title: "Order Now", description: "Get your gourmet meal delivered", button: { text: "Order Now", onClick: handleOrder }, imageSrc: "http://img.b2bpic.net/free-photo/attractive-hipster-dressed-leather-jacket-eating-vegan-burger_613910-13879.jpg" },
+            { title: "View Menu", description: "Browse our curated collection", button: { text: "Browse", onClick: () => document.getElementById("product")?.scrollIntoView({ behavior: "smooth" }) }, imageSrc: "http://img.b2bpic.net/free-photo/tasty-restaurant-appetizers-big-company-including-goldy-chicken-nuggets-fried-potatoes-green-salad-leaves-fresh-cucumbers-standing-white-table-looking-delicious-mouthwatering_132075-13076.jpg?_wi=1" }
+        ]}
+      />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={true}
-      title="Our Culinary Vision"
-      description="At Bites by Usama, we don't just cook; we create. Born from a passion for rich flavors and uncompromising hygiene, our journey is centered on bringing high-quality, perfectly cooked food to your table. We take pride in our service and the distinct, savory flavors that keep our guests coming back for more."
+      <TestimonialAboutCard
+      tag="Our Vision"
+      title="Culinary Perfection"
+      description="We believe in the intersection of passion and quality. Our kitchen is a laboratory of taste, creating experiences that linger long after the last bite."
+      subdescription="Every ingredient is hand-selected, and every dish is crafted to meet the highest standards of culinary excellence."
+      icon={Award}
       imageSrc="http://img.b2bpic.net/free-photo/man-chef-frying-meat-pan-fire_1303-32151.jpg"
-      imageAlt="Professional restaurant kitchen atmosphere"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="product" data-section="product">
-      <ProductCardTwo
+      <ProductCardFour
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        { id: "p1", brand: "Signature", name: "Usama's Special Pizza", price: "Rs. 2,200", rating: 5, reviewCount: "1.2k+", imageSrc: "http://img.b2bpic.net/free-photo/tasty-sandwich-red-fork-wooden-board-dark-mix-color-surface-with-free-space_179666-42255.jpg" },
-        { id: "p2", brand: "Bites", name: "Crunchy Smash Burger", price: "Rs. 950", rating: 5, reviewCount: "850+", imageSrc: "http://img.b2bpic.net/free-photo/crispy-chicken-burger_23-2151950567.jpg" },
-        { id: "p3", brand: "Premium", name: "Spicy BBQ Pizza", price: "Rs. 2,400", rating: 4, reviewCount: "600+", imageSrc: "http://img.b2bpic.net/free-photo/tasty-restaurant-appetizers-big-company-including-goldy-chicken-nuggets-fried-potatoes-green-salad-leaves-fresh-cucumbers-standing-white-table-looking-delicious-mouthwatering_132075-13076.jpg" },
-        { id: "p4", brand: "Signature", name: "Truffle Mushroom Burger", price: "Rs. 1,100", rating: 5, reviewCount: "450+", imageSrc: "http://img.b2bpic.net/free-photo/man-pouring-ketchup-tasty-beef-burger_23-2148290670.jpg" },
-        { id: "p5", brand: "Bites", name: "Classic Margherita", price: "Rs. 1,800", rating: 4, reviewCount: "900+", imageSrc: "http://img.b2bpic.net/free-photo/front-view-cooked-squashes-designed-meal-inside-plate-grey-space_140725-83768.jpg" },
-        { id: "p6", brand: "Signature", name: "Loaded Smash Burger", price: "Rs. 1,050", rating: 5, reviewCount: "550+", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fast-food-dishes_23-2149187950.jpg" },
+        { id: "p1", name: "Usama's Special Pizza", price: "Rs. 2,200", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/tasty-sandwich-red-fork-wooden-board-dark-mix-color-surface-with-free-space_179666-42255.jpg" },
+        { id: "p2", name: "Crunchy Smash Burger", price: "Rs. 950", variant: "Bites", imageSrc: "http://img.b2bpic.net/free-photo/crispy-chicken-burger_23-2151950567.jpg" },
+        { id: "p3", name: "Classic Pepperoni Pizza", price: "Rs. 1,800", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/pepperoni-pizza-with-salami-tomatoes-olive-dark-surface_140725-1200.jpg" },
+        { id: "p4", name: "Double Cheese Burger", price: "Rs. 1,100", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/delicious-cheeseburger-with-lettuce-tomato-onion-sauce_1203-1256.jpg" },
+        { id: "p5", name: "BBQ Chicken Pizza", price: "Rs. 2,400", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/bbq-chicken-pizza-with-onions-cilantro-wooden-board_140725-1234.jpg" },
+        { id: "p6", name: "Crispy Chicken Strips", price: "Rs. 750", variant: "Appetizer", imageSrc: "http://img.b2bpic.net/free-photo/tasty-restaurant-appetizers-big-company-including-goldy-chicken-nuggets-fried-potatoes-green-salad-leaves-fresh-cucumbers-standing-white-table-looking-delicious-mouthwatering_132075-13076.jpg?_wi=2" }
       ]}
-      title="Our Signature Creations"
-      description="Explore our chef-curated selection of gourmet smash burgers, perfectly baked pizzas, and crunchy bites that define flavor."
+      title="Our Full Menu"
+      description="Discover our wide variety of handcrafted pizzas, gourmet burgers, and signature sides."
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyFive
-      animationType="depth-3d"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Top-Notch Hygiene",          description: "Our kitchen maintains the highest standards of cleanliness, ensuring every dish is safe and fresh.",          icon: Shield,
-          mediaItems: [
-            { imageSrc: "http://img.b2bpic.net/free-photo/dough-greens-tomato-grey-wooden-table_176420-6800.jpg" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/young-coworkers-having-conference-office_23-2147668790.jpg" },
-          ]
-        },
-        {
-          title: "Fresh Ingredients",          description: "We source only the freshest produce and premium proteins for every order, guaranteeing unrivaled taste.",          icon: Zap,
-          mediaItems: [
-            { imageSrc: "http://img.b2bpic.net/free-photo/male-chef-putting-salad-plate_23-2148763188.jpg" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929525.jpg" },
-          ]
-        },
-        {
-          title: "Exceptional Service",          description: "Our professional team is dedicated to providing an attentive and friendly dining experience for every guest.",          icon: Award,
-          mediaItems: [
-            { imageSrc: "http://img.b2bpic.net/free-photo/front-view-chef-with-gloves-cooking-pasta-kitchen_23-2148763149.jpg" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/wedding-hall-with-white-wooden-furniture-interior_114579-2232.jpg" },
-          ]
-        },
+      <FeatureCardTwentyOne
+      title="Why We Excel"
+      description="Setting the benchmark for excellence in every kitchen operation."
+      accordionItems={[
+          { id: "f1", title: "Impeccable Hygiene", content: "Sterile, clean, and safe standards are at the core of our operations." },
+          { id: "f2", title: "Fresh Sourcing", content: "We source the finest ingredients from local and global suppliers daily." },
+          { id: "f3", title: "Expert Service", content: "Our team is trained to deliver exceptional hospitality and care." }
       ]}
-      title="Why Choose Us"
-      description="Excellence is at our core. We strive to provide more than just a meal—we provide an experience rooted in quality and care."
+      imageSrc="http://img.b2bpic.net/free-photo/dough-greens-tomato-grey-wooden-table_176420-6800.jpg"
+      mediaAnimation="slide-up"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={true}
-      testimonial="An exceptional place for food lovers! Every dish was prepared with perfection and full of rich flavors. The quality and hygiene standards are clearly top-notch. I will definitely visit again and recommend it to everyone!"
-      rating={5}
-      author="Muqeet ul Hassan"
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/happy-businessman-surfing-net-laptop-while-eating-healthy-food-lunch-break_637285-8684.jpg", alt: "Muqeet" },
-        { src: "http://img.b2bpic.net/free-photo/impressive-pretty-girl-dressed-white-tshirt-burgundy-jacket-is-posing-camera-with-happy-emotions-outdoor-city-recreation-area-background_291650-2308.jpg", alt: "Shazaib" },
-        { src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285278.jpg", alt: "Rt Khan" },
-        { src: "http://img.b2bpic.net/free-photo/frowning-young-chef-wearing-glasses-uniform-cap-holding-looking-apple-pointing-apple-with-hand-isolated-purple-background_141793-138065.jpg", alt: "Mujeeb" },
-        { src: "http://img.b2bpic.net/free-photo/happy-black-family-waving-video-call-touchpad-home_637285-12671.jpg", alt: "Iqra" },
+      <TestimonialCardTwelve
+      cardTitle="What People Say"
+      cardTag="Testimonials"
+      cardAnimation="slide-up"
+      useInvertedBackground={false}
+      testimonials={[
+          { id: "t1", name: "Muqeet ul Hassan", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-surfing-net-laptop-while-eating-healthy-food-lunch-break_637285-8684.jpg" },
+          { id: "t2", name: "Shazaib", imageSrc: "http://img.b2bpic.net/free-photo/impressive-pretty-girl-dressed-white-tshirt-burgundy-jacket-is-posing-camera-with-happy-emotions-outdoor-city-recreation-area-background_291650-2308.jpg" }
       ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="blur-reveal"
     />
   </div>
 
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
-      textboxLayout="split"
-      useInvertedBackground={false}
-      names={"Foodie Approved, Muzaffarabad's Finest, Gourmet Choice, Quality First, Top Hygiene, Taste Expert, Satisfied Guests".split(", ")}
-      title="Recognized for Quality"
-      description="We are honored to be recognized as a premier destination for food enthusiasts in the region."
+      textboxLayout="default"
+      useInvertedBackground={true}
+      names={["Muzaffarabad's Finest", "Foodie Approved", "Taste Experts", "Hygiene Certified"]}
+      title="Regional Recognition"
+      description="Proud to be the most trusted culinary name in the city."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
+      <FaqDouble
+      textboxLayout="default"
+      useInvertedBackground={false}
       faqs={[
-        { id: "1", title: "Do you offer home delivery?", content: "Yes, we provide prompt delivery services to ensure you enjoy our meals in the comfort of your home." },
-        { id: "2", title: "Is the restaurant family-friendly?", content: "We are constantly working to improve our seating arrangements to provide a comfortable environment for all families." },
-        { id: "3", title: "What are your operational hours?", content: "We are open daily to serve you the best flavors in town. Check our social media for current timings." },
+        { id: "1", title: "Home Delivery", content: "We deliver prompt, hot, and fresh right to your doorstep." },
+        { id: "2", title: "Family Environment", content: "Our seating is designed to accommodate families with comfort." },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/side-view-people-sitting-restaurant_23-2149930183.jpg"
-      imageAlt="Restaurant ambiance"
-      mediaAnimation="slide-up"
-      title="Frequently Asked"
-      description="We're here to answer any questions you might have about our menu, service, or location."
-      faqsAnimation="blur-reveal"
-      mediaPosition="left"
+      faqsAnimation="slide-up"
+      title="Queries Answered"
+      description="We strive to make your dining journey seamless and enjoyable."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
+      <ContactText
+      text="Let's Craft Your Next Order"
       background={{ variant: "gradient-bars" }}
-      tag="Get in touch"
-      title="Ready for a Taste Experience?"
-      description="Join our newsletter for updates, exclusive offers, and upcoming menu launches at Bites by Usama."
-      imageSrc="http://img.b2bpic.net/free-photo/bowl-french-dessert-garnished-with-long-cookie-berries_140725-8512.jpg"
-      mediaAnimation="blur-reveal"
-      mediaPosition="right"
+      buttons={[{ text: "Call Us Now", onClick: handleOrder }]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterBase
       logoText="Bites by Usama"
       columns={[
-        {
-          title: "Links",          items: [
-            { label: "Menu", href: "#product" },
-            { label: "About Us", href: "#about" },
-            { label: "Contact", href: "#contact" },
-          ],
-        },
-        {
-          title: "Support",          items: [
-            { label: "FAQ", href: "#faq" },
-            { label: "Privacy", href: "#" },
-            { label: "Terms", href: "#" },
-            { label: "Order on WhatsApp", href: `https://wa.me/${whatsappNumber}` },
-          ],
-        },
+        { title: "Company", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }] },
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
       ]}
-      copyrightText="© 2025 Bites by Usama | All Rights Reserved"
     />
   </div>
 
   <button 
     onClick={handleOrder}
-    className="fixed bottom-6 right-6 z-50 bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-xl transition-all duration-300 flex items-center justify-center"
+    className="fixed bottom-6 right-6 z-50 bg-neutral-900 hover:bg-neutral-800 text-white p-4 rounded-full shadow-2xl transition-all duration-300 flex items-center justify-center"
     aria-label="Order on WhatsApp"
   >
     <MessageCircle size={28} />
@@ -216,4 +170,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #060000;
-  --card: #1d0d0d;
-  --foreground: #ffe6e6;
-  --primary-cta: #ff3d4a;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
   --primary-cta-text: #fcf6ec;
-  --secondary-cta: #1f0a0a;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #2e2521;
   --accent: #b8860b;
-  --background-accent: #b8111f;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);