Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>AI-Powered Chat-Driven Data Dashboards</title> | |
| <!-- Tailwind CSS CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Optional: Tailwind config for extended colors (if needed) --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: "#4A90E2", | |
| secondary: "#50E3C2", | |
| feature1: "#F5A623", | |
| feature2: "#D0021B", | |
| feature3: "#9013FE", | |
| }, | |
| }, | |
| }, | |
| }; | |
| </script> | |
| <!-- Font Awesome for icons --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> | |
| </head> | |
| <body class="font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="bg-primary text-white"> | |
| <div class="container mx-auto flex items-center justify-between py-4 px-6"> | |
| <a class="text-2xl font-bold" href="#">DataDash</a> | |
| <button id="menu-btn" class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <ul id="menu" class="hidden md:flex space-x-8"> | |
| <li><a href="#" class="hover:text-gray-200">Home</a></li> | |
| <li><a href="#" class="hover:text-gray-200">Features</a></li> | |
| <li><a href="#" class="hover:text-gray-200">Pricing</a></li> | |
| <li><a href="#" class="hover:text-gray-200">Contact</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="bg-secondary text-white text-center py-20"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold mb-4"> | |
| AI-Powered Chat-Driven Data Dashboards | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8"> | |
| Transform your data into actionable insights with our intelligent dashboards. | |
| </p> | |
| <a | |
| href="#features" | |
| class="bg-white text-secondary font-semibold py-3 px-6 rounded-full shadow-lg hover:bg-gray-200 transition duration-300" | |
| >Explore Features</a | |
| > | |
| </div> | |
| </header> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Features</h2> | |
| <div class="flex flex-wrap justify-center gap-8"> | |
| <div class="w-full md:w-1/3 p-4"> | |
| <div class="bg-feature1 p-8 rounded-xl text-center transform transition duration-300 hover:scale-105 shadow-lg"> | |
| <h3 class="text-xl font-bold mb-2">Real-Time Analytics</h3> | |
| <p>Get instant insights and make data-driven decisions on the fly.</p> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/3 p-4"> | |
| <div class="bg-feature2 p-8 rounded-xl text-center transform transition duration-300 hover:scale-105 shadow-lg"> | |
| <h3 class="text-xl font-bold mb-2">Interactive Dashboards</h3> | |
| <p>Engage with your data through customizable and interactive dashboards.</p> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/3 p-4"> | |
| <div class="bg-feature3 p-8 rounded-xl text-center transform transition duration-300 hover:scale-105 shadow-lg"> | |
| <h3 class="text-xl font-bold mb-2">AI Chat Integration</h3> | |
| <p>Leverage AI chat to query your data and receive instant feedback.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section id="contact" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Get in Touch</h2> | |
| <form id="contactForm" class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-semibold mb-2">Name:</label> | |
| <input | |
| type="text" | |
| id="name" | |
| class="w-full border border-gray-300 p-3 rounded focus:outline-none focus:border-primary" | |
| placeholder="Enter your name" | |
| required | |
| /> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-semibold mb-2">Email:</label> | |
| <input | |
| type="email" | |
| id="email" | |
| class="w-full border border-gray-300 p-3 rounded focus:outline-none focus:border-primary" | |
| placeholder="Enter your email" | |
| required | |
| /> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 font-semibold mb-2">Message:</label> | |
| <textarea | |
| id="message" | |
| class="w-full border border-gray-300 p-3 rounded focus:outline-none focus:border-primary" | |
| placeholder="Your message" | |
| required | |
| ></textarea> | |
| </div> | |
| <button | |
| type="submit" | |
| class="w-full bg-primary text-white py-3 rounded hover:bg-blue-700 transition duration-300" | |
| > | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-white py-4"> | |
| <div class="container mx-auto text-center"> | |
| <p>Copyright © 2025 DataDash. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- jQuery (Optional: if you prefer to use it for simple interactions) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| $("#contactForm").submit(function (e) { | |
| e.preventDefault(); | |
| alert("Thank you for your message! We will get back to you shortly."); | |
| $(this).trigger("reset"); // Reset the form after submission | |
| }); | |
| // Toggle mobile menu | |
| $("#menu-btn").click(function () { | |
| $("#menu").toggleClass("hidden"); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |