Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
655 lines (597 loc) · 49.9 KB
/
Copy pathindex.html
File metadata and controls
655 lines (597 loc) · 49.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
<!DOCTYPE html>
<html class="light" lang="ru">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Упаковка студии маникюра | Стабильный поток клиентов</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Manrope', sans-serif;
background-color: #fafafb;
color: #111827;
-webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.bento-card {
transition: all 0.3s ease;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.bento-card:hover {
box-shadow: 0 10px 30px rgba(225, 29, 72, 0.1);
transform: translateY(-3px);
border-color: #fda4af;
}
.text-gradient {
background: linear-gradient(135deg, #e11d48, #f97316);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-gradient-accent {
background: linear-gradient(135deg, #e11d48, #f97316);
}
/* Брендовые цвета для текста */
.text-yandex { color: #fc3f1d; }
.text-2gis { color: #A3C644; }
.text-vk { color: #0077FF; }
html { scroll-behavior: smooth; }
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#111827",
accent: "#e11d48",
"on-surface-variant": "#4b5563",
"surface": "#ffffff",
"outline-variant": "#e5e7eb",
},
borderRadius: {
bento: "28px"
},
spacing: {
"bento-gap": "24px",
"container-padding-mobile": "24px",
"container-padding-desktop": "80px",
"section-margin": "100px"
}
}
}
}
</script>
</head>
<body class="text-primary relative">
<div class="absolute top-0 left-0 w-full h-[600px] bg-gradient-to-br from-rose-100/50 via-white to-orange-50/30 -z-10 pointer-events-none"></div>
<!-- Top Navigation -->
<nav class="fixed top-0 w-full z-50 flex justify-between items-center h-20 px-container-padding-mobile md:px-container-padding-desktop max-w-full mx-auto bg-white/80 backdrop-blur-md border-b border-outline-variant">
<div class="font-extrabold text-xl tracking-tight text-primary flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-gradient-accent"></span>
ПАВЕЛ | СТУДИИ МАНИКЮРА
</div>
<div class="hidden md:flex gap-10">
<a class="text-sm font-bold text-primary border-b-2 border-accent pb-1" href="#system">Система</a>
<a class="text-sm font-semibold text-on-surface-variant hover:text-accent transition-all duration-300" href="#results">Результаты</a>
<a class="text-sm font-semibold text-on-surface-variant hover:text-accent transition-all duration-300" href="#pricing">Тарифы</a>
</div>
<a href="#contact" class="bg-gradient-accent text-white px-6 py-2 rounded-full text-sm font-bold hover:shadow-lg hover:shadow-rose-500/30 transition-all">Связаться</a>
</nav>
<!-- Hero Section -->
<header class="pt-40 pb-20 px-container-padding-mobile md:px-container-padding-desktop text-center relative">
<div class="max-w-5xl mx-auto">
<div class="inline-block bg-rose-100 text-accent font-bold px-4 py-1.5 rounded-full text-sm mb-6 border border-rose-200">
Упаковка бизнеса в nail-индустрии
</div>
<h1 class="text-4xl md:text-6xl lg:text-[68px] font-bold tracking-tight text-primary mb-8 leading-tight">
Комплексная система привлечения клиентов в студию маникюра. Стабильный поток и <span class="text-gradient">+30 новых записей</span> уже на старте.
</h1>
<p class="text-lg md:text-xl text-on-surface-variant max-w-3xl mx-auto mb-12 leading-relaxed">
Внедряем проверенную связку из <span class="text-yandex font-bold">Яндекс.Карт</span>, <span class="text-2gis font-bold">2ГИС</span>, <span class="text-vk font-bold">ВКонтакте</span> и <span class="text-gradient font-bold">Большого сайта студии</span>. Вы получаете плотное расписание мастеров, не вкладывая <strong class="text-accent font-bold">ни копейки</strong> в платную рекламу.
</p>
<a href="#contact" class="inline-block bg-gradient-accent text-white px-10 py-5 rounded-full text-lg font-bold hover:scale-[1.02] transition-transform duration-200 shadow-xl shadow-rose-500/25 border-2 border-white">
Узнать, как работает система
</a>
</div>
</header>
<!-- Problem Section -->
<section class="py-20 px-container-padding-mobile md:px-container-padding-desktop">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16">
<div class="md:w-1/2">
<h2 class="text-3xl md:text-5xl font-bold text-primary mb-6 leading-tight">Знакомая ситуация:<br><span class="text-gradient">Посадили мастера, а кресло пустует?</span></h2>
<p class="text-lg text-on-surface-variant mb-6">Вы берете нового мастера на маникюр или педикюр, но своей плотной базы клиентов для неё еще нет.</p>
<ul class="space-y-4 text-lg text-on-surface-variant">
<li class="flex items-start gap-4 p-4 bg-red-50 rounded-2xl border border-red-200 shadow-sm">
<span class="material-symbols-outlined text-red-500 mt-1 font-bold">close</span>
<span class="text-red-900 font-medium">Мастер сидит в телефоне, скучает и думает уйти в другой салон.</span>
</li>
<li class="flex items-start gap-4 p-4 bg-red-50 rounded-2xl border border-red-200 shadow-sm">
<span class="material-symbols-outlined text-red-500 mt-1 font-bold">close</span>
<span class="text-red-900 font-medium">Вы платите за аренду пустующего места, материалы сохнут, а вы теряете деньги.</span>
</li>
<li class="flex items-start gap-4 p-4 bg-green-50 rounded-2xl border border-green-200 shadow-sm">
<span class="material-symbols-outlined text-green-600 mt-1 font-bold">check_circle</span>
<strong class="text-green-900">Я покажу, как стабильно получать клиентов из бесплатных источников (Яндекс, 2ГИС, поиск, ВК), чтобы не сливать десятки тысяч таргетологам.</strong>
</li>
</ul>
</div>
<div class="md:w-1/2 w-full aspect-square bg-white rounded-bento border border-outline-variant shadow-lg flex items-center justify-center overflow-hidden relative">
<img src="images/net-klientov.webp" alt="Красивое пустое кресло для педикюра" class="w-full h-full object-cover">
</div>
</div>
</section>
<!-- About Me (Свой парень + Ссылки на студию Yurkes) -->
<section class="py-12 px-container-padding-mobile md:px-container-padding-desktop">
<div class="max-w-5xl mx-auto bg-gradient-to-r from-gray-900 to-primary text-white rounded-bento border border-gray-800 p-10 md:p-16 flex flex-col md:flex-row gap-12 items-center shadow-2xl relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-accent opacity-20 blur-[100px] rounded-full pointer-events-none"></div>
<div class="w-32 h-32 md:w-48 md:h-48 rounded-full bg-gray-800 flex-shrink-0 overflow-hidden border-4 border-gray-700 flex items-center justify-center relative z-10">
<span class="material-symbols-outlined text-6xl text-gray-500">face</span>
</div>
<div class="relative z-10">
<h2 class="text-3xl font-bold mb-4 text-white">Я знаю вашу кухню изнутри</h2>
<p class="text-lg text-gray-300 mb-4 leading-relaxed">
Меня зовут Павел. Вообще, у меня своя веб-студия. Но так вышло, что моя жена уже 10 лет в nail-индустрии. За эти годы, помогая ей развивать нашу студию маникюра <strong>Yurkes (г. Златоуст)</strong>, я узнал о ногтях столько же, сколько о сайтах. Я знаю, как сложно найти толкового мастера на процент, и почему клиентка больше не вернется, если мастер забудет про финальный опил формы.
</p>
<p class="text-lg text-white font-medium mb-6">
Я объединил свой опыт в разработке сайтов с реалиями салонов. Моя система приносит <span class="text-rose-400">реальных клиентов в кресло</span>. Ниже — ссылки на наш бизнес, вы можете перейти и лично убедиться в качестве нашей упаковки:
</p>
<!-- Ссылки на реальную студию Yurkes -->
<div class="flex flex-wrap gap-3">
<a href="https://yurkes.ru/" target="_blank" class="flex items-center gap-1.5 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl text-sm font-bold text-white transition-colors border border-white/10">
<span class="material-symbols-outlined text-[18px]">language</span> yurkes.ru
</a>
<a href="https://vk.com/manikur_zlatoust_yurkes" target="_blank" class="flex items-center gap-1.5 bg-blue-500/20 hover:bg-blue-500/30 px-4 py-2 rounded-xl text-sm font-bold text-blue-100 transition-colors border border-blue-500/30">
<span class="material-symbols-outlined text-[18px]">group</span> ВКонтакте
</a>
<a href="https://yandex.ru/maps/-/CPsBAK9U" target="_blank" class="flex items-center gap-1.5 bg-red-500/20 hover:bg-red-500/30 px-4 py-2 rounded-xl text-sm font-bold text-red-100 transition-colors border border-red-500/30">
<span class="material-symbols-outlined text-[18px]">location_on</span> Яндекс.Карты
</a>
<a href="https://2gis.ru/zlatoust/firm/70000001103782455" target="_blank" class="flex items-center gap-1.5 bg-[#A3C644]/20 hover:bg-[#A3C644]/30 px-4 py-2 rounded-xl text-sm font-bold text-[#d4f872] transition-colors border border-[#A3C644]/30">
<span class="material-symbols-outlined text-[18px]">location_on</span> 2ГИС
</a>
<a href="https://dikidi.ru/2046184?p=0.pi" target="_blank" class="flex items-center gap-1.5 bg-rose-500/20 hover:bg-rose-500/30 px-4 py-2 rounded-xl text-sm font-bold text-rose-100 transition-colors border border-rose-500/30">
<span class="material-symbols-outlined text-[18px]">event_available</span> Dikidi
</a>
</div>
<p class="text-xs text-gray-400 mt-4">* Это реальные активные ссылки нашей студии Yurkes. Кликайте и смотрите.</p>
</div>
</div>
</section>
<!-- Bento Grid: The System -->
<section id="system" class="py-section-margin px-container-padding-mobile md:px-container-padding-desktop">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl md:text-5xl font-bold text-primary mb-12 text-center">Из чего состоит <span class="text-gradient">упаковка студии</span></h2>
<div class="grid grid-cols-1 md:grid-cols-12 gap-bento-gap">
<!-- Card 1: Design (Span 7) - С каруселью и модальными окнами -->
<div class="md:col-span-7 border border-outline-variant p-8 md:p-10 flex flex-col bento-card rounded-bento relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-accent opacity-5 blur-[60px] rounded-full pointer-events-none"></div>
<div class="w-14 h-14 bg-rose-50 rounded-2xl flex items-center justify-center mb-6 relative z-10">
<span class="material-symbols-outlined text-gradient" style="font-size: 28px;">diamond</span>
</div>
<h3 class="text-2xl font-bold text-primary mb-4 relative z-10">Яркий и премиальный дизайн</h3>
<p class="text-base text-on-surface-variant leading-relaxed mb-6 relative z-10">Мы делаем так, чтобы вашу студию запоминали с первого взгляда. Разрабатываем стильный логотип, красивые прайсы, заметную вывеску и подарочные сертификаты, которые хочется дарить подругам.</p>
<!-- Карусель изображений дизайна - 4 фото в сетке -->
<div class="relative mt-auto mb-4">
<div class="grid grid-cols-2 gap-2">
<div class="aspect-square rounded-lg overflow-hidden cursor-pointer transform hover:scale-105 transition-transform duration-300 shadow-md" onclick="openLightbox(0)">
<img src="images/sertificat.webp" alt="Сертификаты" class="w-full h-full object-cover">
</div>
<div class="aspect-square rounded-lg overflow-hidden cursor-pointer transform hover:scale-105 transition-transform duration-300 shadow-md" onclick="openLightbox(1)">
<img src="images/visitki.webp" alt="Визитки" class="w-full h-full object-cover">
</div>
<div class="aspect-square rounded-lg overflow-hidden cursor-pointer transform hover:scale-105 transition-transform duration-300 shadow-md" onclick="openLightbox(2)">
<img src="images/viveska.webp" alt="Вывеска" class="w-full h-full object-cover">
</div>
<div class="aspect-square rounded-lg overflow-hidden cursor-pointer transform hover:scale-105 transition-transform duration-300 shadow-md" onclick="openLightbox(3)">
<img src="images/fasad.webp" alt="Фасад" class="w-full h-full object-cover">
</div>
</div>
<p class="text-xs text-center text-gray-500 mt-2">Нажмите на фото для просмотра в полном размере</p>
</div>
<div class="flex flex-wrap gap-2 mt-auto relative z-10">
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Логотип</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Вывеска</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Визитки</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Прайсы</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Сертификаты</span>
</div>
</div>
<!-- Card 2: Website (Span 5) -->
<div class="md:col-span-5 border border-outline-variant p-8 md:p-10 flex flex-col bento-card rounded-bento">
<div class="w-14 h-14 bg-orange-50 rounded-2xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-gradient" style="font-size: 28px;">language</span>
</div>
<h3 class="text-2xl font-bold text-primary mb-4">Большой сайт студии</h3>
<p class="text-base text-on-surface-variant mb-4 leading-relaxed">Создаем не просто страничку-визитку, а полноценный многостраничный сайт. Вся нужная клиентам (и поисковикам) информация собрана в одном месте.</p>
<a href="https://yurkes.ru/" target="_blank" class="text-sm font-bold text-primary hover:text-accent underline decoration-outline-variant underline-offset-4 mb-6 inline-block transition-colors">Посмотреть пример нашего сайта ↗</a>
<div class="flex flex-wrap gap-2 mt-auto">
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Услуги и цены</span>
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Портфолио</span>
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Обучение</span>
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Вакансии</span>
</div>
</div>
<!-- Card 3: Maps (Span 4) -->
<div class="md:col-span-4 border border-outline-variant p-8 md:p-10 flex flex-col bento-card rounded-bento">
<div class="w-14 h-14 bg-red-50 rounded-2xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-yandex" style="font-size: 28px;">location_on</span>
</div>
<h3 class="text-2xl font-bold text-primary mb-4">Карты и Справочники</h3>
<p class="text-base text-on-surface-variant leading-relaxed mb-4">Регистрируем и правильно упаковываем профили. Грузим актуальные прайсы, фото работ и акции, чтобы студия выделялась в районе.</p>
<div class="mb-6 flex flex-wrap gap-4">
<a href="https://yandex.ru/maps/-/CPsBAK9U" target="_blank" class="text-sm font-bold text-yandex hover:opacity-80 underline decoration-red-100 underline-offset-4 transition-opacity">Наш Яндекс ↗</a>
<a href="https://2gis.ru/zlatoust/firm/70000001103782455" target="_blank" class="text-sm font-bold text-[#609915] hover:opacity-80 underline decoration-green-100 underline-offset-4 transition-opacity">Наш 2ГИС ↗</a>
</div>
<div class="flex flex-wrap gap-2 mt-auto">
<span class="px-3 py-1.5 bg-red-50 text-yandex rounded-xl text-xs font-bold border border-red-100">Яндекс.Карты</span>
<span class="px-3 py-1.5 bg-green-50 text-[#609915] rounded-xl text-xs font-bold border border-green-200">2ГИС</span>
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Отзывы</span>
</div>
</div>
<!-- Card 4: VK (Span 4) -->
<div class="md:col-span-4 border border-outline-variant p-8 md:p-10 flex flex-col bento-card rounded-bento">
<div class="w-14 h-14 bg-blue-50 rounded-2xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-vk" style="font-size: 28px;">group</span>
</div>
<h3 class="text-2xl font-bold text-primary mb-4">Группа ВКонтакте</h3>
<p class="text-base text-on-surface-variant leading-relaxed mb-4">Полностью оформляем группу в фирменном стиле. Перезаполняем все разделы и настраиваем SEO, чтобы вас находило больше народу в поиске ВК.</p>
<a href="https://vk.com/manikur_zlatoust_yurkes" target="_blank" class="text-sm font-bold text-vk hover:opacity-80 underline decoration-blue-100 underline-offset-4 mb-6 inline-block transition-opacity">Посмотреть нашу группу ВК ↗</a>
<div class="flex flex-wrap gap-2 mt-auto">
<span class="px-3 py-1.5 bg-blue-50 text-vk rounded-xl text-xs font-bold border border-blue-100">Фирменный стиль</span>
<span class="px-3 py-1.5 bg-blue-50 text-vk rounded-xl text-xs font-bold border border-blue-100">SEO-настройка</span>
<span class="px-3 py-1.5 bg-blue-50 text-vk rounded-xl text-xs font-bold border border-blue-100">Товары</span>
</div>
</div>
<!-- Card 5: Booking (Span 4) -->
<div class="md:col-span-4 border border-outline-variant p-8 md:p-10 flex flex-col bento-card rounded-bento">
<div class="w-14 h-14 bg-pink-50 rounded-2xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-gradient" style="font-size: 28px;">event_available</span>
</div>
<h3 class="text-2xl font-bold text-primary mb-4">Онлайн-запись</h3>
<p class="text-base text-on-surface-variant leading-relaxed mb-4">Настраиваем Dikidi. Клиентам не нужно искать контакты — они видят свободное окно и сами записываются к мастеру в любое время суток.</p>
<a href="https://dikidi.ru/2046184?p=0.pi" target="_blank" class="text-sm font-bold text-accent hover:opacity-80 underline decoration-rose-100 underline-offset-4 mb-6 inline-block transition-opacity">Наш профиль Dikidi ↗</a>
<div class="flex flex-wrap gap-2 mt-auto">
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Кнопка в Картах</span>
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Виджет в ВК</span>
<span class="px-3 py-1.5 bg-gray-50 text-primary rounded-xl text-xs font-bold border border-gray-200">Dikidi</span>
</div>
</div>
<!-- Card 6: Retention / LTV (Span 12) -->
<div class="md:col-span-12 border border-outline-variant p-8 md:p-10 flex flex-col md:flex-row justify-between items-start md:items-center bento-card rounded-bento">
<div class="md:max-w-2xl">
<div class="w-14 h-14 bg-rose-50 rounded-2xl flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-gradient" style="font-size: 28px;">autorenew</span>
</div>
<h3 class="text-2xl font-bold text-primary mb-4">Готовая система привлечения и возврата</h3>
<p class="text-base text-on-surface-variant leading-relaxed mb-6">Вам не нужно гадать, как работать с базой. Мы даем внедренную систему: акции, подарочные сертификаты, флаеры и подробные инструкции, как и когда этим пользоваться. Делаем всё, чтобы приходили новые клиенты и возвращались старые.</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Акции</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Флаеры</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Подарочные сертификаты</span>
<span class="px-3 py-1.5 bg-rose-50 text-accent rounded-xl text-xs font-bold border border-rose-100">Инструкции для мастеров</span>
</div>
</div>
<!-- Заглушка под фото -->
<div class="mt-8 md:mt-0 w-full md:w-80 h-48 bg-gray-50 rounded-2xl flex items-center justify-center text-gray-400 text-sm border border-dashed border-gray-300">
[Заглушка: Фото напечатанных сертификатов]
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section id="results" class="py-section-margin px-container-padding-mobile md:px-container-padding-desktop bg-white border-y border-outline-variant">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-12 text-center">Наши результаты в цифрах:</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-12 mb-10 text-center">
<div class="p-6">
<div class="text-5xl md:text-7xl font-bold text-gradient mb-4">+30</div>
<div class="text-sm font-bold tracking-wider text-primary uppercase">новых клиентов</div>
<div class="text-xs text-on-surface-variant mt-2">за 1-й месяц работы</div>
</div>
<div class="p-6">
<div class="text-5xl md:text-7xl font-bold text-gradient mb-4">+1</div>
<div class="text-sm font-bold tracking-wider text-primary uppercase">запись каждый день</div>
<div class="text-xs text-on-surface-variant mt-2">стабильно к мастеру</div>
</div>
<div class="p-6">
<div class="text-5xl md:text-7xl font-bold text-gradient mb-4">0 ₽</div>
<div class="text-sm font-bold tracking-wider text-primary uppercase">вложено в рекламу</div>
<div class="text-xs text-on-surface-variant mt-2">только органика и Карты</div>
</div>
<div class="p-6">
<div class="text-5xl md:text-7xl font-bold text-gradient mb-4">40%</div>
<div class="text-sm font-bold tracking-wider text-primary uppercase">возвращаемость</div>
<div class="text-xs text-on-surface-variant mt-2">становятся постоянными</div>
</div>
</div>
<div class="text-center max-w-3xl mx-auto mb-16">
<p class="text-sm md:text-base font-medium text-on-surface-variant bg-gray-50 border border-gray-200 py-4 px-6 rounded-2xl inline-block shadow-sm">
💡 Да, это не «+100 записей в первый день», как часто обещают в рекламе таргетологи. Но мы пишем <strong class="text-primary">реальные цифры</strong>, основанные на честном опыте и планомерном развитии студии без слива бюджетов.
</p>
</div>
<!-- Скриншоты доказательств -->
<div class="w-full aspect-video bg-gray-50 rounded-bento border border-outline-variant p-8 flex flex-col items-center justify-center text-gray-400 border-dashed shadow-sm">
<span class="material-symbols-outlined text-6xl mb-4 opacity-50">query_stats</span>
<p>[Заглушка: Скриншоты статистики — выдача в Яндексе, плотный график записей в Дикиди]</p>
</div>
</div>
</section>
<!-- Pricing Comparison Section -->
<section class="py-16 px-container-padding-mobile md:px-container-padding-desktop bg-[#fafafb]">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-5xl font-bold text-primary mb-6 text-center">Почему комплексом — <span class="text-gradient">выгоднее и эффективнее?</span></h2>
<p class="text-lg text-on-surface-variant text-center max-w-3xl mx-auto mb-12 leading-relaxed">По отдельности эти инструменты не работают. Крутой сайт без трафика с Карт — мертв. А трафик с Карт без удобной онлайн-записи — это потерянные клиенты. Поэтому мы внедряем только единый рабочий механизм.</p>
<div class="bg-white rounded-bento border border-outline-variant p-8 md:p-12 shadow-xl mb-10">
<div class="space-y-6">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-100 pb-4 gap-2">
<div class="font-medium text-lg text-primary flex items-center gap-3">
<span class="material-symbols-outlined text-accent text-xl">web</span> Большой сайт студии со всеми страницами
</div>
<div class="md:text-right flex items-center md:block gap-4">
<span class="text-gray-400 line-through text-sm md:mr-3">от 60 000 ₽</span>
<span class="font-bold text-green-500 bg-green-50 px-3 py-1 rounded-full text-sm">Включено</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-100 pb-4 gap-2">
<div class="font-medium text-lg text-primary flex items-center gap-3">
<span class="material-symbols-outlined text-accent text-xl">palette</span> Разработка фирменного стиля и визуала
</div>
<div class="md:text-right flex items-center md:block gap-4">
<span class="text-gray-400 line-through text-sm md:mr-3">от 30 000 ₽</span>
<span class="font-bold text-green-500 bg-green-50 px-3 py-1 rounded-full text-sm">Включено</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-100 pb-4 gap-2">
<div class="font-medium text-lg text-primary flex items-center gap-3">
<span class="material-symbols-outlined text-accent text-xl">location_on</span> Настройка Яндекс.Карт и 2ГИС
</div>
<div class="md:text-right flex items-center md:block gap-4">
<span class="text-gray-400 line-through text-sm md:mr-3">15 000 ₽</span>
<span class="font-bold text-green-500 bg-green-50 px-3 py-1 rounded-full text-sm">Включено</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-100 pb-4 gap-2">
<div class="font-medium text-lg text-primary flex items-center gap-3">
<span class="material-symbols-outlined text-accent text-xl">touch_app</span> Оформление ВКонтакте и интеграция Dikidi
</div>
<div class="md:text-right flex items-center md:block gap-4">
<span class="text-gray-400 line-through text-sm md:mr-3">15 000 ₽</span>
<span class="font-bold text-green-500 bg-green-50 px-3 py-1 rounded-full text-sm">Включено</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center pt-6 gap-2">
<div class="font-bold text-xl text-primary">Итоговая рыночная стоимость:</div>
<div class="md:text-right flex items-center gap-4">
<span class="text-gray-400 line-through text-lg">120 000 ₽</span>
<span class="font-extrabold text-4xl text-gradient">50 000 ₽</span>
</div>
</div>
</div>
</div>
<div class="bg-rose-50 rounded-bento p-8 md:p-10 border border-rose-100 relative overflow-hidden">
<div class="absolute -right-10 -bottom-10 opacity-10">
<span class="material-symbols-outlined" style="font-size: 200px;">lightbulb</span>
</div>
<h3 class="font-bold text-2xl text-primary mb-4 relative z-10">Почему у нас такая цена?</h3>
<p class="text-on-surface-variant text-lg leading-relaxed relative z-10">Вам не нужно платить нам за маркетинговые исследования и «изобретение велосипеда». У нас уже есть <strong>проверенная годами система</strong> специально для студий маникюра. Мы просто берем готовый, рабочий механизм и адаптируем его под ваши услуги, вкус и цвет. Меньше времени на тесты — больше результата за адекватные деньги.</p>
</div>
</div>
</section>
<!-- Offer Card -->
<section id="pricing" class="py-10 px-container-padding-mobile md:px-container-padding-desktop">
<div class="max-w-5xl mx-auto bg-white rounded-bento border border-outline-variant overflow-hidden shadow-2xl relative">
<div class="h-2 w-full bg-gradient-accent"></div>
<div class="p-12 md:p-20 flex flex-col md:flex-row gap-16 items-center">
<div class="flex-1">
<div class="inline-block bg-rose-100 text-accent font-bold px-3 py-1 rounded-full text-xs mb-4">Базовый тариф</div>
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-8 leading-tight">Полная упаковка студии<br>«Под ключ» за 7 дней</h2>
<ul class="space-y-5">
<li class="flex items-start gap-4 text-lg text-primary font-medium">
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5"><span class="material-symbols-outlined text-green-600 text-[16px] font-bold">check</span></div>
Полноценный сайт, оформление соцсетей.
</li>
<li class="flex items-start gap-4 text-lg text-primary font-medium">
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5"><span class="material-symbols-outlined text-green-600 text-[16px] font-bold">check</span></div>
Настройка Яндекс.Карт и 2ГИС.
</li>
<li class="flex items-start gap-4 text-lg text-primary font-medium">
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5"><span class="material-symbols-outlined text-green-600 text-[16px] font-bold">check</span></div>
Настройка Dikidi и подключение записи в соцсети и карты.
</li>
<li class="flex items-start gap-4 text-lg text-primary font-medium">
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5"><span class="material-symbols-outlined text-green-600 text-[16px] font-bold">check</span></div>
Яркий премиальный дизайн (вывеска, визитки, сертификаты).
</li>
<li class="flex items-start gap-4 text-lg text-primary font-medium">
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5"><span class="material-symbols-outlined text-green-600 text-[16px] font-bold">check</span></div>
Инструкции, как и когда этим пользоваться правильно.
</li>
</ul>
</div>
<div class="md:w-96 flex flex-col justify-center items-center text-center p-10 bg-gray-50 rounded-3xl border border-outline-variant">
<div class="text-xs font-bold tracking-widest text-on-surface-variant mb-4">СТОИМОСТЬ РАБОТЫ</div>
<div class="text-5xl font-extrabold text-primary mb-6">50 000 ₽</div>
<p class="text-sm text-on-surface-variant mb-8 px-4 leading-relaxed">
*Оплачивается разово. Далее техническая поддержка сервера для сайта — всего 1000 ₽ в месяц.
</p>
<a href="#contact" class="w-full bg-primary text-white py-4 rounded-full text-lg font-bold hover:bg-gray-800 transition-all shadow-md">
Обсудить упаковку
</a>
</div>
</div>
</div>
</section>
<!-- Upsells -->
<section class="py-16 px-container-padding-mobile md:px-container-padding-desktop">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl font-bold text-primary mb-10 text-center">Дополнительная помощь (По желанию)</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Тариф 1: Рутина -->
<div class="bg-white p-8 md:p-10 rounded-bento border border-outline-variant flex flex-col justify-between bento-card">
<div class="mb-6">
<h3 class="text-2xl font-bold text-primary mb-4">Забрать на себя рутину</h3>
<p class="text-base text-on-surface-variant mb-6 leading-relaxed">Вам больше не нужно тратить время на ведение площадок. Вы скидываете материалы в чат, остальное делаем мы:</p>
<ul class="space-y-3">
<li class="flex items-start gap-3 text-sm font-medium text-primary">
<span class="material-symbols-outlined text-green-500 text-[20px] font-bold">check_circle</span> Обновляем цены, загружаем акции, фото и новые видео
</li>
<li class="flex items-start gap-3 text-sm font-medium text-primary">
<span class="material-symbols-outlined text-green-500 text-[20px] font-bold">check_circle</span> Поддерживаем работу сайта, Яндекс.Карт и 2ГИС
</li>
<li class="flex items-start gap-3 text-sm font-medium text-primary">
<span class="material-symbols-outlined text-green-500 text-[20px] font-bold">check_circle</span> Пишем грамотные ответы на отзывы клиентов
</li>
</ul>
</div>
<div class="flex justify-between items-end border-t border-outline-variant pt-6 mt-6">
<div class="text-sm font-bold text-on-surface-variant uppercase tracking-wider">Ведение площадок</div>
<div class="text-2xl font-bold text-primary">5 000 ₽ <span class="text-base font-normal text-on-surface-variant">/ мес</span></div>
</div>
</div>
<!-- Тариф 2: Реклама -->
<div class="bg-primary text-white p-8 md:p-10 rounded-bento border border-gray-800 flex flex-col justify-between relative overflow-hidden shadow-xl hover:-translate-y-1 transition-transform">
<div class="absolute -top-20 -right-20 w-64 h-64 bg-accent opacity-20 blur-[80px] rounded-full pointer-events-none"></div>
<div class="mb-6 relative z-10">
<div class="inline-block bg-rose-500/20 text-rose-300 font-bold px-3 py-1 rounded-full text-xs mb-4 border border-rose-500/30">Максимальный результат</div>
<h3 class="text-2xl font-bold text-white mb-4">Настройка рекламы</h3>
<p class="text-base text-gray-300 mb-6 leading-relaxed">Когда нужно срочно забить свободные окна мастеров работой. Мы запускаем и ведем платную рекламу.</p>
<ul class="space-y-3">
<li class="flex items-start gap-3 text-sm font-medium text-white">
<span class="material-symbols-outlined text-green-400 text-[20px] font-bold">check_circle</span> <strong class="text-rose-400">Уже включено ведение всех площадок (тариф за 5к)</strong>
</li>
<li class="flex items-start gap-3 text-sm font-medium text-white">
<span class="material-symbols-outlined text-green-400 text-[20px] font-bold">check_circle</span> Запуск платной рекламы в Яндексе и ВКонтакте
</li>
<li class="flex items-start gap-3 text-sm font-medium text-white">
<span class="material-symbols-outlined text-green-400 text-[20px] font-bold">check_circle</span> Привлечение клиентов, которые живут рядом с салоном
</li>
</ul>
</div>
<div class="flex justify-between items-end border-t border-gray-700 pt-6 mt-6 relative z-10">
<div class="text-sm font-bold text-gray-400 uppercase tracking-wider">Комплексный маркетинг</div>
<div class="text-2xl font-bold text-white">15 000 ₽ <span class="text-base font-normal text-gray-400">+ budget</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="w-full py-12 border-t border-outline-variant bg-white mt-10">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center px-container-padding-mobile md:px-container-padding-desktop gap-6">
<div class="font-bold text-lg text-primary flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-gradient-accent"></span>
ПАВЕЛ | СТУДИИ МАНИКЮРА
</div>
<div class="text-sm text-on-surface-variant font-medium">© 2024 Развитие nail-бизнеса. Все права защищены.</div>
<div class="flex gap-8">
<a class="text-sm font-bold text-on-surface-variant hover:text-accent transition-colors" href="#">VKontakte</a>
<a class="text-sm font-bold text-on-surface-variant hover:text-accent transition-colors" href="#">WhatsApp</a>
</div>
</div>
</footer>
<!-- Floating WhatsApp Bar -->
<div id="contact" class="fixed bottom-10 right-container-padding-mobile md:right-container-padding-desktop z-50">
<a href="https://wa.me/79990000000" target="_blank" class="flex items-center gap-3 bg-white border-2 border-rose-100 px-6 py-4 rounded-full hover:border-accent transition-all duration-300 shadow-2xl hover:-translate-y-1 group">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center group-hover:bg-green-200 transition-colors">
<span class="material-symbols-outlined text-[#25D366]" style="font-variation-settings: 'FILL' 1; font-size: 24px;">chat</span>
</div>
<span class="font-bold text-primary">Бесплатная консультация</span>
</a>
</div>
<!-- Модальное окно-лайтбокс для просмотра изображений с каруселью -->
<div id="lightbox" class="fixed inset-0 z-[70] hidden">
<div class="absolute inset-0 bg-black/95 backdrop-blur-sm" onclick="closeLightbox()"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<!-- Кнопка закрытия -->
<button onclick="closeLightbox()" class="absolute top-4 right-4 text-white hover:text-accent transition-colors z-10">
<span class="material-symbols-outlined text-5xl">close</span>
</button>
<!-- Кнопка влево -->
<button onclick="prevImage()" class="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-accent transition-colors z-10">
<span class="material-symbols-outlined text-6xl">chevron_left</span>
</button>
<!-- Изображение -->
<div class="relative max-w-6xl max-h-[85vh]">
<img id="lightbox-img" src="" alt="" class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl">
<p id="lightbox-caption" class="text-white text-center mt-4 text-xl font-medium"></p>
</div>
<!-- Кнопка вправо -->
<button onclick="nextImage()" class="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-accent transition-colors z-10">
<span class="material-symbols-outlined text-6xl">chevron_right</span>
</button>
<!-- Индикаторы -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3">
<button onclick="goToImage(0)" class="lightbox-dot w-3 h-3 rounded-full bg-white/40 hover:bg-white transition-colors"></button>
<button onclick="goToImage(1)" class="lightbox-dot w-3 h-3 rounded-full bg-white/40 hover:bg-white transition-colors"></button>
<button onclick="goToImage(2)" class="lightbox-dot w-3 h-3 rounded-full bg-white/40 hover:bg-white transition-colors"></button>
<button onclick="goToImage(3)" class="lightbox-dot w-3 h-3 rounded-full bg-white/40 hover:bg-white transition-colors"></button>
</div>
</div>
</div>
<script>
const lightboxImages = [
{ src: 'images/sertificat.webp', caption: 'Подарочные сертификаты — стильный дизайн, который хочется дарить' },
{ src: 'images/visitki.webp', caption: 'Визитки — запоминающийся дизайн с контактами студии' },
{ src: 'images/viveska.webp', caption: 'Яркая вывеска — заметна издалека и привлекает клиентов' },
{ src: 'images/fasad.webp', caption: 'Оформление фасада — премиальный внешний вид студии' }
];
let currentImageIndex = 0;
function openLightbox(index) {
currentImageIndex = index;
updateLightboxImage();
document.getElementById('lightbox').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
document.getElementById('lightbox').classList.add('hidden');
document.body.style.overflow = '';
}
function updateLightboxImage() {
const img = document.getElementById('lightbox-img');
const caption = document.getElementById('lightbox-caption');
const dots = document.querySelectorAll('.lightbox-dot');
img.src = lightboxImages[currentImageIndex].src;
img.alt = lightboxImages[currentImageIndex].caption;
caption.textContent = lightboxImages[currentImageIndex].caption;
// Обновляем активный индикатор
dots.forEach((dot, idx) => {
if (idx === currentImageIndex) {
dot.classList.remove('bg-white/40');
dot.classList.add('bg-white');
} else {
dot.classList.add('bg-white/40');
dot.classList.remove('bg-white');
}
});
}
function nextImage() {
currentImageIndex = (currentImageIndex + 1) % lightboxImages.length;
updateLightboxImage();
}
function prevImage() {
currentImageIndex = (currentImageIndex - 1 + lightboxImages.length) % lightboxImages.length;
updateLightboxImage();
}
function goToImage(index) {
currentImageIndex = index;
updateLightboxImage();
}
// Закрытие по ESC
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeLightbox();
} else if (e.key === 'ArrowRight') {
nextImage();
} else if (e.key === 'ArrowLeft') {
prevImage();
}
});
</script>
</body>
</html>