vapeshop-solution/index.html at main · NePavel221/vapeshop-solution · GitHub

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
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Telegram Mini App для вейпшопа — Павел</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
    <!-- Hero -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <p class="hero-greeting">Привет! 👋</p>
                <h1>Я сделаю вашему магазину<br>приложение в Telegram</h1>
                <p class="hero-subtitle">Меня зовут Паша. Я разработчик, и у меня есть готовое решение для вейпшопов —
                    Telegram Mini App с каталогом, картой точек и бонусной программой.</p>
                <p class="hero-highlight">Вашим клиентам не нужно ничего скачивать — один клик в Telegram, и приложение
                    открывается.</p>
                <div class="hero-buttons">
                    <a href="#demo" class="btn btn-primary">Посмотреть демо</a>
                    <a href="#price" class="btn btn-secondary">Сколько стоит</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="phone-wrapper">
                    <button class="carousel-arrow arrow-left" id="arrowLeft">‹</button>
                    <div class="phone-mockup">
                        <div class="phone-screen">
                            <div class="carousel" id="heroCarousel">
                                <div class="carousel-track">
                                    <img src="img/1-optimized.jpg" alt="Главный экран">
                                    <img src="img/2-optimized.jpg" alt="Каталог">
                                    <img src="img/3-optimized.jpg" alt="Категории">
                                    <img src="img/4-optimized.jpg" alt="Товар">
                                    <img src="img/5-optimized.jpg" alt="Корзина">
                                    <img src="img/6-optimized.jpg" alt="Оформление">
                                    <img src="img/7-optimized.jpg" alt="Точки">
                                    <img src="img/8-optimized.jpg" alt="Карта">
                                    <img src="img/9-optimized.jpg" alt="Профиль">
                                    <img src="img/10-optimized.jpg" alt="Бонусы">
                                    <img src="img/11-optimized.jpg" alt="История">
                                    <img src="img/12-optimized.jpg" alt="Админка">
                                </div>
                            </div>
                            <div class="carousel-dots" id="carouselDots"></div>
                        </div>
                    </div>
                    <button class="carousel-arrow arrow-right" id="arrowRight">›</button>
                </div>
                <p class="carousel-counter"><span id="currentSlide">1</span> / 12</p>
            </div>
        </div>
    </section>

    <!-- Problem -->
    <section class="problem">
        <div class="container">
            <h2>Знакомые ситуации?</h2>
            <div class="problem-grid">
                <div class="problem-card">
                    <span class="problem-icon">💬</span>
                    <p><strong>"Есть ли у вас...?"</strong><br>Клиенты пишут в чат узнать наличие. Вы тратите время на
                        одни и те же ответы.</p>
                </div>
                <div class="problem-card">
                    <span class="problem-icon">📍</span>
                    <p><strong>"Где вы находитесь?"</strong><br>Каждый раз объясняете адрес, скидываете геолокацию.</p>
                </div>
                <div class="problem-card">
                    <span class="problem-icon">😤</span>
                    <p><strong>"Приехал, а товара нет"</strong><br>Клиент расстроен, вы теряете продажу и репутацию.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Solution -->
    <section class="solution">
        <div class="container">
            <h2>Решение: приложение внутри Telegram</h2>
            <p class="solution-intro">Клиенты сами смотрят каталог, видят цены и наличие, находят ваш магазин на карте.
                Вы не тратите время на рутину — только продаёте.</p>

            <div class="benefits-grid">
                <div class="benefit-card">
                    <span class="benefit-icon">📱</span>
                    <h3>Не нужно скачивать</h3>
                    <p>Один клик в Telegram — приложение открывается. Никаких App Store, регистраций, ожидания загрузки.
                    </p>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">📦</span>
                    <h3>Каталог с бронированием</h3>
                    <p>Все товары с фото, ценами и наличием. Клиент выбирает, бронирует на точку — приходит и забирает.
                        Никаких "закончилось пока ехал".</p>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">📍</span>
                    <h3>Карта ваших точек</h3>
                    <p>Клиент видит все магазины, адреса, часы работы и наличие товаров на каждой точке.</p>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">🎁</span>
                    <h3>Бонусная программа</h3>
                    <p>Клиенты копят баллы и возвращаются. Можно подключить вашу существующую систему (UDS).</p>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">⚙️</span>
                    <h3>Админка для вас</h3>
                    <p>Сами добавляете товары, меняете цены. Без программиста, без головной боли.</p>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">🎨</span>
                    <h3>Ваш фирменный стиль</h3>
                    <p>Адаптирую дизайн под ваш брендбук — цвета, логотип, оформление.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Demo -->
    <section class="demo" id="demo">
        <div class="container">
            <h2>Попробуйте сами</h2>
            <p>Это не картинки — это работающее приложение. Откройте бота, потыкайте каталог, посмотрите как всё
                устроено.</p>
            <a href="https://t.me/TestCity_AppBot" target="_blank" class="btn btn-primary btn-large">
                Открыть демо-бота →
            </a>
            <p class="demo-note">Там сейчас демо-данные. У вас будет ваш ассортимент, ваши точки, ваш дизайн.</p>
        </div>
    </section>

    <!-- How it works -->
    <section class="how-it-works">
        <div class="container">
            <h2>Как это будет работать</h2>
            <div class="steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Вы даёте мне данные</h3>
                    <p>Ассортимент (можно выгрузку из МойСклад), адреса точек, логотип и цвета бренда.</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Я делаю приложение</h3>
                    <p>Адаптирую дизайн, загружаю ваши товары, настраиваю всё под вас. Срок — 3 дня.</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>Вы проверяете демо</h3>
                    <p>Показываю вам готовое приложение. Вносим правки если нужно.</p>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <h3>Публикуем на вашего бота</h3>
                    <p>Создаю бота под вашим именем или подключаю к существующему. Готово!</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Price -->
    <section class="price" id="price">
        <div class="container">
            <h2>Сколько это стоит</h2>
            <p class="price-intro">Прозрачные цены, никаких скрытых платежей.</p>

            <div class="price-cards">
                <div class="price-card main">
                    <div class="price-badge">Основной пакет</div>
                    <div class="price-amount">15 000 ₽</div>
                    <div class="price-includes">
                        <p>✓ Приложение с каталогом товаров</p>
                        <p>✓ Карта ваших точек</p>
                        <p>✓ Бонусная программа</p>
                        <p>✓ Админка для управления</p>
                        <p>✓ Адаптация дизайна под ваш бренд</p>
                        <p>✓ Загрузка вашего ассортимента</p>
                        <p>✓ Публикация на вашего бота</p>
                    </div>
                    <div class="price-time">⏱ Срок: 3 рабочих дня</div>
                </div>

                <div class="price-card">
                    <div class="price-badge">Дополнительно</div>
                    <div class="addon-list">
                        <div class="addon-item">
                            <div>
                                <strong>Интеграция с МойСклад</strong>
                                <p>Автоматическая синхронизация товаров и остатков</p>
                            </div>
                            <span class="addon-price">+5 000 ₽</span>
                        </div>
                        <div class="addon-item">
                            <div>
                                <strong>Интеграция с UDS</strong>
                                <p>Подключение вашей бонусной программы</p>
                            </div>
                            <span class="addon-price">+5 000 ₽</span>
                        </div>
                    </div>
                </div>

                <div class="price-card">
                    <div class="price-badge">Хостинг</div>
                    <div class="price-amount small">~600 ₽/мес</div>
                    <p>Приложению нужен сервер для работы. Я настрою вам личный кабинет на хостинге — вам останется
                        только пополнять баланс раз в месяц.</p>
                    <p class="hosting-note">Это как оплата интернета — просто и понятно.</p>
                </div>
            </div>

            <div class="payment-info">
                <h3>💳 Как оплачивать</h3>
                <p><strong>Предоплата 50%</strong> — начинаю работу<br>
                    <strong>Остаток 50%</strong> — после того как вы проверили демо и всё устраивает
                </p>
            </div>
        </div>
    </section>

    <!-- About -->
    <section class="about">
        <div class="container">
            <h2>Кто я такой</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Меня зовут <strong>Павел</strong>, я разработчик из Перми.</p>
                    <p>Я сделал это приложение как готовое решение для вейпшопов. Основной код уже написан и
                        протестирован — поэтому могу адаптировать его под ваш магазин быстро и недорого.</p>
                    <p>Это не шаблон из конструктора — это полноценное приложение с бэкендом, базой данных и админкой.
                    </p>
                    <a href="https://nepavel221.github.io/PavelL/" target="_blank" class="portfolio-link">
                        Посмотреть портфолио →
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="faq">
        <div class="container">
            <h2>Частые вопросы</h2>
            <div class="faq-list">
                <div class="faq-item">
                    <h3>А если мне не понравится результат?</h3>
                    <p>Вы платите вторую половину только после того, как проверили демо. Если что-то не так — вносим
                        правки до тех пор, пока вас всё не устроит.</p>
                </div>
                <div class="faq-item">
                    <h3>Что нужно от меня?</h3>
                    <p>Список товаров (можно Excel или выгрузку из МойСклад), адреса точек, логотип и пожелания по
                        цветам. Всё остальное сделаю я.</p>
                </div>
                <div class="faq-item">
                    <h3>Смогу ли я сам управлять товарами?</h3>
                    <p>Да, для этого есть админка. Добавлять товары, менять цены, редактировать описания — всё это вы
                        делаете сами, без программиста.</p>
                </div>
                <div class="faq-item">
                    <h3>Можно ли добавить другой функционал?</h3>
                    <p>Да, обсудим ваши пожелания. Если нужна какая-то особенная функция — реализую. Моих знаний
                        достаточно для любых хотелок.</p>
                </div>
                <div class="faq-item">
                    <h3>А если что-то сломается?</h3>
                    <p>Первый месяц после запуска — бесплатная поддержка. Если что-то пойдёт не так, исправлю.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="cta">
        <div class="container">
            <h2>Готовы обсудить?</h2>
            <p>Напишите мне в Telegram — отвечу на вопросы, покажу демо, обсудим детали вашего проекта.</p>
            <a href="https://t.me/nepavel" target="_blank" class="btn btn-primary btn-large">
                Написать в Telegram →
            </a>
            <p class="cta-note">Обычно отвечаю в течение пары часов</p>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>© 2025 Павел — разработка Telegram Mini App</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>

</html>