Hugging Face's logo

Spaces:
timoon811
/
tmt41
Running

App Files Community
timoon811 commited on
Commit
1fccac6
·
verified ·
1 Parent(s): 9dc6b0a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +541 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tmt41
3
- emoji: 🏢
4
  colorFrom: blue
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tmt41
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,541 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TMT - Traffic Monsters Team</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Space Grotesk', sans-serif;
15
+ background-color: #0E0E0E;
16
+ color: white;
17
+ overflow-x: hidden;
18
+ }
19
+
20
+ .neon-text {
21
+ text-shadow: 0 0 10px rgba(246, 252, 121, 0.7), 0 0 20px rgba(246, 252, 121, 0.5);
22
+ }
23
+
24
+ .neon-border {
25
+ box-shadow: 0 0 15px rgba(246, 252, 121, 0.5);
26
+ border: 1px solid rgba(246, 252, 121, 0.3);
27
+ }
28
+
29
+ .neon-hover:hover {
30
+ text-shadow: 0 0 15px rgba(246, 252, 121, 0.9), 0 0 25px rgba(246, 252, 121, 0.7);
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .glass-card {
35
+ background: rgba(15, 15, 15, 0.7);
36
+ backdrop-filter: blur(10px);
37
+ -webkit-backdrop-filter: blur(10px);
38
+ border-radius: 10px;
39
+ }
40
+
41
+ .glow-on-hover {
42
+ transition: all 0.3s ease;
43
+ }
44
+
45
+ .glow-on-hover:hover {
46
+ box-shadow: 0 0 20px rgba(246, 252, 121, 0.5);
47
+ transform: translateY(-3px);
48
+ }
49
+
50
+ .counter {
51
+ font-variant-numeric: tabular-nums;
52
+ }
53
+
54
+ .team-avatar {
55
+ filter: drop-shadow(0 0 10px rgba(246, 252, 121, 0.5));
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .team-avatar:hover {
60
+ filter: drop-shadow(0 0 15px rgba(246, 252, 121, 0.8));
61
+ transform: translateY(-5px);
62
+ }
63
+
64
+ .particles {
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ width: 100%;
69
+ height: 100%;
70
+ z-index: -1;
71
+ }
72
+
73
+ .particle {
74
+ position: absolute;
75
+ background-color: rgba(246, 252, 121, 0.5);
76
+ border-radius: 50%;
77
+ pointer-events: none;
78
+ }
79
+
80
+ .tech-icon {
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .tech-icon:hover {
85
+ transform: scale(1.1) rotate(5deg);
86
+ filter: drop-shadow(0 0 10px rgba(246, 252, 121, 0.7));
87
+ }
88
+
89
+ .case-study-card {
90
+ transition: all 0.3s ease;
91
+ }
92
+
93
+ .case-study-card:hover {
94
+ transform: translateY(-10px);
95
+ box-shadow: 0 10px 25px rgba(246, 252, 121, 0.3);
96
+ }
97
+
98
+ .floating {
99
+ animation: floating 6s ease-in-out infinite;
100
+ }
101
+
102
+ @keyframes floating {
103
+ 0% { transform: translateY(0px); }
104
+ 50% { transform: translateY(-15px); }
105
+ 100% { transform: translateY(0px); }
106
+ }
107
+
108
+ .pulse {
109
+ animation: pulse 2s infinite;
110
+ }
111
+
112
+ @keyframes pulse {
113
+ 0% { box-shadow: 0 0 0 0 rgba(246, 252, 121, 0.7); }
114
+ 70% { box-shadow: 0 0 0 15px rgba(246, 252, 121, 0); }
115
+ 100% { box-shadow: 0 0 0 0 rgba(246, 252, 121, 0); }
116
+ }
117
+ </style>
118
+ </head>
119
+ <body>
120
+ <!-- Particles Background -->
121
+ <div id="particles-js" class="particles"></div>
122
+
123
+ <!-- Hero Section -->
124
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
125
+ <div class="absolute inset-0 bg-black opacity-50 z-0"></div>
126
+ <div class="container mx-auto px-6 z-10">
127
+ <div class="flex flex-col items-center text-center">
128
+ <h1 class="text-6xl md:text-8xl font-bold mb-6 neon-text">TRAFFIC MONSTERS TEAM</h1>
129
+ <p class="text-xl md:text-2xl mb-12 text-gray-300">We don't run traffic. We dominate it.</p>
130
+ <div class="flex flex-col sm:flex-row gap-4">
131
+ <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">
132
+ <i class="fab fa-telegram text-xl"></i> Join Telegram
133
+ </a>
134
+ <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">
135
+ <i class="fas fa-folder-open"></i> View Case Studies
136
+ </a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- About Us / Stats -->
143
+ <section class="py-20 relative">
144
+ <div class="container mx-auto px-6">
145
+ <div class="text-center mb-16">
146
+ <h2 class="text-4xl font-bold mb-4 neon-text">MONSTER STATS</h2>
147
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">70+ media buyers | $5M+ revenue | 15+ traffic sources | 100+ working offers</p>
148
+ </div>
149
+
150
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
151
+ <div class="glass-card p-8 rounded-xl text-center glow-on-hover">
152
+ <div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="70">0</div>
153
+ <p class="text-gray-300">Media Buyers</p>
154
+ </div>
155
+ <div class="glass-card p-8 rounded-xl text-center glow-on-hover">
156
+ <div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="5">0</div>
157
+ <p class="text-gray-300">Million+ Revenue</p>
158
+ </div>
159
+ <div class="glass-card p-8 rounded-xl text-center glow-on-hover">
160
+ <div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="15">0</div>
161
+ <p class="text-gray-300">Traffic Sources</p>
162
+ </div>
163
+ <div class="glass-card p-8 rounded-xl text-center glow-on-hover">
164
+ <div class="text-5xl font-bold mb-2 text-[#f6fc79] counter" data-target="100">0</div>
165
+ <p class="text-gray-300">Working Offers</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Why TMT -->
172
+ <section class="py-20 bg-gradient-to-b from-[#0E0E0E] to-[#1a1a1a]">
173
+ <div class="container mx-auto px-6">
174
+ <div class="text-center mb-16">
175
+ <h2 class="text-4xl font-bold mb-4 neon-text">WHY TMT?</h2>
176
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">Here's what makes us different from other media buying teams</p>
177
+ </div>
178
+
179
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
180
+ <div class="glass-card p-8 rounded-xl glow-on-hover group">
181
+ <div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300">
182
+ <i class="fas fa-bolt"></i>
183
+ </div>
184
+ <h3 class="text-2xl font-bold mb-2">Fast start for juniors</h3>
185
+ <p class="text-gray-300">We provide all the tools and knowledge to get you profitable in record time.</p>
186
+ </div>
187
+ <div class="glass-card p-8 rounded-xl glow-on-hover group">
188
+ <div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300">
189
+ <i class="fas fa-crosshairs"></i>
190
+ </div>
191
+ <h3 class="text-2xl font-bold mb-2">Experts in every vertical</h3>
192
+ <p class="text-gray-300">No matter your niche, we have specialists who've already scaled it.</p>
193
+ </div>
194
+ <div class="glass-card p-8 rounded-xl glow-on-hover group">
195
+ <div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300">
196
+ <i class="fas fa-layer-group"></i>
197
+ </div>
198
+ <h3 class="text-2xl font-bold mb-2">Full-stack solutions</h3>
199
+ <p class="text-gray-300">Creatives, landers, offers, bots - everything you need in one place.</p>
200
+ </div>
201
+ <div class="glass-card p-8 rounded-xl glow-on-hover group">
202
+ <div class="text-4xl mb-4 text-[#f6fc79] group-hover:scale-110 transition-transform duration-300">
203
+ <i class="fas fa-chart-line"></i>
204
+ </div>
205
+ <h3 class="text-2xl font-bold mb-2">Real ROI, real support</h3>
206
+ <p class="text-gray-300">No fluff, just proven strategies and 24/7 support from top performers.</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </section>
211
+
212
+ <!-- Case Studies -->
213
+ <section id="case-studies" class="py-20 relative">
214
+ <div class="container mx-auto px-6">
215
+ <div class="text-center mb-16">
216
+ <h2 class="text-4xl font-bold mb-4 neon-text">CASE STUDIES</h2>
217
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">Real campaigns from our media buyers</p>
218
+
219
+ <div class="flex justify-center mt-8 gap-4">
220
+ <button class="px-6 py-2 glass-card rounded-full glow-on-hover active">All</button>
221
+ <button class="px-6 py-2 glass-card rounded-full glow-on-hover">FB</button>
222
+ <button class="px-6 py-2 glass-card rounded-full glow-on-hover">TikTok</button>
223
+ <button class="px-6 py-2 glass-card rounded-full glow-on-hover">Google</button>
224
+ <button class="px-6 py-2 glass-card rounded-full glow-on-hover">Push</button>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
229
+ <div class="case-study-card glass-card p-6 rounded-xl">
230
+ <div class="mb-4">
231
+ <span class="px-3 py-1 bg-[#f6fc79] text-black rounded-full text-sm font-bold">Facebook</span>
232
+ </div>
233
+ <h3 class="text-2xl font-bold mb-2">CBD E-commerce</h3>
234
+ <div class="flex justify-between mb-4">
235
+ <div>
236
+ <p class="text-gray-400 text-sm">Spend</p>
237
+ <p class="font-bold">$87,420</p>
238
+ </div>
239
+ <div>
240
+ <p class="text-gray-400 text-sm">ROI</p>
241
+ <p class="font-bold text-[#f6fc79]">+217%</p>
242
+ </div>
243
+ </div>
244
+ <p class="text-gray-300 mb-4">Scaled from $200/day to $5k/day using custom creatives and lookalike stacking.</p>
245
+ <div class="h-40 bg-gray-800 rounded-lg mb-4 flex items-center justify-center">
246
+ <i class="fas fa-chart-bar text-4xl text-[#f6fc79]"></i>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="case-study-card glass-card p-6 rounded-xl">
251
+ <div class="mb-4">
252
+ <span class="px-3 py-1 bg-[#f6fc79] text-black rounded-full text-sm font-bold">TikTok</span>
253
+ </div>
254
+ <h3 class="text-2xl font-bold mb-2">Dietary Supplement</h3>
255
+ <div class="flex justify-between mb-4">
256
+ <div>
257
+ <p class="text-gray-400 text-sm">Spend</p>
258
+ <p class="font-bold">$142,650</p>
259
+ </div>
260
+ <div>
261
+ <p class="text-gray-400 text-sm">ROI</p>
262
+ <p class="font-bold text-[#f6fc79]">+189%</p>
263
+ </div>
264
+ </div>
265
+ <p class="text-gray-300 mb-4">Vertical video strategy with UGC content generated 7-figures in 3 months.</p>
266
+ <div class="h-40 bg-gray-800 rounded-lg mb-4 flex items-center justify-center">
267
+ <i class="fas fa-chart-pie text-4xl text-[#f6fc79]"></i>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="case-study-card glass-card p-6 rounded-xl">
272
+ <div class="mb-4">
273
+ <span class="px-3 py-1 bg-[#f6fc79] text-black rounded-full text-sm font-bold">Google Ads</span>
274
+ </div>
275
+ <h3 class="text-2xl font-bold mb-2">Insurance Lead Gen</h3>
276
+ <div class="flex justify-between mb-4">
277
+ <div>
278
+ <p class="text-gray-400 text-sm">Spend</p>
279
+ <p class="font-bold">$328,900</p>
280
+ </div>
281
+ <div>
282
+ <p class="text-gray-400 text-sm">ROI</p>
283
+ <p class="font-bold text-[#f6fc79]">+312%</p>
284
+ </div>
285
+ </div>
286
+ <p class="text-gray-300 mb-4">Custom landing page with chatbot integration increased conversions by 47%.</p>
287
+ <div class="h-40 bg-gray-800 rounded-lg mb-4 flex items-center justify-center">
288
+ <i class="fas fa-chart-line text-4xl text-[#f6fc79]"></i>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Team Block -->
296
+ <section class="py-20 bg-gradient-to-b from-[#1a1a1a] to-[#0E0E0E]">
297
+ <div class="container mx-auto px-6">
298
+ <div class="text-center mb-16">
299
+ <h2 class="text-4xl font-bold mb-4 neon-text">THE MONSTERS</h2>
300
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">Meet some of our elite media buyers</p>
301
+ </div>
302
+
303
+ <div class="flex overflow-x-auto pb-8 gap-8 team-scroll">
304
+ <div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center">
305
+ <div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center">
306
+ <i class="fas fa-user-secret text-3xl text-[#f6fc79]"></i>
307
+ </div>
308
+ <h3 class="text-xl font-bold mb-1">@roi_monster</h3>
309
+ <p class="text-sm text-gray-300">Scaling TikTok since 2020</p>
310
+ <div class="mt-4 text-[#f6fc79]">
311
+ <i class="fas fa-trophy mr-2"></i>
312
+ <i class="fas fa-fire mr-2"></i>
313
+ <i class="fas fa-chart-line"></i>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center">
318
+ <div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center">
319
+ <i class="fas fa-robot text-3xl text-[#f6fc79]"></i>
320
+ </div>
321
+ <h3 class="text-xl font-bold mb-1">@bm_hacker</h3>
322
+ <p class="text-sm text-gray-300">25+ business managers running</p>
323
+ <div class="mt-4 text-[#f6fc79]">
324
+ <i class="fab fa-facebook mr-2"></i>
325
+ <i class="fas fa-code mr-2"></i>
326
+ <i class="fas fa-shield-alt"></i>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center">
331
+ <div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center">
332
+ <i class="fas fa-hat-wizard text-3xl text-[#f6fc79]"></i>
333
+ </div>
334
+ <h3 class="text-xl font-bold mb-1">@creative_wizard</h3>
335
+ <p class="text-sm text-gray-300">UGC that converts at 5.8% CTR</p>
336
+ <div class="mt-4 text-[#f6fc79]">
337
+ <i class="fas fa-photo-video mr-2"></i>
338
+ <i class="fas fa-magic mr-2"></i>
339
+ <i class="fas fa-eye"></i>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center">
344
+ <div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center">
345
+ <i class="fas fa-ghost text-3xl text-[#f6fc79]"></i>
346
+ </div>
347
+ <h3 class="text-xl font-bold mb-1">@stealth_ghost</h3>
348
+ <p class="text-sm text-gray-300">Google Ads ninja</p>
349
+ <div class="mt-4 text-[#f6fc79]">
350
+ <i class="fab fa-google mr-2"></i>
351
+ <i class="fas fa-search-dollar mr-2"></i>
352
+ <i class="fas fa-user-ninja"></i>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="flex-shrink-0 w-64 glass-card p-6 rounded-xl text-center">
357
+ <div class="w-24 h-24 rounded-full bg-gray-800 mx-auto mb-4 team-avatar flex items-center justify-center">
358
+ <i class="fas fa-dragon text-3xl text-[#f6fc79]"></i>
359
+ </div>
360
+ <h3 class="text-xl font-bold mb-1">@push_dragon</h3>
361
+ <p class="text-sm text-gray-300">Push traffic dominator</p>
362
+ <div class="mt-4 text-[#f6fc79]">
363
+ <i class="fas fa-mobile-alt mr-2"></i>
364
+ <i class="fas fa-bullhorn mr-2"></i>
365
+ <i class="fas fa-coins"></i>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </section>
371
+
372
+ <!-- Founder Section -->
373
+ <section class="py-20">
374
+ <div class="container mx-auto px-6">
375
+ <div class="glass-card rounded-xl p-8 md:p-12 max-w-4xl mx-auto">
376
+ <div class="flex flex-col md:flex-row items-center gap-8">
377
+ <div class="w-full md:w-1/3 text-center">
378
+ <div class="w-48 h-48 rounded-full bg-gray-800 mx-auto mb-4 relative overflow-hidden team-avatar pulse">
379
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Timur" class="w-full h-full object-cover">
380
+ </div>
381
+ <h3 class="text-2xl font-bold">Timur</h3>
382
+ <p class="text-[#f6fc79]">Founder & Lead Media Buyer</p>
383
+ </div>
384
+ <div class="w-full md:w-2/3">
385
+ <h2 class="text-3xl font-bold mb-6 neon-text">MEET THE FOUNDER</h2>
386
+ <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>
387
+ <div class="flex flex-wrap gap-4">
388
+ <a href="#" class="px-6 py-3 glass-card rounded-full glow-on-hover flex items-center gap-2">
389
+ <i class="fab fa-instagram text-[#f6fc79]"></i> Instagram
390
+ </a>
391
+ <a href="#" class="px-6 py-3 glass-card rounded-full glow-on-hover flex items-center gap-2">
392
+ <i class="fab fa-youtube text-[#f6fc79]"></i> YouTube Interview
393
+ </a>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </section>
400
+
401
+ <!-- CTA Block -->
402
+ <section class="py-20 bg-gradient-to-b from-[#0E0E0E] to-[#1a1a1a]">
403
+ <div class="container mx-auto px-6 text-center">
404
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text">READY TO MASTER TRAFFIC WITH THE BEST?</h2>
405
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">No forms. No resumes. Just action.</p>
406
+ <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">
407
+ <i class="fab fa-telegram text-2xl"></i> Contact via Telegram
408
+ </a>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- Tech Stack -->
413
+ <section class="py-20">
414
+ <div class="container mx-auto px-6">
415
+ <div class="text-center mb-16">
416
+ <h2 class="text-4xl font-bold mb-4 neon-text">OUR TECH STACK</h2>
417
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">Tools and platforms we use to dominate traffic</p>
418
+ </div>
419
+
420
+ <div class="flex flex-wrap justify-center gap-8 md:gap-16">
421
+ <div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center">
422
+ <i class="fas fa-server text-3xl text-[#f6fc79]"></i>
423
+ </div>
424
+ <div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center">
425
+ <i class="fab fa-facebook text-3xl text-[#f6fc79]"></i>
426
+ </div>
427
+ <div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center">
428
+ <i class="fab fa-tiktok text-3xl text-[#f6fc79]"></i>
429
+ </div>
430
+ <div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center">
431
+ <i class="fab fa-google text-3xl text-[#f6fc79]"></i>
432
+ </div>
433
+ <div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center">
434
+ <i class="fas fa-robot text-3xl text-[#f6fc79]"></i>
435
+ </div>
436
+ <div class="tech-icon w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center">
437
+ <i class="fas fa-mobile-alt text-3xl text-[#f6fc79]"></i>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- Footer -->
444
+ <footer class="py-12 border-t border-gray-800">
445
+ <div class="container mx-auto px-6">
446
+ <div class="flex flex-col items-center">
447
+ <div class="flex gap-6 mb-6">
448
+ <a href="#" class="text-2xl text-gray-400 hover:text-[#f6fc79] transition-colors">
449
+ <i class="fab fa-telegram"></i>
450
+ </a>
451
+ <a href="#" class="text-2xl text-gray-400 hover:text-[#f6fc79] transition-colors">
452
+ <i class="fab fa-instagram"></i>
453
+ </a>
454
+ <a href="#" class="text-2xl text-gray-400 hover:text-[#f6fc79] transition-colors">
455
+ <i class="fab fa-youtube"></i>
456
+ </a>
457
+ </div>
458
+ <p class="text-gray-400">© TMT – Built to scale.</p>
459
+ </div>
460
+ </div>
461
+ </footer>
462
+
463
+ <script>
464
+ // Counter animation
465
+ const counters = document.querySelectorAll('.counter');
466
+ const speed = 200;
467
+
468
+ counters.forEach(counter => {
469
+ const target = +counter.getAttribute('data-target');
470
+ const count = +counter.innerText;
471
+ const increment = target / speed;
472
+
473
+ if(count < target) {
474
+ counter.innerText = Math.ceil(count + increment);
475
+ setTimeout(updateCounter, 1);
476
+ } else {
477
+ counter.innerText = target;
478
+ }
479
+
480
+ function updateCounter() {
481
+ const count = +counter.innerText;
482
+ if(count < target) {
483
+ counter.innerText = Math.ceil(count + increment);
484
+ setTimeout(updateCounter, 1);
485
+ } else {
486
+ counter.innerText = target;
487
+ }
488
+ }
489
+ });
490
+
491
+ // Particles effect
492
+ document.addEventListener('DOMContentLoaded', function() {
493
+ const particlesContainer = document.getElementById('particles-js');
494
+ const particleCount = 30;
495
+
496
+ for(let i = 0; i < particleCount; i++) {
497
+ const particle = document.createElement('div');
498
+ particle.classList.add('particle');
499
+
500
+ // Random size between 2px and 5px
501
+ const size = Math.random() * 3 + 2;
502
+ particle.style.width = `${size}px`;
503
+ particle.style.height = `${size}px`;
504
+
505
+ // Random position
506
+ particle.style.left = `${Math.random() * 100}%`;
507
+ particle.style.top = `${Math.random() * 100}%`;
508
+
509
+ // Random opacity
510
+ particle.style.opacity = Math.random() * 0.5 + 0.1;
511
+
512
+ // Add floating animation with random duration and delay
513
+ particle.style.animation = `floating ${Math.random() * 10 + 5}s ease-in-out infinite`;
514
+ particle.style.animationDelay = `${Math.random() * 5}s`;
515
+
516
+ particlesContainer.appendChild(particle);
517
+ }
518
+
519
+ // Mouse follow glow effect
520
+ const glow = document.createElement('div');
521
+ glow.classList.add('fixed', 'w-64', 'h-64', 'rounded-full', 'bg-[#f6fc79]', 'opacity-10', 'blur-3xl', '-z-10', 'pointer-events-none');
522
+ document.body.appendChild(glow);
523
+
524
+ document.addEventListener('mousemove', (e) => {
525
+ glow.style.left = `${e.clientX - 128}px`;
526
+ glow.style.top = `${e.clientY - 128}px`;
527
+ });
528
+ });
529
+
530
+ // Case study filter
531
+ const filterButtons = document.querySelectorAll('#case-studies button');
532
+ filterButtons.forEach(button => {
533
+ button.addEventListener('click', () => {
534
+ filterButtons.forEach(btn => btn.classList.remove('bg-[#f6fc79]', 'text-black'));
535
+ button.classList.add('bg-[#f6fc79]', 'text-black');
536
+ // Here you would filter the case studies in a real implementation
537
+ });
538
+ });
539
+ </script>
540
+ <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>
541
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Project Name: TMT — Traffic Monsters Team Language: English Target Style: Dark theme, futuristic, bold, tech-agency inspired (reference: zm.team + Behance MUZ project) Structure: Clean one-pager, no forms, only buttons and social media links ⸻ 🧱 SITE STRUCTURE & BLOCKS ⸻ 🟣 1. Hero Section • Fullscreen header with abstract 3D animation or digital vortex background • Main headline (large, bold): TRAFFIC MONSTERS TEAM • Subheadline: We don’t run traffic. We dominate it. • Two CTA buttons: • 💬 Join Telegram • 📂 View Case Studies • Neon effects, glowing hover transitions, dark glassmorphism background ⸻ 🔥 2. About Us (Short Manifesto) • Text line: 70+ media buyers | $5M+ revenue | 15+ traffic sources | 100+ working offers • Visual: 4 glowing stat cards with animated counters ⸻ ⚙️ 3. Why TMT (Benefits) • 4 cards with icons + short titles (on hover animation) • 🔥 Fast start for juniors • 🎯 Expert media buyers in every vertical • 📦 Full-stack: Creatives, Softs, Offers • 📊 Real ROI, real support ⸻ 📈 4. Case Studies • Slider or card-based layout with short case descriptions: • Platform → Offer → Strategy → Profit → ROI • Add visuals (bar charts, screenshots, performance metrics) • Optional toggle: “FB | TikTok | Google | Push” ⸻ 🧩 5. Team Block (Anonymized) • Horizontal scroll or grid • Icon-style avatars with nicknames like: • @roi_monster – “Scaling TikTok since 2020” • @bm_hacker – “25+ business managers running” • Mysterious/elite vibe (blurred faces, glowing icons) ⸻ 🧠 6. Founder Section • Title: MEET THE FOUNDER • Photo of Timur (user-provided or placeholder) • Text: Timur is the mastermind behind TMT — a top-tier media buying leader and creator of the Traffic Master course. • Links: • 📸 Instagram → [insert URL] • ▶️ YouTube Interview → [insert URL] ⸻ 🚀 7. CTA Block • Big statement: READY TO MASTER TRAFFIC WITH THE BEST? • Subline: No forms. No resumes. Just action. • Button: 👉 Contact via Telegram ⸻ 💼 8. Tech Stack / Ecosystem (Optional block) • Icons or badges for: • Keitaro • PWA & Mobile Apps • Facebook Ads • TikTok Ads • Chatbot Systems • Effect: Hover glow / slight shake ⸻ 🖤 9. Footer (Minimalist) • Social media icons only: • Telegram • Instagram • YouTube • Line: © TMT – Built to scale. • No forms, no clutter ⸻ 🎨 VISUAL STYLE • Color Scheme: • Background: #0E0E0E • Accent: #f6fc79 (lime neon) • Secondary: #FFFFFF and #A1A1A1 • Typography: • Bold, wide sans-serif (like Space Grotesk / Monument Extended) • Animation Style: • Floating particles, subtle mouse-follow glow, glowing text hover, slide reveals