fadeyev commited on
Commit
c4b0622
·
verified ·
1 Parent(s): 4a77407

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +632 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bit Newton Test
3
- emoji: 🐠
4
- colorFrom: red
5
- colorTo: gray
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: bit-newton-test
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,632 @@
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>Bit.Newton - Преобразование звука и видео в текст</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
12
+ }
13
+ .feature-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .qr-code {
18
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
19
+ transition: all 0.3s ease;
20
+ }
21
+ .qr-code:hover {
22
+ transform: scale(1.05);
23
+ }
24
+ .tech-stack-icon {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .tech-stack-icon:hover {
28
+ transform: scale(1.2);
29
+ }
30
+ .scroll-down {
31
+ animation: bounce 2s infinite;
32
+ }
33
+ @keyframes bounce {
34
+ 0%, 20%, 50%, 80%, 100% {
35
+ transform: translateY(0);
36
+ }
37
+ 40% {
38
+ transform: translateY(-20px);
39
+ }
40
+ 60% {
41
+ transform: translateY(-10px);
42
+ }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="font-sans antialiased text-gray-800">
47
+ <!-- Header -->
48
+ <header class="gradient-bg text-white">
49
+ <div class="container mx-auto px-6 py-12">
50
+ <div class="flex justify-between items-center">
51
+ <div class="flex items-center">
52
+ <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mr-4">
53
+ <i class="fas fa-atom text-purple-600 text-2xl"></i>
54
+ </div>
55
+ <h1 class="text-3xl font-bold">Bit.Newton</h1>
56
+ </div>
57
+ <nav class="hidden md:block">
58
+ <ul class="flex space-x-8">
59
+ <li><a href="#features" class="hover:text-purple-200 transition">Функции</a></li>
60
+ <li><a href="#advantages" class="hover:text-purple-200 transition">Преимущества</a></li>
61
+ <li><a href="#tech" class="hover:text-purple-200 transition">Технологии</a></li>
62
+ <li><a href="#pricing" class="hover:text-purple-200 transition">Цены</a></li>
63
+ <li><a href="#support" class="hover:text-purple-200 transition">Поддержка</a></li>
64
+ </ul>
65
+ </nav>
66
+ <button class="md:hidden text-2xl">
67
+ <i class="fas fa-bars"></i>
68
+ </button>
69
+ </div>
70
+
71
+ <div class="mt-16 md:mt-24 flex flex-col md:flex-row items-center">
72
+ <div class="md:w-1/2 mb-12 md:mb-0">
73
+ <h2 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Преобразование звука и видео в текст</h2>
74
+ <p class="text-xl text-purple-100 mb-8">Сервис работает как в закрытом контуре компании без использования внешних сервисов, так и на базе GPT-4o.</p>
75
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
76
+ <a href="https://ys.1bitai.ru/" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-100 transition text-center">Начать использовать</a>
77
+ <a href="#demo" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition text-center">Демо</a>
78
+ </div>
79
+ </div>
80
+ <div class="md:w-1/2 flex justify-center">
81
+ <div class="bg-white p-4 rounded-lg shadow-xl qr-code">
82
+ <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://ys.1bitai.ru/" alt="QR код для доступа" class="w-48 h-48">
83
+ <p class="text-center mt-2 text-gray-600">Отсканируйте QR-код</p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="mt-20 text-center scroll-down">
89
+ <a href="#features" class="text-white text-4xl"><i class="fas fa-chevron-down"></i></a>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Features -->
95
+ <section id="features" class="py-20 bg-gray-50">
96
+ <div class="container mx-auto px-6">
97
+ <div class="text-center mb-16">
98
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Функции Bit.Newton</h2>
99
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
100
+ </div>
101
+
102
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
103
+ <!-- Feature 1 -->
104
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
105
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
106
+ <i class="fas fa-microphone-alt text-purple-600 text-2xl"></i>
107
+ </div>
108
+ <h3 class="text-xl font-semibold mb-3">Распознавание речи</h3>
109
+ <p class="text-gray-600">Автоматическое преобразование звуковых данных в текст обеспечивает точное и быстрое транскрибирование аудио- и видеоматериалов.</p>
110
+ </div>
111
+
112
+ <!-- Feature 2 -->
113
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
114
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
115
+ <i class="fas fa-users text-purple-600 text-2xl"></i>
116
+ </div>
117
+ <h3 class="text-xl font-semibold mb-3">Разделение на спикеров</h3>
118
+ <p class="text-gray-600">Идентификация и выделение каждого участника разговора, добавление ясности в тексте и помощь в отслеживании речи каждого спикера.</p>
119
+ </div>
120
+
121
+ <!-- Feature 3 -->
122
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
123
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
124
+ <i class="fas fa-file-alt text-purple-600 text-2xl"></i>
125
+ </div>
126
+ <h3 class="text-xl font-semibold mb-3">Составление протокола</h3>
127
+ <p class="text-gray-600">Автоматизированное создание краткого содержания или полного протокола встречи для документирования ключевых моментов.</p>
128
+ </div>
129
+
130
+ <!-- Feature 4 -->
131
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
132
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
133
+ <i class="fas fa-closed-captioning text-purple-600 text-2xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-semibold mb-3">Субтитры в реальном времени</h3>
136
+ <p class="text-gray-600">Запись голоса на лету с формированием субтитров, что особенно полезно для встреч и вебинаров.</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Advantages -->
143
+ <section id="advantages" class="py-20 bg-white">
144
+ <div class="container mx-auto px-6">
145
+ <div class="text-center mb-16">
146
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Преимущества</h2>
147
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
148
+ </div>
149
+
150
+ <div class="flex flex-col lg:flex-row items-center">
151
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
152
+ <div class="bg-purple-50 p-8 rounded-xl">
153
+ <ul class="space-y-6">
154
+ <li class="flex items-start">
155
+ <div class="flex-shrink-0">
156
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
157
+ <i class="fas fa-lock text-purple-600"></i>
158
+ </div>
159
+ </div>
160
+ <div class="ml-4">
161
+ <h3 class="text-lg font-semibold">Закрытый контур</h3>
162
+ <p class="text-gray-600 mt-1">Продук�� построен только на тех моделях, которые доступны для свободного использования в закрытом контуре (без передачи информации наружу).</p>
163
+ </div>
164
+ </li>
165
+ <li class="flex items-start">
166
+ <div class="flex-shrink-0">
167
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
168
+ <i class="fas fa-plug text-purple-600"></i>
169
+ </div>
170
+ </div>
171
+ <div class="ml-4">
172
+ <h3 class="text-lg font-semibold">Открытые API</h3>
173
+ <p class="text-gray-600 mt-1">Для каждого микросервиса доступны открытые API для включения и использования в своих решениях.</p>
174
+ </div>
175
+ </li>
176
+ <li class="flex items-start">
177
+ <div class="flex-shrink-0">
178
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
179
+ <i class="fas fa-briefcase text-purple-600"></i>
180
+ </div>
181
+ </div>
182
+ <div class="ml-4">
183
+ <h3 class="text-lg font-semibold">Гибкость применения</h3>
184
+ <p class="text-gray-600 mt-1">Продукт может быть использован для оптимизации бизнес-процессов внутри компании или для продажи клиентам.</p>
185
+ </div>
186
+ </li>
187
+ </ul>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="lg:w-1/2">
192
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Преимущества" class="rounded-xl shadow-xl w-full">
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Technology Stack -->
199
+ <section id="tech" class="py-20 bg-gray-50">
200
+ <div class="container mx-auto px-6">
201
+ <div class="text-center mb-16">
202
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Технологический стек</h2>
203
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
204
+ </div>
205
+
206
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 text-center">
207
+ <div class="tech-stack-icon">
208
+ <div class="bg-white p-6 rounded-xl shadow-md h-full flex flex-col items-center">
209
+ <i class="fab fa-python text-5xl text-blue-500 mb-4"></i>
210
+ <h3 class="font-semibold">Python</h3>
211
+ </div>
212
+ </div>
213
+ <div class="tech-stack-icon">
214
+ <div class="bg-white p-6 rounded-xl shadow-md h-full flex flex-col items-center">
215
+ <i class="fab fa-react text-5xl text-blue-400 mb-4"></i>
216
+ <h3 class="font-semibold">React</h3>
217
+ </div>
218
+ </div>
219
+ <div class="tech-stack-icon">
220
+ <div class="bg-white p-6 rounded-xl shadow-md h-full flex flex-col items-center">
221
+ <i class="fab fa-docker text-5xl text-blue-600 mb-4"></i>
222
+ <h3 class="font-semibold">Docker</h3>
223
+ </div>
224
+ </div>
225
+ <div class="tech-stack-icon">
226
+ <div class="bg-white p-6 rounded-xl shadow-md h-full flex flex-col items-center">
227
+ <i class="fab fa-linux text-5xl text-black mb-4"></i>
228
+ <h3 class="font-semibold">Linux</h3>
229
+ </div>
230
+ </div>
231
+ <div class="tech-stack-icon">
232
+ <div class="bg-white p-6 rounded-xl shadow-md h-full flex flex-col items-center">
233
+ <i class="fas fa-network-wired text-5xl text-purple-600 mb-4"></i>
234
+ <h3 class="font-semibold">Микросервисы</h3>
235
+ </div>
236
+ </div>
237
+ <div class="tech-stack-icon">
238
+ <div class="bg-white p-6 rounded-xl shadow-md h-full flex flex-col items-center">
239
+ <i class="fas fa-brain text-5xl text-purple-500 mb-4"></i>
240
+ <h3 class="font-semibold">AI модели</h3>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="mt-16">
246
+ <h3 class="text-2xl font-semibold text-center mb-8">Сервисы и API</h3>
247
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
248
+ <div class="overflow-x-auto">
249
+ <table class="min-w-full divide-y divide-gray-200">
250
+ <thead class="bg-gray-50">
251
+ <tr>
252
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сервис</th>
253
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Описание</th>
254
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ссылка</th>
255
+ </tr>
256
+ </thead>
257
+ <tbody class="bg-white divide-y divide-gray-200">
258
+ <tr>
259
+ <td class="px-6 py-4 whitespace-nowrap">Frontend</td>
260
+ <td class="px-6 py-4">ReactJS интерфейс</td>
261
+ <td class="px-6 py-4"><a href="https://ys.1bitai.ru/" class="text-purple-600 hover:underline">ys.1bitai.ru</a></td>
262
+ </tr>
263
+ <tr>
264
+ <td class="px-6 py-4 whitespace-nowrap">Авторизация</td>
265
+ <td class="px-6 py-4">Сервис авторизации</td>
266
+ <td class="px-6 py-4"><a href="https://bit-auth.1bitai.ru/" class="text-purple-600 hover:underline">bit-auth.1bitai.ru</a></td>
267
+ </tr>
268
+ <tr>
269
+ <td class="px-6 py-4 whitespace-nowrap">Транскрибация</td>
270
+ <td class="px-6 py-4">Модель GigaAM RNNT</td>
271
+ <td class="px-6 py-4"><a href="https://bit-asr.1bitai.ru/docs" class="text-purple-600 hover:underline">bit-asr.1bitai.ru</a></td>
272
+ </tr>
273
+ <tr>
274
+ <td class="px-6 py-4 whitespace-nowrap">Транскрибация с диаризацией</td>
275
+ <td class="px-6 py-4">Модели ctc_large_ru, GigaAM CTC</td>
276
+ <td class="px-6 py-4"><a href="https://bit-text-processor.1bitai.ru/docs" class="text-purple-600 hover:underline">bit-text-processor.1bitai.ru</a></td>
277
+ </tr>
278
+ <tr>
279
+ <td class="px-6 py-4 whitespace-nowrap">Потоковое распознавание</td>
280
+ <td class="px-6 py-4">Модель Vosk</td>
281
+ <td class="px-6 py-4"><a href="https://bit-asr-streaming.1bitai.ru/docs" class="text-purple-600 hover:underline">bit-asr-streaming.1bitai.ru</a></td>
282
+ </tr>
283
+ <tr>
284
+ <td class="px-6 py-4 whitespace-nowrap">Саммаризация</td>
285
+ <td class="px-6 py-4">Модель llama, aya</td>
286
+ <td class="px-6 py-4"><a href="https://bit-summarize.1bitai.ru/docs" class="text-purple-600 hover:underline">bit-summarize.1bitai.ru</a></td>
287
+ </tr>
288
+ </tbody>
289
+ </table>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="mt-12 bg-purple-50 rounded-xl p-8">
295
+ <h3 class="text-xl font-semibold mb-4">Аппаратные требования</h3>
296
+ <div class="grid md:grid-cols-2 gap-8">
297
+ <div>
298
+ <h4 class="font-medium text-purple-600 mb-2">Минимальные:</h4>
299
+ <ul class="list-disc pl-5 space-y-1">
300
+ <li>4 core CPU</li>
301
+ <li>16Gb ОЗУ</li>
302
+ <li>GPU от 16Gb</li>
303
+ </ul>
304
+ </div>
305
+ <div>
306
+ <h4 class="font-medium text-purple-600 mb-2">Рекомендуемые:</h4>
307
+ <ul class="list-disc pl-5 space-y-1">
308
+ <li>8+ core CPU</li>
309
+ <li>32Gb+ ОЗУ</li>
310
+ <li>GPU 24Gb+</li>
311
+ </ul>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Pricing -->
319
+ <section id="pricing" class="py-20 bg-white">
320
+ <div class="container mx-auto px-6">
321
+ <div class="text-center mb-16">
322
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Ценовая политика</h2>
323
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
324
+ </div>
325
+
326
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
327
+ <div class="bg-white border border-purple-200 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
328
+ <div class="px-6 py-8">
329
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Базовое решение</h3>
330
+ <div class="text-3xl font-bold text-purple-600 mb-4">500 т.р.</div>
331
+ <p class="text-gray-600 mb-6">Стоимость основного решения для одного инстанса</p>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="bg-white border border-purple-200 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
336
+ <div class="px-6 py-8">
337
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Внедрение</h3>
338
+ <div class="text-3xl font-bold text-purple-600 mb-4">500 т.р.</div>
339
+ <p class="text-gray-600 mb-6">Стоимость внедрения решения в инфраструктуру заказчика</p>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="bg-white border border-purple-200 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
344
+ <div class="px-6 py-8">
345
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Обновления</h3>
346
+ <div class="text-3xl font-bold text-purple-600 mb-4">100 т.р./год</div>
347
+ <p class="text-gray-600 mb-6">Доступ к обновлениям и новым версиям продукта</p>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="bg-white border border-purple-200 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
352
+ <div class="px-6 py-8">
353
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Интеграции</h3>
354
+ <div class="text-3xl font-bold text-purple-600 mb-4">от 100 т.р.</div>
355
+ <p class="text-gray-600 mb-6">Настройка интеграций с другими системами заказчика</p>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </section>
361
+
362
+ <!-- Support -->
363
+ <section id="support" class="py-20 bg-gray-50">
364
+ <div class="container mx-auto px-6">
365
+ <div class="text-center mb-16">
366
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Поддержка</h2>
367
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
368
+ </div>
369
+
370
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
371
+ <div class="md:flex">
372
+ <div class="md:w-1/2 gradient-bg p-8 text-white flex flex-col justify-center">
373
+ <h3 class="text-2xl font-bold mb-4">Обратная связь</h3>
374
+ <p class="mb-6">Оставьте свои вопросы, предложения или сообщите об ошибке. Наша команда ответит вам в кратчайшие сроки.</p>
375
+ <div class="flex items-center">
376
+ <i class="fas fa-headset text-3xl mr-4"></i>
377
+ <div>
378
+ <p class="font-semibold">Техническая поддержка</p>
379
+ <p>Доступна 24/7 для клиентов</p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div class="md:w-1/2 p-8">
384
+ <form>
385
+ <div class="mb-4">
386
+ <label class="block text-gray-700 mb-2" for="name">Имя</label>
387
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-200">
388
+ </div>
389
+ <div class="mb-4">
390
+ <label class="block text-gray-700 mb-2" for="email">Email</label>
391
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-200">
392
+ </div>
393
+ <div class="mb-4">
394
+ <label class="block text-gray-700 mb-2" for="message">Сообщение</label>
395
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-200"></textarea>
396
+ </div>
397
+ <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 transition">Отправить</button>
398
+ </form>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- Team -->
406
+ <section class="py-20 bg-white">
407
+ <div class="container mx-auto px-6">
408
+ <div class="text-center mb-16">
409
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Авторы продукта</h2>
410
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
411
+ </div>
412
+
413
+ <div class="max-w-4xl mx-auto">
414
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md">
415
+ <div class="flex flex-col md:flex-row items-center">
416
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center">
417
+ <div class="w-32 h-32 bg-purple-100 rounded-full flex items-center justify-center">
418
+ <i class="fas fa-user-tie text-purple-600 text-5xl"></i>
419
+ </div>
420
+ </div>
421
+ <div class="md:w-2/3 md:pl-8">
422
+ <h3 class="text-2xl font-bold mb-2">Команда Виктора Алексеева</h3>
423
+ <p class="text-gray-600 mb-4">Офис НФП</p>
424
+ <div class="flex space-x-4">
425
+ <div>
426
+ <p class="font-semibold">Разработчик</p>
427
+ <p class="text-gray-600">Кирилл Котов</p>
428
+ </div>
429
+ <div>
430
+ <p class="font-semibold">Модератор</p>
431
+ <p class="text-gray-600">Elizaveta Kaybazakova</p>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Resources -->
442
+ <section class="py-20 bg-gray-50">
443
+ <div class="container mx-auto px-6">
444
+ <div class="text-center mb-16">
445
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Полезные материалы</h2>
446
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
447
+ </div>
448
+
449
+ <div class="grid md:grid-cols-3 gap-8">
450
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
451
+ <div class="p-6">
452
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
453
+ <i class="fas fa-file-powerpoint text-purple-600 text-2xl"></i>
454
+ </div>
455
+ <h3 class="text-xl font-semibold text-center mb-2">Презентация</h3>
456
+ <p class="text-gray-600 text-center mb-4">Бит.Ньютон.pptx</p>
457
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-semibold hover:opacity-90 transition">Скачать</button>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
462
+ <div class="p-6">
463
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
464
+ <i class="fas fa-file-alt text-purple-600 text-2xl"></i>
465
+ </div>
466
+ <h3 class="text-xl font-semibold text-center mb-2">Инструкция</h3>
467
+ <p class="text-gray-600 text-center mb-4">Инструкция Бит.Ньютон.pdf</p>
468
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-semibold hover:opacity-90 transition">Скачать</button>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
473
+ <div class="p-6">
474
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
475
+ <i class="fas fa-video text-purple-600 text-2xl"></i>
476
+ </div>
477
+ <h3 class="text-xl font-semibold text-center mb-2">Обучающее видео</h3>
478
+ <p class="text-gray-600 text-center mb-4">Бит.Ньютон.mp4</p>
479
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-semibold hover:opacity-90 transition">Смотреть</button>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- Demo -->
487
+ <section id="demo" class="py-20 bg-white">
488
+ <div class="container mx-auto px-6">
489
+ <div class="text-center mb-16">
490
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Демонстрация</h2>
491
+ <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
492
+ </div>
493
+
494
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-8 shadow-md">
495
+ <div class="flex flex-col md:flex-row items-center">
496
+ <div class="md:w-1/2 mb-8 md:mb-0">
497
+ <h3 class="text-xl font-semibold mb-4">Попробуйте Bit.Newton</h3>
498
+ <p class="text-gray-600 mb-6">Загрузите аудио или видео файл для демонстрации возможностей сервиса.</p>
499
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
500
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
501
+ <p class="text-gray-500 mb-4">Перетащите файл сюда или</p>
502
+ <button class="gradient-bg text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 transition">Выбрать файл</button>
503
+ </div>
504
+ </div>
505
+ <div class="md:w-1/2 md:pl-8">
506
+ <div class="bg-white p-6 rounded-lg shadow-sm">
507
+ <h4 class="font-semibold mb-4">Пример результата:</h4>
508
+ <div class="bg-gray-100 p-4 rounded-lg">
509
+ <div class="mb-4">
510
+ <span class="font-medium text-purple-600">Спикер 1:</span>
511
+ <p>Добрый день, коллеги. Сегодня мы обсудим новые возможности нашего продукта.</p>
512
+ </div>
513
+ <div class="mb-4">
514
+ <span class="font-medium text-purple-600">Спикер 2:</span>
515
+ <p>Да, я подготовил презентацию с основными изменениями.</p>
516
+ </div>
517
+ <div>
518
+ <span class="font-medium text-purple-600">Спикер 1:</span>
519
+ <p>Отлично, давайте начнем.</p>
520
+ </div>
521
+ </div>
522
+ <div class="mt-6">
523
+ <h4 class="font-semibold mb-2">Краткое содержание:</h4>
524
+ <p class="text-gray-700">Обсуждение новых возможностей продукта. Презентация изменений.</p>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </section>
532
+
533
+ <!-- CTA -->
534
+ <section class="gradient-bg text-white py-16">
535
+ <div class="container mx-auto px-6 text-center">
536
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Готовы попробовать Bit.Newton?</h2>
537
+ <p class="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">Начните использовать наш сервис прямо сейчас и оптимизируйте свои бизнес-процессы.</p>
538
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
539
+ <a href="https://ys.1bitai.ru/" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-100 transition">Начать использовать</a>
540
+ <a href="#support" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Связаться с нами</a>
541
+ </div>
542
+ </div>
543
+ </section>
544
+
545
+ <!-- Footer -->
546
+ <footer class="bg-gray-900 text-white py-12">
547
+ <div class="container mx-auto px-6">
548
+ <div class="flex flex-col md:flex-row justify-between">
549
+ <div class="mb-8 md:mb-0">
550
+ <div class="flex items-center mb-4">
551
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3">
552
+ <i class="fas fa-atom text-purple-600"></i>
553
+ </div>
554
+ <span class="text-xl font-bold">Bit.Newton</span>
555
+ </div>
556
+ <p class="text-gray-400 max-w-xs">Сервис преобразования звука и видео в текст для бизнеса.</p>
557
+ </div>
558
+
559
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
560
+ <div>
561
+ <h3 class="text-lg font-semibold mb-4">Продукт</h3>
562
+ <ul class="space-y-2">
563
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Функции</a></li>
564
+ <li><a href="#advantages" class="text-gray-400 hover:text-white transition">Преимущества</a></li>
565
+ <li><a href="#tech" class="text-gray-400 hover:text-white transition">Технологии</a></li>
566
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Цены</a></li>
567
+ </ul>
568
+ </div>
569
+
570
+ <div>
571
+ <h3 class="text-lg font-semibold mb-4">Ресурсы</h3>
572
+ <ul class="space-y-2">
573
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Документация</a></li>
574
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
575
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Блог</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
577
+ </ul>
578
+ </div>
579
+
580
+ <div>
581
+ <h3 class="text-lg font-semibold mb-4">Контакты</h3>
582
+ <ul class="space-y-2">
583
+ <li><a href="#support" class="text-gray-400 hover:text-white transition">Поддержка</a></li>
584
+ <li><a href="#" class="text-gray-400 hover:text-white transition">info@1bitai.ru</a></li>
585
+ <li><a href="#" class="text-gray-400 hover:text-white transition">+7 (XXX) XXX-XX-XX</a></li>
586
+ </ul>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
592
+ <p class="text-gray-400 mb-4 md:mb-0">© 2025 Bit.Newton. Все права защищены.</p>
593
+ <div class="flex space-x-6">
594
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram text-xl"></i></a>
595
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-vk text-xl"></i></a>
596
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
597
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </footer>
602
+
603
+ <script>
604
+ // Smooth scrolling for anchor links
605
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
606
+ anchor.addEventListener('click', function (e) {
607
+ e.preventDefault();
608
+
609
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
610
+ behavior: 'smooth'
611
+ });
612
+ });
613
+ });
614
+
615
+ // Mobile menu toggle
616
+ const mobileMenuButton = document.querySelector('header button');
617
+ const mobileMenu = document.querySelector('header nav');
618
+
619
+ mobileMenuButton.addEventListener('click', () => {
620
+ mobileMenu.classList.toggle('hidden');
621
+ mobileMenu.classList.toggle('block');
622
+ mobileMenu.classList.toggle('absolute');
623
+ mobileMenu.classList.toggle('top-24');
624
+ mobileMenu.classList.toggle('left-0');
625
+ mobileMenu.classList.toggle('right-0');
626
+ mobileMenu.classList.toggle('bg-purple-700');
627
+ mobileMenu.classList.toggle('p-6');
628
+ mobileMenu.classList.toggle('z-50');
629
+ });
630
+ </script>
631
+ <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=fadeyev/bit-newton-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
632
+ </html>