Hugging Face's logo

Spaces:
NeoPy
/
linear-portfolio-template
Running

App Files Community
NeoPy commited on
Commit
a19d02c
·
verified ·
1 Parent(s): 3fe7821

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +153 -194
index.html CHANGED
@@ -6,15 +6,28 @@
6
  <title>Linear Portfolio - Build Modern Products</title>
7
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
8
 
9
- <!-- Tailwind CSS with Dark Mode Configuration -->
10
  <script src="https://cdn.tailwindcss.com"></script>
11
  <script>
12
  tailwind.config = {
13
- darkMode: 'class', // This is the crucial line for 'dark:' to work
14
  theme: {
15
  extend: {
16
  fontFamily: {
17
  'syne': ['Syne', 'sans-serif'],
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
  }
20
  }
@@ -74,25 +87,12 @@
74
  }
75
 
76
  ::-webkit-scrollbar-thumb {
77
- background: #cbd5e1;
78
  border-radius: 3px;
79
  }
80
 
81
  ::-webkit-scrollbar-thumb:hover {
82
- background: #94a3b8;
83
- }
84
-
85
- /* Dark mode scrollbar */
86
- .dark ::-webkit-scrollbar-track {
87
- background: #1f2937;
88
- }
89
-
90
- .dark ::-webkit-scrollbar-thumb {
91
- background: #4b5563;
92
- }
93
-
94
- .dark ::-webkit-scrollbar-thumb:hover {
95
- background: #6b7280;
96
  }
97
 
98
  /* Performance optimization class */
@@ -101,18 +101,36 @@
101
  -webkit-transform: translateZ(0);
102
  will-change: transform;
103
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  </style>
105
  </head>
106
- <body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300">
107
 
108
  <!-- Header -->
109
- <header class="border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm z-50 transition-colors duration-300">
110
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
  <div class="flex justify-between items-center h-16">
112
  <div class="flex items-center">
113
  <div class="flex-shrink-0 flex items-center">
114
- <div class="w-8 h-8 bg-black dark:bg-white rounded-lg flex items-center justify-center transition-colors duration-300">
115
- <span class="text-white dark:text-black font-bold text-sm">L</span>
116
  </div>
117
  <span class="ml-3 text-xl font-semibold">Portfolio</span>
118
  </div>
@@ -120,43 +138,23 @@
120
 
121
  <div class="hidden md:block">
122
  <div class="ml-10 flex items-baseline space-x-8">
123
- <a href="#home" class="text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 px-3 py-2 text-sm font-medium transition-colors">Home</a>
124
- <a href="#about" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 text-sm font-medium transition-colors">About</a>
125
- <a href="#work" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 text-sm font-medium transition-colors">Work</a>
126
- <a href="#services" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 text-sm font-medium transition-colors">Services</a>
127
- <a href="#contact" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 text-sm font-medium transition-colors">Contact</a>
128
  </div>
129
  </div>
130
 
131
  <div class="hidden md:flex items-center space-x-4">
132
- <!-- Dark mode toggle -->
133
- <button id="dark-mode-toggle" class="p-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
134
- <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
135
- <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>
136
- </svg>
137
- <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
138
- <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
139
- </svg>
140
- </button>
141
-
142
- <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">
143
  Get Started
144
  </a>
145
  </div>
146
 
147
  <!-- Mobile menu button -->
148
  <div class="md:hidden flex items-center space-x-2">
149
- <!-- Dark mode toggle for mobile -->
150
- <button id="dark-mode-toggle-mobile" class="p-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
151
- <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
152
- <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>
153
- </svg>
154
- <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
155
- <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
156
- </svg>
157
- </button>
158
-
159
- <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
160
  <i data-feather="menu" class="w-6 h-6"></i>
161
  </button>
162
  </div>
@@ -165,13 +163,13 @@
165
  <!-- Mobile menu -->
166
  <div class="mobile-menu hidden md:hidden">
167
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
168
- <a href="#home" class="text-gray-900 dark:text-gray-100 block px-3 py-2 text-base font-medium transition-colors">Home</a>
169
- <a href="#about" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 text-base font-medium transition-colors">About</a>
170
- <a href="#work" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 text-base font-medium transition-colors">Work</a>
171
- <a href="#services" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 text-base font-medium transition-colors">Services</a>
172
- <a href="#contact" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 text-base font-medium transition-colors">Contact</a>
173
- <div class="pt-4 pb-2 border-t border-gray-200 dark:border-gray-700">
174
- <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">
175
  Get Started
176
  </a>
177
  </div>
@@ -181,22 +179,22 @@
181
  </header>
182
 
183
  <!-- Hero Section -->
184
- <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">
185
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
186
  <div class="text-center max-w-4xl mx-auto">
187
- <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mb-8">
188
  Plan and build
189
  <br>
190
- <span class="text-gray-500 dark:text-gray-400">modern products</span>
191
  </h1>
192
- <p class="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto">
193
  Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
194
  </p>
195
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
196
- <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">
197
  Start Building
198
  </a>
199
- <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">
200
  View Work
201
  </a>
202
  </div>
@@ -205,13 +203,13 @@
205
  </section>
206
 
207
  <!-- Features Section -->
208
- <section id="services" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
209
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
210
  <div class="text-center mb-20">
211
- <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-6">
212
  Made for modern product teams
213
  </h2>
214
- <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
215
  Shaped by the practices and principles that distinguish world-class product teams: relentless focus, fast execution, and commitment to quality.
216
  </p>
217
  </div>
@@ -219,33 +217,33 @@
219
  <div class="grid md:grid-cols-3 gap-12">
220
  <!-- Feature 1 -->
221
  <div class="text-center">
222
- <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">
223
- <i data-feather="cpu" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
224
  </div>
225
- <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Purpose-built development</h3>
226
- <p class="text-gray-600 dark:text-gray-300">
227
  Streamline issues, projects, and product roadmaps with tools designed specifically for modern development teams.
228
  </p>
229
  </div>
230
 
231
  <!-- Feature 2 -->
232
  <div class="text-center">
233
- <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">
234
- <i data-feather="zap" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
235
  </div>
236
- <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Designed to move fast</h3>
237
- <p class="text-gray-600 dark:text-gray-300">
238
  Lightning-fast performance and intuitive workflows that keep your team focused and productive.
239
  </p>
240
  </div>
241
 
242
  <!-- Feature 3 -->
243
  <div class="text-center">
244
- <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">
245
- <i data-feather="settings" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
246
  </div>
247
- <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Crafted to perfection</h3>
248
- <p class="text-gray-600 dark:text-gray-300">
249
  Every detail carefully considered to create an experience that developers love to use.
250
  </p>
251
  </div>
@@ -254,40 +252,40 @@
254
  </section>
255
 
256
  <!-- AI Section -->
257
- <section class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
258
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
259
  <div class="grid lg:grid-cols-2 gap-16 items-center">
260
  <div>
261
- <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">
262
- <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
263
- <span class="text-sm font-medium text-gray-700 dark:text-gray-300">AI-Powered Development</span>
264
  </div>
265
- <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6">
266
  Artificial intelligence assisted development
267
  </h2>
268
- <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
269
  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.
270
  </p>
271
- <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">
272
  Learn more
273
  <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
274
  </a>
275
  </div>
276
  <div class="relative">
277
- <div class="bg-white dark:bg-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600 p-8 shadow-sm transition-colors">
278
  <div class="space-y-4">
279
- <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-600 rounded-lg transition-colors">
280
  <div class="flex items-center">
281
- <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center transition-colors">
282
- <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">AI</span>
283
  </div>
284
- <span class="ml-3 text-gray-900 dark:text-gray-100 font-medium">Smart Suggestions</span>
285
  </div>
286
  <div class="w-3 h-3 bg-green-400 rounded-full"></div>
287
  </div>
288
- <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg transition-colors">
289
- <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Why this assignee was suggested:</p>
290
- <p class="text-sm text-gray-900 dark:text-gray-100">This person was the assignee on previous issues related to similar performance problems.</p>
291
  </div>
292
  </div>
293
  </div>
@@ -297,58 +295,58 @@
297
  </section>
298
 
299
  <!-- Work Section -->
300
- <section id="work" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
301
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
  <div class="text-center mb-20">
303
- <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-6">
304
  Manage projects end-to-end
305
  </h2>
306
- <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
307
  Consolidate specs, milestones, tasks, and documentation in one centralized location for complete project visibility.
308
  </p>
309
  </div>
310
 
311
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
312
  <!-- Project 1 -->
313
- <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
314
- <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
315
- <i data-feather="smartphone" class="w-6 h-6 text-white dark:text-black"></i>
316
  </div>
317
- <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Mobile App Development</h3>
318
- <p class="text-gray-600 dark:text-gray-300 mb-4">
319
  Cross-platform mobile applications built with React Native and modern development practices.
320
  </p>
321
- <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
322
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
323
  <span>Ongoing</span>
324
  </div>
325
  </div>
326
 
327
  <!-- Project 2 -->
328
- <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
329
- <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
330
- <i data-feather="code" class="w-6 h-6 text-white dark:text-black"></i>
331
  </div>
332
- <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">API Integration</h3>
333
- <p class="text-gray-600 dark:text-gray-300 mb-4">
334
  Robust API solutions and third-party integrations to connect your systems seamlessly.
335
  </p>
336
- <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
337
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
338
  <span>Completed</span>
339
  </div>
340
  </div>
341
 
342
  <!-- Project 3 -->
343
- <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
344
- <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
345
- <i data-feather="layout" class="w-6 h-6 text-white dark:text-black"></i>
346
  </div>
347
- <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Web Dashboard</h3>
348
- <p class="text-gray-600 dark:text-gray-300 mb-4">
349
  Interactive dashboards and analytics interfaces for data-driven decision making.
350
  </p>
351
- <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
352
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
353
  <span>In Progress</span>
354
  </div>
@@ -358,66 +356,66 @@
358
  </section>
359
 
360
  <!-- About Section -->
361
- <section id="about" class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
362
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
363
  <div class="grid lg:grid-cols-2 gap-16 items-center">
364
  <div>
365
- <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6">
366
  Built for developers
367
  </h2>
368
- <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
369
  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.
370
  </p>
371
  <div class="space-y-6">
372
  <div class="flex items-start">
373
- <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">
374
- <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
375
  </div>
376
  <div class="ml-4">
377
- <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Fast Performance</h4>
378
- <p class="text-gray-600 dark:text-gray-300">Optimized for speed and efficiency to keep you in flow state.</p>
379
  </div>
380
  </div>
381
  <div class="flex items-start">
382
- <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">
383
- <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
384
  </div>
385
  <div class="ml-4">
386
- <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Intuitive Design</h4>
387
- <p class="text-gray-600 dark:text-gray-300">Clean, minimal interfaces that get out of your way.</p>
388
  </div>
389
  </div>
390
  <div class="flex items-start">
391
- <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">
392
- <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
393
  </div>
394
  <div class="ml-4">
395
- <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Developer First</h4>
396
- <p class="text-gray-600 dark:text-gray-300">Built by developers, for developers, with your workflow in mind.</p>
397
  </div>
398
  </div>
399
  </div>
400
  </div>
401
  <div class="relative">
402
- <div class="bg-white dark:bg-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600 p-8 shadow-sm transition-colors">
403
  <div class="space-y-4">
404
- <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-600 rounded-lg transition-colors">
405
  <div class="flex items-center">
406
- <div class="w-8 h-8 bg-gray-900 dark:bg-gray-100 rounded-full flex items-center justify-center transition-colors">
407
- <span class="text-white dark:text-black text-sm font-medium">DV</span>
408
  </div>
409
- <span class="ml-3 text-gray-900 dark:text-gray-100 font-medium">Development Velocity</span>
410
  </div>
411
- <span class="text-2xl font-bold text-green-600">+340%</span>
412
  </div>
413
  <div class="grid grid-cols-2 gap-4">
414
- <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg text-center transition-colors">
415
- <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">2.3x</div>
416
- <div class="text-sm text-gray-600 dark:text-gray-300">Faster Shipping</div>
417
  </div>
418
- <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg text-center transition-colors">
419
- <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">95%</div>
420
- <div class="text-sm text-gray-600 dark:text-gray-300">Developer Satisfaction</div>
421
  </div>
422
  </div>
423
  </div>
@@ -428,13 +426,13 @@
428
  </section>
429
 
430
  <!-- Contact Section -->
431
- <section id="contact" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
432
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
433
  <div class="text-center mb-16">
434
- <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-6">
435
  Let's build something great together
436
  </h2>
437
- <p class="text-xl text-gray-600 dark:text-gray-300">
438
  Ready to streamline your development workflow? Get in touch and let's discuss your next project.
439
  </p>
440
  </div>
@@ -442,24 +440,24 @@
442
  <form class="space-y-6 max-w-2xl mx-auto">
443
  <div class="grid md:grid-cols-2 gap-6">
444
  <div>
445
- <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
446
- <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-gray-100 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
447
  </div>
448
  <div>
449
- <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
450
- <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-gray-100 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
451
  </div>
452
  </div>
453
  <div>
454
- <label for="company" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company</label>
455
- <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-gray-100 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
456
  </div>
457
  <div>
458
- <label for="project" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
459
- <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-gray-100 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors"></textarea>
460
  </div>
461
  <div class="text-center">
462
- <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">
463
  Send Message
464
  </button>
465
  </div>
@@ -468,13 +466,13 @@
468
  </section>
469
 
470
  <!-- Footer -->
471
- <footer class="bg-gray-900 dark:bg-black text-white py-16 transition-colors duration-300">
472
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
473
  <div class="grid md:grid-cols-4 gap-8">
474
  <div class="md:col-span-2">
475
  <div class="flex items-center mb-6">
476
- <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
477
- <span class="text-black font-bold text-sm">L</span>
478
  </div>
479
  <span class="ml-3 text-xl font-semibold">Portfolio</span>
480
  </div>
@@ -532,47 +530,8 @@
532
  // Initialize Feather icons
533
  feather.replace();
534
 
535
- // Dark mode toggle functionality
536
  document.addEventListener('DOMContentLoaded', function() {
537
- // Get the toggle buttons
538
- const darkModeToggle = document.getElementById('dark-mode-toggle');
539
- const darkModeToggleMobile = document.getElementById('dark-mode-toggle-mobile');
540
-
541
- // Function to set the theme
542
- function setTheme(theme) {
543
- if (theme === 'dark') {
544
- document.documentElement.classList.add('dark');
545
- } else {
546
- document.documentElement.classList.remove('dark');
547
- }
548
- localStorage.setItem('theme', theme);
549
- }
550
-
551
- // On load, check for saved theme preference or default to light
552
- const savedTheme = localStorage.getItem('theme');
553
- if (savedTheme) {
554
- setTheme(savedTheme);
555
- } else {
556
- // Default to light mode if no preference is set
557
- setTheme('light');
558
- }
559
-
560
- // Function to toggle dark mode
561
- function toggleDarkMode() {
562
- const isDark = document.documentElement.classList.contains('dark');
563
- setTheme(isDark ? 'light' : 'dark');
564
- }
565
-
566
- // Add event listeners to both toggle buttons
567
- if (darkModeToggle) {
568
- darkModeToggle.addEventListener('click', toggleDarkMode);
569
- }
570
-
571
- if (darkModeToggleMobile) {
572
- darkModeToggleMobile.addEventListener('click', toggleDarkMode);
573
- }
574
-
575
- // Mobile menu toggle
576
  const mobileMenuButton = document.querySelector('.mobile-menu-button');
577
  const mobileMenu = document.querySelector('.mobile-menu');
578
 
 
6
  <title>Linear Portfolio - Build Modern Products</title>
7
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
8
 
9
+ <!-- Tailwind CSS -->
10
  <script src="https://cdn.tailwindcss.com"></script>
11
  <script>
12
  tailwind.config = {
 
13
  theme: {
14
  extend: {
15
  fontFamily: {
16
  'syne': ['Syne', 'sans-serif'],
17
+ },
18
+ colors: {
19
+ 'orange': {
20
+ 50: '#fff7ed',
21
+ 100: '#ffedd5',
22
+ 200: '#fed7aa',
23
+ 300: '#fdba74',
24
+ 400: '#fb923c',
25
+ 500: '#f97316',
26
+ 600: '#ea580c',
27
+ 700: '#c2410c',
28
+ 800: '#9a3412',
29
+ 900: '#7c2d12',
30
+ }
31
  }
32
  }
33
  }
 
87
  }
88
 
89
  ::-webkit-scrollbar-thumb {
90
+ background: #fb923c;
91
  border-radius: 3px;
92
  }
93
 
94
  ::-webkit-scrollbar-thumb:hover {
95
+ background: #f97316;
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  }
97
 
98
  /* Performance optimization class */
 
101
  -webkit-transform: translateZ(0);
102
  will-change: transform;
103
  }
104
+
105
+ /* Orange gradient for hero section */
106
+ .orange-gradient {
107
+ background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
108
+ }
109
+
110
+ /* Orange text gradient */
111
+ .orange-text-gradient {
112
+ background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
113
+ -webkit-background-clip: text;
114
+ -webkit-text-fill-color: transparent;
115
+ background-clip: text;
116
+ }
117
+
118
+ /* Orange shadow */
119
+ .orange-shadow {
120
+ box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2);
121
+ }
122
  </style>
123
  </head>
124
+ <body class="bg-white text-gray-900 transition-colors duration-300">
125
 
126
  <!-- Header -->
127
+ <header class="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur-sm z-50 transition-colors duration-300">
128
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
129
  <div class="flex justify-between items-center h-16">
130
  <div class="flex items-center">
131
  <div class="flex-shrink-0 flex items-center">
132
+ <div class="w-8 h-8 orange-gradient rounded-lg flex items-center justify-center transition-colors duration-300">
133
+ <span class="text-white font-bold text-sm">L</span>
134
  </div>
135
  <span class="ml-3 text-xl font-semibold">Portfolio</span>
136
  </div>
 
138
 
139
  <div class="hidden md:block">
140
  <div class="ml-10 flex items-baseline space-x-8">
141
+ <a href="#home" class="text-gray-900 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Home</a>
142
+ <a href="#about" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">About</a>
143
+ <a href="#work" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Work</a>
144
+ <a href="#services" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Services</a>
145
+ <a href="#contact" class="text-gray-600 hover:text-orange-500 px-3 py-2 text-sm font-medium transition-colors">Contact</a>
146
  </div>
147
  </div>
148
 
149
  <div class="hidden md:flex items-center space-x-4">
150
+ <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
 
 
 
 
 
 
 
 
 
 
151
  Get Started
152
  </a>
153
  </div>
154
 
155
  <!-- Mobile menu button -->
156
  <div class="md:hidden flex items-center space-x-2">
157
+ <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors">
 
 
 
 
 
 
 
 
 
 
158
  <i data-feather="menu" class="w-6 h-6"></i>
159
  </button>
160
  </div>
 
163
  <!-- Mobile menu -->
164
  <div class="mobile-menu hidden md:hidden">
165
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
166
+ <a href="#home" class="text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Home</a>
167
+ <a href="#about" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">About</a>
168
+ <a href="#work" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Work</a>
169
+ <a href="#services" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Services</a>
170
+ <a href="#contact" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium transition-colors">Contact</a>
171
+ <div class="pt-4 pb-2 border-t border-gray-200">
172
+ <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-4 py-2 rounded-lg text-sm font-medium transition-colors block text-center">
173
  Get Started
174
  </a>
175
  </div>
 
179
  </header>
180
 
181
  <!-- Hero Section -->
182
+ <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-orange-50 to-white transition-colors duration-300">
183
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
184
  <div class="text-center max-w-4xl mx-auto">
185
+ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 mb-8">
186
  Plan and build
187
  <br>
188
+ <span class="orange-text-gradient">modern products</span>
189
  </h1>
190
+ <p class="text-xl sm:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto">
191
  Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
192
  </p>
193
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
194
+ <a href="#contact" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
195
  Start Building
196
  </a>
197
+ <a href="#work" class="border border-orange-300 text-orange-600 hover:bg-orange-50 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
198
  View Work
199
  </a>
200
  </div>
 
203
  </section>
204
 
205
  <!-- Features Section -->
206
+ <section id="services" class="py-24 bg-white transition-colors duration-300">
207
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
208
  <div class="text-center mb-20">
209
+ <h2 class="text-4xl font-bold text-gray-900 mb-6">
210
  Made for modern product teams
211
  </h2>
212
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
213
  Shaped by the practices and principles that distinguish world-class product teams: relentless focus, fast execution, and commitment to quality.
214
  </p>
215
  </div>
 
217
  <div class="grid md:grid-cols-3 gap-12">
218
  <!-- Feature 1 -->
219
  <div class="text-center">
220
+ <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
221
+ <i data-feather="cpu" class="w-8 h-8 text-orange-600"></i>
222
  </div>
223
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">Purpose-built development</h3>
224
+ <p class="text-gray-600">
225
  Streamline issues, projects, and product roadmaps with tools designed specifically for modern development teams.
226
  </p>
227
  </div>
228
 
229
  <!-- Feature 2 -->
230
  <div class="text-center">
231
+ <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
232
+ <i data-feather="zap" class="w-8 h-8 text-orange-600"></i>
233
  </div>
234
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">Designed to move fast</h3>
235
+ <p class="text-gray-600">
236
  Lightning-fast performance and intuitive workflows that keep your team focused and productive.
237
  </p>
238
  </div>
239
 
240
  <!-- Feature 3 -->
241
  <div class="text-center">
242
+ <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
243
+ <i data-feather="settings" class="w-8 h-8 text-orange-600"></i>
244
  </div>
245
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">Crafted to perfection</h3>
246
+ <p class="text-gray-600">
247
  Every detail carefully considered to create an experience that developers love to use.
248
  </p>
249
  </div>
 
252
  </section>
253
 
254
  <!-- AI Section -->
255
+ <section class="py-24 bg-gray-50 transition-colors duration-300">
256
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
257
  <div class="grid lg:grid-cols-2 gap-16 items-center">
258
  <div>
259
+ <div class="inline-flex items-center bg-white border border-orange-200 rounded-full px-4 py-2 mb-6 transition-colors">
260
+ <span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
261
+ <span class="text-sm font-medium text-gray-700">AI-Powered Development</span>
262
  </div>
263
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
264
  Artificial intelligence assisted development
265
  </h2>
266
+ <p class="text-xl text-gray-600 mb-8">
267
  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.
268
  </p>
269
+ <a href="#contact" class="inline-flex items-center text-orange-600 font-medium hover:text-orange-700 transition-colors">
270
  Learn more
271
  <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
272
  </a>
273
  </div>
274
  <div class="relative">
275
+ <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow transition-colors">
276
  <div class="space-y-4">
277
+ <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg transition-colors">
278
  <div class="flex items-center">
279
+ <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center transition-colors">
280
+ <span class="text-orange-600 text-sm font-medium">AI</span>
281
  </div>
282
+ <span class="ml-3 text-gray-900 font-medium">Smart Suggestions</span>
283
  </div>
284
  <div class="w-3 h-3 bg-green-400 rounded-full"></div>
285
  </div>
286
+ <div class="p-4 border border-orange-200 rounded-lg transition-colors">
287
+ <p class="text-sm text-gray-600 mb-2">Why this assignee was suggested:</p>
288
+ <p class="text-sm text-gray-900">This person was the assignee on previous issues related to similar performance problems.</p>
289
  </div>
290
  </div>
291
  </div>
 
295
  </section>
296
 
297
  <!-- Work Section -->
298
+ <section id="work" class="py-24 bg-white transition-colors duration-300">
299
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
300
  <div class="text-center mb-20">
301
+ <h2 class="text-4xl font-bold text-gray-900 mb-6">
302
  Manage projects end-to-end
303
  </h2>
304
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
305
  Consolidate specs, milestones, tasks, and documentation in one centralized location for complete project visibility.
306
  </p>
307
  </div>
308
 
309
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
310
  <!-- Project 1 -->
311
+ <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-colors">
312
+ <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-colors">
313
+ <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
314
  </div>
315
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Mobile App Development</h3>
316
+ <p class="text-gray-600 mb-4">
317
  Cross-platform mobile applications built with React Native and modern development practices.
318
  </p>
319
+ <div class="flex items-center text-sm text-gray-500">
320
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
321
  <span>Ongoing</span>
322
  </div>
323
  </div>
324
 
325
  <!-- Project 2 -->
326
+ <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-colors">
327
+ <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-colors">
328
+ <i data-feather="code" class="w-6 h-6 text-white"></i>
329
  </div>
330
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">API Integration</h3>
331
+ <p class="text-gray-600 mb-4">
332
  Robust API solutions and third-party integrations to connect your systems seamlessly.
333
  </p>
334
+ <div class="flex items-center text-sm text-gray-500">
335
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
336
  <span>Completed</span>
337
  </div>
338
  </div>
339
 
340
  <!-- Project 3 -->
341
+ <div class="bg-gray-50 rounded-2xl p-8 hover:bg-orange-50 transition-colors">
342
+ <div class="w-12 h-12 orange-gradient rounded-xl flex items-center justify-center mb-6 transition-colors">
343
+ <i data-feather="layout" class="w-6 h-6 text-white"></i>
344
  </div>
345
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Web Dashboard</h3>
346
+ <p class="text-gray-600 mb-4">
347
  Interactive dashboards and analytics interfaces for data-driven decision making.
348
  </p>
349
+ <div class="flex items-center text-sm text-gray-500">
350
  <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
351
  <span>In Progress</span>
352
  </div>
 
356
  </section>
357
 
358
  <!-- About Section -->
359
+ <section id="about" class="py-24 bg-gray-50 transition-colors duration-300">
360
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
361
  <div class="grid lg:grid-cols-2 gap-16 items-center">
362
  <div>
363
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
364
  Built for developers
365
  </h2>
366
+ <p class="text-xl text-gray-600 mb-8">
367
  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.
368
  </p>
369
  <div class="space-y-6">
370
  <div class="flex items-start">
371
+ <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-colors">
372
+ <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
373
  </div>
374
  <div class="ml-4">
375
+ <h4 class="text-lg font-semibold text-gray-900">Fast Performance</h4>
376
+ <p class="text-gray-600">Optimized for speed and efficiency to keep you in flow state.</p>
377
  </div>
378
  </div>
379
  <div class="flex items-start">
380
+ <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-colors">
381
+ <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
382
  </div>
383
  <div class="ml-4">
384
+ <h4 class="text-lg font-semibold text-gray-900">Intuitive Design</h4>
385
+ <p class="text-gray-600">Clean, minimal interfaces that get out of your way.</p>
386
  </div>
387
  </div>
388
  <div class="flex items-start">
389
+ <div class="flex-shrink-0 w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mt-1 transition-colors">
390
+ <i data-feather="check" class="w-3 h-3 text-orange-600"></i>
391
  </div>
392
  <div class="ml-4">
393
+ <h4 class="text-lg font-semibold text-gray-900">Developer First</h4>
394
+ <p class="text-gray-600">Built by developers, for developers, with your workflow in mind.</p>
395
  </div>
396
  </div>
397
  </div>
398
  </div>
399
  <div class="relative">
400
+ <div class="bg-white rounded-2xl border border-orange-200 p-8 shadow-sm orange-shadow transition-colors">
401
  <div class="space-y-4">
402
+ <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg transition-colors">
403
  <div class="flex items-center">
404
+ <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center transition-colors">
405
+ <span class="text-white text-sm font-medium">DV</span>
406
  </div>
407
+ <span class="ml-3 text-gray-900 font-medium">Development Velocity</span>
408
  </div>
409
+ <span class="text-2xl font-bold text-orange-600">+340%</span>
410
  </div>
411
  <div class="grid grid-cols-2 gap-4">
412
+ <div class="p-4 border border-orange-200 rounded-lg text-center transition-colors">
413
+ <div class="text-2xl font-bold text-gray-900">2.3x</div>
414
+ <div class="text-sm text-gray-600">Faster Shipping</div>
415
  </div>
416
+ <div class="p-4 border border-orange-200 rounded-lg text-center transition-colors">
417
+ <div class="text-2xl font-bold text-gray-900">95%</div>
418
+ <div class="text-sm text-gray-600">Developer Satisfaction</div>
419
  </div>
420
  </div>
421
  </div>
 
426
  </section>
427
 
428
  <!-- Contact Section -->
429
+ <section id="contact" class="py-24 bg-white transition-colors duration-300">
430
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
431
  <div class="text-center mb-16">
432
+ <h2 class="text-4xl font-bold text-gray-900 mb-6">
433
  Let's build something great together
434
  </h2>
435
+ <p class="text-xl text-gray-600">
436
  Ready to streamline your development workflow? Get in touch and let's discuss your next project.
437
  </p>
438
  </div>
 
440
  <form class="space-y-6 max-w-2xl mx-auto">
441
  <div class="grid md:grid-cols-2 gap-6">
442
  <div>
443
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
444
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
445
  </div>
446
  <div>
447
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
448
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
449
  </div>
450
  </div>
451
  <div>
452
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-2">Company</label>
453
+ <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
454
  </div>
455
  <div>
456
+ <label for="project" class="block text-sm font-medium text-gray-700 mb-2">Project Details</label>
457
+ <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors"></textarea>
458
  </div>
459
  <div class="text-center">
460
+ <button type="submit" class="orange-gradient text-white hover:opacity-90 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
461
  Send Message
462
  </button>
463
  </div>
 
466
  </section>
467
 
468
  <!-- Footer -->
469
+ <footer class="bg-gray-900 text-white py-16 transition-colors duration-300">
470
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
471
  <div class="grid md:grid-cols-4 gap-8">
472
  <div class="md:col-span-2">
473
  <div class="flex items-center mb-6">
474
+ <div class="w-8 h-8 orange-gradient rounded-lg flex items-center justify-center">
475
+ <span class="text-white font-bold text-sm">L</span>
476
  </div>
477
  <span class="ml-3 text-xl font-semibold">Portfolio</span>
478
  </div>
 
530
  // Initialize Feather icons
531
  feather.replace();
532
 
533
+ // Mobile menu toggle
534
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535
  const mobileMenuButton = document.querySelector('.mobile-menu-button');
536
  const mobileMenu = document.querySelector('.mobile-menu');
537