Update src/app/page.tsx

Merge version_4 into main

src/app/checkout/page.tsx

@@ -3,10 +3,17 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactForm from '@/components/form/ContactForm';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { useState } from 'react';
 
 export default function CheckoutPage() {
+  const [cart] = useState([
+    { id: "p1", name: "Roasted Macadamias", price: 15.00, quantity: 1 },
+    { id: "p2", name: "Artisan Truffles", price: 22.00, quantity: 2 },
+  ]);
+
+  const subtotal = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -22,33 +29,56 @@ export default function CheckoutPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingOverlay
-            navItems={[
+              navItems={[
-              { name: "Home", id: "/" },
+                { name: "Home", id: "/" },
-              { name: "Products", id: "/products" },
+                { name: "Products", id: "/products" },
-              { name: "Checkout", id: "/checkout" },
+                { name: "Checkout", id: "/checkout" },
-            ]}
+              ]}
-            brandName="Nuts & Sweets"
+              brandName="Nuts & Sweets"
-          />
+            />
         </div>
 
-        <div className="min-h-screen py-24 flex items-center justify-center">
+        <main className="container mx-auto py-20 px-6">
-          <ContactForm
+          <h1 className="text-4xl font-bold mb-10">Checkout</h1>
-            title="Secure Checkout"
+          <div className="grid md:grid-cols-2 gap-12">
-            description="Please provide your details to finalize your order."
+            <div className="bg-white/5 p-8 rounded-3xl">
-            tag="Checkout"
+              <h2 className="text-2xl font-semibold mb-6">Your Cart</h2>
-            buttonText="Pay Now"
+              <div className="space-y-4">
-            useInvertedBackground={false}
+                {cart.map((item) => (
-            onSubmit={(email) => console.log("Processing order for:", email)}
+                  <div key={item.id} className="flex justify-between">
-          />
+                    <span>{item.name} (x{item.quantity})</span>
-        </div>
+                    <span>${(item.price * item.quantity).toFixed(2)}</span>
+                  </div>
+                ))}
+                <div className="border-t pt-4 mt-4 font-bold text-xl flex justify-between">
+                  <span>Total</span>
+                  <span>${subtotal.toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white/5 p-8 rounded-3xl">
+              <h2 className="text-2xl font-semibold mb-6">Shipping & Payment</h2>
+              <form className="space-y-4">
+                <input type="text" placeholder="Full Address" className="w-full p-3 rounded-xl bg-white/10 border border-white/10" />
+                <input type="email" placeholder="Contact Email" className="w-full p-3 rounded-xl bg-white/10 border border-white/10" />
+                <select className="w-full p-3 rounded-xl bg-white/10 border border-white/10">
+                  <option>Credit Card</option>
+                  <option>PayPal</option>
+                </select>
+                <button type="submit" className="w-full p-4 rounded-xl bg-primary text-white font-bold">Complete Order</button>
+              </form>
+            </div>
+          </div>
+        </main>
 
         <div id="footer" data-section="footer">
-            <FooterLogoReveal
+          <FooterLogoReveal
             logoText="Nuts & Sweets"
             leftLink={{ text: "Products", href: "/products" }}
             rightLink={{ text: "Terms", href: "#" }}
-            />
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
@@ -11,6 +12,14 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 
 export default function LandingPage() {
+  const [cart, setCart] = useState<any[]>([]);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+
+  const addToCart = (product: any) => {
+    setCart((prev) => [...prev, product]);
+    setIsCartOpen(true);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -25,138 +34,112 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+              { name: "Products", id: "/products" },
-        {
+              { name: "Checkout", id: "/checkout" },
-          name: "Products",          id: "/products"},
+            ]}
-        {
+            brandName="Nuts & Sweets"
-          name: "Checkout",          id: "/checkout"},
+          />
-      ]}
+        </div>
-      brandName="Nuts & Sweets"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        {isCartOpen && (
-      <HeroLogo
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-      logoText="Nuts & Sweets"
+            <div className="bg-white p-6 rounded-lg w-full max-w-md">
-      description="Premium Nuts & Sweets, Crafted for Every Craving. Discover our curated selection of gourmet savory nuts, artisanal sweets, and delicacies sourced for exceptional taste. From everyday snacking to memorable gifting."
+              <h2 className="text-xl mb-4">Your Cart</h2>
-      buttons={[
+              {cart.length === 0 ? <p>Cart is empty</p> : cart.map((item, i) => <div key={i} className="mb-2">{item.name} - {item.price}</div>)}
-        {
+              <button className="mt-4 p-2 bg-gray-200 rounded" onClick={() => setIsCartOpen(false)}>Close</button>
-          text: "Explore All Products",          href: "/products"},
+            </div>
-      ]}
+          </div>
-      imageSrc="http://img.b2bpic.net/free-vector/flat-design-art-deco-story-pack_23-2149145829.jpg"
+        )}
-      imageAlt="Artisanal nuts and sweets assortment"
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="hero" data-section="hero">
-      <FeatureCardTwentyFour
+          <HeroLogo
-      animationType="slide-up"
+            logoText="Nuts & Sweets"
-      textboxLayout="split"
+            description="Premium Nuts & Sweets, Crafted for Every Craving. Discover our curated selection of gourmet savory nuts, artisanal sweets, and delicacies sourced for exceptional taste. From everyday snacking to memorable gifting."
-      useInvertedBackground={false}
+            buttons={[{ text: "Explore All Products", href: "/products" }]}
-      features={[
+            imageSrc="http://img.b2bpic.net/free-vector/flat-design-art-deco-story-pack_23-2149145829.jpg"
-        {
+            imageAlt="Artisanal nuts and sweets assortment"
-          id: "f1",          title: "Artisanal Nuts",          author: "Selection",          description: "Hand-roasted for perfect flavor.",          tags: [
+          />
-            "Premium",            "Savory"],
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/full-frame-red-delicious-fruit-slices_23-2147920854.jpg"},
-        {
-          id: "f2",          title: "Sweet Delicacies",          author: "Selection",          description: "Handcrafted sweets from top makers.",          tags: [
-            "Artisanal",            "Natural"],
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-spoon_23-2149629047.jpg"},
-        {
-          id: "f3",          title: "Gift-Ready",          author: "Selection",          description: "Beautiful packaging for every occasion.",          tags: [
-            "Gifting",            "Corporate"],
-          imageSrc: "http://img.b2bpic.net/free-photo/eastern-sweets_114579-8905.jpg"},
-      ]}
-      title="Crafted with Passion"
-      description="We source only the finest ingredients to create snacks that delight the palate and elevate the moment."
-    />
-  </div>
 
-  <div id="products" data-section="products">
+        <div id="features" data-section="features">
-      <ProductCardThree
+          <FeatureCardTwentyFour
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="split"
-      gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={false}
-      useInvertedBackground={false}
+            features={[
-      products={[
+              { id: "f1", title: "Artisanal Nuts", author: "Selection", description: "Hand-roasted for perfect flavor.", tags: ["Premium", "Savory"], imageSrc: "http://img.b2bpic.net/free-photo/full-frame-red-delicious-fruit-slices_23-2147920854.jpg" },
-        {
+              { id: "f2", title: "Sweet Delicacies", author: "Selection", description: "Handcrafted sweets from top makers.", tags: ["Artisanal", "Natural"], imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-spoon_23-2149629047.jpg" },
-          id: "p1",          name: "Roasted Macadamias",          price: "$15.00",          imageSrc: "http://img.b2bpic.net/free-photo/fried-panchitos_1368-8935.jpg"},
+              { id: "f3", title: "Gift-Ready", author: "Selection", description: "Beautiful packaging for every occasion.", tags: ["Gifting", "Corporate"], imageSrc: "http://img.b2bpic.net/free-photo/eastern-sweets_114579-8905.jpg" },
-        {
+            ]}
-          id: "p2",          name: "Artisan Truffles",          price: "$22.00",          imageSrc: "http://img.b2bpic.net/free-photo/slice-chocolate-cake-white-plate-with-fruit-crackers_114579-19106.jpg"},
+            title="Crafted with Passion"
-        {
+            description="We source only the finest ingredients to create snacks that delight the palate and elevate the moment."
-          id: "p3",          name: "Salted Pistachios",          price: "$18.00",          imageSrc: "http://img.b2bpic.net/free-photo/many-types-nuts-with-space-left_23-2147690256.jpg"},
+          />
-        {
+        </div>
-          id: "p4",          name: "Almond Brittle",          price: "$12.00",          imageSrc: "http://img.b2bpic.net/free-photo/nougats-plate-still-life-top-view_23-2149646310.jpg"},
-        {
-          id: "p5",          name: "Walnut Medley",          price: "$16.00",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-mixture-tasty-nuts_23-2148405863.jpg"},
-        {
-          id: "p6",          name: "Dark Chocolate Delights",          price: "$20.00",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-golden-cupcakes-wooden-board_23-2148579267.jpg"},
-      ]}
-      title="Signature Collection"
-      description="Experience our most loved savory nuts and sweet treats."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="products" data-section="products">
-      <MetricCardTwo
+          <ProductCardThree
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+            gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      metrics={[
+            products={[
-        {
+              { id: "p1", name: "Roasted Macadamias", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/fried-panchitos_1368-8935.jpg", onProductClick: () => addToCart({ name: "Roasted Macadamias", price: "$15.00" }) },
-          id: "m1",          value: "50+",          description: "Unique Flavor Profiles"},
+              { id: "p2", name: "Artisan Truffles", price: "$22.00", imageSrc: "http://img.b2bpic.net/free-photo/slice-chocolate-cake-white-plate-with-fruit-crackers_114579-19106.jpg", onProductClick: () => addToCart({ name: "Artisan Truffles", price: "$22.00" }) },
-        {
+              { id: "p3", name: "Salted Pistachios", price: "$18.00", imageSrc: "http://img.b2bpic.net/free-photo/many-types-nuts-with-space-left_23-2147690256.jpg", onProductClick: () => addToCart({ name: "Salted Pistachios", price: "$18.00" }) },
-          id: "m2",          value: "10k+",          description: "Happy Customers"},
+              { id: "p4", name: "Almond Brittle", price: "$12.00", imageSrc: "http://img.b2bpic.net/free-photo/nougats-plate-still-life-top-view_23-2149646310.jpg", onProductClick: () => addToCart({ name: "Almond Brittle", price: "$12.00" }) },
-        {
+              { id: "p5", name: "Walnut Medley", price: "$16.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-mixture-tasty-nuts_23-2148405863.jpg", onProductClick: () => addToCart({ name: "Walnut Medley", price: "$16.00" }) },
-          id: "m3",          value: "100%",          description: "Natural Ingredients"},
+              { id: "p6", name: "Dark Chocolate Delights", price: "$20.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-golden-cupcakes-wooden-board_23-2148579267.jpg", onProductClick: () => addToCart({ name: "Dark Chocolate Delights", price: "$20.00" }) },
-      ]}
+            ]}
-      title="Quality Assured"
+            title="Signature Collection"
-      description="Years of expertise in delivering gourmet happiness."
+            description="Experience our most loved savory nuts and sweet treats."
-    />
+          />
-  </div>
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="metrics" data-section="metrics">
-      <TestimonialCardOne
+          <MetricCardTwo
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
+            gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      testimonials={[
+            metrics={[
-        {
+              { id: "m1", value: "50+", description: "Unique Flavor Profiles" },
-          id: "t1",          name: "Sarah J.",          role: "Food Blogger",          company: "TastyLife",          rating: 5,
+              { id: "m2", value: "10k+", description: "Happy Customers" },
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-beautiful-female-green-shirt-holding-plate-full-fruits-white-sign-cream-wall-fruit-model-woman-food-vitamine-color_140725-35829.jpg"},
+              { id: "m3", value: "100%", description: "Natural Ingredients" },
-        {
+            ]}
-          id: "t2",          name: "Mark D.",          role: "Marketing Director",          company: "CorpGifts",          rating: 5,
+            title="Quality Assured"
-          imageSrc: "http://img.b2bpic.net/free-photo/man-black-suit-unwrapping-gift_23-2148401448.jpg"},
+            description="Years of expertise in delivering gourmet happiness."
-        {
+          />
-          id: "t3",          name: "Emily R.",          role: "Customer",          company: "Home",          rating: 5,
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-street-food-outdoors_23-2148952911.jpg"},
-        {
-          id: "t4",          name: "David K.",          role: "Culinary Critic",          company: "FoodReview",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-cafe-drinking-coffee-working-computer_1303-14698.jpg"},
-        {
-          id: "t5",          name: "Lisa B.",          role: "Customer",          company: "Home",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-african-american-man-holding-raw-hazelnuts-cereal-bar-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-11113.jpg"},
-      ]}
-      title="Loved by Our Fans"
-      description="See why our snacks are the highlight of every gathering."
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="testimonials" data-section="testimonials">
-      <FooterLogoReveal
+          <TestimonialCardOne
-      logoText="Nuts & Sweets"
+            animationType="slide-up"
-      leftLink={{
+            textboxLayout="default"
-        text: "Products",        href: "/products"}}
+            gridVariant="three-columns-all-equal-width"
-      rightLink={{
+            useInvertedBackground={false}
-        text: "Terms",        href: "#"}}
+            testimonials={[
-    />
+              { id: "t1", name: "Sarah J.", role: "Food Blogger", company: "TastyLife", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-beautiful-female-green-shirt-holding-plate-full-fruits-white-sign-cream-wall-fruit-model-woman-food-vitamine-color_140725-35829.jpg" },
-  </div>
+              { id: "t2", name: "Mark D.", role: "Marketing Director", company: "CorpGifts", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-black-suit-unwrapping-gift_23-2148401448.jpg" },
+              { id: "t3", name: "Emily R.", role: "Customer", company: "Home", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-street-food-outdoors_23-2148952911.jpg" },
+              { id: "t4", name: "David K.", role: "Culinary Critic", company: "FoodReview", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-cafe-drinking-coffee-working-computer_1303-14698.jpg" },
+              { id: "t5", name: "Lisa B.", role: "Customer", company: "Home", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-african-american-man-holding-raw-hazelnuts-cereal-bar-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-11113.jpg" },
+            ]}
+            title="Loved by Our Fans"
+            description="See why our snacks are the highlight of every gathering."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Nuts & Sweets"
+            leftLink={{ text: "Products", href: "/products" }}
+            rightLink={{ text: "Terms", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
+  --background: #ffffff;
-  --card: #f3ede2;
+  --card: #f9f9f9;
-  --foreground: #2e2521;
+  --foreground: #120a00e6;
-  --primary-cta: #2e2521;
+  --primary-cta: #FF7B05;
-  --primary-cta-text: #fcf6ec;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #2e2521;
+  --secondary-cta-text: #120a00e6;
-  --accent: #b2a28b;
+  --accent: #e2e2e2;
-  --background-accent: #b2a28b;
+  --background-accent: #FF7B05;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);