Hugging Face's logo

Spaces:
essential-eng
/
test
Running

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

go to contact tab

Browse files
Files changed (3) hide show
  1. contact.html +101 -115
  2. index.html +1 -1
  3. projects.html +1 -1
contact.html CHANGED
@@ -9,12 +9,6 @@
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>
@@ -47,115 +41,99 @@
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>
@@ -163,11 +141,19 @@
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>
@@ -200,10 +186,10 @@
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
 
@@ -211,9 +197,9 @@
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
 
 
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
  </head>
13
  <body class="font-sans antialiased text-gray-800">
14
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-1"></div>
 
41
 
42
  <!-- Contact Header -->
43
  <section class="pt-32 pb-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-90">
44
+ <div class="max-w-7xl mx-auto text-center">
45
+ <span class="text-blue-600 font-medium">GET IN TOUCH</span>
46
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-800">
47
+ Contact <span class="text-blue-600">Our Team</span>
48
+ </h1>
49
+ <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
50
+ Have a project in mind or questions about our services? Our team is ready to assist you.
51
+ </p>
 
 
52
  </div>
53
  </section>
54
 
55
+ <!-- Contact Form -->
56
  <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
57
+ <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-12">
58
+ <div>
59
+ <h2 class="text-2xl font-bold mb-6">Send Us a Message</h2>
60
+ <form class="space-y-6">
61
+ <div>
62
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name*</label>
63
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
64
+ </div>
65
+ <div>
66
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email*</label>
67
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
68
+ </div>
69
+ <div>
70
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
71
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
72
+ </div>
73
+ <div>
74
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
75
+ <select id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
76
+ <option value="general">General Inquiry</option>
77
+ <option value="services">Services Information</option>
78
+ <option value="projects">Project Consultation</option>
79
+ <option value="careers">Careers</option>
80
+ </select>
81
+ </div>
82
+ <div>
83
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message*</label>
84
+ <textarea id="message" name="message" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
85
+ </div>
86
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition w-full md:w-auto">
87
+ Send Message
88
+ </button>
89
+ </form>
90
+ </div>
91
+
92
+ <div>
93
+ <h2 class="text-2xl font-bold mb-6">Contact Information</h2>
94
+ <div class="space-y-6">
95
+ <div class="flex items-start">
96
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
97
+ <i data-feather="map-pin" class="text-blue-600"></i>
98
  </div>
99
+ <div>
100
+ <h3 class="font-bold text-gray-800">Headquarters</h3>
101
+ <p class="text-gray-600 mt-1">123 Engineering Drive<br>Tech Park, CA 90210</p>
102
  </div>
103
+ </div>
104
+
105
+ <div class="flex items-start">
106
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
107
+ <i data-feather="phone" class="text-blue-600"></i>
108
  </div>
109
+ <div>
110
+ <h3 class="font-bold text-gray-800">Phone</h3>
111
+ <p class="text-gray-600 mt-1">(555) 123-4567<br>Mon-Fri: 8am-5pm PST</p>
 
 
 
 
 
 
112
  </div>
113
+ </div>
114
+
115
+ <div class="flex items-start">
116
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
117
+ <i data-feather="mail" class="text-blue-600"></i>
118
  </div>
119
+ <div>
120
+ <h3 class="font-bold text-gray-800">Email</h3>
121
+ <p class="text-gray-600 mt-1">info@essentialeng.com<br>Sales: sales@essentialeng.com</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </div>
123
  </div>
124
+
125
+ <div class="pt-6">
126
+ <h3 class="font-bold text-gray-800 mb-4">Connect With Us</h3>
127
+ <div class="flex space-x-4">
128
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition">
129
+ <i data-feather="linkedin" class="text-gray-700"></i>
130
+ </a>
131
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition">
132
+ <i data-feather="twitter" class="text-gray-700"></i>
133
+ </a>
134
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition">
135
+ <i data-feather="facebook" class="text-gray-700"></i>
136
+ </a>
 
 
 
137
  </div>
138
  </div>
139
  </div>
 
141
  </div>
142
  </section>
143
 
144
+ <!-- Map Section -->
145
+ <section class="px-4 sm:px-6 lg:px-8">
146
  <div class="max-w-7xl mx-auto">
147
+ <div class="overflow-hidden rounded-xl shadow-lg">
148
+ <div class="h-96 w-full bg-gray-200">
149
+ <!-- Map placeholder - would be replaced with actual map embed -->
150
+ <div class="flex items-center justify-center h-full">
151
+ <div class="text-center">
152
+ <i data-feather="map" class="w-16 h-16 mx-auto text-gray-400 mb-4"></i>
153
+ <p class="text-gray-600">Location Map Would Appear Here</p>
154
+ </div>
155
+ </div>
156
+ </div>
157
  </div>
158
  </div>
159
  </section>
 
186
  <div>
187
  <h4 class="text-lg font-semibold mb-6">Services</h4>
188
  <ul class="space-y-3">
189
+ <li><a href="services.html#cleanroom-design" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
190
+ <li><a href="services.html#hvac-systems" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
191
+ <li><a href="services.html#process-piping" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
192
+ <li><a href="services.html#electrical-systems" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
193
  </ul>
194
  </div>
195
 
 
197
  <h4 class="text-lg font-semibold mb-6">Projects</h4>
198
  <ul class="space-y-3">
199
  <li><a href="projects.html" class="text-gray-400 hover:text-white transition">All Projects</a></li>
200
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pharmaceutical</a></li>
201
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Microelectronics</a></li>
202
+ <li><a href="bsl-3-research-lab.html" class="text-gray-400 hover:text-white transition">Life Sciences (BSL Labs)</a></li>
203
  </ul>
204
  </div>
205
 
index.html CHANGED
@@ -47,7 +47,7 @@
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>
 
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-blue-600 font-medium">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>
projects.html CHANGED
@@ -32,7 +32,7 @@
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>
 
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-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>