|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TMT - Traffic Monsters Team</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@300;400;500;600;700&display=swap"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--bg-dark: #0B0B0F; |
|
|
--accent: #13FFAA; |
|
|
--secondary: #4477FF; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
background-color: var(--bg-dark); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.inter-font { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(19, 255, 170, 0.7); |
|
|
} |
|
|
|
|
|
.glow-box { |
|
|
box-shadow: 0 0 15px rgba(19, 255, 170, 0.5); |
|
|
} |
|
|
|
|
|
.border-glow { |
|
|
box-shadow: 0 0 10px rgba(19, 255, 170, 0.7); |
|
|
} |
|
|
|
|
|
.cyber-border { |
|
|
border: 1px solid var(--accent); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.cyber-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
left: -5px; |
|
|
right: -5px; |
|
|
bottom: -5px; |
|
|
border: 1px solid var(--accent); |
|
|
z-index: -1; |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.data-grid-bg { |
|
|
background-image: |
|
|
linear-gradient(rgba(68, 119, 255, 0.1) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(68, 119, 255, 0.1) 1px, transparent 1px); |
|
|
background-size: 40px 40px; |
|
|
} |
|
|
|
|
|
.cursor-trail { |
|
|
position: fixed; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--accent); |
|
|
mix-blend-mode: screen; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
opacity: 0.3; |
|
|
filter: blur(1px); |
|
|
} |
|
|
|
|
|
.glitch-hover { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch-hover:hover::before { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 var(--secondary); |
|
|
top: 0; |
|
|
color: white; |
|
|
background: var(--bg-dark); |
|
|
overflow: hidden; |
|
|
clip: rect(0, 900px, 0, 0); |
|
|
animation: noise-anim 2s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch-hover:hover::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
left: -2px; |
|
|
text-shadow: 2px 0 var(--accent); |
|
|
top: 0; |
|
|
color: white; |
|
|
background: var(--bg-dark); |
|
|
overflow: hidden; |
|
|
clip: rect(0, 900px, 0, 0); |
|
|
animation: noise-anim-2 3s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
@keyframes noise-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 noise-anim-2 { |
|
|
0% { clip: rect(65px, 9999px, 119px, 0); } |
|
|
10% { clip: rect(144px, 9999px, 41px, 0); } |
|
|
20% { clip: rect(6px, 9999px, 187px, 0); } |
|
|
30% { clip: rect(148px, 9999px, 39px, 0); } |
|
|
40% { clip: rect(198px, 9999px, 184px, 0); } |
|
|
50% { clip: rect(121px, 9999px, 6px, 0); } |
|
|
60% { clip: rect(188px, 9999px, 159px, 0); } |
|
|
70% { clip: rect(55px, 9999px, 68px, 0); } |
|
|
80% { clip: rect(1px, 9999px, 83px, 0); } |
|
|
90% { clip: rect(145px, 9999px, 58px, 0); } |
|
|
100% { clip: rect(100px, 9999px, 175px, 0); } |
|
|
} |
|
|
|
|
|
.scroll-indicator { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 24px; |
|
|
height: 40px; |
|
|
border: 2px solid var(--accent); |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.scroll-indicator::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 6px; |
|
|
left: 50%; |
|
|
width: 4px; |
|
|
height: 8px; |
|
|
background: var(--accent); |
|
|
border-radius: 2px; |
|
|
transform: translateX(-50%); |
|
|
animation: scroll 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes scroll { |
|
|
0% { transform: translate(-50%, 0); opacity: 1; } |
|
|
50% { transform: translate(-50%, 10px); opacity: 0.5; } |
|
|
100% { transform: translate(-50%, 0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.counter { |
|
|
font-variant-numeric: tabular-nums; |
|
|
} |
|
|
|
|
|
.case-study-card { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.case-study-card:hover { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
|
|
|
.team-card:hover { |
|
|
background: linear-gradient(135deg, rgba(19, 255, 170, 0.1) 0%, rgba(68, 119, 255, 0.1) 100%); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(19, 255, 170, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(19, 255, 170, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(19, 255, 170, 0); } |
|
|
} |
|
|
|
|
|
.grid-pattern { |
|
|
background-image: |
|
|
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); |
|
|
background-size: 40px 40px; |
|
|
} |
|
|
|
|
|
.hero-bg { |
|
|
background: radial-gradient(circle at 50% 50%, rgba(19, 255, 170, 0.1) 0%, rgba(11, 11, 15, 1) 60%); |
|
|
} |
|
|
|
|
|
.animate-float { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative"> |
|
|
|
|
|
<div class="cursor-trail" id="cursor-trail"></div> |
|
|
|
|
|
|
|
|
<section class="min-h-screen hero-bg relative overflow-hidden flex items-center justify-center"> |
|
|
<div class="absolute inset-0 data-grid-bg opacity-30"></div> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-40"></div> |
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-6xl md:text-8xl font-bold mb-6 glow-text"> |
|
|
<span class="glitch-hover" data-text="TRAFFIC MONSTERS TEAM">TRAFFIC MONSTERS TEAM</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl mb-12 inter-font"> |
|
|
Elite arbitrage unit. We scale what others fear to touch. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#" class="bg-transparent border border-[#13FFAA] text-[#13FFAA] hover:bg-[#13FFAA] hover:text-black px-8 py-4 rounded-none font-medium transition-all duration-300 glow-hover"> |
|
|
Talk via Telegram |
|
|
</a> |
|
|
<a href="#case-studies" class="bg-[#13FFAA] text-black hover:bg-transparent hover:text-[#13FFAA] border border-[#13FFAA] px-8 py-4 rounded-none font-medium transition-all duration-300 glow-hover"> |
|
|
See Case Studies |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-indicator"></div> |
|
|
|
|
|
|
|
|
<div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-[#4477FF] opacity-20 animate-float" style="animation-delay: 0s;"></div> |
|
|
<div class="absolute top-1/3 right-1/4 w-12 h-12 rounded-full bg-[#13FFAA] opacity-20 animate-float" style="animation-delay: 1s;"></div> |
|
|
<div class="absolute bottom-1/4 left-1/3 w-6 h-6 rounded-full bg-[#13FFAA] opacity-20 animate-float" style="animation-delay: 2s;"></div> |
|
|
<div class="absolute bottom-1/3 right-1/3 w-10 h-10 rounded-full bg-[#4477FF] opacity-20 animate-float" style="animation-delay: 3s;"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">What We Do</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto inter-font"> |
|
|
Performance marketing at industrial scale with surgical precision |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-[#13FFAA] text-3xl mb-4"> |
|
|
<i class="fas fa-chess-queen"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Strategic Offer Selection</h3> |
|
|
<p class="text-gray-300 inter-font"> |
|
|
We identify and validate high-potential offers before they hit the mainstream, ensuring first-mover advantage. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-[#13FFAA] text-3xl mb-4"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Paid Traffic Scaling</h3> |
|
|
<p class="text-gray-300 inter-font"> |
|
|
FB, TikTok, Push, Pop, Native - we dominate platforms others struggle to crack, at volumes that move markets. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-[#13FFAA] text-3xl mb-4"> |
|
|
<i class="fas fa-funnel-dollar"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Full-Funnel Engineering</h3> |
|
|
<p class="text-gray-300 inter-font"> |
|
|
From lander to app to monetization - we architect complete conversion systems, not just traffic flows. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-[#13FFAA] text-3xl mb-4"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Advanced Analytics</h3> |
|
|
<p class="text-gray-300 inter-font"> |
|
|
Keitaro, API feeds, postback control - our data systems provide real-time decision intelligence. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-[#13FFAA] text-3xl mb-4"> |
|
|
<i class="fas fa-film"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">In-House Creative Production</h3> |
|
|
<p class="text-gray-300 inter-font"> |
|
|
UGC, video editing, deepfake tools - we create converting assets at scale, tailored to each platform. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-[#13FFAA] text-3xl mb-4"> |
|
|
<i class="fas fa-handshake"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Direct Advertiser Relations</h3> |
|
|
<p class="text-gray-300 inter-font"> |
|
|
We work directly with product owners to create custom solutions, bypassing middlemen for maximum efficiency. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-black to-[#0B0B0F] relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">By The Numbers</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto inter-font"> |
|
|
Quantified proof of our market dominance |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-2 text-[#13FFAA] counter" data-target="5">0</div> |
|
|
<div class="text-xl inter-font">Million+ in managed spend</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-2 text-[#13FFAA] counter" data-target="200">0</div> |
|
|
<div class="text-xl inter-font">Live offers running</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-2 text-[#13FFAA] counter" data-target="70">0</div> |
|
|
<div class="text-xl inter-font">Specialists globally</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-2 text-[#13FFAA] counter" data-target="15">0</div> |
|
|
<div class="text-xl inter-font">Traffic platforms mastered</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-[#13FFAA] to-transparent opacity-10"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="case-studies" class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">Case Studies</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto inter-font"> |
|
|
Recent verticals we've dominated |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="case-study-card bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="flex justify-between items-start mb-6"> |
|
|
<div> |
|
|
<span class="inline-block bg-[#4477FF] text-black px-3 py-1 text-sm font-bold mb-2">TikTok Ads</span> |
|
|
<h3 class="text-2xl font-bold">Nutra - US Market</h3> |
|
|
</div> |
|
|
<div class="text-[#13FFAA] text-3xl"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<p class="text-gray-300 inter-font mb-4"> |
|
|
Scaled supplement offer using UGC-style creatives with AI-generated testimonials. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">CTR</div> |
|
|
<div class="text-xl font-bold">3.8%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">CR</div> |
|
|
<div class="text-xl font-bold">8.2%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">ROI</div> |
|
|
<div class="text-xl font-bold">142%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">Spend</div> |
|
|
<div class="text-xl font-bold">$780K</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-px bg-gray-800 my-6"></div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400 inter-font">Q2 2023</span> |
|
|
<button class="text-[#13FFAA] hover:text-white text-sm font-bold"> |
|
|
View Details <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="case-study-card bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="flex justify-between items-start mb-6"> |
|
|
<div> |
|
|
<span class="inline-block bg-[#13FFAA] text-black px-3 py-1 text-sm font-bold mb-2">Facebook Ads</span> |
|
|
<h3 class="text-2xl font-bold">Finance - SEA</h3> |
|
|
</div> |
|
|
<div class="text-[#4477FF] text-3xl"> |
|
|
<i class="fas fa-coins"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<p class="text-gray-300 inter-font mb-4"> |
|
|
Loan app with multi-step funnel and automated approval system for Tier 2 countries. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">CTR</div> |
|
|
<div class="text-xl font-bold">2.4%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">CR</div> |
|
|
<div class="text-xl font-bold">6.5%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">ROI</div> |
|
|
<div class="text-xl font-bold">210%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">Spend</div> |
|
|
<div class="text-xl font-bold">$1.2M</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-px bg-gray-800 my-6"></div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400 inter-font">Q1 2023</span> |
|
|
<button class="text-[#13FFAA] hover:text-white text-sm font-bold"> |
|
|
View Details <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="case-study-card bg-black bg-opacity-50 border border-gray-800 p-8 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="flex justify-between items-start mb-6"> |
|
|
<div> |
|
|
<span class="inline-block bg-[#13FFAA] text-black px-3 py-1 text-sm font-bold mb-2">Push/Pop</span> |
|
|
<h3 class="text-2xl font-bold">Gambling - LATAM</h3> |
|
|
</div> |
|
|
<div class="text-[#4477FF] text-3xl"> |
|
|
<i class="fas fa-dice"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<p class="text-gray-300 inter-font mb-4"> |
|
|
High-frequency push strategy with geo-targeted landing pages and localized bonuses. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">CTR</div> |
|
|
<div class="text-xl font-bold">1.8%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">CR</div> |
|
|
<div class="text-xl font-bold">4.7%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">ROI</div> |
|
|
<div class="text-xl font-bold">320%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-400 inter-font">Spend</div> |
|
|
<div class="text-xl font-bold">$2.4M</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-px bg-gray-800 my-6"></div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400 inter-font">Q4 2022</span> |
|
|
<button class="text-[#13FFAA] hover:text-white text-sm font-bold"> |
|
|
View Details <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-black to-[#0B0B0F] relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">The Unit</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto inter-font"> |
|
|
Pseudonymous operators behind the machine |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="team-card bg-black bg-opacity-50 border border-gray-800 p-8 transition-all duration-300 hover:glow-box"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-[#13FFAA] flex items-center justify-center text-2xl font-bold text-black mr-4"> |
|
|
BM |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold">@bm_architect</h3> |
|
|
<p class="text-gray-400 inter-font">Business Manager</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 inter-font mb-4"> |
|
|
48 business managers in rotation across 12 ad accounts, maintaining perfect health scores. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs bg-gray-900 text-[#13FFAA] px-2 py-1">Facebook</span> |
|
|
<span class="text-xs bg-gray-900 text-[#13FFAA] px-2 py-1">TikTok</span> |
|
|
<span class="text-xs bg-gray-900 text-[#13FFAA] px-2 py-1">Google</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="team-card bg-black bg-opacity-50 border border-gray-800 p-8 transition-all duration-300 hover:glow-box"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-[#4477FF] flex items-center justify-center text-2xl font-bold text-black mr-4"> |
|
|
TS |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold">@tiktok_splicer</h3> |
|
|
<p class="text-gray-400 inter-font">Creative Director</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 inter-font mb-4"> |
|
|
12 creatives → $180K payout. Specializes in UGC-style deepfake testimonials that bypass moderation. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs bg-gray-900 text-[#4477FF] px-2 py-1">Video Editing</span> |
|
|
<span class="text-xs bg-gray-900 text-[#4477FF] px-2 py-1">Deepfake</span> |
|
|
<span class="text-xs bg-gray-900 text-[#4477FF] px-2 py-1">UGC</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="team-card bg-black bg-opacity-50 border border-gray-800 p-8 transition-all duration-300 hover:glow-box"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-[#13FFAA] flex items-center justify-center text-2xl font-bold text-black mr-4"> |
|
|
RR |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold">@roi_ripper</h3> |
|
|
<p class="text-gray-400 inter-font">Scaling Specialist</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 inter-font mb-4"> |
|
|
Scaling UAC in Tier 3 for finance. 6.2x ROAS at $50K/day. Blackbox optimization algorithms. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs bg-gray-900 text-[#13FFAA] px-2 py-1">UAC</span> |
|
|
<span class="text-xs bg-gray-900 text-[#13FFAA] px-2 py-1">Programmatic</span> |
|
|
<span class="text-xs bg-gray-900 text-[#13FFAA] px-2 py-1">Native</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<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="relative"> |
|
|
<div class="w-full h-auto rounded-lg overflow-hidden border-4 border-[#13FFAA]"> |
|
|
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Timur" class="w-full h-auto"> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 -right-4 bg-[#4477FF] text-black px-4 py-2 font-bold"> |
|
|
Founder |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Timur</h2> |
|
|
<p class="text-xl text-gray-300 inter-font mb-8"> |
|
|
Founder of TMT. Architect of high-scale arbitrage systems. Known for structuring teams that convert performance into infrastructure. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 mb-8"> |
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-4 flex-1 min-w-[200px]"> |
|
|
<div class="text-[#13FFAA] text-2xl mb-2"> |
|
|
<i class="fas fa-chess"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Strategic Vision</h3> |
|
|
<p class="text-gray-300 text-sm inter-font"> |
|
|
Identifies market opportunities 6-12 months before they become mainstream. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-black bg-opacity-50 border border-gray-800 p-4 flex-1 min-w-[200px]"> |
|
|
<div class="text-[#13FFAA] text-2xl mb-2"> |
|
|
<i class="fas fa-network-wired"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">System Architecture</h3> |
|
|
<p class="text-gray-300 text-sm inter-font"> |
|
|
Designs performance systems that scale beyond individual operator limits. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="bg-[#13FFAA] text-black hover:bg-transparent hover:text-[#13FFAA] border border-[#13FFAA] px-6 py-3 rounded-none font-medium transition-all duration-300 flex items-center"> |
|
|
<i class="fab fa-instagram mr-2"></i> Instagram |
|
|
</a> |
|
|
<a href="#" class="bg-transparent border border-[#4477FF] text-[#4477FF] hover:bg-[#4477FF] hover:text-black px-6 py-3 rounded-none font-medium transition-all duration-300 flex items-center"> |
|
|
<i class="fab fa-youtube mr-2"></i> YouTube Interview |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-black to-[#0B0B0F] relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">Partners</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto inter-font"> |
|
|
We move volume across all major verticals |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-16"> |
|
|
<div class="flex items-center justify-center p-6 bg-black bg-opacity-50 border border-gray-800 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-4xl text-[#13FFAA]"> |
|
|
<i class="fas fa-dice"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center p-6 bg-black bg-opacity-50 border border-gray-800 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-4xl text-[#13FFAA]"> |
|
|
<i class="fas fa-coins"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center p-6 bg-black bg-opacity-50 border border-gray-800 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-4xl text-[#13FFAA]"> |
|
|
<i class="fas fa-heartbeat"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center p-6 bg-black bg-opacity-50 border border-gray-800 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-4xl text-[#13FFAA]"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center p-6 bg-black bg-opacity-50 border border-gray-800 hover:border-[#13FFAA] transition-all duration-300"> |
|
|
<div class="text-4xl text-[#13FFAA]"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-black bg-opacity-50 border-l-4 border-[#13FFAA] p-8 relative"> |
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-[#13FFAA]"></div> |
|
|
<div class="text-xl italic mb-4 inter-font"> |
|
|
"TMT consistently delivers volume with quality traffic that converts. They've become one of our top 3 partners across all verticals." |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-[#13FFAA] font-bold">— Top 3 CPA Network</div> |
|
|
<div class="text-sm text-gray-400">Head of Affiliate Relations</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 relative overflow-hidden grid-pattern"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-8"> |
|
|
Let's not talk theory. <span class="text-[#13FFAA]">Let's talk numbers.</span> |
|
|
</h2> |
|
|
<p class="text-xl md:text-2xl mb-12 inter-font"> |
|
|
Have volume? Need control? |
|
|
</p> |
|
|
<a href="#" class="inline-block bg-[#13FFAA] text-black hover:bg-transparent hover:text-[#13FFAA] border-2 border-[#13FFAA] px-12 py-4 rounded-none font-bold text-lg transition-all duration-300 pulse"> |
|
|
<i class="fab fa-telegram-plane mr-2"></i> Connect via Telegram |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 border-t border-gray-900"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="text-xl font-bold mb-4 md:mb-0"> |
|
|
<span class="text-[#13FFAA]">TMT</span> — Built for real scale. |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-2xl text-gray-400 hover:text-[#13FFAA] transition-all duration-300"> |
|
|
<i class="fab fa-telegram-plane"></i> |
|
|
</a> |
|
|
<a href="#" class="text-2xl text-gray-400 hover:text-[#13FFAA] transition-all duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-2xl text-gray-400 hover:text-[#13FFAA] transition-all duration-300"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-[#13FFAA] text-black w-12 h-12 rounded-full flex items-center justify-center opacity-0 invisible transition-all duration-300"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const cursor = document.getElementById('cursor-trail'); |
|
|
let posX = 0, posY = 0; |
|
|
let mouseX = 0, mouseY = 0; |
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
|
mouseX = e.clientX; |
|
|
mouseY = e.clientY; |
|
|
}); |
|
|
|
|
|
function updateCursor() { |
|
|
posX += (mouseX - posX) / 9; |
|
|
posY += (mouseY - posY) / 9; |
|
|
|
|
|
cursor.style.left = posX + 'px'; |
|
|
cursor.style.top = posY + 'px'; |
|
|
|
|
|
requestAnimationFrame(updateCursor); |
|
|
} |
|
|
|
|
|
updateCursor(); |
|
|
|
|
|
|
|
|
const glitchElements = document.querySelectorAll('.glitch-hover'); |
|
|
glitchElements.forEach(el => { |
|
|
el.setAttribute('data-text', el.textContent); |
|
|
}); |
|
|
|
|
|
|
|
|
const counters = document.querySelectorAll('.counter'); |
|
|
const speed = 200; |
|
|
|
|
|
counters.forEach(counter => { |
|
|
const target = +counter.getAttribute('data-target'); |
|
|
const count = +counter.innerText; |
|
|
const increment = target / speed; |
|
|
|
|
|
if(count < target) { |
|
|
counter.innerText = Math.ceil(count + increment); |
|
|
setTimeout(updateCount, 1); |
|
|
} else { |
|
|
counter.innerText = target; |
|
|
} |
|
|
|
|
|
function updateCount() { |
|
|
const count = +counter.innerText; |
|
|
const increment = target / speed; |
|
|
|
|
|
if(count < target) { |
|
|
counter.innerText = Math.ceil(count + increment); |
|
|
setTimeout(updateCount, 1); |
|
|
} else { |
|
|
counter.innerText = target; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if(targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if(targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 100, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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/tmt5633" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
