Merge version_7 into main

Merge version_7 into main

src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -11,9 +12,51 @@ import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Sparkles, Star, Users } from "lucide-react";
+import { Sparkles, Star, Users, ShoppingCart, X } from "lucide-react";
+
+interface CartItem {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt: string;
+  quantity: number;
+}
 
 export default function LandingPage() {
+  const [cartItems, setCartItems] = useState<CartItem[]>([]);
+  const [showCart, setShowCart] = useState(false);
+
+  const handleAddToCart = (productId: string, productName: string, productPrice: string, productImage: string, productAlt: string) => {
+    setCartItems(prevItems => {
+      const existingItem = prevItems.find(item => item.id === productId);
+      if (existingItem) {
+        return prevItems.map(item =>
+          item.id === productId ? { ...item, quantity: item.quantity + 1 } : item
+        );
+      }
+      return [...prevItems, { id: productId, name: productName, price: productPrice, imageSrc: productImage, imageAlt: productAlt, quantity: 1 }];
+    });
+  };
+
+  const handleRemoveFromCart = (productId: string) => {
+    setCartItems(prevItems => prevItems.filter(item => item.id !== productId));
+  };
+
+  const handleUpdateQuantity = (productId: string, quantity: number) => {
+    if (quantity <= 0) {
+      handleRemoveFromCart(productId);
+    } else {
+      setCartItems(prevItems =>
+        prevItems.map(item =>
+          item.id === productId ? { ...item, quantity } : item
+        )
+      );
+    }
+  };
+
+  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -27,6 +70,46 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="semibold"
     >
+      {/* Shopping Cart Modal */}
+      {showCart && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full max-h-96 flex flex-col">
+            <div className="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
+              <h2 className="text-xl font-semibold">Shopping Cart ({totalItems})</h2>
+              <button onClick={() => setShowCart(false)} className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                <X size={24} />
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto p-4">
+              {cartItems.length === 0 ? (
+                <p className="text-center text-gray-500 py-8">Your cart is empty</p>
+              ) : (
+                <div className="space-y-4">
+                  {cartItems.map(item => (
+                    <div key={item.id} className="flex gap-3 border-b border-gray-200 dark:border-gray-700 pb-4">
+                      <img src={item.imageSrc} alt={item.imageAlt} className="w-16 h-16 object-cover rounded" />
+                      <div className="flex-1">
+                        <h3 className="font-medium text-sm">{item.name}</h3>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">{item.price}</p>
+                        <div className="flex items-center gap-2 mt-2">
+                          <button onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)} className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600">-</button>
+                          <span className="text-xs">{item.quantity}</span>
+                          <button onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)} className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600">+</button>
+                          <button onClick={() => handleRemoveFromCart(item.id)} className="ml-auto text-xs text-red-600 dark:text-red-400 hover:underline">Remove</button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+              <button className="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">Checkout</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           brandName="Luxé"
@@ -73,27 +156,35 @@ export default function LandingPage() {
               name: "Premium Evening Dress",
               price: "$450",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg",
-              imageAlt: "Elegant evening gown"
+              imageAlt: "Elegant evening gown",
+              button: { text: "Add to Cart", onClick: () => handleAddToCart("1", "Premium Evening Dress", "$450", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg", "Elegant evening gown") }
             },
             {
               id: "2",
               name: "Luxury Wool Jacket",
               price: "$380",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg",
-              imageAlt: "Designer wool jacket"
+              imageAlt: "Designer wool jacket",
+              button: { text: "Add to Cart", onClick: () => handleAddToCart("2", "Luxury Wool Jacket", "$380", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg", "Designer wool jacket") }
             },
             {
               id: "3",
               name: "Tailored Trousers",
               price: "$220",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg",
-              imageAlt: "Premium tailored pants"
+              imageAlt: "Premium tailored pants",
+              button: { text: "Add to Cart", onClick: () => handleAddToCart("3", "Tailored Trousers", "$220", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg", "Premium tailored pants") }
             }
           ]}
           gridVariant="uniform-alternating-sizes"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
+          cartButton={{
+            icon: ShoppingCart,
+            onClick: () => setShowCart(!showCart),
+            badge: totalItems > 0 ? totalItems : undefined
+          }}
         />
       </div>