mmt8/olaboard-data-visualization-delight
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Olaboard - Beautiful Data Visualizations</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 .hero-gradient {14 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);15 }16 .card-hover {17 transition: all 0.3s ease;18 }19 .card-hover:hover {20 transform: translateY(-5px);21 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);22 }23 .rotate-animation {24 animation: rotate 15s linear infinite;25 }26 @keyframes rotate {27 from { transform: rotate(0deg); }28 to { transform: rotate(360deg); }29 }30 </style>31</head>32<body class="font-sans antialiased text-gray-900">33 <div id="vanta-bg" class="fixed inset-0 z-0 opacity-20"></div>34 35 <!-- Navigation -->36 <nav class="relative z-10 py-6 px-6 md:px-12 bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm">37 <div class="max-w-7xl mx-auto flex justify-between items-center">38 <div class="flex items-center space-x-2">39 <div class="w-8 h-8 bg-purple-600 rounded-md flex items-center justify-center">40 <i data-feather="activity" class="text-white"></i>41 </div>42 <span class="text-xl font-bold text-gray-800">Olaboard</span>43 </div>44 <div class="hidden md:flex space-x-8">45 <a href="#" class="text-gray-600 hover:text-purple-600 transition">Features</a>46 <a href="#" class="text-gray-600 hover:text-purple-600 transition">Templates</a>47 <a href="#" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>48 <a href="#" class="text-gray-600 hover:text-purple-600 transition">Resources</a>49 </div>50 <div class="flex items-center space-x-4">51 <a href="#" class="text-gray-600 hover:text-purple-600 transition">Log in</a>52 <a href="#" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition">Sign up free</a>53 </div>54 <button class="md:hidden">55 <i data-feather="menu"></i>56 </button>57 </div>58 </nav>59 60 <!-- Hero Section -->61 <section class="relative z-10 py-20 px-6 md:px-12 hero-gradient text-white">62 <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">63 <div>64 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Transform your data into beautiful visual stories</h1>65 <p class="text-xl text-purple-100 mb-8">Olaboard helps you create stunning, interactive data visualizations without any coding required.</p>66 <div class="flex flex-col sm:flex-row gap-4">67 <a href="#" class="px-6 py-3 bg-white text-purple-600 rounded-md font-medium hover:bg-gray-100 transition text-center">Start creating</a>68 <a href="#" class="px-6 py-3 border border-white text-white rounded-md font-medium hover:bg-white hover:bg-opacity-10 transition text-center">Watch demo</a>69 </div>70 </div>71 <div class="relative">72 <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-400 rounded-full opacity-20"></div>73 <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-yellow-300 rounded-full opacity-20"></div>74 <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">75 <img src="http://static.photos/technology/1024x576/123" alt="Dashboard example" class="w-full h-auto">76 </div>77 </div>78 </div>79 </section>80 81 <!-- Features Section -->82 <section class="relative z-10 py-20 px-6 bg-white">83 <div class="max-w-7xl mx-auto">84 <div class="text-center mb-16">85 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Powerful features for all your data needs</h2>86 <p class="text-xl text-gray-600 max-w-3xl mx-auto">From simple charts to complex interactive dashboards, Olaboard has everything you need.</p>87 </div>88 89 <div class="grid md:grid-cols-3 gap-8">90 <!-- Feature 1 -->91 <div class="bg-gray-50 p-8 rounded-xl card-hover">92 <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-6">93 <i data-feather="bar-chart-2" class="text-purple-600"></i>94 </div>95 <h3 class="text-xl font-semibold text-gray-800 mb-3">Advanced Charting</h3>96 <p class="text-gray-600">Create beautiful bar, line, pie, and scatter charts with our intuitive editor.</p>97 </div>98 99 <!-- Feature 2 -->100 <div class="bg-gray-50 p-8 rounded-xl card-hover">101 <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-6">102 <i data-feather="cpu" class="text-blue-600"></i>103 </div>104 <h3 class="text-xl font-semibold text-gray-800 mb-3">Interactive Dashboards</h3>105 <p class="text-gray-600">Build fully interactive dashboards with filters, drill-downs, and tooltips.</p>106 </div>107 108 <!-- Feature 3 -->109 <div class="bg-gray-50 p-8 rounded-xl card-hover">110 <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-6">111 <i data-feather="users" class="text-green-600"></i>112 </div>113 <h3 class="text-xl font-semibold text-gray-800 mb-3">Team Collaboration</h3>114 <p class="text-gray-600">Share and collaborate on visualizations with your team in real-time.</p>115 </div>116 </div>117 </div>118 </section>119 120 <!-- Templates Section -->121 <section class="relative z-10 py-20 px-6 bg-gray-50">122 <div class="max-w-7xl mx-auto">123 <div class="text-center mb-16">124 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Beautiful templates for every industry</h2>125 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Get started quickly with our professionally designed templates.</p>126 </div>127 128 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">129 <!-- Template 1 -->130 <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">131 <div class="h-48 overflow-hidden">132 <img src="http://static.photos/finance/640x360/1" alt="Finance Dashboard" class="w-full h-full object-cover">133 </div>134 <div class="p-6">135 <h3 class="text-xl font-semibold text-gray-800 mb-2">Finance Dashboard</h3>136 <p class="text-gray-600 mb-4">Track revenue, expenses, and financial KPIs.</p>137 <a href="#" class="text-purple-600 font-medium flex items-center">138 Use template139 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>140 </a>141 </div>142 </div>143 144 <!-- Template 2 -->145 <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">146 <div class="h-48 overflow-hidden">147 <img src="http://static.photos/technology/640x360/2" alt="Marketing Analytics" class="w-full h-full object-cover">148 </div>149 <div class="p-6">150 <h3 class="text-xl font-semibold text-gray-800 mb-2">Marketing Analytics</h3>151 <p class="text-gray-600 mb-4">Analyze campaign performance and ROI.</p>152 <a href="#" class="text-purple-600 font-medium flex items-center">153 Use template154 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>155 </a>156 </div>157 </div>158 159 <!-- Template 3 -->160 <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">161 <div class="h-48 overflow-hidden">162 <img src="http://static.photos/health/640x360/3" alt="Health Metrics" class="w-full h-full object-cover">163 </div>164 <div class="p-6">165 <h3 class="text-xl font-semibold text-gray-800 mb-2">Health Metrics</h3>166 <p class="text-gray-600 mb-4">Visualize patient data and treatment outcomes.</p>167 <a href="#" class="text-purple-600 font-medium flex items-center">168 Use template169 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>170 </a>171 </div>172 </div>173 </div>174 175 <div class="text-center mt-12">176 <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-md font-medium hover:bg-gray-50 transition">177 Browse all templates178 <i data-feather="chevron-down" class="ml-2"></i>179 </a>180 </div>181 </div>182 </section>183 184 <!-- Testimonials -->185 <section class="relative z-10 py-20 px-6 bg-white">186 <div class="max-w-7xl mx-auto">187 <div class="text-center mb-16">188 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Trusted by data teams worldwide</h2>189 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Join thousands of companies that use Olaboard to make better decisions.</p>190 </div>191 192 <div class="grid md:grid-cols-3 gap-8">193 <!-- Testimonial 1 -->194 <div class="bg-gray-50 p-8 rounded-xl">195 <div class="flex items-center mb-6">196 <div class="w-12 h-12 rounded-full overflow-hidden mr-4">197 <img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="w-full h-full object-cover">198 </div>199 <div>200 <h4 class="font-semibold text-gray-800">Sarah Johnson</h4>201 <p class="text-gray-600 text-sm">Data Analyst, TechCorp</p>202 </div>203 </div>204 <p class="text-gray-700 italic mb-4">"Olaboard has transformed how we present data to stakeholders. The interactive features make our reports come alive."</p>205 <div class="flex text-yellow-400">206 <i data-feather="star" class="w-4 h-4 fill-current"></i>207 <i data-feather="star" class="w-4 h-4 fill-current"></i>208 <i data-feather="star" class="w-4 h-4 fill-current"></i>209 <i data-feather="star" class="w-4 h-4 fill-current"></i>210 <i data-feather="star" class="w-4 h-4 fill-current"></i>211 </div>212 </div>213 214 <!-- Testimonial 2 -->215 <div class="bg-gray-50 p-8 rounded-xl">216 <div class="flex items-center mb-6">217 <div class="w-12 h-12 rounded-full overflow-hidden mr-4">218 <img src="http://static.photos/people/200x200/2" alt="Michael Chen" class="w-full h-full object-cover">219 </div>220 <div>221 <h4 class="font-semibold text-gray-800">Michael Chen</h4>222 <p class="text-gray-600 text-sm">Marketing Director, GrowthLab</p>223 </div>224 </div>225 <p class="text-gray-700 italic mb-4">"We've reduced our reporting time by 70% while dramatically improving the quality of our data visualizations."</p>226 <div class="flex text-yellow-400">227 <i data-feather="star" class="w-4 h-4 fill-current"></i>228 <i data-feather="star" class="w-4 h-4 fill-current"></i>229 <i data-feather="star" class="w-4 h-4 fill-current"></i>230 <i data-feather="star" class="w-4 h-4 fill-current"></i>231 <i data-feather="star" class="w-4 h-4 fill-current"></i>232 </div>233 </div>234 235 <!-- Testimonial 3 -->236 <div class="bg-gray-50 p-8 rounded-xl">237 <div class="flex items-center mb-6">238 <div class="w-12 h-12 rounded-full overflow-hidden mr-4">239 <img src="http://static.photos/people/200x200/3" alt="Elena Rodriguez" class="w-full h-full object-cover">240 </div>241 <div>242 <h4 class="font-semibold text-gray-800">Elena Rodriguez</h4>243 <p class="text-gray-600 text-sm">Head of BI, HealthPlus</p>244 </div>245 </div>246 <p class="text-gray-700 italic mb-4">"The collaborative features have revolutionized how our team works with data. Now everyone can contribute."</p>247 <div class="flex text-yellow-400">248 <i data-feather="star" class="w-4 h-4 fill-current"></i>249 <i data-feather="star" class="w-4 h-4 fill-current"></i>250 <i data-feather="star" class="w-4 h-4 fill-current"></i>251 <i data-feather="star" class="w-4 h-4 fill-current"></i>252 <i data-feather="star" class="w-4 h-4 fill-current"></i>253 </div>254 </div>255 </div>256 257 <div class="mt-16 flex flex-wrap justify-center gap-4">258 <div class="h-12 flex items-center opacity-70 hover:opacity-100 transition">259 <img src="http://static.photos/logo/320x240/1" alt="Client logo" class="h-8">260 </div>261 <div class="h-12 flex items-center opacity-70 hover:opacity-100 transition">262 <img src="http://static.photos/logo/320x240/2" alt="Client logo" class="h-8">263 </div>264 <div class="h-12 flex items-center opacity-70 hover:opacity-100 transition">265 <img src="http://static.photos/logo/320x240/3" alt="Client logo" class="h-8">266 </div>267 <div class="h-12 flex items-center opacity-70 hover:opacity-100 transition">268 <img src="http://static.photos/logo/320x240/4" alt="Client logo" class="h-8">269 </div>270 <div class="h-12 flex items-center opacity-70 hover:opacity-100 transition">271 <img src="http://static.photos/logo/320x240/5" alt="Client logo" class="h-8">272 </div>273 </div>274 </div>275 </section>276 277 <!-- CTA Section -->278 <section class="relative z-10 py-20 px-6 bg-purple-700 text-white">279 <div class="max-w-4xl mx-auto text-center">280 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to transform your data?</h2>281 <p class="text-xl text-purple-100 mb-8">Join thousands of teams who use Olaboard to create stunning, interactive data visualizations.</p>282 <div class="flex flex-col sm:flex-row gap-4 justify-center">283 <a href="#" class="px-6 py-3 bg-white text-purple-600 rounded-md font-medium hover:bg-gray-100 transition text-center">Sign up free</a>284 <a href="#" class="px-6 py-3 border border-white text-white rounded-md font-medium hover:bg-white hover:bg-opacity-10 transition text-center">Schedule a demo</a>285 </div>286 </div>287 </section>288 289 <!-- Footer -->290 <footer class="relative z-10 bg-gray-900 text-gray-400 py-16 px-6">291 <div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">292 <div>293 <div class="flex items-center space-x-2 mb-6">294 <div class="w-8 h-8 bg-purple-600 rounded-md flex items-center justify-center">295 <i data-feather="activity" class="text-white"></i>296 </div>297 <span class="text-xl font-bold text-white">Olaboard</span>298 </div>299 <p class="mb-6">Beautiful data visualizations for everyone.</p>300 <div class="flex space-x-4">301 <a href="#" class="text-gray-400 hover:text-white transition">302 <i data-feather="twitter"></i>303 </a>304 <a href="#" class="text-gray-400 hover:text-white transition">305 <i data-feather="facebook"></i>306 </a>307 <a href="#" class="text-gray-400 hover:text-white transition">308 <i data-feather="linkedin"></i>309 </a>310 <a href="#" class="text-gray-400 hover:text-white transition">311 <i data-feather="github"></i>312 </a>313 </div>314 </div>315 316 <div>317 <h4 class="text-white font-semibold mb-4">Product</h4>318 <ul class="space-y-2">319 <li><a href="#" class="hover:text-white transition">Features</a></li>320 <li><a href="#" class="hover:text-white transition">Templates</a></li>321 <li><a href="#" class="hover:text-white transition">Pricing</a></li>322 <li><a href="#" class="hover:text-white transition">Integrations</a></li>323 <li><a href="#" class="hover:text-white transition">Updates</a></li>324 </ul>325 </div>326 327 <div>328 <h4 class="text-white font-semibold mb-4">Resources</h4>329 <ul class="space-y-2">330 <li><a href="#" class="hover:text-white transition">Documentation</a></li>331 <li><a href="#" class="hover:text-white transition">Tutorials</a></li>332 <li><a href="#" class="hover:text-white transition">Blog</a></li>333 <li><a href="#" class="hover:text-white transition">Community</a></li>334 <li><a href="#" class="hover:text-white transition">Webinars</a></li>335 </ul>336 </div>337 338 <div>339 <h4 class="text-white font-semibold mb-4">Company</h4>340 <ul class="space-y-2">341 <li><a href="#" class="hover:text-white transition">About</a></li>342 <li><a href="#" class="hover:text-white transition">Careers</a></li>343 <li><a href="#" class="hover:text-white transition">Contact</a></li>344 <li><a href="#" class="hover:text-white transition">Press</a></li>345 <li><a href="#" class="hover:text-white transition">Legal</a></li>346 </ul>347 </div>348 </div>349 350 <div class="max-w-7xl mx-auto mt-12 pt-8 border-t border-gray-800 text-sm">351 <div class="flex flex-col md:flex-row justify-between items-center">352 <p>© 2023 Olaboard. All rights reserved.</p>353 <div class="flex space-x-6 mt-4 md:mt-0">354 <a href="#" class="hover:text-white transition">Privacy Policy</a>355 <a href="#" class="hover:text-white transition">Terms of Service</a>356 <a href="#" class="hover:text-white transition">Cookie Policy</a>357 </div>358 </div>359 </div>360 </footer>361 362 <script>363 // Initialize Vanta.js background364 VANTA.NET({365 el: "#vanta-bg",366 mouseControls: true,367 touchControls: true,368 gyroControls: false,369 minHeight: 200.00,370 minWidth: 200.00,371 scale: 1.00,372 scaleMobile: 1.00,373 color: 0x7c3aed,374 backgroundColor: 0xf8fafc,375 points: 12.00,376 maxDistance: 22.00,377 spacing: 18.00378 });379 380 // Initialize feather icons381 feather.replace();382 383 // Simple animation for cards on scroll384 document.addEventListener('DOMContentLoaded', function() {385 const cards = document.querySelectorAll('.card-hover');386 387 const observer = new IntersectionObserver((entries) => {388 entries.forEach(entry => {389 if (entry.isIntersecting) {390 entry.target.style.opacity = 1;391 entry.target.style.transform = 'translateY(0)';392 }393 });394 }, { threshold: 0.1 });395 396 cards.forEach(card => {397 card.style.opacity = 0;398 card.style.transform = 'translateY(20px)';399 card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';400 observer.observe(card);401 });402 });403 </script>404</body>405</html>406