Hugging Face's logo

Spaces:
Michael254
/
website
Running

App Files Community
Michael254 commited on
Commit
588026c
·
verified ·
1 Parent(s): 98402e3

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +669 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: purple
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: website
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,669 @@
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>Michael Mati - Biomedical Engineering Services</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
12
+ }
13
+ .service-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .contact-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .contact-card:hover {
21
+ background-color: #f8fafc;
22
+ }
23
+ .animate-float {
24
+ animation: float 6s ease-in-out infinite;
25
+ }
26
+ @keyframes float {
27
+ 0% { transform: translateY(0px); }
28
+ 50% { transform: translateY(-20px); }
29
+ 100% { transform: translateY(0px); }
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="font-sans antialiased text-gray-800">
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
36
+ <div class="max-w-6xl mx-auto px-4">
37
+ <div class="flex justify-between items-center h-16">
38
+ <div class="flex items-center">
39
+ <div class="flex-shrink-0">
40
+ <span class="text-blue-600 font-bold text-xl">Michael Mati</span>
41
+ <span class="text-gray-500 text-sm ml-1">Biomedical Engineer</span>
42
+ </div>
43
+ </div>
44
+ <div class="hidden md:block">
45
+ <div class="ml-10 flex items-baseline space-x-4">
46
+ <a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 rounded-md text-sm font-medium">Home</a>
47
+ <a href="#services" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Services</a>
48
+ <a href="#about" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
49
+ <a href="#contact" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
50
+ </div>
51
+ </div>
52
+ <div class="md:hidden">
53
+ <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-blue-600 focus:outline-none">
54
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
55
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
56
+ </svg>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <!-- Mobile menu -->
62
+ <div class="mobile-menu hidden md:hidden bg-white shadow-lg">
63
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
64
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600">Home</a>
65
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600">Services</a>
66
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600">About</a>
67
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600">Contact</a>
68
+ </div>
69
+ </div>
70
+ </nav>
71
+
72
+ <!-- Hero Section -->
73
+ <section id="home" class="hero-gradient text-white py-20">
74
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="flex flex-col md:flex-row items-center">
76
+ <div class="md:w-1/2 mb-10 md:mb-0">
77
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Precision Biomedical Engineering Solutions</h1>
78
+ <p class="text-xl text-blue-100 mb-8">Expert medical equipment maintenance, calibration, and consulting services by Michael Mati</p>
79
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
80
+ <a href="#contact" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Get in Touch</a>
81
+ <a href="#services" class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Our Services</a>
82
+ </div>
83
+ </div>
84
+ <div class="md:w-1/2 flex justify-center">
85
+ <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Medical Equipment" class="rounded-lg shadow-2xl w-full max-w-md animate-float">
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Services Section -->
92
+ <section id="services" class="py-20 bg-gray-50">
93
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
94
+ <div class="text-center mb-16">
95
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Biomedical Engineering Services</h2>
96
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive solutions to ensure your medical equipment operates at peak performance</p>
97
+ </div>
98
+
99
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
100
+ <!-- Service 1 -->
101
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
102
+ <div class="p-6">
103
+ <div class="flex items-center mb-4">
104
+ <div class="bg-blue-100 p-3 rounded-full">
105
+ <i class="fas fa-tools text-blue-600 text-xl"></i>
106
+ </div>
107
+ <h3 class="text-xl font-semibold ml-4">Equipment Maintenance</h3>
108
+ </div>
109
+ <p class="text-gray-600 mb-4">Preventive and corrective maintenance for all types of medical equipment including imaging systems, patient monitors, and laboratory instruments.</p>
110
+ <ul class="text-gray-600 space-y-2">
111
+ <li class="flex items-start">
112
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
113
+ <span>Scheduled maintenance programs</span>
114
+ </li>
115
+ <li class="flex items-start">
116
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
117
+ <span>Emergency repair services</span>
118
+ </li>
119
+ <li class="flex items-start">
120
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
121
+ <span>Component replacement</span>
122
+ </li>
123
+ </ul>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Service 2 -->
128
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
129
+ <div class="p-6">
130
+ <div class="flex items-center mb-4">
131
+ <div class="bg-blue-100 p-3 rounded-full">
132
+ <i class="fas fa-ruler-combined text-blue-600 text-xl"></i>
133
+ </div>
134
+ <h3 class="text-xl font-semibold ml-4">Calibration Services</h3>
135
+ </div>
136
+ <p class="text-gray-600 mb-4">Precision calibration of medical devices to ensure accurate measurements and compliance with regulatory standards.</p>
137
+ <ul class="text-gray-600 space-y-2">
138
+ <li class="flex items-start">
139
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
140
+ <span>Full calibration documentation</span>
141
+ </li>
142
+ <li class="flex items-start">
143
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
144
+ <span>Traceable to national standards</span>
145
+ </li>
146
+ <li class="flex items-start">
147
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
148
+ <span>Performance verification</span>
149
+ </li>
150
+ </ul>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Service 3 -->
155
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
156
+ <div class="p-6">
157
+ <div class="flex items-center mb-4">
158
+ <div class="bg-blue-100 p-3 rounded-full">
159
+ <i class="fas fa-clipboard-check text-blue-600 text-xl"></i>
160
+ </div>
161
+ <h3 class="text-xl font-semibold ml-4">Compliance Consulting</h3>
162
+ </div>
163
+ <p class="text-gray-600 mb-4">Expert guidance on regulatory compliance for medical equipment including ISO, FDA, and local health authority requirements.</p>
164
+ <ul class="text-gray-600 space-y-2">
165
+ <li class="flex items-start">
166
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
167
+ <span>Regulatory gap analysis</span>
168
+ </li>
169
+ <li class="flex items-start">
170
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
171
+ <span>Quality management systems</span>
172
+ </li>
173
+ <li class="flex items-start">
174
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
175
+ <span>Risk assessment</span>
176
+ </li>
177
+ </ul>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Service 4 -->
182
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
183
+ <div class="p-6">
184
+ <div class="flex items-center mb-4">
185
+ <div class="bg-blue-100 p-3 rounded-full">
186
+ <i class="fas fa-laptop-medical text-blue-600 text-xl"></i>
187
+ </div>
188
+ <h3 class="text-xl font-semibold ml-4">Equipment Training</h3>
189
+ </div>
190
+ <p class="text-gray-600 mb-4">Comprehensive training programs for clinical staff on proper operation and basic troubleshooting of medical equipment.</p>
191
+ <ul class="text-gray-600 space-y-2">
192
+ <li class="flex items-start">
193
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
194
+ <span>Operator training sessions</span>
195
+ </li>
196
+ <li class="flex items-start">
197
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
198
+ <span>Customized training materials</span>
199
+ </li>
200
+ <li class="flex items-start">
201
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
202
+ <span>Ongoing support</span>
203
+ </li>
204
+ </ul>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Service 5 -->
209
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
210
+ <div class="p-6">
211
+ <div class="flex items-center mb-4">
212
+ <div class="bg-blue-100 p-3 rounded-full">
213
+ <i class="fas fa-project-diagram text-blue-600 text-xl"></i>
214
+ </div>
215
+ <h3 class="text-xl font-semibold ml-4">System Integration</h3>
216
+ </div>
217
+ <p class="text-gray-600 mb-4">Seamless integration of medical devices with hospital information systems and electronic health records.</p>
218
+ <ul class="text-gray-600 space-y-2">
219
+ <li class="flex items-start">
220
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
221
+ <span>HL7 interface development</span>
222
+ </li>
223
+ <li class="flex items-start">
224
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
225
+ <span>Device networking</span>
226
+ </li>
227
+ <li class="flex items-start">
228
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
229
+ <span>Data interoperability solutions</span>
230
+ </li>
231
+ </ul>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Service 6 -->
236
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
237
+ <div class="p-6">
238
+ <div class="flex items-center mb-4">
239
+ <div class="bg-blue-100 p-3 rounded-full">
240
+ <i class="fas fa-search-dollar text-blue-600 text-xl"></i>
241
+ </div>
242
+ <h3 class="text-xl font-semibold ml-4">Equipment Assessment</h3>
243
+ </div>
244
+ <p class="text-gray-600 mb-4">Comprehensive evaluation of medical equipment condition, performance, and lifecycle management.</p>
245
+ <ul class="text-gray-600 space-y-2">
246
+ <li class="flex items-start">
247
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
248
+ <span>Technology assessment</span>
249
+ </li>
250
+ <li class="flex items-start">
251
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
252
+ <span>Replacement planning</span>
253
+ </li>
254
+ <li class="flex items-start">
255
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
256
+ <span>Cost-benefit analysis</span>
257
+ </li>
258
+ </ul>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- About Section -->
266
+ <section id="about" class="py-20 bg-white">
267
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
268
+ <div class="flex flex-col md:flex-row items-center">
269
+ <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center">
270
+ <div class="relative">
271
+ <div class="w-64 h-64 bg-blue-100 rounded-full flex items-center justify-center">
272
+ <i class="fas fa-user-md text-blue-600 text-8xl"></i>
273
+ </div>
274
+ <div class="absolute -bottom-3 -right-3 bg-blue-600 text-white rounded-full w-16 h-16 flex items-center justify-center">
275
+ <span class="text-2xl font-bold">10+</span>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="md:w-2/3 md:pl-12">
280
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">About Michael Mati</h2>
281
+ <p class="text-lg text-gray-600 mb-6">
282
+ With over a decade of experience in biomedical engineering, Michael Mati provides expert technical services for healthcare facilities. My mission is to ensure medical equipment reliability, accuracy, and safety through professional maintenance and consulting services.
283
+ </p>
284
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
285
+ <div class="flex items-start">
286
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
287
+ <i class="fas fa-graduation-cap text-blue-600"></i>
288
+ </div>
289
+ <div>
290
+ <h4 class="font-semibold text-gray-800">Education</h4>
291
+ <p class="text-gray-600">BSc in Biomedical Engineering, Certified Biomedical Equipment Technician (CBET)</p>
292
+ </div>
293
+ </div>
294
+ <div class="flex items-start">
295
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
296
+ <i class="fas fa-briefcase text-blue-600"></i>
297
+ </div>
298
+ <div>
299
+ <h4 class="font-semibold text-gray-800">Experience</h4>
300
+ <p class="text-gray-600">10+ years servicing hospitals, clinics, and research facilities across the region</p>
301
+ </div>
302
+ </div>
303
+ <div class="flex items-start">
304
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
305
+ <i class="fas fa-certificate text-blue-600"></i>
306
+ </div>
307
+ <div>
308
+ <h4 class="font-semibold text-gray-800">Certifications</h4>
309
+ <p class="text-gray-600">ISO 13485, FDA compliance, multiple OEM equipment certifications</p>
310
+ </div>
311
+ </div>
312
+ <div class="flex items-start">
313
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
314
+ <i class="fas fa-hand-holding-heart text-blue-600"></i>
315
+ </div>
316
+ <div>
317
+ <h4 class="font-semibold text-gray-800">Philosophy</h4>
318
+ <p class="text-gray-600">Patient safety through equipment reliability is my top priority</p>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ <div class="flex flex-wrap gap-3">
323
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">MRI Systems</span>
324
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Ultrasound</span>
325
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Patient Monitors</span>
326
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Lab Equipment</span>
327
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">X-ray Systems</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Testimonials Section -->
335
+ <section class="py-16 bg-gray-50">
336
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
337
+ <div class="text-center mb-12">
338
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Client Testimonials</h2>
339
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">What healthcare professionals say about my services</p>
340
+ </div>
341
+
342
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
343
+ <!-- Testimonial 1 -->
344
+ <div class="bg-white p-8 rounded-xl shadow-md">
345
+ <div class="flex items-center mb-4">
346
+ <div class="text-yellow-400 text-xl">
347
+ <i class="fas fa-star"></i>
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ </div>
353
+ </div>
354
+ <p class="text-gray-600 mb-6">
355
+ "Michael's expertise in maintaining our ICU equipment has been invaluable. His preventive maintenance program reduced our equipment downtime by 70%."
356
+ </p>
357
+ <div class="flex items-center">
358
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
359
+ <i class="fas fa-user-md text-blue-600"></i>
360
+ </div>
361
+ <div>
362
+ <h4 class="font-semibold">Dr. Sarah Johnson</h4>
363
+ <p class="text-gray-500 text-sm">Chief Medical Officer</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Testimonial 2 -->
369
+ <div class="bg-white p-8 rounded-xl shadow-md">
370
+ <div class="flex items-center mb-4">
371
+ <div class="text-yellow-400 text-xl">
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ </div>
378
+ </div>
379
+ <p class="text-gray-600 mb-6">
380
+ "The calibration services provided exceptional accuracy. Michael's attention to detail and thorough documentation made our accreditation process seamless."
381
+ </p>
382
+ <div class="flex items-center">
383
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
384
+ <i class="fas fa-flask text-blue-600"></i>
385
+ </div>
386
+ <div>
387
+ <h4 class="font-semibold">Robert Chen</h4>
388
+ <p class="text-gray-500 text-sm">Lab Manager</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Testimonial 3 -->
394
+ <div class="bg-white p-8 rounded-xl shadow-md">
395
+ <div class="flex items-center mb-4">
396
+ <div class="text-yellow-400 text-xl">
397
+ <i class="fas fa-star"></i>
398
+ <i class="fas fa-star"></i>
399
+ <i class="fas fa-star"></i>
400
+ <i class="fas fa-star"></i>
401
+ <i class="fas fa-star-half-alt"></i>
402
+ </div>
403
+ </div>
404
+ <p class="text-gray-600 mb-6">
405
+ "Michael's 24/7 emergency response has saved us multiple times. His deep knowledge of imaging systems keeps our radiology department running smoothly."
406
+ </p>
407
+ <div class="flex items-center">
408
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
409
+ <i class="fas fa-x-ray text-blue-600"></i>
410
+ </div>
411
+ <div>
412
+ <h4 class="font-semibold">Lisa Mwangi</h4>
413
+ <p class="text-gray-500 text-sm">Radiology Director</p>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </section>
420
+
421
+ <!-- Contact Section -->
422
+ <section id="contact" class="py-20 bg-blue-600 text-white">
423
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
424
+ <div class="text-center mb-16">
425
+ <h2 class="text-3xl font-bold mb-4">Get In Touch</h2>
426
+ <p class="text-xl text-blue-100 max-w-3xl mx-auto">Contact me for biomedical engineering services or consultations</p>
427
+ </div>
428
+
429
+ <div class="flex flex-col md:flex-row">
430
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8">
431
+ <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-8 h-full">
432
+ <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
433
+
434
+ <div class="space-y-6">
435
+ <div class="flex items-start">
436
+ <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4">
437
+ <i class="fas fa-phone-alt"></i>
438
+ </div>
439
+ <div>
440
+ <h4 class="font-medium mb-1">Phone</h4>
441
+ <a href="tel:0792158087" class="text-blue-100 hover:text-white">0792 158 087</a>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="flex items-start">
446
+ <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4">
447
+ <i class="fas fa-envelope"></i>
448
+ </div>
449
+ <div>
450
+ <h4 class="font-medium mb-1">Email</h4>
451
+ <a href="mailto:contact@michaelmati.com" class="text-blue-100 hover:text-white">contact@michaelmati.com</a>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="flex items-start">
456
+ <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4">
457
+ <i class="fas fa-map-marker-alt"></i>
458
+ </div>
459
+ <div>
460
+ <h4 class="font-medium mb-1">Service Area</h4>
461
+ <p class="text-blue-100">Nairobi and surrounding regions</p>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="flex items-start">
466
+ <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4">
467
+ <i class="fas fa-clock"></i>
468
+ </div>
469
+ <div>
470
+ <h4 class="font-medium mb-1">Availability</h4>
471
+ <p class="text-blue-100">24/7 emergency services available</p>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="mt-8">
477
+ <h4 class="font-medium mb-4">Follow Me</h4>
478
+ <div class="flex space-x-4">
479
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
480
+ <i class="fab fa-linkedin-in"></i>
481
+ </a>
482
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
483
+ <i class="fab fa-twitter"></i>
484
+ </a>
485
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
486
+ <i class="fab fa-facebook-f"></i>
487
+ </a>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="md:w-1/2">
494
+ <div class="bg-white rounded-xl shadow-xl p-8 h-full">
495
+ <h3 class="text-2xl font-semibold text-gray-900 mb-6">Send a Message</h3>
496
+ <form id="contactForm">
497
+ <div class="mb-4">
498
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
499
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
500
+ </div>
501
+ <div class="mb-4">
502
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
503
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
504
+ </div>
505
+ <div class="mb-4">
506
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
507
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
508
+ </div>
509
+ <div class="mb-4">
510
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service Needed</label>
511
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
512
+ <option value="">Select a service</option>
513
+ <option value="maintenance">Equipment Maintenance</option>
514
+ <option value="calibration">Calibration Services</option>
515
+ <option value="consulting">Compliance Consulting</option>
516
+ <option value="training">Equipment Training</option>
517
+ <option value="integration">System Integration</option>
518
+ <option value="assessment">Equipment Assessment</option>
519
+ <option value="other">Other</option>
520
+ </select>
521
+ </div>
522
+ <div class="mb-6">
523
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
524
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
525
+ </div>
526
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-300">
527
+ Send Message
528
+ </button>
529
+ </form>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </section>
535
+
536
+ <!-- Footer -->
537
+ <footer class="bg-gray-900 text-white py-12">
538
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
539
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
540
+ <div>
541
+ <h3 class="text-xl font-bold mb-4">Michael Mati</h3>
542
+ <p class="text-gray-400">Biomedical engineering services with precision, reliability, and expertise.</p>
543
+ </div>
544
+ <div>
545
+ <h4 class="font-semibold mb-4">Services</h4>
546
+ <ul class="space-y-2">
547
+ <li><a href="#" class="text-gray-400 hover:text-white">Equipment Maintenance</a></li>
548
+ <li><a href="#" class="text-gray-400 hover:text-white">Calibration Services</a></li>
549
+ <li><a href="#" class="text-gray-400 hover:text-white">Compliance Consulting</a></li>
550
+ <li><a href="#" class="text-gray-400 hover:text-white">Equipment Training</a></li>
551
+ </ul>
552
+ </div>
553
+ <div>
554
+ <h4 class="font-semibold mb-4">Quick Links</h4>
555
+ <ul class="space-y-2">
556
+ <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
557
+ <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
558
+ <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
559
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
560
+ </ul>
561
+ </div>
562
+ <div>
563
+ <h4 class="font-semibold mb-4">Contact</h4>
564
+ <ul class="space-y-2 text-gray-400">
565
+ <li class="flex items-start">
566
+ <i class="fas fa-phone-alt mt-1 mr-2 text-sm"></i>
567
+ <span>0792 158 087</span>
568
+ </li>
569
+ <li class="flex items-start">
570
+ <i class="fas fa-envelope mt-1 mr-2 text-sm"></i>
571
+ <span>contact@michaelmati.com</span>
572
+ </li>
573
+ </ul>
574
+ </div>
575
+ </div>
576
+ <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
577
+ <p class="text-gray-400 text-sm">© 2023 Michael Mati Biomedical Engineering Services. All rights reserved.</p>
578
+ <div class="flex space-x-6 mt-4 md:mt-0">
579
+ <a href="#" class="text-gray-400 hover:text-white">
580
+ <i class="fab fa-linkedin-in"></i>
581
+ </a>
582
+ <a href="#" class="text-gray-400 hover:text-white">
583
+ <i class="fab fa-twitter"></i>
584
+ </a>
585
+ <a href="#" class="text-gray-400 hover:text-white">
586
+ <i class="fab fa-facebook-f"></i>
587
+ </a>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </footer>
592
+
593
+ <!-- Back to Top Button -->
594
+ <button id="backToTop" class="fixed bottom-6 right-6 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-opacity duration-300 opacity-0 invisible">
595
+ <i class="fas fa-arrow-up"></i>
596
+ </button>
597
+
598
+ <script>
599
+ // Mobile menu toggle
600
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
601
+ const mobileMenu = document.querySelector('.mobile-menu');
602
+
603
+ mobileMenuButton.addEventListener('click', () => {
604
+ mobileMenu.classList.toggle('hidden');
605
+ });
606
+
607
+ // Smooth scrolling for anchor links
608
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
609
+ anchor.addEventListener('click', function(e) {
610
+ e.preventDefault();
611
+
612
+ const targetId = this.getAttribute('href');
613
+ if (targetId === '#') return;
614
+
615
+ const targetElement = document.querySelector(targetId);
616
+ if (targetElement) {
617
+ targetElement.scrollIntoView({
618
+ behavior: 'smooth'
619
+ });
620
+
621
+ // Close mobile menu if open
622
+ mobileMenu.classList.add('hidden');
623
+ }
624
+ });
625
+ });
626
+
627
+ // Back to top button
628
+ const backToTopButton = document.getElementById('backToTop');
629
+
630
+ window.addEventListener('scroll', () => {
631
+ if (window.pageYOffset > 300) {
632
+ backToTopButton.classList.remove('opacity-0', 'invisible');
633
+ backToTopButton.classList.add('opacity-100', 'visible');
634
+ } else {
635
+ backToTopButton.classList.remove('opacity-100', 'visible');
636
+ backToTopButton.classList.add('opacity-0', 'invisible');
637
+ }
638
+ });
639
+
640
+ backToTopButton.addEventListener('click', () => {
641
+ window.scrollTo({
642
+ top: 0,
643
+ behavior: 'smooth'
644
+ });
645
+ });
646
+
647
+ // Form submission
648
+ const contactForm = document.getElementById('contactForm');
649
+
650
+ contactForm.addEventListener('submit', (e) => {
651
+ e.preventDefault();
652
+
653
+ // Get form values
654
+ const name = document.getElementById('name').value;
655
+ const email = document.getElementById('email').value;
656
+ const phone = document.getElementById('phone').value;
657
+ const service = document.getElementById('service').value;
658
+ const message = document.getElementById('message').value;
659
+
660
+ // Here you would typically send the form data to a server
661
+ // For this example, we'll just show an alert
662
+ alert(`Thank you, ${name}! Your message has been received. I will contact you soon at ${email} or ${phone}.`);
663
+
664
+ // Reset form
665
+ contactForm.reset();
666
+ });
667
+ </script>
668
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Michael254/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
669
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a website for my biomedical engineering services with my name 'Michael Mati' and Tel; 0792158087