Hugging Face's logo

Spaces:
ValijonR
/
nurcode
Running

App Files Community
ValijonR commited on
Commit
dd7e5e1
·
verified ·
1 Parent(s): 1e3af8d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +527 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nurcode
3
- emoji: 🐨
4
- colorFrom: purple
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: nurcode
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: red
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,527 @@
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>NurCode - CRM/ERP Solutions & Automation Experts</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'dark-purple': '#401f3eff',
15
+ 'english-violet': '#3f2e56ff',
16
+ 'marian-blue': '#453f78ff',
17
+ 'air-superiority-blue': '#759aabff',
18
+ 'vanilla': '#faf2a1ff',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
26
+
27
+ body {
28
+ font-family: 'Poppins', sans-serif;
29
+ background-color: #f8f9fa;
30
+ scroll-behavior: smooth;
31
+ }
32
+
33
+ .hero-gradient {
34
+ background: linear-gradient(135deg, #401f3e 0%, #3f2e56 25%, #45Urif78 50%, #759aab 100%);
35
+ }
36
+
37
+ .service-card:hover {
38
+ transform: translateY(-10px);
39
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
40
+ }
41
+
42
+ .portfolio-item {
43
+ transition: all 0.3s ease;
44
+ }
45
+
46
+ .portfolio-item:hover {
47
+ transform: scale(1.03);
48
+ }
49
+
50
+ .contact-form {
51
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
52
+ }
53
+
54
+ .btn-primary {
55
+ background: linear-gradient(90deg, #401f3e, #3f2e56);
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .btn-primary:hover {
60
+ background: linear-gradient(90deg, #3f2e56, #401f3e);
61
+ transform: translateY(-2px);
62
+ }
63
+
64
+ .text-gradient {
65
+ background: linear-gradient(90deg, #401f3e, #3f2e56, #453f78, #759aab);
66
+ -webkit-background-clip: text;
67
+ -webkit-text-fill-color: transparent;
68
+ background-clip: text;
69
+ }
70
+
71
+ .section-title {
72
+ position: relative;
73
+ display: inline-block;
74
+ }
75
+
76
+ .section-title::after {
77
+ content: '';
78
+ position: absolute;
79
+ bottom: -10px;
80
+ left: 50%;
81
+ transform: translateX(-50%);
82
+ width: 80px;
83
+ height: 4px;
84
+ background: linear-gradient(90deg, #401f3e, #3f2e56);
85
+ border-radius: 2px;
86
+ }
87
+
88
+ .feature-icon {
89
+ background: linear-gradient(135deg, #401f3e 0%, #3f2e56 100%);
90
+ }
91
+
92
+ .stats-card {
93
+ transition: all 0.3s ease;
94
+ }
95
+
96
+ .stats-card:hover {
97
+ transform: translateY(-5px);
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="text-gray-800">
102
+ <!-- Header -->
103
+ <header class="fixed w-full z-50 bg-white shadow-md">
104
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
105
+ <div class="flex items-center">
106
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-dark-purple to-marian-blue flex items-center justify-center">
107
+ <span class="text-white font-bold text-xl">NC3span>
108
+ </div>
109
+ <span class="ml-3 text-xl font-bold text-dark-purple">NurCode</span>
110
+ </div>
111
+
112
+ <nav class="hidden md:flex space-x-8">
113
+ <a href="#home" class="font-medium hover:text-marian-blue transition">Home</a>
114
+ <a href="#services" class="font-medium hover:text-marian-blue transition">Services</a>
115
+ <a href="#portfolio" class="font-medium hover:text-marian-blue transition">Portfolio</a>
116
+ <a href="#about" class="font-medium hover:text-marian-blue transition">About</a>
117
+ <a href="#contact" class="font-medium hover:text-marian-blue transition">Contact</a>
118
+ </nav>
119
+
120
+ <button class="md:hidden text-dark-purple">
121
+ <i class="fas fa-bars text-2xl"></i>
122
+ </button>
123
+ </div>
124
+ </header>
125
+
126
+ <!-- Hero Section -->
127
+ <section id="home" class="pt-20 pb-16 hero-gradient text-white">
128
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
129
+ <div class="md:w-1/2 py-12 md:py-24">
130
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Business with Technology</h1>
131
+ <p class="text-xl mb-8 text-air-superiority-blue">CRM/ERP Solutions, Content Services, Telegram Bots & Automation Experts</p>
132
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
133
+ <a href="#contact" class="btn-primary px-8 py-4 rounded-lg font-bold text-center">Get Started</a>
134
+ <a href="#services" class="bg-white text-dark-purple px-8 py-4 rounded-lg font-bold text-center hover:bg-gray-100 transition">Learn More</a>
135
+ </div>
136
+ </div>
137
+ <div class="md:w-1/2 flex justify-center py-12 md:py-0">
138
+ <div class="relative">
139
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-vanilla to-air-superity-blue opacity-20 absolute -top-6 -left-6"></div>
140
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-vanilla to-air-superity-blue opacity-20 absolute -bottom-6 -right-6"></div>
141
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-dark-purple to-marian-blue flex items-center justify-center">
142
+ <div class="text-center p-4">
143
+ <i class="fas fa-code text-6xl mb-4 text-vanilla"></i>
144
+ <p class="font-bold text-vanilla">NurCode Solutions</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Stats Section -->
153
+ <section class="py-12 bg-gradient-to-r from-dark-purple to-marian-blue text-white">
154
+ <div class="container mx-auto px-4">
155
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
156
+ <div class="stats-card p-6 bg-white bg-opacity-10 rounded-xl backdrop-blur-sm">
157
+ <p class="text-3xl font-bold">150+</p>
158
+ <p class="text-air-superiority-blue">Projects Completed</p>
159
+ </div>
160
+ <div class="stats-card p-6 bg-white bg-opacity-10 rounded-xl backdrop-blur-sm">
161
+ <p class="text-3xl font-bold">98%</p>
162
+ <p class="text-air-superiority-blue">Client Satisfaction</p>
163
+ </div>
164
+ <div class="stats-card p-6 bg-white bg-opacity-10 rounded-xl backdrop-blur-sm">
165
+ <p class="text-3xl font-bold">50+</p>
166
+ <p class="text-air-superiority-blue">Happy Clients</p>
167
+ </div>
168
+ <div class="stats-card p-6 bg-white bg-opacity-10 rounded-xl backdrop-blur-sm">
169
+ <p class="text-3xl font-bold">5+</p>
170
+ <p class="text-air-superiority-blue">Years Experience</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- Services Section -->
177
+ <section id="services" class="py-20 bg-gray-50">
178
+ <div class="container mx-auto px-4">
179
+ <div class="text-center mb-16">
180
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Services</h2>
181
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">We provide cutting-edge solutions to help your business grow and thrive in the digital era</p>
182
+ </div>
183
+
184
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
185
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg transition-all">
186
+ <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
187
+ <i class="fas fa-database text-vanilla text-2xl"></i>
188
+ </div>
189
+ <h3 class="text-2xl font-bold mb-3">CRM Solutions</h3>
190
+ <p class="text-gray-600 mb-4">Custom CRM systems tailored to your business needs to manage customer relationships effectively.</p>
191
+ <a href="#" class="text-marian-blue font-medium flex items-center">
192
+ Learn more
193
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
194
+ </a>
195
+ </div>
196
+
197
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg transition-all">
198
+ <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
199
+ <i class="fas fa-cogs text-vanilla text-2xl"></i>
200
+ </div>
201
+ <h3 class="text-2xl font-bold mb-3">ERP Systems</h3>
202
+ <p class="text-gray-600 mb-4">Integrated enterprise resource planning solutions to streamline your business operations.</p>
203
+ <a href="#" class="text-marian-blue font-medium flex items-center">
204
+ Learn more
205
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
206
+ </a>
207
+ </div>
208
+
209
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg transition-all">
210
+ <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
211
+ <i class="fas fa-file-alt text-vanilla text-2xl"></i>
212
+ </div>
213
+ <h3 class="text-2xl font-bold mb-3">Content Services</h3>
214
+ <p class="text-gray-600 mb-4">Professional content creation and management services for your digital presence.</p>
215
+ <a href="#" class="text-marian-blue font-medium flex items-center">
216
+ Learn more
217
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
218
+ </a>
219
+ </div>
220
+
221
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg transition-all">
222
+ <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
223
+ <i class="fab fa-telegram-plane text-vanilla text-2xl"></i>
224
+ </div>
225
+ <h3 class="text-2xl font-bold mb-3">Telegram Bots</h3>
226
+ <p class="text-gray-600 mb-4">Custom Telegram bot development for automation, customer service, and engagement.</p rounded <a href="#" class="text-marian-blue font-medium flex items-center">
227
+ Learn more
228
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Portfolio Section -->
236
+ <section id="portfolio" class="py-20 bg-white">
237
+ <div class="container mx-auto px-4">
238
+ <div class="text-center mb-16">
239
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Portfolio</h2>
240
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Explore our recent projects and see how we've helped businesses transform</p>
241
+ </div>
242
+
243
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
244
+ <div class="portfolio-item bg-gray-50 rounded-xl overflow-hidden shadow-lg">
245
+ <div class="h-48 bg-gradient-to-r from-dark-purple to-marian-blue flex items-center justify-center">
246
+ <i class="fas fa-chart-line text-6xl text-vanilla"></i>
247
+ </div>
248
+ <div class="p-6">
249
+ <h3 class="text-2xl font-bold mb-2">ERP System for Retail Chain</h3>
250
+ <p class="text-gray-600 mb-4">Comprehensive ERP solution for inventory management and sales tracking across 50+ locations.</p>
251
+ <div class="flex flex-wrap gap-2">
252
+ <span class="bg-dark-purple text-white px-3 py-1 rounded-full text-sm">ERP</span>
253
+ <span class="bg-marian-blue text-white px-3 py-1 rounded-full text-sm">Inventory</span>
254
+ <span class="bg-air-superiority-blue text-white px-3 py-1 rounded-full text-sm">Analytics</span>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="portfolio-item bg-gray-50 rounded-xl overflow-hidden shadow-lg">
260
+ <div class="h-48 bg-gradient-to-r from-air-superiority-blue to-vanilla flex items-center justify-center">
261
+ <i class="fas fa-robot text-6xl text-dark-purple"></i>
262
+ </div>
263
+ <div class="p-6">
264
+ <h3 class="text-2xl font-bold mb-2">Telegram Automation Suite</h3>
265
+ <p class="text-gray-600 mb-4">Automated customer service and marketing automation for a SaaS company.</p>
266
+ <div class="flex flex-wrap gap-2">
267
+ <span class="bg-dark-purple text-white px-3 py-1 rounded-full text-sm">Telegram</span>
268
+ <span class="bg-marian-blue text-white px-3 py-1 rounded-full text-sm">Automation</span>
269
+ <span class="bg-air-superiority-blue text-white px-3 py-1 rounded-full text-sm">AI</span>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="portfolio-item bg-gray-50 rounded-xl overflow-hidden shadow-lg">
275
+ <div class="h-48 bg-gradient-to-r from-vanilla to-dark-purple flex items-center justify-center">
276
+ <i class="fas fa-users text-6xl text-marian-blue"></i>
277
+ </div>
278
+ <div class="p-6">
279
+ <h3 class="text-2xl font-bold mb-2">CRM for Healthcare Provider</h3>
280
+ <p class="text-gray-600 mb-4">Patient management system with appointment scheduling and medical records.</p>
281
+ <div class="flex flex-wrap gap-2">
282
+ <span class="bg-dark-purple text-white px-3 py-1 rounded-full text-sm">CRM</span>
283
+ <span class="bg-marian-blue text-white px-3 py-1 rounded-full text-sm">Healthcare</span>
284
+ <span class="bg-air-superiority-blue text-white px-3 py-1 rounded-full text-sm">HIPAA</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="portfolio-item bg-gray-50 rounded-xl overflow-hidden shadow-lg">
290
+ <div class="h-48 bg-gradient-to-r from-marian-blue to-air-superiority-blue flex items-center justify-center">
291
+ <i class="fas fa-file-invoice text-6xl text-vanilla"></i>
292
+ </div>
293
+ <div class="p-6">
294
+ <h3 class="text-2xl font-bold mb-2">Content Management Platform</h3>
295
+ <p class="text-gray-600 mb-4">Multi-language content platform for international marketing campaigns.</p>
296
+ <div class="flex flex-wrap gap-2">
297
+ <span class="bg-dark-purple text-white px-3 py-1 rounded-full text-sm">Content</span>
298
+ <span class="bg-marian-blue text-white px-3 py-1 rounded-full text-sm">CMS</span>
299
+ <span class="bg-air-superiority-blue text-white px-3 py-1 rounded-full text-sm">SEO</span>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="portfolio-item bg-gray-50 rounded-xl overflow-hidden shadow-lg">
305
+ <div class="h-48 bg-gradient-to-r from-air-superiority-blue to-vanilla flex items-center justify-center">
306
+ <i class="fas fa-shopping-cart text-6xl text-dark-purple"></i>
307
+ </div>
308
+ <div class="p-6">
309
+ <h3 class="text-2xl font-bold mb-2">E-commerce Automation</h3>
310
+ <p class="text-gray-600 mb-4">Order processing and inventory automation for online retailer.</p>
311
+ <div class="flex flex-wrap gap-2">
312
+ <span class="bg-dark-purple text-white px-3 py-1 rounded-full text-sm">Automation</span>
313
+ <span class="bg-marian-blue text-white px-3 py-1 rounded-full text-sm">E-commerce</span>
314
+ <span class="bg-air-superiority-blue text-white px-3 py-1 rounded-full text-sm">API</span>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="portfolio-item bg-gray-50 rounded-xl overflow-hidden shadow-lg">
320
+ <div class="h-48 bg-gradient-to-r from-dark-purple to-marian-blue flex items-center justify-center">
321
+ <i class="fas fa-mobile-alt text-6xl text-vanilla"></i>
322
+ </div>
323
+ <div class="p-6">
324
+ <h3 class="text-2xl font-bold mb-2">Mobile CRM App</h3>
325
+ <p class="text-gray-600 mb-4">Mobile-first CRM application for field sales teams.</p>
326
+ <div class="flex flex-wrap gap-2">
327
+ <span class="bg-dark-purple text-white px-3 py-1 rounded-full text-sm">Mobile</span>
328
+ <span class="bg-marian-blue text-white px-3 py-1 rounded-full text-sm">CRM</span>
329
+ <span class="bg-air-superiority-blue text-white px-3 py-1 rounded-full text-sm">iOS/Android</span>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- About Section -->
338
+ <section id="about" class="py-20 bg-gradient-to-r from-dark-purple to-marian-blue text-white">
339
+ <div class="container mx-auto px-4">
340
+ <div class="flex flex-col md:flex-row items-center">
341
+ <div class="md:w-1/2 mb-12 md:mb-0">
342
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">About NurCode</h2>
343
+ <p class="text-xl mb-6">We are a team of passionate developers, designers, and business strategists dedicated to transforming your ideas into digital reality.</p>
344
+ <p class="mb-6">Founded in 2018, NurCode has been at the forefront of developing innovative CRM/ERP solutions, content services, and automation tools that help businesses streamline operations and grow their customer base.</p>
345
+ <p>Our expertise spans across industries including healthcare, retail, finance, and technology. We believe in building long-term partnerships with our clients, ensuring that every solution we deliver exceeds expectations.</p>
346
+ <div class="mt-8">
347
+ <a href="#contact" class="btn-primary px-8 py-3 rounded-lg font-bold inline-block">Contact Us</a>
348
+ </div>
349
+ </div>
350
+ <div class="md:w-1/2 flex justify-center">
351
+ <div class="relative">
352
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-vanilla to-air-superity-blue opacity-20 absolute -top-6 -left-6"></div>
353
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-vanilla to-air-superity-blue opacity-20 absolute -bottom-6 -right-6"></div>
354
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-20 flex items-center justify-center">
355
+ <div class="text-center p-4">
356
+ <i class="fas fa-lightbulb text-6xl mb-4 text-vanilla"></i>
357
+ <p class="font-bold">Innovation Driven</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- Contact Section -->
367
+ <section id="contact" class="py-20 bg-gray-50">
368
+ <div class="container mx-auto px-4">
369
+ <div class="text-center mb-16">
370
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Contact Us</h2>
371
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Have a project in mind? Let's discuss how we can help you achieve your goals.</p>
372
+ </div>
373
+
374
+ <div class="flex flex-col lg:flex-row gap-12">
375
+ <div class="lg:w-1/2">
376
+ <div class="contact-form bg-white p-8 rounded-xl shadow-lg">
377
+ <form>
378
+ <div class="mb-6">
379
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
380
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-marian-blue" placeholder="Your name">
381
+ </div>
382
+
383
+ <div class="mb-6">
384
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
385
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-marian-blue" placeholder="your.email@example.com">
386
+ </div>
387
+
388
+ <div class="mb-6">
389
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
390
+ <input type=" car" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-marian-blue" placeholder="How can we help?">
391
+ </div>
392
+
393
+ <div class="mb-6">
394
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
395
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-marian-blue" placeholder="Tell us about your project..."></textarea>
396
+ </div>
397
+
398
+ <button type="submit" class="btn-primary w-full py-4 rounded-lg font-bold text-white">Send Message</button>
399
+ </form>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="lg:w-1/2">
404
+ <div class="bg-white p-8 rounded-xl shadow-lg h-full">
405
+ <h3 class="text-2xl font-bold mb-6">Get In Touch</h3>
406
+
407
+ <div class="space-y-6">
408
+ <div class="flex items-start">
409
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0">
410
+ <i class="fas fa-map-marker-alt text-vanilla"></i>
411
+ </div>
412
+ <div class="ml-4">
413
+ <h4 class="text-lg font-bold">Our Location</h4>
414
+ <p class="text-gray-600">123 Tech Street, Innovation District<br>San Francisco, CA 94103</p>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="flex items-start">
419
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0">
420
+ <i class="fas fa-phone-alt text-vanilla"></i>
421
+ </div>
422
+ <div class="ml-4">
423
+ <h4 class="text-lg font-bold">Phone Number</h4>
424
+ <p class="text-gray-600">+1 (555) 123-4567</p>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="flex items-start">
429
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0">
430
+ <i class="fas fa-envelope text-vanilla"></i>
431
+ </div>
432
+ <div class="ml-4">
433
+ <h4 class="text-lg font-bold">Email Address</h4>
434
+ <p class="text-gray-600">info@nurcode.com</p>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="flex items-start">
439
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0">
440
+ <i class="fas fa-clock text-vanilla"></i>
441
+ </div>
442
+ <div class="ml-4">
443
+ <h4 class="text-lg font-bold">Working Hours</h4>
444
+ <p class="text-gray-600">Monday - Friday: 9AM - 6PM<br>Saturday: 10AM - 4PM</p>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="mt-12">
450
+ <h3 class="text-2xl font-bold mb-6">Follow Us</h3>
451
+ <div class="flex space-x-4">
452
+ <a href="#" class="feature-icon w-12 h-12 rounded-full flex items-center justify-center">
453
+ <i class="fab fa-facebook-f text-vanilla"></i>
454
+ </a>
455
+ <a href="#" class="feature-icon w-12 h-12 rounded-full flex items-center justify-center">
456
+ <i class="fab fa-twitter text-vanilla"></i>
457
+ </a>
458
+ <a href="#" class="feature-icon w-12 h-12 rounded-full flex items-center justify-center">
459
+ <i class="fab fa-linkedin-in text-vanilla"></i>
460
+ </a>
461
+ <a href="#" class="feature-icon w-12 h-12 rounded-full flex items-center justify-center">
462
+ <i class="fab fa-instagram text-vanilla"></i>
463
+ </a>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </section>
471
+
472
+ <!-- Footer -->
473
+ <footer class="bg-dark-purple text-white py-12">
474
+ <div class="container mx-auto px-4">
475
+ <div class="flex flex-col md:flex-row justify-between items-center">
476
+ <div class="mb-6 md:mb-0">
477
+ <div class="flex items-center">
478
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-vanilla to-air-superity-blue flex items-center justify-center">
479
+ <span class="text-dark-purple font-bold text-xl">NC</span>
480
+ </div>
481
+ <span class="ml-3 text-xl font-bold">NurCode</span>
482
+ </div>
483
+ <p class="mt-2 text-air-superiority-blue">Transforming businesses through technology</p>
484
+ </div>
485
+
486
+ <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-center">
487
+ <a href="#home" class="hover:text-vanilla transition">Home</a>
488
+ <a href="#services" class="hover:text-vanilla transition">Services</a>
489
+ <a href="#portfolio" class="hover:text-vanilla transition">Portfolio</a>
490
+ <a href="#about" class="hover:text-vanilla transition">About</a>
491
+ <a href="#contact" class="hover:text-vanilla transition">Contact</a>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="border-t border-english-violet mt-8 pt-8 text-center text-air-superiority-blue">
496
+ <p>&copy; 2023 NurCode. All rights reserved.</p>
497
+ </div>
498
+ </div>
499
+ </footer>
500
+
501
+ <script>
502
+ // Smooth scrolling for anchor links
503
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
504
+ anchor.addEventListener('click', function (e) {
505
+ e.preventDefault();
506
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
507
+ behavior: 'smooth'
508
+ });
509
+ });
510
+ });
511
+
512
+ // Simple form validation
513
+ document.querySelector('form').addEventListener('submit', function(e) {
514
+ e.preventDefault();
515
+ const name = document.getElementById('name').value;
516
+ const email = document.getElementById('email').value;
517
+
518
+ if(name && email) {
519
+ alert('Thank you for your message! We will get back to you soon.');
520
+ this.reset();
521
+ } else {
522
+ alert('Please fill in all required fields.');
523
+ }
524
+ });
525
+ </script>
526
+ <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=ValijonR/nurcode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
527
+ </html>