| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>About Us - TMT</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes slideIn { |
| 0% { transform: translateY(20px); opacity: 0; } |
| 100% { transform: translateY(0); opacity: 1; } |
| } |
| |
| @keyframes float { |
| 0% { transform: translate(0, 0); } |
| 50% { transform: translate(0, -10px); } |
| 100% { transform: translate(0, 0); } |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| .animate-slide { |
| animation: slideIn 0.8s ease-out forwards; |
| } |
| |
| .animate-float { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .animate-pulse { |
| animation: pulse 2s ease-in-out infinite; |
| } |
| |
| .animate-glow { |
| animation: pulse 1.5s ease-in-out infinite; |
| } |
| |
| .typing-animation { |
| overflow: hidden; |
| white-space: nowrap; |
| animation: typing 3.5s steps(40, end); |
| } |
| |
| .photo-placeholder { |
| background: linear-gradient(135deg, rgba(246,252,121,0.1) 0%, rgba(246,252,121,0.05) 100%); |
| backdrop-filter: blur(5px); |
| border: 2px solid rgba(246,252,121,0.3); |
| } |
| |
| .stats-item:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(246,252,121,0.2); |
| } |
| |
| .text-highlight { |
| background: linear-gradient(90deg, rgba(246,252,121,0.3) 0%, rgba(246,252,121,0) 100%); |
| padding: 0 4px; |
| border-left: 3px solid #f6fc79; |
| } |
| |
| .icon-bg { |
| background: rgba(246, 252, 121, 0.1); |
| border-radius: 50%; |
| width: 50px; |
| height: 50px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| </style> |
| </head> |
| <body class="bg-[#0a0a0a] text-[#E1E1E1] font-sans"> |
| |
| <section class="py-12 md:py-16 px-4 md:px-8 lg:px-12 xl:px-20 relative overflow-hidden"> |
| |
| <div class="container mx-auto mb-10 md:mb-14"> |
| <div class="flex items-center"> |
| <h2 class="text-[#f6fc79] font-bold uppercase text-3xl md:text-4xl lg:text-5xl glow-text animate-slide"> |
| <span class="inline-block icon-bg animate-float"><i class="fas fa-users text-[#f6fc79]"></i></span> О нас |
| </h2> |
| <div class="ml-4 h-1 bg-gradient-to-r from-[#f6fc79] to-transparent flex-grow"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto mb-8 md:mb-10"> |
| <div class="flex flex-col lg:flex-row items-center gap-8 md:gap-12"> |
| |
| <div class="lg:w-1/2 animate-slide" style="animation-delay: 0.2s;"> |
| <h3 class="text-2xl md:text-3xl font-bold mb-4">Мы — Traffic Monsters Team (TMT)</h3> |
| <p class="mb-4 text-base md:text-lg leading-relaxed"> |
| <span class="text-highlight">Одна из самых результативных команд по арбитражу трафика в СНГ.</span> На сегодняшний день нас уже более 70 человек: байеры, креативщики, аналитики, наставники. |
| </p> |
| <p class="mb-6 text-base md:text-lg leading-relaxed"> |
| <span class="text-highlight">За 1-й год команда вышла на оборот в $1.000.000.</span> Сейчас этот показатель — более $5.000.000. Мы не просто льём трафик — мы строим сильную экосистему, в которой каждый может вырасти в прибыльного специалиста. |
| </p> |
| |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4"> |
| <div class="border-glow border rounded-xl p-3 md:p-4 flex items-center stats-item transition-all duration-300"> |
| <div class="icon-bg mr-3 animate-glow"> |
| <i class="fas fa-user-tie text-[#f6fc79]"></i> |
| </div> |
| <div> |
| <div class="text-xl md:text-2xl font-bold">70+</div> |
| <div class="text-xs md:text-sm">специалистов</div> |
| </div> |
| </div> |
| <div class="border-glow border rounded-xl p-3 md:p-4 flex items-center stats-item transition-all duration-300"> |
| <div class="icon-bg mr-3 animate-glow"> |
| <i class="fas fa-chart-line text-[#f6fc79]"></i> |
| </div> |
| <div> |
| <div class="text-xl md:text-2xl font-bold">$5M+</div> |
| <div class="text-xs md:text-sm">оборот</div> |
| </div> |
| </div> |
| <div class="border-glow border rounded-xl p-3 md:p-4 flex items-center stats-item transition-all duration-300"> |
| <div class="icon-bg mr-3 animate-glow"> |
| <i class="fas fa-bullseye text-[#f6fc79]"></i> |
| </div> |
| <div> |
| <div class="text-xl md:text-2xl font-bold">2000+</div> |
| <div class="text-xs md:text-sm">офферов</div> |
| </div> |
| </div> |
| <div class="border-glow border rounded-xl p-3 md:p-4 flex items-center stats-item transition-all duration-300"> |
| <div class="icon-bg mr-3 animate-glow"> |
| <i class="fas fa-globe text-[#f6fc79]"></i> |
| </div> |
| <div> |
| <div class="text-xl md:text-2xl font-bold">15+</div> |
| <div class="text-xs md:text-sm">гео</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:w-1/2 relative h-64 md:h-80 lg:h-96 animate-slide" style="animation-delay: 0.4s;"> |
| <div class="absolute inset-0 bg-gradient-to-br from-[#f6fc79]/10 to-transparent rounded-2xl"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="relative w-full h-full"> |
| |
| <div class="absolute inset-0 opacity-20"> |
| <div class="absolute top-1/2 left-1/2 w-3/4 h-3/4 border border-[#f6fc79] rounded-full" |
| style="transform: translate(-50%, -50%) scale(0.8); animation: pulse 4s infinite;"></div> |
| <div class="absolute top-1/2 left-1/2 w-3/4 h-3/4 border border-[#f6fc79] rounded-full" |
| style="transform: translate(-50%, -50%) scale(0.6); animation: pulse 4s infinite 0.5s;"></div> |
| <div class="absolute top-1/2 left-1/2 w-3/4 h-3/4 border border-[#f6fc79] rounded-full" |
| style="transform: translate(-50%, -50%) scale(0.4); animation: pulse 4s infinite 1s;"></div> |
| </div> |
| |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex items-end justify-center space-x-2 md:space-x-4 h-3/4 w-3/4"> |
| <div class="w-1/5 bg-[#f6fc79] rounded-t-sm" style="height: 30%; animation: growBar 1s ease-out 0.5s forwards;"></div> |
| <div class="w-1/5 bg-[#f6fc79] rounded-t-sm" style="height: 50%; animation: growBar 1s ease-out 0.7s forwards;"></div> |
| <div class="w-1/5 bg-[#f6fc79] rounded-t-sm" style="height: 70%; animation: growBar 1s ease-out 0.9s forwards;"></div> |
| <div class="w-1/5 bg-[#f6fc79] rounded-t-sm" style="height: 90%; animation: growBar 1s ease-out 1.1s forwards;"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto mb-10 md:mb-14"> |
| <div class="flex flex-col lg:flex-row-reverse items-center gap-8 md:gap-12"> |
| |
| <div class="lg:w-2/5 relative animate-slide" style="animation-delay: 0.2s;"> |
| <div class="relative"> |
| <div class="w-full h-64 md:h-80 lg:h-96 rounded-2xl overflow-hidden"> |
| |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
| alt="Placeholder photo" |
| class="w-full h-full object-cover"> |
| </div> |
| <div class="absolute -inset-2 border border-[#f6fc79]/20 rounded-3xl pointer-events-none animate-pulse" style="animation-delay: 0.5s;"></div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:w-3/5 animate-slide" style="animation-delay: 0.4s;"> |
| <h3 class="text-2xl md:text-3xl font-bold mb-4 typing-animation">Привет! Я Тимур — основатель команды TMT</h3> |
| <div class="space-y-4 text-base md:text-lg leading-relaxed"> |
| <p class="opacity-0 animate-fade-in" style="animation-delay: 1.5s; animation-fill-mode: forwards;"> |
| <span class="text-highlight">Я прошёл путь от нуля в арбитраже до руководителя команды</span>, сделавшей 5.000.000$ оборота. |
| </p> |
| <p class="opacity-0 animate-fade-in" style="animation-delay: 2s; animation-fill-mode: forwards;"> |
| Благодаря арбитражу я посетил более 30 стран, получил финансовую свободу и собрал сильнейшую команду. |
| </p> |
| <p class="opacity-0 animate-fade-in" style="animation-delay: 2.5s; animation-fill-mode: forwards;"> |
| <span class="text-highlight">Теперь я передаю наш опыт через курс</span>, который даст вам реальные навыки и результаты. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto text-center animate-slide" style="animation-delay: 0.6s;"> |
| <div class="flex flex-col sm:flex-row justify-center gap-3 md:gap-4"> |
| <a href="https://instagram.com/" class="glow-box bg-[#f6fc79] hover:bg-[#f6fc79]/90 text-black font-bold uppercase rounded-xl px-5 py-2 md:px-6 md:py-3 transition-all duration-300 inline-flex items-center justify-center transform hover:-translate-y-1"> |
| <i class="fab fa-instagram mr-2"></i> Instagram Тимура |
| </a> |
| <a href="https://youtube.com/" class="glow-box bg-[#f6fc79] hover:bg-[#f6fc79]/90 text-black font-bold uppercase rounded-xl px-5 py-2 md:px-6 md:py-3 transition-all duration-300 inline-flex items-center justify-center transform hover:-translate-y-1"> |
| <i class="fas fa-video mr-2"></i> Интервью с Тимуром |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| <style> |
| @keyframes growBar { |
| from { height: 0; opacity: 0; } |
| to { height: var(--final-height); opacity: 0.8; } |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.8s ease-out forwards; |
| } |
| |
| |
| .particle { |
| position: absolute; |
| background-color: rgba(246, 252, 121, 0.6); |
| border-radius: 50%; |
| pointer-events: none; |
| } |
| </style> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const section = document.querySelector('section'); |
| const particleCount = 20; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const size = Math.random() * 3 + 1; |
| const posX = Math.random() * 100; |
| const posY = Math.random() * 100; |
| const opacity = Math.random() * 0.3 + 0.1; |
| const duration = Math.random() * 10 + 5; |
| const delay = Math.random() * 5; |
| |
| particle.style.width = `${size}px`; |
| particle.style.height = `${size}px`; |
| particle.style.left = `${posX}%`; |
| particle.style.top = `${posY}%`; |
| particle.style.opacity = opacity; |
| particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; |
| |
| section.appendChild(particle); |
| } |
| |
| |
| const statsItems = document.querySelectorAll('.stats-item'); |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| statsItems.forEach(item => { |
| item.style.opacity = '0'; |
| item.style.transform = 'translateY(20px)'; |
| item.style.transition = 'all 0.5s ease-out'; |
| observer.observe(item); |
| }); |
| }); |
| </script> |
| <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/block6tmt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
