|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TRAFFIC MONSTERS TEAM | Elite Performance Marketing</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #13FFAA; |
|
|
--secondary: #4477FF; |
|
|
--text: #F2F2F2; |
|
|
--bg: #0B0B0F; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: var(--bg); |
|
|
color: var(--text); |
|
|
overflow-x: hidden; |
|
|
cursor: none; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.mono { |
|
|
font-family: 'Roboto Mono', monospace; |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(19, 255, 170, 0.7); |
|
|
} |
|
|
|
|
|
.glow-box { |
|
|
box-shadow: 0 0 20px rgba(19, 255, 170, 0.3); |
|
|
} |
|
|
|
|
|
.glow-box-secondary { |
|
|
box-shadow: 0 0 20px rgba(68, 119, 255, 0.3); |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(15, 15, 20, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.hero-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
height: 2px; |
|
|
background-color: var(--primary); |
|
|
border-radius: 50%; |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.cursor { |
|
|
position: fixed; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--primary); |
|
|
mix-blend-mode: difference; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
transition: transform 0.1s ease; |
|
|
} |
|
|
|
|
|
.cursor-follower { |
|
|
position: fixed; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
border: 1px solid var(--primary); |
|
|
mix-blend-mode: difference; |
|
|
pointer-events: none; |
|
|
z-index: 9998; |
|
|
transform: translate(-50%, -50%); |
|
|
transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease; |
|
|
} |
|
|
|
|
|
.stat-number { |
|
|
font-size: 3.5rem; |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.team-avatar { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.team-avatar::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
to bottom right, |
|
|
rgba(19, 255, 170, 0), |
|
|
rgba(19, 255, 170, 0), |
|
|
rgba(19, 255, 170, 0.3), |
|
|
rgba(19, 255, 170, 0) |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
animation: shine 3s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { |
|
|
transform: rotate(30deg) translate(-30%, -30%); |
|
|
} |
|
|
100% { |
|
|
transform: rotate(30deg) translate(30%, 30%); |
|
|
} |
|
|
} |
|
|
|
|
|
.case-study-card { |
|
|
min-width: 300px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.case-study-card:hover { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
|
|
|
.glitch { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch::before, .glitch::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: var(--bg); |
|
|
} |
|
|
|
|
|
.glitch::before { |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 var(--secondary); |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch::after { |
|
|
left: -2px; |
|
|
text-shadow: -2px 0 var(--primary); |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim2 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim { |
|
|
0% { clip: rect(31px, 9999px, 94px, 0); } |
|
|
10% { clip: rect(112px, 9999px, 76px, 0); } |
|
|
20% { clip: rect(85px, 9999px, 77px, 0); } |
|
|
30% { clip: rect(27px, 9999px, 97px, 0); } |
|
|
40% { clip: rect(64px, 9999px, 98px, 0); } |
|
|
50% { clip: rect(61px, 9999px, 85px, 0); } |
|
|
60% { clip: rect(99px, 9999px, 114px, 0); } |
|
|
70% { clip: rect(34px, 9999px, 115px, 0); } |
|
|
80% { clip: rect(98px, 9999px, 129px, 0); } |
|
|
90% { clip: rect(43px, 9999px, 96px, 0); } |
|
|
100% { clip: rect(82px, 9999px, 64px, 0); } |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim2 { |
|
|
0% { clip: rect(65px, 9999px, 119px, 0); } |
|
|
10% { clip: rect(144px, 9999px, 41px, 0); } |
|
|
20% { clip: rect(6px, 9999px, 187px, 0); } |
|
|
30% { clip: rect(133px, 9999px, 156px, 0); } |
|
|
40% { clip: rect(115px, 9999px, 15px, 0); } |
|
|
50% { clip: rect(20px, 9999px, 164px, 0); } |
|
|
60% { clip: rect(191px, 9999px, 10px, 0); } |
|
|
70% { clip: rect(100px, 9999px, 56px, 0); } |
|
|
80% { clip: rect(98px, 9999px, 129px, 0); } |
|
|
90% { clip: rect(174px, 9999px, 62px, 0); } |
|
|
100% { clip: rect(109px, 9999px, 96px, 0); } |
|
|
} |
|
|
|
|
|
.scroll-container { |
|
|
overflow-x: auto; |
|
|
scroll-snap-type: x mandatory; |
|
|
scroll-behavior: smooth; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
} |
|
|
|
|
|
.scroll-container::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.scroll-item { |
|
|
scroll-snap-align: start; |
|
|
} |
|
|
|
|
|
.magnetic-btn { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.magnetic-btn:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="cursor"></div> |
|
|
<div class="cursor-follower"></div> |
|
|
|
|
|
|
|
|
<section class="relative min-h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div class="hero-bg" id="particles-js"></div> |
|
|
<div class="container mx-auto px-6 z-10"> |
|
|
<div class="text-center"> |
|
|
<h1 class="glitch text-6xl md:text-8xl font-bold mb-6 glow-text" data-text="TRAFFIC MONSTERS TEAM">TRAFFIC MONSTERS TEAM</h1> |
|
|
<p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto">Top-tier performance marketing unit. No noise. Just numbers.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#" class="magnetic-btn bg-transparent border-2 border-[#13FFAA] text-[#13FFAA] hover:bg-[#13FFAA] hover:text-[#0B0B0F] font-bold py-3 px-8 rounded-full transition-all duration-300 glow-box"> |
|
|
📲 Talk via Telegram |
|
|
</a> |
|
|
<a href="#case-studies" class="magnetic-btn bg-transparent border-2 border-[#4477FF] text-[#4477FF] hover:bg-[#4477FF] hover:text-[#0B0B0F] font-bold py-3 px-8 rounded-full transition-all duration-300 glow-box-secondary"> |
|
|
📂 View Case Studies |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16">TMT IN NUMBERS</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="glass-card p-8 rounded-xl text-center"> |
|
|
<div class="stat-number font-bold mb-4" id="stat1">0</div> |
|
|
<p class="text-xl">Media Buyers</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center"> |
|
|
<div class="stat-number font-bold mb-4" id="stat2">$0</div> |
|
|
<p class="text-xl">Monthly Revenue</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center"> |
|
|
<div class="stat-number font-bold mb-4" id="stat3">0</div> |
|
|
<p class="text-xl">Traffic Sources</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center"> |
|
|
<div class="stat-number font-bold mb-4" id="stat4">0</div> |
|
|
<p class="text-xl">Offers Scaled</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-[#0B0B0F] to-[#121218]"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16">OUR CAPABILITIES</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="glass-card p-8 rounded-xl hover:glow-box transition-all duration-300"> |
|
|
<div class="text-4xl mb-4">📊</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Strategy & Funnel Architecture</h3> |
|
|
<p class="opacity-80">Data-driven campaign structures optimized for maximum conversion at scale.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl hover:glow-box transition-all duration-300"> |
|
|
<div class="text-4xl mb-4">🚀</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Multi-Channel Traffic</h3> |
|
|
<p class="opacity-80">Facebook, TikTok, Push, Google and native traffic at competitive CPAs.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl hover:glow-box transition-all duration-300"> |
|
|
<div class="text-4xl mb-4">🖥️</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Landing Pages & Apps</h3> |
|
|
<p class="opacity-80">High-converting pre-landers, cloaking solutions and mobile app integration.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl hover:glow-box transition-all duration-300"> |
|
|
<div class="text-4xl mb-4">📈</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Tracking & Optimization</h3> |
|
|
<p class="opacity-80">Keitaro, Binom, server-side tracking with real-time optimization algorithms.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl hover:glow-box transition-all duration-300"> |
|
|
<div class="text-4xl mb-4">🎨</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Creative Lab</h3> |
|
|
<p class="opacity-80">UGC, 3D renders, native ads and motion graphics that convert.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl hover:glow-box transition-all duration-300"> |
|
|
<div class="text-4xl mb-4">🤝</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Direct Advertisers</h3> |
|
|
<p class="opacity-80">Exclusive offers, higher payouts and direct integration with top advertisers.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="case-studies" class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16">CASE STUDIES</h2> |
|
|
<div class="scroll-container flex overflow-x-auto pb-8 -mx-6 px-6"> |
|
|
<div class="flex space-x-8"> |
|
|
<div class="scroll-item case-study-card glass-card p-6 rounded-xl flex-shrink-0"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block bg-[#4477FF] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full">TIKTOK</span> |
|
|
<span class="inline-block bg-[#13FFAA] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full ml-2">GAMBLING</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Scandinavian Market Domination</h3> |
|
|
<div class="grid grid-cols-3 gap-4 mb-6"> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CTR</p> |
|
|
<p class="text-xl font-bold">3.8%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">ROI</p> |
|
|
<p class="text-xl font-bold">217%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CR</p> |
|
|
<p class="text-xl font-bold">12.4%</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gradient-to-r from-[#13FFAA] to-[#4477FF] rounded-lg mb-4"></div> |
|
|
<a href="#" class="text-[#13FFAA] font-bold flex items-center"> |
|
|
View Details <span class="ml-2">→</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-item case-study-card glass-card p-6 rounded-xl flex-shrink-0"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block bg-[#4477FF] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full">FACEBOOK</span> |
|
|
<span class="inline-block bg-[#13FFAA] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full ml-2">NUTRA</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Diet Supplement Scaling</h3> |
|
|
<div class="grid grid-cols-3 gap-4 mb-6"> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CTR</p> |
|
|
<p class="text-xl font-bold">2.1%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">ROI</p> |
|
|
<p class="text-xl font-bold">185%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CR</p> |
|
|
<p class="text-xl font-bold">8.7%</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gradient-to-r from-[#4477FF] to-[#13FFAA] rounded-lg mb-4"></div> |
|
|
<a href="#" class="text-[#13FFAA] font-bold flex items-center"> |
|
|
View Details <span class="ml-2">→</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-item case-study-card glass-card p-6 rounded-xl flex-shrink-0"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block bg-[#4477FF] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full">PUSH</span> |
|
|
<span class="inline-block bg-[#13FFAA] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full ml-2">UTILITIES</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Tier 3 Utility Push Strategy</h3> |
|
|
<div class="grid grid-cols-3 gap-4 mb-6"> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CTR</p> |
|
|
<p class="text-xl font-bold">4.5%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">ROI</p> |
|
|
<p class="text-xl font-bold">320%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CR</p> |
|
|
<p class="text-xl font-bold">9.2%</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gradient-to-r from-[#13FFAA] to-[#4477FF] rounded-lg mb-4"></div> |
|
|
<a href="#" class="text-[#13FFAA] font-bold flex items-center"> |
|
|
View Details <span class="ml-2">→</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-item case-study-card glass-card p-6 rounded-xl flex-shrink-0"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block bg-[#4477FF] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full">NATIVE</span> |
|
|
<span class="inline-block bg-[#13FFAA] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full ml-2">FINANCE</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Forex Broker Scaling</h3> |
|
|
<div class="grid grid-cols-3 gap-4 mb-6"> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CTR</p> |
|
|
<p class="text-xl font-bold">1.8%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">ROI</p> |
|
|
<p class="text-xl font-bold">275%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-70">CR</p> |
|
|
<p class="text-xl font-bold">6.9%</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gradient-to-r from-[#4477FF] to-[#13FFAA] rounded-lg mb-4"></div> |
|
|
<a href="#" class="text-[#13FFAA] font-bold flex items-center"> |
|
|
View Details <span class="ml-2">→</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-[#121218] to-[#0B0B0F]"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/3"> |
|
|
<div class="glass-card rounded-xl overflow-hidden glow-box"> |
|
|
<div class="h-80 bg-gradient-to-br from-[#13FFAA] to-[#4477FF]"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-2/3"> |
|
|
<span class="inline-block bg-[#13FFAA] text-[#0B0B0F] text-sm font-bold px-3 py-1 rounded-full mb-4">FOUNDER & VISIONARY</span> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">TIMUR</h2> |
|
|
<p class="text-lg mb-8 opacity-90">Timur is the founder of TMT — a high-stakes media buying leader and architect of scalable performance infrastructure. With 5+ years of arbitrage domination, he's known for building aggressive, data-driven teams that consistently outperform market benchmarks.</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#" class="magnetic-btn bg-transparent border-2 border-[#13FFAA] text-[#13FFAA] hover:bg-[#13FFAA] hover:text-[#0B0B0F] font-bold py-2 px-6 rounded-full transition-all duration-300 glow-box flex items-center"> |
|
|
📸 Instagram |
|
|
</a> |
|
|
<a href="#" class="magnetic-btn bg-transparent border-2 border-[#4477FF] text-[#4477FF] hover:bg-[#4477FF] hover:text-[#0B0B0F] font-bold py-2 px-6 rounded-full transition-all duration-300 glow-box-secondary flex items-center"> |
|
|
▶️ YouTube Interview |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16">TEAM CULTURE</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300"> |
|
|
<div class="team-avatar mb-6"> |
|
|
<span class="text-2xl font-bold">@</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">@roi_monster</h3> |
|
|
<p class="opacity-80">"$150K on Tier 2 GEOs"</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300"> |
|
|
<div class="team-avatar mb-6"> |
|
|
<span class="text-2xl font-bold">@</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">@bm_master</h3> |
|
|
<p class="opacity-80">"20+ warmed BMs"</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300"> |
|
|
<div class="team-avatar mb-6"> |
|
|
<span class="text-2xl font-bold">@</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">@tiktok_sniper</h3> |
|
|
<p class="opacity-80">"5 creatives → $30K in 3 days"</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300"> |
|
|
<div class="team-avatar mb-6"> |
|
|
<span class="text-2xl font-bold">@</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">@cloak_king</h3> |
|
|
<p class="opacity-80">"0 bans in 6 months"</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300"> |
|
|
<div class="team-avatar mb-6"> |
|
|
<span class="text-2xl font-bold">@</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">@nutra_god</h3> |
|
|
<p class="opacity-80">"3.2% CR on cold traffic"</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300"> |
|
|
<div class="team-avatar mb-6"> |
|
|
<span class="text-2xl font-bold">@</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">@arbitrage_ai</h3> |
|
|
<p class="opacity-80">"Automated 87% of optimizations"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-[#0B0B0F] to-[#121218]"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16">WHO WE WORK WITH</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-16"> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300 flex items-center justify-center h-32"> |
|
|
<span class="text-2xl font-bold opacity-90">AFFILIATE NETWORK</span> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300 flex items-center justify-center h-32"> |
|
|
<span class="text-2xl font-bold opacity-90">BETTING BRAND</span> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300 flex items-center justify-center h-32"> |
|
|
<span class="text-2xl font-bold opacity-90">CRYPTO EXCHANGE</span> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300 flex items-center justify-center h-32"> |
|
|
<span class="text-2xl font-bold opacity-90">NUTRA COMPANY</span> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center hover:glow-box transition-all duration-300 flex items-center justify-center h-32"> |
|
|
<span class="text-2xl font-bold opacity-90">TRACKING PLATFORM</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<h3 class="text-2xl font-bold mb-6">VERTICALS WE DOMINATE</h3> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<span class="inline-block bg-[#13FFAA] bg-opacity-20 text-[#13FFAA] text-sm font-bold px-4 py-2 rounded-full">GAMBLING</span> |
|
|
<span class="inline-block bg-[#4477FF] bg-opacity-20 text-[#4477FF] text-sm font-bold px-4 py-2 rounded-full">NUTRA</span> |
|
|
<span class="inline-block bg-[#13FFAA] bg-opacity-20 text-[#13FFAA] text-sm font-bold px-4 py-2 rounded-full">FINANCE</span> |
|
|
<span class="inline-block bg-[#4477FF] bg-opacity-20 text-[#4477FF] text-sm font-bold px-4 py-2 rounded-full">UTILITIES</span> |
|
|
<span class="inline-block bg-[#13FFAA] bg-opacity-20 text-[#13FFAA] text-sm font-bold px-4 py-2 rounded-full">DATING</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-[#13FFAA] to-[#4477FF] opacity-10"></div> |
|
|
<div class="container mx-auto px-6 relative z-10 text-center"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6">READY TO WORK WITH TRAFFIC MONSTERS?</h2> |
|
|
<p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto">No forms. No resumes. Just results.</p> |
|
|
<a href="#" class="magnetic-btn inline-block bg-[#13FFAA] text-[#0B0B0F] font-bold py-4 px-12 rounded-full transition-all duration-300 glow-box hover:glow-box hover:scale-105"> |
|
|
📲 Contact via Telegram |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 border-t border-[#222228]"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="text-center md:text-left mb-6 md:mb-0"> |
|
|
<p class="text-sm opacity-70">© TMT — Built for scale. Powered by performance.</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-2xl hover:text-[#13FFAA] transition-colors duration-300">📱</a> |
|
|
<a href="#" class="text-2xl hover:text-[#13FFAA] transition-colors duration-300">📸</a> |
|
|
<a href="#" class="text-2xl hover:text-[#13FFAA] transition-colors duration-300">▶️</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const cursor = document.querySelector('.cursor'); |
|
|
const cursorFollower = document.querySelector('.cursor-follower'); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
cursor.style.left = e.clientX + 'px'; |
|
|
cursor.style.top = e.clientY + 'px'; |
|
|
|
|
|
setTimeout(() => { |
|
|
cursorFollower.style.left = e.clientX + 'px'; |
|
|
cursorFollower.style.top = e.clientY + 'px'; |
|
|
}, 100); |
|
|
}); |
|
|
|
|
|
|
|
|
const magneticButtons = document.querySelectorAll('.magnetic-btn'); |
|
|
|
|
|
magneticButtons.forEach(button => { |
|
|
button.addEventListener('mousemove', (e) => { |
|
|
const rect = button.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
|
|
|
const centerX = rect.width / 2; |
|
|
const centerY = rect.height / 2; |
|
|
|
|
|
const angleX = (x - centerX) / 10; |
|
|
const angleY = (y - centerY) / 10; |
|
|
|
|
|
button.style.transform = `perspective(1000px) rotateX(${angleY}deg) rotateY(${-angleX}deg) scale(1.05)`; |
|
|
|
|
|
cursorFollower.style.width = '60px'; |
|
|
cursorFollower.style.height = '60px'; |
|
|
}); |
|
|
|
|
|
button.addEventListener('mouseleave', () => { |
|
|
button.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; |
|
|
cursorFollower.style.width = '40px'; |
|
|
cursorFollower.style.height = '40px'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function animateCounters() { |
|
|
const stat1 = document.getElementById('stat1'); |
|
|
const stat2 = document.getElementById('stat2'); |
|
|
const stat3 = document.getElementById('stat3'); |
|
|
const stat4 = document.getElementById('stat4'); |
|
|
|
|
|
const target1 = 70; |
|
|
const target2 = 5; |
|
|
const target3 = 15; |
|
|
const target4 = 200; |
|
|
|
|
|
let count1 = 0; |
|
|
let count2 = 0; |
|
|
let count3 = 0; |
|
|
let count4 = 0; |
|
|
|
|
|
const duration = 2000; |
|
|
const interval = 20; |
|
|
const steps = duration / interval; |
|
|
const increment1 = target1 / steps; |
|
|
const increment2 = target2 / steps; |
|
|
const increment3 = target3 / steps; |
|
|
const increment4 = target4 / steps; |
|
|
|
|
|
const counter1 = setInterval(() => { |
|
|
count1 += increment1; |
|
|
if (count1 >= target1) { |
|
|
count1 = target1; |
|
|
clearInterval(counter1); |
|
|
} |
|
|
stat1.textContent = Math.floor(count1) + '+'; |
|
|
}, interval); |
|
|
|
|
|
const counter2 = setInterval(() => { |
|
|
count2 += increment2; |
|
|
if (count2 >= target2) { |
|
|
count2 = target2; |
|
|
clearInterval(counter2); |
|
|
} |
|
|
stat2.textContent = '$' + count2.toFixed(1) + 'M+'; |
|
|
}, interval); |
|
|
|
|
|
const counter3 = setInterval(() => { |
|
|
count3 += increment3; |
|
|
if (count3 >= target3) { |
|
|
count3 = target3; |
|
|
clearInterval(counter3); |
|
|
} |
|
|
stat3.textContent = Math.floor(count3) + '+'; |
|
|
}, interval); |
|
|
|
|
|
const counter4 = setInterval(() => { |
|
|
count4 += increment4; |
|
|
if (count4 >= target4) { |
|
|
count4 = target4; |
|
|
clearInterval(counter4); |
|
|
} |
|
|
stat4.textContent = Math.floor(count4) + '+'; |
|
|
}, interval); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const statsSection = document.querySelector('section:nth-of-type(2)'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
animateCounters(); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.5 }); |
|
|
|
|
|
observer.observe(statsSection); |
|
|
|
|
|
|
|
|
const heroBg = document.querySelector('.hero-bg'); |
|
|
const particleCount = 100; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100; |
|
|
|
|
|
|
|
|
const size = Math.random() * 3 + 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.animation = `float ${duration}s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
heroBg.appendChild(particle); |
|
|
} |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = ` |
|
|
@keyframes float { |
|
|
0% { |
|
|
transform: translate(0, 0); |
|
|
opacity: 0; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.8; |
|
|
} |
|
|
100% { |
|
|
transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
|
|
|
|
|
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
|
|
gsap.utils.toArray('section').forEach((section, i) => { |
|
|
if (i > 0) { |
|
|
gsap.from(section, { |
|
|
scrollTrigger: { |
|
|
trigger: section, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
opacity: 0, |
|
|
y: 50, |
|
|
duration: |
|
|
</html> |
