|
|
<!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> |
|
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
background-color: #0E0E0E; |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 10px rgba(246, 252, 121, 0.7), 0 0 20px rgba(246, 252, 121, 0.5); |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
box-shadow: 0 0 15px rgba(246, 252, 121, 0.5); |
|
|
border: 1px solid rgba(246, 252, 121, 0.3); |
|
|
} |
|
|
|
|
|
.neon-hover:hover { |
|
|
text-shadow: 0 0 15px rgba(246, 252, 121, 0.9), 0 0 25px rgba(246, 252, 121, 0.7); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(15, 15, 15, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.glow-on-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glow-on-hover:hover { |
|
|
box-shadow: 0 0 20px rgba(246, 252, 121, 0.5); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.counter { |
|
|
font-variant-numeric: tabular-nums; |
|
|
} |
|
|
|
|
|
.team-avatar { |
|
|
filter: drop-shadow(0 0 10px rgba(246, 252, 121, 0.5)); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.team-avatar:hover { |
|
|
filter: drop-shadow(0 0 15px rgba(246, 252, 121, 0.8)); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.particles { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background-color: rgba(246, 252, 121, 0.5); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.tech-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tech-icon:hover { |
|
|
transform: scale(1.1) rotate(5deg); |
|
|
filter: drop-shadow(0 0 10px rgba(246, 252, 121, 0.7)); |
|
|
} |
|
|
|
|
|
.case-study-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.case-study-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 10px 25px rgba(246, 252, 121, 0.3); |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(246, 252, 121, 0.7); } |
|
|
70% { box-shadow: 0 0 0 15px rgba(246, 252, 121, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(246, 252, 121, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="particles-js" class="particles"></div> |
|
|
|
|
|
|
|
|
<section class="min-h-screen flex items-center justify-center relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-black opacity-50 z-0"></div> |
|
|
<div class="container mx-auto px-6 z-10"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<h1 class="text-6xl md:text-8xl font-bold mb-6 neon-text">TRAFFIC MONSTERS TEAM</h1> |
|
|
<p class="text-xl md:text-2xl mb-12 text-gray-300">We don't run traffic. We dominate it.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="#" class="px-8 py-4 bg-[#f6fc79] text-black font-bold rounded-full glow-on-hover flex items-center justify-center gap-2"> |
|
|
<i class="fab fa-telegram text-xl"></i> Join Telegram |
|
|
</a> |
|
|
<a href="#case-studies" class="px-8 py-4 glass-card font-bold rounded-full glow-on-hover flex items-center justify-center gap-2 neon-border"> |
|
|
<i class="fas fa-folder-open"></i> View Case Studies |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text">MONSTER STATS</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">70+ media buyers | $5M+ revenue | 15+ traffic sources | 100+ working offers</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div class="glass-card p-8 rounded-xl text-center glow-on-hover"> |
|
|
<div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="70">0</div> |
|
|
<p class="text-gray-300">Media Buyers</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center glow-on-hover"> |
|
|
<div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="5">0</div> |
|
|
<p class="text-gray-300">Million+ Revenue</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center glow-on-hover"> |
|
|
<div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="15">0</div> |
|
|
<p class="text-gray-300">Traffic Sources</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl text-center glow-on-hover"> |
|
|
<div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="100">0</div> |
|
|
<p class="text-gray-300">Working Offers</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-[#0E0E0E] to-[#1a1a1a]"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text">WHY TMT?</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">Here's what makes us different from other media buying teams</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="glass-card p-8 rounded-xl glow-on-hover group"> |
|
|
<div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Fast start for juniors</h3> |
|
|
<p class="text-gray-300">We provide all the tools and knowledge to get you profitable in record time.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl glow-on-hover group"> |
|
|
<div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300"> |
|
|
<i class="fas fa-crosshairs"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Experts in every vertical</h3> |
|
|
<p class="text-gray-300">No matter your niche, we have specialists who've already scaled it.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl glow-on-hover group"> |
|
|
<div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300"> |
|
|
<i class="fas fa-layer-group"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Full-stack solutions</h3> |
|
|
<p class="text-gray-300">Creatives, landers, offers, bots - everything you need in one place.</p> |
|
|
</div> |
|
|
<div class="glass-card p-8 rounded-xl glow-on-hover group"> |
|
|
<div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Real ROI, real support</h3> |
|
|
<p class="text-gray-300">No fluff, just proven strategies and 24/7 support from top performers.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="case-studies" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text">CASE STUDIES</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">Real campaigns from our media buyers</p> |
|
|
|
|
|
<div class="flex justify-center mt-8 gap-4"> |
|
|
<button class="px-6 py-2 glass-card rounded-full glow-on-hover active">All</button> |
|
|
<button class="px-6 py-2 glass-card rounded-full glow-on-hover">FB</button> |
|
|
<button class="px-6 py-2 glass-card rounded-full glow-on-hover">TikTok</button> |
|
|
<button class="px-6 py-2 glass-card rounded-full glow-on-hover">Google</button> |
|
|
<button class="px-6 py-2 glass-card rounded-full glow-on-hover">Push</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="case-study-card glass-card p-6 rounded-xl"> |
|
|
<div class="mb-4"> |
|
|
<span class="px-3 py-1 bg-[#f6fc79] text-black rounded-full text-sm font-bold">Facebook</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">CBD E-commerce</h3> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Spend</p> |
|
|
<p class="font-bold">$87,420</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">ROI</p> |
|
|
<p class="font-bold text-[#f6fc79]">+217%</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Scaled from $200/day to $5k/day using custom creatives and lookalike stacking.</p> |
|
|
<div class="h-40 bg-gray-800 rounded-lg mb-4 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-bar text-4xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="case-study-card glass-card p-6 rounded-xl"> |
|
|
<div class="mb-4"> |
|
|
<span class="px-3 py-1 bg-[#f6fc79] text-black rounded-full text-sm font-bold">TikTok</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Dietary Supplement</h3> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Spend</p> |
|
|
<p class="font-bold">$142,650</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">ROI</p> |
|
|
<p class="font-bold text-[#f6fc79]">+189%</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Vertical video strategy with UGC content generated 7-figures in 3 months.</p> |
|
|
<div class="h-40 bg-gray-800 rounded-lg mb-4 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-pie text-4xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="case-study-card glass-card p-6 rounded-xl"> |
|
|
<div class="mb-4"> |
|
|
<span class="px-3 py-1 bg-[#f6fc79] text-black rounded-full text-sm font-bold">Google Ads</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-2">Insurance Lead Gen</h3> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">Spend</p> |
|
|
<p class="font-bold">$328,900</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">ROI</p> |
|
|
<p class="font-bold text-[#f6fc79]">+312%</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Custom landing page with chatbot integration increased conversions by 47%.</p> |
|
|
<div class="h-40 bg-gray-800 rounded-lg mb-4 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-4xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-[#1a1a1a] to-[#0E0E0E]"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text">THE MONSTERS</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">Meet some of our elite media buyers</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex overflow-x-auto pb-8 gap-8 team-scroll"> |
|
|
<div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center"> |
|
|
<i class="fas fa-user-secret text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">@roi_monster</h3> |
|
|
<p class="text-sm text-gray-300">Scaling TikTok since 2020</p> |
|
|
<div class="mt-4 text-[#f6fc79]"> |
|
|
<i class="fas fa-trophy mr-2"></i> |
|
|
<i class="fas fa-fire mr-2"></i> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">@bm_hacker</h3> |
|
|
<p class="text-sm text-gray-300">25+ business managers running</p> |
|
|
<div class="mt-4 text-[#f6fc79]"> |
|
|
<i class="fab fa-facebook mr-2"></i> |
|
|
<i class="fas fa-code mr-2"></i> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center"> |
|
|
<i class="fas fa-hat-wizard text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">@creative_wizard</h3> |
|
|
<p class="text-sm text-gray-300">UGC that converts at 5.8% CTR</p> |
|
|
<div class="mt-4 text-[#f6fc79]"> |
|
|
<i class="fas fa-photo-video mr-2"></i> |
|
|
<i class="fas fa-magic mr-2"></i> |
|
|
<i class="fas fa-eye"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center"> |
|
|
<i class="fas fa-ghost text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">@stealth_ghost</h3> |
|
|
<p class="text-sm text-gray-300">Google Ads ninja</p> |
|
|
<div class="mt-4 text-[#f6fc79]"> |
|
|
<i class="fab fa-google mr-2"></i> |
|
|
<i class="fas fa-search-dollar mr-2"></i> |
|
|
<i class="fas fa-user-ninja"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center"> |
|
|
<i class="fas fa-dragon text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1">@push_dragon</h3> |
|
|
<p class="text-sm text-gray-300">Push traffic dominator</p> |
|
|
<div class="mt-4 text-[#f6fc79]"> |
|
|
<i class="fas fa-mobile-alt mr-2"></i> |
|
|
<i class="fas fa-bullhorn mr-2"></i> |
|
|
<i class="fas fa-coins"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="glass-card rounded-xl p-8 md:p-12 max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-8"> |
|
|
<div class="w-full md:w-1/3 text-center"> |
|
|
<div class="w-48 h-48 rounded-full bg-gray-800 mx-auto mb-4 relative overflow-hidden team-avatar pulse"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Timur" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold">Timur</h3> |
|
|
<p class="text-[#f6fc79]">Founder & Lead Media Buyer</p> |
|
|
</div> |
|
|
<div class="w-full md:w-2/3"> |
|
|
<h2 class="text-3xl font-bold mb-6 neon-text">MEET THE FOUNDER</h2> |
|
|
<p class="text-gray-300 mb-6">Timur is the mastermind behind TMT — a top-tier media buying leader and creator of the Traffic Master course. With over 7 years of experience scaling campaigns across all major platforms, he's built a team of elite media buyers who consistently dominate their verticals.</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#" class="px-6 py-3 glass-card rounded-full glow-on-hover flex items-center gap-2"> |
|
|
<i class="fab fa-instagram text-[#f6fc79]"></i> Instagram |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 glass-card rounded-full glow-on-hover flex items-center gap-2"> |
|
|
<i class="fab fa-youtube text-[#f6fc79]"></i> YouTube Interview |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-[#0E0E0E] to-[#1a1a1a]"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text">READY TO MASTER TRAFFIC WITH THE BEST?</h2> |
|
|
<p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">No forms. No resumes. Just action.</p> |
|
|
<a href="#" class="px-10 py-5 bg-[#f6fc79] text-black font-bold rounded-full glow-on-hover text-xl flex items-center justify-center gap-3 mx-auto max-w-xs"> |
|
|
<i class="fab fa-telegram text-2xl"></i> Contact via Telegram |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 neon-text">OUR TECH STACK</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">Tools and platforms we use to dominate traffic</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-8 md:gap-16"> |
|
|
<div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-server text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-facebook text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-tiktok text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-google text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
<div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-mobile-alt text-3xl text-[#f6fc79]"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 border-t border-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="flex gap-6 mb-6"> |
|
|
<a href="#" class="text-2xl text-gray-400 hover:text-[#f6fc79] transition-colors"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-2xl text-gray-400 hover:text-[#f6fc79] transition-colors"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-2xl text-gray-400 hover:text-[#f6fc79] transition-colors"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-400">© TMT – Built to scale.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
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(updateCounter, 1); |
|
|
} else { |
|
|
counter.innerText = target; |
|
|
} |
|
|
|
|
|
function updateCounter() { |
|
|
const count = +counter.innerText; |
|
|
if(count < target) { |
|
|
counter.innerText = Math.ceil(count + increment); |
|
|
setTimeout(updateCounter, 1); |
|
|
} else { |
|
|
counter.innerText = target; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const particlesContainer = document.getElementById('particles-js'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for(let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 3 + 2; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
particle.style.left = `${Math.random() * 100}%`; |
|
|
particle.style.top = `${Math.random() * 100}%`; |
|
|
|
|
|
|
|
|
particle.style.opacity = Math.random() * 0.5 + 0.1; |
|
|
|
|
|
|
|
|
particle.style.animation = `floating ${Math.random() * 10 + 5}s ease-in-out infinite`; |
|
|
particle.style.animationDelay = `${Math.random() * 5}s`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
|
|
|
|
|
|
const glow = document.createElement('div'); |
|
|
glow.classList.add('fixed', 'w-64', 'h-64', 'rounded-full', 'bg-[#f6fc79]', 'opacity-10', 'blur-3xl', '-z-10', 'pointer-events-none'); |
|
|
document.body.appendChild(glow); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
glow.style.left = `${e.clientX - 128}px`; |
|
|
glow.style.top = `${e.clientY - 128}px`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const filterButtons = document.querySelectorAll('#case-studies button'); |
|
|
filterButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
filterButtons.forEach(btn => btn.classList.remove('bg-[#f6fc79]', 'text-black')); |
|
|
button.classList.add('bg-[#f6fc79]', 'text-black'); |
|
|
|
|
|
}); |
|
|
}); |
|
|
</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/tmt41" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
