Hugging Face's logo

Spaces:
essential-eng
/
test
Running

App Files Community
mtourville commited on
Commit
60b8a2d
·
verified ·
1 Parent(s): cb39955

create a page for each of the featured projects

Browse files
Files changed (5) hide show
  1. biotech-cleanroom-facility.html +298 -0
  2. bsl-3-research-lab.html +326 -0
  3. index.html +2 -1
  4. projects.html +8 -11
  5. semiconductor-fab-expansion.html +327 -0
biotech-cleanroom-facility.html ADDED
@@ -0,0 +1,298 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Biotech Cleanroom Facility | 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
+ <style>
12
+ .project-image {
13
+ transition: transform 0.3s ease;
14
+ }
15
+ .project-image:hover {
16
+ transform: scale(1.02);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="font-sans antialiased text-gray-800 bg-gray-50">
21
+ <!-- Navigation -->
22
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm fixed w-full z-50">
23
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24
+ <div class="flex justify-between h-20 items-center">
25
+ <div class="flex-shrink-0 flex items-center">
26
+ <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">
27
+ </div>
28
+ <div class="hidden md:block">
29
+ <div class="ml-10 flex items-center space-x-8">
30
+ <a href="index.html" class="text-gray-600 hover:text-blue-600 transition">Home</a>
31
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">Services</a>
32
+ <a href="projects.html" class="text-gray-600 hover:text-blue-600 transition">Projects</a>
33
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
34
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
35
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
36
+ </div>
37
+ </div>
38
+ <div class="md:hidden">
39
+ <button class="text-gray-600">
40
+ <i data-feather="menu"></i>
41
+ </button>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- Project Header -->
48
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 bg-white">
49
+ <div class="max-w-7xl mx-auto">
50
+ <div class="text-center">
51
+ <span class="text-blue-600 font-medium">PHARMACEUTICAL FACILITY</span>
52
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
53
+ Biotech Cleanroom Facility
54
+ </h1>
55
+ <div class="flex justify-center items-center space-x-4 text-gray-600">
56
+ <div class="flex items-center">
57
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
58
+ <span>Boston, MA</span>
59
+ </div>
60
+ <div class="flex items-center">
61
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
62
+ <span>Completed 2022</span>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Project Gallery -->
70
+ <section class="py-12 px-4 sm:px-6 lg:px-8 bg-white">
71
+ <div class="max-w-7xl mx-auto">
72
+ <div class="grid md:grid-cols-2 gap-8">
73
+ <div class="project-image">
74
+ <img src="http://static.photos/medical/1024x576/1" alt="Cleanroom interior" class="rounded-lg shadow-md w-full h-auto">
75
+ </div>
76
+ <div class="project-image">
77
+ <img src="http://static.photos/medical/1024x576/2" alt="HVAC system" class="rounded-lg shadow-md w-full h-auto">
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </section>
82
+
83
+ <!-- Project Details -->
84
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
85
+ <div class="max-w-7xl mx-auto">
86
+ <div class="grid md:grid-cols-3 gap-12">
87
+ <div class="md:col-span-2">
88
+ <h2 class="text-2xl font-bold mb-6">Project Overview</h2>
89
+ <p class="text-gray-600 mb-6">
90
+ Essential Engineering designed and commissioned this state-of-the-art 60,000 square foot pharmaceutical cleanroom facility for a leading biotech company specializing in biologics manufacturing. The project involved creating Grade B and C cleanroom environments compliant with FDA cGMP requirements.
91
+ </p>
92
+
93
+ <h3 class="text-xl font-bold mt-8 mb-4">Key Features</h3>
94
+ <ul class="space-y-3 text-gray-600">
95
+ <li class="flex items-start">
96
+ <i data-feather="check-circle" class="text-blue-600 mr-2 mt-1 flex-shrink-0"></i>
97
+ <span>ISO Class 5 (Grade B) and ISO Class 7 (Grade C) cleanrooms with cascading pressure regimes</span>
98
+ </li>
99
+ <li class="flex items-start">
100
+ <i data-feather="check-circle" class="text-blue-600 mr-2 mt-1 flex-shrink-0"></i>
101
+ <span>Redundant HVAC systems with 24/7 monitoring for temperature, humidity, and pressure differentials</span>
102
+ </li>
103
+ <li class="flex items-start">
104
+ <i data-feather="check-circle" class="text-blue-600 mr-2 mt-1 flex-shrink-0"></i>
105
+ <span>Fully validated systems with comprehensive IQ/OQ/PQ documentation</span>
106
+ </li>
107
+ <li class="flex items-start">
108
+ <i data-feather="check-circle" class="text-blue-600 mr-2 mt-1 flex-shrink-0"></i>
109
+ <span>Specialized process chilled water systems for bioreactors and purification equipment</span>
110
+ </li>
111
+ <li class="flex items-start">
112
+ <i data-feather="check-circle" class="text-blue-600 mr-2 mt-1 flex-shrink-0"></i>
113
+ <span>Clean steam generator and distribution system for sterilization processes</span>
114
+ </li>
115
+ </ul>
116
+
117
+ <h3 class="text-xl font-bold mt-8 mb-4">Challenges & Solutions</h3>
118
+ <p class="text-gray-600 mb-4">
119
+ The facility required maintaining tight environmental controls (±0.5°C temperature and ±3% RH) while accommodating large heat loads from process equipment.
120
+ </p>
121
+ <p class="text-gray-600">
122
+ Our solution incorporated precision air handling units with proportional-integral-derivative (PID) control algorithms and rapid response cooling coils to maintain stability during equipment heat load fluctuations.
123
+ </p>
124
+ </div>
125
+
126
+ <div>
127
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 sticky top-8">
128
+ <h3 class="text-lg font-bold mb-4">Project Details</h3>
129
+ <div class="space-y-4">
130
+ <div>
131
+ <h4 class="text-sm font-medium text-gray-500">Client</h4>
132
+ <p class="font-medium">Leading Biotech Company</p>
133
+ </div>
134
+ <div>
135
+ <h4 class="text-sm font-medium text-gray-500">Size</h4>
136
+ <p class="font-medium">60,000 sq ft</p>
137
+ </div>
138
+ <div>
139
+ <h4 class="text-sm font-medium text-gray-500">Completion</h4>
140
+ <p class="font-medium">June 2022</p>
141
+ </div>
142
+ <div>
143
+ <h4 class="text-sm font-medium text-gray-500">Services</h4>
144
+ <ul class="space-y-1">
145
+ <li class="flex items-center">
146
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
147
+ <span>Cleanroom Design</span>
148
+ </li>
149
+ <li class="flex items-center">
150
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
151
+ <span>HVAC Validation</span>
152
+ </li>
153
+ <li class="flex items-center">
154
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
155
+ <span>Process Piping</span>
156
+ </li>
157
+ <li class="flex items-center">
158
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
159
+ <span>Building Automation</span>
160
+ </li>
161
+ </ul>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Technical Specifications -->
171
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
172
+ <div class="max-w-7xl mx-auto">
173
+ <h2 class="text-2xl font-bold mb-8">Technical Specifications</h2>
174
+ <div class="grid md:grid-cols-2 gap-8">
175
+ <div>
176
+ <h3 class="text-lg font-bold mb-4 text-blue-600">HVAC Systems</h3>
177
+ <ul class="space-y-2 text-gray-600">
178
+ <li>15 Air Handling Units (100% redundancy)</li>
179
+ <li>HEPA filtration (99.99% @ 0.3μm)</li>
180
+ <li>Temperature control: ±0.5°C</li>
181
+ <li>Humidity control: ±3% RH</li>
182
+ <li>Air changes: 40-60 per hour (Grade B)</li>
183
+ </ul>
184
+ </div>
185
+ <div>
186
+ <h3 class="text-lg font-bold mb-4 text-blue-600">Utilities</h3>
187
+ <ul class="space-y-2 text-gray-600">
188
+ <li>Clean steam generator (5000 lb/hr)</li>
189
+ <li>WFI (Water for Injection) distribution</li>
190
+ <li>Process chilled water (4°C supply)</li>
191
+ <li>Nitrogen and CO2 distribution</li>
192
+ <li>Emergency power (N+1 configuration)</li>
193
+ </ul>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Testimonial -->
200
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-blue-600 text-white">
201
+ <div class="max-w-4xl mx-auto text-center">
202
+ <i data-feather="quote" class="w-12 h-12 mx-auto text-blue-300 mb-6"></i>
203
+ <p class="text-xl mb-6">
204
+ "Essential Engineering delivered a facility that exceeded our expectations. Their attention to detail in cleanroom design and validation was instrumental in our successful FDA inspection."
205
+ </p>
206
+ <div class="font-medium">
207
+ <p>John Smith</p>
208
+ <p class="text-blue-200">Director of Facilities, Client Company</p>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- CTA -->
214
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
215
+ <div class="max-w-7xl mx-auto text-center">
216
+ <h2 class="text-2xl font-bold mb-6">Ready to Discuss Your Project?</h2>
217
+ <p class="text-gray-600 max-w-2xl mx-auto mb-8">
218
+ Our team of cleanroom experts is ready to help design your next critical environment facility.
219
+ </p>
220
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium inline-block transition">
221
+ Contact Our Team
222
+ </a>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Footer -->
227
+ <footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
228
+ <div class="max-w-7xl mx-auto">
229
+ <div class="grid md:grid-cols-4 gap-12">
230
+ <div>
231
+ <div class="flex items-center mb-6">
232
+ <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">
233
+ <span class="ml-3 text-xl font-bold">Essential Engineering</span>
234
+ </div>
235
+ <p class="text-gray-400 mb-6">
236
+ Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
237
+ </p>
238
+ <div class="flex space-x-4">
239
+ <a href="#" class="text-gray-400 hover:text-white">
240
+ <i data-feather="linkedin"></i>
241
+ </a>
242
+ <a href="#" class="text-gray-400 hover:text-white">
243
+ <i data-feather="twitter"></i>
244
+ </a>
245
+ <a href="#" class="text-gray-400 hover:text-white">
246
+ <i data-feather="facebook"></i>
247
+ </a>
248
+ </div>
249
+ </div>
250
+
251
+ <div>
252
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
253
+ <ul class="space-y-3">
254
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
255
+ <li><a href="#" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
256
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
257
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
258
+ </ul>
259
+ </div>
260
+
261
+ <div>
262
+ <h4 class="text-lg font-semibold mb-6">Projects</h4>
263
+ <ul class="space-y-3">
264
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">All Projects</a></li>
265
+ <li><a href="biotech-cleanroom-facility.html" class="text-gray-400 hover:text-white transition">Biotech Cleanroom</a></li>
266
+ <li><a href="semiconductor-fab-expansion.html" class="text-gray-400 hover:text-white transition">Semiconductor Fab</a></li>
267
+ <li><a href="bsl-3-research-lab.html" class="text-gray-400 hover:text-white transition">BSL-3 Laboratory</a></li>
268
+ </ul>
269
+ </div>
270
+
271
+ <div>
272
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
273
+ <address class="not-italic text-gray-400">
274
+ <p class="mb-3">123 Engineering Drive</p>
275
+ <p class="mb-3">Tech Park, CA 90210</p>
276
+ <p class="mb-3">Phone: (555) 123-4567</p>
277
+ <p>Email: info@essentialeng.com</p>
278
+ </address>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
283
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
284
+ © 2023 Essential Engineering Company. All rights reserved.
285
+ </p>
286
+ <div class="flex space-x-6">
287
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
288
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </footer>
293
+
294
+ <script>
295
+ feather.replace();
296
+ </script>
297
+ </body>
298
+ </html>
bsl-3-research-lab.html ADDED
@@ -0,0 +1,326 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BSL-3 Research Laboratory | 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
+ <style>
12
+ .feature-card {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .feature-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="font-sans antialiased text-gray-800 bg-gray-50">
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="#" class="text-gray-600 hover:text-blue-600 transition">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
+ <!-- Project Header -->
49
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 bg-white">
50
+ <div class="max-w-7xl mx-auto">
51
+ <div class="text-center">
52
+ <span class="text-blue-600 font-medium">BIOSAFETY LABORATORY</span>
53
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
54
+ BSL-3 Research Laboratory
55
+ </h1>
56
+ <div class="flex justify-center items-center space-x-4 text-gray-600">
57
+ <div class="flex items-center">
58
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
59
+ <span>Research Triangle, NC</span>
60
+ </div>
61
+ <div class="flex items-center">
62
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
63
+ <span>Completed 2020</span>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <!-- Safety Features -->
71
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-blue-50">
72
+ <div class="max-w-7xl mx-auto">
73
+ <h2 class="text-2xl font-bold mb-8 text-center">Containment Features</h2>
74
+ <div class="grid md:grid-cols-3 gap-8">
75
+ <div class="feature-card bg-white p-8 rounded-xl border border-gray-100">
76
+ <div class="text-blue-600 mb-4">
77
+ <i data-feather="shield" class="w-8 h-8"></i>
78
+ </div>
79
+ <h3 class="text-lg font-bold mb-3">Airflow Control</h3>
80
+ <p class="text-gray-600">
81
+ Directional airflow with minimum 12.5 Pa negative pressure differential and redundant exhaust fans with HEPA filtration.
82
+ </p>
83
+ </div>
84
+ <div class="feature-card bg-white p-8 rounded-xl border border-gray-100">
85
+ <div class="text-blue-600 mb-4">
86
+ <i data-feather="lock" class="w-8 h-8"></i>
87
+ </div>
88
+ <h3 class="text-lg font-bold mb-3">Access Control</h3>
89
+ <p class="text-gray-600">
90
+ Biometric access with airlock entry, clothing change areas, and shower-out facilities compliant with NIH/CDC requirements.
91
+ </p>
92
+ </div>
93
+ <div class="feature-card bg-white p-8 rounded-xl border border-gray-100">
94
+ <div class="text-blue-600 mb-4">
95
+ <i data-feather="wind" class="w-8 h-8"></i>
96
+ </div>
97
+ <h3 class="text-lg font-bold mb-3">Decontamination</h3>
98
+ <p class="text-gray-600">
99
+ Liquid effluent decontamination system and gaseous decontamination capability for entire lab spaces.
100
+ </p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <!-- Project Gallery -->
107
+ <section class="py-12 px-4 sm:px-6 lg:px-8 bg-white">
108
+ <div class="max-w-7xl mx-auto">
109
+ <div class="grid md:grid-cols-3 gap-6">
110
+ <div>
111
+ <img src="http://static.photos/science/1024x576/10" alt="Lab interior" class="rounded-lg shadow-md w-full h-auto mb-6">
112
+ <img src="http://static.photos/science/1024x576/11" alt="Control panel" class="rounded-lg shadow-md w-full h-auto">
113
+ </div>
114
+ <div class="md:col-span-2">
115
+ <img src="http://static.photos/science/1024x576/12" alt="HVAC system" class="rounded-lg shadow-md w-full h-auto">
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Project Details -->
122
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
123
+ <div class="max-w-7xl mx-auto">
124
+ <div class="grid md:grid-cols-3 gap-12">
125
+ <div class="md:col-span-2">
126
+ <h2 class="text-2xl font-bold mb-6">Project Overview</h2>
127
+ <p class="text-gray-600 mb-6">
128
+ Essential Engineering designed this 25,000 square foot Biosafety Level 3 (BSL-3) research laboratory for a government research institute working with hazardous airborne pathogens. The facility includes ABSL-3 animal holding areas and is designed to CDC/NIH BMBL 5th Edition standards.
129
+ </p>
130
+
131
+ <h3 class="text-xl font-bold mt-8 mb-4">Design Highlights</h3>
132
+ <div class="space-y-6">
133
+ <div>
134
+ <h4 class="font-bold mb-2">Containment Systems</h4>
135
+ <p class="text-gray-600">
136
+ Redundant exhaust fans with bag-in/bag-out HEPA filtration (99.99% on 0.3μm particles), redundant supply fans, and emergency power backup to maintain negative pressure during utility outages.
137
+ </p>
138
+ </div>
139
+ <div>
140
+ <h4 class="font-bold mb-2">Material Flow</h4>
141
+ <p class="text-gray-600">
142
+ Dual-door autoclaves and dunk tanks for material transfer, with integrated interlocks to prevent simultaneous door opening. Separate clean and dirty corridors with pass-through chambers.
143
+ </p>
144
+ </div>
145
+ <div>
146
+ <h4 class="font-bold mb-2">Emergency Systems</h4>
147
+ <p class="text-gray-600">
148
+ Audible and visual alarms for pressure differential loss, emergency shower/eyewash stations with drain sumps, and emergency power systems to maintain critical functions during outages.
149
+ </p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div>
155
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 sticky top-8">
156
+ <h3 class="text-lg font-bold mb-4">Project Details</h3>
157
+ <div class="space-y-4">
158
+ <div>
159
+ <h4 class="text-sm font-medium text-gray-500">Client</h4>
160
+ <p class="font-medium">Government Research Institute</p>
161
+ </div>
162
+ <div>
163
+ <h4 class="text-sm font-medium text-gray-500">Size</h4>
164
+ <p class="font-medium">25,000 sq ft</p>
165
+ </div>
166
+ <div>
167
+ <h4 class="text-sm font-medium text-gray-500">Completion</h4>
168
+ <p class="font-medium">August 2020</p>
169
+ </div>
170
+ <div>
171
+ <h4 class="text-sm font-medium text-gray-500">Services</h4>
172
+ <ul class="space-y-1">
173
+ <li class="flex items-center">
174
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
175
+ <span>BSL-3 Design</span>
176
+ </li>
177
+ <li class="flex items-center">
178
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
179
+ <span>Containment HVAC</span>
180
+ </li>
181
+ <li class="flex items-center">
182
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
183
+ <span>Effluent Treatment</span>
184
+ </li>
185
+ <li class="flex items-center">
186
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
187
+ <span>Security Systems</span>
188
+ </li>
189
+ </ul>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Technical Specifications -->
199
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
200
+ <div class="max-w-7xl mx-auto">
201
+ <h2 class="text-2xl font-bold mb-8">Technical Specifications</h2>
202
+ <div class="grid md:grid-cols-2 gap-8">
203
+ <div>
204
+ <h3 class="text-lg font-bold mb-4 text-blue-600">HVAC Systems</h3>
205
+ <ul class="space-y-3 text-gray-600">
206
+ <li>100% exhaust with no recirculation</li>
207
+ <li>Dual HEPA filtration (exhaust and supply)</li>
208
+ <li>Pressure differential: ≥12.5 Pa negative</li>
209
+ <li>Air changes: 10-12 ACH minimum</li>
210
+ <li>Redundant exhaust fans (N+1)</li>
211
+ </ul>
212
+ </div>
213
+ <div>
214
+ <h3 class="text-lg font-bold mb-4 text-blue-600">Safety Systems</h3>
215
+ <ul class="space-y-3 text-gray-600">
216
+ <li>Liquid effluent treatment (heat/chemical)</li>
217
+ <li>Gaseous decontamination (VHP) system</li>
218
+ <li>Emergency power (N+1 generators)</li>
219
+ <li>Containment alarms (pressure, airflow)</li>
220
+ <li>Pass-through autoclaves (double-door)</li>
221
+ </ul>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Testimonial -->
228
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-blue-600 text-white">
229
+ <div class="max-w-4xl mx-auto text-center">
230
+ <i data-feather="quote" class="w-12 h-12 mx-auto text-blue-300 mb-6"></i>
231
+ <p class="text-xl mb-6">
232
+ "Essential Engineering's understanding of BSL-3 requirements and attention to detail resulted in a facility that passed CDC inspection with zero findings - a first for our institution."
233
+ </p>
234
+ <div class="font-medium">
235
+ <p>Dr. Michael Rodriguez</p>
236
+ <p class="text-blue-200">Facility Director, Client Institution</p>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- CTA -->
242
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
243
+ <div class="max-w-7xl mx-auto text-center">
244
+ <h2 class="text-2xl font-bold mb-6">Planning a High-Containment Facility?</h2>
245
+ <p class="text-gray-600 max-w-2xl mx-auto mb-8">
246
+ Our team has extensive experience designing laboratories that meet the most stringent biosafety requirements.
247
+ </p>
248
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium inline-block transition">
249
+ Contact Our Team
250
+ </a>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Footer -->
255
+ <footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
256
+ <div class="max-w-7xl mx-auto">
257
+ <div class="grid md:grid-cols-4 gap-12">
258
+ <div>
259
+ <div class="flex items-center mb-6">
260
+ <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">
261
+ <span class="ml-3 text-xl font-bold">Essential Engineering</span>
262
+ </div>
263
+ <p class="text-gray-400 mb-6">
264
+ Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
265
+ </p>
266
+ <div class="flex space-x-4">
267
+ <a href="#" class="text-gray-400 hover:text-white">
268
+ <i data-feather="linkedin"></i>
269
+ </a>
270
+ <a href="#" class="text-gray-400 hover:text-white">
271
+ <i data-feather="twitter"></i>
272
+ </a>
273
+ <a href="#" class="text-gray-400 hover:text-white">
274
+ <i data-feather="facebook"></i>
275
+ </a>
276
+ </div>
277
+ </div>
278
+
279
+ <div>
280
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
281
+ <ul class="space-y-3">
282
+ <li><a href="#" class="text-gray-400 hover:text-white transition">BSL-3/4 Design</a></li>
283
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Containment HVAC</a></li>
284
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Effluent Treatment</a></li>
285
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Security Systems</a></li>
286
+ </ul>
287
+ </div>
288
+
289
+ <div>
290
+ <h4 class="text-lg font-semibold mb-6">Projects</h4>
291
+ <ul class="space-y-3">
292
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">All Projects</a></li>
293
+ <li><a href="biotech-cleanroom-facility.html" class="text-gray-400 hover:text-white transition">Biotech Cleanroom</a></li>
294
+ <li><a href="semiconductor-fab-expansion.html" class="text-gray-400 hover:text-white transition">Semiconductor Fab</a></li>
295
+ <li><a href="bsl-3-research-lab.html" class="text-blue-400 hover:text-blue-300 transition">BSL-3 Laboratory</a></li>
296
+ </ul>
297
+ </div>
298
+
299
+ <div>
300
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
301
+ <address class="not-italic text-gray-400">
302
+ <p class="mb-3">123 Engineering Drive</p>
303
+ <p class="mb-3">Tech Park, CA 90210</p>
304
+ <p class="mb-3">Phone: (555) 123-4567</p>
305
+ <p>Email: info@essentialeng.com</p>
306
+ </address>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
311
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
312
+ © 2023 Essential Engineering Company. All rights reserved.
313
+ </p>
314
+ <div class="flex space-x-6">
315
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
316
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </footer>
321
+
322
+ <script>
323
+ feather.replace();
324
+ </script>
325
+ </body>
326
+ </html>
index.html CHANGED
@@ -38,7 +38,8 @@
38
  <a href="#" class="text-blue-600 font-medium">Home</a>
39
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Services</a>
40
  <a href="projects.html" class="text-gray-600 hover:text-blue-600 transition">Projects</a>
41
- <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
 
42
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
43
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
44
  </div>
 
38
  <a href="#" class="text-blue-600 font-medium">Home</a>
39
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Services</a>
40
  <a href="projects.html" class="text-gray-600 hover:text-blue-600 transition">Projects</a>
41
+ <a href="biotech-cleanroom-facility.html" class="text-gray-600 hover:text-blue-600 transition">Featured</a>
42
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
43
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
44
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
45
  </div>
projects.html CHANGED
@@ -65,23 +65,22 @@
65
  <div class="max-w-7xl mx-auto">
66
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
67
  <!-- Project 1 -->
68
- <div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300">
69
  <img src="http://static.photos/medical/640x360/1" alt="Pharmaceutical Facility" class="w-full h-48 object-cover">
70
  <div class="p-6">
71
  <span class="text-blue-600 text-sm font-medium">Pharmaceutical</span>
72
  <h3 class="text-xl font-bold mt-2 mb-3">Biotech Cleanroom Facility</h3>
73
  <p class="text-gray-600 mb-4">
74
  New 60,000 square foot Grade B & C Pharmaceutical Cleanroom Facility with full HVAC validation and monitoring systems for a leading biotech company.
75
- </p>
76
  <div class="flex items-center text-sm text-gray-500">
77
  <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
78
  <span>Boston, MA</span>
79
  </div>
80
  </div>
81
- </div>
82
-
83
  <!-- Project 2 -->
84
- <div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300">
85
  <img src="http://static.photos/technology/640x360/2" alt="Semiconductor Facility" class="w-full h-48 object-cover">
86
  <div class="p-6">
87
  <span class="text-blue-600 text-sm font-medium">Microelectronics</span>
@@ -94,10 +93,9 @@
94
  <span>Austin, TX</span>
95
  </div>
96
  </div>
97
- </div>
98
-
99
  <!-- Project 3 -->
100
- <div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300">
101
  <img src="http://static.photos/science/640x360/3" alt="Research Lab" class="w-full h-48 object-cover">
102
  <div class="p-6">
103
  <span class="text-blue-600 text-sm font-medium">Life Sciences</span>
@@ -110,9 +108,8 @@
110
  <span>Research Triangle, NC</span>
111
  </div>
112
  </div>
113
- </div>
114
-
115
- <!-- Project 4 -->
116
  <div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300">
117
  <img src="http://static.photos/technology/640x360/4" alt="Data Center" class="w-full h-48 object-cover">
118
  <div class="p-6">
 
65
  <div class="max-w-7xl mx-auto">
66
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
67
  <!-- Project 1 -->
68
+ <a href="biotech-cleanroom-facility.html" class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300 block">
69
  <img src="http://static.photos/medical/640x360/1" alt="Pharmaceutical Facility" class="w-full h-48 object-cover">
70
  <div class="p-6">
71
  <span class="text-blue-600 text-sm font-medium">Pharmaceutical</span>
72
  <h3 class="text-xl font-bold mt-2 mb-3">Biotech Cleanroom Facility</h3>
73
  <p class="text-gray-600 mb-4">
74
  New 60,000 square foot Grade B & C Pharmaceutical Cleanroom Facility with full HVAC validation and monitoring systems for a leading biotech company.
75
+ </p>
76
  <div class="flex items-center text-sm text-gray-500">
77
  <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
78
  <span>Boston, MA</span>
79
  </div>
80
  </div>
81
+ </a>
 
82
  <!-- Project 2 -->
83
+ <a href="semiconductor-fab-expansion.html" class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300 block">
84
  <img src="http://static.photos/technology/640x360/2" alt="Semiconductor Facility" class="w-full h-48 object-cover">
85
  <div class="p-6">
86
  <span class="text-blue-600 text-sm font-medium">Microelectronics</span>
 
93
  <span>Austin, TX</span>
94
  </div>
95
  </div>
96
+ </a>
 
97
  <!-- Project 3 -->
98
+ <a href="bsl-3-research-lab.html" class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300 block">
99
  <img src="http://static.photos/science/640x360/3" alt="Research Lab" class="w-full h-48 object-cover">
100
  <div class="p-6">
101
  <span class="text-blue-600 text-sm font-medium">Life Sciences</span>
 
108
  <span>Research Triangle, NC</span>
109
  </div>
110
  </div>
111
+ </a>
112
+ <!-- Project 4 -->
 
113
  <div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100 transition duration-300">
114
  <img src="http://static.photos/technology/640x360/4" alt="Data Center" class="w-full h-48 object-cover">
115
  <div class="p-6">
semiconductor-fab-expansion.html ADDED
@@ -0,0 +1,327 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Semiconductor Fab Expansion | 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
+ <style>
12
+ .tech-spec {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .tech-spec:hover {
16
+ transform: translateY(-3px);
17
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="font-sans antialiased text-gray-800 bg-gray-50">
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="#" class="text-gray-600 hover:text-blue-600 transition">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
+ <!-- Project Header -->
49
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 bg-white">
50
+ <div class="max-w-7xl mx-auto">
51
+ <div class="text-center">
52
+ <span class="text-blue-600 font-medium">MICROELECTRONICS FACILITY</span>
53
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
54
+ Semiconductor Fab Expansion
55
+ </h1>
56
+ <div class="flex justify-center items-center space-x-4 text-gray-600">
57
+ <div class="flex items-center">
58
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
59
+ <span>Austin, TX</span>
60
+ </div>
61
+ <div class="flex items-center">
62
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
63
+ <span>Completed 2021</span>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <!-- Project Highlights -->
71
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
72
+ <div class="max-w-7xl mx-auto">
73
+ <div class="grid md:grid-cols-3 gap-8">
74
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
75
+ <div class="text-blue-600 mb-4">
76
+ <i data-feather="cpu" class="w-8 h-8"></i>
77
+ </div>
78
+ <h3 class="text-lg font-bold mb-2">Cleanroom Class</h3>
79
+ <p class="text-gray-600">ISO Class 3 (Class 1) for critical lithography areas</p>
80
+ </div>
81
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
82
+ <div class="text-blue-600 mb-4">
83
+ <i data-feather="shield" class="w-8 h-8"></i>
84
+ </div>
85
+ <h3 class="text-lg font-bold mb-2">Vibration Control</h3>
86
+ <p class="text-gray-600">VC-E criteria for advanced lithography tools</p>
87
+ </div>
88
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
89
+ <div class="text-blue-600 mb-4">
90
+ <i data-feather="activity" class="w-8 h-8"></i>
91
+ </div>
92
+ <h3 class="text-lg font-bold mb-2">EMI Shielding</h3>
93
+ <p class="text-gray-600">60 dB attenuation at 1 MHz for sensitive metrology</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Project Gallery -->
100
+ <section class="py-12 px-4 sm:px-6 lg:px-8 bg-white">
101
+ <div class="max-w-7xl mx-auto">
102
+ <div class="grid md:grid-cols-3 gap-6">
103
+ <div class="md:col-span-2">
104
+ <img src="http://static.photos/technology/1024x576/7" alt="Cleanroom interior" class="rounded-lg shadow-md w-full h-auto">
105
+ </div>
106
+ <div>
107
+ <img src="http://static.photos/technology/1024x576/8" alt="HVAC system" class="rounded-lg shadow-md w-full h-auto mb-6">
108
+ <img src="http://static.photos/technology/1024x576/9" alt="Control room" class="rounded-lg shadow-md w-full h-auto">
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Project Details -->
115
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
116
+ <div class="max-w-7xl mx-auto">
117
+ <div class="grid md:grid-cols-3 gap-12">
118
+ <div class="md:col-span-2">
119
+ <h2 class="text-2xl font-bold mb-6">Project Overview</h2>
120
+ <p class="text-gray-600 mb-6">
121
+ Essential Engineering provided MEP design for this 50,000 square foot expansion to an existing semiconductor fabrication facility, enabling production of advanced 5nm node chips. The project included ultra-clean environment spaces, specialized vibration isolation, and EMI shielding for critical process areas.
122
+ </p>
123
+
124
+ <h3 class="text-xl font-bold mt-8 mb-4">Design Challenges</h3>
125
+ <div class="space-y-6">
126
+ <div>
127
+ <h4 class="font-bold mb-2">Vibration Control</h4>
128
+ <p class="text-gray-600">
129
+ Achieving VC-E vibration criteria required floating slab foundations, isolated structural supports, and specialized HVAC duct isolation for EUV lithography tools sensitive to vibrations as small as 1μm/s.
130
+ </p>
131
+ </div>
132
+ <div>
133
+ <h4 class="font-bold mb-2">Environmental Stability</h4>
134
+ <p class="text-gray-600">
135
+ Maintaining ±0.1°C temperature stability in the lithography bay with 100% outside air systems required innovative heat recovery and precision cooling solutions.
136
+ </p>
137
+ </div>
138
+ <div>
139
+ <h4 class="font-bold mb-2">Contamination Control</h4>
140
+ <p class="text-gray-600">
141
+ AMC (Airborne Molecular Contamination) control systems with chemical filtration were implemented to maintain parts-per-trillion level cleanliness for copper interconnect processes.
142
+ </p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div>
148
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 sticky top-8">
149
+ <h3 class="text-lg font-bold mb-4">Project Details</h3>
150
+ <div class="space-y-4">
151
+ <div>
152
+ <h4 class="text-sm font-medium text-gray-500">Client</h4>
153
+ <p class="font-medium">Leading Semiconductor Manufacturer</p>
154
+ </div>
155
+ <div>
156
+ <h4 class="text-sm font-medium text-gray-500">Size</h4>
157
+ <p class="font-medium">50,000 sq ft expansion</p>
158
+ </div>
159
+ <div>
160
+ <h4 class="text-sm font-medium text-gray-500">Completion</h4>
161
+ <p class="font-medium">November 2021</p>
162
+ </div>
163
+ <div>
164
+ <h4 class="text-sm font-medium text-gray-500">Services</h4>
165
+ <ul class="space-y-1">
166
+ <li class="flex items-center">
167
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
168
+ <span>Cleanroom Design</span>
169
+ </li>
170
+ <li class="flex items-center">
171
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
172
+ <span>Vibration Analysis</span>
173
+ </li>
174
+ <li class="flex items-center">
175
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
176
+ <span>EMI Shielding</span>
177
+ </li>
178
+ <li class="flex items-center">
179
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-600"></i>
180
+ <span>Specialty Gas Systems</span>
181
+ </li>
182
+ </ul>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Technical Specifications -->
192
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
193
+ <div class="max-w-7xl mx-auto">
194
+ <h2 class="text-2xl font-bold mb-8">Technical Specifications</h2>
195
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
196
+ <div class="tech-spec bg-gray-50 p-6 rounded-lg border border-gray-200">
197
+ <h3 class="text-lg font-bold mb-3 text-blue-600">Cleanroom Parameters</h3>
198
+ <ul class="space-y-2 text-gray-600">
199
+ <li>ISO Class 3 (Class 1) in lithography</li>
200
+ <li>Temperature: 22°C ±0.1°C</li>
201
+ <li>Humidity: 45% ±1% RH</li>
202
+ <li>Air changes: 500+ per hour</li>
203
+ <li>Particle count: <1 @ 0.1μm/ft³</li>
204
+ </ul>
205
+ </div>
206
+ <div class="tech-spec bg-gray-50 p-6 rounded-lg border border-gray-200">
207
+ <h3 class="text-lg font-bold mb-3 text-blue-600">Vibration Criteria</h3>
208
+ <ul class="space-y-2 text-gray-600">
209
+ <li>VC-E: 1 μm/s (1-80Hz)</li>
210
+ <li>Floating slabs: 4ft thick</li>
211
+ <li>Air isolators: 80%+ efficiency</li>
212
+ <li>Vibration monitoring: Continuous</li>
213
+ </ul>
214
+ </div>
215
+ <div class="tech-spec bg-gray-50 p-6 rounded-lg border border-gray-200">
216
+ <h3 class="text-lg font-bold mb-3 text-blue-600">Utilities</h3>
217
+ <ul class="space-y-2 text-gray-600">
218
+ <li>UPW: 18.2 MΩ·cm purity</li>
219
+ <li>Process cooling water: ±0.05°C</li>
220
+ <li>Specialty gases: 99.9999% purity</li>
221
+ <li>Redundant power: Dual PDUs</li>
222
+ </ul>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <!-- Testimonial -->
229
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-blue-600 text-white">
230
+ <div class="max-w-4xl mx-auto text-center">
231
+ <i data-feather="quote" class="w-12 h-12 mx-auto text-blue-300 mb-6"></i>
232
+ <p class="text-xl mb-6">
233
+ "The environmental controls designed by Essential Engineering allowed us to achieve first-pass yield targets on our 5nm process that exceeded our most optimistic projections."
234
+ </p>
235
+ <div class="font-medium">
236
+ <p>Dr. Sarah Chen</p>
237
+ <p class="text-blue-200">VP of Fab Operations, Client Company</p>
238
+ </div>
239
+ </div>
240
+ </section>
241
+
242
+ <!-- CTA -->
243
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
244
+ <div class="max-w-7xl mx-auto text-center">
245
+ <h2 class="text-2xl font-bold mb-6">Need Precision Environmental Controls?</h2>
246
+ <p class="text-gray-600 max-w-2xl mx-auto mb-8">
247
+ Our team specializes in designing facilities for the most demanding microelectronics manufacturing processes.
248
+ </p>
249
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium inline-block transition">
250
+ Contact Our Team
251
+ </a>
252
+ </div>
253
+ </section>
254
+
255
+ <!-- Footer -->
256
+ <footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
257
+ <div class="max-w-7xl mx-auto">
258
+ <div class="grid md:grid-cols-4 gap-12">
259
+ <div>
260
+ <div class="flex items-center mb-6">
261
+ <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">
262
+ <span class="ml-3 text-xl font-bold">Essential Engineering</span>
263
+ </div>
264
+ <p class="text-gray-400 mb-6">
265
+ Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
266
+ </p>
267
+ <div class="flex space-x-4">
268
+ <a href="#" class="text-gray-400 hover:text-white">
269
+ <i data-feather="linkedin"></i>
270
+ </a>
271
+ <a href="#" class="text-gray-400 hover:text-white">
272
+ <i data-feather="twitter"></i>
273
+ </a>
274
+ <a href="#" class="text-gray-400 hover:text-white">
275
+ <i data-feather="facebook"></i>
276
+ </a>
277
+ </div>
278
+ </div>
279
+
280
+ <div>
281
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
282
+ <ul class="space-y-3">
283
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
284
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Vibration Control</a></li>
285
+ <li><a href="#" class="text-gray-400 hover:text-white transition">EMI Shielding</a></li>
286
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Process Utilities</a></li>
287
+ </ul>
288
+ </div>
289
+
290
+ <div>
291
+ <h4 class="text-lg font-semibold mb-6">Projects</h4>
292
+ <ul class="space-y-3">
293
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">All Projects</a></li>
294
+ <li><a href="biotech-cleanroom-facility.html" class="text-gray-400 hover:text-white transition">Biotech Cleanroom</a></li>
295
+ <li><a href="semiconductor-fab-expansion.html" class="text-blue-400 hover:text-blue-300 transition">Semiconductor Fab</a></li>
296
+ <li><a href="bsl-3-research-lab.html" class="text-gray-400 hover:text-white transition">BSL-3 Laboratory</a></li>
297
+ </ul>
298
+ </div>
299
+
300
+ <div>
301
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
302
+ <address class="not-italic text-gray-400">
303
+ <p class="mb-3">123 Engineering Drive</p>
304
+ <p class="mb-3">Tech Park, CA 90210</p>
305
+ <p class="mb-3">Phone: (555) 123-4567</p>
306
+ <p>Email: info@essentialeng.com</p>
307
+ </address>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
312
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
313
+ © 2023 Essential Engineering Company. All rights reserved.
314
+ </p>
315
+ <div class="flex space-x-6">
316
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
317
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </footer>
322
+
323
+ <script>
324
+ feather.replace();
325
+ </script>
326
+ </body>
327
+ </html>