Hugging Face's logo

Spaces:
pranjalkar9
/
ui
Running

App Files Community
pranjalkar9 commited on
Commit
10c1ab5
·
verified ·
1 Parent(s): 2a12587

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +625 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ui
3
- emoji: 🏢
4
- colorFrom: red
5
- colorTo: red
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: ui
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
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,625 @@
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>ContribuTrack | Developer Productivity Analytics</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
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
12
+
13
+ :root {
14
+ --neon-primary: #00f7ff;
15
+ --neon-secondary: #ff00e4;
16
+ --neon-tertiary: #9600ff;
17
+ --glass-bg: rgba(20, 20, 30, 0.6);
18
+ }
19
+
20
+ body {
21
+ font-family: 'Space Grotesk', sans-serif;
22
+ background-color: #0a0a0f;
23
+ color: #e0e0e0;
24
+ overflow-x: hidden;
25
+ perspective: 1000px;
26
+ }
27
+
28
+ .neon-text {
29
+ text-shadow: 0 0 5px var(--neon-primary),
30
+ 0 0 10px var(--neon-primary),
31
+ 0 0 20px var(--neon-primary);
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
36
+ -webkit-background-clip: text;
37
+ background-clip: text;
38
+ color: transparent;
39
+ }
40
+
41
+ .glass-card {
42
+ background: var(--glass-bg);
43
+ backdrop-filter: blur(12px);
44
+ border: 1px solid rgba(255, 255, 255, 0.08);
45
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
46
+ }
47
+
48
+ .glow-hover:hover {
49
+ box-shadow: 0 0 15px var(--neon-primary);
50
+ transform: translateY(-2px) translateZ(20px);
51
+ }
52
+
53
+ .transform-3d {
54
+ transform-style: preserve-3d;
55
+ transition: all 0.5s ease;
56
+ }
57
+
58
+ .hover-3d:hover {
59
+ transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
60
+ }
61
+
62
+ .code-block {
63
+ background: rgba(10, 15, 20, 0.8);
64
+ border-left: 3px solid var(--neon-primary);
65
+ }
66
+
67
+ .pulse {
68
+ animation: pulse 2s infinite;
69
+ }
70
+
71
+ @keyframes pulse {
72
+ 0% { opacity: 0.7; }
73
+ 50% { opacity: 1; }
74
+ 100% { opacity: 0.7; }
75
+ }
76
+
77
+ .grid-pattern {
78
+ background-image:
79
+ linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
80
+ linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
81
+ background-size: 40px 40px;
82
+ }
83
+
84
+ .neon-glow {
85
+ box-shadow: 0 0 10px var(--neon-primary),
86
+ inset 0 0 5px var(--neon-primary);
87
+ }
88
+
89
+ .floating {
90
+ animation: floating 6s ease-in-out infinite;
91
+ }
92
+
93
+ @keyframes floating {
94
+ 0% { transform: translateY(0px) translateZ(0); }
95
+ 50% { transform: translateY(-20px) translateZ(10px); }
96
+ 100% { transform: translateY(0px) translateZ(0); }
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="grid-pattern">
101
+ <!-- Navigation -->
102
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
103
+ <div class="flex items-center space-x-2 transform-3d">
104
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center shadow-lg">
105
+ <span class="text-black font-bold">C</span>
106
+ </div>
107
+ <span class="text-xl font-bold gradient-text">ContribuTrack</span>
108
+ </div>
109
+
110
+ <div class="hidden md:flex space-x-8">
111
+ <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Features</a>
112
+ <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Pricing</a>
113
+ <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Docs</a>
114
+ <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Community</a>
115
+ </div>
116
+
117
+ <div class="flex items-center space-x-4">
118
+ <button class="px-4 py-2 rounded-md border border-gray-700 text-gray-300 hover:bg-gray-800 transition duration-300 transform hover:translateZ(10px)">
119
+ Sign In
120
+ </button>
121
+ <button class="px-4 py-2 rounded-md bg-gradient-to-r from-purple-600 to-blue-500 text-white hover:opacity-90 transition duration-300 glow-hover transform hover:translateZ(20px)">
122
+ Get Started
123
+ </button>
124
+ <button class="md:hidden text-gray-300">
125
+ <i class="fas fa-bars text-xl"></i>
126
+ </button>
127
+ </div>
128
+ </nav>
129
+
130
+ <!-- Hero Section -->
131
+ <section class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center">
132
+ <div class="md:w-1/2 mb-16 md:mb-0 transform-3d">
133
+ <div class="inline-block px-3 py-1 mb-4 rounded-full bg-gray-800 text-xs font-medium text-blue-400">
134
+ <span class="pulse">✦</span> VERSION 2.0 NOW LIVE
135
+ </div>
136
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
137
+ <span class="gradient-text">Track</span> Developer
138
+ <span class="neon-text">Productivity</span>
139
+ </h1>
140
+ <p class="text-lg md:text-xl text-gray-400 mb-8 max-w-lg">
141
+ The ultimate analytics suite for engineering managers and developers. Measure contributions, streamline code reviews, and optimize PR workflows.
142
+ </p>
143
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
144
+ <button class="px-8 py-4 rounded-lg bg-gradient-to-r from-purple-600 to-blue-500 text-white font-medium hover:opacity-90 transition duration-300 glow-hover flex items-center justify-center transform hover:translateZ(20px)">
145
+ <i class="fas fa-play mr-2"></i> Watch Demo
146
+ </button>
147
+ <button class="px-8 py-4 rounded-lg border border-gray-700 text-white font-medium hover:bg-gray-800 transition duration-300 flex items-center justify-center transform hover:translateZ(10px)">
148
+ <i class="fas fa-terminal mr-2"></i> Try Dashboard
149
+ </button>
150
+ </div>
151
+ <div class="mt-8 flex items-center space-x-4 text-sm text-gray-500">
152
+ <div class="flex -space-x-2">
153
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-8 h-8 rounded-full border-2 border-gray-800">
154
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-8 h-8 rounded-full border-2 border-gray-800">
155
+ <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-8 h-8 rounded-full border-2 border-gray-800">
156
+ </div>
157
+ <span>Trusted by 15,000+ engineering teams</span>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="md:w-1/2 relative">
162
+ <div class="glass-card rounded-2xl p-6 w-full max-w-lg mx-auto hover-3d neon-glow">
163
+ <div class="flex space-x-2 mb-4">
164
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
165
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
166
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
167
+ </div>
168
+ <div class="grid grid-cols-2 gap-4 mb-6">
169
+ <div class="glass-card rounded-lg p-4">
170
+ <div class="text-xs text-gray-400 mb-1">Active PRs</div>
171
+ <div class="text-2xl font-bold text-white">24</div>
172
+ <div class="text-xs text-green-400">↑ 12%</div>
173
+ </div>
174
+ <div class="glass-card rounded-lg p-4">
175
+ <div class="text-xs text-gray-400 mb-1">Avg. Review Time</div>
176
+ <div class="text-2xl font-bold text-white">8.2h</div>
177
+ <div class="text-xs text-red-400">↑ 1.4h</div>
178
+ </div>
179
+ </div>
180
+ <div class="h-48 bg-gray-900 rounded-lg mb-4 overflow-hidden relative">
181
+ <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900/80 z-10"></div>
182
+ <div class="absolute bottom-0 left-0 right-0 p-4 z-20">
183
+ <div class="text-sm font-medium text-white">Team Activity Heatmap</div>
184
+ </div>
185
+ <!-- Placeholder for chart -->
186
+ <div class="w-full h-full flex items-center justify-center text-gray-600">
187
+ <i class="fas fa-chart-line text-3xl"></i>
188
+ </div>
189
+ </div>
190
+ <div class="flex justify-between items-center">
191
+ <div class="text-xs text-gray-400">Last sync: 2 min ago</div>
192
+ <button class="text-xs bg-blue-900/30 text-blue-400 px-3 py-1 rounded-full">
193
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
194
+ </button>
195
+ </div>
196
+ </div>
197
+ <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-900 opacity-20 blur-3xl -z-10"></div>
198
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-blue-900 opacity-20 blur-3xl -z-10"></div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Features Grid -->
203
+ <section class="container mx-auto px-6 py-20">
204
+ <div class="text-center mb-20 transform-3d">
205
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
206
+ <span class="gradient-text">Powerful Insights</span>
207
+ <span class="text-white">for Engineering Teams</span>
208
+ </h2>
209
+ <p class="text-gray-400 max-w-2xl mx-auto">
210
+ Everything you need to measure, analyze and improve developer productivity.
211
+ </p>
212
+ </div>
213
+
214
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
215
+ <!-- Feature 1 -->
216
+ <div class="glass-card rounded-xl p-8 hover-3d transform-3d">
217
+ <div class="w-12 h-12 rounded-lg bg-blue-900/30 flex items-center justify-center mb-6 text-blue-400">
218
+ <i class="fas fa-chart-pie text-xl"></i>
219
+ </div>
220
+ <h3 class="text-xl font-bold mb-3">Comprehensive Metrics</h3>
221
+ <p class="text-gray-400 mb-4">
222
+ Track commits, PRs, reviews, and more with beautiful, actionable dashboards.
223
+ </p>
224
+ <div class="flex items-center text-blue-400 text-sm font-medium">
225
+ <span>Learn more</span>
226
+ <i class="fas fa-arrow-right ml-2"></i>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Feature 2 -->
231
+ <div class="glass-card rounded-xl p-8 hover-3d transform-3d">
232
+ <div class="w-12 h-12 rounded-lg bg-purple-900/30 flex items-center justify-center mb-6 text-purple-400">
233
+ <i class="fas fa-code-branch text-xl"></i>
234
+ </div>
235
+ <h3 class="text-xl font-bold mb-3">PR Analytics</h3>
236
+ <p class="text-gray-400 mb-4">
237
+ Identify bottlenecks in your review process and optimize team workflows.
238
+ </p>
239
+ <div class="flex items-center text-purple-400 text-sm font-medium">
240
+ <span>Learn more</span>
241
+ <i class="fas fa-arrow-right ml-2"></i>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Feature 3 -->
246
+ <div class="glass-card rounded-xl p-8 hover-3d transform-3d">
247
+ <div class="w-12 h-12 rounded-lg bg-pink-900/30 flex items-center justify-center mb-6 text-pink-400">
248
+ <i class="fas fa-robot text-xl"></i>
249
+ </div>
250
+ <h3 class="text-xl font-bold mb-3">AI Code Review</h3>
251
+ <p class="text-gray-400 mb-4">
252
+ Automated suggestions for code quality, security, and best practices.
253
+ </p>
254
+ <div class="flex items-center text-pink-400 text-sm font-medium">
255
+ <span>Learn more</span>
256
+ <i class="fas fa-arrow-right ml-2"></i>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Feature 4 -->
261
+ <div class="glass-card rounded-xl p-8 hover-3d transform-3d">
262
+ <div class="w-12 h-12 rounded-lg bg-green-900/30 flex items-center justify-center mb-6 text-green-400">
263
+ <i class="fas fa-users text-xl"></i>
264
+ </div>
265
+ <h3 class="text-xl font-bold mb-3">Team Benchmarking</h3>
266
+ <p class="text-gray-400 mb-4">
267
+ Compare performance across teams with anonymized industry data.
268
+ </p>
269
+ <div class="flex items-center text-green-400 text-sm font-medium">
270
+ <span>Learn more</span>
271
+ <i class="fas fa-arrow-right ml-2"></i>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Feature 5 -->
276
+ <div class="glass-card rounded-xl p-8 hover-3d transform-3d">
277
+ <div class="w-12 h-12 rounded-lg bg-yellow-900/30 flex items-center justify-center mb-6 text-yellow-400">
278
+ <i class="fas fa-bell text-xl"></i>
279
+ </div>
280
+ <h3 class="text-xl font-bold mb-3">Smart Alerts</h3>
281
+ <p class="text-gray-400 mb-4">
282
+ Get notified about stuck PRs, inactive developers, or unusual patterns.
283
+ </p>
284
+ <div class="flex items-center text-yellow-400 text-sm font-medium">
285
+ <span>Learn more</span>
286
+ <i class="fas fa-arrow-right ml-2"></i>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Feature 6 -->
291
+ <div class="glass-card rounded-xl p-8 hover-3d transform-3d">
292
+ <div class="w-12 h-12 rounded-lg bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400">
293
+ <i class="fas fa-plug text-xl"></i>
294
+ </div>
295
+ <h3 class="text-xl font-bold mb-3">Git Integration</h3>
296
+ <p class="text-gray-400 mb-4">
297
+ Works seamlessly with GitHub, GitLab, Bitbucket and more.
298
+ </p>
299
+ <div class="flex items-center text-indigo-400 text-sm font-medium">
300
+ <span>Learn more</span>
301
+ <i class="fas fa-arrow-right ml-2"></i>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Code Review Demo -->
308
+ <section class="container mx-auto px-6 py-20">
309
+ <div class="glass-card rounded-3xl overflow-hidden">
310
+ <div class="grid grid-cols-1 lg:grid-cols-2">
311
+ <div class="p-8 lg:p-12">
312
+ <h2 class="text-3xl font-bold mb-6">
313
+ <span class="gradient-text">AI-Powered</span>
314
+ <span class="text-white">Code Reviews</span>
315
+ </h2>
316
+ <p class="text-gray-400 mb-8">
317
+ Our AI analyzes every PR for quality, security, and performance issues before it reaches your team.
318
+ </p>
319
+ <ul class="space-y-4">
320
+ <li class="flex items-start">
321
+ <div class="flex-shrink-0 mt-1 mr-4 text-green-400">
322
+ <i class="fas fa-check-circle"></i>
323
+ </div>
324
+ <div>
325
+ <h4 class="font-medium text-white">Automated Feedback</h4>
326
+ <p class="text-gray-400 text-sm">Get instant suggestions on code improvements</p>
327
+ </div>
328
+ </li>
329
+ <li class="flex items-start">
330
+ <div class="flex-shrink-0 mt-1 mr-4 text-green-400">
331
+ <i class="fas fa-check-circle"></i>
332
+ </div>
333
+ <div>
334
+ <h4 class="font-medium text-white">Security Scanning</h4>
335
+ <p class="text-gray-400 text-sm">Detect vulnerabilities before they reach production</p>
336
+ </div>
337
+ </li>
338
+ <li class="flex items-start">
339
+ <div class="flex-shrink-0 mt-1 mr-4 text-green-400">
340
+ <i class="fas fa-check-circle"></i>
341
+ </div>
342
+ <div>
343
+ <h4 class="font-medium text-white">Learning Mode</h4>
344
+ <p class="text-gray-400 text-sm">Adapts to your team's coding standards over time</p>
345
+ </div>
346
+ </li>
347
+ </ul>
348
+ </div>
349
+ <div class="bg-gray-900 p-6 flex items-center justify-center">
350
+ <div class="w-full max-w-md transform-3d hover-3d">
351
+ <div class="code-block p-4 rounded-lg mb-4">
352
+ <div class="flex justify-between items-center mb-3">
353
+ <div class="text-xs text-gray-400">File: api/auth.js</div>
354
+ <div class="text-xs px-2 py-1 rounded bg-blue-900/30 text-blue-400">+12 -4</div>
355
+ </div>
356
+ <pre class="text-xs font-mono text-gray-300 overflow-x-auto">
357
+ <span class="text-green-400">+ async function validateToken(token) {</span>
358
+ <span class="text-green-400">+ try {</span>
359
+ <span class="text-red-400">- const decoded = jwt.verify(token, 'secret123');</span>
360
+ <span class="text-green-400">+ const decoded = jwt.verify(token, process.env.JWT_SECRET);</span>
361
+ <span class="text-green-400">+ return decoded;</span>
362
+ <span class="text-green-400">+ } catch (err) {</span>
363
+ <span class="text-green-400">+ throw new Error('Invalid token');</span>
364
+ <span class="text-green-400">+ }</span>
365
+ <span class="text-green-400">+ }</span>
366
+ </pre>
367
+ </div>
368
+ <div class="glass-card rounded-lg p-4">
369
+ <div class="flex items-start mb-3">
370
+ <div class="w-6 h-6 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-3">
371
+ <i class="fas fa-robot text-xs"></i>
372
+ </div>
373
+ <div>
374
+ <div class="text-xs font-medium text-white mb-1">ContribuTrack AI</div>
375
+ <div class="text-xs text-gray-400">Found 2 issues in this change</div>
376
+ </div>
377
+ </div>
378
+ <div class="pl-9">
379
+ <div class="text-xs text-yellow-400 mb-2 flex items-start">
380
+ <i class="fas fa-exclamation-triangle mr-2 mt-0.5"></i>
381
+ Security: Hardcoded secret replaced with env variable (good!)
382
+ </div>
383
+ <div class="text-xs text-blue-400 flex items-start">
384
+ <i class="fas fa-lightbulb mr-2 mt-0.5"></i>
385
+ Suggestion: Consider adding token expiration check
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </section>
394
+
395
+ <!-- Testimonials -->
396
+ <section class="container mx-auto px-6 py-20">
397
+ <div class="text-center mb-20 transform-3d">
398
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
399
+ <span class="gradient-text">Trusted</span>
400
+ <span class="text-white">by Engineering Leaders</span>
401
+ </h2>
402
+ <p class="text-gray-400 max-w-2xl mx-auto">
403
+ Teams at top tech companies use ContribuTrack to optimize their development workflows.
404
+ </p>
405
+ </div>
406
+
407
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center opacity-80 hover:opacity-100 transition duration-300">
408
+ <div class="flex justify-center">
409
+ <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300">
410
+ </div>
411
+ <div class="flex justify-center">
412
+ <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300">
413
+ </div>
414
+ <div class="flex justify-center">
415
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300">
416
+ </div>
417
+ <div class="flex justify-center">
418
+ <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300">
419
+ </div>
420
+ </div>
421
+
422
+ <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8">
423
+ <div class="glass-card rounded-xl p-8 hover-3d">
424
+ <div class="flex items-center mb-6">
425
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4">
426
+ <div>
427
+ <h4 class="font-bold">Sarah Johnson</h4>
428
+ <p class="text-gray-500 text-sm">VP Engineering @TechCorp</p>
429
+ </div>
430
+ </div>
431
+ <p class="text-gray-300 italic">
432
+ "ContribuTrack gave us visibility we never had before. We reduced PR review times by 35% in the first month."
433
+ </p>
434
+ <div class="mt-4 flex text-yellow-400">
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ <i class="fas fa-star"></i>
439
+ <i class="fas fa-star"></i>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="glass-card rounded-xl p-8 hover-3d">
444
+ <div class="flex items-center mb-6">
445
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4">
446
+ <div>
447
+ <h4 class="font-bold">Michael Chen</h4>
448
+ <p class="text-gray-500 text-sm">CTO @StartupLabs</p>
449
+ </div>
450
+ </div>
451
+ <p class="text-gray-300 italic">
452
+ "The AI code reviewer caught security issues our team had missed. It's like having an extra senior engineer."
453
+ </p>
454
+ <div class="mt-4 flex text-yellow-400">
455
+ <i class="fas fa-star"></i>
456
+ <i class="fas fa-star"></i>
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ <i class="fas fa-star-half-alt"></i>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="glass-card rounded-xl p-8 hover-3d">
464
+ <div class="flex items-center mb-6">
465
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
466
+ <div>
467
+ <h4 class="font-bold">Priya Patel</h4>
468
+ <p class="text-gray-500 text-sm">Engineering Manager @DigitalAgency</p>
469
+ </div>
470
+ </div>
471
+ <p class="text-gray-300 italic">
472
+ "Our developers love the actionable metrics. It's helped create a culture of continuous improvement."
473
+ </p>
474
+ <div class="mt-4 flex text-yellow-400">
475
+ <i class="fas fa-star"></i>
476
+ <i class="fas fa-star"></i>
477
+ <i class="fas fa-star"></i>
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- CTA Section -->
486
+ <section class="container mx-auto px-6 py-32">
487
+ <div class="glass-card rounded-3xl p-12 text-center relative overflow-hidden">
488
+ <div class="absolute -top-20 -left-20 w-64 h-64 rounded-full bg-purple-900 opacity-20 blur-3xl -z-10"></div>
489
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-blue-900 opacity-20 blur-3xl -z-10"></div>
490
+
491
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">
492
+ <span class="gradient-text">Ready to Optimize</span>
493
+ <span class="text-white">Your Development Workflow?</span>
494
+ </h2>
495
+ <p class="text-gray-400 max-w-2xl mx-auto mb-10">
496
+ Join thousands of engineering teams building better software with ContribuTrack.
497
+ </p>
498
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
499
+ <button class="px-8 py-4 rounded-lg bg-gradient-to-r from-purple-600 to-blue-500 text-white font-medium hover:opacity-90 transition duration-300 glow-hover transform hover:translateZ(20px)">
500
+ Start Free Trial
501
+ </button>
502
+ <button class="px-8 py-4 rounded-lg border border-gray-700 text-white font-medium hover:bg-gray-800 transition duration-300 transform hover:translateZ(10px)">
503
+ Talk to Sales
504
+ </button>
505
+ </div>
506
+ </div>
507
+ </section>
508
+
509
+ <!-- Footer -->
510
+ <footer class="bg-gray-900/50 border-t border-gray-800">
511
+ <div class="container mx-auto px-6 py-12">
512
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-12">
513
+ <div class="md:col-span-2">
514
+ <div class="flex items-center space-x-2 mb-6">
515
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
516
+ <span class="text-black font-bold">C</span>
517
+ </div>
518
+ <span class="text-xl font-bold gradient-text">ContribuTrack</span>
519
+ </div>
520
+ <p class="text-gray-400 mb-6">
521
+ The complete developer productivity analytics platform.
522
+ </p>
523
+ <div class="flex space-x-4">
524
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
525
+ <i class="fab fa-twitter"></i>
526
+ </a>
527
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
528
+ <i class="fab fa-github"></i>
529
+ </a>
530
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
531
+ <i class="fab fa-discord"></i>
532
+ </a>
533
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
534
+ <i class="fab fa-linkedin"></i>
535
+ </a>
536
+ </div>
537
+ </div>
538
+
539
+ <div>
540
+ <h4 class="text-white font-medium mb-4">Product</h4>
541
+ <ul class="space-y-3">
542
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li>
543
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li>
544
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li>
545
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Changelog</a></li>
546
+ </ul>
547
+ </div>
548
+
549
+ <div>
550
+ <h4 class="text-white font-medium mb-4">Resources</h4>
551
+ <ul class="space-y-3">
552
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li>
553
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tutorials</a></li>
554
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
555
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li>
556
+ </div>
557
+
558
+ <div>
559
+ <h4 class="text-white font-medium mb-4">Company</h4>
560
+ <ul class="space-y-3">
561
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
562
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
563
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy</a></li>
564
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms</a></li>
565
+ </ul>
566
+ </div>
567
+ </div>
568
+
569
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
570
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
571
+ © 2023 ContribuTrack. All rights reserved.
572
+ </p>
573
+ <div class="flex space-x-6">
574
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Privacy Policy</a>
575
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Terms of Service</a>
576
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Cookie Policy</a>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </footer>
581
+
582
+ <script>
583
+ // 3D hover effects and animations
584
+ document.addEventListener('DOMContentLoaded', function() {
585
+ // Add transform-3d class to all cards
586
+ const cards = document.querySelectorAll('.glass-card');
587
+ cards.forEach(card => {
588
+ card.classList.add('transform-3d');
589
+ });
590
+
591
+ // Add parallax effect to hero section
592
+ const hero = document.querySelector('.hero-section');
593
+ if (hero) {
594
+ hero.addEventListener('mousemove', (e) => {
595
+ const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
596
+ const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
597
+ hero.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
598
+ });
599
+
600
+ hero.addEventListener('mouseenter', () => {
601
+ hero.style.transition = 'none';
602
+ });
603
+
604
+ hero.addEventListener('mouseleave', () => {
605
+ hero.style.transition = 'all 0.5s ease';
606
+ hero.style.transform = 'rotateY(0deg) rotateX(0deg)';
607
+ });
608
+ }
609
+
610
+ // Animate elements on scroll
611
+ const observer = new IntersectionObserver((entries) => {
612
+ entries.forEach(entry => {
613
+ if (entry.isIntersecting) {
614
+ entry.target.classList.add('animate-fadeIn');
615
+ }
616
+ });
617
+ }, { threshold: 0.1 });
618
+
619
+ document.querySelectorAll('.transform-3d').forEach(el => {
620
+ observer.observe(el);
621
+ });
622
+ });
623
+ </script>
624
+ <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=pranjalkar9/ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
625
+ </html>