Spaces:

timoon811
/

tmt53

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

4611542

verified ·

1 Parent(s): cf2d382

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +763 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tmt53
-emoji: 🏆
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tmt53
+emoji: 🐳
+colorFrom: green
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,763 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+    <!-- Custom Cursor -->
+    <div class="cursor"></div>
+    <div class="cursor-follower"></div>
+    <!-- Hero Section -->
+    <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>
+    <!-- Stats 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>
+    <!-- Capabilities 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>
+    <!-- Case Studies 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>
+    <!-- Founder 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>
+    <!-- Team Culture 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>
+    <!-- Partners 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>
+    <!-- CTA 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 -->
+    <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>
+        // Custom cursor
+        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);
+        });
+        // Magnetic buttons
+        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';
+            });
+        });
+        // Animated counters
+        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; // 2 seconds
+            const interval = 20; // update every 20ms
+            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);
+        }
+        // Initialize GSAP animations
+        document.addEventListener('DOMContentLoaded', () => {
+            // Animate counters when stats section comes into view
+            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);
+            // Create particle background
+            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');
+                // Random position
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100;
+                // Random size
+                const size = Math.random() * 3 + 1;
+                // Random animation duration
+                const duration = Math.random() * 10 + 5;
+                // Random delay
+                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);
+            }
+            // Add floating animation
+            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 animations for sections
+            gsap.registerPlugin(ScrollTrigger);
+            gsap.utils.toArray('section').forEach((section, i) => {
+                if (i > 0) { // Skip hero section
+                    gsap.from(section, {
+                        scrollTrigger: {
+                            trigger: section,
+                            start: "top 80%",
+                            toggleActions: "play none none none"
+                        },
+                        opacity: 0,
+                        y: 50,
+                        duration:
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ✅ FULL PROMPT — TMT (Traffic Monsters Team) — ELITE PERFORMANCE TEAM WEBSITE Create a one-page futuristic agency website for a global digital performance team called Traffic Monsters Team (TMT). This is not a course or education project. It’s a closed, elite media buying team working with high-volume offers (Gambling, Betting, Finance, Nutra, etc). The site will be viewed by partners, advertisers, top candidates, and competitors. It must feel powerful, structured, and high-end — like a black-budget agency or cyber consultancy. 🔲 Brand Identity: • Name: Traffic Monsters Team (TMT) • Tone: Elite, brutalist, technical, futuristic • Design Style: Smart brutalism + glassmorphism + cyberpunk • Background: #0B0B0F (Graphite Black) • Accents: • #13FFAA (Cyber Mint – glowing primary) • #4477FF (Neon Cobalt – secondary highlight) • #F2F2F2 (for neutral text) • Fonts: • Headlines: Space Grotesk, Satoshi, or Monument Extended • Body: Inter or Plus Jakarta Sans • Stats: Roboto Mono or JetBrains Mono • UI Elements: • Glassy panels, animated counters, scroll reveals, encrypted user nicknames, glowing cursor, magnetic buttons • 3D data-flow background in hero, glitch effects on names, light particle noise ⸻ 📐 Structure: 1. 🟣 Hero Section • Fullscreen header with motion background (3D particle stream, digital data vortex) • Headline: TRAFFIC MONSTERS TEAM • Subline: Top-tier performance marketing unit. No noise. Just numbers. • Buttons only (no forms): • 📲 Talk via Telegram • 📂 View Case Studies ⸻ 2. ⚡️ TMT in Numbers (Stats Block) • Stat cards with neon-mint animated counters: • 70+ Media Buyers • $5M+ Revenue • 15+ Traffic Sources • 200+ Offers Scaled • Layout: 2x2 grid, strong contrast, data-focused, glowing on scroll ⸻ 3. ⚙️ Capabilities (What We Do) • Grid-style services (icons + short text): • Strategy & Funnel Architecture • Facebook / TikTok / Push / Google Traffic • Landing Pages & Apps • Keitaro, Analytics, Optimization • Creative Lab (UGC, 3D, native ads) • Collaboration with Direct Advertisers • Effects: hover-glow, morphing line animation, glitch overlays ⸻ 4. 📊 Case Studies • Horizontally scrollable or carousel layout • Each card includes: • Traffic Source + Offer + GEO + Numbers (CTR, ROI, CR) • Real screenshots (or placeholders) • Anonymized, clean layout • Dark with glowing edge hover effect ⸻ 5. 🧠 Founder Section • Photo of Timur (or placeholder image) • Title: FOUNDER & VISIONARY • Text: Timur is the founder of TMT — a high-stakes media buying leader and architect of scalable performance infrastructure. 5+ years of arbitrage domination, known for building aggressive, data-driven teams. • Links: • 📸 Instagram • ▶️ YouTube Interview ⸻ 6. 👥 Team Culture Block • Glowing avatar grid (no real photos), nickname-based: • @roi_monster — “$150K on Tier 2 GEOs” • @bm_master — “20+ warmed BMs” • @tiktok_sniper — “5 creatives → $30K in 3 days” • Style: Dark mystery + performance + team motion loop ⸻ 7. 🤝 Who We Work With (Trust Block) • Grid of logos or icons (can be anonymized): affiliate networks, partners, white-label apps • List of verticals: Gambling, Nutra, Utilities, Finance, Dating • Optional: testimonial slider from partner managers (optional quotes, anonymized if needed) ⸻ 8. 🚀 CTA Block • Tagline: Ready to Work With Traffic Monsters? • Subline: No forms. No resumes. Just results. • Button: 📲 Contact via Telegram ⸻ 9. 🖤 Footer • Icons only: Telegram / Instagram / YouTube • Tagline: © TMT — Built for scale. Powered by performance. • Optional: scroll-to-top or glitch hover element ⸻ 🧠 Extra Visual Prompts (for image/video AI): Cybernetic vortex of data streams behind bold lettering Floating avatars with glowing nickname tags An abstract black dashboard with running metrics and blinking campaign logs Motion blur transitions, 3D glitch overlays, encrypted operator feel