Hugging Face's logo

Spaces:
Axelnm
/
myssq1
Running

App Files Community
Axelnm commited on
Commit
cb6b336
·
verified ·
1 Parent(s): 9975cfa

1. Локальное кафе «Brunch&Beans» Краткое содержание Одностраничник с героя-блоком, меню, галереей блюд, формой бронирования и контактами. Дизайн и верстка Макет на Bootstrap 5 (Grid) или CSS Grid. Адаптивная шапка-меню с «гамбургером». Hero-секция: полноэкранный фон-изображение с наложением полупрозрачного градиента. Шрифты Заголовки: Playfair Display (Google Fonts). Тело текста: Roboto или Open Sans. Анимации Простые fade-in при скролле через AOS (Animate On Scroll). Плавная подложка при наведении на карточки меню (CSS transition). Цветовая палитра Элемент Цвет HEX Основной фон Кремовый #FFF8F0 Акцент Коричневый #6B4C3B Текст Тёмно-серый #4A4A4A Кнопки Тёплый оранжевый #FF8A65 Технические фичи Форма бронирования через HTML5-валидацию. Lazy-load для изображений. CSS-переменные для глобального стайлинга. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +360 -894
index.html CHANGED
@@ -3,1010 +3,476 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Tools for Marketplaces | Ваш помощник в создании карточек</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <script>
10
- tailwind.config = {
11
- theme: {
12
- extend: {
13
- colors: {
14
- primary: '#6366f1',
15
- secondary: '#8b5cf6',
16
- dark: '#1e293b',
17
- light: '#f8fafc'
18
- },
19
- animation: {
20
- 'float': 'float 6s ease-in-out infinite',
21
- 'float-reverse': 'float-reverse 5s ease-in-out infinite',
22
- 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
23
- },
24
- keyframes: {
25
- float: {
26
- '0%, 100%': { transform: 'translateY(0)' },
27
- '50%': { transform: 'translateY(-20px)' },
28
- },
29
- 'float-reverse': {
30
- '0%, 100%': { transform: 'translateY(0)' },
31
- '50%': { transform: 'translateY(20px)' },
32
- }
33
- }
34
- }
35
- }
36
- }
37
- </script>
38
  <style>
39
- .gradient-text {
40
- background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
41
- -webkit-background-clip: text;
42
- background-clip: text;
43
- color: transparent;
44
  }
45
 
46
- .gradient-bg {
47
- background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
 
 
 
48
  }
49
 
50
- .card-hover {
51
- transition: all 0.3s ease;
52
  }
53
 
54
- .card-hover:hover {
55
- transform: translateY(-10px);
56
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
57
  }
58
 
59
- .feature-icon {
60
  transition: all 0.3s ease;
 
 
61
  }
62
 
63
- .feature-card:hover .feature-icon {
64
- transform: scale(1.1);
65
- color: #6366f1;
66
  }
67
 
68
- .scroll-down {
69
- animation: bounce 2s infinite;
 
70
  }
71
 
72
- @keyframes bounce {
73
- 0%, 20%, 50%, 80%, 100% {
74
- transform: translateY(0);
75
- }
76
- 40% {
77
- transform: translateY(-20px);
78
- }
79
- 60% {
80
- transform: translateY(-10px);
81
- }
 
82
  }
83
  </style>
84
  </head>
85
- <body class="bg-gray-50 font-sans antialiased">
86
  <!-- Header -->
87
- <header class="relative overflow-hidden">
88
- <!-- Navbar -->
89
- <nav class="bg-white shadow-sm fixed w-full z-50">
90
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91
- <div class="flex justify-between h-16">
92
- <div class="flex items-center">
93
- <div class="flex-shrink-0 flex items-center">
94
- <i class="fas fa-robot text-2xl text-primary mr-2"></i>
95
- <span class="text-xl font-bold text-dark">MarketAI</span>
96
- </div>
97
- </div>
98
- <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
99
- <a href="#features" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Возможности</a>
100
- <a href="#pricing" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Тарифы</a>
101
- <a href="#faq" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">FAQ</a>
102
- <a href="#contact" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Контакты</a>
103
- </div>
104
- <div class="flex items-center">
105
- <a href="#pricing" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
106
- Купить доступ
107
- </a>
108
- </div>
109
- </div>
110
- </div>
111
- </nav>
112
-
113
- <!-- Hero Section -->
114
- <div class="pt-24 pb-20 sm:pt-32 sm:pb-28 lg:pt-40 lg:pb-36">
115
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
- <div class="lg:grid lg:grid-cols-12 lg:gap-8">
117
- <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
118
- <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
119
- <span class="block">ИИ-помощник для</span>
120
- <span class="block gradient-text">маркетплейсов</span>
121
- </h1>
122
- <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
123
- Создавайте идеальные карточки товаров с помощью искусственного интеллекта. Экономьте время и увеличивайте продажи с нашим Telegram ботом.
124
- </p>
125
- <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
126
- <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
127
- <a href="#pricing" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-colors">
128
- Попробовать сейчас
129
- </a>
130
- <a href="#features" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white border-primary md:py-4 md:text-lg md:px-10 transition-colors">
131
- Узнать больше
132
- </a>
133
- </div>
134
- </div>
135
- </div>
136
- <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">
137
- <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
138
- <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-200 opacity-50 animate-pulse-slow"></div>
139
- <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-200 opacity-50 animate-pulse-slow"></div>
140
- <div class="relative w-full rounded-lg overflow-hidden">
141
- <img class="w-full h-auto rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80" alt="ИИ создает карточки товаров">
142
- </div>
143
- <div class="absolute -bottom-5 -left-5 w-24 h-24 bg-white rounded-lg shadow-lg p-2 animate-float">
144
- <img class="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1486401899868-0e435ed85128?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Пример карточки товара">
145
- </div>
146
- <div class="absolute -top-5 -right-5 w-24 h-24 bg-white rounded-lg shadow-lg p-2 animate-float-reverse">
147
- <img class="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Пример карточки товара">
148
- </div>
149
- </div>
150
- </div>
151
- </div>
152
- </div>
153
  </div>
154
 
155
- <div class="absolute bottom-5 left-1/2 transform -translate-x-1/2 scroll-down">
156
- <a href="#features" class="text-gray-400 hover:text-primary transition-colors">
157
- <i class="fas fa-chevron-down text-2xl"></i>
158
- </a>
159
- </div>
160
- </header>
161
-
162
- <!-- Features Section -->
163
- <section id="features" class="py-16 sm:py-24 lg:py-32 bg-white">
164
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
165
- <div class="text-center">
166
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
167
- Мощные возможности для вашего бизнеса
168
- </h2>
169
- <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
170
- Наш Telegram бот предоставляет все необходимые инструменты для создания идеальных карточек товаров
171
- </p>
172
- </div>
173
-
174
- <div class="mt-20">
175
- <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
176
- <!-- Feature 1 -->
177
- <div class="feature-card pt-10">
178
- <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full card-hover">
179
- <div class="-mt-10">
180
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto feature-icon">
181
- <i class="fas fa-magic text-xl"></i>
182
- </div>
183
- <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Генерация описаний</h3>
184
- <p class="mt-5 text-base text-gray-500">
185
- ИИ создаст уникальные, SEO-оптимизированные описания товаров, которые привлекают покупателей и увеличивают конверсию.
186
- </p>
187
- </div>
188
- </div>
189
- </div>
190
-
191
- <!-- Feature 2 -->
192
- <div class="feature-card pt-10">
193
- <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full card-hover">
194
- <div class="-mt-10">
195
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white mx-auto feature-icon">
196
- <i class="fas fa-image text-xl"></i>
197
- </div>
198
- <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Обработка изображений</h3>
199
- <p class="mt-5 text-base text-gray-500">
200
- Автоматическое улучшение качества фото, удаление фона, добавление водяных знаков и создание коллажей для ваших товаров.
201
- </p>
202
- </div>
203
- </div>
204
- </div>
205
-
206
- <!-- Feature 3 -->
207
- <div class="feature-card pt-10">
208
- <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full card-hover">
209
- <div class="-mt-10">
210
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mx-auto feature-icon">
211
- <i class="fas fa-tags text-xl"></i>
212
- </div>
213
- <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Подбор ключевых слов</h3>
214
- <p class="mt-5 text-base text-gray-500">
215
- Интеллектуальный анализ конкурентов и подбор самых эффективных ключевых слов для вашей ниши.
216
- </p>
217
- </div>
218
- </div>
219
- </div>
220
-
221
- <!-- Feature 4 -->
222
- <div class="feature-card pt-10">
223
- <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full card-hover">
224
- <div class="-mt-10">
225
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto feature-icon">
226
- <i class="fas fa-chart-line text-xl"></i>
227
- </div>
228
- <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Анализ конкурентов</h3>
229
- <p class="mt-5 text-base text-gray-500">
230
- Получайте данные о топовых товарах в вашей категории и узнавайте, что делает их успешными.
231
- </p>
232
- </div>
233
- </div>
234
- </div>
235
-
236
- <!-- Feature 5 -->
237
- <div class="feature-card pt-10">
238
- <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full card-hover">
239
- <div class="-mt-10">
240
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white mx-auto feature-icon">
241
- <i class="fas fa-language text-xl"></i>
242
- </div>
243
- <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Мультиязычность</h3>
244
- <p class="mt-5 text-base text-gray-500">
245
- Создавайте карточки товаров на разных языках для международных маркетплейсов.
246
- </p>
247
- </div>
248
- </div>
249
- </div>
250
-
251
- <!-- Feature 6 -->
252
- <div class="feature-card pt-10">
253
- <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full card-hover">
254
- <div class="-mt-10">
255
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mx-auto feature-icon">
256
- <i class="fas fa-clock text-xl"></i>
257
- </div>
258
- <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Экономия времени</h3>
259
- <p class="mt-5 text-base text-gray-500">
260
- Сократите время на создание карточек с нескольких часов до нескольких минут.
261
- </p>
262
- </div>
263
- </div>
264
- </div>
265
- </div>
266
  </div>
267
  </div>
268
- </section>
269
 
270
- <!-- How it works -->
271
- <section class="py-16 sm:py-24 lg:py-32 bg-gray-50">
272
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
273
- <div class="lg:grid lg:grid-cols-12 lg:gap-8">
274
- <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
275
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
276
- Как это работает?
277
- </h2>
278
- <p class="mt-3 text-lg text-gray-500">
279
- Всего 3 простых шага отделяют вас от профессиональных карточек товаров
280
- </p>
281
-
282
- <div class="mt-10 space-y-10">
283
- <div class="flex">
284
- <div class="flex-shrink-0">
285
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
286
- <span class="text-xl font-bold">1</span>
287
- </div>
288
- </div>
289
- <div class="ml-4">
290
- <h3 class="text-lg font-medium text-gray-900">Подключите бота</h3>
291
- <p class="mt-2 text-base text-gray-500">
292
- Перейдите в нашего Telegram бота и начните диалог
293
- </p>
294
- </div>
295
- </div>
296
-
297
- <div class="flex">
298
- <div class="flex-shrink-0">
299
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
300
- <span class="text-xl font-bold">2</span>
301
- </div>
302
- </div>
303
- <div class="ml-4">
304
- <h3 class="text-lg font-medium text-gray-900">Выберите задачу</h3>
305
- <p class="mt-2 text-base text-gray-500">
306
- Укажите, что вам нужно: генерация описания, обработка фото или анализ конкурентов
307
- </p>
308
- </div>
309
- </div>
310
-
311
- <div class="flex">
312
- <div class="flex-shrink-0">
313
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
314
- <span class="text-xl font-bold">3</span>
315
- </div>
316
- </div>
317
- <div class="ml-4">
318
- <h3 class="text-lg font-medium text-gray-900">Получите результат</h3>
319
- <p class="mt-2 text-base text-gray-500">
320
- Бот мгновенно обработает запрос и предоставит готовый вариант карточки товара
321
- </p>
322
- </div>
323
- </div>
324
- </div>
325
- </div>
326
- <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">
327
- <div class="relative mx-auto w-full rounded-lg shadow-xl overflow-hidden">
328
- <div class="absolute inset-0 bg-gradient-to-br from-primary to-purple-600 opacity-50"></div>
329
- <img class="w-full h-auto" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80" alt="Работа с ботом">
330
- <div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-6">
331
- <div class="flex items-center">
332
- <div class="flex-shrink-0">
333
- <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt="Аватар бота">
334
- </div>
335
- <div class="ml-3">
336
- <p class="text-sm font-medium text-gray-900">MarketAI Bot</p>
337
- <p class="text-sm text-gray-500">Онлайн</p>
338
- </div>
339
- </div>
340
- <div class="mt-4 bg-gray-100 rounded-lg p-4">
341
- <p class="text-sm text-gray-800">Привет! Я помогу тебе создать идеальную карточку товара. Что тебе нужно?</p>
342
- <div class="mt-2 grid grid-cols-2 gap-2">
343
- <button class="text-xs bg-white rounded p-2 text-gray-800 hover:bg-gray-200 transition-colors">Генерация описания</button>
344
- <button class="text-xs bg-white rounded p-2 text-gray-800 hover:bg-gray-200 transition-colors">Обработка фото</button>
345
- <button class="text-xs bg-white rounded p-2 text-gray-800 hover:bg-gray-200 transition-colors">Анализ конкурентов</button>
346
- <button class="text-xs bg-white rounded p-2 text-gray-800 hover:bg-gray-200 transition-colors">Подбор ключевых слов</button>
347
- </div>
348
- </div>
349
- </div>
350
- </div>
351
- </div>
352
- </div>
353
  </div>
354
  </section>
355
 
356
- <!-- Pricing Section -->
357
- <section id="pricing" class="py-16 sm:py-24 lg:py-32 bg-white">
358
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
359
- <div class="text-center">
360
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
361
- Доступные тарифы
362
- </h2>
363
- <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
364
- Выберите подходящий вариант для вашего бизнеса
365
- </p>
366
  </div>
367
-
368
- <div class="mt-16 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
369
- <!-- Basic Plan -->
370
- <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col card-hover">
371
- <div class="flex-1">
372
- <h3 class="text-xl font-semibold text-gray-900">Базовый</h3>
373
- <p class="mt-4 flex items-baseline text-gray-900">
374
- <span class="text-5xl font-extrabold tracking-tight">990 ₽</span>
375
- <span class="ml-1 text-xl font-semibold">/месяц</span>
376
- </p>
377
- <p class="mt-6 text-gray-500">Идеально для начинающих продавцов</p>
378
-
379
- <ul class="mt-6 space-y-4">
380
- <li class="flex">
381
- <i class="fas fa-check text-green-500 mt-1"></i>
382
- <span class="ml-3 text-gray-500">50 генераций описаний</span>
383
- </li>
384
- <li class="flex">
385
- <i class="fas fa-check text-green-500 mt-1"></i>
386
- <span class="ml-3 text-gray-500">30 обработок фото</span>
 
387
  </li>
388
- <li class="flex">
389
- <i class="fas fa-check text-green-500 mt-1"></i>
390
- <span class="ml-3 text-gray-500">10 анализов конкурентов</span>
391
  </li>
392
- <li class="flex">
393
- <i class="fas fa-check text-green-500 mt-1"></i>
394
- <span class="ml-3 text-gray-500">Поддержка в чате</span>
395
  </li>
396
  </ul>
397
  </div>
398
- <button onclick="openPurchaseModal('Базовый')" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-primary text-white hover:bg-indigo-700 transition-colors">
399
- Купить сейчас
400
- </button>
401
  </div>
402
-
403
- <!-- Popular Plan -->
404
- <div class="relative p-8 bg-white border-2 border-primary rounded-2xl shadow-sm flex flex-col card-hover transform scale-105 z-10">
405
- <div class="absolute top-0 right-0 -mt-4 -mr-4 px-3 py-1 bg-primary text-white text-sm font-semibold rounded-full">
406
- Популярный
407
- </div>
408
- <div class="flex-1">
409
- <h3 class="text-xl font-semibold text-gray-900">Профессиональный</h3>
410
- <p class="mt-4 flex items-baseline text-gray-900">
411
- <span class="text-5xl font-extrabold tracking-tight">2 990 ₽</span>
412
- <span class="ml-1 text-xl font-semibold">/месяц</span>
413
- </p>
414
- <p class="mt-6 text-gray-500">Для активных продавцов с большим ассортиментом</p>
415
-
416
- <ul class="mt-6 space-y-4">
417
- <li class="flex">
418
- <i class="fas fa-check text-green-500 mt-1"></i>
419
- <span class="ml-3 text-gray-500">200 генераций описаний</span>
420
- </li>
421
- <li class="flex">
422
- <i class="fas fa-check text-green-500 mt-1"></i>
423
- <span class="ml-3 text-gray-500">100 обработок фото</span>
424
- </li>
425
- <li class="flex">
426
- <i class="fas fa-check text-green-500 mt-1"></i>
427
- <span class="ml-3 text-gray-500">50 анализов конкурентов</span>
428
  </li>
429
- <li class="flex">
430
- <i class="fas fa-check text-green-500 mt-1"></i>
431
- <span class="ml-3 text-gray-500">Приоритетная поддержка</span>
432
  </li>
433
- <li class="flex">
434
- <i class="fas fa-check text-green-500 mt-1"></i>
435
- <span class="ml-3 text-gray-500">Мультиязычные описания</span>
436
  </li>
437
  </ul>
438
  </div>
439
- <button onclick="openPurchaseModal('Профессиональный')" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-primary text-white hover:bg-indigo-700 transition-colors">
440
- Купить сейчас
441
- </button>
442
  </div>
443
-
444
- <!-- Enterprise Plan -->
445
- <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col card-hover">
446
- <div class="flex-1">
447
- <h3 class="text-xl font-semibold text-gray-900">Премиум</h3>
448
- <p class="mt-4 flex items-baseline text-gray-900">
449
- <span class="text-5xl font-extrabold tracking-tight">5 990 ₽</span>
450
- <span class="ml-1 text-xl font-semibold">/месяц</span>
451
- </p>
452
- <p class="mt-6 text-gray-500">Для крупных магазинов и агентств</p>
453
-
454
- <ul class="mt-6 space-y-4">
455
- <li class="flex">
456
- <i class="fas fa-check text-green-500 mt-1"></i>
457
- <span class="ml-3 text-gray-500">Безлимитные генерации</span>
458
- </li>
459
- <li class="flex">
460
- <i class="fas fa-check text-green-500 mt-1"></i>
461
- <span class="ml-3 text-gray-500">Безлимитные обработки фото</span>
462
- </li>
463
- <li class="flex">
464
- <i class="fas fa-check text-green-500 mt-1"></i>
465
- <span class="ml-3 text-gray-500">100 анализов конкурентов</span>
466
- </li>
467
- <li class="flex">
468
- <i class="fas fa-check text-green-500 mt-1"></i>
469
- <span class="ml-3 text-gray-500">Персональный менеджер</span>
470
  </li>
471
- <li class="flex">
472
- <i class="fas fa-check text-green-500 mt-1"></i>
473
- <span class="ml-3 text-gray-500">API доступ</span>
474
  </li>
475
- <li class="flex">
476
- <i class="fas fa-check text-green-500 mt-1"></i>
477
- <span class="ml-3 text-gray-500">Кастомные шаблоны</span>
478
  </li>
479
  </ul>
480
  </div>
481
- <button onclick="openPurchaseModal('Премиум')" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-primary text-white hover:bg-indigo-700 transition-colors">
482
- Купить сейчас
483
- </button>
484
  </div>
485
  </div>
486
 
487
- <div class="mt-12 text-center">
488
- <p class="text-gray-500">Нужен индивидуальный тариф? <a href="#contact" class="text-primary font-medium hover:text-indigo-700 transition-colors">Свяжитесь с нами</a></p>
489
  </div>
490
  </div>
491
  </section>
492
 
493
- <!-- Testimonials -->
494
- <section class="py-16 sm:py-24 lg:py-32 bg-gray-50">
495
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
496
- <div class="text-center">
497
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
498
- Отзывы наших клиентов
499
- </h2>
500
- <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
501
- Узнайте, что говорят о нас продавцы с маркетплейсов
502
- </p>
503
  </div>
504
 
505
- <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
506
- <!-- Testimonial 1 -->
507
- <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
508
- <div class="flex items-center">
509
- <div class="flex-shrink-0">
510
- <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=128&h=128&q=60" alt="Анна">
511
- </div>
512
- <div class="ml-4">
513
- <h3 class="text-lg font-medium text-gray-900">Анна</h3>
514
- <p class="text-gray-500">Продавец на Wildberries</p>
515
- </div>
516
- </div>
517
- <div class="mt-4">
518
- <p class="text-gray-600">
519
- "С помощью этого бота я сократила время на создание карточек с 3 часов до 20 минут! Описания получаются очень качественные, а фото выглядят профессионально."
520
- </p>
521
- <div class="mt-4 flex text-yellow-400">
522
- <i class="fas fa-star"></i>
523
- <i class="fas fa-star"></i>
524
- <i class="fas fa-star"></i>
525
- <i class="fas fa-star"></i>
526
- <i class="fas fa-star"></i>
527
- </div>
528
- </div>
529
  </div>
530
-
531
- <!-- Testimonial 2 -->
532
- <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
533
- <div class="flex items-center">
534
- <div class="flex-shrink-0">
535
- <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=128&h=128&q=60" alt="Дмитрий">
536
- </div>
537
- <div class="ml-4">
538
- <h3 class="text-lg font-medium text-gray-900">Дмитрий</h3>
539
- <p class="text-gray-500">Владелец магазина на Ozon</p>
540
- </div>
541
- </div>
542
- <div class="mt-4">
543
- <p class="text-gray-600">
544
- "После использования бота конверсия моих карточек увеличилась на 35%. Особенно полезен анализ конкурентов - теперь я точн�� знаю, какие формулировки работают лучше всего."
545
- </p>
546
- <div class="mt-4 flex text-yellow-400">
547
- <i class="fas fa-star"></i>
548
- <i class="fas fa-star"></i>
549
- <i class="fas fa-star"></i>
550
- <i class="fas fa-star"></i>
551
- <i class="fas fa-star"></i>
552
- </div>
553
- </div>
554
  </div>
555
-
556
- <!-- Testimonial 3 -->
557
- <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
558
- <div class="flex items-center">
559
- <div class="flex-shrink-0">
560
- <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=128&h=128&q=60" alt="Иван">
561
- </div>
562
- <div class="ml-4">
563
- <h3 class="text-lg font-medium text-gray-900">Иван</h3>
564
- <p class="text-gray-500">Агентство маркетплейсов</p>
565
- </div>
566
- </div>
567
- <div class="mt-4">
568
- <p class="text-gray-600">
569
- "Мы обслуживаем 20+ клиентов, и этот бот стал незаменимым инструментом в нашей работе. API доступ позволяет интегрировать его в наши процессы, экономя сотни часов работы."
570
- </p>
571
- <div class="mt-4 flex text-yellow-400">
572
- <i class="fas fa-star"></i>
573
- <i class="fas fa-star"></i>
574
- <i class="fas fa-star"></i>
575
- <i class="fas fa-star"></i>
576
- <i class="fas fa-star-half-alt"></i>
577
- </div>
578
- </div>
 
 
 
 
 
 
 
 
 
 
 
579
  </div>
580
  </div>
581
  </div>
582
  </section>
583
 
584
- <!-- FAQ Section -->
585
- <section id="faq" class="py-16 sm:py-24 lg:py-32 bg-white">
586
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
587
- <div class="text-center">
588
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
589
- Часто задаваемые вопросы
590
- </h2>
591
- <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
592
- Ответы на самые популярные вопросы о нашем сервисе
593
- </p>
594
  </div>
595
 
596
- <div class="mt-16 max-w-3xl mx-auto">
597
- <div class="space-y-6">
598
- <!-- FAQ Item 1 -->
599
- <div x-data="{ open: false }" class="bg-gray-50 rounded-lg p-6">
600
- <button @click="open = !open" class="flex justify-between items-center w-full text-left">
601
- <h3 class="text-lg font-medium text-gray-900">Как получить доступ к боту после оплаты?</h3>
602
- <i :class="{'transform rotate-180': open}" class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
603
- </button>
604
- <div x-show="open" x-collapse class="mt-4 text-gray-600">
605
- <p>После успешной оплаты вы получите уникальный код доступа в Telegram сообщении. Перейдите в нашего бота @MarketAIBot, введите этот код, и доступ будет активирован мгновенно.</p>
606
- </div>
607
- </div>
608
-
609
- <!-- FAQ Item 2 -->
610
- <div x-data="{ open: false }" class="bg-gray-50 rounded-lg p-6">
611
- <button @click="open = !open" class="flex justify-between items-center w-full text-left">
612
- <h3 class="text-lg font-medium text-gray-900">Можно ли использовать бот для нескольких маркетплейсов?</h3>
613
- <i :class="{'transform rotate-180': open}" class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
614
- </button>
615
- <div x-show="open" x-collapse class="mt-4 text-gray-600">
616
- <p>Да, наш бот поддерживает все популярные маркетплейсы: Wildberries, Ozon, Яндекс.Маркет, AliExpress и другие. Вы можете создавать карточки в любом формате, который требуется.</p>
617
- </div>
618
- </div>
619
-
620
- <!-- FAQ Item 3 -->
621
- <div x-data="{ open: false }" class="bg-gray-50 rounded-lg p-6">
622
- <button @click="open = !open" class="flex justify-between items-center w-full text-left">
623
- <h3 class="text-lg font-medium text-gray-900">Что делать, если у меня закончились лимиты?</h3>
624
- <i :class="{'transform rotate-180': open}" class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
625
- </button>
626
- <div x-show="open" x-collapse class="mt-4 text-gray-600">
627
- <p>Вы можете в любой момент перейти на более высокий тариф или докупить дополнительные лимиты в разделе "Управление подпиской" в боте. Неиспользованные лимиты не переносятся на следующий месяц.</p>
628
- </div>
629
- </div>
630
-
631
- <!-- FAQ Item 4 -->
632
- <div x-data="{ open: false }" class="bg-gray-50 rounded-lg p-6">
633
- <button @click="open = !open" class="flex justify-between items-center w-full text-left">
634
- <h3 class="text-lg font-medium text-gray-900">Как отменить подписку?</h3>
635
- <i :class="{'transform rotate-180': open}" class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
636
- </button>
637
- <div x-show="open" x-collapse class="mt-4 text-gray-600">
638
- <p>Вы можете отменить подписку в любое время в разделе "Управление подпиской" в боте. Подписка останется активной до конца оплаченного периода, после чего доступ автоматически прекратится.</p>
639
- </div>
640
- </div>
641
-
642
- <!-- FAQ Item 5 -->
643
- <div x-data="{ open: false }" class="bg-gray-50 rounded-lg p-6">
644
- <button @click="open = !open" class="flex justify-between items-center w-full text-left">
645
- <h3 class="text-lg font-medium text-gray-900">Есть ли бесплатный пробный период?</h3>
646
- <i :class="{'transform rotate-180': open}" class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
647
- </button>
648
- <div x-show="open" x-collapse class="mt-4 text-gray-600">
649
- <p>Да, мы предлагаем 3 дня бесплатного тестирования с ограниченным функционалом. Вы можете попробовать генерацию 5 описаний и обработку 3 фото, чтобы оценить качество нашего сервиса.</p>
650
  </div>
651
  </div>
652
- </div>
653
-
654
- <div class="mt-12 text-center">
655
- <p class="text-gray-500">Не нашли ответ на свой вопрос? <a href="#contact" class="text-primary font-medium hover:text-indigo-700 transition-colors">Напишите нам</a></p>
656
- </div>
657
- </div>
658
- </div>
659
- </section>
660
-
661
- <!-- CTA Section -->
662
- <section class="gradient-bg py-16 sm:py-24 lg:py-32">
663
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
664
- <div class="text-center">
665
- <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
666
- Готовы увеличить продажи?
667
- </h2>
668
- <p class="mt-4 max-w-2xl text-xl text-indigo-100 mx-auto">
669
- Начните использовать нашего бота прямо сейчас и создавайте идеальные карточки товаров за минуты
670
- </p>
671
- <div class="mt-8 flex justify-center">
672
- <div class="inline-flex rounded-md shadow">
673
- <a href="#pricing" 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 transition-colors">
674
- Выбрать тариф
675
- <i class="fas fa-arrow-right ml-3"></i>
676
- </a>
677
- </div>
678
- </div>
679
- </div>
680
- </div>
681
- </section>
682
-
683
- <!-- Contact Section -->
684
- <section id="contact" class="py-16 sm:py-24 lg:py-32 bg-white">
685
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
686
- <div class="lg:grid lg:grid-cols-12 lg:gap-8">
687
- <div class="lg:col-span-5">
688
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
689
- Свяжитесь с нами
690
- </h2>
691
- <p class="mt-3 text-lg text-gray-500">
692
- Есть вопросы или предложения? Напишите нам, и мы ответим в ближайшее время.
693
- </p>
694
 
695
- <div class="mt-8">
696
- <div class="flex items-start">
697
- <div class="flex-shrink-0">
698
- <i class="fas fa-envelope text-primary text-xl"></i>
 
699
  </div>
700
- <div class="ml-4">
701
- <h3 class="text-lg font-medium text-gray-900">Электронная почта</h3>
702
- <p class="mt-1 text-gray-600">support@marketai-bot.com</p>
 
703
  </div>
704
- </div>
705
-
706
- <div class="mt-6 flex items-start">
707
- <div class="flex-shrink-0">
708
- <i class="fab fa-telegram text-primary text-xl"></i>
709
  </div>
710
- <div class="ml-4">
711
- <h3 class="text-lg font-medium text-gray-900">Telegram</h3>
712
- <p class="mt-1 text-gray-600">@MarketAISupport</p>
 
713
  </div>
714
- </div>
715
-
716
- <div class="mt-6 flex items-start">
717
- <div class="flex-shrink-0">
718
- <i class="fas fa-phone-alt text-primary text-xl"></i>
719
  </div>
720
- <div class="ml-4">
721
- <h3 class="text-lg font-medium text-gray-900">Телефон</h3>
722
- <p class="mt-1 text-gray-600">+7 (999) 123-45-67</p>
 
 
 
 
 
 
 
723
  </div>
724
- </div>
725
- </div>
726
- </div>
727
-
728
- <div class="mt-12 lg:mt-0 lg:col-span-7">
729
- <div class="bg-white shadow-xl rounded-lg overflow-hidden">
730
- <div class="px-6 py-5 bg-gray-50 border-b border-gray-200">
731
- <h3 class="text-lg font-medium text-gray-900">Форма обратной связи</h3>
732
- </div>
733
- <div class="px-6 py-6">
734
- <form class="space-y-6">
735
- <div>
736
- <label for="name" class="block text-sm font-medium text-gray-700">Ваше имя</label>
737
- <div class="mt-1">
738
- <input type="text" name="name" id="name" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" placeholder="Иван Иванов">
739
- </div>
740
- </div>
741
-
742
- <div>
743
- <label for="email" class="block text-sm font-medium text-gray-700">Электронная почта</label>
744
- <div class="mt-1">
745
- <input type="email" name="email" id="email" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" placeholder="your@email.com">
746
- </div>
747
- </div>
748
-
749
- <div>
750
- <label for="subject" class="block text-sm font-medium text-gray-700">Тема</label>
751
- <div class="mt-1">
752
- <select id="subject" name="subject" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
753
- <option>Выберите тему</option>
754
- <option>Техническая поддержка</option>
755
- <option>Вопрос по тарифам</option>
756
- <option>Сотрудничество</option>
757
- <option>Другое</option>
758
- </select>
759
- </div>
760
- </div>
761
-
762
- <div>
763
- <label for="message" class="block text-sm font-medium text-gray-700">Сообщение</label>
764
- <div class="mt-1">
765
- <textarea id="message" name="message" rows="4" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" placeholder="Ваше сообщение..."></textarea>
766
- </div>
767
- </div>
768
-
769
- <div>
770
- <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-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
771
- Отправить сообщение
772
- </button>
773
- </div>
774
- </form>
775
- </div>
776
  </div>
777
  </div>
778
  </div>
779
  </div>
780
  </section>
781
 
782
- <!-- Footer -->
783
- <footer class="bg-dark text-gray-300 py-12">
784
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
785
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 
 
 
 
 
786
  <div>
787
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase">MarketAI</h3>
788
- <p class="mt-4 text-sm">
789
- ИИ-помощник для создания идеальных карточек товаров на маркетплейсах.
790
- </p>
791
- <div class="mt-4 flex space-x-6">
792
- <a href="#" class="text-gray-400 hover:text-white transition-colors">
793
- <i class="fab fa-telegram"></i>
794
- </a>
795
- <a href="#" class="text-gray-400 hover:text-white transition-colors">
796
- <i class="fab fa-vk"></i>
797
- </a>
798
- <a href="#" class="text-gray-400 hover:text-white transition-colors">
799
- <i class="fab fa-instagram"></i>
800
- </a>
801
  </div>
802
  </div>
803
 
804
- <div>
805
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Навигация</h3>
806
- <ul class="mt-4 space-y-2">
807
- <li><a href="#features" class="text-sm hover:text-white transition-colors">Возможности</a></li>
808
- <li><a href="#pricing" class="text-sm hover:text-white transition-colors">Тарифы</a></li>
809
- <li><a href="#faq" class="text-sm hover:text-white transition-colors">FAQ</a></li>
810
- <li><a href="#contact" class="text-sm hover:text-white transition-colors">Контакты</a></li>
811
- </ul>
812
- </div>
813
-
814
- <div>
815
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Правовая информация</h3>
816
- <ul class="mt-4 space-y-2">
817
- <li><a href="#" class="text-sm hover:text-white transition-colors">Политика конфиденциальности</a></li>
818
- <li><a href="#" class="text-sm hover:text-white transition-colors">Условия использования</a></li>
819
- <li><a href="#" class="text-sm hover:text-white transition-colors">Возврат средств</a></li>
820
- </ul>
821
- </div>
822
-
823
- <div>
824
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Подписаться на новости</h3>
825
- <p class="mt-4 text-sm">
826
- Получайте полезные советы и новости о сервисе.
827
- </p>
828
- <form class="mt-4 flex">
829
- <input type="email" class="px-4 py-2 border border-gray-600 bg-gray-800 text-white text-sm rounded-l-md focus:outline-none focus:ring-1 focus:ring-primary w-full" placeholder="Ваш email">
830
- <button type="submit" class="px-4 py-2 bg-primary text-white text-sm font-medium rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-primary transition-colors">
831
- <i class="fas fa-paper-plane"></i>
832
- </button>
833
- </form>
834
- </div>
835
- </div>
836
-
837
- <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
838
- <p class="text-sm">
839
- &copy; 2023 MarketAI Bot. Все права защищены.
840
- </p>
841
- <div class="mt-4 md:mt-0 flex space-x-6">
842
- <a href="#" class="text-sm hover:text-white transition-colors">Политика конфиденциальности</a>
843
- <a href="#" class="text-sm hover:text-white transition-colors">Условия использования</a>
844
  </div>
845
  </div>
846
  </div>
847
- </footer>
848
 
849
- <!-- Purchase Modal -->
850
- <div id="purchase-modal" class="fixed inset-0 z-50 hidden">
851
- <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
852
- <div class="fixed inset-0 flex items-center justify-center p-4">
853
- <div class="bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all">
854
- <div class="px-6 py-4 border-b border-gray-200">
855
- <h3 class="text-lg font-medium text-gray-900">Оформление заявки</h3>
856
- <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500">
857
- <i class="fas fa-times"></i>
858
- </button>
859
- </div>
860
- <div class="px-6 py-4">
861
- <form class="space-y-4">
862
- <div>
863
- <label class="block text-sm font-medium text-gray-700">Выберите тариф</label>
864
- <div class="mt-1 grid grid-cols-1 gap-3">
865
- <label class="flex items-center p-3 border border-gray-300 rounded-md cursor-pointer hover:border-primary">
866
- <input type="radio" name="plan" value="Базовый" class="h-4 w-4 text-primary focus:ring-primary" checked>
867
- <span class="ml-3 block text-sm font-medium text-gray-700">
868
- Базовый - 990 ₽/месяц
869
- <span class="text-xs text-gray-500 block">50 генераций, 30 обработок фото</span>
870
- </span>
871
- </label>
872
- <label class="flex items-center p-3 border border-gray-300 rounded-md cursor-pointer hover:border-primary">
873
- <input type="radio" name="plan" value="Профессиональный" class="h-4 w-4 text-primary focus:ring-primary">
874
- <span class="ml-3 block text-sm font-medium text-gray-700">
875
- Профессиональный - 2 990 ₽/месяц
876
- <span class="text-xs text-gray-500 block">200 генераций, 100 обработок фото</span>
877
- </span>
878
- </label>
879
- <label class="flex items-center p-3 border border-gray-300 rounded-md cursor-pointer hover:border-primary">
880
- <input type="radio" name="plan" value="Премиум" class="h-4 w-4 text-primary focus:ring-primary">
881
- <span class="ml-3 block text-sm font-medium text-gray-700">
882
- Премиум - 5 990 ₽/месяц
883
- <span class="text-xs text-gray-500 block">Безлимитные генерации и обработки</span>
884
- </span>
885
- </label>
886
- </div>
887
- </div>
888
- <div>
889
- <label for="name" class="block text-sm font-medium text-gray-700">Ваше имя</label>
890
- <input type="text" id="name" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
891
- </div>
892
- <div>
893
- <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
894
- <input type="email" id="email" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
895
- </div>
896
- <div>
897
- <label for="phone" class="block text-sm font-medium text-gray-700">Телефон</label>
898
- <input type="tel" id="phone" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
899
- </div>
900
- </form>
901
  </div>
902
- <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
903
- <button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
904
- Отмена
905
- </button>
906
- <button type="button" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-primary hover:bg-indigo-700">
907
- Отправить заявку
908
- </button>
909
  </div>
910
  </div>
911
  </div>
912
- </div>
913
-
914
- <!-- Back to top button -->
915
- <button id="back-to-top" class="fixed bottom-5 right-5 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
916
- <i class="fas fa-arrow-up"></i>
917
- </button>
918
 
919
- <!-- Alpine JS for interactivity -->
920
- <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
921
-
922
  <script>
923
- // Back to top button
924
- const backToTopButton = document.getElementById('back-to-top');
925
-
926
- window.addEventListener('scroll', () => {
927
- if (window.pageYOffset > 300) {
928
- backToTopButton.classList.remove('opacity-0', 'invisible');
929
- backToTopButton.classList.add('opacity-100', 'visible');
930
- } else {
931
- backToTopButton.classList.remove('opacity-100', 'visible');
932
- backToTopButton.classList.add('opacity-0', 'invisible');
933
- }
934
  });
935
 
936
- backToTopButton.addEventListener('click', () => {
937
- window.scrollTo({
938
- top: 0,
939
- behavior: 'smooth'
940
- });
941
  });
942
 
943
- // Smooth scrolling for anchor links
944
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
945
- anchor.addEventListener('click', function (e) {
946
- e.preventDefault();
947
-
948
- const targetId = this.getAttribute('href');
949
- if (targetId === '#') return;
950
-
951
- const targetElement = document.querySelector(targetId);
952
- if (targetElement) {
953
- window.scrollTo({
954
- top: targetElement.offsetTop - 80,
955
- behavior: 'smooth'
956
- });
957
- }
958
- });
959
- });
960
-
961
- // Purchase modal functionality
962
- const purchaseModal = document.getElementById('purchase-modal');
963
- const planNameInput = document.getElementById('plan-name');
964
- const modalCloseButtons = purchaseModal.querySelectorAll('button[type="button"]');
965
-
966
- // Open purchase modal with selected plan
967
- function openPurchaseModal(planName) {
968
- const modal = document.getElementById('purchase-modal');
969
- const radioButtons = modal.querySelectorAll('input[name="plan"]');
970
 
971
- radioButtons.forEach(radio => {
972
- if (radio.value === planName) {
973
- radio.checked = true;
974
- }
975
- });
976
-
977
- modal.classList.remove('hidden');
978
- }
979
-
980
- // Close modal handlers
981
- modalCloseButtons.forEach(button => {
982
- button.addEventListener('click', () => {
983
- purchaseModal.classList.add('hidden');
984
- });
985
- });
986
-
987
- // Close modal when clicking outside
988
- purchaseModal.addEventListener('click', (e) => {
989
- if (e.target === purchaseModal) {
990
- purchaseModal.classList.add('hidden');
991
  }
992
  });
993
 
994
- // Animation on scroll
995
- const animateOnScroll = () => {
996
- const elements = document.querySelectorAll('.feature-card, .card-hover');
997
 
998
- elements.forEach(element => {
999
  const elementPosition = element.getBoundingClientRect().top;
1000
  const screenPosition = window.innerHeight / 1.3;
1001
 
1002
  if (elementPosition < screenPosition) {
1003
- element.classList.add('animate-fade-in');
1004
  }
1005
  });
1006
- };
1007
-
1008
- window.addEventListener('scroll', animateOnScroll);
1009
- window.addEventListener('load', animateOnScroll);
1010
  </script>
1011
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Axelnm/myssq1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1012
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Brunch&Beans - Уютное кафе</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  <style>
11
+ :root {
12
+ --cream: #FFF8F0;
13
+ --brown: #6B4C3B;
14
+ --gray: #4A4A4A;
15
+ --orange: #FF8A65;
16
  }
17
 
18
+ body {
19
+ font-family: 'Roboto', sans-serif;
20
+ color: var(--gray);
21
+ background-color: var(--cream);
22
+ scroll-behavior: smooth;
23
  }
24
 
25
+ h1, h2, h3, h4 {
26
+ font-family: 'Playfair Display', serif;
27
  }
28
 
29
+ .menu-item:hover .menu-overlay {
30
+ opacity: 1;
31
+ transform: translateY(0);
32
  }
33
 
34
+ .menu-overlay {
35
  transition: all 0.3s ease;
36
+ opacity: 0;
37
+ transform: translateY(20px);
38
  }
39
 
40
+ .fade-in {
41
+ animation: fadeIn 0.8s ease-in;
 
42
  }
43
 
44
+ @keyframes fadeIn {
45
+ from { opacity: 0; }
46
+ to { opacity: 1; }
47
  }
48
 
49
+ .hero-overlay {
50
+ background: linear-gradient(to bottom, rgba(107, 76, 59, 0.6), rgba(107, 76, 59, 0.3));
51
+ }
52
+
53
+ .lazy {
54
+ opacity: 0;
55
+ transition: opacity 0.3s;
56
+ }
57
+
58
+ .lazy.loaded {
59
+ opacity: 1;
60
  }
61
  </style>
62
  </head>
63
+ <body class="overflow-x-hidden">
64
  <!-- Header -->
65
+ <header class="fixed w-full z-50 bg-[#FFF8F0] shadow-md">
66
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
67
+ <a href="#" class="text-2xl font-bold text-[#6B4C3B]">Brunch<span class="text-[#FF8A65]">&</span>Beans</a>
68
+
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="#home" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Главная</a>
71
+ <a href="#menu" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Меню</a>
72
+ <a href="#gallery" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Галерея</a>
73
+ <a href="#reservation" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Бронирование</a>
74
+ <a href="#contact" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Контакты</a>
75
+ </nav>
76
+
77
+ <button id="mobile-menu-button" class="md:hidden text-[#6B4C3B]">
78
+ <i class="fas fa-bars text-2xl"></i>
79
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  </div>
81
 
82
+ <!-- Mobile Menu -->
83
+ <div id="mobile-menu" class="hidden md:hidden bg-[#FFF8F0] w-full px-4 pb-4">
84
+ <div class="flex flex-col space-y-3">
85
+ <a href="#home" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Главная</a>
86
+ <a href="#menu" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Меню</a>
87
+ <a href="#gallery" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Галерея</a>
88
+ <a href="#reservation" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Бронирование</a>
89
+ <a href="#contact" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Контакты</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
  </div>
92
+ </header>
93
 
94
+ <!-- Hero Section -->
95
+ <section id="home" class="relative h-screen flex items-center justify-center">
96
+ <div class="absolute inset-0 hero-overlay"></div>
97
+ <img
98
+ src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
99
+ alt="Brunch&Beans интерьер"
100
+ class="absolute w-full h-full object-cover lazy"
101
+ loading="lazy"
102
+ onload="this.classList.add('loaded')"
103
+ >
104
+
105
+ <div class="container mx-auto px-4 z-10 text-center text-white fade-in">
106
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Brunch<span class="text-[#FF8A65]">&</span>Beans</h1>
107
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Уютное кафе с домашней атмосферой и вкуснейшими блюдами</p>
108
+ <a href="#reservation" class="bg-[#FF8A65] hover:bg-[#e07a55] text-white px-8 py-3 rounded-full text-lg font-medium transition">Забронировать столик</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </div>
110
  </section>
111
 
112
+ <!-- Menu Section -->
113
+ <section id="menu" class="py-20 bg-[#FFF8F0]">
114
+ <div class="container mx-auto px-4">
115
+ <div class="text-center mb-16">
116
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Наше меню</h2>
117
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
 
 
 
 
118
  </div>
119
+
120
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
121
+ <!-- Breakfast -->
122
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
123
+ <div class="relative h-48 overflow-hidden">
124
+ <img
125
+ src="https://images.unsplash.com/photo-1551218808-94e220e084d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
126
+ alt="Завтраки"
127
+ class="w-full h-full object-cover lazy"
128
+ loading="lazy"
129
+ onload="this.classList.add('loaded')"
130
+ >
131
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
132
+ <h3 class="text-white text-2xl font-bold">Завтраки</h3>
133
+ </div>
134
+ </div>
135
+ <div class="p-6">
136
+ <ul class="space-y-3">
137
+ <li class="flex justify-between">
138
+ <span>Яичница с авокадо</span>
139
+ <span class="text-[#FF8A65] font-medium">450₽</span>
140
  </li>
141
+ <li class="flex justify-between">
142
+ <span>Блинчики с ягодами</span>
143
+ <span class="text-[#FF8A65] font-medium">380₽</span>
144
  </li>
145
+ <li class="flex justify-between">
146
+ <span>Гранола с йогуртом</span>
147
+ <span class="text-[#FF8A65] font-medium">320₽</span>
148
  </li>
149
  </ul>
150
  </div>
 
 
 
151
  </div>
152
+
153
+ <!-- Lunch -->
154
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
155
+ <div class="relative h-48 overflow-hidden">
156
+ <img
157
+ src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80"
158
+ alt="Обеды"
159
+ class="w-full h-full object-cover lazy"
160
+ loading="lazy"
161
+ onload="this.classList.add('loaded')"
162
+ >
163
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
164
+ <h3 class="text-white text-2xl font-bold">Обеды</h3>
165
+ </div>
166
+ </div>
167
+ <div class="p-6">
168
+ <ul class="space-y-3">
169
+ <li class="flex justify-between">
170
+ <span>Салат Цезарь</span>
171
+ <span class="text-[#FF8A65] font-medium">520₽</span>
 
 
 
 
 
 
172
  </li>
173
+ <li class="flex justify-between">
174
+ <span>Паста Карбонара</span>
175
+ <span class="text-[#FF8A65] font-medium">580₽</span>
176
  </li>
177
+ <li class="flex justify-between">
178
+ <span>Суп Том Ям</span>
179
+ <span class="text-[#FF8A65] font-medium">490₽</span>
180
  </li>
181
  </ul>
182
  </div>
 
 
 
183
  </div>
184
+
185
+ <!-- Drinks -->
186
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
187
+ <div class="relative h-48 overflow-hidden">
188
+ <img
189
+ src="https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
190
+ alt="Напитки"
191
+ class="w-full h-full object-cover lazy"
192
+ loading="lazy"
193
+ onload="this.classList.add('loaded')"
194
+ >
195
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
196
+ <h3 class="text-white text-2xl font-bold">Напитки</h3>
197
+ </div>
198
+ </div>
199
+ <div class="p-6">
200
+ <ul class="space-y-3">
201
+ <li class="flex justify-between">
202
+ <span>Латте</span>
203
+ <span class="text-[#FF8A65] font-medium">280₽</span>
 
 
 
 
 
 
 
204
  </li>
205
+ <li class="flex justify-between">
206
+ <span>Фреш апельсиновый</span>
207
+ <span class="text-[#FF8A65] font-medium">350₽</span>
208
  </li>
209
+ <li class="flex justify-between">
210
+ <span>Лимонад домашний</span>
211
+ <span class="text-[#FF8A65] font-medium">320₽</span>
212
  </li>
213
  </ul>
214
  </div>
 
 
 
215
  </div>
216
  </div>
217
 
218
+ <div class="text-center mt-12">
219
+ <a href="#" class="inline-block border-2 border-[#6B4C3B] text-[#6B4C3B] hover:bg-[#6B4C3B] hover:text-white px-6 py-2 rounded-full transition">Полное меню (PDF)</a>
220
  </div>
221
  </div>
222
  </section>
223
 
224
+ <!-- Gallery Section -->
225
+ <section id="gallery" class="py-20 bg-white">
226
+ <div class="container mx-auto px-4">
227
+ <div class="text-center mb-16">
228
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Галерея</h2>
229
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
 
 
 
 
230
  </div>
231
 
232
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
233
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
234
+ <img
235
+ src="https://images.unsplash.com/photo-1517248135467-4bab7a99e9c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
236
+ alt="Интерьер кафе"
237
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
238
+ loading="lazy"
239
+ onload="this.classList.add('loaded')"
240
+ >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
  </div>
242
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
243
+ <img
244
+ src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
245
+ alt="Блюда кафе"
246
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
247
+ loading="lazy"
248
+ onload="this.classList.add('loaded')"
249
+ >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
250
  </div>
251
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
252
+ <img
253
+ src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
254
+ alt="Шеф-повар"
255
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
256
+ loading="lazy"
257
+ onload="this.classList.add('loaded')"
258
+ >
259
+ </div>
260
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
261
+ <img
262
+ src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1998&q=80"
263
+ alt="Кофе"
264
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
265
+ loading="lazy"
266
+ onload="this.classList.add('loaded')"
267
+ >
268
+ </div>
269
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
270
+ <img
271
+ src="https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
272
+ alt="Бранч"
273
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
274
+ loading="lazy"
275
+ onload="this.classList.add('loaded')"
276
+ >
277
+ </div>
278
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
279
+ <img
280
+ src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
281
+ alt="Десерты"
282
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
283
+ loading="lazy"
284
+ onload="this.classList.add('loaded')"
285
+ >
286
  </div>
287
  </div>
288
  </div>
289
  </section>
290
 
291
+ <!-- Reservation Section -->
292
+ <section id="reservation" class="py-20 bg-[#FFF8F0]">
293
+ <div class="container mx-auto px-4">
294
+ <div class="text-center mb-16">
295
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Бронирование столика</h2>
296
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
 
 
 
 
297
  </div>
298
 
299
+ <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
300
+ <div class="md:flex">
301
+ <div class="md:w-1/2 bg-[#6B4C3B] p-8 text-white">
302
+ <h3 class="text-2xl font-bold mb-6">Часы работы</h3>
303
+ <ul class="space-y-4">
304
+ <li class="flex justify-between border-b border-[#8a6d5d] pb-2">
305
+ <span>Понедельник - Пятница</span>
306
+ <span>8:00 - 22:00</span>
307
+ </li>
308
+ <li class="flex justify-between border-b border-[#8a6d5d] pb-2">
309
+ <span>Суббота</span>
310
+ <span>9:00 - 23:00</span>
311
+ </li>
312
+ <li class="flex justify-between">
313
+ <span>Воскресенье</span>
314
+ <span>9:00 - 21:00</span>
315
+ </li>
316
+ </ul>
317
+
318
+ <div class="mt-12">
319
+ <h3 class="text-2xl font-bold mb-4">Контакты</h3>
320
+ <p class="mb-2"><i class="fas fa-phone-alt mr-2"></i> +7 (123) 456-78-90</p>
321
+ <p><i class="fas fa-envelope mr-2"></i> hello@brunchbeans.ru</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
322
  </div>
323
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
324
 
325
+ <div class="md:w-1/2 p-8">
326
+ <form id="reservation-form" class="space-y-4">
327
+ <div>
328
+ <label for="name" class="block text-[#6B4C3B] mb-1">Имя</label>
329
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
330
  </div>
331
+
332
+ <div>
333
+ <label for="email" class="block text-[#6B4C3B] mb-1">Email</label>
334
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
335
  </div>
336
+
337
+ <div>
338
+ <label for="phone" class="block text-[#6B4C3B] mb-1">Телефон</label>
339
+ <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
 
340
  </div>
341
+
342
+ <div>
343
+ <label for="date" class="block text-[#6B4C3B] mb-1">Дата</label>
344
+ <input type="date" id="date" name="date" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
345
  </div>
346
+
347
+ <div>
348
+ <label for="time" class="block text-[#6B4C3B] mb-1">Время</label>
349
+ <input type="time" id="time" name="time" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
 
350
  </div>
351
+
352
+ <div>
353
+ <label for="guests" class="block text-[#6B4C3B] mb-1">Количество гостей</label>
354
+ <select id="guests" name="guests" class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
355
+ <option value="1">1 человек</option>
356
+ <option value="2">2 человека</option>
357
+ <option value="3">3 человека</option>
358
+ <option value="4">4 человека</option>
359
+ <option value="5+">5+ человек</option>
360
+ </select>
361
  </div>
362
+
363
+ <button type="submit" class="w-full bg-[#FF8A65] hover:bg-[#e07a55] text-white py-3 rounded font-medium transition">Забронировать</button>
364
+ </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
365
  </div>
366
  </div>
367
  </div>
368
  </div>
369
  </section>
370
 
371
+ <!-- Contact Section -->
372
+ <section id="contact" class="py-20 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <div class="text-center mb-16">
375
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Как нас найти</h2>
376
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
377
+ </div>
378
+
379
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
380
  <div>
381
+ <h3 class="text-2xl font-bold text-[#6B4C3B] mb-4">Наш адрес</h3>
382
+ <p class="mb-6">г. Москва, ул. Кофейная, д. 42</p>
383
+
384
+ <h3 class="text-2xl font-bold text-[#6B4C3B] mb-4">Социальные сети</h3>
385
+ <div class="flex space-x-4">
386
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-instagram"></i></a>
387
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-facebook"></i></a>
388
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-telegram"></i></a>
389
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-vk"></i></a>
 
 
 
 
 
390
  </div>
391
  </div>
392
 
393
+ <div class="h-80 rounded-lg overflow-hidden">
394
+ <iframe
395
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.3737899197454!2d37.618423315930474!3d55.75367698055287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a5a738fa419%3A0x7c347d506f52311f!2z0JrRgNCw0YHQvdCw0Y8g0JrQvtC70LvQtdC00LY!5e0!3m2!1sru!2sru!4v1688731234567!5m2!1sru!2sru"
396
+ width="100%"
397
+ height="100%"
398
+ style="border:0;"
399
+ allowfullscreen=""
400
+ loading="lazy"
401
+ referrerpolicy="no-referrer-when-downgrade"
402
+ class="lazy"
403
+ onload="this.classList.add('loaded')"
404
+ ></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
405
  </div>
406
  </div>
407
  </div>
408
+ </section>
409
 
410
+ <!-- Footer -->
411
+ <footer class="bg-[#6B4C3B] text-white py-8">
412
+ <div class="container mx-auto px-4">
413
+ <div class="flex flex-col md:flex-row justify-between items-center">
414
+ <div class="mb-4 md:mb-0">
415
+ <a href="#" class="text-2xl font-bold text-white">Brunch<span class="text-[#FF8A65]">&</span>Beans</a>
416
+ <p class="mt-2 text-sm">© 2023 Все права защищены</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  </div>
418
+
419
+ <div class="flex space-x-6">
420
+ <a href="#" class="hover:text-[#FF8A65] transition">Политика конфиденциальности</a>
421
+ <a href="#" class="hover:text-[#FF8A65] transition">Условия использования</a>
 
 
 
422
  </div>
423
  </div>
424
  </div>
425
+ </footer>
 
 
 
 
 
426
 
 
 
 
427
  <script>
428
+ // Mobile menu toggle
429
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
430
+ const menu = document.getElementById('mobile-menu');
431
+ menu.classList.toggle('hidden');
 
 
 
 
 
 
 
432
  });
433
 
434
+ // Form submission
435
+ document.getElementById('reservation-form').addEventListener('submit', function(e) {
436
+ e.preventDefault();
437
+ alert('Ваше бронирование принято! Мы свяжемся с вами для подтверждения.');
438
+ this.reset();
439
  });
440
 
441
+ // Lazy loading images
442
+ document.addEventListener('DOMContentLoaded', function() {
443
+ const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
444
 
445
+ if ('IntersectionObserver' in window) {
446
+ let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
447
+ entries.forEach(function(entry) {
448
+ if (entry.isIntersecting) {
449
+ let lazyImage = entry.target;
450
+ lazyImage.src = lazyImage.dataset.src;
451
+ lazyImage.classList.add('loaded');
452
+ lazyImageObserver.unobserve(lazyImage);
453
+ }
454
+ });
455
+ });
456
+
457
+ lazyImages.forEach(function(lazyImage) {
458
+ lazyImageObserver.observe(lazyImage);
459
+ });
 
 
 
 
 
460
  }
461
  });
462
 
463
+ // Simple scroll animation
464
+ window.addEventListener('scroll', function() {
465
+ const elements = document.querySelectorAll('.fade-in');
466
 
467
+ elements.forEach(function(element) {
468
  const elementPosition = element.getBoundingClientRect().top;
469
  const screenPosition = window.innerHeight / 1.3;
470
 
471
  if (elementPosition < screenPosition) {
472
+ element.style.opacity = '1';
473
  }
474
  });
475
+ });
 
 
 
476
  </script>
477
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Axelnm/myssq1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
478
  </html>