Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -11,8 +11,11 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -30,18 +33,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Menu", id: "products" },
-        {
+        { name: "Fulfillment", id: "fulfillment" },
-          name: "Menu",          id: "products"},
+        { name: "Checkout", id: "payment" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "About",          id: "features"},
-        {
-          name: "Reviews",          id: "testimonials"},
-        {
-          name: "Payment",          id: "payment"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="NutriFuel"
     />
@@ -49,46 +45,32 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       title="Fuel Your Day Naturally"
       description="Experience the freshest ingredients crafted for your wellness. From cold-pressed juices to wholesome bowls, NutriFuel delivers nutrition you can taste."
-      buttons={[
+      buttons={[{ text: "Browse Menu", href: "#products" }]}
-        {
-          text: "Browse Menu",          href: "#products"},
-      ]}
       carouselItems={[
-        {
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/cocktail-tropical-fruits-with-notepad_23-2147795420.jpg" },
-          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/cocktail-tropical-fruits-with-notepad_23-2147795420.jpg",          imageAlt: "fresh cold pressed juice bottles"},
+        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/top-view-plates-with-salad_23-2148515368.jpg" },
-        {
+        { id: "3", imageSrc: "http://img.b2bpic.net/hipster-girl-eats-salmon-sandwich-greek-pita_346278-120.jpg" },
-          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-plates-with-salad_23-2148515368.jpg",          imageAlt: "healthy vegetable bowl fresh"},
+        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/front-view-fruity-muesli-with-sliced-fruits-dark-table-health-cereal-breakfast_140725-72986.jpg" },
-        {
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-delicious-cookies_23-2148837098.jpg" },
-          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/hipster-girl-eats-salmon-sandwich-greek-pita_346278-120.jpg",          imageAlt: "gourmet organic sandwich"},
+        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/close-up-cup-coffee-latte-art-woman-hand-coffee-shop-cafe_1150-10238.jpg" },
-        {
-          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-fruity-muesli-with-sliced-fruits-dark-table-health-cereal-breakfast_140725-72986.jpg",          imageAlt: "oatmeal with fresh fruit"},
-        {
-          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-delicious-cookies_23-2148837098.jpg",          imageAlt: "fresh healthy cookies cafe"},
-        {
-          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-cup-coffee-latte-art-woman-hand-coffee-shop-cafe_1150-10238.jpg",          imageAlt: "latte art coffee cafe"},
       ]}
     />
   </div>
 
-  <div id="features" data-section="features">
+  <div id="fulfillment" data-section="fulfillment">
       <FeatureCardNineteen
-      textboxLayout="split"
+        textboxLayout="split"
-      useInvertedBackground={true}
+        useInvertedBackground={true}
-      features={[
+        title="Seamless Fulfillment"
-        {
+        description="Enjoy your favorite NutriFuel meals exactly when you need them. Save time with our optimized local logistics in Nairobi."
-          tag: "Organic",          title: "Farm-to-Table",          subtitle: "Local Sourcing",          description: "Ingredients hand-picked from sustainable local farms every morning.",          imageSrc: "http://img.b2bpic.net/free-photo/mixed-vegetables-bowl-marble-background_114579-67033.jpg"},
+        features={[
-        {
+          { tag: "Pickup", title: "Store Pickup", subtitle: "Ready in 15 mins", description: "Get healthy meals prepared instantly; skip the wait and grab your order on the go.", buttons: [{ text: "Select Branch" }] },
-          tag: "Fresh",          title: "Cold-Pressed Daily",          subtitle: "Raw Nutrition",          description: "Juices never heat-processed, keeping all enzymes and nutrients intact.",          imageSrc: "http://img.b2bpic.net/free-photo/healthy-juice-bottles-assortment_23-2148785310.jpg"},
+          { tag: "Delivery", title: "Swift Delivery", subtitle: "To your doorstep", description: "Get healthy meals delivered to your desk in under 30 minutes with our reliable courier partners.", buttons: [{ text: "Set Location" }] }
-        {
+        ]}
-          tag: "Clean",          title: "Zero Additives",          subtitle: "Whole Foods Only",          description: "No refined sugars, no preservatives. Just natural, clean fuel for you.",          imageSrc: "http://img.b2bpic.net/free-photo/ceramic-bowl-delicious-acai-brazilian-dessert_23-2149788544.jpg"},
+      />
-      ]}
-      title="Why NutriFuel Matters"
-      description="We believe in pure nutrition that fuels your body and mind. Every bite is an investment in your wellbeing."
-    />
   </div>
 
   <div id="products" data-section="products">
@@ -98,97 +80,40 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", name: "Detox Green Juice", price: "KES 1,200", variant: "Cold Pressed", imageSrc: "http://img.b2bpic.net/free-photo/kombucha-bottle-pineapple_23-2149757717.jpg" },
-          id: "1",          name: "Detox Green Juice",          price: "$8.50",          variant: "Cold Pressed",          imageSrc: "http://img.b2bpic.net/free-photo/kombucha-bottle-pineapple_23-2149757717.jpg"},
+        { id: "2", name: "Turkey Avocado Wrap", price: "KES 1,800", variant: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/top-view-salad-sandwiches-with-copy-space-avocado_23-2148640172.jpg" },
-        {
+        { id: "3", name: "Berry Yogurt Bowl", price: "KES 1,500", variant: "Fresh", imageSrc: "http://img.b2bpic.net/free-photo/berry-smoothies_74190-7614.jpg" },
-          id: "2",          name: "Turkey Avocado Wrap",          price: "$12.00",          variant: "Signature Wrap",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-salad-sandwiches-with-copy-space-avocado_23-2148640172.jpg"},
-        {
-          id: "3",          name: "Berry Yogurt Bowl",          price: "$9.50",          variant: "Fresh Bowl",          imageSrc: "http://img.b2bpic.net/free-photo/berry-smoothies_74190-7614.jpg"},
-        {
-          id: "4",          name: "Artisan Almond Cookie",          price: "$3.50",          variant: "Guilt-Free",          imageSrc: "http://img.b2bpic.net/free-photo/coffee-still-life_23-2148116853.jpg"},
-        {
-          id: "5",          name: "Overnight Berry Oats",          price: "$7.00",          variant: "Breakfast",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-overnight-oats-with-fresh-strawberries-blueberries-nuts-glass-jar-rustic-surface_141793-6947.jpg"},
-        {
-          id: "6",          name: "Garden Harvest Salad",          price: "$11.50",          variant: "Lunch",          imageSrc: "http://img.b2bpic.net/free-photo/useful-dietary-salad-with-cottage-cheese-herbs-vegetables_2829-19859.jpg"},
       ]}
-      title="Nutritious Menu"
+      title="Our Menu"
-      description="Hand-crafted food and drinks designed for flavor and wellness."
+      description="Fresh, local, and packed with vitality."
     />
   </div>
 
   <div id="payment" data-section="payment">
     <SocialProofOne
-        title="Secure Payment Options"
+        title="Checkout & Secure Payment"
-        description="We support a variety of payment methods to ensure your transaction is safe and seamless."
+        description="Review your items and proceed with secure payment via M-Pesa, Card, or Digital Wallets."
-        names={["Visa", "Mastercard", "American Express", "Apple Pay", "Google Pay", "PayPal"]}
+        names={["M-Pesa", "Visa", "Mastercard", "Apple Pay"]}
-        textboxLayout="default"
+        buttons={[{ text: "Complete Order (KES)" }]}
+        textboxLayout="split"
         useInvertedBackground={true}
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",          name: "Sarah J.",          role: "Athletics Coach",          company: "FitLife",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-talking-phone-working-laptop_169016-24937.jpg"},
-        {
-          id: "2",          name: "Michael D.",          role: "Professional",          company: "Corp",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-luxury-restaurant_23-2150598342.jpg"},
-        {
-          id: "3",          name: "Elena R.",          role: "Creative",          company: "Studio",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/women-coffee-break_1098-16399.jpg"},
-        {
-          id: "4",          name: "Mark S.",          role: "Student",          company: "University",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswomen-sitting-cafe_1157-15016.jpg"},
-        {
-          id: "5",          name: "Anna P.",          role: "Regular",          company: "NutritionFan",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/client-shops-organic-foods-store_482257-86416.jpg"},
-      ]}
-      title="Loved by Our Community"
-      description="See what our regulars have to say about their daily fuel."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",          title: "Are your juices organic?",          content: "Yes, we source 100% organic produce whenever possible to ensure purity."},
-        {
-          id: "2",          title: "Do you offer vegan options?",          content: "All our bowls and juices are fully plant-based. Some sandwiches feature high-quality lean proteins."},
-        {
-          id: "3",          title: "Can I order online?",          content: "Yes, you can order via our app or website for pickup at your convenience."},
-      ]}
-      title="Frequently Asked"
-      description="Common questions about our ingredients and ordering process."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
+      title="Questions about Delivery?"
-      title="Join Our Newsletter"
+      description="Reach out to our support team for any fulfillment inquiries in Nairobi."
-      description="Get exclusive discounts, new menu alerts, and nutrition tips delivered to your inbox."
+      tag="Contact Us"
-      imageSrc="http://img.b2bpic.net/free-photo/delicious-drink-with-orange-slice-arrangement_23-2148993814.jpg"
-      mediaAnimation="slide-up"
-      tag="Stay Informed"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterCard
       logoText="NutriFuel"
-      copyrightText="© 2025 NutriFuel Nutrition Store. All rights reserved."
+      copyrightText="© 2025 NutriFuel Nairobi. All rights reserved."
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f5f4f0;
-  --card: #f9f9f9;
+  --card: #ffffff;
-  --foreground: #000f06e6;
+  --foreground: #1a1a1a;
-  --primary-cta: #0a7039;
+  --primary-cta: #2c2c2c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f5f4f0;
   --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
+  --accent: #8a8a8a;
-  --background-accent: #c4c4c4;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);