Hugging Face's logo

Spaces:
essential-eng
/
test
Running

App Files Community
mtourville commited on
Commit
297dca5
·
verified ·
1 Parent(s): f7f26c9

go to about tab

Browse files
Files changed (3) hide show
  1. about.html +293 -0
  2. index.html +1 -1
  3. projects.html +2 -2
about.html ADDED
@@ -0,0 +1,293 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About Us | 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
+ .hexagon {
14
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
15
+ }
16
+ .team-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="font-sans antialiased text-gray-800">
23
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-1"></div>
24
+
25
+ <!-- Navigation -->
26
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm fixed w-full z-50">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-20 items-center">
29
+ <div class="flex-shrink-0 flex items-center">
30
+ <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 hovered-element">
31
+ </div>
32
+ <div class="hidden md:block">
33
+ <div class="ml-10 flex items-center space-x-8">
34
+ <a href="index.html" class="text-gray-600 hover:text-blue-600 transition">Home</a>
35
+ <a href="services.html" class="text-gray-600 hover:text-blue-600 transition">Services</a>
36
+ <a href="projects.html" class="text-gray-600 hover:text-blue-600 transition">Projects</a>
37
+ <a href="about.html" class="text-blue-600 font-medium">About</a>
38
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
39
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
40
+ </div>
41
+ </div>
42
+ <div class="md:hidden">
43
+ <button class="text-gray-600">
44
+ <i data-feather="menu"></i>
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- About Header -->
52
+ <section class="pt-32 pb-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-90">
53
+ <div class="max-w-7xl mx-auto text-center">
54
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
55
+ Engineering <span class="text-blue-600">Excellence</span> Since 1995
56
+ </h1>
57
+ <p class="text-lg text-gray-600 mb-8 max-w-3xl mx-auto">
58
+ Essential Engineering has been delivering specialized MEP solutions for critical environments for over 25 years, helping clients achieve operational excellence through innovative engineering.
59
+ </p>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Company Story -->
64
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
65
+ <div class="max-w-7xl mx-auto">
66
+ <div class="md:flex md:items-center md:space-x-12">
67
+ <div class="md:w-1/2 mb-12 md:mb-0">
68
+ <img src="http://static.photos/office/1024x576/1" alt="Our Office" class="rounded-xl shadow-xl w-full">
69
+ </div>
70
+ <div class="md:w-1/2">
71
+ <span class="text-blue-600 font-medium">OUR STORY</span>
72
+ <h2 class="text-3xl font-bold mt-2 mb-6">Building the Future of Critical Environments</h2>
73
+ <p class="text-gray-600 mb-4">
74
+ Founded in 1995, Essential Engineering began as a small team of MEP specialists with a passion for solving complex engineering challenges in high-tech manufacturing environments.
75
+ </p>
76
+ <p class="text-gray-600 mb-4">
77
+ Today, we've grown into a nationally recognized firm with expertise in pharmaceutical cleanrooms, microelectronic facilities, and advanced manufacturing environments.
78
+ </p>
79
+ <p class="text-gray-600">
80
+ Our mission is to deliver innovative, reliable MEP solutions that meet the most stringent industry standards while optimizing operational efficiency and sustainability.
81
+ </p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Core Values -->
88
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
89
+ <div class="max-w-7xl mx-auto">
90
+ <div class="text-center mb-16">
91
+ <span class="text-blue-600 font-medium">WHAT WE STAND FOR</span>
92
+ <h2 class="text-3xl font-bold mt-2 mb-4">Our Core Values</h2>
93
+ </div>
94
+
95
+ <div class="grid md:grid-cols-3 gap-8">
96
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-100">
97
+ <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6">
98
+ <i data-feather="award" class="text-blue-600"></i>
99
+ </div>
100
+ <h3 class="text-xl font-bold mb-3">Technical Excellence</h3>
101
+ <p class="text-gray-600">
102
+ We maintain the highest standards of engineering quality through continuous learning, innovation, and attention to detail.
103
+ </p>
104
+ </div>
105
+
106
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-100">
107
+ <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6">
108
+ <i data-feather="users" class="text-blue-600"></i>
109
+ </div>
110
+ <h3 class="text-xl font-bold mb-3">Client Focus</h3>
111
+ <p class="text-gray-600">
112
+ We build lasting partnerships by understanding our clients' unique needs and delivering tailored solutions that exceed expectations.
113
+ </p>
114
+ </div>
115
+
116
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-100">
117
+ <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6">
118
+ <i data-feather="shield" class="text-blue-600"></i>
119
+ </div>
120
+ <h3 class="text-xl font-bold mb-3">Integrity</h3>
121
+ <p class="text-gray-600">
122
+ We uphold the highest ethical standards, ensuring transparency, honesty, and accountability in all our work.
123
+ </p>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- Team Section -->
130
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
131
+ <div class="max-w-7xl mx-auto">
132
+ <div class="text-center mb-16">
133
+ <span class="text-blue-600 font-medium">MEET OUR TEAM</span>
134
+ <h2 class="text-3xl font-bold mt-2 mb-4">Leadership Team</h2>
135
+ <p class="text-gray-600 max-w-2xl mx-auto">
136
+ Our experienced leadership team brings decades of specialized MEP expertise to every project.
137
+ </p>
138
+ </div>
139
+
140
+ <div class="grid md:grid-cols-3 gap-8">
141
+ <div class="team-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 text-center">
142
+ <div class="hexagon w-32 h-32 mx-auto mb-6 overflow-hidden">
143
+ <img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="w-full h-full object-cover">
144
+ </div>
145
+ <h3 class="text-xl font-bold mb-1">Sarah Johnson</h3>
146
+ <p class="text-blue-600 font-medium mb-4">President & Founder</p>
147
+ <p class="text-gray-600">
148
+ 30+ years in pharmaceutical facility design. PE, LEED AP, ASHRAE Fellow.
149
+ </p>
150
+ </div>
151
+
152
+ <div class="team-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 text-center">
153
+ <div class="hexagon w-32 h-32 mx-auto mb-6 overflow-hidden">
154
+ <img src="http://static.photos/people/200x200/2" alt="Michael Chen" class="w-full h-full object-cover">
155
+ </div>
156
+ <h3 class="text-xl font-bold mb-1">Michael Chen</h3>
157
+ <p class="text-blue-600 font-medium mb-4">Principal Engineer</p>
158
+ <p class="text-gray-600">
159
+ Semiconductor facility specialist. 25 years experience in cleanroom design.
160
+ </p>
161
+ </div>
162
+
163
+ <div class="team-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 text-center">
164
+ <div class="hexagon w-32 h-32 mx-auto mb-6 overflow-hidden">
165
+ <img src="http://static.photos/people/200x200/3" alt="David Rodriguez" class="w-full h-full object-cover">
166
+ </div>
167
+ <h3 class="text-xl font-bold mb-1">David Rodriguez</h3>
168
+ <p class="text-blue-600 font-medium mb-4">Director of Engineering</p>
169
+ <p class="text-gray-600">
170
+ Life sciences expert with focus on BSL labs and containment facilities.
171
+ </p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Certifications -->
178
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
179
+ <div class="max-w-7xl mx-auto">
180
+ <div class="text-center mb-16">
181
+ <span class="text-blue-600 font-medium">QUALIFICATIONS</span>
182
+ <h2 class="text-3xl font-bold mt-2 mb-8">Certifications & Affiliations</h2>
183
+ <div class="flex flex-wrap justify-center gap-8 items-center">
184
+ <img src="http://static.photos/abstract/200x200/1" alt="ASHRAE" class="h-16 w-auto opacity-70 hover:opacity-100 transition">
185
+ <img src="http://static.photos/abstract/200x200/2" alt="ISPE" class="h-16 w-auto opacity-70 hover:opacity-100 transition">
186
+ <img src="http://static.photos/abstract/200x200/3" alt="USGBC" class="h-16 w-auto opacity-70 hover:opacity-100 transition">
187
+ <img src="http://static.photos/abstract/200x200/4" alt="ISO" class="h-16 w-auto opacity-70 hover:opacity-100 transition">
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- CTA Section -->
194
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-blue-600 text-white">
195
+ <div class="max-w-7xl mx-auto text-center">
196
+ <h2 class="text-3xl font-bold mb-6">Ready to Partner with Our Experts?</h2>
197
+ <p class="text-blue-100 max-w-2xl mx-auto mb-8">
198
+ Our team is ready to discuss your project requirements and deliver solutions that meet the most stringent industry standards.
199
+ </p>
200
+ <button class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-md font-medium transition">
201
+ Schedule Consultation
202
+ </button>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Footer -->
207
+ <footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
208
+ <div class="max-w-7xl mx-auto">
209
+ <div class="grid md:grid-cols-4 gap-12">
210
+ <div>
211
+ <div class="flex items-center mb-6">
212
+ <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">
213
+ <span class="ml-3 text-xl font-bold">Essential Engineering</span>
214
+ </div>
215
+ <p class="text-gray-400 mb-6">
216
+ Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
217
+ </p>
218
+ <div class="flex space-x-4">
219
+ <a href="#" class="text-gray-400 hover:text-white">
220
+ <i data-feather="linkedin"></i>
221
+ </a>
222
+ <a href="#" class="text-gray-400 hover:text-white">
223
+ <i data-feather="twitter"></i>
224
+ </a>
225
+ <a href="#" class="text-gray-400 hover:text-white">
226
+ <i data-feather="facebook"></i>
227
+ </a>
228
+ </div>
229
+ </div>
230
+
231
+ <div>
232
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
233
+ <ul class="space-y-3">
234
+ <li><a href="services.html#cleanroom-design" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
235
+ <li><a href="services.html#hvac-systems" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
236
+ <li><a href="services.html#process-piping" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
237
+ <li><a href="services.html#electrical-systems" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
238
+ </ul>
239
+ </div>
240
+
241
+ <div>
242
+ <h4 class="text-lg font-semibold mb-6">Company</h4>
243
+ <ul class="space-y-3">
244
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
245
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Leadership</a></li>
246
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
247
+ <li><a href="#" class="text-gray-400 hover:text-white transition">News</a></li>
248
+ </ul>
249
+ </div>
250
+
251
+ <div>
252
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
253
+ <address class="not-italic text-gray-400">
254
+ <p class="mb-3">123 Engineering Drive</p>
255
+ <p class="mb-3">Tech Park, CA 90210</p>
256
+ <p class="mb-3">Phone: (555) 123-4567</p>
257
+ <p>Email: info@essentialeng.com</p>
258
+ </address>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
263
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
264
+ © 2023 Essential Engineering Company. All rights reserved.
265
+ </p>
266
+ <div class="flex space-x-6">
267
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
268
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </footer>
273
+
274
+ <script>
275
+ feather.replace();
276
+ VANTA.WAVES({
277
+ el: "#vanta-bg",
278
+ mouseControls: true,
279
+ touchControls: true,
280
+ gyroControls: false,
281
+ minHeight: 200.00,
282
+ minWidth: 200.00,
283
+ scale: 1.00,
284
+ scaleMobile: 1.00,
285
+ color: 0x3b82f6,
286
+ shininess: 35.00,
287
+ waveHeight: 15.00,
288
+ waveSpeed: 0.60,
289
+ zoom: 0.75
290
+ });
291
+ </script>
292
+ </body>
293
+ </html>
index.html CHANGED
@@ -46,7 +46,7 @@
46
  <a href="bsl-3-research-lab.html" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 hover:text-blue-600">Life Sciences (BSL Labs)</a>
47
  </div>
48
  </div>
49
- <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
50
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
51
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
52
  </div>
 
46
  <a href="bsl-3-research-lab.html" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 hover:text-blue-600">Life Sciences (BSL Labs)</a>
47
  </div>
48
  </div>
49
+ <a href="about.html" class="text-gray-600 hover:text-blue-600 transition">About</a>
50
  <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
51
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">Collaborate</button>
52
  </div>
projects.html CHANGED
@@ -31,8 +31,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>
37
  </div>
38
  </div>
 
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="about.html" 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>