Spaces:
Running
Running
Анимация на всех элементах должна работать даже без наведения. Добавь анимацию так, чтобы все элементы двигались, подсвечивались и т.д - без взаимодействия. - Follow Up Deployment
Browse files- 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]
|
| 161 |
-
animate-[rotate3d_8s_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]
|
| 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
|
| 184 |
-
transition-all duration-300 transform
|
| 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
|
|
|
|
| 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
|
|
|
|
| 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
|
|
|
|
| 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
|
|
|
|
| 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
|
|
|
|
| 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>
|