devx91/lightningbot-ai-thunderbolt-support
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>LightningBot AI - Thunderbolt Support ⚡</title>7 <link rel="stylesheet" href="style.css">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.globe.min.js"></script>12</head>13<body class="bg-gray-50">14 <custom-navbar></custom-navbar>15 16 <div id="hero" class="relative overflow-hidden">17 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center z-10 relative">18 <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">19 AI-Powered <span class="text-purple-600">Customer Support</span>20 </h1>21 <p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-10">22 Your Lightning-Fast AI Support and Lead Generation Agent23 </p>24 <div class="flex flex-col sm:flex-row justify-center gap-4">25 <a href="#pricing" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-4 rounded-lg font-medium text-lg transition duration-300 shadow-lg hover:shadow-xl">26 Start Free Trial27 </a>28 <a href="#features" class="border-2 border-gray-300 hover:border-purple-400 text-gray-700 px-8 py-4 rounded-lg font-medium text-lg transition duration-300">29 Learn More30 </a>31 </div>32 33 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 max-w-5xl mx-auto">34 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">35 <div class="text-purple-600 mb-4">36 <i data-feather="clock" class="w-10 h-10"></i>37 </div>38 <h3 class="text-xl font-bold mb-2">24/7</h3>39 <p class="text-gray-600">Support Availability</p>40 </div>41 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">42 <div class="text-purple-600 mb-4">43 <i data-feather="trending-down" class="w-10 h-10"></i>44 </div>45 <h3 class="text-xl font-bold mb-2">70%</h3>46 <p class="text-gray-600">Ticket Reduction</p>47 </div>48 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">49 <div class="text-purple-600 mb-4">50 <i data-feather="zap" class="w-10 h-10"></i>51 </div>52 <h3 class="text-xl font-bold mb-2">5min</h3>53 <p class="text-gray-600">Setup Time</p>54 </div>55 </div>56 57 <p class="mt-8 text-gray-500">58 We offer a 7-day free trial of Ultra plan • No credit card required59 </p>60 </div>61 </div>62 63 <section id="features" class="py-20 bg-white">64 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">65 <div class="text-center mb-16">66 <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">67 Your 24/7 AI Support Team68 </h2>69 <p class="text-xl text-gray-600 max-w-3xl mx-auto">70 Supercharged with smart features designed for modern e-commerce businesses71 </p>72 </div>73 74 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">75 <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">76 <div class="text-purple-600 mb-4">77 <i data-feather="book-open" class="w-8 h-8"></i>78 </div>79 <h3 class="text-lg font-bold mb-2">Create Your AI Expert</h3>80 <p class="text-gray-600">81 Upload your FAQs, help docs, or product info. Instantly launch a trained AI chatbot.82 </p>83 </div>84 <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">85 <div class="text-purple-600 mb-4">86 <i data-feather="message-square" class="w-8 h-8"></i>87 </div>88 <h3 class="text-lg font-bold mb-2">Engage Every Visitor</h3>89 <p class="text-gray-600">90 Add the bot to your website with a single line of code. Every visitor gets instant support.91 </p>92 </div>93 <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">94 <div class="text-purple-600 mb-4">95 <i data-feather="bar-chart-2" class="w-8 h-8"></i>96 </div>97 <h3 class="text-lg font-bold mb-2">Manage & Grow</h3>98 <p class="text-gray-600">99 Your dashboard lets you customize the bot's look and track conversations.100 </p>101 </div>102 <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300">103 <div class="text-purple-600 mb-4">104 <i data-feather="sliders" class="w-8 h-8"></i>105 </div>106 <h3 class="text-lg font-bold mb-2">Advanced Features</h3>107 <p class="text-gray-600">108 Automated lead capture, priority support, and full customization options.109 </p>110 </div>111 </div>112 113 <div class="mt-20">114 <h3 class="text-2xl font-bold text-center mb-12">Use Cases</h3>115 <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">116 <div class="bg-purple-50 rounded-xl p-8 flex items-start gap-6">117 <div class="bg-purple-100 p-4 rounded-full">118 <i data-feather="message-circle" class="w-6 h-6 text-purple-600"></i>119 </div>120 <div>121 <h4 class="text-lg font-bold mb-2">AI Support Agent</h4>122 <p class="text-gray-600">24/7 customer support that feels human</p>123 </div>124 </div>125 <div class="bg-purple-50 rounded-xl p-8 flex items-start gap-6">126 <div class="bg-purple-100 p-4 rounded-full">127 <i data-feather="target" class="w-6 h-6 text-purple-600"></i>128 </div>129 <div>130 <h4 class="text-lg font-bold mb-2">AI Lead Qualification</h4>131 <p class="text-gray-600">Automated lead capture and qualification</p>132 </div>133 </div>134 </div>135 </div>136 </div>137 </section>138 139 <section class="py-20 bg-gray-50">140 <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">141 <div class="bg-white rounded-xl shadow-xl overflow-hidden">142 <div class="p-8 flex flex-col md:flex-row gap-8">143 <div class="flex-1">144 <div class="flex items-center gap-3 mb-4">145 <div class="bg-purple-100 p-2 rounded-full">146 <i data-feather="zap" class="w-5 h-5 text-purple-600"></i>147 </div>148 <span class="text-sm font-medium text-purple-600">AI Support Agent</span>149 </div>150 <h3 class="text-2xl font-bold mb-4">Online • 24/7</h3>151 <p class="text-gray-600 mb-6">152 Hi there! I'm your AI support agent. How can I help you today?153 </p>154 155 <div class="space-y-4">156 <div class="flex justify-end">157 <div class="bg-purple-100 rounded-xl px-4 py-2 max-w-xs">158 <p class="text-gray-800">Where is my order? I haven't received any updates.</p>159 <p class="text-xs text-gray-500 text-right mt-1">2:30 PM</p>160 </div>161 </div>162 <div class="flex">163 <div class="bg-gray-100 rounded-xl px-4 py-2 max-w-xs">164 <p class="text-gray-800">Your order #2347 is out for delivery and will arrive today by 6:00 PM.</p>165 <p class="text-xs text-gray-500 text-right mt-1">2:31 PM</p>166 </div>167 </div>168 </div>169 </div>170 <div class="flex-1 flex items-center justify-center bg-gray-50 rounded-lg">171 <div class="text-center p-6">172 <h3 class="text-xl font-bold mb-4">Ready to Transform Your Support?</h3>173 <a href="#pricing" class="inline-block bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 shadow hover:shadow-md">174 Start Free Trial175 </a>176 </div>177 </div>178 </div>179 </div>180 </div>181 </section>182 183 <section id="pricing" class="py-20 bg-white">184 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">185 <div class="text-center mb-16">186 <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">187 Choose Your Perfect Plan188 </h2>189 <p class="text-xl text-gray-600 max-w-3xl mx-auto">190 Transform your customer support with AI-powered chatbots. Start free, then scale with transparent pricing.191 </p>192 </div>193 194 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">195 <!-- Free Plan -->196 <div class="border border-gray-200 rounded-xl p-6 hover:shadow-md transition duration-300">197 <h3 class="text-xl font-bold mb-4">Free</h3>198 <p class="text-gray-600 mb-6">Perfect for testing our AI chatbot with your content.</p>199 <div class="text-3xl font-bold mb-6">FREE</div>200 <ul class="space-y-3 mb-8">201 <li class="flex items-center gap-2">202 <i data-feather="check" class="w-4 h-4 text-green-500"></i>203 <span>100 Conversations / Month</span>204 </li>205 <li class="flex items-center gap-2">206 <i data-feather="check" class="w-4 h-4 text-green-500"></i>207 <span>Basic Knowledge Base (500 words)</span>208 </li>209 <li class="flex items-center gap-2">210 <i data-feather="check" class="w-4 h-4 text-green-500"></i>211 <span>1 Knowledge Upload</span>212 </li>213 <li class="flex items-center gap-2">214 <i data-feather="check" class="w-4 h-4 text-green-500"></i>215 <span>Basic AI Chatbot</span>216 </li>217 <li class="flex items-center gap-2">218 <i data-feather="check" class="w-4 h-4 text-green-500"></i>219 <span>Website Embedding</span>220 </li>221 </ul>222 <a href="#" class="block text-center border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-medium transition duration-300">223 Get Started224 </a>225 </div>226 227 <!-- Basic Plan -->228 <div class="border border-gray-200 rounded-xl p-6 hover:shadow-md transition duration-300">229 <h3 class="text-xl font-bold mb-4">Basic</h3>230 <p class="text-gray-600 mb-6">For emerging businesses and startups.</p>231 <div class="text-3xl font-bold mb-6">₹99<span class="text-sm font-normal text-gray-500">/month</span></div>232 <ul class="space-y-3 mb-8">233 <li class="flex items-center gap-2">234 <i data-feather="check" class="w-4 h-4 text-green-500"></i>235 <span>1,000 Conversations / Month</span>236 </li>237 <li class="flex items-center gap-2">238 <i data-feather="check" class="w-4 h-4 text-green-500"></i>239 <span>Standard Knowledge Base (2,000 words)</span>240 </li>241 <li class="flex items-center gap-2">242 <i data-feather="check" class="w-4 h-4 text-green-500"></i>243 <span>4 Knowledge Uploads</span>244 </li>245 <li class="flex items-center gap-2">246 <i data-feather="check" class="w-4 h-4 text-green-500"></i>247 <span>Basic AI Chatbot</span>248 </li>249 <li class="flex items-center gap-2">250 <i data-feather="check" class="w-4 h-4 text-green-500"></i>251 <span>Website Embedding</span>252 </li>253 </ul>254 <a href="#" class="block text-center bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">255 Start Free Trial256 </a>257 </div>258 259 <!-- Pro Plan (Most Popular) -->260 <div class="border-2 border-purple-600 rounded-xl p-6 shadow-lg relative">261 <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">262 Most Popular263 </div>264 <h3 class="text-xl font-bold mb-4">Pro</h3>265 <p class="text-gray-600 mb-6">The most popular choice for growing e-commerce brands.</p>266 <div class="text-3xl font-bold mb-6">₹399<span class="text-sm font-normal text-gray-500">/month</span></div>267 <ul class="space-y-3 mb-8">268 <li class="flex items-center gap-2">269 <i data-feather="check" class="w-4 h-4 text-green-500"></i>270 <span>Unlimited Conversations</span>271 </li>272 <li class="flex items-center gap-2">273 <i data-feather="check" class="w-4 h-4 text-green-500"></i>274 <span>Expanded Knowledge Base (15,000 words)</span>275 </li>276 <li class="flex items-center gap-2">277 <i data-feather="check" class="w-4 h-4 text-green-500"></i>278 <span>10 Knowledge Uploads</span>279 </li>280 <li class="flex items-center gap-2">281 <i data-feather="check" class="w-4 h-4 text-green-500"></i>282 <span>Basic Chatbot Customization</span>283 </li>284 <li class="flex items-center gap-2">285 <i data-feather="check" class="w-4 h-4 text-green-500"></i>286 <span>Automated Lead Capture</span>287 </li>288 <li class="flex items-center gap-2">289 <i data-feather="check" class="w-4 h-4 text-green-500"></i>290 <span>Priority Support</span>291 </li>292 </ul>293 <a href="#" class="block text-center bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">294 Start Free Trial295 </a>296 </div>297 298 <!-- Ultra Plan -->299 <div class="border border-gray-200 rounded-xl p-6 hover:shadow-md transition duration-300">300 <h3 class="text-xl font-bold mb-4">Ultra</h3>301 <p class="text-gray-600 mb-6">The ultimate toolkit for established businesses.</p>302 <div class="text-3xl font-bold mb-6">₹599<span class="text-sm font-normal text-gray-500">/month</span></div>303 <ul class="space-y-3 mb-8">304 <li class="flex items-center gap-2">305 <i data-feather="check" class="w-4 h-4 text-green-500"></i>306 <span>Everything in Pro</span>307 </li>308 <li class="flex items-center gap-2">309 <i data-feather="check" class="w-4 h-4 text-green-500"></i>310 <span>Maximum Knowledge Base (50,000 words)</span>311 </li>312 <li class="flex items-center gap-2">313 <i data-feather="check" class="w-4 h-4 text-green-500"></i>314 <span>25 Knowledge Uploads</span>315 </li>316 <li class="flex items-center gap-2">317 <i data-feather="check" class="w-4 h-4 text-green-500"></i>318 <span>Full Brand Customization</span>319 </li>320 <li class="flex items-center gap-2">321 <i data-feather="check" class="w-4 h-4 text-green-500"></i>322 <span>Advanced Lead Capture</span>323 </li>324 <li class="flex items-center gap-2">325 <i data-feather="check" class="w-4 h-4 text-green-500"></i>326 <span>Priority Support Queue</span>327 </li>328 </ul>329 <a href="#" class="block text-center bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">330 Start Free Trial331 </a>332 </div>333 </div>334 335 <div class="mt-16 text-center">336 <div class="inline-flex flex-col sm:flex-row items-center gap-4 bg-gray-50 rounded-xl px-8 py-6">337 <div class="flex items-center gap-3">338 <i data-feather="zap" class="w-5 h-5 text-purple-600"></i>339 <span class="font-medium">Setup in 5 minutes</span>340 </div>341 <div class="flex items-center gap-3">342 <i data-feather="clock" class="w-5 h-5 text-purple-600"></i>343 <span class="font-medium">24/7 AI support</span>344 </div>345 <div class="flex items-center gap-3">346 <i data-feather="x-circle" class="w-5 h-5 text-purple-600"></i>347 <span class="font-medium">Cancel anytime</span>348 </div>349 </div>350 351 <p class="mt-8 text-gray-600 max-w-2xl mx-auto">352 Join thousands of businesses already using LightningBot to automate customer support and increase sales. Start with our Ultra plan free trial - no commitment required.353 </p>354 </div>355 </div>356 </section>357 358 <custom-footer></custom-footer>359 360 <script src="components/navbar.js"></script>361 <script src="components/footer.js"></script>362 <script src="script.js"></script>363 <script>364 feather.replace();365 VANTA.GLOBE({366 el: "#hero",367 mouseControls: true,368 touchControls: true,369 gyroControls: false,370 minHeight: 200.00,371 minWidth: 200.00,372 scale: 1.00,373 scaleMobile: 1.00,374 color: 0x7c3aed,375 backgroundColor: 0xf9fafb,376 size: 0.8377 });378 </script>379<script src="https://deepsite.hf.co/deepsite-badge.js"></script>380</body>381</html>