Hugging Face's logo

Spaces:
Axelnm
/
myssq1
Running

App Files Community
Axelnm commited on
Commit
f89bae9
·
verified ·
1 Parent(s): fe1f763

добавь под все тарифы а так же чтобы в форме можно было изменить тариф - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1012 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Myssq1
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: myssq1
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1012 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
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>