Hugging Face's logo

Spaces:
timoon811
/
landserial
Running

App Files Community
timoon811 commited on
Commit
33dce52
·
verified ·
1 Parent(s): 7e5fd54

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +354 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Landserial
3
- emoji: 🐨
4
- colorFrom: pink
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: landserial
3
+ emoji: 🐳
4
+ colorFrom: green
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,354 @@
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>Сериал о тебе | TMT</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #000;
15
+ color: white;
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ .episode {
20
+ min-height: 100vh;
21
+ position: relative;
22
+ overflow: hidden;
23
+ transition: all 0.8s ease;
24
+ }
25
+
26
+ .episode-bg {
27
+ position: absolute;
28
+ top: 0;
29
+ left: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ background-size: cover;
33
+ background-position: center;
34
+ opacity: 0.3;
35
+ z-index: -1;
36
+ }
37
+
38
+ .episode-title {
39
+ font-family: 'Montserrat', sans-serif;
40
+ font-weight: 900;
41
+ text-transform: uppercase;
42
+ letter-spacing: 5px;
43
+ text-shadow: 0 0 10px rgba(255,0,0,0.7);
44
+ }
45
+
46
+ .episode-number {
47
+ color: #e50914;
48
+ font-weight: 700;
49
+ }
50
+
51
+ .nav-dot {
52
+ width: 12px;
53
+ height: 12px;
54
+ border-radius: 50%;
55
+ background-color: #555;
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .nav-dot.active {
60
+ background-color: #e50914;
61
+ transform: scale(1.3);
62
+ }
63
+
64
+ .nav-dot:hover {
65
+ transform: scale(1.3);
66
+ }
67
+
68
+ .fade-in {
69
+ animation: fadeIn 1.5s ease-in-out;
70
+ }
71
+
72
+ @keyframes fadeIn {
73
+ from { opacity: 0; }
74
+ to { opacity: 1; }
75
+ }
76
+
77
+ .money-notification {
78
+ animation: moneyPulse 2s infinite;
79
+ }
80
+
81
+ @keyframes moneyPulse {
82
+ 0% { transform: scale(1); }
83
+ 50% { transform: scale(1.05); }
84
+ 100% { transform: scale(1); }
85
+ }
86
+
87
+ .grain-overlay {
88
+ position: absolute;
89
+ top: 0;
90
+ left: 0;
91
+ width: 100%;
92
+ height: 100%;
93
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjIZJq1Z1QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAADMUlEQVRo3u2aT0gUURzHP29nd11zV9d1M7XUQkqjQ5CHoA5BdQg6dOjQoUMQdOjQoUMQdOjQoUMQdOjQoUMQdAg6BEFQh6BDEGRlq7q6u+7Oe/3Q1XVnZ2ZnZt3dDzwwzPvz5/3e7/3em/dGSCnJkSNHjv8dYbqgEEJKKQ1XFEJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUL8Bp1Y9XjQYj7+AAAAAElFTkSuQmCC');
94
+ opacity: 0.05;
95
+ pointer-events: none;
96
+ z-index: 1;
97
+ }
98
+
99
+ .btn-red {
100
+ background-color: #e50914;
101
+ transition: all 0.3s ease;
102
+ }
103
+
104
+ .btn-red:hover {
105
+ background-color: #b00710;
106
+ transform: scale(1.05);
107
+ }
108
+
109
+ .typewriter {
110
+ overflow: hidden;
111
+ border-right: .15em solid #e50914;
112
+ white-space: nowrap;
113
+ margin: 0 auto;
114
+ letter-spacing: .15em;
115
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
116
+ }
117
+
118
+ @keyframes typing {
119
+ from { width: 0 }
120
+ to { width: 100% }
121
+ }
122
+
123
+ @keyframes blink-caret {
124
+ from, to { border-color: transparent }
125
+ 50% { border-color: #e50914 }
126
+ }
127
+
128
+ @media (max-width: 768px) {
129
+ .episode-content {
130
+ padding-top: 60px;
131
+ }
132
+
133
+ .episode-title {
134
+ font-size: 1.5rem;
135
+ }
136
+ }
137
+ </style>
138
+ </head>
139
+ <body>
140
+ <!-- Navigation Dots -->
141
+ <div class="fixed right-8 top-1/2 transform -translate-y-1/2 z-50 hidden md:flex flex-col space-y-4">
142
+ <a href="#episode1" class="nav-dot active" data-episode="1"></a>
143
+ <a href="#episode2" class="nav-dot" data-episode="2"></a>
144
+ <a href="#episode3" class="nav-dot" data-episode="3"></a>
145
+ <a href="#episode4" class="nav-dot" data-episode="4"></a>
146
+ <a href="#episode5" class="nav-dot" data-episode="5"></a>
147
+ </div>
148
+
149
+ <!-- Mobile Navigation -->
150
+ <div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-80 z-50 flex justify-around py-3 md:hidden">
151
+ <a href="#episode1" class="text-xs text-gray-400 hover:text-white transition">E1</a>
152
+ <a href="#episode2" class="text-xs text-gray-400 hover:text-white transition">E2</a>
153
+ <a href="#episode3" class="text-xs text-gray-400 hover:text-white transition">E3</a>
154
+ <a href="#episode4" class="text-xs text-gray-400 hover:text-white transition">E4</a>
155
+ <a href="#episode5" class="text-xs text-gray-400 hover:text-white transition">E5</a>
156
+ </div>
157
+
158
+ <!-- Episode 1 -->
159
+ <div id="episode1" class="episode">
160
+ <div class="grain-overlay"></div>
161
+ <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80');"></div>
162
+
163
+ <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10">
164
+ <div class="max-w-3xl mx-auto text-center fade-in">
165
+ <div class="episode-number mb-2">S01E01</div>
166
+ <h1 class="episode-title text-4xl md:text-6xl mb-8">Обычный день. Слишком обычный.</h1>
167
+
168
+ <p class="text-xl md:text-2xl mb-10 leading-relaxed">
169
+ Ты в очередной раз открыл будильник и подумал: «Сколько ещё?»<br>
170
+ Офис. Звонки. Пробки. Усталость.<br>
171
+ День сурка на repeat.
172
+ </p>
173
+
174
+ <div class="flex justify-center">
175
+ <a href="#episode2" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center">
176
+ Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i>
177
+ </a>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Episode 2 -->
184
+ <div id="episode2" class="episode">
185
+ <div class="grain-overlay"></div>
186
+ <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
187
+
188
+ <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10">
189
+ <div class="max-w-3xl mx-auto text-center">
190
+ <div class="episode-number mb-2">S01E02</div>
191
+ <h1 class="episode-title text-4xl md:text-6xl mb-8">Переломный момент</h1>
192
+
193
+ <p class="text-xl md:text-2xl mb-10 leading-relaxed">
194
+ Скроллинг ленты в перерыве между "важными" задачами.<br>
195
+ Внезапно — реклама курса. Инстинктивно нажал.<br>
196
+ Сначала думал — очередная хрень. Но почему-то остался.
197
+ </p>
198
+
199
+ <div class="flex justify-center space-x-4">
200
+ <a href="#episode1" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white">
201
+ <i class="fas fa-chevron-left mr-2"></i> Назад
202
+ </a>
203
+ <a href="#episode3" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center">
204
+ Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i>
205
+ </a>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Episode 3 -->
212
+ <div id="episode3" class="episode">
213
+ <div class="grain-overlay"></div>
214
+ <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80');"></div>
215
+
216
+ <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10">
217
+ <div class="max-w-3xl mx-auto text-center">
218
+ <div class="episode-number mb-2">S01E03</div>
219
+ <h1 class="episode-title text-4xl md:text-6xl mb-8">Старт. Без громких слов.</h1>
220
+
221
+ <p class="text-xl md:text-2xl mb-10 leading-relaxed">
222
+ Экран с уроками. Ноут. Telegram.<br>
223
+ Курс не давал мотивации. Он давал действия.<br>
224
+ Шаг за шагом. Без воды. Только конкретика.
225
+ </p>
226
+
227
+ <div class="flex justify-center space-x-4">
228
+ <a href="#episode2" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white">
229
+ <i class="fas fa-chevron-left mr-2"></i> Назад
230
+ </a>
231
+ <a href="#episode4" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center">
232
+ Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i>
233
+ </a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Episode 4 -->
240
+ <div id="episode4" class="episode">
241
+ <div class="grain-overlay"></div>
242
+ <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
243
+
244
+ <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10">
245
+ <div class="max-w-3xl mx-auto text-center">
246
+ <div class="episode-number mb-2">S01E04</div>
247
+ <h1 class="episode-title text-4xl md:text-6xl mb-8">Первая победа</h1>
248
+
249
+ <div class="money-notification bg-black bg-opacity-70 border border-green-500 rounded-lg p-4 max-w-md mx-auto mb-10">
250
+ <div class="flex items-center">
251
+ <div class="bg-green-500 rounded-full p-2 mr-3">
252
+ <i class="fas fa-dollar-sign text-white"></i>
253
+ </div>
254
+ <div class="text-left">
255
+ <div class="font-bold text-green-500">+870$ FTD 5/7</div>
256
+ <div class="text-sm text-gray-300">Только что • TMT CRM</div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <p class="text-xl md:text-2xl mb-10 leading-relaxed">
262
+ Ты не кричал. Просто посмотрел на экран и понял — сработало.<br>
263
+ Первый профит. Первая победа.<br>
264
+ Это было только начало.
265
+ </p>
266
+
267
+ <div class="flex justify-center space-x-4">
268
+ <a href="#episode3" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white">
269
+ <i class="fas fa-chevron-left mr-2"></i> Назад
270
+ </a>
271
+ <a href="#episode5" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center">
272
+ Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i>
273
+ </a>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Episode 5 -->
280
+ <div id="episode5" class="episode">
281
+ <div class="grain-overlay"></div>
282
+ <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1933&q=80');"></div>
283
+
284
+ <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10">
285
+ <div class="max-w-3xl mx-auto text-center">
286
+ <div class="episode-number mb-2">S01E05</div>
287
+ <h1 class="episode-title text-4xl md:text-6xl mb-8">Новый ты</h1>
288
+
289
+ <p class="text-xl md:text-2xl mb-10 leading-relaxed">
290
+ Ноут на берегу. Свобода. Время для семьи.<br>
291
+ <span class="typewriter">Ты больше не просишь разрешения. Ты сам выбираешь.</span>
292
+ </p>
293
+
294
+ <div class="bg-black bg-opacity-70 rounded-lg p-6 mb-10 max-w-md mx-auto">
295
+ <h3 class="text-2xl font-bold mb-4">Начни свой сезон 1</h3>
296
+ <p class="mb-4">Основано на реальных кейсах. Снято в команде TMT.</p>
297
+ <button class="btn-red text-white w-full py-3 rounded-full font-bold">
298
+ Записаться на курс
299
+ </button>
300
+ </div>
301
+
302
+ <div class="flex justify-center">
303
+ <a href="#episode4" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white">
304
+ <i class="fas fa-chevron-left mr-2"></i> Назад
305
+ </a>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <script>
312
+ // Update navigation dots on scroll
313
+ window.addEventListener('scroll', function() {
314
+ const episodes = document.querySelectorAll('.episode');
315
+ const navDots = document.querySelectorAll('.nav-dot');
316
+
317
+ episodes.forEach((episode, index) => {
318
+ const rect = episode.getBoundingClientRect();
319
+ if (rect.top <= 100 && rect.bottom >= 100) {
320
+ // Remove active class from all dots
321
+ navDots.forEach(dot => dot.classList.remove('active'));
322
+ // Add active class to current dot
323
+ navDots[index].classList.add('active');
324
+ }
325
+ });
326
+ });
327
+
328
+ // Smooth scroll for anchor links
329
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
330
+ anchor.addEventListener('click', function(e) {
331
+ e.preventDefault();
332
+
333
+ const targetId = this.getAttribute('href');
334
+ const targetElement = document.querySelector(targetId);
335
+
336
+ if (targetElement) {
337
+ window.scrollTo({
338
+ top: targetElement.offsetTop,
339
+ behavior: 'smooth'
340
+ });
341
+ }
342
+ });
343
+ });
344
+
345
+ // Typewriter effect
346
+ setTimeout(() => {
347
+ document.querySelector('.typewriter').style.animation = 'none';
348
+ setTimeout(() => {
349
+ document.querySelector('.typewriter').style.animation = '';
350
+ }, 10);
351
+ }, 3500);
352
+ </script>
353
+ <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/landserial" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
354
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ … 🎬 Техническое задание: Лендинг «Сериал о тебе» 🎯 Цель: Создать лендинг, оформленный как трейлер сериала, в котором главный герой — это будущий ученик курса. Пользователь проходит историю от «офисной рутины» до «арбитражного профита». Каждый блок — это серия. Цель — вызвать личную идентификацию, мотивацию и желание пройти путь героя. ⸻ 🎥 Главная идея: Весь лендинг — как интерактивный кинематографичный опыт: • Блоки как эпизоды • Заголовки — как названия серий: S01E01 – Обычный день. Слишком обычный. • Видео и текст сопровождаются эмоциональными фразами и метафорами • Чёткий нарратив: у тебя обычная жизнь → ты открыл для себя арбитраж → ты меняешь реальность ⸻ 🧱 Структура и блоки: 1. Эпизод 1 — До курса • Сцена: офис, звонки, пробки, усталость • Текст: “Ты в очередной раз открыл будильник и подумал: «Сколько ещё?»” • Слоган: “С01Е01 — Обычный день. Слишком обычный.” 2. Эпизод 2 — Переломный момент • Сцена: скроллинг ленты, наткнулся на рекламу курса • Текст: “Инстинктивно нажал. Сначала думал — очередная хрень. Но почему-то остался.” • Кнопка: Смотри, что было дальше 3. Эпизод 3 — Первые шаги • Визуал: экран с уроками, ноут, Telegram • Текст: “Курс не давал мотивации. Он давал действия.” • Подпись: “S01E03 — Старт. Без громких слов.” 4. Эпизод 4 — Первый профит • Эффект: уведомление Telegram / Push “+870$ FTD 5/7” • Текст: “Ты не кричал. Просто посмотрел на экран и понял — сработало.” • Анимация денег, взлёта цифр, чека в CRM 5. Эпизод 5 — Новый ты • Сцена: ноут на берегу, семья, свобода • Цитата: “Ты больше не просишь разрешения. Ты сам выбираешь.” • Финал: экран с выбором “Начни свой сезон 1” • Кнопка: Записаться ⸻ 📺 Дополнительные элементы: • Навигация сериями: мини-кнопки или боковая панель (S01E01 → S01E05) • Видео-блоки или фоновые вставки с кинематографичной подачей • Плашки: “Основано на реальных кейсах”, “Снято в команде TMT” ⸻ 🎨 Визуальный стиль: • Цвета: чёрный, белый, красный (в стиле Netflix, HBO) • Шрифты — как в титрах фильмов (caps, тонкие или bold) • Видео/фон — grain, soft blur, динамичные вставки • Стиль типографики: cinematic voice + нарративная подача ⸻ ⚙️ Технические особенности: • Анимации между блоками — как монтаж (fade-in, cut, резкий переход) • Возможность добавления видеоблоков (WebM или mp4 autoplay muted) • Адаптивность: мобильная версия — как вертикальный сторис/сериал ⸻ Хочешь, чтобы я предложил скрипт видеотрейлера под этот лендинг или оформил мини-сценарий к каждому эпизоду?