Hugging Face's logo

Spaces:
imbytegroup
/
ai-studio
Running

App Files Community
imbytegroup commited on
Commit
c07ad85
·
verified ·
1 Parent(s): ec2d9b7

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1117 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Studio
3
- emoji: 📈
4
- colorFrom: green
5
  colorTo: blue
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: ai-studio
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
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,1117 @@
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>TeleApp Studio | Telegram Mini-Apps & Bots Development</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
11
+
12
+ :root {
13
+ --primary: #3b82f6;
14
+ --primary-dark: #2563eb;
15
+ --secondary: #8b5cf6;
16
+ --dark: #0F0F0F;
17
+ --darker: #070707;
18
+ --light: #f8fafc;
19
+ --neon-blue: #00f5ff;
20
+ --neon-purple: #b517ff;
21
+ --neon-green: #00ff9d;
22
+ }
23
+
24
+ body {
25
+ font-family: 'Inter', sans-serif;
26
+ background-color: var(--dark);
27
+ color: var(--light);
28
+ overflow-x: hidden;
29
+ scroll-behavior: smooth;
30
+ }
31
+
32
+ .hero-bg {
33
+ background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, rgba(15, 15, 15, 1) 70%);
34
+ position: relative;
35
+ overflow: hidden;
36
+ }
37
+
38
+ .grid-pattern {
39
+ background-image:
40
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
41
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
42
+ background-size: 40px 40px;
43
+ }
44
+
45
+ .particle {
46
+ position: absolute;
47
+ background-color: rgba(59, 130, 246, 0.5);
48
+ border-radius: 50%;
49
+ pointer-events: none;
50
+ }
51
+
52
+ .glow-on-hover {
53
+ transition: all 0.3s ease;
54
+ position: relative;
55
+ overflow: hidden;
56
+ z-index: 1;
57
+ }
58
+
59
+ .glow-on-hover::before {
60
+ content: '';
61
+ position: absolute;
62
+ top: 0;
63
+ left: 0;
64
+ width: 100%;
65
+ height: 100%;
66
+ background: linear-gradient(45deg,
67
+ rgba(59, 130, 246, 0.5),
68
+ rgba(139, 92, 246, 0.5),
69
+ rgba(0, 245, 255, 0.5));
70
+ z-index: -1;
71
+ transform: scale(0);
72
+ opacity: 0;
73
+ transition: transform 0.5s, opacity 0.5s;
74
+ }
75
+
76
+ .glow-on-hover:hover::before {
77
+ transform: scale(1.1);
78
+ opacity: 1;
79
+ }
80
+
81
+ .service-card {
82
+ transition: all 0.4s ease;
83
+ background: linear-gradient(145deg, rgba(30, 30, 30, 0.8), rgba(15, 15, 15, 0.9));
84
+ border: 1px solid rgba(59, 130, 246, 0.1);
85
+ backdrop-filter: blur(10px);
86
+ transform-style: preserve-3d;
87
+ transform: perspective(1000px);
88
+ }
89
+
90
+ .service-card:hover {
91
+ transform: translateY(-10px) perspective(1000px) rotateX(5deg);
92
+ border-color: var(--neon-blue);
93
+ box-shadow: 0 10px 25px rgba(0, 245, 255, 0.2);
94
+ }
95
+
96
+ .tech-scroll-container {
97
+ overflow: hidden;
98
+ white-space: nowrap;
99
+ }
100
+
101
+ .tech-stack-item {
102
+ display: inline-block;
103
+ animation: scroll 25s linear infinite;
104
+ padding-left: 100%;
105
+ white-space: nowrap;
106
+ }
107
+
108
+ @keyframes scroll {
109
+ 0% { transform: translateX(0); }
110
+ 100% { transform: translateX(-100%); }
111
+ }
112
+
113
+ .fade-in {
114
+ opacity: 0;
115
+ transform: translateY(20px);
116
+ transition: opacity 0.6s ease, transform 0.6s ease;
117
+ }
118
+
119
+ .fade-in.visible {
120
+ opacity: 1;
121
+ transform: translateY(0);
122
+ }
123
+
124
+ .gradient-wave {
125
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
126
+ position: relative;
127
+ overflow: hidden;
128
+ }
129
+
130
+ .gradient-wave::before {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
138
+ animation: wave 8s linear infinite;
139
+ }
140
+
141
+ @keyframes wave {
142
+ 0% { transform: translateX(-100%); }
143
+ 100% { transform: translateX(100%); }
144
+ }
145
+
146
+ .portfolio-item {
147
+ transition: all 0.3s ease;
148
+ background: linear-gradient(145deg, rgba(30, 30, 30, 0.9), rgba(15, 15, 15, 0.95));
149
+ transform-style: preserve-3d;
150
+ }
151
+
152
+ .portfolio-item:hover {
153
+ transform: scale(1.03) perspective(1000px) rotateY(5deg);
154
+ box-shadow: 0 10px 25px rgba(0, 245, 255, 0.15);
155
+ }
156
+
157
+ .portfolio-item::after {
158
+ content: '';
159
+ position: absolute;
160
+ top: 0;
161
+ left: 0;
162
+ right: 0;
163
+ bottom: 0;
164
+ background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8));
165
+ z-index: 1;
166
+ }
167
+
168
+ .neon-text {
169
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
170
+ }
171
+
172
+ .neon-border {
173
+ border: 1px solid var(--neon-blue);
174
+ box-shadow: 0 0 10px var(--neon-blue);
175
+ }
176
+
177
+ .input-field {
178
+ background: rgba(30, 30, 30, 0.8);
179
+ border: 1px solid rgba(59, 130, 246, 0.3);
180
+ transition: all 0.3s ease;
181
+ }
182
+
183
+ .input-field:focus {
184
+ border-color: var(--neon-blue);
185
+ box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
186
+ }
187
+
188
+ /* Custom scrollbar */
189
+ ::-webkit-scrollbar {
190
+ width: 8px;
191
+ }
192
+
193
+ ::-webkit-scrollbar-track {
194
+ background: var(--dark);
195
+ }
196
+
197
+ ::-webkit-scrollbar-thumb {
198
+ background: var(--primary);
199
+ border-radius: 4px;
200
+ }
201
+
202
+ /* Video modal */
203
+ .video-modal {
204
+ display: none;
205
+ position: fixed;
206
+ top: 0;
207
+ left: 0;
208
+ width: 100%;
209
+ height: 100%;
210
+ background-color: rgba(0, 0, 0, 0.8);
211
+ z-index: 1000;
212
+ align-items: center;
213
+ justify-content: center;
214
+ }
215
+
216
+ .video-modal.open {
217
+ display: flex;
218
+ }
219
+
220
+ /* Micro animations */
221
+ .icon-hover {
222
+ transition: all 0.3s ease;
223
+ }
224
+
225
+ .icon-hover:hover {
226
+ transform: scale(1.1);
227
+ text-shadow: 0 0 8px currentColor;
228
+ }
229
+
230
+ /* Parallax effect for service cards */
231
+ .service-container {
232
+ perspective: 1000px;
233
+ }
234
+
235
+ /* Lazy loading */
236
+ .lazy {
237
+ opacity: 0;
238
+ transition: opacity 0.5s ease;
239
+ }
240
+
241
+ .lazy.loaded {
242
+ opacity: 1;
243
+ }
244
+ </style>
245
+ </head>
246
+ <body class="grid-pattern">
247
+ <!-- Navigation -->
248
+ <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg border-b border-gray-800">
249
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
250
+ <div class="flex justify-between h-16 items-center">
251
+ <div class="flex items-center">
252
+ <div class="flex-shrink-0 flex items-center">
253
+ <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
254
+ <i class="fab fa-telegram text-white"></i>
255
+ </div>
256
+ <span class="ml-2 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 neon-text">TeleApp</span>
257
+ </div>
258
+ </div>
259
+ <div class="hidden md:block">
260
+ <div class="ml-10 flex items-baseline space-x-8">
261
+ <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-800 hover:bg-opacity-50">About</a>
262
+ <a href="#services" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-800 hover:bg-opacity-50">Services</a>
263
+ <a href="#portfolio" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-800 hover:bg-opacity-50">Portfolio</a>
264
+ <a href="#advantages" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-800 hover:bg-opacity-50">Advantages</a>
265
+ <a href="#contact" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2 rounded-md text-sm font-medium glow-on-hover transition-all duration-300 hover:from-blue-500 hover:to-purple-500">Contact Us</a>
266
+ </div>
267
+ </div>
268
+ <div class="-mr-2 flex md:hidden">
269
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
270
+ <span class="sr-only">Open main menu</span>
271
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
272
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
273
+ </svg>
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Mobile menu -->
280
+ <div class="hidden md:hidden bg-gray-900" id="mobile-menu">
281
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
282
+ <a href="#about" class="text-gray-300 hover:bg-gray-800 hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
283
+ <a href="#services" class="text-gray-300 hover:bg-gray-800 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
284
+ <a href="#portfolio" class="text-gray-300 hover:bg-gray-800 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
285
+ <a href="#advantages" class="text-gray-300 hover:bg-gray-800 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Advantages</a>
286
+ <a href="#contact" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white block px-3 py-2 rounded-md text-base font-medium">Contact Us</a>
287
+ </div>
288
+ </div>
289
+ </nav>
290
+
291
+ <!-- Video Modal -->
292
+ <div class="video-modal" id="video-modal">
293
+ <div class="relative w-full max-w-4xl px-4">
294
+ <button id="close-modal" class="absolute -top-12 right-0 text-white text-2xl hover:text-blue-400 transition-all">
295
+ <i class="fas fa-times"></i>
296
+ </button>
297
+ <div class="aspect-w-16 aspect-h-9 bg-black">
298
+ <iframe id="video-frame" class="w-full h-full" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Hero Section -->
304
+ <section class="hero-bg min-h-screen flex items-center justify-center relative overflow-hidden pt-16">
305
+ <!-- Animated particles background -->
306
+ <div id="particles-js"></div>
307
+
308
+ <!-- Hero content -->
309
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center z-10">
310
+ <div class="mb-8 opacity-0 animate-fade-in">
311
+ <div class="inline-block px-4 py-2 bg-blue-900 bg-opacity-20 text-blue-400 rounded-full text-sm font-medium mb-4">
312
+ <i class="fas fa-bolt mr-2"></i>
313
+ INNOVATIVE TELEGRAM SOLUTIONS
314
+ </div>
315
+ </div>
316
+
317
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight animate-fade-in">
318
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 inline-block">We Create Innovative</span><br>
319
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500 inline-block">Telegram Mini-Apps & Bots</span>
320
+ </h1>
321
+
322
+ <p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-10 animate-fade-in">
323
+ From P2E games to automated solutions — we bring any idea to life in the Telegram ecosystem and Web 3.0
324
+ </p>
325
+
326
+ <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fade-in-up">
327
+ <a href="#contact" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-lg font-semibold text-lg glow-on-hover hover:from-blue-500 hover:to-purple-500 transition-all duration-300 flex items-center justify-center">
328
+ <span>Discuss Your Project</span>
329
+ <i class="fas fa-arrow-right ml-2"></i>
330
+ </a>
331
+ <button id="watch-video" class="border border-white border-opacity-20 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300 flex items-center justify-center">
332
+ <i class="fas fa-play mr-2"></i>
333
+ Watch Video
334
+ </button>
335
+ </div>
336
+
337
+ <div class="mt-16 flex justify-center space-x-8 animate-fade-in">
338
+ <div class="flex items-center text-gray-400">
339
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></div>
340
+ <span>Web 3.0 Integration</span>
341
+ </div>
342
+ <div class="flex items-center text-gray-400">
343
+ <div class="w-3 h-3 bg-blue-500 rounded-full mr-2 animate-pulse"></div>
344
+ <span>TON Blockchain</span>
345
+ </div>
346
+ <div class="flex items-center text-gray-400">
347
+ <div class="w-3 h-3 bg-purple-500 rounded-full mr-2 animate-pulse"></div>
348
+ <span>P2E Games</span>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Scroll indicator -->
354
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">
355
+ <a href="#about" class="text-gray-400 hover:text-white">
356
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
357
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
358
+ </svg>
359
+ </a>
360
+ </div>
361
+ </section>
362
+
363
+ <!-- About Section -->
364
+ <section id="about" class="py-20 bg-gradient-to-b from-gray-900 to-black">
365
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
366
+ <div class="text-center mb-16 fade-in">
367
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
368
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">About Our Studio</span>
369
+ </h2>
370
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-6"></div>
371
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
372
+ We are a team of experts turning your ideas into working digital products. Specializing in the Telegram ecosystem and Web 3.0 technologies.
373
+ </p>
374
+ </div>
375
+
376
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
377
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.1s">
378
+ <div class="w-20 h-20 bg-blue-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-400 text-3xl icon-hover">
379
+ <i class="fab fa-telegram"></i>
380
+ </div>
381
+ <h3 class="text-xl font-bold mb-3">Telegram Expertise</h3>
382
+ <p class="text-gray-400">
383
+ Deep knowledge of Telegram API, TON blockchain, and mini-apps development.
384
+ </p>
385
+ </div>
386
+
387
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.2s">
388
+ <div class="w-20 h-20 bg-purple-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-purple-400 text-3xl icon-hover">
389
+ <i class="fas fa-gamepad"></i>
390
+ </div>
391
+ <h3 class="text-xl font-bold mb-3">P2E Games</h3>
392
+ <p class="text-gray-400">
393
+ Creating engaging Play-to-Earn games with blockchain integration.
394
+ </p>
395
+ </div>
396
+
397
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.3s">
398
+ <div class="w-20 h-20 bg-green-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-green-400 text-3xl icon-hover">
399
+ <i class="fas fa-robot"></i>
400
+ </div>
401
+ <h3 class="text-xl font-bold mb-3">Smart Bots</h3>
402
+ <p class="text-gray-400">
403
+ Building intelligent bots for automation, payments, and customer service.
404
+ </p>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
409
+ <div class="fade-in">
410
+ <div class="relative rounded-xl overflow-hidden">
411
+ <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80"
412
+ alt="Development Team"
413
+ class="w-full h-auto object-cover lazy"
414
+ loading="lazy">
415
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
416
+ <div class="absolute bottom-0 left-0 right-0 p-6">
417
+ <div class="flex items-center">
418
+ <div class="flex -space-x-2">
419
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/40.jpg" alt="Team member">
420
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Team member">
421
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/63.jpg" alt="Team member">
422
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/85.jpg" alt="Team member">
423
+ </div>
424
+ <span class="ml-4 text-white text-sm">Our core team</span>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="fade-in">
431
+ <h3 class="text-2xl font-bold mb-4">Why Telegram Ecosystem?</h3>
432
+ <p class="text-gray-400 mb-6">
433
+ With over 800 million active users, Telegram provides a massive platform for innovative applications.
434
+ Our expertise in Telegram's API ecosystem allows us to create powerful solutions that leverage its unique features.
435
+ </p>
436
+
437
+ <div class="space-y-4">
438
+ <div class="flex items-start">
439
+ <div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg text-blue-400 mr-4 icon-hover">
440
+ <i class="fas fa-users"></i>
441
+ </div>
442
+ <div>
443
+ <h4 class="font-semibold mb-1">Massive User Base</h4>
444
+ <p class="text-gray-400">Access to Telegram's huge and engaged audience.</p>
445
+ </div>
446
+ </div>
447
+ <div class="flex items-start">
448
+ <div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg text-purple-400 mr-4 icon-hover">
449
+ <i class="fas fa-shield-alt"></i>
450
+ </div>
451
+ <div>
452
+ <h4 class="font-semibold mb-1">Security & Privacy</h4>
453
+ <p class="text-gray-400">Built-in encryption and privacy features.</p>
454
+ </div>
455
+ </div>
456
+ <div class="flex items-start">
457
+ <div class="bg-green-900 bg-opacity-30 p-3 rounded-lg text-green-400 mr-4 icon-hover">
458
+ <i class="fas fa-cube"></i>
459
+ </div>
460
+ <div>
461
+ <h4 class="font-semibold mb-1">TON Integration</h4>
462
+ <p class="text-gray-400">Native blockchain support for Web 3.0 applications.</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </section>
470
+
471
+ <!-- Services Section -->
472
+ <section id="services" class="py-20 bg-black">
473
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
474
+ <div class="text-center mb-16 fade-in">
475
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
476
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Our Services</span>
477
+ </h2>
478
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-6"></div>
479
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
480
+ Comprehensive solutions for your Telegram-based projects
481
+ </p>
482
+ </div>
483
+
484
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
485
+ <div class="fade-in service-card p-8 rounded-xl" style="transition-delay: 0.1s">
486
+ <div class="flex items-start mb-6">
487
+ <div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg text-blue-400 mr-4 icon-hover">
488
+ <i class="fas fa-mobile-alt text-2xl"></i>
489
+ </div>
490
+ <div>
491
+ <h3 class="text-xl font-bold mb-2">Telegram Mini-Apps</h3>
492
+ <p class="text-gray-400">
493
+ Full-cycle development of interactive mini-applications within Telegram, from concept to deployment.
494
+ </p>
495
+ </div>
496
+ </div>
497
+ <ul class="space-y-2 text-gray-300">
498
+ <li class="flex items-center">
499
+ <i class="fas fa-check-circle text-blue-400 mr-2 icon-hover"></i>
500
+ P2E (Play-to-Earn) games with TON integration
501
+ </li>
502
+ <li class="flex items-center">
503
+ <i class="fas fa-check-circle text-blue-400 mr-2 icon-hover"></i>
504
+ Educational and entertainment apps
505
+ </li>
506
+ <li class="flex items-center">
507
+ <i class="fas fa-check-circle text-blue-400 mr-2 icon-hover"></i>
508
+ Custom UI/UX design for Telegram
509
+ </li>
510
+ <li class="flex items-center">
511
+ <i class="fas fa-check-circle text-blue-400 mr-2 icon-hover"></i>
512
+ Web3 wallet integration
513
+ </li>
514
+ </ul>
515
+ </div>
516
+
517
+ <div class="fade-in service-card p-8 rounded-xl" style="transition-delay: 0.2s">
518
+ <div class="flex items-start mb-6">
519
+ <div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg text-purple-400 mr-4 icon-hover">
520
+ <i class="fas fa-robot text-2xl"></i>
521
+ </div>
522
+ <div>
523
+ <h3 class="text-xl font-bold mb-2">Telegram Bots</h3>
524
+ <p class="text-gray-400">
525
+ Intelligent bot solutions to automate your business processes and enhance user engagement.
526
+ </p>
527
+ </div>
528
+ </div>
529
+ <ul class="space-y-2 text-gray-300">
530
+ <li class="flex items-center">
531
+ <i class="fas fa-check-circle text-purple-400 mr-2 icon-hover"></i>
532
+ Payment and subscription bots
533
+ </li>
534
+ <li class="flex items-center">
535
+ <i class="fas fa-check-circle text-purple-400 mr-2 icon-hover"></i>
536
+ CRM and customer support automation
537
+ </li>
538
+ <li class="flex items-center">
539
+ <i class="fas fa-check-circle text-purple-400 mr-2 icon-hover"></i>
540
+ AI-powered conversational interfaces
541
+ </li>
542
+ <li class="flex items-center">
543
+ <i class="fas fa-check-circle text-purple-400 mr-2 icon-hover"></i>
544
+ Multi-language support
545
+ </li>
546
+ </ul>
547
+ </div>
548
+
549
+ <div class="fade-in service-card p-8 rounded-xl" style="transition-delay: 0.3s">
550
+ <div class="flex items-start mb-6">
551
+ <div class="bg-green-900 bg-opacity-30 p-3 rounded-lg text-green-400 mr-4 icon-hover">
552
+ <i class="fas fa-cubes text-2xl"></i>
553
+ </div>
554
+ <div>
555
+ <h3 class="text-xl font-bold mb-2">Web3 Integration</h3>
556
+ <p class="text-gray-400">
557
+ Blockchain solutions tailored for the Telegram ecosystem.
558
+ </p>
559
+ </div>
560
+ </div>
561
+ <ul class="space-y-2 text-gray-300">
562
+ <li class="flex items-center">
563
+ <i class="fas fa-check-circle text-green-400 mr-2 icon-hover"></i>
564
+ TON blockchain smart contracts
565
+ </li>
566
+ <li class="flex items-center">
567
+ <i class="fas fa-check-circle text-green-400 mr-2 icon-hover"></i>
568
+ NFT integration for games and apps
569
+ </li>
570
+ <li class="flex items-center">
571
+ <i class="fas fa-check-circle text-green-400 mr-2 icon-hover"></i>
572
+ Tokenomics design and implementation
573
+ </li>
574
+ <li class="flex items-center">
575
+ <i class="fas fa-check-circle text-green-400 mr-2 icon-hover"></i>
576
+ Decentralized identity solutions
577
+ </li>
578
+ </ul>
579
+ </div>
580
+
581
+ <div class="fade-in service-card p-8 rounded-xl" style="transition-delay: 0.4s">
582
+ <div class="flex items-start mb-6">
583
+ <div class="bg-yellow-900 bg-opacity-30 p-3 rounded-lg text-yellow-400 mr-4 icon-hover">
584
+ <i class="fas fa-tools text-2xl"></i>
585
+ </div>
586
+ <div>
587
+ <h3 class="text-xl font-bold mb-2">Custom Solutions</h3>
588
+ <p class="text-gray-400">
589
+ Tailored development for your unique requirements.
590
+ </p>
591
+ </div>
592
+ </div>
593
+ <ul class="space-y-2 text-gray-300">
594
+ <li class="flex items-center">
595
+ <i class="fas fa-check-circle text-yellow-400 mr-2 icon-hover"></i>
596
+ API integration with external services
597
+ </li>
598
+ <li class="flex items-center">
599
+ <i class="fas fa-check-circle text-yellow-400 mr-2 icon-hover"></i>
600
+ Custom analytics and dashboards
601
+ </li>
602
+ <li class="flex items-center">
603
+ <i class="fas fa-check-circle text-yellow-400 mr-2 icon-hover"></i>
604
+ White-label solutions
605
+ </li>
606
+ <li class="flex items-center">
607
+ <i class="fas fa-check-circle text-yellow-400 mr-2 icon-hover"></i>
608
+ Ongoing support and maintenance
609
+ </li>
610
+ </ul>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </section>
615
+
616
+ <!-- Portfolio Section -->
617
+ <section id="portfolio" class="py-20 bg-gradient-to-b from-black to-gray-900">
618
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
619
+ <div class="text-center mb-16 fade-in">
620
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
621
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Our Portfolio</span>
622
+ </h2>
623
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-6"></div>
624
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
625
+ Some of our successful projects in the Telegram ecosystem
626
+ </p>
627
+ </div>
628
+
629
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 fade-in">
630
+ <div class="portfolio-item rounded-xl overflow-hidden relative">
631
+ <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2232&q=80"
632
+ alt="Crypto Game"
633
+ class="w-full h-64 object-cover lazy"
634
+ loading="lazy">
635
+ <div class="absolute bottom-0 left-0 right-0 p-6 z-10">
636
+ <h3 class="text-xl font-bold mb-2">TON Treasure Hunt</h3>
637
+ <p class="text-gray-300 mb-3">P2E adventure game with 15K+ active users and NFT rewards</p>
638
+ <div class="flex flex-wrap gap-2">
639
+ <span class="bg-blue-900 bg-opacity-50 text-blue-300 px-3 py-1 rounded-full text-xs">P2E</span>
640
+ <span class="bg-purple-900 bg-opacity-50 text-purple-300 px-3 py-1 rounded-full text-xs">TON</span>
641
+ <span class="bg-green-900 bg-opacity-50 text-green-300 px-3 py-1 rounded-full text-xs">NFT</span>
642
+ </div>
643
+ </div>
644
+ </div>
645
+
646
+ <div class="portfolio-item rounded-xl overflow-hidden relative">
647
+ <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80"
648
+ alt="Payment Bot"
649
+ class="w-full h-64 object-cover lazy"
650
+ loading="lazy">
651
+ <div class="absolute bottom-0 left-0 right-0 p-6 z-10">
652
+ <h3 class="text-xl font-bold mb-2">PayBot Pro</h3>
653
+ <p class="text-gray-300 mb-3">Payment processing bot handling $500K+ monthly transactions</p>
654
+ <div class="flex flex-wrap gap-2">
655
+ <span class="bg-blue-900 bg-opacity-50 text-blue-300 px-3 py-1 rounded-full text-xs">Payments</span>
656
+ <span class="bg-purple-900 bg-opacity-50 text-purple-300 px-3 py-1 rounded-full text-xs">Crypto</span>
657
+ <span class="bg-yellow-900 bg-opacity-50 text-yellow-300 px-3 py-1 rounded-full text-xs">Automation</span>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="portfolio-item rounded-xl overflow-hidden relative">
663
+ <img src="https://images.unsplash.com/photo-1639762681494-07846d852205?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
664
+ alt="Learning App"
665
+ class="w-full h-64 object-cover lazy"
666
+ loading="lazy">
667
+ <div class="absolute bottom-0 left-0 right-0 p-6 z-10">
668
+ <h3 class="text-xl font-bold mb-2">CryptoLearn Mini-App</h3>
669
+ <p class="text-gray-300 mb-3">Interactive educational platform with 8K+ monthly active learners</p>
670
+ <div class="flex flex-wrap gap-2">
671
+ <span class="bg-blue-900 bg-opacity-50 text-blue-300 px-3 py-1 rounded-full text-xs">Education</span>
672
+ <span class="bg-green-900 bg-opacity-50 text-green-300 px-3 py-1 rounded-full text-xs">Web3</span>
673
+ <span class="bg-purple-900 bg-opacity-50 text-purple-300 px-3 py-1 rounded-full text-xs">Gamification</span>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+
679
+ <div class="text-center mt-12 fade-in">
680
+ <a href="#contact" class="inline-flex items-center px-6 py-3 border border-blue-400 text-blue-400 rounded-lg font-medium hover:bg-blue-900 hover:bg-opacity-20 transition-all duration-300 glow-on-hover">
681
+ Request Case Studies
682
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
683
+ <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
684
+ </svg>
685
+ </a>
686
+ </div>
687
+ </div>
688
+ </section>
689
+
690
+ <!-- Advantages Section -->
691
+ <section id="advantages" class="py-20 bg-gray-900">
692
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
693
+ <div class="text-center mb-16 fade-in">
694
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
695
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Why Choose Us</span>
696
+ </h2>
697
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-6"></div>
698
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
699
+ Our competitive advantages that set us apart
700
+ </p>
701
+ </div>
702
+
703
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
704
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.1s">
705
+ <div class="w-16 h-16 bg-blue-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-400 text-2xl neon-text icon-hover">
706
+ <i class="fas fa-sliders-h"></i>
707
+ </div>
708
+ <h3 class="text-xl font-bold mb-3">Flexibility</h3>
709
+ <p class="text-gray-400">
710
+ Custom solutions tailored to your specific needs and business requirements.
711
+ </p>
712
+ </div>
713
+
714
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.2s">
715
+ <div class="w-16 h-16 bg-purple-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-purple-400 text-2xl neon-text icon-hover">
716
+ <i class="fas fa-link"></i>
717
+ </div>
718
+ <h3 class="text-xl font-bold mb-3">Web 3.0 Integration</h3>
719
+ <p class="text-gray-400">
720
+ Seamless blockchain and cryptocurrency integration for future-proof solutions.
721
+ </p>
722
+ </div>
723
+
724
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.3s">
725
+ <div class="w-16 h-16 bg-green-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-green-400 text-2xl neon-text icon-hover">
726
+ <i class="fas fa-key"></i>
727
+ </div>
728
+ <h3 class="text-xl font-bold mb-3">Turnkey Solutions</h3>
729
+ <p class="text-gray-400">
730
+ From concept to launch and beyond - we handle everything.
731
+ </p>
732
+ </div>
733
+
734
+ <div class="fade-in service-card p-8 rounded-xl text-center" style="transition-delay: 0.4s">
735
+ <div class="w-16 h-16 bg-yellow-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-6 text-yellow-400 text-2xl neon-text icon-hover">
736
+ <i class="fas fa-headset"></i>
737
+ </div>
738
+ <h3 class="text-xl font-bold mb-3">Ongoing Support</h3>
739
+ <p class="text-gray-400">
740
+ Continuous updates, maintenance, and 24/7 technical support.
741
+ </p>
742
+ </div>
743
+ </div>
744
+
745
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
746
+ <div class="fade-in">
747
+ <h3 class="text-2xl font-bold mb-4">Our Development Process</h3>
748
+ <div class="space-y-4">
749
+ <div class="flex items-start">
750
+ <div class="bg-blue-900 bg-opacity-30 text-blue-400 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1 mr-4 icon-hover">
751
+ 1
752
+ </div>
753
+ <div>
754
+ <h4 class="font-semibold mb-1">Discovery & Planning</h4>
755
+ <p class="text-gray-400">We analyze your requirements and create a detailed project roadmap.</p>
756
+ </div>
757
+ </div>
758
+ <div class="flex items-start">
759
+ <div class="bg-purple-900 bg-opacity-30 text-purple-400 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1 mr-4 icon-hover">
760
+ 2
761
+ </div>
762
+ <div>
763
+ <h4 class="font-semibold mb-1">Design & Prototyping</h4>
764
+ <p class="text-gray-400">We design the user interface and create interactive prototypes.</p>
765
+ </div>
766
+ </div>
767
+ <div class="flex items-start">
768
+ <div class="bg-green-900 bg-opacity-30 text-green-400 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1 mr-4 icon-hover">
769
+ 3
770
+ </div>
771
+ <div>
772
+ <h4 class="font-semibold mb-1">Development</h4>
773
+ <p class="text-gray-400">We implement the solution with clean, maintainable code.</p>
774
+ </div>
775
+ </div>
776
+ <div class="flex items-start">
777
+ <div class="bg-yellow-900 bg-opacity-30 text-yellow-400 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1 mr-4 icon-hover">
778
+ 4
779
+ </div>
780
+ <div>
781
+ <h4 class="font-semibold mb-1">Testing & Launch</h4>
782
+ <p class="text-gray-400">We thoroughly test everything and launch your product.</p>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <div class="fade-in">
789
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700">
790
+ <div class="flex items-center mb-6">
791
+ <div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg text-blue-400 mr-4 icon-hover">
792
+ <i class="fas fa-chart-line text-2xl"></i>
793
+ </div>
794
+ <h3 class="text-xl font-bold">Our Results</h3>
795
+ </div>
796
+ <div class="space-y-6">
797
+ <div>
798
+ <div class="flex justify-between mb-2">
799
+ <span class="text-gray-400">Client Satisfaction</span>
800
+ <span class="text-blue-400 font-semibold">98%</span>
801
+ </div>
802
+ <div class="w-full bg-gray-700 rounded-full h-2">
803
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 98%"></div>
804
+ </div>
805
+ </div>
806
+ <div>
807
+ <div class="flex justify-between mb-2">
808
+ <span class="text-gray-400">Projects Delivered</span>
809
+ <span class="text-purple-400 font-semibold">120+</span>
810
+ </div>
811
+ <div class="w-full bg-gray-700 rounded-full h-2">
812
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 100%"></div>
813
+ </div>
814
+ </div>
815
+ <div>
816
+ <div class="flex justify-between mb-2">
817
+ <span class="text-gray-400">Active Users</span>
818
+ <span class="text-green-400 font-semibold">1.5M+</span>
819
+ </div>
820
+ <div class="w-full bg-gray-700 rounded-full h-2">
821
+ <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ </div>
826
+ </div>
827
+ </div>
828
+ </div>
829
+ </section>
830
+
831
+ <!-- CTA Section -->
832
+ <section id="contact" class="py-20 gradient-wave">
833
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
834
+ <div class="text-center mb-16 fade-in">
835
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
836
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Ready to Launch Your Telegram Project?</span>
837
+ </h2>
838
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-6"></div>
839
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
840
+ Get in touch with our team to discuss your idea and get a free consultation.
841
+ </p>
842
+ </div>
843
+
844
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
845
+ <div class="fade-in">
846
+ <form class="space-y-6">
847
+ <div>
848
+ <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Your Name</label>
849
+ <input type="text" id="name" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
850
+ </div>
851
+ <div>
852
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label>
853
+ <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
854
+ </div>
855
+ <div>
856
+ <label for="project" class="block text-sm font-medium text-gray-300 mb-1">Project Type</label>
857
+ <select id="project" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
858
+ <option value="">Select project type</option>
859
+ <option value="mini-app">Telegram Mini-App</option>
860
+ <option value="bot">Telegram Bot</option>
861
+ <option value="p2e">P2E Game</option>
862
+ <option value="web3">Web3 Integration</option>
863
+ <option value="other">Other</option>
864
+ </select>
865
+ </div>
866
+ <div>
867
+ <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Project Details</label>
868
+ <textarea id="message" rows="4" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
869
+ </div>
870
+ <div>
871
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4 rounded-lg font-semibold text-lg glow-on-hover hover:from-blue-500 hover:to-purple-500 transition-all duration-300">
872
+ Submit Your Request
873
+ </button>
874
+ </div>
875
+ </form>
876
+ </div>
877
+
878
+ <div class="fade-in">
879
+ <div class="bg-black bg-opacity-40 rounded-xl p-8 h-full border border-gray-700">
880
+ <h3 class="text-xl font-bold mb-6">Contact Information</h3>
881
+
882
+ <div class="space-y-6">
883
+ <div class="flex items-start">
884
+ <div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg text-blue-400 mr-4 icon-hover">
885
+ <i class="fas fa-envelope"></i>
886
+ </div>
887
+ <div>
888
+ <h4 class="font-semibold mb-1">Email Us</h4>
889
+ <a href="mailto:[email protected]" class="text-blue-400 hover:text-blue-300 transition-colors">[email protected]</a>
890
+ </div>
891
+ </div>
892
+
893
+ <div class="flex items-start">
894
+ <div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg text-purple-400 mr-4 icon-hover">
895
+ <i class="fab fa-telegram"></i>
896
+ </div>
897
+ <div>
898
+ <h4 class="font-semibold mb-1">Telegram</h4>
899
+ <a href="https://t.me/teleapp_support" class="text-purple-400 hover:text-purple-300 transition-colors">@teleapp_support</a>
900
+ </div>
901
+ </div>
902
+
903
+ <div class="flex items-start">
904
+ <div class="bg-green-900 bg-opacity-30 p-3 rounded-lg text-green-400 mr-4 icon-hover">
905
+ <i class="fas fa-map-marker-alt"></i>
906
+ </div>
907
+ <div>
908
+ <h4 class="font-semibold mb-1">Location</h4>
909
+ <p class="text-gray-400">Remote team worldwide with HQ in Berlin</p>
910
+ </div>
911
+ </div>
912
+ </div>
913
+
914
+ <div class="mt-8 pt-8 border-t border-gray-700">
915
+ <h4 class="font-semibold mb-4">Follow Us</h4>
916
+ <div class="flex space-x-4">
917
+ <a href="#" class="bg-gray-800 bg-opacity-40 p-3 rounded-full text-gray-300 hover:text-blue-400 transition-colors icon-hover">
918
+ <i class="fab fa-twitter"></i>
919
+ </a>
920
+ <a href="#" class="bg-gray-800 bg-opacity-40 p-3 rounded-full text-gray-300 hover:text-purple-400 transition-colors icon-hover">
921
+ <i class="fab fa-linkedin-in"></i>
922
+ </a>
923
+ <a href="#" class="bg-gray-800 bg-opacity-40 p-3 rounded-full text-gray-300 hover:text-white transition-colors icon-hover">
924
+ <i class="fab fa-github"></i>
925
+ </a>
926
+ <a href="#" class="bg-gray-800 bg-opacity-40 p-3 rounded-full text-gray-300 hover:text-pink-500 transition-colors icon-hover">
927
+ <i class="fab fa-dribbble"></i>
928
+ </a>
929
+ </div>
930
+ </div>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ </div>
935
+ </section>
936
+
937
+ <!-- Footer -->
938
+ <footer class="bg-black border-t border-gray-800 py-12">
939
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
940
+ <div class="tech-scroll-container mb-12 overflow-hidden">
941
+ <div class="tech-stack-item inline-block">
942
+ <div class="inline-flex items-center space-x-12 px-4 text-gray-400">
943
+ <span class="text-lg font-mono">Telegram API</span>
944
+ <span class="text-lg font-mono">TON Blockchain</span>
945
+ <span class="text-lg font-mono">Solidity</span>
946
+ <span class="text-lg font-mono">Node.js</span>
947
+ <span class="text-lg font-mono">React.js</span>
948
+ <span class="text-lg font-mono">Vue.js</span>
949
+ <span class="text-lg font-mono">Web3.js</span>
950
+ <span class="text-lg font-mono">TailwindCSS</span>
951
+ <span class="text-lg font-mono">PostgreSQL</span>
952
+ <span class="text-lg font-mono">Docker</span>
953
+ </div>
954
+ </div>
955
+ </div>
956
+
957
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
958
+ <div>
959
+ <div class="flex items-center mb-4">
960
+ <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
961
+ <i class="fab fa-telegram text-white"></i>
962
+ </div>
963
+ <span class="ml-2 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">TeleApp</span>
964
+ </div>
965
+ <p class="text-gray-400 text-sm">
966
+ Creating innovative Telegram solutions that drive engagement and revenue.
967
+ </p>
968
+ </div>
969
+
970
+ <div>
971
+ <h3 class="text-lg font-semibold text-white mb-4">Services</h3>
972
+ <ul class="space-y-2">
973
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Telegram Mini-Apps</a></li>
974
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Telegram Bots</a></li>
975
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">P2E Games</a></li>
976
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Web3 Integration</a></li>
977
+ </ul>
978
+ </div>
979
+
980
+ <div>
981
+ <h3 class="text-lg font-semibold text-white mb-4">Company</h3>
982
+ <ul class="space-y-2">
983
+ <li><a href="#about" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">About Us</a></li>
984
+ <li><a href="#portfolio" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Portfolio</a></li>
985
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Careers</a></li>
986
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Blog</a></li>
987
+ </ul>
988
+ </div>
989
+
990
+ <div>
991
+ <h3 class="text-lg font-semibold text-white mb-4">Legal</h3>
992
+ <ul class="space-y-2">
993
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Privacy Policy</a></li>
994
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Terms of Service</a></li>
995
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">Cookie Policy</a></li>
996
+ </ul>
997
+ </div>
998
+ </div>
999
+
1000
+ <div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
1001
+ <p>© 2023 TeleApp Studio. All rights reserved.</p>
1002
+ </div>
1003
+ </div>
1004
+ </footer>
1005
+
1006
+ <script>
1007
+ // Mobile menu toggle
1008
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
1009
+ const menu = document.getElementById('mobile-menu');
1010
+ menu.classList.toggle('hidden');
1011
+ });
1012
+
1013
+ // Video modal
1014
+ const videoModal = document.getElementById('video-modal');
1015
+ const watchVideoBtn = document.getElementById('watch-video');
1016
+ const closeModalBtn = document.getElementById('close-modal');
1017
+ const videoFrame = document.getElementById('video-frame');
1018
+
1019
+ watchVideoBtn.addEventListener('click', function() {
1020
+ videoModal.classList.add('open');
1021
+ videoFrame.src = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"; // Replace with your video
1022
+ document.body.style.overflow = 'hidden';
1023
+ });
1024
+
1025
+ closeModalBtn.addEventListener('click', function() {
1026
+ videoModal.classList.remove('open');
1027
+ videoFrame.src = "";
1028
+ document.body.style.overflow = '';
1029
+ });
1030
+
1031
+ // Scroll animation
1032
+ const fadeElements = document.querySelectorAll('.fade-in');
1033
+
1034
+ const fadeInOnScroll = function() {
1035
+ fadeElements.forEach(element => {
1036
+ const elementTop = element.getBoundingClientRect().top;
1037
+ const elementVisible = 150;
1038
+
1039
+ if (elementTop < window.innerHeight - elementVisible) {
1040
+ element.classList.add('visible');
1041
+ }
1042
+ });
1043
+ };
1044
+
1045
+ window.addEventListener('scroll', fadeInOnScroll);
1046
+ window.addEventListener('load', fadeInOnScroll);
1047
+
1048
+ // Initial check on load
1049
+ fadeInOnScroll();
1050
+
1051
+ // Lazy loading images
1052
+ const lazyImages = document.querySelectorAll('.lazy');
1053
+
1054
+ const lazyLoad = function() {
1055
+ lazyImages.forEach(img => {
1056
+ if (img.getBoundingClientRect().top < window.innerHeight && img.getBoundingClientRect().bottom > 0) {
1057
+ img.classList.add('loaded');
1058
+ }
1059
+ });
1060
+ };
1061
+
1062
+ window.addEventListener('scroll', lazyLoad);
1063
+ window.addEventListener('load', lazyLoad);
1064
+
1065
+ // Initial load check
1066
+ lazyLoad();
1067
+
1068
+ // Simple particles for Hero section
1069
+ const particlesContainer = document.querySelector('.hero-bg');
1070
+
1071
+ function createParticles() {
1072
+ if (particlesContainer) {
1073
+ for (let i = 0; i < 30; i++) {
1074
+ const particle = document.createElement('div');
1075
+ particle.classList.add('particle');
1076
+
1077
+ // Random size between 2px and 6px
1078
+ const size = Math.random() * 4 + 2;
1079
+ particle.style.width = `${size}px`;
1080
+ particle.style.height = `${size}px`;
1081
+
1082
+ // Random position
1083
+ particle.style.left = `${Math.random() * 100}%`;
1084
+ particle.style.top = `${Math.random() * 100}%`;
1085
+
1086
+ // Random animation
1087
+ particle.style.animation = `float ${Math.random() * 10 + 10}s linear infinite`;
1088
+
1089
+ // Add to container
1090
+ particlesContainer.appendChild(particle);
1091
+
1092
+ // Add random opacity
1093
+ particle.style.opacity = Math.random() * 0.3;
1094
+
1095
+ // Add CSS animation
1096
+ const keyframes = `
1097
+ @keyframes float {
1098
+ 0% {
1099
+ transform: translate(0, 0) rotate(0deg);
1100
+ }
1101
+ 100% {
1102
+ transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px) rotate(360deg);
1103
+ }
1104
+ }
1105
+ `;
1106
+
1107
+ const style = document.createElement('style');
1108
+ style.innerHTML = keyframes;
1109
+ document.head.appendChild(style);
1110
+ }
1111
+ }
1112
+ }
1113
+
1114
+ createParticles();
1115
+ </script>
1116
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1117
+ </html>