10-16-2025

assets/css/chatbot.css

@@ -0,0 +1,130 @@
+/* assets/css/chatbot.css */
+#chat-widget-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+#chat-icon {
+    width: 60px;
+    height: 60px;
+    background-color: #007bff;
+    border-radius: 50%;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    transition: background-color 0.3s;
+}
+
+#chat-icon:hover {
+    background-color: #0056b3;
+}
+
+#chat-icon svg {
+    width: 30px;
+    height: 30px;
+}
+
+#chat-window {
+    display: none;
+    position: fixed;
+    bottom: 90px;
+    right: 20px;
+    width: 350px;
+    max-width: 90vw;
+    height: 500px;
+    max-height: 70vh;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: none;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#chat-window.open {
+    display: flex;
+}
+
+#chat-header {
+    background-color: #007bff;
+    color: white;
+    padding: 15px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#close-chat {
+    cursor: pointer;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 20px;
+}
+
+#chat-messages {
+    flex-grow: 1;
+    padding: 15px;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+    display: flex;
+    flex-direction: column;
+}
+
+#chat-input-container {
+    padding: 15px;
+    border-top: 1px solid #eee;
+    display: flex;
+}
+
+#chat-input {
+    flex-grow: 1;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    padding: 10px 15px;
+    font-size: 14px;
+    margin-right: 10px;
+}
+
+#chat-send {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#chat-send:hover {
+    background-color: #0056b3;
+}
+
+.chat-message {
+    padding: 10px 15px;
+    border-radius: 18px;
+    margin-bottom: 10px;
+    max-width: 80%;
+    word-wrap: break-word;
+}
+
+.chat-message.user {
+    background-color: #007bff;
+    color: white;
+    align-self: flex-end;
+}
+
+.chat-message.bot {
+    background-color: #e9e9eb;
+    color: #333;
+    align-self: flex-start;
+}

assets/js/chatbot.js

@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const chatIcon = document.getElementById('chat-icon');
+    const chatWindow = document.getElementById('chat-window');
+    const closeChat = document.getElementById('close-chat');
+    const chatInput = document.getElementById('chat-input');
+    const chatSend = document.getElementById('chat-send');
+    const chatMessages = document.getElementById('chat-messages');
+
+    chatIcon.addEventListener('click', () => {
+        chatWindow.classList.toggle('open');
+    });
+
+    closeChat.addEventListener('click', () => {
+        chatWindow.classList.remove('open');
+    });
+
+    const addMessage = (message, sender) => {
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('chat-message', sender);
+        messageElement.textContent = message;
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    };
+
+    const handleSendMessage = () => {
+        const message = chatInput.value.trim();
+        if (message) {
+            addMessage(message, 'user');
+            chatInput.value = '';
+
+            // Placeholder bot response
+            setTimeout(() => {
+                addMessage("Thanks for your message! I'm just a prototype, but I'll be able to help soon.", 'bot');
+            }, 1000);
+        }
+    };
+
+    chatSend.addEventListener('click', handleSendMessage);
+
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            handleSendMessage();
+        }
+    });
+
+    // Initial bot message
+    setTimeout(() => {
+        addMessage("Hello! How can I help you today?", 'bot');
+    }, 1500);
+});

index.php

@@ -17,6 +17,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter&family=Lora:wght@700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" href="assets/css/chatbot.css?v=<?php echo time(); ?>">
     <style>
         .kpi-card {
             margin-bottom: 1.5rem;
@@ -129,7 +130,8 @@
                     <p>Our AI generates clear, actionable diagrams that map out your entire customer journey and the internal processes required to support it.</p>
                 </div>
                 <div class="col-md-6">
-                    <div class="mermaid">graph TD
+                    <div style="max-width: 50%; margin: auto;">
+                        <div class="mermaid">graph TD
     subgraph "GTM Strategy Workflow"
         A[Start] --> B[Input Market & Product Data];
         B --> C{Generate GTM Strategy};
@@ -141,6 +143,7 @@
         F --> H[Monitor KPIs & Optimize];
         H --> F;
     end</div>
+                    </div>
                 </div>
             </div>
         </section>
@@ -150,87 +153,88 @@
             <div class="container">
                 <div class="text-center mb-5">
                     <h2>Track Your Progress</h2>
-                    <p class="lead">A fully customizable dashboard to monitor your key metrics and GTM goals</p>
+                    <p class="lead text-white-50">A fully customizable dashboard to monitor your key metrics and GTM goals</p>
                 </div>
                 <div class="row">
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Revenue</h5>
-                                <p class="kpi-value">$250,000</p>
+                                <p class="kpi-value text-white">$250,000</p>
-                                <p class="card-text">Target: $300,000 <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: $300,000 <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Revenue Growth (MoM)</h5>
-                                <p class="kpi-value">15%</p>
+                                <p class="kpi-value text-white">15%</p>
-                                <p class="card-text">Target: 20% <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: 20% <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Gross Profit Margin</h5>
-                                <p class="kpi-value">60%</p>
+                                <p class="kpi-value text-white">60%</p>
-                                <p class="card-text">Target: 65% <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: 65% <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Customer Acquisition Cost (CAC)</h5>
-                                <p class="kpi-value">$120</p>
+                                <p class="kpi-value text-white">$120</p>
-                                <p class="card-text">Target: $100 <span class="trend-down">&#9660;</span></p>
+                                <p class="card-text text-white-50">Target: $100 <span class="trend-down">&#9660;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Operating Expenses</h5>
-                                <p class="kpi-value">$50,000</p>
+                                <p class="kpi-value text-white">$50,000</p>
-                                <p class="card-text">Target: $45,000 <span class="trend-down">&#9660;</span></p>
+                                <p class="card-text text-white-50">Target: $45,000 <span class="trend-down">&#9660;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Net Operating Income</h5>
-                                <p class="kpi-value">$100,000</p>
+                                <p class="kpi-value text-white">$100,000</p>
-                                <p class="card-text">Target: $120,000 <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: $120,000 <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">New Customers Added</h5>
-                                <p class="kpi-value">50</p>
+                                <p class="kpi-value text-white">50</p>
-                                <p class="card-text">Target: 60 <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: 60 <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark.
+ text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Total Customers</h5>
-                                <p class="kpi-value">500</p>
+                                <p class="kpi-value text-white">500</p>
-                                <p class="card-text">Target: 550 <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: 550 <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 col-md-6 mb-4">
-                        <div class="card bg-secondary text-white h-100">
+                        <div class="card h-100 bg-dark text-white">
                             <div class="card-body">
                                 <h5 class="card-title">Annual Recurring Revenue (ARR)</h5>
-                                <p class="kpi-value">$3,000,000</p>
+                                <p class="kpi-value text-white">$3,000,000</p>
-                                <p class="card-text">Target: $3,500,000 <span class="trend-up">&#9650;</span></p>
+                                <p class="card-text text-white-50">Target: $3,500,000 <span class="trend-up">&#9650;</span></p>
                             </div>
                         </div>
                     </div>
@@ -272,5 +276,30 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+    <script src="assets/js/chatbot.js?v=<?php echo time(); ?>"></script>
+
+    <!-- Chatbot Widget -->
+    <div id="chat-widget-container">
+        <div id="chat-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
+            </svg>
+        </div>
+        <div id="chat-window">
+            <div id="chat-header">
+                <span>Chat with us</span>
+                <button id="close-chat">&times;</button>
+            </div>
+            <div id="chat-messages"></div>
+            <div id="chat-input-container">
+                <input type="text" id="chat-input" placeholder="Type a message...">
+                <button id="chat-send">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
+                        <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
 </body>
 </html>