Azkanjut/ai-problem-solver-hub
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>AI Problem Solver Hub 🤖</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <link rel="stylesheet" href="style.css">11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: '#6366f1',18 secondary: '#8b5cf6',19 dark: {20 900: '#0f172a',21 800: '#1e293b',22 700: '#334155',23 600: '#475569'24 }25 },26 animation: {27 'glitch': 'glitch 0.3s cubic-bezier(.25, .46, .45, .94) both',28 'pulse-glow': 'pulse-glow 2s infinite',29 },30 keyframes: {31 glitch: {32 '0%': { transform: 'translate(0)' },33 '20%': { transform: 'translate(-5px, 5px)' },34 '40%': { transform: 'translate(-5px, -5px)' },35 '60%': { transform: 'translate(5px, 5px)' },36 '80%': { transform: 'translate(5px, -5px)' },37 '100%': { transform: 'translate(0)' }38 },39 'pulse-glow': {40 '0%, 100%': { 41 boxShadow: '0 0 5px #6366f1, 0 0 10px #6366f1, 0 0 15px #6366f1, 0 0 20px #8b5cf6' 42 },43 '50%': { 44 boxShadow: '0 0 10px #6366f1, 0 0 20px #6366f1, 0 0 30px #6366f1, 0 0 40px #8b5cf6, 0 0 70px #8b5cf6' 45 }46 }47 }48 }49 }50 }51 </script>52</head>53<body class="bg-dark-900 text-white font-sans">54 <custom-navbar></custom-navbar>55 56 <!-- Hero Section -->57 <section class="min-h-screen flex items-center justify-center relative overflow-hidden">58 <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/10 z-0"></div>59 <div class="absolute inset-0 bg-[url('https://static.photos/technology/1200x630/1')] bg-cover bg-center opacity-10 z-0"></div>60 61 <div class="container mx-auto px-6 text-center z-10">62 <h1 class="text-5xl md:text-7xl font-bold mb-6 glitch-text">63 How <span class="text-primary">AI</span> Solves64 <span class="text-secondary">Human Problems</span>65 </h1>66 <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">67 Discover how artificial intelligence is transforming our world and helping humanity overcome complex challenges68 </p>69 <a href="#applications" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105 inline-flex items-center">70 Explore Applications71 <i data-feather="arrow-right" class="ml-2"></i>72 </a>73 </div>74 </section>75 76 <!-- What is AI Section -->77 <section class="py-20 bg-dark-800">78 <div class="container mx-auto px-6">79 <div class="grid md:grid-cols-2 gap-12 items-center">80 <div>81 <h2 class="text-4xl font-bold mb-6">What is Artificial Intelligence?</h2>82 <p class="text-lg text-gray-300 mb-6">83 Artificial Intelligence (AI) refers to the simulation of human intelligence in machines that are programmed to think, learn, and solve problems. These systems can analyze data, recognize patterns, and make decisions with minimal human intervention.84 </p>85 <p class="text-lg text-gray-300">86 From healthcare to environmental conservation, AI is revolutionizing how we approach and solve complex problems, making processes more efficient and effective than ever before.87 </p>88 </div>89 <div class="relative">90 <div class="bg-gradient-to-br from-primary to-secondary p-1 rounded-2xl">91 <img src="https://static.photos/technology/640x360/2" alt="AI Technology" class="rounded-2xl w-full h-auto">92 </div>93 <div class="absolute -inset-4 bg-primary/20 rounded-2xl -z-10 blur-xl"></div>94 </div>95 </div>96 </div>97 </section>98 99 <!-- Applications Section -->100 <section id="applications" class="py-20">101 <div class="container mx-auto px-6">102 <h2 class="text-4xl font-bold text-center mb-16">AI Applications Changing Our World</h2>103 104 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">105 <!-- Healthcare -->106 <a href="#healthcare-modal" class="bg-dark-800 rounded-2xl p-6 hover:transform hover:scale-105 transition-all duration-300 group cursor-pointer" onclick="openModal('healthcare')">107 <div class="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-colors">108 <i data-feather="heart" class="w-8 h-8 text-primary"></i>109 </div>110 <h3 class="text-xl font-semibold mb-4">Healthcare</h3>111 <p class="text-gray-300">AI helps detect diseases earlier, analyze medical images, and accelerate drug discovery.</p>112 </a>113 114 <!-- Education -->115 <a href="#education-modal" class="bg-dark-800 rounded-2xl p-6 hover:transform hover:scale-105 transition-all duration-300 group cursor-pointer" onclick="openModal('education')">116 <div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-secondary/30 transition-colors">117 <i data-feather="book" class="w-8 h-8 text-secondary"></i>118 </div>119 <h3 class="text-xl font-semibold mb-4">Education</h3>120 <p class="text-gray-300">Personalized learning experiences and intelligent tutoring systems powered by AI.</p>121 </a>122 123 <!-- Transportation -->124 <a href="#transportation-modal" class="bg-dark-800 rounded-2xl p-6 hover:transform hover:scale-105 transition-all duration-300 group cursor-pointer" onclick="openModal('transportation')">125 <div class="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-colors">126 <i data-feather="truck" class="w-8 h-8 text-primary"></i>127 </div>128 <h3 class="text-xl font-semibold mb-4">Transportation</h3>129 <p class="text-gray-300">Self-driving vehicles and optimized traffic management systems making roads safer.</p>130 </a>131 132 <!-- Environment -->133 <a href="#environment-modal" class="bg-dark-800 rounded-2xl p-6 hover:transform hover:scale-105 transition-all duration-300 group cursor-pointer" onclick="openModal('environment')">134 <div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-secondary/30 transition-colors">135 <i data-feather="globe" class="w-8 h-8 text-secondary"></i>136 </div>137 <h3 class="text-xl font-semibold mb-4">Environment</h3>138 <p class="text-gray-300">Predicting natural disasters and optimizing energy consumption for sustainability.</p>139 </a>140</div>141 </div>142 </section>143 144 <!-- Testimonials Section -->145 <section class="py-20 bg-dark-800">146 <div class="container mx-auto px-6">147 <h2 class="text-4xl font-bold text-center mb-16">Visionary Voices on AI</h2>148 149 <div class="grid md:grid-cols-3 gap-8">150 <!-- Alan Turing -->151 <div class="bg-dark-900 rounded-2xl p-8 text-center">152 <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-primary to-secondary p-1">153 <img src="https://static.photos/people/200x200/1" alt="Alan Turing" class="w-full h-full rounded-full object-cover">154 </div>155 <h3 class="text-xl font-semibold mb-4">Alan Turing</h3>156 <p class="text-gray-300 italic">"We can only see a short distance ahead, but we can see plenty there that needs to be done."</p>157 </div>158 159 <!-- Andrew Ng -->160 <div class="bg-dark-900 rounded-2xl p-8 text-center">161 <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-primary to-secondary p-1">162 <img src="https://static.photos/people/200x200/2" alt="Andrew Ng" class="w-full h-full rounded-full object-cover">163 </div>164 <h3 class="text-xl font-semibold mb-4">Andrew Ng</h3>165 <p class="text-gray-300 italic">"AI is the new electricity. Just as electricity transformed almost everything 100 years ago, today I have a hard time thinking of an industry that AI won't transform."</p>166 </div>167 168 <!-- Elon Musk -->169 <div class="bg-dark-900 rounded-2xl p-8 text-center">170 <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-primary to-secondary p-1">171 <img src="https://static.photos/people/200x200/3" alt="Elon Musk" class="w-full h-full rounded-full object-cover">172 </div>173 <h3 class="text-xl font-semibold mb-4">Elon Musk</h3>174 <p class="text-gray-300 italic">"AI is a fundamental risk to the existence of human civilization, but it's also the most important tool we have for solving our biggest problems."</p>175 </div>176 </div>177 </div>178 </section>179 180 <!-- Final Message -->181 <section class="py-20">182 <div class="container mx-auto px-6 text-center">183 <div class="max-w-4xl mx-auto">184 <h2 class="text-4xl font-bold mb-8">AI: A Partner in Progress</h2>185 <p class="text-xl text-gray-300 mb-8">186 Artificial Intelligence is not here to replace humanity, but to augment our capabilities and help us solve problems that were once thought impossible. When guided by human values and ethics, AI becomes a powerful tool for creating a better, more sustainable future for all.187 </p>188 <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full max-w-md mx-auto animate-pulse-glow">189 <div class="bg-dark-900 rounded-full p-4">190 <p class="text-lg font-semibold">The future is collaborative. The future is human + AI.</p>191 </div>192 </div>193 </div>194 </div>195 </section>196 <!-- Modal Overlay -->197 <div id="modal-overlay" class="fixed inset-0 bg-black/80 z-50 hidden opacity-0 transition-opacity duration-300">198 <div class="absolute inset-0" onclick="closeModal()"></div>199 <div class="relative w-full max-w-4xl mx-auto h-full flex items-center justify-center p-6">200 <div id="modal-content" class="bg-dark-800 rounded-2xl p-8 max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300 opacity-0">201 <!-- Modal content will be injected here -->202 </div>203 <button onclick="closeModal()" class="absolute top-6 right-6 text-gray-400 hover:text-white transition-colors">204 <i data-feather="x" class="w-8 h-8"></i>205 </button>206 </div>207 </div>208 209 <custom-footer></custom-footer>210 <script src="components/navbar.js"></script>211 <script src="components/footer.js"></script>212 <script src="components/modal-data.js"></script>213 <script src="script.js"></script>214 <script>215 feather.replace();216 </script>217<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>218</body>219</html>