Hugging Face's logo

Spaces:
timoon811
/
sitelandingcourse
Running

App Files Community
timoon811 commited on
Commit
075fa30
·
verified ·
1 Parent(s): 97d65e9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +596 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sitelandingcourse
3
- emoji: 🐢
4
- colorFrom: yellow
5
  colorTo: red
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: sitelandingcourse
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: red
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,596 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Лендинг Конструктор - Создавай за 5 минут</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ overflow-x: hidden;
17
+ }
18
+ .hero-gradient {
19
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
20
+ }
21
+ .card-hover {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .card-hover:hover {
25
+ transform: translateY(-10px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+ .feature-icon {
29
+ transition: all 0.3s ease;
30
+ }
31
+ .feature-icon:hover {
32
+ transform: scale(1.1);
33
+ }
34
+ .dashboard-container {
35
+ perspective: 1000px;
36
+ }
37
+ .dashboard {
38
+ transform-style: preserve-3d;
39
+ animation: float 6s ease-in-out infinite;
40
+ }
41
+ @keyframes float {
42
+ 0% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
43
+ 50% { transform: translateY(-20px) rotateX(5deg) rotateY(5deg); }
44
+ 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
45
+ }
46
+ .checkmark {
47
+ display: inline-block;
48
+ width: 22px;
49
+ height: 22px;
50
+ background: #4ade80;
51
+ border-radius: 50%;
52
+ text-align: center;
53
+ line-height: 22px;
54
+ color: white;
55
+ margin-right: 10px;
56
+ }
57
+ .pulse {
58
+ animation: pulse 2s infinite;
59
+ }
60
+ @keyframes pulse {
61
+ 0% { transform: scale(1); }
62
+ 50% { transform: scale(1.05); }
63
+ 100% { transform: scale(1); }
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-50">
68
+ <!-- Hero Section -->
69
+ <div id="hero" class="hero-gradient min-h-screen relative overflow-hidden">
70
+ <div class="absolute inset-0 z-0" id="vanta-bg"></div>
71
+ <div class="container mx-auto px-6 py-20 relative z-10">
72
+ <div class="flex flex-col lg:flex-row items-center justify-between">
73
+ <div class="lg:w-1/2 mb-16 lg:mb-0">
74
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
75
+ Создавай лендинги за 5 минут <br>
76
+ <span class="text-yellow-300">без кода, дизайнеров и заморочек</span>
77
+ </h1>
78
+ <p class="text-xl text-gray-100 mb-8">
79
+ Курс, который научит тебя запускать конверсионные страницы через ИИ — уже сегодня
80
+ </p>
81
+ <div class="flex flex-col sm:flex-row gap-4">
82
+ <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg pulse">
83
+ <i class="fas fa-rocket mr-2"></i> Получить доступ к курсу
84
+ </button>
85
+ <button class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105">
86
+ <i class="fas fa-play-circle mr-2"></i> Смотреть демо
87
+ </button>
88
+ </div>
89
+ <div class="mt-12 flex items-center">
90
+ <div class="flex -space-x-2">
91
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
92
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
93
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/33.jpg" alt="">
94
+ </div>
95
+ <div class="ml-4 text-white">
96
+ <p class="font-semibold">1,200+ студентов</p>
97
+ <p class="text-sm opacity-80">уже создают лендинги с нами</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ <div class="lg:w-1/2 dashboard-container">
102
+ <div class="dashboard bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-4 shadow-2xl border border-white border-opacity-20">
103
+ <div class="relative">
104
+ <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-75"></div>
105
+ <div class="relative bg-gray-900 rounded-lg p-4 h-96 flex items-center justify-center">
106
+ <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_2glqweqs.json" background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay></lottie-player>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4 grid grid-cols-3 gap-2">
110
+ <div class="bg-indigo-500 bg-opacity-20 rounded-lg p-2 text-center text-white">
111
+ <i class="fas fa-cube text-lg"></i>
112
+ <p class="text-xs mt-1">3D Элементы</p>
113
+ </div>
114
+ <div class="bg-pink-500 bg-opacity-20 rounded-lg p-2 text-center text-white">
115
+ <i class="fas fa-bolt text-lg"></i>
116
+ <p class="text-xs mt-1">Анимации</p>
117
+ </div>
118
+ <div class="bg-yellow-500 bg-opacity-20 rounded-lg p-2 text-center text-white">
119
+ <i class="fas fa-robot text-lg"></i>
120
+ <p class="text-xs mt-1">AI Генерация</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="absolute bottom-0 left-0 right-0">
128
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
129
+ <path fill="#ffffff" fill-opacity="1" d="M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,165.3C672,171,768,213,864,208C960,203,1056,149,1152,133.3C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
130
+ </svg>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Course Modules -->
135
+ <div class="py-20 bg-white">
136
+ <div class="container mx-auto px-6">
137
+ <div class="text-center mb-16">
138
+ <span class="inline-block px-4 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-semibold mb-3">
139
+ <i class="fas fa-gem mr-1"></i> Что внутри курса
140
+ </span>
141
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">6 мощных модулей + бонусы</h2>
142
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
143
+ <span class="bg-yellow-100 px-2 py-1 rounded">Курс = 90% практики, 10% теории</span>
144
+ </p>
145
+ </div>
146
+
147
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
148
+ <!-- Module 1 -->
149
+ <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">
150
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6 feature-icon">
151
+ <i class="fas fa-magic text-purple-600 text-2xl"></i>
152
+ </div>
153
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Модуль 1: Основы AI-дизайна</h3>
154
+ <p class="text-gray-600 mb-4">Научись создавать визуально привлекательные лендинги без навыков дизайна.</p>
155
+ <ul class="space-y-2">
156
+ <li class="flex items-center">
157
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
158
+ <span class="text-gray-700">Принципы конверсионного дизайна</span>
159
+ </li>
160
+ <li class="flex items-center">
161
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
162
+ <span class="text-gray-700">Инструменты AI для автоматизации</span>
163
+ </li>
164
+ <li class="flex items-center">
165
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
166
+ <span class="text-gray-700">Готовые шаблоны и структуры</span>
167
+ </li>
168
+ </ul>
169
+ </div>
170
+
171
+ <!-- Module 2 -->
172
+ <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">
173
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6 feature-icon">
174
+ <i class="fas fa-code text-blue-600 text-2xl"></i>
175
+ </div>
176
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Модуль 2: Верстка без кода</h3>
177
+ <p class="text-gray-600 mb-4">Собирай профессиональные лендинги без знания HTML/CSS.</p>
178
+ <ul class="space-y-2">
179
+ <li class="flex items-center">
180
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
181
+ <span class="text-gray-700">Конструкторы и их возможности</span>
182
+ </li>
183
+ <li class="flex items-center">
184
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
185
+ <span class="text-gray-700">Адаптация под все устройства</span>
186
+ </li>
187
+ <li class="flex items-center">
188
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
189
+ <span class="text-gray-700">Интеграция с сервисами</span>
190
+ </li>
191
+ </ul>
192
+ </div>
193
+
194
+ <!-- Module 3 -->
195
+ <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">
196
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6 feature-icon">
197
+ <i class="fas fa-chart-line text-green-600 text-2xl"></i>
198
+ </div>
199
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Модуль 3: Конверсионные триггеры</h3>
200
+ <p class="text-gray-600 mb-4">Увеличивай конверсию с помощью психологических приемов.</p>
201
+ <ul class="space-y-2">
202
+ <li class="flex items-center">
203
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
204
+ <span class="text-gray-700">Элементы доверия и срочности</span>
205
+ </li>
206
+ <li class="flex items-center">
207
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
208
+ <span class="text-gray-700">Оптимальные формы захвата</span>
209
+ </li>
210
+ <li class="flex items-center">
211
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
212
+ <span class="text-gray-700">A/B тестирование элементов</span>
213
+ </li>
214
+ </ul>
215
+ </div>
216
+
217
+ <!-- Module 4 -->
218
+ <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">
219
+ <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mb-6 feature-icon">
220
+ <i class="fas fa-robot text-yellow-600 text-2xl"></i>
221
+ </div>
222
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Модуль 4: AI-копирайтинг</h3>
223
+ <p class="text-gray-600 mb-4">Генерируй продающие тексты за секунды с помощью ИИ.</p>
224
+ <ul class="space-y-2">
225
+ <li class="flex items-center">
226
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
227
+ <span class="text-gray-700">Настройка тона и стиля</span>
228
+ </li>
229
+ <li class="flex items-center">
230
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
231
+ <span class="text-gray-700">SEO-оптимизация текстов</span>
232
+ </li>
233
+ <li class="flex items-center">
234
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
235
+ <span class="text-gray-700">Персонализация под ЦА</span>
236
+ </li>
237
+ </ul>
238
+ </div>
239
+
240
+ <!-- Module 5 -->
241
+ <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">
242
+ <div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center mb-6 feature-icon">
243
+ <i class="fas fa-bolt text-red-600 text-2xl"></i>
244
+ </div>
245
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Модуль 5: Быстрое масштабирование</h3>
246
+ <p class="text-gray-600 mb-4">Создавай десятки вариаций лендингов для тестов.</p>
247
+ <ul class="space-y-2">
248
+ <li class="flex items-center">
249
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
250
+ <span class="text-gray-700">Автоматизация процессов</span>
251
+ </li>
252
+ <li class="flex items-center">
253
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
254
+ <span class="text-gray-700">Шаблонизация элементов</span>
255
+ </li>
256
+ <li class="flex items-center">
257
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
258
+ <span class="text-gray-700">Анализ эффективности</span>
259
+ </li>
260
+ </ul>
261
+ </div>
262
+
263
+ <!-- Module 6 -->
264
+ <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">
265
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 feature-icon">
266
+ <i class="fas fa-trophy text-indigo-600 text-2xl"></i>
267
+ </div>
268
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Модуль 6: Бонусный контент</h3>
269
+ <p class="text-gray-600 mb-4">Эксклюзивные материалы для максимальных результатов.</p>
270
+ <ul class="space-y-2">
271
+ <li class="flex items-center">
272
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
273
+ <span class="text-gray-700">Готовые шаблоны лендингов</span>
274
+ </li>
275
+ <li class="flex items-center">
276
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
277
+ <span class="text-gray-700">Чек-листы и гайды</span>
278
+ </li>
279
+ <li class="flex items-center">
280
+ <span class="checkmark"><i class="fas fa-check text-xs"></i></span>
281
+ <span class="text-gray-700">Закрытое комьюнити</span>
282
+ </li>
283
+ </ul>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- For Whom Section -->
290
+ <div class="py-20 bg-gray-50">
291
+ <div class="container mx-auto px-6">
292
+ <div class="text-center mb-16">
293
+ <span class="inline-block px-4 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-semibold mb-3">
294
+ <i class="fas fa-users mr-1"></i> Аудитория
295
+ </span>
296
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Для кого этот курс?</h2>
297
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
298
+ Если ты относишься к одной из этих категорий — курс создан специально для тебя
299
+ </p>
300
+ </div>
301
+
302
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
303
+ <!-- Арбитражники -->
304
+ <div class="bg-white rounded-xl p-8 text-center card-hover shadow-sm">
305
+ <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon">
306
+ <i class="fas fa-funnel-dollar text-purple-600 text-3xl"></i>
307
+ </div>
308
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Арбитражники</h3>
309
+ <p class="text-gray-600">
310
+ Кто хочет быстро тестировать ниши без затрат на дизайнеров и верстальщиков
311
+ </p>
312
+ <div class="mt-4 pt-4 border-t border-gray-100">
313
+ <span class="inline-block px-3 py-1 bg-purple-50 text-purple-700 rounded-full text-xs font-medium">
314
+ <i class="fas fa-bolt mr-1"></i> Быстрые тесты
315
+ </span>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Эксперты и продюсеры -->
320
+ <div class="bg-white rounded-xl p-8 text-center card-hover shadow-sm">
321
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon">
322
+ <i class="fas fa-chalkboard-teacher text-blue-600 text-3xl"></i>
323
+ </div>
324
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Эксперты и продюсеры</h3>
325
+ <p class="text-gray-600">
326
+ Кто запускает продукты и нуждается в быстрых лендингах для продаж
327
+ </p>
328
+ <div class="mt-4 pt-4 border-t border-gray-100">
329
+ <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-medium">
330
+ <i class="fas fa-rocket mr-1"></i> Быстрый запуск
331
+ </span>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Владельцы бизнеса -->
336
+ <div class="bg-white rounded-xl p-8 text-center card-hover shadow-sm">
337
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon">
338
+ <i class="fas fa-store text-green-600 text-3xl"></i>
339
+ </div>
340
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Владельцы бизнеса</h3>
341
+ <p class="text-gray-600">
342
+ Кто хочет экономить на разработке и контролировать процесс создания страниц
343
+ </p>
344
+ <div class="mt-4 pt-4 border-t border-gray-100">
345
+ <span class="inline-block px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium">
346
+ <i class="fas fa-piggy-bank mr-1"></i> Экономия
347
+ </span>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Маркетологи -->
352
+ <div class="bg-white rounded-xl p-8 text-center card-hover shadow-sm">
353
+ <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon">
354
+ <i class="fas fa-bullhorn text-yellow-600 text-3xl"></i>
355
+ </div>
356
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Маркетологи</h3>
357
+ <p class="text-gray-600">
358
+ Кто хочет увеличить конверсию и масштабировать рекламные кампании
359
+ </p>
360
+ <div class="mt-4 pt-4 border-t border-gray-100">
361
+ <span class="inline-block px-3 py-1 bg-yellow-50 text-yellow-700 rounded-full text-xs font-medium">
362
+ <i class="fas fa-chart-pie mr-1"></i> Конверсия
363
+ </span>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Skills Section -->
371
+ <div class="py-20 bg-white">
372
+ <div class="container mx-auto px-6">
373
+ <div class="flex flex-col lg:flex-row items-center">
374
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
375
+ <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_5tkzkblw.json" background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay></lottie-player>
376
+ </div>
377
+ <div class="lg:w-1/2 lg:pl-12">
378
+ <span class="inline-block px-4 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-semibold mb-3">
379
+ <i class="fas fa-star mr-1"></i> Результаты
380
+ </span>
381
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Что ты научишься делать</h2>
382
+
383
+ <div class="space-y-6">
384
+ <div class="flex">
385
+ <div class="flex-shrink-0">
386
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
387
+ <i class="fas fa-check"></i>
388
+ </div>
389
+ </div>
390
+ <div class="ml-4">
391
+ <h3 class="text-lg font-medium text-gray-900">Делать лендинги под любой бизнес или продукт</h3>
392
+ <p class="mt-1 text-gray-600">
393
+ От инфопродуктов до физических товаров — универсальные подходы для всех ниш.
394
+ </p>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="flex">
399
+ <div class="flex-shrink-0">
400
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
401
+ <i class="fas fa-layer-group"></i>
402
+ </div>
403
+ </div>
404
+ <div class="ml-4">
405
+ <h3 class="text-lg font-medium text-gray-900">Масштабировать тесты на десятки страниц</h3>
406
+ <p class="mt-1 text-gray-600">
407
+ Автоматизация создания вариаций для быстрого поиска лучшего варианта.
408
+ </p>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="flex">
413
+ <div class="flex-shrink-0">
414
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
415
+ <i class="fas fa-user-tie"></i>
416
+ </div>
417
+ </div>
418
+ <div class="ml-4">
419
+ <h3 class="text-lg font-medium text-gray-900">Работать без верстальщиков</h3>
420
+ <p class="mt-1 text-gray-600">
421
+ Полная независимость от разработчиков — создавай и правь страницы сам.
422
+ </p>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="flex">
427
+ <div class="flex-shrink-0">
428
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
429
+ <i class="fas fa-robot"></i>
430
+ </div>
431
+ </div>
432
+ <div class="ml-4">
433
+ <h3 class="text-lg font-medium text-gray-900">Использовать AI как мощный маркетинговый инструмент</h3>
434
+ <p class="mt-1 text-gray-600">
435
+ Генерация текстов, дизайна и даже кода — автоматизируй рутину.
436
+ </p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="mt-8">
442
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
443
+ <i class="fas fa-gem mr-2"></i> Начать обучение сейчас
444
+ </button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- CTA Section -->
452
+ <div class="py-20 bg-gradient-to-r from-purple-900 to-indigo-900">
453
+ <div class="container mx-auto px-6 text-center">
454
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Готов создавать лендинги за 5 минут?</h2>
455
+ <p class="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">
456
+ Начни прямо сейчас и получи бонусные материалы к курсу!
457
+ </p>
458
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
459
+ <button class="bg-white hover:bg-gray-100 text-purple-900 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
460
+ <i class="fas fa-rocket mr-2"></i> Получить доступ
461
+ </button>
462
+ <button class="bg-transparent hover:bg-white hover:bg-opacity-10 text-white font-bold py-4 px-8 rounded-full text-lg border-2 border-white transition-all duration-300 transform hover:scale-105">
463
+ <i class="fas fa-question-circle mr-2"></i> Задать вопрос
464
+ </button>
465
+ </div>
466
+ <div class="mt-8 flex items-center justify-center">
467
+ <div class="flex items-center text-white">
468
+ <i class="fas fa-shield-alt text-xl mr-2"></i>
469
+ <span>Гарантия возврата 14 дней</span>
470
+ </div>
471
+ <div class="mx-4 h-6 w-px bg-white bg-opacity-30"></div>
472
+ <div class="flex items-center text-white">
473
+ <i class="fas fa-lock text-xl mr-2"></i>
474
+ <span>Безопасная оплата</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- Footer -->
481
+ <footer class="bg-gray-900 text-white py-12">
482
+ <div class="container mx-auto px-6">
483
+ <div class="flex flex-col md:flex-row justify-between">
484
+ <div class="mb-8 md:mb-0">
485
+ <div class="flex items-center mb-4">
486
+ <i class="fas fa-cube text-2xl text-purple-400 mr-2"></i>
487
+ <span class="text-xl font-bold">AI Landing Pro</span>
488
+ </div>
489
+ <p class="text-gray-400 max-w-xs">
490
+ Создавай профессиональные лендинги без навыков дизайна и программирования.
491
+ </p>
492
+ </div>
493
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
494
+ <div>
495
+ <h3 class="text-lg font-semibold mb-4">Курс</h3>
496
+ <ul class="space-y-2">
497
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Программа</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Отзывы</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
500
+ </ul>
501
+ </div>
502
+ <div>
503
+ <h3 class="text-lg font-semibold mb-4">Поддержка</h3>
504
+ <ul class="space-y-2">
505
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Контакты</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Помощь</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Сообщество</a></li>
508
+ </ul>
509
+ </div>
510
+ <div>
511
+ <h3 class="text-lg font-semibold mb-4">Соцсети</h3>
512
+ <div class="flex space-x-4">
513
+ <a href="#" class="text-gray-400 hover:text-white transition">
514
+ <i class="fab fa-telegram text-xl"></i>
515
+ </a>
516
+ <a href="#" class="text-gray-400 hover:text-white transition">
517
+ <i class="fab fa-instagram text-xl"></i>
518
+ </a>
519
+ <a href="#" class="text-gray-400 hover:text-white transition">
520
+ <i class="fab fa-youtube text-xl"></i>
521
+ </a>
522
+ <a href="#" class="text-gray-400 hover:text-white transition">
523
+ <i class="fab fa-vk text-xl"></i>
524
+ </a>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
530
+ <p class="text-gray-400 mb-4 md:mb-0">
531
+ © 2023 AI Landing Pro. Все права защищены.
532
+ </p>
533
+ <div class="flex space-x-6">
534
+ <a href="#" class="text-gray-400 hover:text-white transition">Политика конфиденциальности</a>
535
+ <a href="#" class="text-gray-400 hover:text-white transition">Условия использования</a>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </footer>
540
+
541
+ <script>
542
+ // Initialize Vanta.js background
543
+ VANTA.NET({
544
+ el: "#vanta-bg",
545
+ mouseControls: true,
546
+ touchControls: true,
547
+ gyroControls: false,
548
+ minHeight: 200.00,
549
+ minWidth: 200.00,
550
+ scale: 1.00,
551
+ scaleMobile: 1.00,
552
+ color: 0x7f6bff,
553
+ backgroundColor: 0x6e8efb,
554
+ points: 12.00,
555
+ maxDistance: 22.00,
556
+ spacing: 16.00
557
+ });
558
+
559
+ // Smooth scroll for anchor links
560
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
561
+ anchor.addEventListener('click', function (e) {
562
+ e.preventDefault();
563
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
564
+ behavior: 'smooth'
565
+ });
566
+ });
567
+ });
568
+
569
+ // Animation on scroll
570
+ function animateOnScroll() {
571
+ const elements = document.querySelectorAll('.card-hover, .feature-icon');
572
+
573
+ elements.forEach(element => {
574
+ const elementPosition = element.getBoundingClientRect().top;
575
+ const screenPosition = window.innerHeight / 1.3;
576
+
577
+ if (elementPosition < screenPosition) {
578
+ element.style.opacity = '1';
579
+ element.style.transform = 'translateY(0)';
580
+ }
581
+ });
582
+ }
583
+
584
+ // Set initial state
585
+ document.querySelectorAll('.card-hover, .feature-icon').forEach(el => {
586
+ el.style.opacity = '0';
587
+ el.style.transform = 'translateY(20px)';
588
+ el.style.transition = 'all 0.6s ease';
589
+ });
590
+
591
+ // Run on load and scroll
592
+ window.addEventListener('load', animateOnScroll);
593
+ window.addEventListener('scroll', animateOnScroll);
594
+ </script>
595
+ <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=timoon811/sitelandingcourse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
596
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Сделай максимально крутой лендинг - с анимацией, 3д элементами, добавь всякие крутые фишки (типа дашборд который показывает, как создается лендинг - анимированный), смайлика замени на крутые иконки! Сделай лендинг максимально цепляющим внимание - чтобы он продавал сам себя! И нравился каждому! 1. Hero-блок (первый экран) Цель: захватить внимание и дать мощное УТП • Заголовок: Создавай лендинги за 5 минут — без кода, дизайнеров и заморочек • Подзаголовок: Курс, который научит тебя запускать конверсионные страницы через ИИ — уже сегодня • Кнопка: 👉 Получить доступ к курсу • Фон: стильный, AI-дизайн в динамике (можно видеозаставка или слайдер) ⸻ 2. О курсе (что внутри) Цель: показать структуру и практическую пользу • Список модулей 1–6 + бонус • Краткий рассказ о каждом (иконки, галочки, мини-скрины) • Блок: 📚 Курс = 90% практики, 10% теории 3. Для кого этот курс? Цель: пользователь должен увидеть себя • Арбитражники • Эксперты и продюсеры • Владельцы малого бизнеса • Маркетологи и фрилансеры Визуально: 4 иконки или фото, под каждым — краткое описание боли/цели 4. Что ты научишься делать Цель: показать конечный результат • Делать лендинги под любой бизнес или продукт • Масштабировать тесты на десятки страниц • Работать без верстальщиков • Использовать AI как мощный маркетинговый инструмент Формат: блок с чек-листом и мини-кейсами