Hugging Face's logo

Spaces:
NeoPy
/
linear-portfolio-template
Running

App Files Community
NeoPy commited on
Commit
e76575f
·
verified ·
1 Parent(s): a99c7aa

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +220 -115
index.html CHANGED
@@ -8,16 +8,20 @@
8
  <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
 
 
 
 
11
  </head>
12
- <body class="bg-white text-gray-900">
13
  <!-- Header -->
14
- <header class="border-b border-gray-100 sticky top-0 bg-white/95 backdrop-blur-sm z-50">
15
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
16
  <div class="flex justify-between items-center h-16">
17
  <div class="flex items-center">
18
  <div class="flex-shrink-0 flex items-center">
19
- <div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
20
- <span class="text-white font-bold text-sm">L</span>
21
  </div>
22
  <span class="ml-3 text-xl font-semibold">Portfolio</span>
23
  </div>
@@ -25,23 +29,43 @@
25
 
26
  <div class="hidden md:block">
27
  <div class="ml-10 flex items-baseline space-x-8">
28
- <a href="#home" class="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">Home</a>
29
- <a href="#about" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a>
30
- <a href="#work" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Work</a>
31
- <a href="#services" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
32
- <a href="#contact" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
33
  </div>
34
  </div>
35
 
36
- <div class="hidden md:block">
37
- <a href="#contact" class="bg-black text-white hover:bg-gray-800 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
 
 
 
 
 
 
 
 
 
 
38
  Get Started
39
  </a>
40
  </div>
41
 
42
  <!-- Mobile menu button -->
43
- <div class="md:hidden">
44
- <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100">
 
 
 
 
 
 
 
 
 
 
45
  <i data-feather="menu" class="w-6 h-6"></i>
46
  </button>
47
  </div>
@@ -50,33 +74,38 @@
50
  <!-- Mobile menu -->
51
  <div class="mobile-menu hidden md:hidden">
52
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
53
- <a href="#home" class="text-gray-900 block px-3 py-2 text-base font-medium">Home</a>
54
- <a href="#about" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">About</a>
55
- <a href="#work" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">Work</a>
56
- <a href="#services" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">Services</a>
57
- <a href="#contact" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">Contact</a>
 
 
 
 
 
58
  </div>
59
  </div>
60
  </nav>
61
  </header>
62
 
63
  <!-- Hero Section -->
64
- <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-gray-50 to-white">
65
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66
  <div class="text-center max-w-4xl mx-auto">
67
- <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 mb-8">
68
  Plan and build
69
  <br>
70
- <span class="text-gray-500">modern products</span>
71
  </h1>
72
- <p class="text-xl sm:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto">
73
  Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
74
  </p>
75
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
76
- <a href="#contact" class="bg-black text-white hover:bg-gray-800 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
77
  Start Building
78
  </a>
79
- <a href="#work" class="border border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
80
  View Work
81
  </a>
82
  </div>
@@ -85,13 +114,13 @@
85
  </section>
86
 
87
  <!-- Features Section -->
88
- <section id="services" class="py-24 bg-white">
89
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
90
  <div class="text-center mb-20">
91
- <h2 class="text-4xl font-bold text-gray-900 mb-6">
92
  Made for modern product teams
93
  </h2>
94
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">
95
  Shaped by the practices and principles that distinguish world-class product teams: relentless focus, fast execution, and commitment to quality.
96
  </p>
97
  </div>
@@ -99,33 +128,33 @@
99
  <div class="grid md:grid-cols-3 gap-12">
100
  <!-- Feature 1 -->
101
  <div class="text-center">
102
- <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
103
- <i data-feather="cpu" class="w-8 h-8 text-gray-700"></i>
104
  </div>
105
- <h3 class="text-2xl font-semibold text-gray-900 mb-4">Purpose-built development</h3>
106
- <p class="text-gray-600">
107
  Streamline issues, projects, and product roadmaps with tools designed specifically for modern development teams.
108
  </p>
109
  </div>
110
 
111
  <!-- Feature 2 -->
112
  <div class="text-center">
113
- <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
114
- <i data-feather="zap" class="w-8 h-8 text-gray-700"></i>
115
  </div>
116
- <h3 class="text-2xl font-semibold text-gray-900 mb-4">Designed to move fast</h3>
117
- <p class="text-gray-600">
118
  Lightning-fast performance and intuitive workflows that keep your team focused and productive.
119
  </p>
120
  </div>
121
 
122
  <!-- Feature 3 -->
123
  <div class="text-center">
124
- <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
125
- <i data-feather="settings" class="w-8 h-8 text-gray-700"></i>
126
  </div>
127
- <h3 class="text-2xl font-semibold text-gray-900 mb-4">Crafted to perfection</h3>
128
- <p class="text-gray-600">
129
  Every detail carefully considered to create an experience that developers love to use.
130
  </p>
131
  </div>
@@ -134,40 +163,40 @@
134
  </section>
135
 
136
  <!-- AI Section -->
137
- <section class="py-24 bg-gray-50">
138
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
  <div class="grid lg:grid-cols-2 gap-16 items-center">
140
  <div>
141
- <div class="inline-flex items-center bg-white border border-gray-200 rounded-full px-4 py-2 mb-6">
142
  <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
143
- <span class="text-sm font-medium text-gray-700">AI-Powered Development</span>
144
  </div>
145
- <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
146
  Artificial intelligence assisted development
147
  </h2>
148
- <p class="text-xl text-gray-600 mb-8">
149
  Streamline your development workflows with AI assistance for routine, manual tasks. Let AI handle the repetitive work so you can focus on building great products.
150
  </p>
151
- <a href="#contact" class="inline-flex items-center text-black font-medium hover:text-gray-700 transition-colors">
152
  Learn more
153
  <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
154
  </a>
155
  </div>
156
  <div class="relative">
157
- <div class="bg-white rounded-2xl border border-gray-200 p-8 shadow-sm">
158
  <div class="space-y-4">
159
- <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
160
  <div class="flex items-center">
161
- <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
162
- <span class="text-blue-600 text-sm font-medium">AI</span>
163
  </div>
164
- <span class="ml-3 text-gray-900 font-medium">Smart Suggestions</span>
165
  </div>
166
  <div class="w-3 h-3 bg-green-400 rounded-full"></div>
167
  </div>
168
- <div class="p-4 border border-gray-200 rounded-lg">
169
- <p class="text-sm text-gray-600 mb-2">Why this assignee was suggested:</p>
170
- <p class="text-sm text-gray-900">This person was the assignee on previous issues related to similar performance problems.</p>
171
  </div>
172
  </div>
173
  </div>
@@ -177,58 +206,58 @@
177
  </section>
178
 
179
  <!-- Work Section -->
180
- <section id="work" class="py-24 bg-white">
181
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
182
  <div class="text-center mb-20">
183
- <h2 class="text-4xl font-bold text-gray-900 mb-6">
184
  Manage projects end-to-end
185
  </h2>
186
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">
187
  Consolidate specs, milestones, tasks, and documentation in one centralized location for complete project visibility.
188
  </p>
189
  </div>
190
 
191
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
192
  <!-- Project 1 -->
193
- <div class="bg-gray-50 rounded-2xl p-8 hover:bg-gray-100 transition-colors">
194
- <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mb-6">
195
- <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
196
  </div>
197
- <h3 class="text-xl font-semibold text-gray-900 mb-3">Mobile App Development</h3>
198
- <p class="text-gray-600 mb-4">
199
  Cross-platform mobile applications built with React Native and modern development practices.
200
  </p>
201
- <div class="flex items-center text-sm text-gray-500">
202
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
203
  <span>Ongoing</span>
204
  </div>
205
  </div>
206
 
207
  <!-- Project 2 -->
208
- <div class="bg-gray-50 rounded-2xl p-8 hover:bg-gray-100 transition-colors">
209
- <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mb-6">
210
- <i data-feather="code" class="w-6 h-6 text-white"></i>
211
  </div>
212
- <h3 class="text-xl font-semibold text-gray-900 mb-3">API Integration</h3>
213
- <p class="text-gray-600 mb-4">
214
  Robust API solutions and third-party integrations to connect your systems seamlessly.
215
  </p>
216
- <div class="flex items-center text-sm text-gray-500">
217
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
218
  <span>Completed</span>
219
  </div>
220
  </div>
221
 
222
  <!-- Project 3 -->
223
- <div class="bg-gray-50 rounded-2xl p-8 hover:bg-gray-100 transition-colors">
224
- <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mb-6">
225
- <i data-feather="layout" class="w-6 h-6 text-white"></i>
226
  </div>
227
- <h3 class="text-xl font-semibold text-gray-900 mb-3">Web Dashboard</h3>
228
- <p class="text-gray-600 mb-4">
229
  Interactive dashboards and analytics interfaces for data-driven decision making.
230
  </p>
231
- <div class="flex items-center text-sm text-gray-500">
232
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
233
  <span>In Progress</span>
234
  </div>
@@ -238,66 +267,66 @@
238
  </section>
239
 
240
  <!-- About Section -->
241
- <section id="about" class="py-24 bg-gray-50">
242
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
243
  <div class="grid lg:grid-cols-2 gap-16 items-center">
244
  <div>
245
- <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
246
  Built for developers
247
  </h2>
248
- <p class="text-xl text-gray-600 mb-8">
249
  Every tool and workflow is designed with developer experience in mind. From lightning-fast performance to intuitive interfaces, everything is crafted to enhance your productivity.
250
  </p>
251
  <div class="space-y-6">
252
  <div class="flex items-start">
253
- <div class="flex-shrink-0 w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mt-1">
254
- <i data-feather="check" class="w-3 h-3 text-green-600"></i>
255
  </div>
256
  <div class="ml-4">
257
- <h4 class="text-lg font-semibold text-gray-900">Fast Performance</h4>
258
- <p class="text-gray-600">Optimized for speed and efficiency to keep you in flow state.</p>
259
  </div>
260
  </div>
261
  <div class="flex items-start">
262
- <div class="flex-shrink-0 w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mt-1">
263
- <i data-feather="check" class="w-3 h-3 text-green-600"></i>
264
  </div>
265
  <div class="ml-4">
266
- <h4 class="text-lg font-semibold text-gray-900">Intuitive Design</h4>
267
- <p class="text-gray-600">Clean, minimal interfaces that get out of your way.</p>
268
  </div>
269
  </div>
270
  <div class="flex items-start">
271
- <div class="flex-shrink-0 w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mt-1">
272
- <i data-feather="check" class="w-3 h-3 text-green-600"></i>
273
  </div>
274
  <div class="ml-4">
275
- <h4 class="text-lg font-semibold text-gray-900">Developer First</h4>
276
- <p class="text-gray-600">Built by developers, for developers, with your workflow in mind.</p>
277
  </div>
278
  </div>
279
  </div>
280
  </div>
281
  <div class="relative">
282
- <div class="bg-white rounded-2xl border border-gray-200 p-8 shadow-sm">
283
  <div class="space-y-4">
284
- <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
285
  <div class="flex items-center">
286
- <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center">
287
- <span class="text-white text-sm font-medium">DV</span>
288
  </div>
289
- <span class="ml-3 text-gray-900 font-medium">Development Velocity</span>
290
  </div>
291
  <span class="text-2xl font-bold text-green-600">+340%</span>
292
  </div>
293
  <div class="grid grid-cols-2 gap-4">
294
- <div class="p-4 border border-gray-200 rounded-lg text-center">
295
- <div class="text-2xl font-bold text-gray-900">2.3x</div>
296
- <div class="text-sm text-gray-600">Faster Shipping</div>
297
  </div>
298
- <div class="p-4 border border-gray-200 rounded-lg text-center">
299
- <div class="text-2xl font-bold text-gray-900">95%</div>
300
- <div class="text-sm text-gray-600">Developer Satisfaction</div>
301
  </div>
302
  </div>
303
  </div>
@@ -308,13 +337,13 @@
308
  </section>
309
 
310
  <!-- Contact Section -->
311
- <section id="contact" class="py-24 bg-white">
312
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
313
  <div class="text-center mb-16">
314
- <h2 class="text-4xl font-bold text-gray-900 mb-6">
315
  Let's build something great together
316
  </h2>
317
- <p class="text-xl text-gray-600">
318
  Ready to streamline your development workflow? Get in touch and let's discuss your next project.
319
  </p>
320
  </div>
@@ -322,24 +351,24 @@
322
  <form class="space-y-6 max-w-2xl mx-auto">
323
  <div class="grid md:grid-cols-2 gap-6">
324
  <div>
325
- <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
326
- <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors">
327
  </div>
328
  <div>
329
- <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
330
- <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors">
331
  </div>
332
  </div>
333
  <div>
334
- <label for="company" class="block text-sm font-medium text-gray-700 mb-2">Company</label>
335
- <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors">
336
  </div>
337
  <div>
338
- <label for="project" class="block text-sm font-medium text-gray-700 mb-2">Project Details</label>
339
- <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors"></textarea>
340
  </div>
341
  <div class="text-center">
342
- <button type="submit" class="bg-black text-white hover:bg-gray-800 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
343
  Send Message
344
  </button>
345
  </div>
@@ -348,7 +377,7 @@
348
  </section>
349
 
350
  <!-- Footer -->
351
- <footer class="bg-gray-900 text-white py-16">
352
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
  <div class="grid md:grid-cols-4 gap-8">
354
  <div class="md:col-span-2">
@@ -407,7 +436,83 @@
407
  </div>
408
  </div>
409
  </footer>
410
- <script src="script.js"></script>
411
- <script feather.replace();></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
412
  </body>
413
  </html>
 
8
  <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
+ <!-- Preload critical resources -->
12
+ <link rel="preload" href="https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600;700;800;900&display=swap" as="style">
13
+ <link rel="preconnect" href="https://fonts.googleapis.com">
14
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15
  </head>
16
+ <body class="bg-white text-gray-900 transition-colors duration-300">
17
  <!-- Header -->
18
+ <header class="border-b border-gray-100 dark:border-gray-800 sticky top-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm z-50 transition-colors duration-300">
19
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
20
  <div class="flex justify-between items-center h-16">
21
  <div class="flex items-center">
22
  <div class="flex-shrink-0 flex items-center">
23
+ <div class="w-8 h-8 bg-black dark:bg-white rounded-lg flex items-center justify-center transition-colors duration-300">
24
+ <span class="text-white dark:text-black font-bold text-sm">L</span>
25
  </div>
26
  <span class="ml-3 text-xl font-semibold">Portfolio</span>
27
  </div>
 
29
 
30
  <div class="hidden md:block">
31
  <div class="ml-10 flex items-baseline space-x-8">
32
+ <a href="#home" class="text-gray-900 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 px-3 py-2 text-sm font-medium transition-colors">Home</a>
33
+ <a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">About</a>
34
+ <a href="#work" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">Work</a>
35
+ <a href="#services" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">Services</a>
36
+ <a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">Contact</a>
37
  </div>
38
  </div>
39
 
40
+ <div class="hidden md:flex items-center space-x-4">
41
+ <!-- Dark mode toggle -->
42
+ <button id="dark-mode-toggle" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
43
+ <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
44
+ <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
45
+ </svg>
46
+ <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
47
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
48
+ </svg>
49
+ </button>
50
+
51
+ <a href="#contact" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
52
  Get Started
53
  </a>
54
  </div>
55
 
56
  <!-- Mobile menu button -->
57
+ <div class="md:hidden flex items-center space-x-2">
58
+ <!-- Dark mode toggle for mobile -->
59
+ <button id="dark-mode-toggle-mobile" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
60
+ <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
61
+ <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
62
+ </svg>
63
+ <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
64
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
65
+ </svg>
66
+ </button>
67
+
68
+ <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
69
  <i data-feather="menu" class="w-6 h-6"></i>
70
  </button>
71
  </div>
 
74
  <!-- Mobile menu -->
75
  <div class="mobile-menu hidden md:hidden">
76
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
77
+ <a href="#home" class="text-gray-900 dark:text-white block px-3 py-2 text-base font-medium transition-colors">Home</a>
78
+ <a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">About</a>
79
+ <a href="#work" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">Work</a>
80
+ <a href="#services" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">Services</a>
81
+ <a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">Contact</a>
82
+ <div class="pt-4 pb-2 border-t border-gray-100 dark:border-gray-800">
83
+ <a href="#contact" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-4 py-2 rounded-lg text-sm font-medium transition-colors block text-center">
84
+ Get Started
85
+ </a>
86
+ </div>
87
  </div>
88
  </div>
89
  </nav>
90
  </header>
91
 
92
  <!-- Hero Section -->
93
+ <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
94
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
95
  <div class="text-center max-w-4xl mx-auto">
96
+ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 dark:text-white mb-8">
97
  Plan and build
98
  <br>
99
+ <span class="text-gray-500 dark:text-gray-400">modern products</span>
100
  </h1>
101
+ <p class="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto">
102
  Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
103
  </p>
104
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
105
+ <a href="#contact" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
106
  Start Building
107
  </a>
108
+ <a href="#work" class="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
109
  View Work
110
  </a>
111
  </div>
 
114
  </section>
115
 
116
  <!-- Features Section -->
117
+ <section id="services" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
118
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
119
  <div class="text-center mb-20">
120
+ <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
121
  Made for modern product teams
122
  </h2>
123
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
124
  Shaped by the practices and principles that distinguish world-class product teams: relentless focus, fast execution, and commitment to quality.
125
  </p>
126
  </div>
 
128
  <div class="grid md:grid-cols-3 gap-12">
129
  <!-- Feature 1 -->
130
  <div class="text-center">
131
+ <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
132
+ <i data-feather="cpu" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
133
  </div>
134
+ <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Purpose-built development</h3>
135
+ <p class="text-gray-600 dark:text-gray-300">
136
  Streamline issues, projects, and product roadmaps with tools designed specifically for modern development teams.
137
  </p>
138
  </div>
139
 
140
  <!-- Feature 2 -->
141
  <div class="text-center">
142
+ <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
143
+ <i data-feather="zap" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
144
  </div>
145
+ <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Designed to move fast</h3>
146
+ <p class="text-gray-600 dark:text-gray-300">
147
  Lightning-fast performance and intuitive workflows that keep your team focused and productive.
148
  </p>
149
  </div>
150
 
151
  <!-- Feature 3 -->
152
  <div class="text-center">
153
+ <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
154
+ <i data-feather="settings" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
155
  </div>
156
+ <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Crafted to perfection</h3>
157
+ <p class="text-gray-600 dark:text-gray-300">
158
  Every detail carefully considered to create an experience that developers love to use.
159
  </p>
160
  </div>
 
163
  </section>
164
 
165
  <!-- AI Section -->
166
+ <section class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
167
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
168
  <div class="grid lg:grid-cols-2 gap-16 items-center">
169
  <div>
170
+ <div class="inline-flex items-center bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-full px-4 py-2 mb-6 transition-colors">
171
  <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
172
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">AI-Powered Development</span>
173
  </div>
174
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
175
  Artificial intelligence assisted development
176
  </h2>
177
+ <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
178
  Streamline your development workflows with AI assistance for routine, manual tasks. Let AI handle the repetitive work so you can focus on building great products.
179
  </p>
180
+ <a href="#contact" class="inline-flex items-center text-black dark:text-white font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
181
  Learn more
182
  <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
183
  </a>
184
  </div>
185
  <div class="relative">
186
+ <div class="bg-white dark:bg-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600 p-8 shadow-sm transition-colors">
187
  <div class="space-y-4">
188
+ <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-600 rounded-lg transition-colors">
189
  <div class="flex items-center">
190
+ <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center transition-colors">
191
+ <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">AI</span>
192
  </div>
193
+ <span class="ml-3 text-gray-900 dark:text-white font-medium">Smart Suggestions</span>
194
  </div>
195
  <div class="w-3 h-3 bg-green-400 rounded-full"></div>
196
  </div>
197
+ <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg transition-colors">
198
+ <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Why this assignee was suggested:</p>
199
+ <p class="text-sm text-gray-900 dark:text-white">This person was the assignee on previous issues related to similar performance problems.</p>
200
  </div>
201
  </div>
202
  </div>
 
206
  </section>
207
 
208
  <!-- Work Section -->
209
+ <section id="work" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
210
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
211
  <div class="text-center mb-20">
212
+ <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
213
  Manage projects end-to-end
214
  </h2>
215
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
216
  Consolidate specs, milestones, tasks, and documentation in one centralized location for complete project visibility.
217
  </p>
218
  </div>
219
 
220
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
221
  <!-- Project 1 -->
222
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
223
+ <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
224
+ <i data-feather="smartphone" class="w-6 h-6 text-white dark:text-black"></i>
225
  </div>
226
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Mobile App Development</h3>
227
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
228
  Cross-platform mobile applications built with React Native and modern development practices.
229
  </p>
230
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
231
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
232
  <span>Ongoing</span>
233
  </div>
234
  </div>
235
 
236
  <!-- Project 2 -->
237
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
238
+ <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
239
+ <i data-feather="code" class="w-6 h-6 text-white dark:text-black"></i>
240
  </div>
241
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">API Integration</h3>
242
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
243
  Robust API solutions and third-party integrations to connect your systems seamlessly.
244
  </p>
245
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
246
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
247
  <span>Completed</span>
248
  </div>
249
  </div>
250
 
251
  <!-- Project 3 -->
252
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
253
+ <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
254
+ <i data-feather="layout" class="w-6 h-6 text-white dark:text-black"></i>
255
  </div>
256
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Web Dashboard</h3>
257
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
258
  Interactive dashboards and analytics interfaces for data-driven decision making.
259
  </p>
260
+ <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
261
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
262
  <span>In Progress</span>
263
  </div>
 
267
  </section>
268
 
269
  <!-- About Section -->
270
+ <section id="about" class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
271
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
272
  <div class="grid lg:grid-cols-2 gap-16 items-center">
273
  <div>
274
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
275
  Built for developers
276
  </h2>
277
+ <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
278
  Every tool and workflow is designed with developer experience in mind. From lightning-fast performance to intuitive interfaces, everything is crafted to enhance your productivity.
279
  </p>
280
  <div class="space-y-6">
281
  <div class="flex items-start">
282
+ <div class="flex-shrink-0 w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mt-1 transition-colors">
283
+ <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
284
  </div>
285
  <div class="ml-4">
286
+ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Fast Performance</h4>
287
+ <p class="text-gray-600 dark:text-gray-300">Optimized for speed and efficiency to keep you in flow state.</p>
288
  </div>
289
  </div>
290
  <div class="flex items-start">
291
+ <div class="flex-shrink-0 w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mt-1 transition-colors">
292
+ <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
293
  </div>
294
  <div class="ml-4">
295
+ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Intuitive Design</h4>
296
+ <p class="text-gray-600 dark:text-gray-300">Clean, minimal interfaces that get out of your way.</p>
297
  </div>
298
  </div>
299
  <div class="flex items-start">
300
+ <div class="flex-shrink-0 w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mt-1 transition-colors">
301
+ <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
302
  </div>
303
  <div class="ml-4">
304
+ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Developer First</h4>
305
+ <p class="text-gray-600 dark:text-gray-300">Built by developers, for developers, with your workflow in mind.</p>
306
  </div>
307
  </div>
308
  </div>
309
  </div>
310
  <div class="relative">
311
+ <div class="bg-white dark:bg-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600 p-8 shadow-sm transition-colors">
312
  <div class="space-y-4">
313
+ <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-600 rounded-lg transition-colors">
314
  <div class="flex items-center">
315
+ <div class="w-8 h-8 bg-gray-900 dark:bg-gray-100 rounded-full flex items-center justify-center transition-colors">
316
+ <span class="text-white dark:text-black text-sm font-medium">DV</span>
317
  </div>
318
+ <span class="ml-3 text-gray-900 dark:text-white font-medium">Development Velocity</span>
319
  </div>
320
  <span class="text-2xl font-bold text-green-600">+340%</span>
321
  </div>
322
  <div class="grid grid-cols-2 gap-4">
323
+ <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg text-center transition-colors">
324
+ <div class="text-2xl font-bold text-gray-900 dark:text-white">2.3x</div>
325
+ <div class="text-sm text-gray-600 dark:text-gray-300">Faster Shipping</div>
326
  </div>
327
+ <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg text-center transition-colors">
328
+ <div class="text-2xl font-bold text-gray-900 dark:text-white">95%</div>
329
+ <div class="text-sm text-gray-600 dark:text-gray-300">Developer Satisfaction</div>
330
  </div>
331
  </div>
332
  </div>
 
337
  </section>
338
 
339
  <!-- Contact Section -->
340
+ <section id="contact" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
341
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
342
  <div class="text-center mb-16">
343
+ <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
344
  Let's build something great together
345
  </h2>
346
+ <p class="text-xl text-gray-600 dark:text-gray-300">
347
  Ready to streamline your development workflow? Get in touch and let's discuss your next project.
348
  </p>
349
  </div>
 
351
  <form class="space-y-6 max-w-2xl mx-auto">
352
  <div class="grid md:grid-cols-2 gap-6">
353
  <div>
354
+ <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
355
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
356
  </div>
357
  <div>
358
+ <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
359
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
360
  </div>
361
  </div>
362
  <div>
363
+ <label for="company" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company</label>
364
+ <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
365
  </div>
366
  <div>
367
+ <label for="project" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
368
+ <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors"></textarea>
369
  </div>
370
  <div class="text-center">
371
+ <button type="submit" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
372
  Send Message
373
  </button>
374
  </div>
 
377
  </section>
378
 
379
  <!-- Footer -->
380
+ <footer class="bg-gray-900 dark:bg-black text-white py-16 transition-colors duration-300">
381
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
382
  <div class="grid md:grid-cols-4 gap-8">
383
  <div class="md:col-span-2">
 
436
  </div>
437
  </div>
438
  </footer>
439
+
440
+ <script src="script.js"></script>
441
+ <script>
442
+ // Initialize Feather icons
443
+ feather.replace();
444
+
445
+ // Dark mode toggle functionality
446
+ document.addEventListener('DOMContentLoaded', function() {
447
+ // Get the toggle buttons
448
+ const darkModeToggle = document.getElementById('dark-mode-toggle');
449
+ const darkModeToggleMobile = document.getElementById('dark-mode-toggle-mobile');
450
+
451
+ // Check for saved theme preference or default to light mode
452
+ const currentTheme = localStorage.getItem('theme') || 'light';
453
+
454
+ // Apply the saved theme on page load
455
+ if (currentTheme === 'dark') {
456
+ document.documentElement.classList.add('dark');
457
+ }
458
+
459
+ // Function to toggle dark mode
460
+ function toggleDarkMode() {
461
+ document.documentElement.classList.toggle('dark');
462
+
463
+ // Save the current theme preference
464
+ if (document.documentElement.classList.contains('dark')) {
465
+ localStorage.setItem('theme', 'dark');
466
+ } else {
467
+ localStorage.setItem('theme', 'light');
468
+ }
469
+ }
470
+
471
+ // Add event listeners to both toggle buttons
472
+ if (darkModeToggle) {
473
+ darkModeToggle.addEventListener('click', toggleDarkMode);
474
+ }
475
+
476
+ if (darkModeToggleMobile) {
477
+ darkModeToggleMobile.addEventListener('click', toggleDarkMode);
478
+ }
479
+
480
+ // Mobile menu toggle
481
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
482
+ const mobileMenu = document.querySelector('.mobile-menu');
483
+
484
+ if (mobileMenuButton && mobileMenu) {
485
+ mobileMenuButton.addEventListener('click', function() {
486
+ mobileMenu.classList.toggle('hidden');
487
+ });
488
+ }
489
+
490
+ // Close mobile menu when clicking on a link
491
+ const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
492
+ mobileMenuLinks.forEach(link => {
493
+ link.addEventListener('click', function() {
494
+ mobileMenu.classList.add('hidden');
495
+ });
496
+ });
497
+
498
+ // Smooth scrolling for anchor links
499
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
500
+ anchor.addEventListener('click', function (e) {
501
+ e.preventDefault();
502
+
503
+ const targetId = this.getAttribute('href');
504
+ if (targetId === '#') return;
505
+
506
+ const targetElement = document.querySelector(targetId);
507
+ if (targetElement) {
508
+ window.scrollTo({
509
+ top: targetElement.offsetTop - 80, // Adjust for header height
510
+ behavior: 'smooth'
511
+ });
512
+ }
513
+ });
514
+ });
515
+ });
516
+ </script>
517
  </body>
518
  </html>