Hugging Face's logo

Spaces:
waqashayder
/
oomify_website
Running

App Files Community
waqashayder commited on
Commit
fcadf40
·
verified ·
1 Parent(s): d7860a2

kinldy is website k baqi tumam pages bhe complete kren means puri website functionall honi chaey

Browse files
Files changed (6) hide show
  1. README.md +9 -5
  2. about.html +329 -0
  3. contact.html +392 -0
  4. index.html +388 -18
  5. projects.html +367 -0
  6. services.html +334 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: indigo
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: undefined
3
+ colorFrom: pink
4
+ colorTo: yellow
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).
14
+
about.html ADDED
@@ -0,0 +1,329 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>About Us | CodeCraft Universe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .gradient-text {
15
+ background: linear-gradient(90deg, #6366F1, #8B5CF6);
16
+ -webkit-background-clip: text;
17
+ background-clip: text;
18
+ color: transparent;
19
+ }
20
+ .team-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16 items-center">
31
+ <div class="flex items-center">
32
+ <a href="index.html" class="flex-shrink-0 flex items-center">
33
+ <span class="text-2xl font-bold gradient-text">CodeCraft</span>
34
+ </a>
35
+ </div>
36
+ <div class="hidden md:block">
37
+ <div class="ml-10 flex items-baseline space-x-4">
38
+ <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Home</a>
39
+ <a href="services.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
40
+ <a href="projects.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Projects</a>
41
+ <a href="about.html" class="text-gray-900 px-3 py-2 text-sm font-medium">About</a>
42
+ <a href="contact.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
43
+ </div>
44
+ </div>
45
+ <div class="md:hidden">
46
+ <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- About Header -->
55
+ <div class="pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">
56
+ <div class="max-w-7xl mx-auto">
57
+ <div class="text-center">
58
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
59
+ <span class="block">Our Story of</span>
60
+ <span class="block gradient-text">Digital Innovation</span>
61
+ </h1>
62
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
63
+ Pioneering software solutions since 2015, transforming businesses through technology.
64
+ </p>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- About Content -->
70
+ <div class="py-12 bg-white">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16">
73
+ <div class="mb-12 lg:mb-0">
74
+ <h2 class="text-3xl font-bold text-gray-900">Who We Are</h2>
75
+ <p class="mt-4 text-lg text-gray-600">
76
+ CodeCraft Universe is a leading software development company dedicated to creating innovative digital solutions that drive business growth. Founded by a team of passionate technologists, we've grown into a diverse team of over 50 experts across 3 continents.
77
+ </p>
78
+ <p class="mt-4 text-lg text-gray-600">
79
+ Our mission is to bridge the gap between complex technology and business needs through elegant, scalable solutions. We believe in the power of software to transform industries and improve lives.
80
+ </p>
81
+ <div class="mt-8">
82
+ <a href="contact.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
83
+ Join Our Team
84
+ </a>
85
+ </div>
86
+ </div>
87
+ <div>
88
+ <img src="http://static.photos/office/1024x576/1" alt="Our Office" class="rounded-lg shadow-lg">
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Values Section -->
95
+ <div class="py-12 bg-gray-50">
96
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
97
+ <div class="text-center">
98
+ <h2 class="text-3xl font-bold text-gray-900">Our Core Values</h2>
99
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
100
+ The principles that guide everything we do
101
+ </p>
102
+ </div>
103
+ <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
104
+ <!-- Value 1 -->
105
+ <div class="bg-white p-6 rounded-lg shadow-sm">
106
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
107
+ <i data-feather="heart"></i>
108
+ </div>
109
+ <h3 class="mt-6 text-xl font-semibold text-gray-900">Passion for Excellence</h3>
110
+ <p class="mt-2 text-gray-600">
111
+ We're obsessed with quality and continuously push boundaries to deliver exceptional results that exceed expectations.
112
+ </p>
113
+ </div>
114
+
115
+ <!-- Value 2 -->
116
+ <div class="bg-white p-6 rounded-lg shadow-sm">
117
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
118
+ <i data-feather="users"></i>
119
+ </div>
120
+ <h3 class="mt-6 text-xl font-semibold text-gray-900">Client-Centric Approach</h3>
121
+ <p class="mt-2 text-gray-600">
122
+ Your success is our success. We listen deeply, understand thoroughly, and build solutions tailored to your unique needs.
123
+ </p>
124
+ </div>
125
+
126
+ <!-- Value 3 -->
127
+ <div class="bg-white p-6 rounded-lg shadow-sm">
128
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
129
+ <i data-feather="zap"></i>
130
+ </div>
131
+ <h3 class="mt-6 text-xl font-semibold text-gray-900">Innovation Driven</h3>
132
+ <p class="mt-2 text-gray-600">
133
+ We embrace emerging technologies and creative problem-solving to deliver cutting-edge solutions that give you a competitive edge.
134
+ </p>
135
+ </div>
136
+
137
+ <!-- Value 4 -->
138
+ <div class="bg-white p-6 rounded-lg shadow-sm">
139
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
140
+ <i data-feather="lock"></i>
141
+ </div>
142
+ <h3 class="mt-6 text-xl font-semibold text-gray-900">Integrity First</h3>
143
+ <p class="mt-2 text-gray-600">
144
+ Honesty and transparency form the foundation of all our relationships, with clients and team members alike.
145
+ </p>
146
+ </div>
147
+
148
+ <!-- Value 5 -->
149
+ <div class="bg-white p-6 rounded-lg shadow-sm">
150
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
151
+ <i data-feather="globe"></i>
152
+ </div>
153
+ <h3 class="mt-6 text-xl font-semibold text-gray-900">Global Perspective</h3>
154
+ <p class="mt-2 text-gray-600">
155
+ With team members across continents, we bring diverse perspectives and global best practices to every project.
156
+ </p>
157
+ </div>
158
+
159
+ <!-- Value 6 -->
160
+ <div class="bg-white p-6 rounded-lg shadow-sm">
161
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
162
+ <i data-feather="trending-up"></i>
163
+ </div>
164
+ <h3 class="mt-6 text-xl font-semibold text-gray-900">Sustainable Growth</h3>
165
+ <p class="mt-2 text-gray-600">
166
+ We build solutions designed to scale with your business, ensuring long-term value and adaptability.
167
+ </p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Team Section -->
174
+ <div class="py-12 bg-white">
175
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
176
+ <div class="text-center">
177
+ <h2 class="text-3xl font-bold text-gray-900">Meet Our Leadership</h2>
178
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
179
+ The visionary minds driving our success
180
+ </p>
181
+ </div>
182
+ <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
183
+ <!-- Team Member 1 -->
184
+ <div class="team-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 text-center">
185
+ <img class="mx-auto h-32 w-32 rounded-full" src="http://static.photos/people/200x200/7" alt="">
186
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Alex Rivera</h3>
187
+ <p class="text-indigo-600">Founder & CEO</p>
188
+ <p class="mt-2 text-gray-600">
189
+ 15+ years in software engineering and digital transformation. Passionate about building teams that create impact.
190
+ </p>
191
+ <div class="mt-4 flex justify-center space-x-4">
192
+ <a href="#" class="text-gray-400 hover:text-gray-500">
193
+ <i data-feather="linkedin" class="w-5 h-5"></i>
194
+ </a>
195
+ <a href="#" class="text-gray-400 hover:text-gray-500">
196
+ <i data-feather="twitter" class="w-5 h-5"></i>
197
+ </a>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Team Member 2 -->
202
+ <div class="team-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 text-center">
203
+ <img class="mx-auto h-32 w-32 rounded-full" src="http://static.photos/people/200x200/8" alt="">
204
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Priya Patel</h3>
205
+ <p class="text-indigo-600">Chief Technology Officer</p>
206
+ <p class="mt-2 text-gray-600">
207
+ Cloud architecture expert with a knack for solving complex technical challenges with elegant solutions.
208
+ </p>
209
+ <div class="mt-4 flex justify-center space-x-4">
210
+ <a href="#" class="text-gray-400 hover:text-gray-500">
211
+ <i data-feather="linkedin" class="w-5 h-5"></i>
212
+ </a>
213
+ <a href="#" class="text-gray-400 hover:text-gray-500">
214
+ <i data-feather="twitter" class="w-5 h-5"></i>
215
+ </a>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Team Member 3 -->
220
+ <div class="team-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 text-center">
221
+ <img class="mx-auto h-32 w-32 rounded-full" src="http://static.photos/people/200x200/9" alt="">
222
+ <h3 class="mt-6 text-lg font-medium text-gray-900">James Wilson</h3>
223
+ <p class="text-indigo-600">Chief Operations Officer</p>
224
+ <p class="mt-2 text-gray-600">
225
+ Process optimization specialist who ensures our projects run smoothly and deliver maximum value.
226
+ </p>
227
+ <div class="mt-4 flex justify-center space-x-4">
228
+ <a href="#" class="text-gray-400 hover:text-gray-500">
229
+ <i data-feather="linkedin" class="w-5 h-5"></i>
230
+ </a>
231
+ <a href="#" class="text-gray-400 hover:text-gray-500">
232
+ <i data-feather="twitter" class="w-5 h-5"></i>
233
+ </a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Stats Section -->
241
+ <div class="bg-indigo-700">
242
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
243
+ <div class="max-w-4xl mx-auto text-center">
244
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
245
+ Our Growth Journey
246
+ </h2>
247
+ </div>
248
+ <div class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
249
+ <div class="flex flex-col">
250
+ <div class="text-5xl font-extrabold text-white">2015</div>
251
+ <div class="mt-2 text-base font-medium text-indigo-200">Founded</div>
252
+ </div>
253
+ <div class="flex flex-col mt-10 sm:mt-0">
254
+ <div class="text-5xl font-extrabold text-white">50+</div>
255
+ <div class="mt-2 text-base font-medium text-indigo-200">Team Members</div>
256
+ </div>
257
+ <div class="flex flex-col mt-10 sm:mt=0">
258
+ <div class="text-5xl font-extrabold text-white">150+</div>
259
+ <div class="mt-2 text-base font-medium text-indigo-200">Projects Completed</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Footer -->
266
+ <footer class="bg-gray-800">
267
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
268
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
269
+ <div>
270
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
271
+ <ul class="mt-4 space-y-4">
272
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Web Development</a></li>
273
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Mobile Apps</a></li>
274
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Cloud Services</a></li>
275
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Data Analytics</a></li>
276
+ </ul>
277
+ </div>
278
+ <div>
279
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
280
+ <ul class="mt-4 space-y-4">
281
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
282
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
283
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
284
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
285
+ </ul>
286
+ </div>
287
+ <div>
288
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
289
+ <ul class="mt-4 space-y-4">
290
+ <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact</a></li>
291
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
292
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
293
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Reference</a></li>
294
+ </ul>
295
+ </div>
296
+ <div>
297
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
298
+ <ul class="mt-4 space-y-4">
299
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
300
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
301
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
302
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
303
+ </ul>
304
+ </div>
305
+ </div>
306
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
307
+ <div class="flex space-x-6 md:order-2">
308
+ <a href="#" class="text-gray-400 hover:text-white">
309
+ <i data-feather="twitter" class="h-6 w-6"></i>
310
+ </a>
311
+ <a href="#" class="text-gray-400 hover:text-white">
312
+ <i data-feather="linkedin" class="h-6 w-6"></i>
313
+ </a>
314
+ <a href="#" class="text-gray-400 hover:text-white">
315
+ <i data-feather="github" class="h-6 w-6"></i>
316
+ </a>
317
+ </div>
318
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
319
+ &copy; 2023 CodeCraft Universe. All rights reserved.
320
+ </p>
321
+ </div>
322
+ </div>
323
+ </footer>
324
+
325
+ <script>
326
+ feather.replace();
327
+ </script>
328
+ </body>
329
+ </html>
contact.html ADDED
@@ -0,0 +1,392 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Contact Us | CodeCraft Universe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .gradient-text {
15
+ background: linear-gradient(90deg, #6366F1, #8B5CF6);
16
+ -webkit-background-clip: text;
17
+ background-clip: text;
18
+ color: transparent;
19
+ }
20
+ .contact-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ #map {
25
+ height: 100%;
26
+ min-height: 300px;
27
+ border-radius: 0.5rem;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50">
32
+ <!-- Navigation -->
33
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16 items-center">
36
+ <div class="flex items-center">
37
+ <a href="index.html" class="flex-shrink-0 flex items-center">
38
+ <span class="text-2xl font-bold gradient-text">CodeCraft</span>
39
+ </a>
40
+ </div>
41
+ <div class="hidden md:block">
42
+ <div class="ml-10 flex items-baseline space-x-4">
43
+ <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Home</a>
44
+ <a href="services.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
45
+ <a href="projects.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Projects</a>
46
+ <a href="about.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a>
47
+ <a href="contact.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
48
+ </div>
49
+ </div>
50
+ <div class="md:hidden">
51
+ <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
52
+ <i data-feather="menu"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+
59
+ <!-- Contact Header -->
60
+ <div class="pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">
61
+ <div class="max-w-7xl mx-auto">
62
+ <div class="text-center">
63
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
64
+ <span class="block">Let's Build</span>
65
+ <span class="block gradient-text">Something Amazing</span>
66
+ </h1>
67
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
68
+ Ready to start your project? Get in touch with our team today.
69
+ </p>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Contact Content -->
75
+ <div class="py-12 bg-white">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16">
78
+ <div class="mb-12 lg:mb-0">
79
+ <h2 class="text-3xl font-bold text-gray-900">Contact Information</h2>
80
+ <p class="mt-4 text-lg text-gray-600">
81
+ We'd love to hear from you! Whether you have a project in mind or just want to learn more about our services, our team is ready to help.
82
+ </p>
83
+
84
+ <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
85
+ <!-- Contact Card 1 -->
86
+ <div class="contact-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6">
87
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
88
+ <i data-feather="mail"></i>
89
+ </div>
90
+ <h3 class="mt-5 text-lg font-medium text-gray-900">Email Us</h3>
91
+ <p class="mt-2 text-base text-gray-600">
92
+ <a href="mailto:hello@codecraft.com" class="text-indigo-600 hover:text-indigo-800">hello@codecraft.com</a>
93
+ </p>
94
+ </div>
95
+
96
+ <!-- Contact Card 2 -->
97
+ <div class="contact-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6">
98
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
99
+ <i data-feather="phone"></i>
100
+ </div>
101
+ <h3 class="mt-5 text-lg font-medium text-gray-900">Call Us</h3>
102
+ <p class="mt-2 text-base text-gray-600">
103
+ <a href="tel:+18005551234" class="text-indigo-600 hover:text-indigo-800">+1 (800) 555-1234</a>
104
+ </p>
105
+ </div>
106
+
107
+ <!-- Contact Card 3 -->
108
+ <div class="contact-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6">
109
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
110
+ <i data-feather="map-pin"></i>
111
+ </div>
112
+ <h3 class="mt-5 text-lg font-medium text-gray-900">Visit Us</h3>
113
+ <p class="mt-2 text-base text-gray-600">
114
+ 123 Tech Street<br>
115
+ San Francisco, CA 94107
116
+ </p>
117
+ </div>
118
+
119
+ <!-- Contact Card 4 -->
120
+ <div class="contact-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6">
121
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
122
+ <i data-feather="clock"></i>
123
+ </div>
124
+ <h3 class="mt-5 text-lg font-medium text-gray-900">Business Hours</h3>
125
+ <p class="mt-2 text-base text-gray-600">
126
+ Monday - Friday<br>
127
+ 9:00 AM - 6:00 PM PST
128
+ </p>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="mt-8">
133
+ <h3 class="text-lg font-medium text-gray-900">Connect With Us</h3>
134
+ <div class="mt-4 flex space-x-6">
135
+ <a href="#" class="text-gray-400 hover:text-gray-500">
136
+ <i data-feather="twitter" class="w-6 h-6"></i>
137
+ </a>
138
+ <a href="#" class="text-gray-400 hover:text-gray-500">
139
+ <i data-feather="linkedin" class="w-6 h-6"></i>
140
+ </a>
141
+ <a href="#" class="text-gray-400 hover:text-gray-500">
142
+ <i data-feather="github" class="w-6 h-6"></i>
143
+ </a>
144
+ <a href="#" class="text-gray-400 hover:text-gray-500">
145
+ <i data-feather="facebook" class="w-6 h-6"></i>
146
+ </a>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Contact Form -->
152
+ <div>
153
+ <h2 class="text-3xl font-bold text-gray-900">Send Us a Message</h2>
154
+ <form class="mt-8 space-y-6">
155
+ <div>
156
+ <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
157
+ <div class="mt-1">
158
+ <input id="name" name="name" type="text" required class="py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
159
+ </div>
160
+ </div>
161
+
162
+ <div>
163
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
164
+ <div class="mt-1">
165
+ <input id="email" name="email" type="email" autocomplete="email" required class="py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
166
+ </div>
167
+ </div>
168
+
169
+ <div>
170
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
171
+ <div class="mt-1">
172
+ <input id="phone" name="phone" type="tel" class="py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
173
+ </div>
174
+ </div>
175
+
176
+ <div>
177
+ <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
178
+ <div class="mt-1">
179
+ <select id="subject" name="subject" class="py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
180
+ <option>General Inquiry</option>
181
+ <option>Project Discussion</option>
182
+ <option>Careers</option>
183
+ <option>Partnership</option>
184
+ </select>
185
+ </div>
186
+ </div>
187
+
188
+ <div>
189
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
190
+ <div class="mt-1">
191
+ <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"></textarea>
192
+ </div>
193
+ </div>
194
+
195
+ <div>
196
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
197
+ Send Message
198
+ </button>
199
+ </div>
200
+ </form>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Map Section -->
207
+ <div class="py-12 bg-gray-50">
208
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
+ <div id="map" class="shadow-lg"></div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- CTA Section -->
214
+ <div class="bg-indigo-700">
215
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
216
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
217
+ <span class="block">Ready to start your project?</span>
218
+ <span class="block">Let's build something amazing.</span>
219
+ </h2>
220
+ <p class="mt-4 text-lg leading-6 text-indigo-200">
221
+ Get in touch with our team to discuss how we can help you achieve your digital goals.
222
+ </p>
223
+ <a href="contact.html" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
224
+ Contact Us
225
+ </a>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Footer -->
230
+ <footer class="bg-gray-800">
231
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
232
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
233
+ <div>
234
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
235
+ <ul class="mt-4 space-y-4">
236
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Web Development</a></li>
237
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Mobile Apps</a></li>
238
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Cloud Services</a></li>
239
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Data Analytics</a></li>
240
+ </ul>
241
+ </div>
242
+ <div>
243
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
244
+ <ul class="mt-4 space-y-4">
245
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
246
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
247
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
248
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
249
+ </ul>
250
+ </div>
251
+ <div>
252
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
253
+ <ul class="mt-4 space-y-4">
254
+ <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact</a></li>
255
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
256
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
257
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Reference</a></li>
258
+ </ul>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
262
+ <ul class="mt-4 space-y-4">
263
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
264
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
265
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
266
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
267
+ </ul>
268
+ </div>
269
+ </div>
270
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
271
+ <div class="flex space-x-6 md:order-2">
272
+ <a href="#" class="text-gray-400 hover:text-white">
273
+ <i data-feather="twitter" class="h-6 w-6"></i>
274
+ </a>
275
+ <a href="#" class="text-gray-400 hover:text-white">
276
+ <i data-feather="linkedin" class="h-6 w-6"></i>
277
+ </a>
278
+ <a href="#" class="text-gray-400 hover:text-white">
279
+ <i data-feather="github" class="h-6 w-6"></i>
280
+ </a>
281
+ </div>
282
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
283
+ &copy; 2023 CodeCraft Universe. All rights reserved.
284
+ </p>
285
+ </div>
286
+ </div>
287
+ </footer>
288
+
289
+ <script>
290
+ // Initialize Google Map
291
+ function initMap() {
292
+ // Coordinates for our office location
293
+ const office = { lat: 37.7749, lng: -122.4194 };
294
+ // The map, centered at our office
295
+ const map = new google.maps.Map(document.getElementById("map"), {
296
+ zoom: 14,
297
+ center: office,
298
+ styles: [
299
+ {
300
+ "featureType": "administrative",
301
+ "elementType": "labels.text.fill",
302
+ "stylers": [
303
+ {
304
+ "color": "#444444"
305
+ }
306
+ ]
307
+ },
308
+ {
309
+ "featureType": "landscape",
310
+ "elementType": "all",
311
+ "stylers": [
312
+ {
313
+ "color": "#f2f2f2"
314
+ }
315
+ ]
316
+ },
317
+ {
318
+ "featureType": "poi",
319
+ "elementType": "all",
320
+ "stylers": [
321
+ {
322
+ "visibility": "off"
323
+ }
324
+ ]
325
+ },
326
+ {
327
+ "featureType": "road",
328
+ "elementType": "all",
329
+ "stylers": [
330
+ {
331
+ "saturation": -100
332
+ },
333
+ {
334
+ "lightness": 45
335
+ }
336
+ ]
337
+ },
338
+ {
339
+ "featureType": "road.highway",
340
+ "elementType": "all",
341
+ "stylers": [
342
+ {
343
+ "visibility": "simplified"
344
+ }
345
+ ]
346
+ },
347
+ {
348
+ "featureType": "road.arterial",
349
+ "elementType": "labels.icon",
350
+ "stylers": [
351
+ {
352
+ "visibility": "off"
353
+ }
354
+ ]
355
+ },
356
+ {
357
+ "featureType": "transit",
358
+ "elementType": "all",
359
+ "stylers": [
360
+ {
361
+ "visibility": "off"
362
+ }
363
+ ]
364
+ },
365
+ {
366
+ "featureType": "water",
367
+ "elementType": "all",
368
+ "stylers": [
369
+ {
370
+ "color": "#6366f1"
371
+ },
372
+ {
373
+ "visibility": "on"
374
+ }
375
+ ]
376
+ }
377
+ ]
378
+ });
379
+ // The marker, positioned at our office
380
+ new google.maps.Marker({
381
+ position: office,
382
+ map: map,
383
+ title: "CodeCraft Universe Office"
384
+ });
385
+ }
386
+ </script>
387
+ <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" async></script>
388
+ <script>
389
+ feather.replace();
390
+ </script>
391
+ </body>
392
+ </html>
index.html CHANGED
@@ -1,19 +1,389 @@
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>OOMIFY | Software Solutions</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
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+ #vanta-bg {
17
+ position: absolute;
18
+ top: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ z-index: -1;
23
+ }
24
+ .gradient-text {
25
+ background: linear-gradient(90deg, #6366F1, #8B5CF6);
26
+ -webkit-background-clip: text;
27
+ background-clip: text;
28
+ color: transparent;
29
+ }
30
+ .service-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 overflow-x-hidden">
37
+ <div id="vanta-bg"></div>
38
+
39
+ <!-- Navigation -->
40
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
41
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42
+ <div class="flex justify-between h-16 items-center">
43
+ <div class="flex items-center">
44
+ <div class="flex-shrink-0 flex items-center">
45
+ <span class="text-2xl font-bold gradient-text">OOMIFY</span>
46
+ </div>
47
+ </div>
48
+ <div class="hidden md:block">
49
+ <div class="ml-10 flex items-baseline space-x-4">
50
+ <a href="#" class="text-gray-900 px-3 py-2 text-sm font-medium">Home</a>
51
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
52
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Projects</a>
53
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a>
54
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
55
+ </div>
56
+ </div>
57
+ <div class="md:hidden">
58
+ <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
59
+ <i data-feather="menu"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </nav>
65
+
66
+ <!-- Hero Section -->
67
+ <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">
68
+ <div class="relative max-w-7xl mx-auto">
69
+ <div class="text-center">
70
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
71
+ <span class="block">We build digital</span>
72
+ <span class="block gradient-text">experiences that matter</span>
73
+ </h1>
74
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
75
+ OOMIFY transforms your ideas into powerful software solutions that drive business growth.
76
+ </p>
77
+ <div class="mt-10 sm:flex sm:justify-center">
78
+ <div class="rounded-md shadow">
79
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
80
+ Get Started
81
+ </a>
82
+ </div>
83
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
84
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
85
+ Learn More
86
+ </a>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Services Section -->
94
+ <div class="py-12 bg-white">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="lg:text-center">
97
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Services</h2>
98
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
99
+ What we can do for you
100
+ </p>
101
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
102
+ Comprehensive software solutions tailored to your business needs.
103
+ </p>
104
+ </div>
105
+
106
+ <div class="mt-10">
107
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
108
+ <!-- Service 1 -->
109
+ <div class="service-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 hover:border-indigo-500 border border-transparent">
110
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
111
+ <i data-feather="code"></i>
112
+ </div>
113
+ <div class="mt-5">
114
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Custom Software</h3>
115
+ <p class="mt-2 text-base text-gray-500">
116
+ Tailored software solutions designed specifically for your business requirements.
117
+ </p>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Service 2 -->
122
+ <div class="service-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 hover:border-indigo-500 border border-transparent">
123
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
124
+ <i data-feather="smartphone"></i>
125
+ </div>
126
+ <div class="mt-5">
127
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Mobile Apps</h3>
128
+ <p class="mt-2 text-base text-gray-500">
129
+ Cross-platform mobile applications that engage your customers effectively.
130
+ </p>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Service 3 -->
135
+ <div class="service-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 hover:border-indigo-500 border border-transparent">
136
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
137
+ <i data-feather="globe"></i>
138
+ </div>
139
+ <div class="mt-5">
140
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Web Development</h3>
141
+ <p class="mt-2 text-base text-gray-500">
142
+ High-performance web applications with modern technologies and frameworks.
143
+ </p>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Service 4 -->
148
+ <div class="service-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 hover:border-indigo-500 border border-transparent">
149
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
150
+ <i data-feather="cloud"></i>
151
+ </div>
152
+ <div class="mt-5">
153
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Cloud Solutions</h3>
154
+ <p class="mt-2 text-base text-gray-500">
155
+ Scalable cloud infrastructure and services to power your digital transformation.
156
+ </p>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Service 5 -->
161
+ <div class="service-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 hover:border-indigo-500 border border-transparent">
162
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
163
+ <i data-feather="database"></i>
164
+ </div>
165
+ <div class="mt-5">
166
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Data Analytics</h3>
167
+ <p class="mt-2 text-base text-gray-500">
168
+ Powerful data processing and visualization to uncover valuable business insights.
169
+ </p>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Service 6 -->
174
+ <div class="service-card transition-all duration-300 ease-in-out bg-gray-50 rounded-lg shadow-sm p-6 hover:border-indigo-500 border border-transparent">
175
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
176
+ <i data-feather="shield"></i>
177
+ </div>
178
+ <div class="mt-5">
179
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Cyber Security</h3>
180
+ <p class="mt-2 text-base text-gray-500">
181
+ Comprehensive security solutions to protect your digital assets and data.
182
+ </p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Stats Section -->
191
+ <div class="bg-indigo-700">
192
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
193
+ <div class="max-w-4xl mx-auto text-center">
194
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
195
+ Trusted by businesses worldwide
196
+ </h2>
197
+ <p class="mt-3 text-xl text-indigo-200 sm:mt-4">
198
+ Our solutions power businesses across various industries, helping them achieve digital excellence.
199
+ </p>
200
+ </div>
201
+ <div class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
202
+ <div class="flex flex-col">
203
+ <div class="text-5xl font-extrabold text-white">50+</div>
204
+ <div class="mt-2 text-base font-medium text-indigo-200">Clients Worldwide</div>
205
+ </div>
206
+ <div class="flex flex-col mt-10 sm:mt-0">
207
+ <div class="text-5xl font-extrabold text-white">100%</div>
208
+ <div class="mt-2 text-base font-medium text-indigo-200">Client Satisfaction</div>
209
+ </div>
210
+ <div class="flex flex-col mt-10 sm:mt-0">
211
+ <div class="text-5xl font-extrabold text-white">24/7</div>
212
+ <div class="mt-2 text-base font-medium text-indigo-200">Support Availability</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Testimonials -->
219
+ <div class="bg-gray-50 py-16 lg:py-24">
220
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
221
+ <div class="lg:text-center">
222
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2>
223
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
224
+ What our clients say
225
+ </p>
226
+ </div>
227
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
228
+ <!-- Testimonial 1 -->
229
+ <div class="bg-white p-6 rounded-lg shadow-sm">
230
+ <div class="flex items-center">
231
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="">
232
+ <div class="ml-4">
233
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
234
+ <p class="text-indigo-600">CEO, TechCorp</p>
235
+ </div>
236
+ </div>
237
+ <div class="mt-4 text-gray-600">
238
+ <p>"OOMIFY transformed our outdated systems into a modern, efficient platform that has increased our productivity by 40%."</p>
239
+ </div>
240
+ <div class="mt-4 flex text-yellow-400">
241
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
242
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
243
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
244
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
245
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Testimonial 2 -->
250
+ <div class="bg-white p-6 rounded-lg shadow-sm">
251
+ <div class="flex items-center">
252
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="">
253
+ <div class="ml-4">
254
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
255
+ <p class="text-indigo-600">CTO, Fintech Solutions</p>
256
+ </div>
257
+ </div>
258
+ <div class="mt-4 text-gray-600">
259
+ <p>"The mobile app OOMIFY developed for us has seen 300% more engagement than our previous solution. Incredible work!"</p>
260
+ </div>
261
+ <div class="mt-4 flex text-yellow-400">
262
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
263
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
264
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
265
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
266
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Testimonial 3 -->
271
+ <div class="bg-white p-6 rounded-lg shadow-sm">
272
+ <div class="flex items-center">
273
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="">
274
+ <div class="ml-4">
275
+ <h4 class="text-lg font-medium text-gray-900">David Rodriguez</h4>
276
+ <p class="text-indigo-600">Director, Retail Group</p>
277
+ </div>
278
+ </div>
279
+ <div class="mt-4 text-gray-600">
280
+ <p>"Their cloud migration services saved us thousands in operational costs while improving performance across all metrics."</p>
281
+ </div>
282
+ <div class="mt-4 flex text-yellow-400">
283
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
284
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
285
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
286
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
287
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- CTA Section -->
295
+ <div class="bg-indigo-700">
296
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
297
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
298
+ <span class="block">Ready to transform your business?</span>
299
+ <span class="block">Let's build something amazing.</span>
300
+ </h2>
301
+ <p class="mt-4 text-lg leading-6 text-indigo-200">
302
+ Get in touch with our team to discuss how we can help you achieve your digital goals.
303
+ </p>
304
+ <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
305
+ Contact Us
306
+ </a>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Footer -->
311
+ <footer class="bg-gray-800">
312
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
313
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
314
+ <div>
315
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
316
+ <ul class="mt-4 space-y-4">
317
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Web Development</a></li>
318
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Mobile Apps</a></li>
319
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cloud Services</a></li>
320
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Data Analytics</a></li>
321
+ </ul>
322
+ </div>
323
+ <div>
324
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
325
+ <ul class="mt-4 space-y-4">
326
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
327
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
328
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
329
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
330
+ </ul>
331
+ </div>
332
+ <div>
333
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
334
+ <ul class="mt-4 space-y-4">
335
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
336
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
337
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
338
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Reference</a></li>
339
+ </ul>
340
+ </div>
341
+ <div>
342
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
343
+ <ul class="mt-4 space-y-4">
344
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
345
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
346
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
347
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
348
+ </ul>
349
+ </div>
350
+ </div>
351
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
352
+ <div class="flex space-x-6 md:order-2">
353
+ <a href="#" class="text-gray-400 hover:text-white">
354
+ <i data-feather="twitter" class="h-6 w-6"></i>
355
+ </a>
356
+ <a href="#" class="text-gray-400 hover:text-white">
357
+ <i data-feather="linkedin" class="h-6 w-6"></i>
358
+ </a>
359
+ <a href="#" class="text-gray-400 hover:text-white">
360
+ <i data-feather="github" class="h-6 w-6"></i>
361
+ </a>
362
+ </div>
363
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
364
+ &copy; 2023 OOMIFY Technologies. All rights reserved.
365
+ </p>
366
+ </div>
367
+ </div>
368
+ </footer>
369
+
370
+ <script>
371
+ VANTA.GLOBE({
372
+ el: "#vanta-bg",
373
+ mouseControls: true,
374
+ touchControls: true,
375
+ gyroControls: false,
376
+ minHeight: 200.00,
377
+ minWidth: 200.00,
378
+ scale: 1.00,
379
+ scaleMobile: 1.00,
380
+ color: 0x6366f1,
381
+ backgroundColor: 0xf8fafc,
382
+ size: 0.8
383
+ });
384
+ </script>
385
+ <script>
386
+ feather.replace();
387
+ </script>
388
+ </body>
389
  </html>
projects.html ADDED
@@ -0,0 +1,367 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Our Projects | CodeCraft Universe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .gradient-text {
15
+ background: linear-gradient(90deg, #6366F1, #8B5CF6);
16
+ -webkit-background-clip: text;
17
+ background-clip: text;
18
+ color: transparent;
19
+ }
20
+ .project-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ .project-filter.active {
25
+ background-color: #6366F1;
26
+ color: white;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50">
31
+ <!-- Navigation -->
32
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
33
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
34
+ <div class="flex justify-between h-16 items-center">
35
+ <div class="flex items-center">
36
+ <a href="index.html" class="flex-shrink-0 flex items-center">
37
+ <span class="text-2xl font-bold gradient-text">CodeCraft</span>
38
+ </a>
39
+ </div>
40
+ <div class="hidden md:block">
41
+ <div class="ml-10 flex items-baseline space-x-4">
42
+ <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Home</a>
43
+ <a href="services.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
44
+ <a href="projects.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Projects</a>
45
+ <a href="about.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a>
46
+ <a href="contact.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
47
+ </div>
48
+ </div>
49
+ <div class="md:hidden">
50
+ <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Projects Header -->
59
+ <div class="pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">
60
+ <div class="max-w-7xl mx-auto">
61
+ <div class="text-center">
62
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
63
+ <span class="block">Explore Our</span>
64
+ <span class="block gradient-text">Portfolio</span>
65
+ </h1>
66
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
67
+ A showcase of our successful projects across various industries and technologies.
68
+ </p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Projects Filter -->
74
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="flex flex-wrap justify-center gap-2">
76
+ <button class="project-filter active px-4 py-2 rounded-full text-sm font-medium transition-all" data-filter="all">
77
+ All Projects
78
+ </button>
79
+ <button class="project-filter px-4 py-2 rounded-full bg-gray-100 text-gray-800 text-sm font-medium hover:bg-gray-200 transition-all" data-filter="web">
80
+ Web Development
81
+ </button>
82
+ <button class="project-filter px-4 py-2 rounded-full bg-gray-100 text-gray-800 text-sm font-medium hover:bg-gray-200 transition-all" data-filter="mobile">
83
+ Mobile Apps
84
+ </button>
85
+ <button class="project-filter px-4 py-2 rounded-full bg-gray-100 text-gray-800 text-sm font-medium hover:bg-gray-200 transition-all" data-filter="cloud">
86
+ Cloud Solutions
87
+ </button>
88
+ <button class="project-filter px-4 py-2 rounded-full bg-gray-100 text-gray-800 text-sm font-medium hover:bg-gray-200 transition-all" data-filter="ecommerce">
89
+ E-commerce
90
+ </button>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Projects Grid -->
95
+ <div class="py-12 bg-white">
96
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
97
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
98
+ <!-- Project 1 -->
99
+ <div class="project-card transition-all duration-300 ease-in-out" data-category="web">
100
+ <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
101
+ <img class="w-full h-full object-cover" src="http://static.photos/technology/640x360/11" alt="Financial Dashboard">
102
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
103
+ <div>
104
+ <h3 class="text-xl font-bold text-white">Financial Analytics Dashboard</h3>
105
+ <p class="mt-1 text-gray-300">Interactive data visualization for financial institutions</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4">
110
+ <div class="flex flex-wrap gap-2">
111
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">React</span>
112
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Node.js</span>
113
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">D3.js</span>
114
+ </div>
115
+ <a href="#" class="mt-3 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
116
+ View Case Study
117
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
118
+ </a>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Project 2 -->
123
+ <div class="project-card transition-all duration-300 ease-in-out" data-category="mobile">
124
+ <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
125
+ <img class="w-full h-full object-cover" src="http://static.photos/technology/640x360/12" alt="Health App">
126
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
127
+ <div>
128
+ <h3 class="text-xl font-bold text-white">HealthTrack Mobile App</h3>
129
+ <p class="mt-1 text-gray-300">Fitness and wellness tracking application</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ <div class="mt-4">
134
+ <div class="flex flex-wrap gap-2">
135
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">React Native</span>
136
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Firebase</span>
137
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">HealthKit</span>
138
+ </div>
139
+ <a href="#" class="mt-3 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
140
+ View Case Study
141
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
142
+ </a>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Project 3 -->
147
+ <div class="project-card transition-all duration-300 ease-in-out" data-category="cloud">
148
+ <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
149
+ <img class="w-full h-full object-cover" src="http://static.photos/technology/640x360/13" alt="Cloud Migration">
150
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
151
+ <div>
152
+ <h3 class="text-xl font-bold text-white">Enterprise Cloud Migration</h3>
153
+ <p class="mt-1 text-gray-300">Legacy system modernization for retail chain</p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ <div class="mt-4">
158
+ <div class="flex flex-wrap gap-2">
159
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">AWS</span>
160
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Docker</span>
161
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Kubernetes</span>
162
+ </div>
163
+ <a href="#" class="mt-3 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
164
+ View Case Study
165
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
166
+ </a>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Project 4 -->
171
+ <div class="project-card transition-all duration-300 ease-in-out" data-category="ecommerce">
172
+ <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
173
+ <img class="w-full h-full object-cover" src="http://static.photos/technology/640x360/14" alt="E-commerce Platform">
174
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
175
+ <div>
176
+ <h3 class="text-xl font-bold text-white">Global E-commerce Platform</h3>
177
+ <p class="mt-1 text-gray-300">Multi-vendor marketplace with 50k+ products</p>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ <div class="mt-4">
182
+ <div class="flex flex-wrap gap-2">
183
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Shopify</span>
184
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">React</span>
185
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Node.js</span>
186
+ </div>
187
+ <a href="#" class="mt-3 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
188
+ View Case Study
189
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
190
+ </a>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Project 5 -->
195
+ <div class="project-card transition-all duration-300 ease-in-out" data-category="web">
196
+ <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
197
+ <img class="w-full h-full object-cover" src="http://static.photos/technology/640x360/15" alt="CMS Platform">
198
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
199
+ <div>
200
+ <h3 class="text-xl font-bold text-white">Custom CMS Platform</h3>
201
+ <p class="mt-1 text-gray-300">Content management for media publisher</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="mt-4">
206
+ <div class="flex flex-wrap gap-2">
207
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">WordPress</span>
208
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">PHP</span>
209
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">MySQL</span>
210
+ </div>
211
+ <a href="#" class="mt-3 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
212
+ View Case Study
213
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
214
+ </a>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Project 6 -->
219
+ <div class="project-card transition-all duration-300 ease-in-out" data-category="mobile">
220
+ <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
221
+ <img class="w-full h-full object-cover" src="http://static.photos/technology/640x360/16" alt="Banking App">
222
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
223
+ <div>
224
+ <h3 class="text-xl font-bold text-white">Mobile Banking Application</h3>
225
+ <p class="mt-1 text-gray-300">Secure digital banking for regional bank</p>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <div class="mt-4">
230
+ <div class="flex flex-wrap gap-2">
231
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Flutter</span>
232
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Dart</span>
233
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Biometrics</span>
234
+ </div>
235
+ <a href="#" class="mt-3 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
236
+ View Case Study
237
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
238
+ </a>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="mt-12 text-center">
244
+ <a href="contact.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
245
+ Start Your Project
246
+ </a>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Client Logos -->
252
+ <div class="py-12 bg-gray-50">
253
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
254
+ <div class="lg:text-center">
255
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Trusted By</h2>
256
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
257
+ Industry leaders we've worked with
258
+ </p>
259
+ </div>
260
+ <div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5">
261
+ <div class="flex justify-center items-center col-span-1">
262
+ <img class="h-12" src="http://static.photos/logos/200x200/1" alt="Company 1">
263
+ </div>
264
+ <div class="flex justify-center items-center col-span-1">
265
+ <img class="h-12" src="http://static.photos/logos/200x200/2" alt="Company 2">
266
+ </div>
267
+ <div class="flex justify-center items-center col-span-1">
268
+ <img class="h-12" src="http://static.photos/logos/200x200/3" alt="Company 3">
269
+ </div>
270
+ <div class="flex justify-center items-center col-span-1">
271
+ <img class="h-12" src="http://static.photos/logos/200x200/4" alt="Company 4">
272
+ </div>
273
+ <div class="flex justify-center items-center col-span-1">
274
+ <img class="h-12" src="http://static.photos/logos/200x200/5" alt="Company 5">
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Footer -->
281
+ <footer class="bg-gray-800">
282
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
283
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
284
+ <div>
285
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
286
+ <ul class="mt-4 space-y-4">
287
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Web Development</a></li>
288
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Mobile Apps</a></li>
289
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Cloud Services</a></li>
290
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Data Analytics</a></li>
291
+ </ul>
292
+ </div>
293
+ <div>
294
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
295
+ <ul class="mt-4 space-y-4">
296
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
297
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
298
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
299
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
300
+ </ul>
301
+ </div>
302
+ <div>
303
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
304
+ <ul class="mt-4 space-y-4">
305
+ <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact</a></li>
306
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
307
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
308
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Reference</a></li>
309
+ </ul>
310
+ </div>
311
+ <div>
312
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
313
+ <ul class="mt-4 space-y-4">
314
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
315
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
316
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
317
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
318
+ </ul>
319
+ </div>
320
+ </div>
321
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
322
+ <div class="flex space-x-6 md:order-2">
323
+ <a href="#" class="text-gray-400 hover:text-white">
324
+ <i data-feather="twitter" class="h-6 w-6"></i>
325
+ </a>
326
+ <a href="#" class="text-gray-400 hover:text-white">
327
+ <i data-feather="linkedin" class="h-6 w-6"></i>
328
+ </a>
329
+ <a href="#" class="text-gray-400 hover:text-white">
330
+ <i data-feather="github" class="h-6 w-6"></i>
331
+ </a>
332
+ </div>
333
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
334
+ &copy; 2023 CodeCraft Universe. All rights reserved.
335
+ </p>
336
+ </div>
337
+ </div>
338
+ </footer>
339
+
340
+ <script>
341
+ // Project filtering functionality
342
+ document.querySelectorAll('.project-filter').forEach(button => {
343
+ button.addEventListener('click', () => {
344
+ // Update active state
345
+ document.querySelectorAll('.project-filter').forEach(btn => {
346
+ btn.classList.remove('active', 'bg-indigo-600', 'text-white');
347
+ btn.classList.add('bg-gray-100', 'text-gray-800');
348
+ });
349
+ button.classList.add('active', 'bg-indigo-600', 'text-white');
350
+ button.classList.remove('bg-gray-100', 'text-gray-800');
351
+
352
+ // Filter projects
353
+ const filter = button.dataset.filter;
354
+ document.querySelectorAll('.project-card').forEach(card => {
355
+ if (filter === 'all' || card.dataset.category === filter) {
356
+ card.style.display = 'block';
357
+ } else {
358
+ card.style.display = 'none';
359
+ }
360
+ });
361
+ });
362
+ });
363
+
364
+ feather.replace();
365
+ </script>
366
+ </body>
367
+ </html>
services.html ADDED
@@ -0,0 +1,334 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Our Services | CodeCraft Universe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .gradient-text {
15
+ background: linear-gradient(90deg, #6366F1, #8B5CF6);
16
+ -webkit-background-clip: text;
17
+ background-clip: text;
18
+ color: transparent;
19
+ }
20
+ .service-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16 items-center">
31
+ <div class="flex items-center">
32
+ <a href="index.html" class="flex-shrink-0 flex items-center">
33
+ <span class="text-2xl font-bold gradient-text">CodeCraft</span>
34
+ </a>
35
+ </div>
36
+ <div class="hidden md:block">
37
+ <div class="ml-10 flex items-baseline space-x-4">
38
+ <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Home</a>
39
+ <a href="services.html" class="text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
40
+ <a href="projects.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Projects</a>
41
+ <a href="about.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a>
42
+ <a href="contact.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
43
+ </div>
44
+ </div>
45
+ <div class="md:hidden">
46
+ <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Services Header -->
55
+ <div class="pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">
56
+ <div class="max-w-7xl mx-auto">
57
+ <div class="text-center">
58
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
59
+ <span class="block">Our Comprehensive</span>
60
+ <span class="block gradient-text">Service Offerings</span>
61
+ </h1>
62
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
63
+ We deliver cutting-edge solutions across all digital domains to propel your business forward.
64
+ </p>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Detailed Services Section -->
70
+ <div class="py-12 bg-white">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="grid grid-cols-1 gap-16">
73
+ <!-- Web Development -->
74
+ <div class="flex flex-col md:flex-row gap-8 items-center">
75
+ <div class="md:w-1/3">
76
+ <img src="http://static.photos/technology/640x360/1" alt="Web Development" class="rounded-lg shadow-lg">
77
+ </div>
78
+ <div class="md:w-2/3">
79
+ <h2 class="text-3xl font-bold text-gray-900">Web Development</h2>
80
+ <p class="mt-4 text-gray-600">
81
+ We build responsive, high-performance websites and web applications using modern frameworks like React, Vue, and Angular. Our solutions are optimized for speed, scalability, and security.
82
+ </p>
83
+ <ul class="mt-6 space-y-2">
84
+ <li class="flex items-start">
85
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
86
+ <span>Custom CMS Development</span>
87
+ </li>
88
+ <li class="flex items-start">
89
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
90
+ <span>E-commerce Solutions</span>
91
+ </li>
92
+ <li class="flex items-start">
93
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
94
+ <span>Progressive Web Apps</span>
95
+ </li>
96
+ <li class="flex items-start">
97
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
98
+ <span>API Development & Integration</span>
99
+ </li>
100
+ </ul>
101
+ <a href="contact.html" class="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
102
+ Get Started
103
+ </a>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Mobile Apps -->
108
+ <div class="flex flex-col md:flex-row gap-8 items-center">
109
+ <div class="md:w-1/3">
110
+ <img src="http://static.photos/technology/640x360/2" alt="Mobile Apps" class="rounded-lg shadow-lg">
111
+ </div>
112
+ <div class="md:w-2/3">
113
+ <h2 class="text-3xl font-bold text-gray-900">Mobile App Development</h2>
114
+ <p class="mt-4 text-gray-600">
115
+ Crafting beautiful, intuitive mobile experiences for iOS and Android platforms. We use native and cross-platform technologies to deliver apps that users love.
116
+ </p>
117
+ <ul class="mt-6 space-y-2">
118
+ <li class="flex items-start">
119
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
120
+ <span>iOS & Android Native Apps</span>
121
+ </li>
122
+ <li class="flex items-start">
123
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
124
+ <span>React Native Cross-platform</span>
125
+ </li>
126
+ <li class="flex items-start">
127
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
128
+ <span>Mobile App UI/UX Design</span>
129
+ </li>
130
+ <li class="flex items-start">
131
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
132
+ <span>App Store Optimization</span>
133
+ </li>
134
+ </ul>
135
+ <a href="contact.html" class="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
136
+ Get Started
137
+ </a>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Cloud Solutions -->
142
+ <div class="flex flex-col md:flex-row gap-8 items-center">
143
+ <div class="md:w-1/3">
144
+ <img src="http://static.photos/technology/640x360/3" alt="Cloud Solutions" class="rounded-lg shadow-lg">
145
+ </div>
146
+ <div class="md:w-2/3">
147
+ <h2 class="text-3xl font-bold text-gray-900">Cloud Solutions</h2>
148
+ <p class="mt-4 text-gray-600">
149
+ Migrate, optimize, and manage your applications in the cloud with our expert solutions. We work with AWS, Azure, and Google Cloud to deliver scalable infrastructure.
150
+ </p>
151
+ <ul class="mt-6 space-y-2">
152
+ <li class="flex items-start">
153
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
154
+ <span>Cloud Migration Services</span>
155
+ </li>
156
+ <li class="flex items-start">
157
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
158
+ <span>Serverless Architecture</span>
159
+ </li>
160
+ <li class="flex items-start">
161
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5"></i>
162
+ <span>DevOps & CI/CD Pipelines</span>
163
+ </li>
164
+ <li class="flex items-start">
165
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt=0.5"></i>
166
+ <span>Cloud Security & Compliance</span>
167
+ </li>
168
+ </ul>
169
+ <a href="contact.html" class="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
170
+ Get Started
171
+ </a>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Testimonials -->
179
+ <div class="bg-gray-50 py-16">
180
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
181
+ <div class="lg:text-center">
182
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Client Success Stories</h2>
183
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
184
+ Trusted by innovative companies
185
+ </p>
186
+ </div>
187
+ <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
188
+ <!-- Testimonial 1 -->
189
+ <div class="bg-white p-6 rounded-lg shadow-sm">
190
+ <div class="flex items-center">
191
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/4" alt="">
192
+ <div class="ml-4">
193
+ <h4 class="text-lg font-medium text-gray-900">Emily Wilson</h4>
194
+ <p class="text-indigo-600">CEO, Retail Solutions</p>
195
+ </div>
196
+ </div>
197
+ <div class="mt-4 text-gray-600">
198
+ <p>"Our e-commerce platform developed by CodeCraft increased conversions by 65% while reducing bounce rates significantly."</p>
199
+ </div>
200
+ <div class="mt-4 flex text-yellow-400">
201
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
202
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
203
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
204
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
205
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Testimonial 2 -->
210
+ <div class="bg-white p-6 rounded-lg shadow-sm">
211
+ <div class="flex items-center">
212
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/5" alt="">
213
+ <div class="ml-4">
214
+ <h4 class="text-lg font-medium text-gray-900">Robert Kim</h4>
215
+ <p class="text-indigo-600">CTO, FinTech Inc</p>
216
+ </div>
217
+ </div>
218
+ <div class="mt-4 text-gray-600">
219
+ <p>"The mobile banking app they built for us now processes $2M+ in daily transactions with zero downtime."</p>
220
+ </div>
221
+ <div class="mt-4 flex text-yellow-400">
222
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
223
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
224
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
225
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
226
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Testimonial 3 -->
231
+ <div class="bg-white p-6 rounded-lg shadow-sm">
232
+ <div class="flex items-center">
233
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/6" alt="">
234
+ <div class="ml-4">
235
+ <h4 class="text-lg font-medium text-gray-900">Sophia Martinez</h4>
236
+ <p class="text-indigo-600">Director, HealthTech</p>
237
+ </div>
238
+ </div>
239
+ <div class="mt-4 text-gray-600">
240
+ <p>"Their cloud migration strategy saved us $150k annually in infrastructure costs while improving performance."</p>
241
+ </div>
242
+ <div class="mt-4 flex text-yellow-400">
243
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
244
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
245
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
246
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
247
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- CTA Section -->
255
+ <div class="bg-indigo-700">
256
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
257
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
258
+ <span class="block">Ready to discuss your project?</span>
259
+ <span class="block">We're here to help.</span>
260
+ </h2>
261
+ <p class="mt-4 text-lg leading-6 text-indigo-200">
262
+ Schedule a free consultation with our experts to explore how we can bring your vision to life.
263
+ </p>
264
+ <a href="contact.html" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
265
+ Get in Touch
266
+ </a>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Footer -->
271
+ <footer class="bg-gray-800">
272
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
273
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
274
+ <div>
275
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
276
+ <ul class="mt-4 space-y-4">
277
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Web Development</a></li>
278
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Mobile Apps</a></li>
279
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Cloud Services</a></li>
280
+ <li><a href="services.html" class="text-base text-gray-300 hover:text-white">Data Analytics</a></li>
281
+ </ul>
282
+ </div>
283
+ <div>
284
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
285
+ <ul class="mt-4 space-y-4">
286
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
287
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
288
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
289
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
290
+ </ul>
291
+ </div>
292
+ <div>
293
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
294
+ <ul class="mt-4 space-y-4">
295
+ <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact</a></li>
296
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
297
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
298
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Reference</a></li>
299
+ </ul>
300
+ </div>
301
+ <div>
302
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
303
+ <ul class="mt-4 space-y-4">
304
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
305
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
306
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
307
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
308
+ </ul>
309
+ </div>
310
+ </div>
311
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
312
+ <div class="flex space-x-6 md:order-2">
313
+ <a href="#" class="text-gray-400 hover:text-white">
314
+ <i data-feather="twitter" class="h-6 w-6"></i>
315
+ </a>
316
+ <a href="#" class="text-gray-400 hover:text-white">
317
+ <i data-feather="linkedin" class="h-6 w-6"></i>
318
+ </a>
319
+ <a href="#" class="text-gray-400 hover:text-white">
320
+ <i data-feather="github" class="h-6 w-6"></i>
321
+ </a>
322
+ </div>
323
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
324
+ &copy; 2023 CodeCraft Universe. All rights reserved.
325
+ </p>
326
+ </div>
327
+ </div>
328
+ </footer>
329
+
330
+ <script>
331
+ feather.replace();
332
+ </script>
333
+ </body>
334
+ </html>