Hugging Face's logo

Spaces:
essential-eng
/
test
Running

App Files Community
mtourville commited on
Commit
3f06935
·
verified ·
1 Parent(s): 96483b2

go to services tab

Browse files
Files changed (3) hide show
  1. index.html +11 -11
  2. projects.html +7 -7
  3. services.html +526 -0
index.html CHANGED
@@ -36,8 +36,8 @@
36
  <div class="hidden md:block">
37
  <div class="ml-10 flex items-center space-x-8">
38
  <a href="index.html" class="text-blue-600 font-medium">Home</a>
39
- <a href="#" class="text-gray-600 hover:text-blue-600 transition">Services</a>
40
- <div class="group relative">
41
  <a href="projects.html" class="text-blue-600 font-medium flex items-center">Projects <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i></a>
42
  <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-1 hidden group-hover:block z-50">
43
  <a href="projects.html" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 hover:text-blue-600">All Projects</a>
@@ -329,15 +329,15 @@
329
  <div>
330
  <h4 class="text-lg font-semibold mb-6">Services</h4>
331
  <ul class="space-y-3">
332
- <li><a href="#" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
333
- <li><a href="#" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
334
- <li><a href="#" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
335
- <li><a href="#" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
336
- <li><a href="#" class="text-gray-400 hover:text-white transition">Commissioning</a></li>
337
- <li><a href="#" class="text-gray-400 hover:text-white transition">Telecom Systems</a></li>
338
- <li><a href="#" class="text-gray-400 hover:text-white transition">Fire Protection</a></li>
339
- <li><a href="#" class="text-gray-400 hover:text-white transition">Fire Alarm Systems</a></li>
340
- <li><a href="#" class="text-gray-400 hover:text-white transition">Data Center Design</a></li>
341
  </ul>
342
  </div>
343
 
 
36
  <div class="hidden md:block">
37
  <div class="ml-10 flex items-center space-x-8">
38
  <a href="index.html" class="text-blue-600 font-medium">Home</a>
39
+ <a href="services.html" class="text-blue-600 font-medium">Services</a>
40
+ <div class="group relative">
41
  <a href="projects.html" class="text-blue-600 font-medium flex items-center">Projects <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i></a>
42
  <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-1 hidden group-hover:block z-50">
43
  <a href="projects.html" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 hover:text-blue-600">All Projects</a>
 
329
  <div>
330
  <h4 class="text-lg font-semibold mb-6">Services</h4>
331
  <ul class="space-y-3">
332
+ <li><a href="services.html#cleanroom-design" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
333
+ <li><a href="services.html#hvac-systems" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
334
+ <li><a href="services.html#process-piping" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
335
+ <li><a href="services.html#electrical-systems" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
336
+ <li><a href="services.html#commissioning" class="text-gray-400 hover:text-white transition">Commissioning</a></li>
337
+ <li><a href="services.html#telecom-systems" class="text-gray-400 hover:text-white transition">Telecom Systems</a></li>
338
+ <li><a href="services.html#fire-protection" class="text-gray-400 hover:text-white transition">Fire Protection</a></li>
339
+ <li><a href="services.html#fire-alarm-systems" class="text-gray-400 hover:text-white transition">Fire Alarm Systems</a></li>
340
+ <li><a href="services.html#data-center" class="text-gray-400 hover:text-white transition">Data Center Design</a></li>
341
  </ul>
342
  </div>
343
 
projects.html CHANGED
@@ -29,8 +29,8 @@
29
  <div class="hidden md:block">
30
  <div class="ml-10 flex items-center space-x-8">
31
  <a href="index.html" class="text-gray-600 hover:text-blue-600 transition">Home</a>
32
- <a href="#" class="text-gray-600 hover:text-blue-600 transition">Services</a>
33
- <a href="projects.html" class="text-blue-600 font-medium">Projects</a>
34
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
35
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
36
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
@@ -212,11 +212,11 @@
212
  <div>
213
  <h4 class="text-lg font-semibold mb-6">Services</h4>
214
  <ul class="space-y-3">
215
- <li><a href="#" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
216
- <li><a href="#" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
217
- <li><a href="#" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
218
- <li><a href="#" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
219
- </ul>
220
  </div>
221
 
222
  <div>
 
29
  <div class="hidden md:block">
30
  <div class="ml-10 flex items-center space-x-8">
31
  <a href="index.html" class="text-gray-600 hover:text-blue-600 transition">Home</a>
32
+ <a href="services.html" class="text-blue-600 font-medium">Services</a>
33
+ <a href="projects.html" class="text-blue-600 font-medium">Projects</a>
34
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
35
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
36
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
 
212
  <div>
213
  <h4 class="text-lg font-semibold mb-6">Services</h4>
214
  <ul class="space-y-3">
215
+ <li><a href="services.html#cleanroom-design" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
216
+ <li><a href="services.html#hvac-systems" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
217
+ <li><a href="services.html#process-piping" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
218
+ <li><a href="services.html#electrical-systems" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
219
+ </ul>
220
  </div>
221
 
222
  <div>
services.html ADDED
@@ -0,0 +1,526 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 | Essential Engineering</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ <style>
13
+ .service-detail:hover {
14
+ transform: translateY(-3px);
15
+ box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1);
16
+ }
17
+ </style>
18
+ </head>
19
+ <body class="font-sans antialiased text-gray-800">
20
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-1"></div>
21
+
22
+ <!-- Navigation -->
23
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm fixed w-full z-50">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-20 items-center">
26
+ <div class="flex-shrink-0 flex items-center">
27
+ <img src="https://huggingface.co/spaces/mtourville/pureflow-mep-masters/resolve/main/images/Essential%20Logo.jpg" alt="Essential Engineering Logo" class="h-16 w-auto">
28
+ </div>
29
+ <div class="hidden md:block">
30
+ <div class="ml-10 flex items-center space-x-8">
31
+ <a href="index.html" class="text-gray-600 hover:text-blue-600 transition">Home</a>
32
+ <a href="services.html" class="text-blue-600 font-medium">Services</a>
33
+ <a href="projects.html" class="text-gray-600 hover:text-blue-600 transition">Projects</a>
34
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
35
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
36
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
37
+ </div>
38
+ </div>
39
+ <div class="md:hidden">
40
+ <button class="text-gray-600">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Services Header -->
49
+ <section class="pt-32 pb-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-90">
50
+ <div class="max-w-7xl mx-auto text-center">
51
+ <span class="text-blue-600 font-medium">OUR EXPERTISE</span>
52
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
53
+ Comprehensive <span class="text-blue-600">MEP Services</span>
54
+ </h1>
55
+ <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
56
+ Specialized engineering solutions tailored for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
57
+ </p>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Services Grid -->
62
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
63
+ <div class="max-w-7xl mx-auto">
64
+ <div id="cleanroom-design" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
65
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
66
+ <div class="md:w-1/3">
67
+ <img src="http://static.photos/medical/640x360/10" alt="Cleanroom Design" class="rounded-lg w-full">
68
+ </div>
69
+ <div class="md:w-2/3">
70
+ <div class="flex items-center mb-4">
71
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
72
+ <i data-feather="droplet" class="text-blue-600"></i>
73
+ </div>
74
+ <h2 class="text-2xl font-bold">Cleanroom Design</h2>
75
+ </div>
76
+ <p class="text-gray-600 mb-4">
77
+ We design ISO Class 1-9 cleanrooms with validated HVAC, pressurization, and monitoring systems to meet GMP, ISO 14644, and FDA requirements.
78
+ </p>
79
+ <ul class="space-y-2 mb-6">
80
+ <li class="flex items-center text-gray-600">
81
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
82
+ <span>Particle counting and classification</span>
83
+ </li>
84
+ <li class="flex items-center text-gray-600">
85
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
86
+ <span>Pressure cascade design</span>
87
+ </li>
88
+ <li class="flex items-center text-gray-600">
89
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
90
+ <span>Material airlock and gowning rooms</span>
91
+ </li>
92
+ <li class="flex items-center text-gray-600">
93
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
94
+ <span>VAV terminal unit selection</span>
95
+ </li>
96
+ </ul>
97
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
98
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
99
+ </a>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <div id="hvac-systems" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
105
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
106
+ <div class="md:w-1/3">
107
+ <img src="http://static.photos/technology/640x360/11" alt="HVAC Systems" class="rounded-lg w-full">
108
+ </div>
109
+ <div class="md:w-2/3">
110
+ <div class="flex items-center mb-4">
111
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
112
+ <i data-feather="thermometer" class="text-blue-600"></i>
113
+ </div>
114
+ <h2 class="text-2xl font-bold">HVAC Systems</h2>
115
+ </div>
116
+ <p class="text-gray-600 mb-4">
117
+ Precision environmental control systems with redundancy for critical process areas requiring tight temperature and humidity tolerances.
118
+ </p>
119
+ <ul class="space-y-2 mb-6">
120
+ <li class="flex items-center text-gray-600">
121
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
122
+ <span>Redundant air handling units</span>
123
+ </li>
124
+ <li class="flex items-center text-gray-600">
125
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
126
+ <span>Humidity control to ±2% RH</span>
127
+ </li>
128
+ <li class="flex items-center text-gray-600">
129
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
130
+ <span>Temperature control to ±0.5°C</span>
131
+ </li>
132
+ <li class="flex items-center text-gray-600">
133
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
134
+ <span>Energy recovery systems</span>
135
+ </li>
136
+ </ul>
137
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
138
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
139
+ </a>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <div id="process-piping" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
145
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
146
+ <div class="md:w-1/3">
147
+ <img src="http://static.photos/industry/640x360/12" alt="Process Piping" class="rounded-lg w-full">
148
+ </div>
149
+ <div class="md:w-2/3">
150
+ <div class="flex items-center mb-4">
151
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
152
+ <i data-feather="wind" class="text-blue-600"></i>
153
+ </div>
154
+ <h2 class="text-2xl font-bold">Process Piping</h2>
155
+ </div>
156
+ <p class="text-gray-600 mb-4">
157
+ Ultra-pure water, specialty gases, and chemical distribution systems designed for purity and reliability in critical manufacturing processes.
158
+ </p>
159
+ <ul class="space-y-2 mb-6">
160
+ <li class="flex items-center text-gray-600">
161
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
162
+ <span>UPW (Ultra Pure Water) systems</span>
163
+ </li>
164
+ <li class="flex items-center text-gray-600">
165
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
166
+ <span>High purity gas distribution</span>
167
+ </li>
168
+ <li class="flex items-center text-gray-600">
169
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
170
+ <span>Chemical delivery systems</span>
171
+ </li>
172
+ <li class="flex items-center text-gray-600">
173
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
174
+ <span>PW, WFI, and Clean Steam</span>
175
+ </li>
176
+ </ul>
177
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
178
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
179
+ </a>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <div id="electrical-systems" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
185
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
186
+ <div class="md:w-1/3">
187
+ <img src="http://static.photos/technology/640x360/13" alt="Electrical Systems" class="rounded-lg w-full">
188
+ </div>
189
+ <div class="md:w-2/3">
190
+ <div class="flex items-center mb-4">
191
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
192
+ <i data-feather="zap" class="text-blue-600"></i>
193
+ </div>
194
+ <h2 class="text-2xl font-bold">Electrical Systems</h2>
195
+ </div>
196
+ <p class="text-gray-600 mb-4">
197
+ Clean power distribution, emergency backup, and specialized lighting systems designed for critical environments with zero downtime requirements.
198
+ </p>
199
+ <ul class="space-y-2 mb-6">
200
+ <li class="flex items-center text-gray-600">
201
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
202
+ <span>UPS and emergency power</span>
203
+ </li>
204
+ <li class="flex items-center text-gray-600">
205
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
206
+ <span>Harmonic mitigation</span>
207
+ </li>
208
+ <li class="flex items-center text-gray-600">
209
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
210
+ <span>Static transfer switches</span>
211
+ </li>
212
+ <li class="flex items-center text-gray-600">
213
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
214
+ <span>EMI/RFI shielded environments</span>
215
+ </li>
216
+ </ul>
217
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
218
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
219
+ </a>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div id="commissioning" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
225
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
226
+ <div class="md:w-1/3">
227
+ <img src="http://static.photos/technology/640x360/14" alt="Commissioning" class="rounded-lg w-full">
228
+ </div>
229
+ <div class="md:w-2/3">
230
+ <div class="flex items-center mb-4">
231
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
232
+ <i data-feather="check-circle" class="text-blue-600"></i>
233
+ </div>
234
+ <h2 class="text-2xl font-bold">Commissioning</h2>
235
+ </div>
236
+ <p class="text-gray-600 mb-4">
237
+ Full functional testing and validation services to ensure system performance meets design intent and regulatory requirements.
238
+ </p>
239
+ <ul class="space-y-2 mb-6">
240
+ <li class="flex items-center text-gray-600">
241
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
242
+ <span>Factory acceptance testing</span>
243
+ </li>
244
+ <li class="flex items-center text-gray-600">
245
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
246
+ <span>IQ/OQ/PQ documentation</span>
247
+ </li>
248
+ <li class="flex items-center text-gray-600">
249
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
250
+ <span>Performance verification</span>
251
+ </li>
252
+ <li class="flex items-center text-gray-600">
253
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
254
+ <span>Regulatory compliance testing</span>
255
+ </li>
256
+ </ul>
257
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
258
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
259
+ </a>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div id="telecom-systems" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
265
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
266
+ <div class="md:w-1/3">
267
+ <img src="http://static.photos/technology/640x360/15" alt="Telecom Systems" class="rounded-lg w-full">
268
+ </div>
269
+ <div class="md:w-2/3">
270
+ <div class="flex items-center mb-4">
271
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
272
+ <i data-feather="wifi" class="text-blue-600"></i>
273
+ </div>
274
+ <h2 class="text-2xl font-bold">Telecom Systems</h2>
275
+ </div>
276
+ <p class="text-gray-600 mb-4">
277
+ Structured cabling, data networks, and communication systems designed for mission-critical facilities with high availability requirements.
278
+ </p>
279
+ <ul class="space-y-2 mb-6">
280
+ <li class="flex items-center text-gray-600">
281
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
282
+ <span>Fiber optic backbone</span>
283
+ </li>
284
+ <li class="flex items-center text-gray-600">
285
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
286
+ <span>Redundant data pathways</span>
287
+ </li>
288
+ <li class="flex items-center text-gray-600">
289
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
290
+ <span>EMI shielded environments</span>
291
+ </li>
292
+ <li class="flex items-center text-gray-600">
293
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
294
+ <span>Building automation integration</span>
295
+ </li>
296
+ </ul>
297
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
298
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
299
+ </a>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div id="fire-protection" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
305
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
306
+ <div class="md:w-1/3">
307
+ <img src="http://static.photos/industry/640x360/16" alt="Fire Protection" class="rounded-lg w-full">
308
+ </div>
309
+ <div class="md:w-2/3">
310
+ <div class="flex items-center mb-4">
311
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
312
+ <i data-feather="shield" class="text-blue-600"></i>
313
+ </div>
314
+ <h2 class="text-2xl font-bold">Fire Protection</h2>
315
+ </div>
316
+ <p class="text-gray-600 mb-4">
317
+ Special hazard suppression systems, fire pumps, and sprinkler design for critical environments where water damage must be minimized.
318
+ </p>
319
+ <ul class="space-y-2 mb-6">
320
+ <li class="flex items-center text-gray-600">
321
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
322
+ <span>Clean agent systems</span>
323
+ </li>
324
+ <li class="flex items-center text-gray-600">
325
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
326
+ <span>FM-200 and Novec 1230</span>
327
+ </li>
328
+ <li class="flex items-center text-gray-600">
329
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
330
+ <span>Pre-action sprinkler systems</span>
331
+ </li>
332
+ <li class="flex items-center text-gray-600">
333
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
334
+ <span>Fire pump design</span>
335
+ </li>
336
+ </ul>
337
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
338
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
339
+ </a>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <div id="fire-alarm-systems" class="service-detail bg-white rounded-xl p-8 mb-12 border border-gray-100 transition duration-300">
345
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
346
+ <div class="md:w-1/3">
347
+ <img src="http://static.photos/industry/640x360/17" alt="Fire Alarm Systems" class="rounded-lg w-full">
348
+ </div>
349
+ <div class="md:w-2/3">
350
+ <div class="flex items-center mb-4">
351
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
352
+ <i data-feather="bell" class="text-blue-600"></i>
353
+ </div>
354
+ <h2 class="text-2xl font-bold">Fire Alarm Systems</h2>
355
+ </div>
356
+ <p class="text-gray-600 mb-4">
357
+ Code-compliant detection and notification systems with integration to building automation and emergency response protocols.
358
+ </p>
359
+ <ul class="space-y-2 mb-6">
360
+ <li class="flex items-center text-gray-600">
361
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
362
+ <span>Addressable fire alarm panels</span>
363
+ </li>
364
+ <li class="flex items-center text-gray-600">
365
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
366
+ <span>Aspiration smoke detection</span>
367
+ </li>
368
+ <li class="flex items-center text-gray-600">
369
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
370
+ <span>Mass notification systems</span>
371
+ </li>
372
+ <li class="flex items-center text-gray-600">
373
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
374
+ <span>Integration with suppression systems</span>
375
+ </li>
376
+ </ul>
377
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
378
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
379
+ </a>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <div id="data-center" class="service-detail bg-white rounded-xl p-8 border border-gray-100 transition duration-300">
385
+ <div class="flex flex-col md:flex-row md:items-center gap-8">
386
+ <div class="md:w-1/3">
387
+ <img src="http://static.photos/technology/640x360/18" alt="Data Center Design" class="rounded-lg w-full">
388
+ </div>
389
+ <div class="md:w-2/3">
390
+ <div class="flex items-center mb-4">
391
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
392
+ <i data-feather="server" class="text-blue-600"></i>
393
+ </div>
394
+ <h2 class="text-2xl font-bold">Data Center Design</h2>
395
+ </div>
396
+ <p class="text-gray-600 mb-4">
397
+ Tier III/IV certified facilities with precision cooling, power redundancy, and security systems designed for 99.995% uptime.
398
+ </p>
399
+ <ul class="space-y-2 mb-6">
400
+ <li class="flex items-center text-gray-600">
401
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
402
+ <span>Hot aisle/cold aisle containment</span>
403
+ </li>
404
+ <li class="flex items-center text-gray-600">
405
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
406
+ <span>2N redundant power distribution</span>
407
+ </li>
408
+ <li class="flex items-center text-gray-600">
409
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
410
+ <span>CRAC/CRAH units with free cooling</span>
411
+ </li>
412
+ <li class="flex items-center text-gray-600">
413
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
414
+ <span>Fire suppression and monitoring</span>
415
+ </li>
416
+ </ul>
417
+ <a href="projects.html" class="text-blue-600 font-medium flex items-center">
418
+ View related projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
419
+ </a>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <!-- CTA Section -->
427
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-blue-600 text-white">
428
+ <div class="max-w-7xl mx-auto text-center">
429
+ <h2 class="text-3xl font-bold mb-6">Need Specialized MEP Solutions?</h2>
430
+ <p class="text-blue-100 max-w-2xl mx-auto mb-8">
431
+ Our team of experts is ready to discuss your project requirements and deliver engineered solutions that meet the most stringent industry standards.
432
+ </p>
433
+ <button class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-md font-medium transition">
434
+ Get in Touch
435
+ </button>
436
+ </div>
437
+ </section>
438
+
439
+ <!-- Footer -->
440
+ <footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
441
+ <div class="max-w-7xl mx-auto">
442
+ <div class="grid md:grid-cols-4 gap-12">
443
+ <div>
444
+ <div class="flex items-center mb-6">
445
+ <img src="https://huggingface.co/spaces/mtourville/pureflow-mep-masters/resolve/main/images/Essential%20Logo.jpg" alt="Essential Engineering Logo" class="h-14 w-auto">
446
+ <span class="ml-3 text-xl font-bold">Essential Engineering</span>
447
+ </div>
448
+ <p class="text-gray-400 mb-6">
449
+ Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
450
+ </p>
451
+ <div class="flex space-x-4">
452
+ <a href="#" class="text-gray-400 hover:text-white">
453
+ <i data-feather="linkedin"></i>
454
+ </a>
455
+ <a href="#" class="text-gray-400 hover:text-white">
456
+ <i data-feather="twitter"></i>
457
+ </a>
458
+ <a href="#" class="text-gray-400 hover:text-white">
459
+ <i data-feather="facebook"></i>
460
+ </a>
461
+ </div>
462
+ </div>
463
+
464
+ <div>
465
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
466
+ <ul class="space-y-3">
467
+ <li><a href="services.html#cleanroom-design" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
468
+ <li><a href="services.html#hvac-systems" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
469
+ <li><a href="services.html#process-piping" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
470
+ <li><a href="services.html#electrical-systems" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
471
+ </ul>
472
+ </div>
473
+
474
+ <div>
475
+ <h4 class="text-lg font-semibold mb-6">Projects</h4>
476
+ <ul class="space-y-3">
477
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">All Projects</a></li>
478
+ <li><a href="biotech-cleanroom-facility.html" class="text-gray-400 hover:text-white transition">Biotech Cleanrooms</a></li>
479
+ <li><a href="semiconductor-fab-expansion.html" class="text-gray-400 hover:text-white transition">Semiconductor Fabs</a></li>
480
+ <li><a href="bsl-3-research-lab.html" class="text-gray-400 hover:text-white transition">Life Sciences (BSL Labs)</a></li>
481
+ </ul>
482
+ </div>
483
+
484
+ <div>
485
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
486
+ <address class="not-italic text-gray-400">
487
+ <p class="mb-3">123 Engineering Drive</p>
488
+ <p class="mb-3">Tech Park, CA 90210</p>
489
+ <p class="mb-3">Phone: (555) 123-4567</p>
490
+ <p>Email: info@essentialeng.com</p>
491
+ </address>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
496
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
497
+ © 2023 Essential Engineering Company. All rights reserved.
498
+ </p>
499
+ <div class="flex space-x-6">
500
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
501
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </footer>
506
+
507
+ <script>
508
+ feather.replace();
509
+ VANTA.WAVES({
510
+ el: "#vanta-bg",
511
+ mouseControls: true,
512
+ touchControls: true,
513
+ gyroControls: false,
514
+ minHeight: 200.00,
515
+ minWidth: 200.00,
516
+ scale: 1.00,
517
+ scaleMobile: 1.00,
518
+ color: 0x3b82f6,
519
+ shininess: 35.00,
520
+ waveHeight: 15.00,
521
+ waveSpeed: 0.60,
522
+ zoom: 0.75
523
+ });
524
+ </script>
525
+ </body>
526
+ </html>