Kamiul/queuezen-smart-queue-magic
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>QueueZen | Smart Queue Management</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script>9 tailwind.config = {10 theme: {11 extend: {12 colors: {13 primary: '#4F46E5',14 secondary: '#10B981',15 }16 }17 }18 }19 </script>20 <script src="https://unpkg.com/feather-icons"></script>21 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>22 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>23 <style>24 .hero-bg {25 background-image: url('http://static.photos/restaurant/1200x630/42');26 background-size: cover;27 background-position: center;28 }29 .feature-card:hover {30 transform: translateY(-5px);31 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);32 }33 .how-it-works-step::before {34 content: '';35 position: absolute;36 width: 40px;37 height: 40px;38 background-color: #4F46E5;39 border-radius: 50%;40 top: -20px;41 left: 50%;42 transform: translateX(-50%);43 display: flex;44 align-items: center;45 justify-content: center;46 color: white;47 font-weight: bold;48 }49 </style>50</head>51<body class="font-sans antialiased">52 <!-- Navigation -->53 <nav class="bg-white shadow-sm">54 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">55 <div class="flex justify-between h-16">56 <div class="flex items-center">57 <div class="flex-shrink-0 flex items-center">58 <i data-feather="clock" class="text-primary h-8 w-8"></i>59 <span class="ml-2 text-xl font-bold text-gray-900">QueueZen</span>60 </div>61 </div>62 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">63 <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary text-sm font-medium">Home</a>64 <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Features</a>65 <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Pricing</a>66 <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>67 <a href="#" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-700">Get Started</a>68 </div>69 <div class="-mr-2 flex items-center md:hidden">70 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">71 <i data-feather="menu"></i>72 </button>73 </div>74 </div>75 </div>76 </nav>77 78 <!-- Hero Section -->79 <div class="hero-bg relative">80 <div class="absolute inset-0 bg-black opacity-30"></div>81 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 relative z-10">82 <div class="text-center">83 <h1 class="text-4xl md:text-5xl font-extrabold text-white">Очереди без ожидания</h1>84 <p class="mt-6 max-w-lg mx-auto text-xl text-white">Клиенты ждут там, где им удобно. Вы управляете очередью в один клик.</p>85 <div class="mt-10 flex justify-center">86 <div class="inline-flex rounded-md shadow">87 <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary-700">Подключить заведение</a>88 </div>89 <div class="ml-3 inline-flex">90 <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50">Попробовать бесплатно</a>91 </div>92 </div>93 </div>94 </div>95 </div>96 97 <!-- Features Section -->98 <div class="py-12 bg-white">99 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">100 <div class="text-center">101 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Преимущества QueueZen</h2>102 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Улучшите опыт ваших клиентов и оптимизируйте работу персонала</p>103 </div>104 105 <div class="mt-10">106 <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">107 <!-- Feature 1 -->108 <div class="feature-card transition-all duration-300 pt-6">109 <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">110 <div class="-mt-6">111 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">112 <i data-feather="trending-up"></i>113 </div>114 <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Больше клиентов возвращаются</h3>115 <p class="mt-5 text-base text-gray-500 text-center">Клиенты не уходят к конкурентам из-за долгого ожидания</p>116 </div>117 </div>118 </div>119 120 <!-- Feature 2 -->121 <div class="feature-card transition-all duration-300 pt-6">122 <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">123 <div class="-mt-6">124 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">125 <i data-feather="clock"></i>126 </div>127 <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Автоматизация очередей</h3>128 <p class="mt-5 text-base text-gray-500 text-center">Исключите ручное управление очередями и ошибки персонала</p>129 </div>130 </div>131 </div>132 133 <!-- Feature 3 -->134 <div class="feature-card transition-all duration-300 pt-6">135 <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">136 <div class="-mt-6">137 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">138 <i data-feather="users"></i>139 </div>140 <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">База контактов для маркетинга</h3>141 <p class="mt-5 text-base text-gray-500 text-center">Собирайте контакты клиентов и увеличивайте повторные визиты</p>142 </div>143 </div>144 </div>145 </div>146 </div>147 </div>148 </div>149 150 <!-- How It Works -->151 <div class="py-12 bg-gray-50">152 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">153 <div class="text-center">154 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Как это работает</h2>155 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Всего 3 простых шага для удобства ваших клиентов</p>156 </div>157 158 <div class="mt-10">159 <div class="grid grid-cols-1 gap-10 md:grid-cols-3">160 <!-- Step 1 -->161 <div class="relative pt-10 how-it-works-step">162 <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full border border-gray-200">163 <div class="-mt-6">164 <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">1. Клиент сканирует QR</h3>165 <p class="mt-5 text-base text-gray-500 text-center">QR-код размещается у входа в заведение</p>166 <div class="mt-6 flex justify-center">167 <img src="http://static.photos/technology/320x240/1" alt="QR Code" class="h-32 w-32 object-cover rounded-md">168 </div>169 </div>170 </div>171 </div>172 173 <!-- Step 2 -->174 <div class="relative pt-10 how-it-works-step">175 <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full border border-gray-200">176 <div class="-mt-6">177 <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">2. Вводит номер телефона</h3>178 <p class="mt-5 text-base text-gray-500 text-center">Клиент указывает номер для уведомлений</p>179 <div class="mt-6 flex justify-center">180 <img src="http://static.photos/technology/320x240/2" alt="Phone Input" class="h-32 w-auto object-cover rounded-md">181 </div>182 </div>183 </div>184 </div>185 186 <!-- Step 3 -->187 <div class="relative pt-10 how-it-works-step">188 <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full border border-gray-200">189 <div class="-mt-6">190 <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">3. Получает SMS/WhatsApp</h3>191 <p class="mt-5 text-base text-gray-500 text-center">Уведомление приходит, когда место свободно</p>192 <div class="mt-6 flex justify-center">193 <img src="http://static.photos/technology/320x240/3" alt="Notification" class="h-32 w-auto object-cover rounded-md">194 </div>195 </div>196 </div>197 </div>198 </div>199 </div>200 </div>201 </div>202 203 <!-- For Restaurants -->204 <div class="py-12 bg-white">205 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">206 <div class="lg:grid lg:grid-cols-12 lg:gap-8">207 <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">208 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Просто. Удобно. Выгодно.</h2>209 <p class="mt-3 text-lg text-gray-500">Управляйте очередями с помощью интуитивно понятной панели администратора</p>210 211 <div class="mt-10">212 <div class="flex items-start">213 <div class="flex-shrink-0">214 <div class="flex items-center justify-center h-8 w-8 rounded-md bg-primary text-white">215 <i data-feather="check"></i>216 </div>217 </div>218 <div class="ml-4">219 <h4 class="text-lg font-medium text-gray-900">Панель для хостес</h4>220 <p class="mt-2 text-base text-gray-500">Удобный интерфейс для управления очередями в реальном времени</p>221 </div>222 </div>223 224 <div class="mt-8 flex items-start">225 <div class="flex-shrink-0">226 <div class="flex items-center justify-center h-8 w-8 rounded-md bg-primary text-white">227 <i data-feather="check"></i>228 </div>229 </div>230 <div class="ml-4">231 <h4 class="text-lg font-medium text-gray-900">Аналитика по клиентам</h4>232 <p class="mt-2 text-base text-gray-500">Отчеты о загруженности, среднем времени ожидания и других метриках</p>233 </div>234 </div>235 236 <div class="mt-8 flex items-start">237 <div class="flex-shrink-0">238 <div class="flex items-center justify-center h-8 w-8 rounded-md bg-primary text-white">239 <i data-feather="check"></i>240 </div>241 </div>242 <div class="ml-4">243 <h4 class="text-lg font-medium text-gray-900">White-label уведомления</h4>244 <p class="mt-2 text-base text-gray-500">Сообщения отправляются от имени вашего заведения</p>245 </div>246 </div>247 </div>248 </div>249 <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">250 <img class="w-full rounded-lg shadow-lg" src="http://static.photos/restaurant/1200x630/44" alt="Restaurant dashboard">251 </div>252 </div>253 </div>254 </div>255 256 <!-- Pricing -->257 <div class="py-12 bg-gray-50">258 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">259 <div class="text-center">260 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Гибкие тарифы</h2>261 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Выберите подходящий вариант для вашего бизнеса</p>262 </div>263 264 <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">265 <!-- Pay-per-use -->266 <div class="bg-white rounded-lg shadow-md overflow-hidden">267 <div class="px-6 py-8">268 <h3 class="text-lg font-medium text-gray-900">Pay-per-use</h3>269 <div class="mt-4 flex items-baseline text-4xl font-extrabold">270 <span class="text-gray-900">0.20 AZN</span>271 <span class="ml-1 text-xl font-medium text-gray-500">/ уведомление</span>272 </div>273 <p class="mt-6 text-base text-gray-500">Идеально для небольших заведений</p>274 </div>275 <div class="px-6 pt-6 pb-8 bg-gray-50">276 <ul class="space-y-4">277 <li class="flex items-start">278 <div class="flex-shrink-0">279 <i data-feather="check" class="h-5 w-5 text-green-500"></i>280 </div>281 <p class="ml-3 text-base text-gray-700">Без абонентской платы</p>282 </li>283 <li class="flex items-start">284 <div class="flex-shrink-0">285 <i data-feather="check" class="h-5 w-5 text-green-500"></i>286 </div>287 <p class="ml-3 text-base text-gray-700">Платите только за использованные уведомления</p>288 </li>289 </ul>290 <div class="mt-8">291 <a href="#" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary hover:bg-secondary-700">Начать</a>292 </div>293 </div>294 </div>295 296 <!-- Subscription -->297 <div class="bg-white rounded-lg shadow-md overflow-hidden">298 <div class="px-6 py-8">299 <h3 class="text-lg font-medium text-gray-900">Абонемент</h3>300 <div class="mt-4 flex items-baseline text-4xl font-extrabold">301 <span class="text-gray-900">от 50 AZN</span>302 <span class="ml-1 text-xl font-medium text-gray-500">/ месяц</span>303 </div>304 <p class="mt-6 text-base text-gray-500">Лучшее решение для средних заведений</p>305 </div>306 <div class="px-6 pt-6 pb-8 bg-gray-50">307 <ul class="space-y-4">308 <li class="flex items-start">309 <div class="flex-shrink-0">310 <i data-feather="check" class="h-5 w-5 text-green-500"></i>311 </div>312 <p class="ml-3 text-base text-gray-700">500 уведомлений включено</p>313 </li>314 <li class="flex items-start">315 <div class="flex-shrink-0">316 <i data-feather="check" class="h-5 w-5 text-green-500"></i>317 </div>318 <p class="ml-3 text-base text-gray-700">Базовая аналитика</p>319 </li>320 <li class="flex items-start">321 <div class="flex-shrink-0">322 <i data-feather="check" class="h-5 w-5 text-green-500"></i>323 </div>324 <p class="ml-3 text-base text-gray-700">Поддержка WhatsApp и SMS</p>325 </li>326 </ul>327 <div class="mt-8">328 <a href="#" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary-700">Начать</a>329 </div>330 </div>331 </div>332 333 <!-- Premium -->334 <div class="bg-white rounded-lg shadow-md overflow-hidden">335 <div class="px-6 py-8">336 <h3 class="text-lg font-medium text-gray-900">Премиум</h3>337 <div class="mt-4 flex items-baseline text-4xl font-extrabold">338 <span class="text-gray-900">от 120 AZN</span>339 <span class="ml-1 text-xl font-medium text-gray-500">/ месяц</span>340 </div>341 <p class="mt-6 text-base text-gray-500">Для сетей и премиальных заведений</p>342 </div>343 <div class="px-6 pt-6 pb-8 bg-gray-50">344 <ul class="space-y-4">345 <li class="flex items-start">346 <div class="flex-shrink-0">347 <i data-feather="check" class="h-5 w-5 text-green-500"></i>348 </div>349 <p class="ml-3 text-base text-gray-700">White-label уведомления</p>350 </li>351 <li class="flex items-start">352 <div class="flex-shrink-0">353 <i data-feather="check" class="h-5 w-5 text-green-500"></i>354 </div>355 <p class="ml-3 text-base text-gray-700">Расширенная аналитика</p>356 </li>357 <li class="flex items-start">358 <div class="flex-shrink-0">359 <i data-feather="check" class="h-5 w-5 text-green-500"></i>360 </div>361 <p class="ml-3 text-base text-gray-700">Интеграция с CRM</p>362 </li>363 <li class="flex items-start">364 <div class="flex-shrink-0">365 <i data-feather="check" class="h-5 w-5 text-green-500"></i>366 </div>367 <p class="ml-3 text-base text-gray-700">Приоритетная поддержка</p>368 </li>369 </ul>370 <div class="mt-8">371 <a href="#" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary hover:bg-secondary-700">Начать</a>372 </div>373 </div>374 </div>375 </div>376 </div>377 </div>378 379 <!-- Testimonials -->380 <div class="py-12 bg-white">381 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">382 <div class="lg:text-center">383 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Отзывы наших клиентов</h2>384 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">Узнайте, как QueueZen помогает бизнесу</p>385 </div>386 <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2">387 <div class="bg-gray-50 p-6 rounded-lg">388 <div class="flex items-center">389 <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Testimonial">390 <div class="ml-4">391 <h4 class="text-lg font-medium text-gray-900">Иван Петров</h4>392 <p class="text-gray-500">Ресторан "Вкусно и точка"</p>393 </div>394 </div>395 <p class="mt-4 text-gray-600">"Мы перестали терять клиентов в пиковые часы. Теперь люди спокойно ждут за столиками в соседнем кафе, а мы приглашаем их, когда освобождается место."</p>396 </div>397 <div class="bg-gray-50 p-6 rounded-lg">398 <div class="flex items-center">399 <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Testimonial">400 <div class="ml-4">401 <h4 class="text-lg font-medium text-gray-900">Мария Иванова</h4>402 <p class="text-gray-500">Салон красоты "Элегант"</p>403 </div>404 </div>405 <p class="mt-4 text-gray-600">"Сервис прост и экономит время персонала. Клиенты больше не стоят в коридоре, а спокойно ждут в соседнем кафе. И мы собираем базу клиентов для рассылок!"</p>406 </div>407 </div>408 </div>409 </div>410 411 <!-- CTA Section -->412 <div class="bg-primary">413 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">414 <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">415 <span class="block">Готовы оптимизировать очередь?</span>416 <span class="block text-primary-200">Подключитесь к QueueZen сегодня.</span>417 </h2>418 <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">419 <div class="inline-flex rounded-md shadow">420 <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50">Подключить ресторан</a>421 </div>422 <div class="ml-3 inline-flex">423 <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-700 hover:bg-primary-800">Связаться с нами</a>424 </div>425 </div>426 </div>427 </div>428 429 <!-- Contact Form -->430 <div class="py-12 bg-white">431 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">432 <div class="lg:grid lg:grid-cols-2 lg:gap-8">433 <div>434 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Остались вопросы?</h2>435 <p class="mt-3 text-lg text-gray-500">Оставьте заявку, и наш менеджер свяжется с вами для консультации</p>436 <div class="mt-8">437 <div class="flex items-center">438 <div class="flex-shrink-0 bg-primary rounded-md p-3">439 <i data-feather="phone" class="h-6 w-6 text-white"></i>440 </div>441 <div class="ml-4 text-base text-gray-500">442 <p>+994 12 345 67 89</p>443 <p class="mt-1">Пн-Пт с 9:00 до 18:00</p>444 </div>445 </div>446 <div class="mt-6 flex items-center">447 <div class="flex-shrink-0 bg-primary rounded-md p-3">448 <i data-feather="mail" class="h-6 w-6 text-white"></i>449 </div>450 <div class="ml-4 text-base text-gray-500">451 <p>info@queuezen.az</p>452 </div>453 </div>454 </div>455 </div>456 <div class="mt-12 lg:mt-0">457 <form class="space-y-6">458 <div>459 <label for="name" class="block text-sm font-medium text-gray-700">Имя</label>460 <div class="mt-1">461 <input id="name" name="name" type="text" required class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md">462 </div>463 </div>464 <div>465 <label for="phone" class="block text-sm font-medium text-gray-700">Телефон</label>466 <div class="mt-1">467 <input id="phone" name="phone" type="tel" required class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md">468 </div>469 </div>470 <div>471 <label for="email" class="block text-sm font-medium text-gray-700">Email</label>472 <div class="mt-1">473 <input id="email" name="email" type="email" required class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md">474 </div>475 </div>476 <div>477 <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Отправить заявку</button>478 </div>479 </form>480 <div class="mt-6">481 <a href="#" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-500 hover:bg-green-600">482 <i data-feather="message-circle" class="mr-2"></i> Написать в WhatsApp483 </a>484 </div>485 </div>486 </div>487 </div>488 </div>489 490 <!-- Footer -->491 <footer class="bg-gray-800">492 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">493 <div class="xl:grid xl:grid-cols-3 xl:gap-8">494 <div class="space-y-8 xl:col-span-1">495 <div class="flex items-center">496 <i data-feather="clock" class="h-8 w-8 text-white"></i>497 <span class="ml-2 text-xl font-bold text-white">QueueZen</span>498 </div>499 <p class="text-gray-300 text-base">Инновационное решение для управления очередями в ресторанах и магазинах</p>500 <div class="flex space-x-6">501 <a href="#" class="text-gray-400 hover:text-white">502 <i data-feather="facebook"></i>503 </a>504 <a href="#" class="text-gray-400 hover:text-white">505 <i data-feather="instagram"></i>506 </a>507 <a href="#" class="text-gray-400 hover:text-white">508 <i data-feather="linkedin"></i>509 </a>510 </div>511 </div>512 <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">513 <div class="md:grid md:grid-cols-2 md:gap-8">514 <div>515 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Компания</h3>516 <ul class="mt-4 space-y-4">517 <li>518 <a href="#" class="text-base text-gray-400 hover:text-white">О нас</a>519 </li>520 <li>521 <a href="#" class="text-base text-gray-400 hover:text-white">Блог</a>522 </li>523 <li>524 <a href="#" class="text-base text-gray-400 hover:text-white">Вакансии</a>525 </li>526 </ul>527 </div>528 <div class="mt-12 md:mt-0">529 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Поддержка</h3>530 <ul class="mt-4 space-y-4">531 <li>532 <a href="#" class="text-base text-gray-400 hover:text-white">Центр поддержки</a>533 </li>534 <li>535 <a href="#" class="text-base text-gray-400 hover:text-white">Безопасность</a>536 </li>537 <li>538 <a href="#" class="text-base text-gray-400 hover:text-white">FAQ</a>539 </li>540 </ul>541 </div>542 </div>543 <div class="md:grid md:grid-cols-2 md:gap-8">544 <div>545 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Юридическая информация</h3>546 <ul class="mt-4 space-y-4">547 <li>548 <a href="#" class="text-base text-gray-400 hover:text-white">Условия использования</a>549 </li>550 <li>551 <a href="#" class="text-base text-gray-400 hover:text-white">Политика конфиденциальности</a>552 </li>553 <li>554 <a href="#" class="text-base text-gray-400 hover:text-white">Договор-оферта</a>555 </li>556 </ul>557 </div>558 <div class="mt-12 md:mt-0">559 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Ресурсы</h3>560 <ul class="mt-4 space-y-4">561 <li>562 <a href="#" class="text-base text-gray-400 hover:text-white">API</a>563 </li>564 <li>565 <a href="#" class="text-base text-gray-400 hover:text-white">Статус сервиса</a>566 </li>567 <li>568 <a href="#" class="text-base text-gray-400 hover:text-white">Документация</a>569 </li>570 </ul>571 </div>572 </div>573 </div>574 </div>575 <div class="mt-12 border-t border-gray-700 pt-8">576 <p class="text-base text-gray-400 text-center">© 2023 QueueZen. Все права защищены.</p>577 </div>578 </div>579 </footer>580 581 <script>582 feather.replace();583 </script>584</body>585</html>586