add buy buttons and carts

index.html

@@ -54,25 +54,147 @@
                     <a href="#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
                     <a href="#about" class="text-white hover:text-yellow-500 transition">About</a>
                 </div>
-                
                 <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <button id="cart-button" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500 hover:bg-yellow-500 hover:text-black transition">
+                            <i data-feather="shopping-cart" class="text-yellow-500 hover:text-black"></i>
+                            <span id="cart-count" class="text-white">0</span>
+                        </button>
+                        <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-black border border-yellow-500 rounded-lg shadow-lg py-2 z-20">
+                            <div class="px-4 py-2 text-white border-b border-gray-700">Your Cart</div>
+                            <div id="cart-items" class="max-h-60 overflow-y-auto">
+                                <div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>
+                            </div>
+                            <div class="px-4 py-2 border-t border-gray-700">
+                                <button id="checkout-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 rounded transition disabled:opacity-50" disabled>
+                                    Checkout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                     <div class="relative group">
                         <button class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500">
                             <i data-feather="globe" class="text-yellow-500"></i>
                             <span class="text-white">EN</span>
                         </button>
-                        <div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden group-hover:block">
+<div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden group-hover:block">
                             <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">English</a>
                             <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Español</a>
                             <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Français</a>
                             <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Deutsch</a>
                         </div>
                     </div>
-                    
                     <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
                         <i data-feather="user" class="mr-2"></i> Login
                     </button>
-                </div>
+                    <script>
+                        // Cart functionality
+                        let cart = [];
+                        const cartButton = document.getElementById('cart-button');
+                        const cartDropdown = document.getElementById('cart-dropdown');
+                        const cartCount = document.getElementById('cart-count');
+                        const cartItems = document.getElementById('cart-items');
+                        const checkoutBtn = document.getElementById('checkout-btn');
+                        
+                        function updateCart() {
+                            cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
+                            
+                            if(cart.length === 0) {
+                                cartItems.innerHTML = '<div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>';
+                                checkoutBtn.disabled = true;
+                            } else {
+                                cartItems.innerHTML = cart.map(item => `
+                                    <div class="px-4 py-3 border-b border-gray-700 flex justify-between items-center">
+                                        <div>
+                                            <div class="font-medium">${item.name}</div>
+                                            <div class="text-sm text-gray-400">${item.price}/mo</div>
+                                        </div>
+                                        <div class="flex items-center">
+                                            <button class="decrease-item text-gray-400 hover:text-yellow-500 p-1" data-id="${item.id}">
+                                                <i data-feather="minus" class="w-4 h-4"></i>
+                                            </button>
+                                            <span class="mx-2">${item.quantity}</span>
+                                            <button class="increase-item text-gray-400 hover:text-yellow-500 p-1" data-id="${item.id}">
+                                                <i data-feather="plus" class="w-4 h-4"></i>
+                                            </button>
+                                            <button class="remove-item text-gray-400 hover:text-red-500 ml-2 p-1" data-id="${item.id}">
+                                                <i data-feather="trash-2" class="w-4 h-4"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                `).join('');
+                                
+                                // Calculate total
+                                const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+                                cartItems.innerHTML += `
+                                    <div class="px-4 py-3 bg-gray-900 flex justify-between font-bold">
+                                        <span>Total:</span>
+                                        <span>${total.toFixed(2)}/mo</span>
+                                    </div>
+                                `;
+                                
+                                checkoutBtn.disabled = false;
+                                
+                                // Re-render feather icons
+                                feather.replace();
+                                
+                                // Add event listeners to new buttons
+                                document.querySelectorAll('.increase-item').forEach(btn => {
+                                    btn.addEventListener('click', (e) => {
+                                        const id = e.target.closest('button').dataset.id;
+                                        const item = cart.find(i => i.id === id);
+                                        if(item) {
+                                            item.quantity++;
+                                            updateCart();
+                                        }
+                                    });
+                                });
+                                
+                                document.querySelectorAll('.decrease-item').forEach(btn => {
+                                    btn.addEventListener('click', (e) => {
+                                        const id = e.target.closest('button').dataset.id;
+                                        const item = cart.find(i => i.id === id);
+                                        if(item && item.quantity > 1) {
+                                            item.quantity--;
+                                            updateCart();
+                                        }
+                                    });
+                                });
+                                
+                                document.querySelectorAll('.remove-item').forEach(btn => {
+                                    btn.addEventListener('click', (e) => {
+                                        const id = e.target.closest('button').dataset.id;
+                                        cart = cart.filter(i => i.id !== id);
+                                        updateCart();
+                                    });
+                                });
+                            }
+                        }
+                        
+                        cartButton.addEventListener('click', () => {
+                            cartDropdown.classList.toggle('hidden');
+                        });
+                        
+                        // Close cart when clicking outside
+                        document.addEventListener('click', (e) => {
+                            if(!cartButton.contains(e.target) && !cartDropdown.contains(e.target)) {
+                                cartDropdown.classList.add('hidden');
+                            }
+                        });
+                        
+                        // Add to cart functionality
+                        function addToCart(item) {
+                            const existingItem = cart.find(i => i.id === item.id);
+                            if(existingItem) {
+                                existingItem.quantity++;
+                            } else {
+                                cart.push({...item, quantity: 1});
+                            }
+                            updateCart();
+                            cartDropdown.classList.remove('hidden');
+                        }
+                    </script>
+</div>
             </div>
         </div>
     </nav>
@@ -267,10 +389,15 @@
                             <span class="text-gray-500">Limited professional access</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition mb-2">
-                        Start Free Trial
+                    <button onclick="addToCart({
+                        id: 'basic-plan',
+                        name: 'Basic Plan',
+                        price: 19,
+                        description: 'Unlimited VR/AR scenarios with advanced biometric tracking'
+                    })" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition mb-2 flex items-center justify-center">
+                        <i data-feather="shopping-cart" class="mr-2"></i> Add to Cart
                     </button>
-                    <p class="text-xs text-center text-gray-400">No credit card required</p>
+<p class="text-xs text-center text-gray-400">No credit card required</p>
 </div>
                 <!-- Elite Tier -->
                 <div class="bg-gradient-to-b from-gray-900 to-black p-8 rounded-xl border border-red-500 transform hover:scale-105 transition md:col-span-1">
@@ -309,10 +436,15 @@
                             <span>Personalized training plan</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 rounded-lg transition mb-2">
-                        Start Free Trial
+                    <button onclick="addToCart({
+                        id: 'elite-plan',
+                        name: 'Elite Plan', 
+                        price: 49,
+                        description: 'Full suite with AI analysis, custom builds, and coaching'
+                    })" class="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 rounded-lg transition mb-2 flex items-center justify-center">
+                        <i data-feather="shopping-cart" class="mr-2"></i> Add to Cart
                     </button>
-                    <p class="text-xs text-center text-gray-400">No credit card required</p>
+<p class="text-xs text-center text-gray-400">No credit card required</p>
 </div>
             </div>
         </div>