timoon811 commited on
Commit
c0fdcc6
·
verified ·
1 Parent(s): 05d740e

Анимация на всех элементах должна работать даже без наведения. Добавь анимацию так, чтобы все элементы двигались, подсвечивались и т.д - без взаимодействия. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +21 -13
index.html CHANGED
@@ -157,11 +157,11 @@
157
  <div class="absolute bottom-1/3 -left-32 w-80 h-80 bg-indigo-500 rounded-full filter blur-3xl opacity-10 animate-[float_7s_ease-in-out_infinite] delay-500"></div>
158
 
159
  <div class="relative z-10 backdrop-blur-sm bg-black/50 border border-gray-800/50 rounded-2xl p-8 md:p-12 shadow-2xl overflow-hidden
160
- animate-[fadeIn_1.5s_ease-in-out_forwards] hover:shadow-purple-500/20 transition-all duration-500 hover:border-purple-500/30
161
- animate-[rotate3d_8s_ease-in-out_infinite] hover:animate-[neonGlow_3s_ease-in-out_infinite]">
162
  <!-- Main content -->
163
  <div class="text-center mb-12">
164
- <h1 class="text-4xl md:text-6xl font-extrabold mb-6 fade-in animate-[float_6s_ease-in-out_infinite] hover:animate-[wave_3s_ease-in-out_infinite]">
165
  <span class="gradient-text glow">Umbra</span>
166
  </h1>
167
  <p class="text-xl md:text-2xl font-medium text-gray-300 mb-8 slide-up" style="animation-delay: 0.2s">
@@ -180,8 +180,8 @@
180
 
181
  <!-- Features grid -->
182
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
183
- <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up hover:shadow-lg hover:shadow-purple-500/10
184
- transition-all duration-300 transform hover:-translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] hover:animate-[neonGlow_2s_ease-in-out_infinite]"
185
  style="animation-delay: 0.3s">
186
  <div class="flex items-center mb-4">
187
  <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-4 flex-shrink-0">
@@ -192,7 +192,8 @@
192
  <p class="text-gray-400">Работа только с лучшими Casino, автоматические выплаты.</p>
193
  </div>
194
 
195
- <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.4s">
 
196
  <div class="flex items-center mb-4">
197
  <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-4 flex-shrink-0">
198
  <i class="fas fa-graduation-cap text-blue-400 text-lg"></i>
@@ -202,7 +203,8 @@
202
  <p class="text-gray-400">Шаг за шагом, пока не начнёшь зарабатывать</p>
203
  </div>
204
 
205
- <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.5s">
 
206
  <div class="flex items-center mb-4">
207
  <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-4 flex-shrink-0">
208
  <i class="fas fa-book text-green-400 text-lg"></i>
@@ -212,7 +214,8 @@
212
  <p class="text-gray-400">Готовые связки по УБТ и Facebook Ads, которых нет в открытом доступе</p>
213
  </div>
214
 
215
- <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.6s">
 
216
  <div class="flex items-center mb-4">
217
  <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-4 flex-shrink-0">
218
  <i class="fas fa-palette text-yellow-400 text-lg"></i>
@@ -222,7 +225,8 @@
222
  <p class="text-gray-400">Всё под ключ, проверено на апрув</p>
223
  </div>
224
 
225
- <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.7s">
 
226
  <div class="flex items-center mb-4">
227
  <div class="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center mr-4 flex-shrink-0">
228
  <i class="fas fa-wallet text-red-400 text-lg"></i>
@@ -232,7 +236,8 @@
232
  <p class="text-gray-400">Лучшим выделяем неограниченные бюджеты под залив для масштабирования</p>
233
  </div>
234
 
235
- <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.8s">
 
236
  <div class="flex items-center mb-4">
237
  <div class="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center mr-4 flex-shrink-0">
238
  <i class="fas fa-shield-alt text-indigo-400 text-lg"></i>
@@ -274,15 +279,18 @@
274
  <div class="mb-12 slide-up" style="animation-delay: 1s">
275
  <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center gradient-text">Для кого подойдёт</h2>
276
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
277
- <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50">
 
278
  <h3 class="text-xl font-bold text-white mb-3">Новичкам</h3>
279
  <p class="text-gray-400">Для тех, кто хочет зайти в арбитраж без лишней теории и «граблей»</p>
280
  </div>
281
- <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50">
 
282
  <h3 class="text-xl font-bold text-white mb-3">Опытным</h3>
283
  <p class="text-gray-400">Для тех, кто уже льёт, но хочет больший процент, готовые связки и поддержку</p>
284
  </div>
285
- <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50">
 
286
  <h3 class="text-xl font-bold text-white mb-3">Командным</h3>
287
  <p class="text-gray-400">Для тех, кто устал работать в одиночку и хочет в живую, результативную команду</p>
288
  </div>
 
157
  <div class="absolute bottom-1/3 -left-32 w-80 h-80 bg-indigo-500 rounded-full filter blur-3xl opacity-10 animate-[float_7s_ease-in-out_infinite] delay-500"></div>
158
 
159
  <div class="relative z-10 backdrop-blur-sm bg-black/50 border border-gray-800/50 rounded-2xl p-8 md:p-12 shadow-2xl overflow-hidden
160
+ animate-[fadeIn_1.5s_ease-in-out_forwards] shadow-purple-500/20 transition-all duration-500 border-purple-500/30
161
+ animate-[rotate3d_8s_ease-in-out_infinite] animate-[neonGlow_3s_ease-in-out_infinite]">
162
  <!-- Main content -->
163
  <div class="text-center mb-12">
164
+ <h1 class="text-4xl md:text-6xl font-extrabold mb-6 fade-in animate-[float_6s_ease-in-out_infinite] animate-[wave_3s_ease-in-out_infinite]">
165
  <span class="gradient-text glow">Umbra</span>
166
  </h1>
167
  <p class="text-xl md:text-2xl font-medium text-gray-300 mb-8 slide-up" style="animation-delay: 0.2s">
 
180
 
181
  <!-- Features grid -->
182
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
183
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up shadow-lg shadow-purple-500/10
184
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]"
185
  style="animation-delay: 0.3s">
186
  <div class="flex items-center mb-4">
187
  <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-4 flex-shrink-0">
 
192
  <p class="text-gray-400">Работа только с лучшими Casino, автоматические выплаты.</p>
193
  </div>
194
 
195
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up shadow-lg shadow-blue-500/10
196
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]" style="animation-delay: 0.4s">
197
  <div class="flex items-center mb-4">
198
  <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-4 flex-shrink-0">
199
  <i class="fas fa-graduation-cap text-blue-400 text-lg"></i>
 
203
  <p class="text-gray-400">Шаг за шагом, пока не начнёшь зарабатывать</p>
204
  </div>
205
 
206
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up shadow-lg shadow-green-500/10
207
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]" style="animation-delay: 0.5s">
208
  <div class="flex items-center mb-4">
209
  <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-4 flex-shrink-0">
210
  <i class="fas fa-book text-green-400 text-lg"></i>
 
214
  <p class="text-gray-400">Готовые связки по УБТ и Facebook Ads, которых нет в открытом доступе</p>
215
  </div>
216
 
217
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up shadow-lg shadow-yellow-500/10
218
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]" style="animation-delay: 0.6s">
219
  <div class="flex items-center mb-4">
220
  <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-4 flex-shrink-0">
221
  <i class="fas fa-palette text-yellow-400 text-lg"></i>
 
225
  <p class="text-gray-400">Всё под ключ, проверено на апрув</p>
226
  </div>
227
 
228
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up shadow-lg shadow-red-500/10
229
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]" style="animation-delay: 0.7s">
230
  <div class="flex items-center mb-4">
231
  <div class="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center mr-4 flex-shrink-0">
232
  <i class="fas fa-wallet text-red-400 text-lg"></i>
 
236
  <p class="text-gray-400">Лучшим выделяем неограниченные бюджеты под залив для масштабирования</p>
237
  </div>
238
 
239
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up shadow-lg shadow-indigo-500/10
240
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]" style="animation-delay: 0.8s">
241
  <div class="flex items-center mb-4">
242
  <div class="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center mr-4 flex-shrink-0">
243
  <i class="fas fa-shield-alt text-indigo-400 text-lg"></i>
 
279
  <div class="mb-12 slide-up" style="animation-delay: 1s">
280
  <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center gradient-text">Для кого подойдёт</h2>
281
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
282
+ <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50 shadow-lg shadow-purple-500/10
283
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]">
284
  <h3 class="text-xl font-bold text-white mb-3">Новичкам</h3>
285
  <p class="text-gray-400">Для тех, кто хочет зайти в арбитраж без лишней теории и «граблей»</p>
286
  </div>
287
+ <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50 shadow-lg shadow-blue-500/10
288
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]">
289
  <h3 class="text-xl font-bold text-white mb-3">Опытным</h3>
290
  <p class="text-gray-400">Для тех, кто уже льёт, но хочет больший процент, готовые связки и поддержку</p>
291
  </div>
292
+ <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50 shadow-lg shadow-green-500/10
293
+ transition-all duration-300 transform -translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] animate-[neonGlow_2s_ease-in-out_infinite]">
294
  <h3 class="text-xl font-bold text-white mb-3">Командным</h3>
295
  <p class="text-gray-400">Для тех, кто устал работать в одиночку и хочет в живую, результативную команду</p>
296
  </div>