|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TRAFFIC MONSTERS — THE SERIES</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Inter:wght@400;500&display=swap"> |
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
|
|
<style> |
|
|
@keyframes filmGrain { |
|
|
0% { background-position: 0 0; } |
|
|
100% { background-position: 100px 100px; } |
|
|
} |
|
|
@keyframes slideUp { |
|
|
0% { transform: translateY(30px); opacity: 0; } |
|
|
100% { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
@keyframes flicker { |
|
|
0% { opacity: 0.8; } |
|
|
50% { opacity: 0.2; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
@keyframes glow { |
|
|
0% { text-shadow: 0 0 5px rgba(255, 0, 85, 0.5); } |
|
|
50% { text-shadow: 0 0 20px rgba(255, 0, 85, 0.9); } |
|
|
100% { text-shadow: 0 0 5px rgba(255, 0, 85, 0.5); } |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0A0A0A; |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
.film-grain { |
|
|
position: relative; |
|
|
} |
|
|
.film-grain::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>'); |
|
|
animation: filmGrain 3s steps(10) infinite; |
|
|
pointer-events: none; |
|
|
z-index: 1; |
|
|
} |
|
|
.title-font { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
} |
|
|
.slide-up { |
|
|
animation: slideUp 1s ease-out forwards; |
|
|
} |
|
|
.flicker { |
|
|
animation: flicker 0.3s ease-in-out; |
|
|
} |
|
|
.glow-text { |
|
|
animation: glow 2s infinite; |
|
|
} |
|
|
.neon-border { |
|
|
box-shadow: 0 0 10px rgba(98, 0, 255, 0.5), 0 0 20px rgba(98, 0, 255, 0.3); |
|
|
} |
|
|
.neon-border:hover { |
|
|
box-shadow: 0 0 15px rgba(98, 0, 255, 0.8), 0 0 30px rgba(98, 0, 255, 0.5); |
|
|
} |
|
|
.avatar-hover:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 20px rgba(98, 0, 255, 0.8); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.spotlight { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.spotlight::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); |
|
|
transform: rotate(30deg); |
|
|
pointer-events: none; |
|
|
} |
|
|
.blur-in { |
|
|
filter: blur(5px); |
|
|
opacity: 0; |
|
|
transition: all 1s ease; |
|
|
} |
|
|
.blur-in.active { |
|
|
filter: blur(0); |
|
|
opacity: 1; |
|
|
} |
|
|
.scroll-section { |
|
|
scroll-snap-align: start; |
|
|
} |
|
|
.movie-poster { |
|
|
perspective: 1000px; |
|
|
} |
|
|
.movie-poster-inner { |
|
|
transition: transform 0.8s; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.movie-poster:hover .movie-poster-inner { |
|
|
transform: rotateY(10deg) rotateX(5deg); |
|
|
} |
|
|
.lens-flare { |
|
|
position: absolute; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
mix-blend-mode: screen; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative"> |
|
|
|
|
|
<div class="fixed inset-0 film-grain pointer-events-none z-50 opacity-10"></div> |
|
|
|
|
|
|
|
|
<section class="min-h-screen relative overflow-hidden bg-black flex items-center justify-center scroll-section"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-black/80 z-0"></div> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-30"></div> |
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10 text-center"> |
|
|
<h1 class="title-font text-6xl md:text-8xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 slide-up" style="animation-delay: 0.2s;"> |
|
|
TRAFFIC MONSTERS |
|
|
</h1> |
|
|
<h2 class="text-xl md:text-3xl font-light mb-12 text-gray-300 slide-up" style="animation-delay: 0.4s;"> |
|
|
When digital chaos meets masterful control. |
|
|
</h2> |
|
|
<div class="flex justify-center gap-6 slide-up" style="animation-delay: 0.6s;"> |
|
|
<a href="#" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-bold text-lg hover:scale-105 transition-transform duration-300 neon-border flex items-center"> |
|
|
🎟️ Enter the Premiere |
|
|
</a> |
|
|
<a href="#episodes" class="px-8 py-4 border border-purple-500 rounded-full font-bold text-lg hover:bg-purple-900/30 transition-colors duration-300 flex items-center"> |
|
|
📺 View Episodes |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-10 left-0 right-0 text-center animate-bounce"> |
|
|
<a href="#cast" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-chevron-down text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="cast" class="py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden scroll-section"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="title-font text-4xl md:text-5xl font-bold mb-4 text-center slide-up"> |
|
|
CAST OF LEGENDS |
|
|
</h2> |
|
|
<p class="text-xl text-center mb-16 text-gray-400 max-w-3xl mx-auto slide-up" style="animation-delay: 0.2s;"> |
|
|
Meet the actors who bring the digital drama to life |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10"> |
|
|
|
|
|
<div class="bg-gray-900/50 rounded-xl p-6 backdrop-blur-sm border border-gray-800 hover:border-purple-500 transition-all duration-300 movie-poster slide-up" style="animation-delay: 0.4s;"> |
|
|
<div class="movie-poster-inner"> |
|
|
<div class="relative mb-6 overflow-hidden rounded-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1887&auto=format&fit=crop" alt="The Strategist" class="w-full h-full object-cover avatar-hover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<h3 class="text-2xl font-bold">@roi_director</h3> |
|
|
<p class="text-purple-400">"The Strategist"</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Master of numbers and ROI. Orchestrates campaigns with military precision. Known for turning modest budgets into rivers of profit. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 rounded-xl p-6 backdrop-blur-sm border border-gray-800 hover:border-purple-500 transition-all duration-300 movie-poster slide-up" style="animation-delay: 0.6s;"> |
|
|
<div class="movie-poster-inner"> |
|
|
<div class="relative mb-6 overflow-hidden rounded-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1888&auto=format&fit=crop" alt="The Traffic Soldier" class="w-full h-full object-cover avatar-hover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<h3 class="text-2xl font-bold">@media_slinger</h3> |
|
|
<p class="text-blue-400">"The Traffic Soldier"</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Frontline warrior in the ad platforms. Specializes in scaling campaigns to 7-figures while maintaining profitability. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 rounded-xl p-6 backdrop-blur-sm border border-gray-800 hover:border-purple-500 transition-all duration-300 movie-poster slide-up" style="animation-delay: 0.8s;"> |
|
|
<div class="movie-poster-inner"> |
|
|
<div class="relative mb-6 overflow-hidden rounded-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop" alt="The Conversion Alchemist" class="w-full h-full object-cover avatar-hover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<h3 class="text-2xl font-bold">@funnel_sorcerer</h3> |
|
|
<p class="text-pink-400">"The Conversion Alchemist"</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Turns leads into gold. Designs funnels that convert at supernatural rates. The secret weapon behind our highest ROI campaigns. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden scroll-section"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="title-font text-4xl md:text-5xl font-bold mb-4 text-center slide-up"> |
|
|
STORYLINES |
|
|
</h2> |
|
|
<p class="text-xl text-center mb-16 text-gray-400 max-w-3xl mx-auto slide-up" style="animation-delay: 0.2s;"> |
|
|
The epic narratives we craft in the digital battlefield |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-900/80 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition-all duration-300 backdrop-blur-sm spotlight blur-in"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block px-3 py-1 bg-purple-900/50 text-purple-300 rounded-full text-sm font-bold">Season 1</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">The Great Scale</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Flooding platforms with targeted ads at volumes competitors can't match. Our signature move that turns campaigns into tidal waves. |
|
|
</p> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>📈 5-10x ROAS</span> |
|
|
<span>🔥 100+ campaigns</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/80 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition-all duration-300 backdrop-blur-sm spotlight blur-in" style="transition-delay: 0.1s;"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm font-bold">Season 2</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">The Funnel Labyrinth</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Landing pages that trap and convert visitors with psychological precision. Escape is not an option - only conversion remains. |
|
|
</p> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>🔄 3-5x CR</span> |
|
|
<span>🧠 12+ psychological triggers</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/80 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition-all duration-300 backdrop-blur-sm spotlight blur-in" style="transition-delay: 0.2s;"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block px-3 py-1 bg-pink-900/50 text-pink-300 rounded-full text-sm font-bold">Season 3</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-red-400">The Traffic Wars</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
FB vs TikTok battles for reach and dominance. We've mastered both platforms, knowing when to deploy each for maximum impact. |
|
|
</p> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>⚔️ 2-3x cheaper CPM</span> |
|
|
<span>📱 8+ ad formats</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/80 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition-all duration-300 backdrop-blur-sm spotlight blur-in" style="transition-delay: 0.3s;"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block px-3 py-1 bg-green-900/50 text-green-300 rounded-full text-sm font-bold">Season 4</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-teal-400">The Signal Hunters</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Analyzing metrics to predict winners before they emerge. Our data alchemy turns raw numbers into prophetic insights. |
|
|
</p> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>🔍 50+ tracked metrics</span> |
|
|
<span>⏱️ Real-time adjustments</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/80 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition-all duration-300 backdrop-blur-sm spotlight blur-in" style="transition-delay: 0.4s;"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block px-3 py-1 bg-yellow-900/50 text-yellow-300 rounded-full text-sm font-bold">Season 5</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">The Creative Forge</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Crafting videos that hypnotize viewers into taking action. Our creative arsenal contains the most converting creatives in the game. |
|
|
</p> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>🎬 1000+ creatives</span> |
|
|
<span>💡 5-8% CTR</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/80 rounded-xl p-6 border border-gray-800 hover:border-purple-500 transition-all duration-300 backdrop-blur-sm spotlight blur-in" style="transition-delay: 0.5s;"> |
|
|
<div class="mb-4"> |
|
|
<span class="inline-block px-3 py-1 bg-red-900/50 text-red-300 rounded-full text-sm font-bold">Season 6</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-purple-400">The Black Ops</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Classified strategies we can't discuss publicly. The most effective methods are often the ones we can't talk about. |
|
|
</p> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>🕵️♂️ Need-to-know basis</span> |
|
|
<span>🚀 10-20x ROI</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="episodes" class="py-20 bg-black relative overflow-hidden scroll-section"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="title-font text-4xl md:text-5xl font-bold mb-4 text-center slide-up"> |
|
|
EPISODES |
|
|
</h2> |
|
|
<p class="text-xl text-center mb-16 text-gray-400 max-w-3xl mx-auto slide-up" style="animation-delay: 0.2s;"> |
|
|
Our greatest hits - case studies that changed the game |
|
|
</p> |
|
|
|
|
|
<div class="episodes-carousel flicker"> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center mb-20 blur-in"> |
|
|
<div class="relative rounded-2xl overflow-hidden h-96 movie-poster"> |
|
|
<div class="movie-poster-inner h-full"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" alt="Episode 1" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-6"> |
|
|
<span class="inline-block px-3 py-1 bg-purple-900/50 text-purple-300 rounded-full text-sm font-bold mb-2">Episode 1</span> |
|
|
<h3 class="text-3xl font-bold mb-2">"Crushing Finance Offers in Tier 1"</h3> |
|
|
<div class="flex gap-4 text-sm"> |
|
|
<span class="flex items-center"><i class="fas fa-chart-line mr-2 text-green-400"></i> 8.7x ROI</span> |
|
|
<span class="flex items-center"><i class="fas fa-dollar-sign mr-2 text-yellow-400"></i> $1.2M+ profit</span> |
|
|
<span class="flex items-center"><i class="fas fa-clock mr-2 text-blue-400"></i> 3 months</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-purple-400 mb-2">THE CHALLENGE</h4> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Breaking into the ultra-competitive Tier 1 finance vertical with established players dominating the space. Needed to find angles that could outperform incumbents with 10x our budget. |
|
|
</p> |
|
|
|
|
|
<h4 class="text-lg font-bold text-purple-400 mb-2">THE BREAKTHROUGH</h4> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Developed a proprietary audience segmentation model that identified 12 micro-niches within the broader finance demographic. Created hyper-targeted creatives for each segment, resulting in 3-5x higher CTR than industry benchmarks. |
|
|
</p> |
|
|
|
|
|
<h4 class="text-lg font-bold text-purple-400 mb-2">THE RESULT</h4> |
|
|
<p class="text-gray-300"> |
|
|
Scaled to $150k/day in spend while maintaining 8.7x ROI. Became top performer across 3 affiliate networks simultaneously. Campaign ran profitably for 9 months before saturation. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center mb-20 blur-in" style="transition-delay: 0.2s;"> |
|
|
<div class="relative rounded-2xl overflow-hidden h-96 movie-poster lg:order-2"> |
|
|
<div class="movie-poster-inner h-full"> |
|
|
<img src="https://images.unsplash.com/photo-1616512659455-111e336ac9f3?q=80&w=2070&auto=format&fit=crop" alt="Episode 2" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-6"> |
|
|
<span class="inline-block px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm font-bold mb-2">Episode 2</span> |
|
|
<h3 class="text-3xl font-bold mb-2">"Triple ROI Blitz in Betting Vertical"</h3> |
|
|
<div class="flex gap-4 text-sm"> |
|
|
<span class="flex items-center"><i class="fas fa-chart-line mr-2 text-green-400"></i> 3.2x ROI</span> |
|
|
<span class="fas fa-dollar-sign mr-2 text-yellow-400"></i> $780k profit</span> |
|
|
<span class="fas fa-clock mr-2 text-blue-400"></i> 6 weeks</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:order-1"> |
|
|
<h4 class="text-lg font-bold text-blue-400 mb-2">THE CHALLENGE</h4> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Entering the saturated betting market where most campaigns barely break even. Needed to find untapped angles that could deliver consistent ROI in a space known for volatility. |
|
|
</p> |
|
|
|
|
|
<h4 class="text-lg font-bold text-blue-400 mb-2">THE BREAKTHROUGH</h4> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Developed a real-time odds tracking system that triggered ads based on live sporting events. Created dynamic creatives that changed based on current games, scores, and betting trends. |
|
|
</p> |
|
|
|
|
|
<h4 class="text-lg font-bold text-blue-400 mb-2">THE RESULT</h4> |
|
|
<p class="text-gray-300"> |
|
|
Achieved 3.2x ROI while competitors averaged 1.1-1.3x. Scaled to $50k/day within 3 weeks. Our betting playbook became the gold standard for 5 major networks. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center blur-in" style="transition-delay: 0.4s;"> |
|
|
<div class="relative rounded-2xl overflow-hidden h-96 movie-poster"> |
|
|
<div class="movie-poster-inner h-full"> |
|
|
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2070&auto=format&fit=crop" alt="Episode 3" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-6"> |
|
|
<span class="inline-block px-3 py-1 bg-pink-900/50 text-pink-300 rounded-full text-sm font-bold mb-2">Episode 3</span> |
|
|
<h3 class="text-3xl font-bold mb-2">"Scaling TikTok Traffic to 7 Figures"</h3> |
|
|
<div class="flex gap-4 text-sm"> |
|
|
<span class="flex items-center"><i class="fas fa-chart-line mr-2 text-green-400"></i> 5.5x ROI</span> |
|
|
<span class="fas fa-dollar-sign mr-2 text-yellow-400"></i> $2.1M+ profit</span> |
|
|
<span class="fas fa-clock mr-2 text-blue-400"></i> 4 months</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-pink-400 mb-2">THE CHALLENGE</h4> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
TikTok's unpredictable algorithm made consistent scaling difficult. Most advertisers experienced boom-bust cycles. We needed to crack the code for sustainable growth. |
|
|
</p> |
|
|
|
|
|
<h4 class="text-lg font-bold text-pink-400 mb-2">THE BREAKTHROUGH</h4> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Developed a content velocity system that maintained optimal posting frequency without triggering algorithm penalties. Created a viral content framework that achieved 12-18% engagement rates. |
|
|
</p> |
|
|
|
|
|
<h4 class="text-lg font-bold text-pink-400 mb-2">THE RESULT</h4> |
|
|
<p class="text-gray-300"> |
|
|
Scaled to $1.2M/month in profit across 3 different offers. Our TikTok mastery became so renowned that we began consulting for major brands looking to crack the platform. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden scroll-section"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="relative rounded-2xl overflow-hidden h-full min-h-96 max-w-2xl mx-auto"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1887&auto=format&fit=crop" alt="Timur" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-6"> |
|
|
<h3 class="text-3xl font-bold mb-2">TIMUR</h3> |
|
|
<p class="text-purple-300">Showrunner & Master Strategist</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="blur-in"> |
|
|
<h2 class="title-font text-4xl md:text-5xl font-bold mb-6"> |
|
|
THE <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">SHOWRUNNER</span> |
|
|
</h2> |
|
|
<p class="text-lg text-gray-300 mb-6"> |
|
|
Timur is the mastermind behind the greatest traffic tales. Architect of strategy, chaos wrangler, mentor to digital warriors. With over 8 years in the trenches, he's seen every algorithm change, every ban wave, and every "impossible" challenge - and turned them into opportunities. |
|
|
</p> |
|
|
<p class="text-lg text-gray-300 mb-8"> |
|
|
His philosophy? "Traffic is psychology first, technology second. Understand what makes people tick, and no algorithm update can stop you." |
|
|
</p> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-bold hover:scale-105 transition-transform duration-300 neon-border flex items-center"> |
|
|
<i class="fab fa-instagram mr-2"></i> Behind the Scenes |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 border border-purple-500 rounded-full font-bold hover:bg-purple-900/30 transition-colors duration-300 flex items-center"> |
|
|
<i class="fab fa-youtube mr-2"></i> Full Interview |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900 relative overflow-hidden scroll-section"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="title-font text-4xl md:text-5xl font-bold mb-4 text-center slide-up"> |
|
|
GUEST STARS |
|
|
</h2> |
|
|
<p class="text-xl text-center mb-16 text-gray-400 max-w-3xl mx-auto slide-up" style="animation-delay: 0.2s;"> |
|
|
The elite networks and verticals we've collaborated with |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 blur-in"> |
|
|
<div class="bg-gray-800/50 rounded-xl p-6 flex items-center justify-center h-32 border border-gray-700 hover:border-purple-500 transition-all duration-300"> |
|
|
<span class="text-xl font-bold text-gray-300">ClickDealer</span> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-xl p-6 flex items-center justify-center h-32 border border-gray-700 hover:border-purple-500 transition-all duration-300"> |
|
|
<span class="text-xl font-bold text-gray-300">MaxBounty</span> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-xl p-6 flex items-center justify-center h-32 border border-gray-700 hover:border-purple-500 transition-all duration-300"> |
|
|
<span class="text-xl font-bold text-gray-300">OGAds</span> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-xl p-6 flex items-center justify-center h-32 border border-gray-700 hover:border-purple-500 transition-all duration-300"> |
|
|
<span class="text-xl font-bold text-gray-300">CPAlead</span> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-xl p-6 flex items-center justify-center h-32 border border-gray-700 hover:border-purple-500 transition-all duration-300"> |
|
|
<span class="text-xl font-bold text-gray-300">AdCombo</span> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-xl p-6 flex items-center justify-center h-32 border border-gray-700 hover:border-purple-500 transition-all duration-300"> |
|
|
<span class="text-xl font-bold text-gray-300">Advertise</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 blur-in" style="transition-delay: 0.2s;"> |
|
|
<div class="bg-gradient-to-br from-purple-900/30 to-purple-900/10 rounded-xl p-6 border border-purple-900/50 text-center"> |
|
|
<div class="text-4xl mb-3">🎰</div> |
|
|
<h3 class="text-xl font-bold mb-2">Gambling</h3> |
|
|
<p class="text-sm text-gray-400">Sports betting, casinos, poker</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-blue-900/30 to-blue-900/10 rounded-xl p-6 border border-blue-900/50 text-center"> |
|
|
<div class="text-4xl mb-3">💊</div> |
|
|
<h3 class="text-xl font-bold mb-2">Nutra</h3> |
|
|
<p class="text-sm text-gray-400">Supplements, weight loss, health</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-green-900/30 to-green-900/10 rounded-xl p-6 border border-green-900/50 text-center"> |
|
|
<div class="text-4xl mb-3">🔌</div> |
|
|
<h3 class="text-xl font-bold mb-2">Utilities</h3> |
|
|
<p class="text-sm text-gray-400">VPNs, software, tools</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-red-900/30 to-red-900/10 rounded-xl p-6 border border-red-900/50 text-center"> |
|
|
<div class="text-4xl mb-3">💰</div> |
|
|
<h3 class="text-xl font-bold mb-2">Finance</h3> |
|
|
<p class="text-sm text-gray-400">Loans, credit, investments</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="min-h-[60vh] relative overflow-hidden bg-black flex items-center justify-center scroll-section"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-black/80 z-0"></div> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div> |
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10 text-center"> |
|
|
<h2 class="title-font text-4xl md:text-6xl font-bold mb-6 glow-text"> |
|
|
THE STAGE IS SET.<br>THE FLOW AWAITS. |
|
|
</h2> |
|
|
<p class="text-xl md:text-2xl font-light mb-12 text-gray-300"> |
|
|
Will you be a part of the next episode? |
|
|
</p> |
|
|
<div class="flex justify-center"> |
|
|
<a href="#" class="px-10 py-5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-bold text-xl hover:scale-105 transition-transform duration-300 neon-border flex items-center"> |
|
|
🎟️ Enter the Premiere |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 bg-black relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h3 class="title-font text-2xl font-bold mb-2">TRAFFIC MONSTERS</h3> |
|
|
<p class="text-gray-500 text-sm">© 2025 TMT — Powered by Strategy, Forged by Chaos.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300 text-xl"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300 text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300 text-xl"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 pt-6 border-t border-gray-800 text-center"> |
|
|
<a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-arrow-up mr-2"></i> Back to the Trailer |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.blur-in').forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
|
|
|
|
|
|
function createLensFlare() { |
|
|
const flare = document.createElement('div'); |
|
|
flare.className = 'lens-flare'; |
|
|
|
|
|
|
|
|
const x = Math.random() * window.innerWidth; |
|
|
const y = Math.random() * window.innerHeight; |
|
|
|
|
|
|
|
|
const size = 50 + Math.random() * 150; |
|
|
|
|
|
flare.style.width = `${size}px`; |
|
|
flare.style.height = `${size}px`; |
|
|
flare.style.left = `${x}px`; |
|
|
flare.style.top = `${y}px`; |
|
|
flare.style.opacity = 0.3 + Math.random() * 0.7; |
|
|
|
|
|
document.body.appendChild(flare); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
flare.remove(); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(createLensFlare, 3000); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 3; i++) { |
|
|
setTimeout(createLensFlare, i * 500); |
|
|
} |
|
|
|
|
|
|
|
|
const carousel = document.querySelector('.episodes-carousel'); |
|
|
setInterval(() => { |
|
|
carousel.classList.add('flicker'); |
|
|
setTimeout(() => { |
|
|
carousel.classList.remove('flicker'); |
|
|
}, 300); |
|
|
}, 10000); |
|
|
</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/tmtserial" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
