This commit is contained in:
CalebLewallen
@@ -24,5 +24,10 @@ Professional Home Services for Chester County Homes. Locally owned. Professional
|
||||
- **Clean Work Policy.** We respect your home; cleanup is part of the job.
|
||||
- **Reliability.** Done right the first time by licensed professionals.
|
||||
|
||||
## Contact
|
||||
- **Page:** [/contact](https://www.chescohome.com/contact)
|
||||
- **Form:** Request service by providing cell phone, email, service type, and details.
|
||||
- **Immediate Assistance:** Call (484) 301-5834.
|
||||
|
||||
## Emergency Service
|
||||
Real people answering the phone for your urgent home service needs.
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<a href="#services" class="text-sm font-bold text-text-secondary hover:text-brand-orange transition-colors uppercase tracking-widest">Services</a>
|
||||
<a href="#about" class="text-sm font-bold text-text-secondary hover:text-brand-orange transition-colors uppercase tracking-widest">About Us</a>
|
||||
<a href="#area" class="text-sm font-bold text-text-secondary hover:text-brand-orange transition-colors uppercase tracking-widest">Area</a>
|
||||
<a href="#contact" class="text-sm font-bold text-text-secondary hover:text-brand-orange transition-colors uppercase tracking-widest">Contact</a>
|
||||
<a href="/contact" class="text-sm font-bold text-text-secondary hover:text-brand-orange transition-colors uppercase tracking-widest">Contact</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-industrial font-bold uppercase text-brand-orange text-xs tracking-widest">Capabilities</span>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="#contact" class="bg-brand-navy text-white px-6 py-2.5 rounded-brand font-industrial font-bold uppercase tracking-wider hover:bg-brand-orange hover:text-brand-navy transition-all text-xs md:text-sm shadow-md">
|
||||
<a href="/contact" class="bg-brand-navy text-white px-6 py-2.5 rounded-brand font-industrial font-bold uppercase tracking-wider hover:bg-brand-orange hover:text-brand-navy transition-all text-xs md:text-sm shadow-md">
|
||||
Request Service
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-16">
|
||||
<a href="#contact" class="group flex items-center gap-4 bg-brand-navy text-white px-8 py-5 rounded-brand font-industrial font-bold uppercase text-xl tracking-wider hover:bg-brand-orange hover:text-brand-navy transition-all shadow-xl">
|
||||
<a href="/contact" class="group flex items-center gap-4 bg-brand-navy text-white px-8 py-5 rounded-brand font-industrial font-bold uppercase text-xl tracking-wider hover:bg-brand-orange hover:text-brand-navy transition-all shadow-xl">
|
||||
Schedule A Free Estimate
|
||||
<svg class="w-6 h-6 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path>
|
||||
|
||||
@@ -22,6 +22,14 @@ const businessData = {
|
||||
"url": "https://www.chescohome.com",
|
||||
"telephone": "+14843015834",
|
||||
"email": "info@chescohome.com",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+1-484-301-5834",
|
||||
"contactType": "customer service",
|
||||
"areaServed": "Chester County, PA",
|
||||
"availableLanguage": "English",
|
||||
"url": "https://www.chescohome.com/contact"
|
||||
},
|
||||
"openingHoursSpecification": [
|
||||
{
|
||||
"@type": "OpeningHoursSpecification",
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
---
|
||||
|
||||
<Layout title="Contact Us | Chester Valley Home Services">
|
||||
<Header />
|
||||
<main class="py-20">
|
||||
<div class="max-w-3xl mx-auto px-4">
|
||||
<div class="mb-12">
|
||||
<span class="font-industrial font-bold uppercase text-brand-orange text-sm tracking-widest mb-4 block">Get in Touch</span>
|
||||
<h1 class="font-industrial text-5xl md:text-6xl font-black uppercase text-brand-navy leading-none mb-6">Request <br />Service</h1>
|
||||
<p class="text-text-secondary text-lg leading-relaxed">Fill out the form below and one of our experts will get back to you shortly. For immediate assistance, call us at <a href="tel:4843015834" class="text-brand-navy font-bold hover:text-brand-orange transition-colors">(484) 301-5834</a>.</p>
|
||||
</div>
|
||||
|
||||
<div id="contact-form-container" class="bg-white p-8 md:p-12 rounded-brand shadow-xl border border-border-subtle">
|
||||
<form id="contact-form" class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label for="phone" class="block text-xs font-black uppercase tracking-widest text-brand-navy">Cell Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
required
|
||||
placeholder="(555) 555-5555"
|
||||
class="w-full px-4 py-3 border border-border-subtle rounded-brand focus:ring-2 focus:ring-brand-orange focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label for="email" class="block text-xs font-black uppercase tracking-widest text-brand-navy">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="you@example.com"
|
||||
class="w-full px-4 py-3 border border-border-subtle rounded-brand focus:ring-2 focus:ring-brand-orange focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="service" class="block text-xs font-black uppercase tracking-widest text-brand-navy">Type of Service</label>
|
||||
<select
|
||||
id="service"
|
||||
name="service"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-border-subtle rounded-brand focus:ring-2 focus:ring-brand-orange focus:border-transparent outline-none transition-all bg-white"
|
||||
>
|
||||
<option value="" disabled selected>Select a service...</option>
|
||||
<option value="electrical">Electrical</option>
|
||||
<option value="plumbing">Plumbing</option>
|
||||
<option value="hvac">HVAC</option>
|
||||
<option value="appliance">Appliance Repair</option>
|
||||
<option value="renovation">Home Improvement</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="message" class="block text-xs font-black uppercase tracking-widest text-brand-navy">How can we help?</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows="4"
|
||||
required
|
||||
placeholder="Describe your request..."
|
||||
class="w-full px-4 py-3 border border-border-subtle rounded-brand focus:ring-2 focus:ring-brand-orange focus:border-transparent outline-none transition-all resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-brand-navy text-white font-industrial font-bold uppercase tracking-widest py-4 rounded-brand hover:bg-brand-orange hover:text-brand-navy transition-all shadow-md group"
|
||||
>
|
||||
Submit Request
|
||||
<span class="inline-block group-hover:translate-x-1 transition-transform ml-2">→</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="success-message" class="hidden text-center py-12">
|
||||
<div class="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="font-industrial text-3xl font-black uppercase text-brand-navy mb-4">Request Received</h2>
|
||||
<p class="text-text-secondary leading-relaxed">Thank you for reaching out. We've received your request and a member of our team will contact you shortly.</p>
|
||||
<button
|
||||
onclick="window.location.href='/'"
|
||||
class="mt-8 text-xs font-black uppercase tracking-widest text-brand-orange hover:text-brand-navy transition-colors"
|
||||
>
|
||||
← Return Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('contact-form');
|
||||
const successMessage = document.getElementById('success-message');
|
||||
|
||||
form?.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// In a real app, you'd send the data to a server here
|
||||
const formData = new FormData(form as HTMLFormElement);
|
||||
console.log('Form submitted:', Object.fromEntries(formData));
|
||||
|
||||
// Stubbed success state
|
||||
form.classList.add('hidden');
|
||||
successMessage?.classList.remove('hidden');
|
||||
|
||||
// Scroll to top of the message
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
</script>
|
||||
@@ -140,7 +140,7 @@ const serviceCategories = [
|
||||
We provide code-compliant, professional work throughout Chester County. One call covers all your electrical, plumbing, HVAC, and repair needs.
|
||||
</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
<a href="#contact" class="inline-block bg-brand-orange text-brand-navy px-8 py-4 rounded-brand font-industrial font-bold uppercase tracking-widest hover:bg-white transition-all w-full text-center text-lg">
|
||||
<a href="/contact" class="inline-block bg-brand-orange text-brand-navy px-8 py-4 rounded-brand font-industrial font-bold uppercase tracking-widest hover:bg-white transition-all w-full text-center text-lg">
|
||||
Request A Quote
|
||||
</a>
|
||||
<a href="tel:4843015834" class="inline-block border-2 border-white/20 text-white px-8 py-4 rounded-brand font-industrial font-bold uppercase tracking-widest hover:bg-white hover:text-brand-navy transition-all w-full text-center">
|
||||
|
||||
Reference in New Issue
Block a user