Hugging Face's logo

Spaces:
Denzel1989
/
moy-cod3
Running

App Files Community
Denzel1989 commited on
Commit
77b7c5f
·
verified ·
1 Parent(s): c92c65f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1059 -19
  3. prompts.txt +5 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Moy Cod3
3
- emoji: 🚀
4
- colorFrom: gray
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: moy-cod3
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,1059 @@
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>NAVI SYSTEMS | Автоэлектроника для всех марок</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#ff3b3b',
16
+ 'primary-dark': '#e03535',
17
+ dark: '#0f0f0f',
18
+ light: '#ffffff',
19
+ 'card-bg': 'rgba(24,24,24,0.7)'
20
+ },
21
+ boxShadow: {
22
+ 'glow': '0 0 12px #ff3b3b, 0 0 24px rgba(255,59,59,0.4)'
23
+ },
24
+ textShadow: {
25
+ 'glow': '0 0 12px #ff3b3b, 0 0 24px rgba(255,59,59,0.4)'
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+
32
+ <!-- Google Fonts -->
33
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
34
+
35
+ <!-- Font Awesome -->
36
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
37
+
38
+ <!-- AOS Animation -->
39
+ <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
40
+ <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
41
+
42
+ <style>
43
+ :root {
44
+ --primary: #ff3b3b;
45
+ --primary-dark: #e03535;
46
+ --dark: #0f0f0f;
47
+ --light: #fff;
48
+ --card-bg: rgba(24,24,24,0.7);
49
+ --glow: 0 0 12px #ff3b3b, 0 0 24px rgba(255,59,59,0.4);
50
+ }
51
+
52
+ body {
53
+ font-family: 'Inter', sans-serif;
54
+ background: var(--dark);
55
+ color: var(--light);
56
+ overflow-x: hidden;
57
+ scroll-behavior: smooth;
58
+ }
59
+
60
+ .text-glow {
61
+ text-shadow: var(--glow);
62
+ }
63
+
64
+ .bg-card {
65
+ background: var(--card-bg);
66
+ backdrop-filter: blur(12px);
67
+ border: 1px solid rgba(255,255,255,0.05);
68
+ }
69
+
70
+ .btn-primary {
71
+ background: var(--primary);
72
+ color: #000;
73
+ font-weight: 600;
74
+ transition: all 0.3s;
75
+ }
76
+
77
+ .btn-primary:hover {
78
+ background: var(--primary-dark);
79
+ transform: translateY(-2px);
80
+ box-shadow: var(--glow);
81
+ }
82
+
83
+ /* Preloader */
84
+ #preloader {
85
+ position: fixed;
86
+ inset: 0;
87
+ background: var(--dark);
88
+ display: flex;
89
+ justify-content: center;
90
+ align-items: center;
91
+ z-index: 9999;
92
+ transition: all 0.5s;
93
+ }
94
+
95
+ .logo-pre {
96
+ width: 80px;
97
+ height: 80px;
98
+ border: 3px solid transparent;
99
+ border-top: 3px solid var(--primary);
100
+ border-radius: 50%;
101
+ animation: spin 1.4s linear infinite, glow 2s ease-in-out infinite alternate;
102
+ position: relative;
103
+ }
104
+
105
+ .logo-pre::after {
106
+ content: "NS";
107
+ position: absolute;
108
+ inset: 0;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ font-size: 1.5rem;
113
+ color: var(--light);
114
+ font-weight: 800;
115
+ }
116
+
117
+ @keyframes spin {
118
+ to { transform: rotate(360deg); }
119
+ }
120
+
121
+ @keyframes glow {
122
+ to { filter: drop-shadow(var(--glow)); }
123
+ }
124
+
125
+ /* Hero overlay */
126
+ .hero-overlay {
127
+ position: absolute;
128
+ inset: 0;
129
+ background: radial-gradient(circle at 50% 50%, rgba(255,59,59,0.15) 0%, rgba(15,15,15,0.95) 80%);
130
+ z-index: -1;
131
+ }
132
+
133
+ /* Utility */
134
+ .hover-scale {
135
+ transition: transform 0.3s;
136
+ }
137
+
138
+ .hover-scale:hover {
139
+ transform: scale(1.03);
140
+ }
141
+
142
+ /* Navigation */
143
+ .nav-link {
144
+ position: relative;
145
+ }
146
+
147
+ .nav-link::after {
148
+ content: '';
149
+ position: absolute;
150
+ bottom: -2px;
151
+ left: 0;
152
+ width: 0;
153
+ height: 2px;
154
+ background: var(--primary);
155
+ transition: width 0.3s;
156
+ }
157
+
158
+ .nav-link:hover::after {
159
+ width: 100%;
160
+ }
161
+
162
+ /* Mobile menu */
163
+ #mobile-menu {
164
+ max-height: 0;
165
+ overflow: hidden;
166
+ transition: max-height 0.5s ease-out;
167
+ }
168
+
169
+ #mobile-menu.active {
170
+ max-height: 500px;
171
+ }
172
+
173
+ /* Timeline */
174
+ .timeline-item {
175
+ position: relative;
176
+ padding-left: 3rem;
177
+ }
178
+
179
+ .timeline-item::before {
180
+ content: '';
181
+ position: absolute;
182
+ left: 0.7rem;
183
+ top: 0;
184
+ height: 100%;
185
+ width: 2px;
186
+ background: rgba(255,255,255,0.1);
187
+ }
188
+
189
+ .timeline-dot {
190
+ position: absolute;
191
+ left: 0;
192
+ top: 0;
193
+ width: 1.5rem;
194
+ height: 1.5rem;
195
+ border-radius: 50%;
196
+ background: var(--primary);
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ color: #000;
201
+ font-weight: bold;
202
+ }
203
+
204
+ /* Car models */
205
+ .car-model {
206
+ transition: all 0.3s;
207
+ }
208
+
209
+ .car-model:hover {
210
+ transform: translateY(-10px);
211
+ box-shadow: var(--glow);
212
+ }
213
+
214
+ /* Form input */
215
+ .form-input {
216
+ background: rgba(255,255,255,0.05);
217
+ border: 1px solid rgba(255,255,255,0.1);
218
+ transition: all 0.3s;
219
+ }
220
+
221
+ .form-input:focus {
222
+ outline: none;
223
+ border-color: var(--primary);
224
+ box-shadow: 0 0 0 3px rgba(255,59,59,0.2);
225
+ }
226
+
227
+ /* Particles */
228
+ @keyframes float-particle {
229
+ 0% {
230
+ transform: translateY(0) translateX(0);
231
+ opacity: 1;
232
+ }
233
+ 100% {
234
+ transform: translateY(-100vh) translateX(20px);
235
+ opacity: 0;
236
+ }
237
+ }
238
+
239
+ /* Responsive */
240
+ @media (max-width: 768px) {
241
+ .hero-title {
242
+ font-size: 3rem;
243
+ }
244
+ }
245
+ </style>
246
+ </head>
247
+ <body class="antialiased">
248
+ <!-- Preloader -->
249
+ <div id="preloader">
250
+ <div class="logo-pre"></div>
251
+ </div>
252
+
253
+ <!-- Particles -->
254
+ <div id="particles" class="particles fixed inset-0 pointer-events-none"></div>
255
+
256
+ <!-- Navigation -->
257
+ <header class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
258
+ <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
259
+ <a href="#" class="flex items-center">
260
+ <span class="text-2xl font-bold text-primary">NAVI</span>
261
+ <span class="text-2xl font-bold text-white">SYSTEMS</span>
262
+ </a>
263
+
264
+ <!-- Desktop Navigation -->
265
+ <nav class="hidden md:flex space-x-8">
266
+ <a href="#home", class="nav-link text-white hover:text-primary">Главная</a>
267
+ <a href="#services", class="nav-link text-white hover:text-primary">Услуги</a>
268
+ <a href="#advantages", class="nav-link text-white hover:text-primary">Преимущества</a>
269
+ <a href="#process", class="nav-link text-white hover:text-primary">Процесс</a>
270
+ <a href="#contact", class="nav-link text-white hover:text-primary">Контакты</a>
271
+ </nav>
272
+
273
+ <!-- Mobile Menu Button -->
274
+ <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
275
+ <i class="fas fa-bars text-2xl"></i>
276
+ </button>
277
+ </div>
278
+
279
+ <!-- Mobile Navigation -->
280
+ <div id="mobile-menu" class="md:hidden overflow-hidden">
281
+ <div class="px-6 py-4 space-y-4 bg-black bg-opacity-90">
282
+ <a href="#home", class="block text-white hover:text-primary">Главная</a>
283
+ <a href="#services", class="block text-white hover:text-primary">Услуги</a>
284
+ <a href="#advantages", class="block text-white hover:text-primary">Преимущества</a>
285
+ <a href="#process", class="block text-white hover:text-primary">Процесс</a>
286
+ <a href="#contact", class="block text-white hover:text-primary">Контакты</a>
287
+ </div>
288
+ </div>
289
+ </header>
290
+
291
+ <!-- Hero Section -->
292
+ <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
293
+ <div class="hero-overlay"></div>
294
+
295
+ <div class="relative z-10 text-center px-4" data-aos="fade-up">
296
+ <h1 class="hero-title text-6xl font-extrabold mb-6">
297
+ <span class="text-primary">NAVI</span> <span class="text-white">SYSTEMS</span>
298
+ </h1>
299
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">
300
+ Профессиональные решения для автомобилей всех марок. Технологии будущего — уже сегодня.
301
+ </p>
302
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
303
+ <a href="#services" class="btn-primary px-8 py-4 rounded-lg hover-scale animate-pulse">
304
+ <i class="fas fa-tools mr-2"></i>Наши услуги
305
+ </a>
306
+ <a href="#contact" class="bg-white bg-opacity-10 px-8 py-4 rounded-lg hover:bg-opacity-20 transition border border-white border-opacity-10 hover-scale">
307
+ <i class="fas fa-phone-alt mr-2"></i>Консультация
308
+ </a>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- Services Section -->
314
+ <section id="services" class="py-20 bg-black">
315
+ <div class="max-w-6xl mx-auto px-6">
316
+ <div class="text-center mb-16" data-aos="fade-up">
317
+ <span class="text-primary font-bold">УСЛУГИ</span>
318
+ <h2 class="text-4xl font-extrabold mt-2 mb-4">Комплексные решения для вашего авто</h2>
319
+ <p class="text-gray-400 max-w-2xl mx-auto">Мы предлагаем полный спектр услуг по модернизации и настройке мультимедийных систем автомобилей всех марок</p>
320
+ </div>
321
+
322
+ <div class="grid md:grid-cols-3 gap-8">
323
+ <!-- Service 1 -->
324
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="100">
325
+ <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
326
+ <i class="fas fa-language text-2xl text-primary"></i>
327
+ </div>
328
+ <h3 class="text-xl font-bold mb-2">Русификация мультимедиа</h3>
329
+ <p class="text-gray-400 mb-4">Полный перевод интерфейса для европейских, азиатских и американских автомобилей. Поддержка всех языков и локализаций.</p>
330
+ <ul class="text-sm text-gray-400 space-y-2">
331
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Поддержка всех языков</li>
332
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Обновление карт</li>
333
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Настройка FM-радио</li>
334
+ </ul>
335
+ </div>
336
+
337
+ <!-- Service 2 -->
338
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="200">
339
+ <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
340
+ <i class="fas fa-music text-2xl text-primary"></i>
341
+ </div>
342
+ <h3 class="text-xl font-bold mb-2">Аудио апгрейд</h3>
343
+ <p class="text-gray-400 mb-4">Профессиональная установка и настройка аудиосистем для любых автомобилей - от бюджетных до премиальных моделей.</p>
344
+ <ul class="text-sm text-gray-400 space-y-2">
345
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Hi-End компоненты</li>
346
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Акустическая подготовка</li>
347
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Профессиональная настройка</li>
348
+ </ul>
349
+ </div>
350
+
351
+ <!-- Service 3 -->
352
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="300">
353
+ <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
354
+ <i class="fas fa-mobile-alt text-2xl text-primary"></i>
355
+ </div>
356
+ <h3 class="text-xl font-bold mb-2">Apple CarPlay / Android Auto</h3>
357
+ <p class="text-gray-400 mb-4">Интеграция смартфона с мультимедийной системой автомобиля. Работаем с моделями всех производителей.</p>
358
+ <ul class="text-sm text-gray-400 space-y-2">
359
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Беспроводное подключение</li>
360
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Полная поддержка OEM</li>
361
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Сохранение всех функций</li>
362
+ </ul>
363
+ </div>
364
+
365
+ <!-- Service 4 -->
366
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="100">
367
+ <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
368
+ <i class="fas fa-map-marked-alt text-2xl text-primary"></i>
369
+ </div>
370
+ <h3 class="text-xl font-bold mb-2">Навигационные системы</h3>
371
+ <p class="text-gray-400 mb-4">Установка и настройка навигационных систем с поддержкой онлайн-сервисов для всех типов автомобилей.</p>
372
+ <ul class="text-sm text-gray-400 space-y-2">
373
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Онлайн-карты</li>
374
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Пробки и камеры</li>
375
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Голосовое управление</li>
376
+ </ul>
377
+ </div>
378
+
379
+ <!-- Service 5 -->
380
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="200">
381
+ <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
382
+ <i class="fas fa-tv text-2xl text-primary"></i>
383
+ </div>
384
+ <h3 class="text-xl font-bold mb-2">Мультимедиа системы</h3>
385
+ <p class="text-gray-400 mb-4">Установка дополнительных экранов, DVD, TV-тюнеров для автомобилей любых марок и годов выпуска.</p>
386
+ <ul class="text-sm text-gray-400 space-y-2">
387
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Штатный внешний вид</li>
388
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Поддержка всех форматов</li>
389
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Интеграция с OEM</li>
390
+ </ul>
391
+ </div>
392
+
393
+ <!-- Service 6 -->
394
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="300">
395
+ <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-6">
396
+ <i class="fas fa-lock text-2xl text-primary"></i>
397
+ </div>
398
+ <h3 class="text-xl font-bold mb-2">Безопасность</h3>
399
+ <p class="text-gray-400 mb-4">Установка систем видеонаблюдения, парктроников и камер кругового обзора для всех типов транспортных средств.</p>
400
+ <ul class="text-sm text-gray-400 space-y-2">
401
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Камеры 360°</li>
402
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Запись в движении</li>
403
+ <li class="flex items-center"><i class="fas fa-check text-primary mr-2"></i> Датчики парковки</li>
404
+ </ul>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- Advantages Section -->
411
+ <section id="advantages" class="py-20 bg-gradient-to-b from-black to-gray-900">
412
+ <div class="max-w-6xl mx-auto px-6">
413
+ <div class="text-center mb-16" data-aos="fade-up">
414
+ <span class="text-primary font-bold">ПРЕИМУЩЕСТВА</span>
415
+ <h2 class="text-4xl font-extrabold mt-2 mb-4">Почему выбирают нас</h2>
416
+ <p class="text-gray-400 max-w-2xl mx-auto">Профессиональный подход и внимание к деталям - наши ключевые преимущества</p>
417
+ </div>
418
+
419
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
420
+ <!-- Advantage 1 -->
421
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="100">
422
+ <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
423
+ <i class="fas fa-medal text-3xl text-primary"></i>
424
+ </div>
425
+ <h3 class="text-xl font-bold mb-2">Опыт</h3>
426
+ <p class="text-gray-400">Более 12 лет работы с автомобилями всех марок</p>
427
+ <span class="text-primary text-4xl font-bold mt-4 block">12+</span>
428
+ <span class="text-gray-400 text-sm">лет опыта</span>
429
+ </div>
430
+
431
+ <!-- Advantage 2 -->
432
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up", data-aos-delay="200">
433
+ <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
434
+ <i class="fas fa-car text-3xl text-primary"></i>
435
+ </div>
436
+ <h3 class="text-xl font-bold mb-2">Автомобилей</h3>
437
+ <p class="text-gray-400">Успешно модернизированных систем</p>
438
+ <span class="text-primary text-4xl font-bold mt-4 block">1500+</span>
439
+ <span class="text-gray-400 text-sm">автомобилей</span>
440
+ </div>
441
+
442
+ <!-- Advantage 3 -->
443
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="300">
444
+ <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
445
+ <i class="fas fa-user-tie text-3xl text-primary"></i>
446
+ </div>
447
+ <h3 class="text-xl font-bold mb-2">Специалисты</h3>
448
+ <p class="text-gray-400">Квалифицированные инженеры с сертификатами</p>
449
+ <span class="text-primary text-4xl font-bold mt-4 block">15+</span>
450
+ <span class="text-gray-400 text-sm">специалистов</span>
451
+ </div>
452
+
453
+ <!-- Advantage 4 -->
454
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="400">
455
+ <div class="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
456
+ <i class="fas fa-shield-alt text-3xl text-primary"></i>
457
+ </div>
458
+ <h3 class="text-xl font-bold mb-2">Гарантия</h3>
459
+ <p class="text-gray-400">На все работы и оборудование</p>
460
+ <span class="text-primary text-4xl font-bold mt-4 block">1</span>
461
+ <span class="text-gray-400 text-sm">год гарантии</span>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="mt-16 grid md:grid-cols-2 gap-8 items-center">
466
+ <div class="space-y-6" data-aos="fade-right">
467
+ <h3 class="text-2xl font-bold">Индивидуальный подход к каждому клиенту</h3>
468
+ <p class="text-gray-400">Мы работаем с автомобилями всех марок - от бюджетных до премиальных. Для каждого клиента мы подбираем оптимальное решение, учитывающее особенности именно его автомобиля.</p>
469
+
470
+ <div class="space-y-4">
471
+ <div class="flex items-start">
472
+ <div class="flex-shrink-0 mt-1">
473
+ <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
474
+ <i class="fas fa-check text-primary"></i>
475
+ </div>
476
+ </div>
477
+ <div class="ml-3">
478
+ <p class="text-gray-300 font-medium">Бесплатная диагностика</p>
479
+ <p class="text-gray-500 text-sm">Точная оценка возможностей вашего авто</p>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="flex items-start">
484
+ <div class="flex-shrink-0 mt-1">
485
+ <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
486
+ <i class="fas fa-check text-primary"></i>
487
+ </div>
488
+ </div>
489
+ <div class="ml-3">
490
+ <p class="text-gray-300 font-medium">Оригинальные компоненты</p>
491
+ <p class="text-gray-500 text-sm">Используем только проверенное оборудование</p>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="flex items-start">
496
+ <div class="flex-shrink-0 mt-1">
497
+ <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
498
+ <i class="fas fa-check text-primary"></i>
499
+ </div>
500
+ </div>
501
+ <div class="ml-3">
502
+ <p class="text-gray-300 font-medium">Конфиденциальность</p>
503
+ <p class="text-gray-500 text-sm">Ваши данные и автомобиль в безопасности</p>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="relative" data-aos="fade-left">
510
+ <div class="bg-card p-6 rounded-xl">
511
+ <img src="https://via.placeholder.com/600x400/333333/666666?text=Car+Electronics" alt="Car Electronics" class="rounded-lg w-full h-auto">
512
+ </div>
513
+ <div class="absolute -bottom-6 -right-6 bg-primary p-4 rounded-lg shadow-lg">
514
+ <div class="text-black font-bold text-xl">NAVI SYSTEMS</div>
515
+ <div class="text-black text-sm">Since 2011</div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <!-- Process Section -->
523
+ <section id="process" class="py-20 bg-black">
524
+ <div class="max-w-6xl mx-auto px-6">
525
+ <div class="text-center mb-16" data-aos="fade-up">
526
+ <span class="text-primary font-bold">ПРОЦЕСС</span>
527
+ <h2 class="text-4xl font-extrabold mt-2 mb-4">Как мы работаем</h2>
528
+ <p class="text-gray-400 max-w-2xl mx-auto">Четкий алгоритм работы обеспечивает качественный результат в кратчайшие сроки</p>
529
+ </div>
530
+
531
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
532
+ <!-- Step 1 -->
533
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="f fade-up" data-aos-delay="100">
534
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div>
535
+ <h3 class="text-xl font-bold mb-2">Консультация</h3>
536
+ <p class="text-gray-400">Обсуждаем ваши пожелания и возможности автомобиля</p>
537
+ </div>
538
+
539
+ <!-- Step 2 -->
540
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="200">
541
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div>
542
+ <h3 class="text-xl font-bold mb-2">Диагностика</h3>
543
+ <p class="text-gray-400">Проводим полную диагностику систем автомобиля</p>
544
+ </div>
545
+
546
+ <!-- Step 3 -->
547
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="300">
548
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div>
549
+ <h3 class="text-xl font-bold mb-2">Реализация</h3>
550
+ <p class="text-gray-400">Выполняем работы с использованием профессионального оборудования</p>
551
+ </div>
552
+
553
+ <!-- Step 4 -->
554
+ <div class="bg-card p-6 rounded-xl text-center hover-scale" data-aos="fade-up" data-aos-delay="400">
555
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">4</div>
556
+ <h3 class="text-xl font-bold mb-2">Тестирование</h3>
557
+ <p class="text-gray-400">Проверяем все системы перед передачей автомобиля</p>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="mt-12" data-aos="fade-up">
562
+ <h3 class="text-2xl font-bold text-center mb-8">Этапы работы в деталях</h3>
563
+
564
+ <div class="max-w-3xl mx-auto">
565
+ <!-- Timeline Item 1 -->
566
+ <div class="timeline-item mb-8">
567
+ <div class="timeline-dot">1</div>
568
+ <div class="bg-card p-6 rounded-xl">
569
+ <h4 class="font-bold text-lg mb-2">Первичная консультация</h4>
570
+ <p class="text-gray-400">На первой встрече мы внимательно выслушаем ваши пожелания, расскажем о возможностях модернизации именно вашего автомобиля и предложим оптимальные решения.</p>
571
+ </div>
572
+ </div>
573
+
574
+ <!-- Timeline Item 2 -->
575
+ <div class="timeline-item mb-8">
576
+ <div class="timeline-dot">2</div>
577
+ <div class="bg-card p-6 rounded-xl">
578
+ <h4 class="font-bold text-lg mb-2">Диагностика и согласование</h4>
579
+ <p class="text-gray-400">Наши специалисты проведут полную диагностику систем вашего автомобиля, после чего мы подготовим детальный план работ и согласуем его с вами.</p>
580
+ </div>
581
+ </div>
582
+
583
+ <!-- Timeline Item 3 -->
584
+ <div class="timeline-item mb-8">
585
+ <div class="timeline-dot">3</div>
586
+ <div class="bg-card p-6 rounded-xl">
587
+ <h4 class="font-bold text-lg mb-2">Выполнение работ</h4>
588
+ <p class="text-gray-400">После утверждения плана наши сертифицированные специалисты приступят к работе, используя только профессиональное оборудование и оригинальные компоненты.</p>
589
+ </div>
590
+ </div>
591
+
592
+ <!-- Timeline Item 4 -->
593
+ <div class="timeline-item">
594
+ <div class="timeline-dot">4</div>
595
+ <div class="bg-card p-6 rounded-xl">
596
+ <h4 class="font-bold text-lg mb-2">Тестирование и передача</h4>
597
+ <p class="text-gray-400">Перед передачей автомобиля мы проводим тщательное тестирование всех систем, демонстрируем вам результат работы и даем подробные рекомендации по использованию.</p>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </section>
604
+
605
+ <!-- Brands Section -->
606
+ <section class="py-16 bg-gradient-to-r from-gray-900 to-black">
607
+ <div class="max-w-6xl mx-auto px-6">
608
+ <div class="text-center mb-12" data-aos="fade-up">
609
+ <h2 class="text-3xl font-extrabold mb-4">Работаем со всеми марками автомобилей</h2>
610
+ <p class="text-gray-400 max-w-2xl mx-auto">Мы имеем опыт работы с автомобилями различных производителей</p>
611
+ </div>
612
+
613
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
614
+ <!-- Brand 1 -->
615
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="100">
616
+ <div class="text-gray-300 font-bold">BMW</div>
617
+ </div>
618
+
619
+ <!-- Brand 2 -->
620
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="150">
621
+ <div class="text-gray-300 font-bold">Mercedes</div>
622
+ </div>
623
+
624
+ <!-- Brand 3 -->
625
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="200">
626
+ <div class="text-gray-300 font-bold">Audi</div>
627
+ </div>
628
+
629
+ <!-- Brand 4 -->
630
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="250">
631
+ <div class="text-gray-300 font-bold">Porsche</div>
632
+ </div>
633
+
634
+ <!-- Brand 5 -->
635
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="300">
636
+ <div class="text-gray-300 font-bold">Lexus</div>
637
+ </div>
638
+
639
+ <!-- Brand 6 -->
640
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="350">
641
+ <div class="text-gray-300 font-bold">Toyota</div>
642
+ </div>
643
+
644
+ <!-- Brand 7 -->
645
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="400">
646
+ <div class="text-gray-300 font-bold">Volkswagen</div>
647
+ </div>
648
+
649
+ <!-- Brand 8 -->
650
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="450">
651
+ <div class="text-gray-300 font-bold">Hyundai</div>
652
+ </div>
653
+
654
+ <!-- Brand 9 -->
655
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="500">
656
+ <div class="text-gray-300 font-bold">Kia</div>
657
+ </div>
658
+
659
+ <!-- Brand 10 -->
660
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="550">
661
+ <div class="text-gray-300 font-bold">Ford</div>
662
+ </div>
663
+
664
+ <!-- Brand 11 -->
665
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="600">
666
+ <div class="text-gray-300 font-bold">Chevrolet</div>
667
+ </div>
668
+
669
+ <!-- Brand 12 -->
670
+ <div class="bg-card p-6 rounded-xl flex items-center justify-center hover-scale" data-aos="fade-up" data-aos-delay="650">
671
+ <div class="text-gray-300 font-bold">Nissan</div>
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </section>
676
+
677
+ <!-- Testimonials Section -->
678
+ <section class="py-20 bg-black">
679
+ <div class="max-w-6xl mx-auto px-6">
680
+ <div class="text-center mb-16" data-aos="fade-up">
681
+ <span class="text-primary font-bold">ОТЗЫВЫ</span>
682
+ <h2 class="text-4xl font-extrabold mt-2 mb-4">Что говорят наши клиенты</h2>
683
+ <p class="text-gray-400 max-w-2xl mx-auto">Мы гордимся каждым выполненным проектом и благодарны за доверие</p>
684
+ </div>
685
+
686
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
687
+ <!-- Testimonial 1 -->
688
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="100">
689
+ <div class="flex items-center mb-6">
690
+ <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-4">
691
+ <i class="fas fa-user text-primary"></i>
692
+ </div>
693
+ <div>
694
+ <h4 class="font-bold">Александр</h4>
695
+ <p class="text-gray-400 text-sm">BMW X5</p>
696
+ </div>
697
+ </div>
698
+ <p class="text-gray-300 mb-4">"Отличная работа! Русифицировали мультимедиа в моем X5, все работает идеально. Карты обновили, радио настроили. Очень профессиональный подход."</p>
699
+ <div class="flex text-yellow-400">
700
+ <i class="fas fa-star"></i>
701
+ <i class="fas fa-star"></i>
702
+ <i class="fas fa-star"></i>
703
+ <i class="fas fa-star"></i>
704
+ <i class="fas fa-star"></i>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- Testimonial 2 -->
709
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="200">
710
+ <div class="flex items-center mb-6">
711
+ <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-4">
712
+ <i class="fas fa-user text-primary"></i>
713
+ </div>
714
+ <div>
715
+ <h4 class="font-bold">Дмитрий</h4>
716
+ <p class="text-gray-400 text-sm">Toyota Camry</p>
717
+ </div>
718
+ </div>
719
+ <p class="text-gray-300 mb-4">"Установили CarPlay в мою Camry. Работает безупречно, все функции сохранены. Мастера настоящие профессионалы, все сделали аккуратно и быстро."</p>
720
+ <div class="flex text-yellow-400">
721
+ <i class="fas fa-star"></i>
722
+ <i class="fas fa-star"></i>
723
+ <i class="fas fa-star"></i>
724
+ <i class="fas fa-star"></i>
725
+ <i class="fas fa-star"></i>
726
+ </div>
727
+ </div>
728
+
729
+ <!-- Testimonial 3 -->
730
+ <div class="bg-card p-8 rounded-xl hover-scale" data-aos="fade-up" data-aos-delay="300">
731
+ <div class="flex items-center mb-6">
732
+ <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mr-4">
733
+ <i class="fas fa-user text-primary"></i>
734
+ </div>
735
+ <div>
736
+ <h4 class="font-bold">Ольга</h4>
737
+ <p class="text-gray-400 text-sm">Kia Sportage</p>
738
+ </div>
739
+ </div>
740
+ <p class="text-gray-300 mb-4">"Сделали потрясающий аудиоапгрейд в моем Sportage. Звук просто невероятный! Все компоненты установлены идеально, никаких следов вмешательства не видно."</p>
741
+ <div class="flex text-yellow-400">
742
+ <i class="fas fa-star"></i>
743
+ <i class="fas fa-star"></i>
744
+ <i class="fas fa-star"></i>
745
+ <i class="fas fa-star"></i>
746
+ <i class="fas fa-star-half-alt"></i>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </section>
752
+
753
+ <!-- Contact Section -->
754
+ <section id="contact" class="py-20 bg-gradient-to-b from-black to-gray-900">
755
+ <div class="max-w-6xl mx-auto px-6">
756
+ <div class="text-center mb-16" data-aos="fade-up">
757
+ <span class="text-primary font-bold">КОНТАКТЫ</span>
758
+ <h2 class="text-4xl font-extrabold mt-2 mb-4">Свяжитесь с нами</h2>
759
+ <p class="text-gray-400 max-w-2xl mx-auto">Готовы ответить на все ваши вопросы и предложить оптимальное решение</p>
760
+ </div>
761
+
762
+ <div class="grid md:grid-cols-2 gap-12">
763
+ <!-- Contact Info -->
764
+ <div class="space-y-8" data-aos="fade-right">
765
+ <div class="bg-card p-6 rounded-xl">
766
+ <h3 class="text-xl font-bold mb-6">Контактная информация</h3>
767
+
768
+ <div class="space-y-6">
769
+ <!-- Address -->
770
+ <div class="flex items-start">
771
+ <div class="flex-shrink-0 mt-1">
772
+ <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
773
+ <i class="fas fa-map-marker-alt text-primary"></i>
774
+ </div>
775
+ </div>
776
+ <div class="ml-4">
777
+ <h4 class="font-bold text-gray-300">Адрес</h4>
778
+ <p class="text-gray-400">г. Краснодар, ул. 1 мая 493/22</p>
779
+ </div>
780
+ </div>
781
+
782
+ <!-- Phone -->
783
+ <div class="flex items-start">
784
+ <div class="flex-shrink-0 mt-1">
785
+ <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
786
+ <i class="fas fa-phone-alt text-primary"></i>
787
+ </div>
788
+ </div>
789
+ <div class="ml-4">
790
+ <h4 class="font-bold text-gray-300">Телефон</h4>
791
+ <p class="text-gray-400">+7 (909) 447-44-00</p>
792
+ <p class="text-gray-400">+7 (909) 447-44-00</p>
793
+ </div>
794
+ </div>
795
+
796
+ <!-- Email -->
797
+ <div class="flex items-start">
798
+ <div class="flex-shrink-0 mt-1">
799
+ <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
800
+ <i class="fas fa-envelope text-primary"></i>
801
+ </div>
802
+ </div>
803
+ <div class="ml-4">
804
+ <h4 class="font-bold text-gray-300">Email</h4>
805
+ <p class="text-gray-400">info@navisystems.ru</p>
806
+ <p class="text-gray-400">support@navisystems.ru</p>
807
+ </div>
808
+ </div>
809
+
810
+ <!-- Hours -->
811
+ <div class="flex items-start">
812
+ <div class="flex-shrink-0 mt-1">
813
+ <div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center">
814
+ <i class="fas fa-clock text-primary"></i>
815
+ </div>
816
+ </div>
817
+ <div class="ml-4">
818
+ <h4 class="font-bold text-gray-300">Часы работы</h4>
819
+ <p class="text-gray-400">Пн-Пт: 9:00 - 20:00</p>
820
+ <p class="text-gray-400">Сб: 10:00 - 18:00</p>
821
+ <p class="text-gray-400">Вс: выходной</p>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ </div>
826
+
827
+ <!-- Map -->
828
+ <div class="bg-card p-6 rounded-xl">
829
+ <h3 class="text-xl font-bold mb-6">Как нас найти</h3>
830
+ <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden">
831
+ <img src="https://via.placeholder.com/600x400/333333/666666?text=Map+Location" alt="Map" class="w-full h-full object-cover">
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <!-- Contact Form -->
837
+ <div class="bg-card p-8 rounded-xl" data-aos="fade-left">
838
+ <h3 class="text-2xl font-bold mb-6">Оставьте заявку</h3>
839
+ <p class="text-gray-400 mb-8">Заполните форму, и наш специалист свяжется с вами в ближайшее время</p>
840
+
841
+ <form class="space-y-6">
842
+ <div>
843
+ <label for="name" class="block text-gray-300 mb-2">Ваше имя</label>
844
+ <input type="text" id="name", class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="Иван Иванов">
845
+ </div>
846
+
847
+ <div>
848
+ <label for="phone" class="block text-gray-300 mb-2">Телефон</label>
849
+ <input type="tel" id="phone", class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="+7 (___) ___-__-__">
850
+ </div>
851
+
852
+ <div>
853
+ <label for="email" class="block text-gray-300 mb-2">Email</label>
854
+ <input type="email" id="email", class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="example@mail.ru">
855
+ </div>
856
+
857
+ <div>
858
+ <label for="car" class="block text-gray-300 mb-2">Марка автомобиля</label>
859
+ <select id="car", class="form-input w-full px-4 py-3 rounded-lg focus:outline-none">
860
+ <option value="">Выберите марку</option>
861
+ <option value="bmw">BMW</option>
862
+ <option value="mercedes">Mercedes-Benz</option>
863
+ <option value="audi">Audi</option>
864
+ <option value="porsche">Porsche</option>
865
+ <option value="lexus">Lexus</option>
866
+ <option value="toyota">Toyota</option>
867
+ <option value="hyundai">Hyundai</option>
868
+ <option value="kia">Kia</option>
869
+ <option value="volkswagen">Volkswagen</option>
870
+ <option value="ford">Ford</option>
871
+ <option value="chevrolet">Chevrolet</option>
872
+ <option value="nissan">Nissan</option>
873
+ <option value="other">Другая</option>
874
+ </select>
875
+ </div>
876
+
877
+ <div>
878
+ <label for="message" class="block text-gray-300 mb-2">Сообщение</label>
879
+ <textarea id="message", rows="4", class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="Опишите, какие услуги вас интересуют..."></textarea>
880
+ </div>
881
+
882
+ <button type="submit" class="btn-primary w-full py-4 rounded-lg hover-scale">
883
+ <i class="fas fa-paper-plane mr-2"></i>Отправить заявку
884
+ </button>
885
+ </form>
886
+ </div>
887
+ </div>
888
+ </div>
889
+ </section>
890
+
891
+ <!-- CTA Section -->
892
+ <section class="py-16 bg-primary">
893
+ <div class="max-w-6xl mx-auto px-6 text-center">
894
+ <h2 class="text-3xl md:text-4xl font-extrabold mb-6 text-black">Готовы модернизировать свой автомобиль?</h2>
895
+ <p class="text-black text-opacity-80 mb-8 max-w-2xl mx-auto">Запишитесь на бесплатную диагностику и консультацию прямо сейчас</p>
896
+ <a href="#contact" class="inline-block bg-black text-white px-10 py-4 rounded-lg font-bold hover:bg-opacity-90 transition transform hover:-translate-y-1">
897
+ <i class="fas fa-calendar-alt mr-2"></i>Записаться
898
+ </a>
899
+ </div>
900
+ </section>
901
+
902
+ <!-- Footer -->
903
+ <footer class="bg-black py-12">
904
+ <div class="max-w-6xl mx-auto px-6">
905
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
906
+ <!-- About -->
907
+ <div>
908
+ <h3 class="text-xl font-bold mb-4">NAVI SYSTEMS</h3>
909
+ <p class="text-gray-400 mb-4">Профессиональные решения для автомобилей всех марок с 2011 года.</p>
910
+ <div class="flex space-x-4">
911
+ <a href="#" class="text-gray-400 hover:text-primary transition">
912
+ <i class="fab fa-vk text-xl"></i>
913
+ </a>
914
+ <a href="#" class="text-gray-400 hover:text-primary transition">
915
+ <i class="fab fa-telegram text-xl"></i>
916
+ </a>
917
+ <a href="#" class="text-gray-400 hover:text-primary transition">
918
+ <i class="fab fa-youtube text-xl"></i>
919
+ </a>
920
+ <a href="#" class="text-gray-400 hover:text-primary transition">
921
+ <i class="fab fa-instagram text-xl"></i>
922
+ </a>
923
+ </div>
924
+ </div>
925
+
926
+ <!-- Services -->
927
+ <div>
928
+ <h3 class="text-xl font-bold mb-4">Услуги</h3>
929
+ <ul class="space-y-2">
930
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Русификация</a></li>
931
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Аудио апгрейд</a></li>
932
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">CarPlay/Android Auto</a></li>
933
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Навигационные системы</a></li>
934
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Безопасность</a></li>
935
+ </ul>
936
+ </div>
937
+
938
+ <!-- Links -->
939
+ <div>
940
+ <h3 class="text-xl font-bold mb-4">Ссылки</h3>
941
+ <ul class="space-y-2">
942
+ <li><a href="#home" class="text-gray-400 hover:text-primary transition">Главная</a></li>
943
+ <li><a href="#services" class="text-gray-400 hover:text-primary transition">Услуги</a></li>
944
+ <li><a href="#advantages" class="text-gray-400 hover:text-primary transition">Преимущества</a></li>
945
+ <li><a href="#process" class="text-gray-400 hover:text-primary transition">Процесс</a></li>
946
+ <li><a href="#contact" class="text-gray-400 hover:text-primary transition">Контакты</a></li>
947
+ </ul>
948
+ </div>
949
+
950
+ <!-- Newsletter -->
951
+ <div>
952
+ <h3 class="text-xl font-bold mb-4">Новостная рассылка</h3>
953
+ <p class="text-gray-400 mb-4">Подпишитесь на наши новости и акции</p>
954
+ <form class="flex">
955
+ <input type="email" placeholder="Ваш email" class="form-input px-4 py-3 rounded-l-lg focus:outline-none flex-grow">
956
+ <button type="submit" class="bg-primary text-black px-4 py-3 rounded-r-lg font-bold">
957
+ <i class="fas fa-paper-plane"></i>
958
+ </button>
959
+ </form>
960
+ </div>
961
+ </div>
962
+
963
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
964
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 NAVI SYSTEMS. Все права защищены.</p>
965
+ <div class="flex space-x-6">
966
+ <a href="#" class="text-gray-400 hover:text-primary transition">Политика конфиденциальности</a>
967
+ <a href="#" class="text-gray-400 hover:text-primary transition">Условия использования</a>
968
+ </div>
969
+ </div>
970
+ </div>
971
+ </footer>
972
+
973
+ <!-- Back to Top -->
974
+ <a href="#home" id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-black text-xl opacity-0 invisible transition-all duration-300">
975
+ <i class="fas fa-arrow-up"></i>
976
+ </a>
977
+
978
+ <!-- Scripts -->
979
+ <script>
980
+ // AOS Animation
981
+ document.addEventListener('DOMContentLoaded', () => {
982
+ AOS.init({
983
+ once: true,
984
+ duration: 800,
985
+ offset: 120
986
+ });
987
+ });
988
+
989
+ // Preloader
990
+ window.addEventListener('load', () => {
991
+ const preloader = document.getElementById('preloader');
992
+ setTimeout(() => {
993
+ preloader.style.opacity = '0';
994
+ preloader.style.visibility = 'hidden';
995
+ preloader.style.display = 'none';
996
+ }, 500);
997
+ });
998
+
999
+ // Mobile Menu
1000
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1001
+ const mobileMenu = document.getElementById('mobile-menu');
1002
+
1003
+ if (mobileMenuButton && mobileMenu) {
1004
+ mobileMenuButton.addEventListener('click', () => {
1005
+ mobileMenu.classList.toggle('active');
1006
+ mobileMenu.classList.toggle('max-h-0');
1007
+ });
1008
+ }
1009
+
1010
+ // Phone Mask
1011
+ const phoneInput = document.getElementById('phone');
1012
+ if (phoneInput) {
1013
+ phoneInput.addEventListener('input', (e) => {
1014
+ let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
1015
+ e.target.value = !x[2] ? '+7' : `+7 (${x[2]}${x[3] ? `) ${x[3]}` : ''}${x[4] ? `-${x[4]}` : ''}${x[5] ? `-${x[5]}` : ''}`;
1016
+ });
1017
+ }
1018
+
1019
+ // Particles
1020
+ function createParticles() {
1021
+ const wrap = document.getElementById('particles');
1022
+ if (!wrap) return;
1023
+
1024
+ const count = 30;
1025
+ const w = window.innerWidth;
1026
+ const h = window.innerHeight;
1027
+
1028
+ for (let i = 0; i < count; i++) {
1029
+ const d = document.createElement('div');
1030
+ d.style.cssText = `
1031
+ position: absolute;
1032
+ width: 2px;
1033
+ height: 2px;
1034
+ background: rgba(255,255,255,0.8);
1035
+ border-radius: 50%;
1036
+ top: ${Math.random() * h}px;
1037
+ left: ${Math.random() * w}px;
1038
+ animation: float-particle ${10 + Math.random() * 10}s linear infinite;
1039
+ `;
1040
+ d.style.animationDelay = `${Math.random() * 5}s`;
1041
+ wrap.appendChild(d);
1042
+ }
1043
+ }
1044
+ createParticles();
1045
+
1046
+ // Back to Top Button
1047
+ const backToTop = document.getElementById('back-to-top');
1048
+ window.addEventListener('scroll', () => {
1049
+ if (window.pageYOffset > 300) {
1050
+ backToTop.style.opacity = '1';
1051
+ backToTop.style.visibility = 'visible';
1052
+ } else {
1053
+ backToTop.style.opacity = '0';
1054
+ backToTop.style.visibility = 'hidden';
1055
+ }
1056
+ });
1057
+ </script>
1058
+ <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=Denzel1989/moy-cod3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1059
+ </html>
prompts.txt ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ Исправь текст для всех автомобилей премиальных и не только. И убери значки автомобилей
2
+ Адрес г. Краснодар, ул. 1 мая 493/22 Телефон +7 (909) 447-44-00 +7 (909) 447-44-00 Email info@navisystems.ru support@navisystems.ru Часы работы Пн-Пт: 9:00 - 20:00 Сб: 10:00 - 18:00 Вс: выходной Чат исправь контакты
3
+ гарантия 1 год
4
+ чат исправь гарантия 1 год
5
+ чат исправь гарантия 1 год