Hugging Face's logo

Spaces:
essential-eng
/
test
Running

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

go to contact tab

Browse files
Files changed (3) hide show
  1. contact.html +262 -0
  2. index.html +2 -2
  3. projects.html +2 -2
contact.html ADDED
@@ -0,0 +1,262 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact Us | 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
+ .contact-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 15px -3px 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-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="about.html" class="text-gray-600 hover:text-blue-600 transition">About</a>
35
+ <a href="contact.html" class="text-blue-600 font-medium">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
+ <!-- Contact 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">
51
+ <div class="text-center">
52
+ <span class="text-blue-600 font-medium">GET IN TOUCH</span>
53
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
54
+ Contact <span class="text-blue-600">Our Team</span>
55
+ </h1>
56
+ <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
57
+ Have a project in mind or questions about our services? Our team is ready to assist you.
58
+ </p>
59
+ </div>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Contact Content -->
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="grid md:grid-cols-2 gap-12">
67
+ <!-- Contact Form -->
68
+ <div class="bg-white p-8 rounded-xl shadow-md contact-card transition">
69
+ <h2 class="text-2xl font-bold mb-6">Send Us a Message</h2>
70
+ <form>
71
+ <div class="mb-6">
72
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
73
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
74
+ </div>
75
+ <div class="mb-6">
76
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
77
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
78
+ </div>
79
+ <div class="mb-6">
80
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
81
+ <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
82
+ </div>
83
+ <div class="mb-6">
84
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
85
+ <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
86
+ <option value="">Select a subject</option>
87
+ <option value="consultation">Consultation Request</option>
88
+ <option value="project">Project Inquiry</option>
89
+ <option value="careers">Career Opportunities</option>
90
+ <option value="general">General Question</option>
91
+ </select>
92
+ </div>
93
+ <div class="mb-6">
94
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
95
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
96
+ </div>
97
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md transition">
98
+ Send Message
99
+ </button>
100
+ </form>
101
+ </div>
102
+
103
+ <!-- Contact Info -->
104
+ <div>
105
+ <div class="bg-white p-8 rounded-xl shadow-md mb-8 contact-card transition">
106
+ <h2 class="text-2xl font-bold mb-6">Contact Information</h2>
107
+ <div class="space-y-6">
108
+ <div class="flex items-start">
109
+ <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0">
110
+ <i data-feather="mail" class="text-blue-600"></i>
111
+ </div>
112
+ <div>
113
+ <h3 class="font-bold text-gray-800">Email</h3>
114
+ <p class="text-gray-600">info@essentialeng.com</p>
115
+ <p class="text-gray-600">projects@essentialeng.com</p>
116
+ </div>
117
+ </div>
118
+ <div class="flex items-start">
119
+ <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0">
120
+ <i data-feather="phone" class="text-blue-600"></i>
121
+ </div>
122
+ <div>
123
+ <h3 class="font-bold text-gray-800">Phone</h3>
124
+ <p class="text-gray-600">Main: (555) 123-4567</p>
125
+ <p class="text-gray-600">Support: (555) 123-4568</p>
126
+ </div>
127
+ </div>
128
+ <div class="flex items-start">
129
+ <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0">
130
+ <i data-feather="map-pin" class="text-blue-600"></i>
131
+ </div>
132
+ <div>
133
+ <h3 class="font-bold text-gray-800">Headquarters</h3>
134
+ <address class="not-italic text-gray-600">
135
+ 123 Engineering Drive<br>
136
+ Tech Park, CA 90210<br>
137
+ United States
138
+ </address>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="bg-white p-8 rounded-xl shadow-md contact-card transition">
145
+ <h2 class="text-2xl font-bold mb-6">Office Hours</h2>
146
+ <div class="space-y-4">
147
+ <div class="flex justify-between">
148
+ <span class="text-gray-700">Monday - Friday</span>
149
+ <span class="text-gray-600 font-medium">8:00 AM - 6:00 PM</span>
150
+ </div>
151
+ <div class="flex justify-between">
152
+ <span class="text-gray-700">Saturday</span>
153
+ <span class="text-gray-600 font-medium">9:00 AM - 2:00 PM</span>
154
+ </div>
155
+ <div class="flex justify-between">
156
+ <span class="text-gray-700">Sunday</span>
157
+ <span class="text-gray-600 font-medium">Closed</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- Map -->
167
+ <section class="px-4 sm:px-6 lg:px-8 bg-white">
168
+ <div class="max-w-7xl mx-auto">
169
+ <div class="rounded-xl overflow-hidden shadow-md">
170
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215662132302!2d-73.98811768405302!3d40.74844027932762!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1623862341546!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Footer -->
176
+ <footer class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
177
+ <div class="max-w-7xl mx-auto">
178
+ <div class="grid md:grid-cols-4 gap-12">
179
+ <div>
180
+ <div class="flex items-center mb-6">
181
+ <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">
182
+ <span class="ml-3 text-xl font-bold">Essential Engineering</span>
183
+ </div>
184
+ <p class="text-gray-400 mb-6">
185
+ Specialized MEP solutions for critical environments in pharmaceutical, microelectronics, and advanced manufacturing.
186
+ </p>
187
+ <div class="flex space-x-4">
188
+ <a href="#" class="text-gray-400 hover:text-white">
189
+ <i data-feather="linkedin"></i>
190
+ </a>
191
+ <a href="#" class="text-gray-400 hover:text-white">
192
+ <i data-feather="twitter"></i>
193
+ </a>
194
+ <a href="#" class="text-gray-400 hover:text-white">
195
+ <i data-feather="facebook"></i>
196
+ </a>
197
+ </div>
198
+ </div>
199
+
200
+ <div>
201
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
202
+ <ul class="space-y-3">
203
+ <li><a href="services.html" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
204
+ <li><a href="services.html" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
205
+ <li><a href="services.html" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
206
+ <li><a href="services.html" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
207
+ </ul>
208
+ </div>
209
+
210
+ <div>
211
+ <h4 class="text-lg font-semibold mb-6">Projects</h4>
212
+ <ul class="space-y-3">
213
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">All Projects</a></li>
214
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Pharmaceutical</a></li>
215
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Microelectronics</a></li>
216
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Life Sciences</a></li>
217
+ </ul>
218
+ </div>
219
+
220
+ <div>
221
+ <h4 class="text-lg font-semibold mb-6">Contact</h4>
222
+ <address class="not-italic text-gray-400">
223
+ <p class="mb-3">123 Engineering Drive</p>
224
+ <p class="mb-3">Tech Park, CA 90210</p>
225
+ <p class="mb-3">Phone: (555) 123-4567</p>
226
+ <p>Email: info@essentialeng.com</p>
227
+ </address>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
232
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
233
+ © 2023 Essential Engineering Company. All rights reserved.
234
+ </p>
235
+ <div class="flex space-x-6">
236
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a>
237
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </footer>
242
+
243
+ <script>
244
+ feather.replace();
245
+ VANTA.WAVES({
246
+ el: "#vanta-bg",
247
+ mouseControls: true,
248
+ touchControls: true,
249
+ gyroControls: false,
250
+ minHeight: 200.00,
251
+ minWidth: 200.00,
252
+ scale: 1.00,
253
+ scaleMobile: 1.00,
254
+ color: 0x3b82f6,
255
+ shininess: 35.00,
256
+ waveHeight: 15.00,
257
+ waveSpeed: 0.60,
258
+ zoom: 0.75
259
+ });
260
+ </script>
261
+ </body>
262
+ </html>
index.html CHANGED
@@ -47,8 +47,8 @@
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>
53
  </div>
54
  <div class="md:hidden">
 
47
  </div>
48
  </div>
49
  <a href="about.html" class="text-gray-600 hover:text-blue-600 transition">About</a>
50
+ <a href="contact.html" 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>
53
  </div>
54
  <div class="md:hidden">
projects.html CHANGED
@@ -32,8 +32,8 @@
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>
39
  <div class="md:hidden">
 
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="contact.html" 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">