Add a chat functionality to the live stream component, allowing viewers to interact with the seller and each other during broadcasts. And buyer can buy anything during broadcast.

index.html

@@ -461,9 +461,114 @@
             </div>
         </div>
     </section>
+    <!-- Live Stream Marketplace Section -->
+    <section class="py-16 px-4 bg-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex items-center justify-between mb-10">
+                <h2 class="text-3xl font-bold">
+                    <span class="gradient-text">Live Shopping</span> Broadcasts
+                </h2>
+                <a href="#" class="flex items-center text-primary-500 hover:text-primary-400 transition">
+                    View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i>
+                </a>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Live Stream Card -->
+                <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg">
+                    <div class="relative h-96 overflow-hidden">
+                        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+                            <div class="text-center">
+                                <i data-feather="play-circle" class="w-16 h-16 text-primary-500 mx-auto mb-4"></i>
+                                <span class="text-white text-xl font-bold">Live Now</span>
+                            </div>
+                        </div>
+                        <img src="http://static.photos/workspace/1024x576/1" alt="Live Stream" class="w-full h-full object-cover">
+                        <div class="absolute bottom-4 left-4 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold">
+                            LIVE
+                        </div>
+                        <div class="absolute bottom-4 right-4 bg-gray-900 text-white px-2 py-1 rounded-full text-xs font-bold">
+                            128 Viewers
+                        </div>
+                    </div>
+                    <div class="p-4 h-64 flex flex-col">
+                        <div class="flex items-center mb-4">
+                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
+                                <img src="http://static.photos/people/200x200/8" alt="Seller" class="w-full h-full object-cover">
+                            </div>
+                            <div>
+                                <h4 class="font-bold">CraftyHands Studio</h4>
+                                <p class="text-sm text-gray-400">Macrame & Home Decor</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Chat Section -->
+                        <div class="flex-1 bg-gray-800 rounded-lg overflow-hidden flex flex-col">
+                            <div id="chatMessages" class="flex-1 p-3 space-y-2 overflow-y-auto text-sm">
+                                <div class="bg-gray-700 rounded-lg p-2 max-w-xs">
+                                    <span class="font-bold text-primary-500">Sarah:</span> Love that wall hanging!
+                                </div>
+                                <div class="bg-gray-700 rounded-lg p-2 max-w-xs ml-auto">
+                                    <span class="font-bold text-green-500">Seller:</span> Thanks! It's 100% handmade.
+                                </div>
+                            </div>
+                            <div class="border-t border-gray-700 p-2">
+                                <div class="flex">
+                                    <input type="text" placeholder="Type your message..." 
+                                        class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary-500">
+                                    <button class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-2 rounded-r-lg transition">
+                                        <i data-feather="send" class="w-4 h-4"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Buy Now Button -->
+                        <button class="mt-4 w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
+                            Buy Now - $45.00
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Upcoming Streams -->
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Upcoming Streams</h3>
+                    <div class="space-y-4">
+                        <!-- Upcoming Stream 1 -->
+                        <div class="bg-gray-700 rounded-lg p-4 flex items-center">
+                            <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
+                                <img src="http://static.photos/craft/200x200/5" alt="Upcoming" class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="font-bold">Pottery Workshop</h4>
+                                <p class="text-sm text-gray-400">Tomorrow, 3PM EST</p>
+                            </div>
+                            <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-lg text-sm transition">
+                                Remind Me
+                            </button>
+                        </div>
+                        
+                        <!-- Upcoming Stream 2 -->
+                        <div class="bg-gray-700 rounded-lg p-4 flex items-center">
+                            <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
+                                <img src="http://static.photos/food/200x200/5" alt="Upcoming" class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="font-bold">Bakery Surprise Box</h4>
+                                <p class="text-sm text-gray-400">Friday, 10AM EST</p>
+                            </div>
+                            <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-lg text-sm transition">
+                                Remind Me
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 
     <!-- CTA Section -->
-    <section class="py-20 px-4 bg-gradient-to-r from-gray-800 to-gray-900">
+<section class="py-20 px-4 bg-gradient-to-r from-gray-800 to-gray-900">
         <div class="max-w-4xl mx-auto text-center">
             <h2 class="text-3xl md:text-5xl font-bold mb-6">
                 Ready to Join the <span class="gradient-text">YourHand.co</span> Community?
@@ -481,6 +586,45 @@
             </div>
         </div>
     </section>
+    <!-- Add Live Stream Script -->
+    <script>
+        // Live stream chat functionality
+        const chatMessages = document.getElementById('chatMessages');
+        const chatInput = document.querySelector('#chatMessages + div input');
+        const chatSendBtn = document.querySelector('#chatMessages + div button');
+
+        chatSendBtn.addEventListener('click', () => {
+            if (chatInput.value.trim() !== '') {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'bg-gray-700 rounded-lg p-2 max-w-xs ml-auto';
+                messageDiv.innerHTML = `<span class="font-bold">You:</span> ${chatInput.value}`;
+                chatMessages.appendChild(messageDiv);
+                chatInput.value = '';
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+        });
+
+        // Simulate incoming messages
+        setInterval(() => {
+            const messages = [
+                {user: 'Alex', text: 'How long did that take to make?'},
+                {user: 'Seller', text: 'About 8 hours total work!', isSeller: true},
+                {user: 'Jamie', text: 'Do you do custom colors?'},
+                {user: 'Taylor', text: 'Just bought one - so excited!'}
+            ];
+            
+            const randomMsg = messages[Math.floor(Math.random() * messages.length)];
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'bg-gray-700 rounded-lg p-2 max-w-xs';
+            if (randomMsg.isSeller) {
+                messageDiv.innerHTML = `<span class="font-bold text-green-500">Seller:</span> ${randomMsg.text}`;
+            } else {
+                messageDiv.innerHTML = `<span class="font-bold text-primary-500">${randomMsg.user}:</span> ${randomMsg.text}`;
+            }
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }, 10000);
+    </script>
 
     <!-- Footer -->
 <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 relative z-10">