Spaces:
Running
Running
File size: 5,889 Bytes
19a4240 89c0408 19a4240 89c0408 19a4240 89c0408 77d2e64 89c0408 77d2e64 89c0408 cb1d62b 89c0408 19a4240 89c0408 77d2e64 19a4240 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!DOCTYPE html>
<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> |