Update src/app/page.tsx

src/app/page.tsx

@@ -8,8 +8,66 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Sparkles, Zap } from "lucide-react";
+import { useState } from "react";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  price: string;
+  quantity: number;
+  colour?: string;
+  size?: string;
+}
 
 export default function LandingPage() {
+  const [cartItems, setCartItems] = useState<OrderItem[]>([]);
+
+  const handleAddToCart = (productId: string, productName: string, productPrice: string, colour?: string, size?: string) => {
+    const existingItem = cartItems.find(item => item.id === productId && item.colour === colour && item.size === size);
+    
+    if (existingItem) {
+      setCartItems(cartItems.map(item =>
+        item.id === productId && item.colour === colour && item.size === size
+          ? { ...item, quantity: item.quantity + 1 }
+          : item
+      ));
+    } else {
+      setCartItems([...cartItems, {
+        id: productId,
+        name: productName,
+        price: productPrice,
+        quantity: 1,
+        colour,
+        size
+      }]);
+    }
+  };
+
+  const handleCheckout = async (cartData: OrderItem[]) => {
+    try {
+      const response = await fetch('/api/send-order-confirmation', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          items: cartData,
+          recipientEmail: 'sanaariclothing@gmail.com',
+          timestamp: new Date().toISOString(),
+        }),
+      });
+
+      if (response.ok) {
+        console.log('Order confirmation email sent successfully');
+        setCartItems([]);
+      } else {
+        console.error('Failed to send order confirmation email');
+      }
+    } catch (error) {
+      console.error('Error sending order confirmation:', error);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -192,4 +250,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}