Hugging Face's logo

Spaces:
Jadoonfida
/
pixelperfect-webcraft
Running

App Files Community
Jadoonfida commited on
Commit
90401c9
·
verified ·
1 Parent(s): 5850aca

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +545 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelperfect Webcraft
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: PixelPerfect WebCraft
3
+ colorFrom: yellow
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,546 @@
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>PixelPerfect WebCraft | Web Development Services</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
+ }
21
+
22
+ .tech-icon {
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .tech-icon:hover {
27
+ transform: translateY(-5px);
28
+ filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.1));
29
+ }
30
+
31
+ .service-card:hover {
32
+ transform: translateY(-10px);
33
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-20 items-center">
42
+ <div class="flex items-center">
43
+ <a href="#" class="flex items-center">
44
+ <img src="https://fidajadoon.com/wp-content/uploads/2024/04/Fida-Jadoon-logo.png" alt="Logo" class="h-12">
45
+ </a>
46
+ </div>
47
+ <div class="hidden md:flex items-center space-x-8">
48
+ <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Home</a>
49
+ <a href="#services" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Services</a>
50
+ <a href="#portfolio" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Portfolio</a>
51
+ <a href="#contact" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Contact</a>
52
+ <a href="#contact" class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition duration-300">
53
+ Free Consultation
54
+ </a>
55
+ </div>
56
+ <div class="md:hidden">
57
+ <button class="text-gray-700">
58
+ <i data-feather="menu"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- Hero Section -->
66
+ <section class="gradient-bg text-white">
67
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
68
+ <div class="grid md:grid-cols-2 gap-12 items-center">
69
+ <div>
70
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
71
+ Transform Your Digital Presence
72
+ </h1>
73
+ <p class="text-lg md:text-xl mb-8 opacity-90">
74
+ Cutting-edge web solutions designed to captivate your audience and drive meaningful results. From responsive design to robust functionality, we craft websites that work as hard as you do.
75
+ </p>
76
+ <div class="flex flex-wrap gap-4">
77
+ <a href="#contact" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition duration-300">
78
+ Get Started
79
+ </a>
80
+ <a href="#portfolio" class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition duration-300">
81
+ View Our Work
82
+ </a>
83
+ </div>
84
+ </div>
85
+ <div class="flex justify-center">
86
+ <img src="https://fidajadoon.com/wp-content/uploads/2025/09/web-development-1.webp" alt="Web Development" class="rounded-lg shadow-2xl max-w-full h-auto">
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Services Section -->
93
+ <section id="services" class="py-20 bg-white">
94
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
95
+ <div class="text-center mb-16">
96
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
97
+ Comprehensive Web Development Services
98
+ </h2>
99
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
100
+ We offer end-to-end web solutions tailored to your business needs
101
+ </p>
102
+ </div>
103
+
104
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
105
+ <!-- Service Card 1 -->
106
+ <div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300">
107
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
108
+ <i data-feather="layout" class="text-indigo-600 w-8 h-8"></i>
109
+ </div>
110
+ <h3 class="text-xl font-bold text-gray-800 mb-3">UI/UX Web Design</h3>
111
+ <p class="text-gray-600 mb-4">
112
+ Creating exceptional user experiences with aesthetic appeal and functional design principles to engage visitors and convert them into customers.
113
+ </p>
114
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
115
+ Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
116
+ </a>
117
+ </div>
118
+
119
+ <!-- Service Card 2 -->
120
+ <div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300">
121
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
122
+ <i data-feather="code" class="text-indigo-600 w-8 h-8"></i>
123
+ </div>
124
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Frontend Development</h3>
125
+ <p class="text-gray-600 mb-4">
126
+ Bringing designs to life with clean, efficient code and modern web technologies for flawless performance across all devices.
127
+ </p>
128
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
129
+ Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
130
+ </a>
131
+ </div>
132
+
133
+ <!-- Service Card 3 -->
134
+ <div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300">
135
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
136
+ <i data-feather="server" class="text-indigo-600 w-8 h-8"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Backend Development</h3>
139
+ <p class="text-gray-600 mb-4">
140
+ Architecting secure and scalable server-side solutions with efficient data processing and robust API functionality.
141
+ </p>
142
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
143
+ Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
144
+ </a>
145
+ </div>
146
+
147
+ <!-- Service Card 4 -->
148
+ <div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300">
149
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
150
+ <i data-feather="cpu" class="text-indigo-600 w-8 h-8"></i>
151
+ </div>
152
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Full Stack Development</h3>
153
+ <p class="text-gray-600 mb-4">
154
+ Comprehensive end-to-end web solutions with dynamic capabilities across channels for a cohesive user experience.
155
+ </p>
156
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
157
+ Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
158
+ </a>
159
+ </div>
160
+
161
+ <!-- Service Card 5 -->
162
+ <div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300">
163
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
164
+ <i data-feather="zap" class="text-indigo-600 w-8 h-8"></i>
165
+ </div>
166
+ <h3 class="text-xl font-bold text-gray-800 mb-3">No/Low Code Development</h3>
167
+ <p class="text-gray-600 mb-4">
168
+ Accelerating development with no-code and low-code platforms to quickly build and deploy web applications.
169
+ </p>
170
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
171
+ Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
172
+ </a>
173
+ </div>
174
+
175
+ <!-- Service Card 6 -->
176
+ <div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300">
177
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
178
+ <i data-feather="cloud" class="text-indigo-600 w-8 h-8"></i>
179
+ </div>
180
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Cloud Development</h3>
181
+ <p class="text-gray-600 mb-4">
182
+ Optimizing web applications for performance, security, and scalability with cloud computing solutions.
183
+ </p>
184
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
185
+ Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
186
+ </a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </section>
191
+
192
+ <!-- Tech Stack Section -->
193
+ <section class="py-20 bg-gray-50">
194
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
195
+ <div class="text-center mb-16">
196
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
197
+ Our Technology Stack
198
+ </h2>
199
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
200
+ We leverage the latest technologies to build robust, scalable websites
201
+ </p>
202
+ </div>
203
+
204
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-8">
205
+ <div class="flex flex-col items-center tech-icon">
206
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/HTML5_Badge_512-rc6zfp93q98pd2m9zrwfcfqef1rpa4cemrnlw1gd3w.png" alt="HTML5" class="h-16 w-16">
207
+ <span class="mt-2 text-sm font-medium text-gray-700">HTML5</span>
208
+ </div>
209
+ <div class="flex flex-col items-center tech-icon">
210
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/css3-rc6zfndfcl64pup0ar367g7h8a0yuq4xyicmxhj5gc.png" alt="CSS3" class="h-16 w-16">
211
+ <span class="mt-2 text-sm font-medium text-gray-700">CSS3</span>
212
+ </div>
213
+ <div class="flex flex-col items-center tech-icon">
214
+ <img src="https://fidajadoon.com/wp-content/uploads/2025/09/jquery-4.svg" alt="jQuery" class="h-16 w-16">
215
+ <span class="mt-2 text-sm font-medium text-gray-700">jQuery</span>
216
+ </div>
217
+ <div class="flex flex-col items-center tech-icon">
218
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/java-coffee-cup-logo-rc6zm4hefi18p5aehjundtdsju3zvnudik51y3xil8.png" alt="Java" class="h-16 w-16">
219
+ <span class="mt-2 text-sm font-medium text-gray-700">Java</span>
220
+ </div>
221
+ <div class="flex flex-col items-center tech-icon">
222
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Unofficial_JavaScript_logo_2.svg-rc6zm7ax0053nz6b132j3ao6bzq3ir5kiy3idxtc2k.png" alt="JavaScript" class="h-16 w-16">
223
+ <span class="mt-2 text-sm font-medium text-gray-700">JavaScript</span>
224
+ </div>
225
+ <div class="flex flex-col items-center tech-icon">
226
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Python-Emblem-scaled-rc6zfuw4v9gfaqe32uc6reb5zczwkaysnjkirp802k.png" alt="Python" class="h-16 w-16">
227
+ <span class="mt-2 text-sm font-medium text-gray-700">Python</span>
228
+ </div>
229
+ <div class="flex flex-col items-center tech-icon">
230
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Wordpress_Blue_logo-rc70lucm4uxhvpelwzoa4swd6y24dln6fclagmyy58.png" alt="WordPress" class="h-16 w-16">
231
+ <span class="mt-2 text-sm font-medium text-gray-700">WordPress</span>
232
+ </div>
233
+ <div class="flex flex-col items-center tech-icon">
234
+ <img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Angular_full_color_logo.svg-rc70o44kng1fxs3tnh0tnq9gvgv1z9ntqlcj7plp3w.png" alt="Angular" class="h-16 w-16">
235
+ <span class="mt-2 text-sm font-medium text-gray-700">Angular</span>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Portfolio Section -->
242
+ <section id="portfolio" class="py-20 bg-white">
243
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
244
+ <div class="text-center mb-16">
245
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
246
+ Our Recent Work
247
+ </h2>
248
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
249
+ See how we've helped businesses transform their digital presence
250
+ </p>
251
+ </div>
252
+
253
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
254
+ <!-- Portfolio Item 1 -->
255
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
256
+ <img src="https://fidajadoon.com/wp-content/uploads/2025/08/Primary-Care-Provider-East-Windsor-NJ-Family-Doctor-Medical-Weight-Loss-08-29-2025_11_47_PM-scaled.png" alt="Prime Health of NJ" class="w-full h-64 object-cover">
257
+ <div class="p-6">
258
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Prime Health of NJ</h3>
259
+ <div class="flex flex-wrap gap-2 mb-4">
260
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Website Design</span>
261
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Enhanced UX/UI</span>
262
+ </div>
263
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
264
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
265
+ </a>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Portfolio Item 2 -->
270
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
271
+ <img src="https://fidajadoon.com/wp-content/uploads/2025/08/pic-5-scaled.webp" alt="Beyond Infinity ABA" class="w-full h-64 object-cover">
272
+ <div class="p-6">
273
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Beyond Infinity ABA</h3>
274
+ <div class="flex flex-wrap gap-2 mb-4">
275
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Website Design</span>
276
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Content Strategy</span>
277
+ </div>
278
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
279
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
280
+ </a>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Portfolio Item 3 -->
285
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
286
+ <img src="https://fidajadoon.com/wp-content/uploads/2025/08/pic-6-scaled.webp" alt="Green Wellness PLLC" class="w-full h-64 object-cover">
287
+ <div class="p-6">
288
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Green Wellness PLLC</h3>
289
+ <div class="flex flex-wrap gap-2 mb-4">
290
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Enhanced UX/UI</span>
291
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Responsiveness</span>
292
+ </div>
293
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
294
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
295
+ </a>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="text-center mt-12">
301
+ <a href="#" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300">
302
+ View All Projects
303
+ </a>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Stats Section -->
309
+ <section class="py-20 gradient-bg text-white">
310
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
311
+ <div class="grid md:grid-cols-3 gap-8 text-center">
312
+ <div class="p-8">
313
+ <div class="text-5xl font-bold mb-2">10+</div>
314
+ <div class="text-xl font-medium">Years of Experience</div>
315
+ </div>
316
+ <div class="p-8">
317
+ <div class="text-5xl font-bold mb-2">100+</div>
318
+ <div class="text-xl font-medium">Projects Delivered</div>
319
+ </div>
320
+ <div class="p-8">
321
+ <div class="text-5xl font-bold mb-2">$5M+</div>
322
+ <div class="text-xl font-medium">Revenue Generated</div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- Testimonials Section -->
329
+ <section class="py-20 bg-gray-50">
330
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
331
+ <div class="text-center mb-16">
332
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
333
+ What Our Clients Say
334
+ </h2>
335
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
336
+ Don't just take our word for it - hear from our satisfied clients
337
+ </p>
338
+ </div>
339
+
340
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
341
+ <!-- Testimonial 1 -->
342
+ <div class="bg-white p-8 rounded-xl shadow-lg">
343
+ <div class="flex items-center mb-6">
344
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
345
+ <div>
346
+ <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
347
+ <p class="text-gray-600">CEO, Prime Health</p>
348
+ </div>
349
+ </div>
350
+ <p class="text-gray-700 italic">
351
+ "Working with PixelPerfect WebCraft transformed our online presence. Their attention to detail and user experience design increased our patient inquiries by 40%."
352
+ </p>
353
+ </div>
354
+
355
+ <!-- Testimonial 2 -->
356
+ <div class="bg-white p-8 rounded-xl shadow-lg">
357
+ <div class="flex items-center mb-6">
358
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
359
+ <div>
360
+ <h4 class="font-bold text-gray-800">Michael Chen</h4>
361
+ <p class="text-gray-600">Director, Beyond Infinity</p>
362
+ </div>
363
+ </div>
364
+ <p class="text-gray-700 italic">
365
+ "The team delivered our project on time and exceeded our expectations. Their technical expertise and creative solutions were exactly what we needed."
366
+ </p>
367
+ </div>
368
+
369
+ <!-- Testimonial 3 -->
370
+ <div class="bg-white p-8 rounded-xl shadow-lg">
371
+ <div class="flex items-center mb-6">
372
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
373
+ <div>
374
+ <h4 class="font-bold text-gray-800">Lisa Rodriguez</h4>
375
+ <p class="text-gray-600">Founder, Green Wellness</p>
376
+ </div>
377
+ </div>
378
+ <p class="text-gray-700 italic">
379
+ "From initial concept to final implementation, the communication was excellent. Our new website has significantly improved our online conversions."
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- CTA Section -->
387
+ <section class="py-20 bg-white">
388
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
389
+ <div class="bg-indigo-600 rounded-2xl px-8 py-12 md:p-16 text-center">
390
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
391
+ Ready to Transform Your Digital Presence?
392
+ </h2>
393
+ <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
394
+ Let's discuss how we can create a website that drives results for your business.
395
+ </p>
396
+ <a href="#contact" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full text-indigo-600 bg-white hover:bg-gray-100 transition duration-300">
397
+ Get Started Today
398
+ </a>
399
+ </div>
400
+ </div>
401
+ </section>
402
+
403
+ <!-- Contact Section -->
404
+ <section id="contact" class="py-20 bg-gray-50">
405
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
406
+ <div class="grid md:grid-cols-2 gap-12 items-center">
407
+ <div>
408
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">
409
+ Get In Touch
410
+ </h2>
411
+ <p class="text-lg text-gray-600 mb-8">
412
+ Have a project in mind or questions about our services? Reach out to us and we'll get back to you within 24 hours.
413
+ </p>
414
+
415
+ <div class="space-y-6">
416
+ <div class="flex items-start">
417
+ <div class="flex-shrink-0">
418
+ <i data-feather="phone" class="text-indigo-600 w-6 h-6"></i>
419
+ </div>
420
+ <div class="ml-3">
421
+ <p class="text-base text-gray-600">+92 3149858699</p>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="flex items-start">
426
+ <div class="flex-shrink-0">
427
+ <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i>
428
+ </div>
429
+ <div class="ml-3">
430
+ <p class="text-base text-gray-600">info@fidajadoon.com</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="flex items-start">
435
+ <div class="flex-shrink-0">
436
+ <i data-feather="map-pin" class="text-indigo-600 w-6 h-6"></i>
437
+ </div>
438
+ <div class="ml-3">
439
+ <p class="text-base text-gray-600">Islamabad, Pakistan</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="bg-white p-8 rounded-xl shadow-lg">
446
+ <form>
447
+ <div class="mb-6">
448
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Your Name</label>
449
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
450
+ </div>
451
+
452
+ <div class="mb-6">
453
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
454
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
455
+ </div>
456
+
457
+ <div class="mb-6">
458
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Your Message</label>
459
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
460
+ </div>
461
+
462
+ <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300">
463
+ Send Message
464
+ </button>
465
+ </form>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </section>
470
+
471
+ <!-- Footer -->
472
+ <footer class="bg-gray-800 text-white py-12">
473
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
474
+ <div class="grid md:grid-cols-4 gap-8">
475
+ <div class="md:col-span-2">
476
+ <a href="#" class="flex items-center mb-6">
477
+ <img src="https://fidajadoon.com/wp-content/uploads/2024/04/Fida-Jadoon-logo-1024x196.png" alt="Logo" class="h-12">
478
+ </a>
479
+ <p class="text-gray-400 mb-6">
480
+ We offer end-to-end digital marketing solutions from custom websites to SEO, paid ads, social media, branding, and email campaigns.
481
+ </p>
482
+ <div class="flex space-x-4">
483
+ <a href="#" class="text-gray-400 hover:text-white">
484
+ <i data-feather="facebook" class="w-5 h-5"></i>
485
+ </a>
486
+ <a href="#" class="text-gray-400 hover:text-white">
487
+ <i data-feather="twitter" class="w-5 h-5"></i>
488
+ </a>
489
+ <a href="#" class="text-gray-400 hover:text-white">
490
+ <i data-feather="linkedin" class="w-5 h-5"></i>
491
+ </a>
492
+ <a href="#" class="text-gray-400 hover:text-white">
493
+ <i data-feather="instagram" class="w-5 h-5"></i>
494
+ </a>
495
+ </div>
496
+ </div>
497
+
498
+ <div>
499
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
500
+ <ul class="space-y-2">
501
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
502
+ <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
503
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white">Portfolio</a></li>
504
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
505
+ </ul>
506
+ </div>
507
+
508
+ <div>
509
+ <h3 class="text-lg font-semibold mb-4">Services</h3>
510
+ <ul class="space-y-2">
511
+ <li><a href="#" class="text-gray-400 hover:text-white">Web Design</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white">Development</a></li>
513
+ <li><a href="#" class="text-gray-400 hover:text-white">SEO</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-white">Digital Marketing</a></li>
515
+ </ul>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
520
+ <p class="text-gray-400 text-sm">
521
+ © 2025 PixelPerfect WebCraft. All rights reserved.
522
+ </p>
523
+ <div class="flex space-x-6 mt-4 md:mt-0">
524
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
525
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </footer>
530
+
531
+ <script>
532
+ feather.replace();
533
+
534
+ // Smooth scrolling for anchor links
535
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
536
+ anchor.addEventListener('click', function (e) {
537
+ e.preventDefault();
538
+
539
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
540
+ behavior: 'smooth'
541
+ });
542
+ });
543
+ });
544
+ </script>
545
+ </body>
546
  </html>