Merge version_7 into main

Merge version_7 into main

src/app/page.tsx

@@ -1,6 +1,7 @@
-"use client"
+"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é"
@@ -49,10 +132,10 @@ export default function LandingPage() {
           tagIcon={Sparkles}
           mediaItems={[
             { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971764353-ff9r0lol.jpg", imageAlt: "Model in elegant dress on runway" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970902462-fq7d1eo0.jpg", imageAlt: "Fashion model wearing luxury dress" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973505965-qfwdihin.jpg", imageAlt: "Fashion model wearing luxury dress" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970905364-bxf6hnts.jpg", imageAlt: "Professional fashion photoshoot" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973506470-pgtm7e08.jpg", imageAlt: "Professional fashion photoshoot" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837898715-8pzezwwo.jpg", imageAlt: "Model with professional styling" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973606721-tswb1gx1.jpg", imageAlt: "Model with professional styling" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971765388-hloexpv0.jpg", imageAlt: "Beautiful clothing showcase" }
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973607520-6x9nj9qs.jpg", imageAlt: "Beautiful clothing showcase" }
           ]}
           buttons={[
             { text: "Shop Collection", href: "products" },
@@ -72,21 +155,21 @@ export default function LandingPage() {
               id: "1",
               name: "Premium Evening Dress",
               price: "$450",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247953617-xl6i8c5j.jpg",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg",
               imageAlt: "Elegant evening gown"
             },
             {
               id: "2",
               name: "Luxury Wool Jacket",
               price: "$380",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971768697-xkpx9fpx.jpg",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg",
               imageAlt: "Designer wool jacket"
             },
             {
               id: "3",
               name: "Tailored Trousers",
               price: "$220",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971769776-x7dk3os7.jpg",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg",
               imageAlt: "Premium tailored pants"
             }
           ]}
@@ -95,6 +178,43 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground="noInvert"
         />
+        
+        {/* Add to Cart buttons for products - inline UI as workaround */}
+        <div className="flex justify-center gap-4 mt-8">
+          <button
+            onClick={() => handleAddToCart("1", "Premium Evening Dress", "$450", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg", "Elegant evening gown")}
+            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+          >
+            Add Evening Dress to Cart
+          </button>
+          <button
+            onClick={() => handleAddToCart("2", "Luxury Wool Jacket", "$380", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg", "Designer wool jacket")}
+            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+          >
+            Add Wool Jacket to Cart
+          </button>
+          <button
+            onClick={() => handleAddToCart("3", "Tailored Trousers", "$220", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg", "Premium tailored pants")}
+            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+          >
+            Add Trousers to Cart
+          </button>
+        </div>
+        
+        {/* Cart Button */}
+        <div className="fixed top-4 right-4 z-40">
+          <button
+            onClick={() => setShowCart(!showCart)}
+            className="bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-full shadow-lg transition-colors flex items-center gap-2"
+          >
+            <ShoppingCart size={24} />
+            {totalItems > 0 && (
+              <span className="bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                {totalItems}
+              </span>
+            )}
+          </button>
+        </div>
       </div>
       
       <div id="about" data-section="about">