add contact page. Not wired up.
Build and Deploy / deploy (push) Successful in 11s

This commit is contained in:
CalebLewallen
2026-05-14 14:53:00 -04:00
parent 6129b3818c
commit 802dd7089a
7 changed files with 139 additions and 4 deletions
+5
View File
@@ -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. - **Clean Work Policy.** We respect your home; cleanup is part of the job.
- **Reliability.** Done right the first time by licensed professionals. - **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 ## Emergency Service
Real people answering the phone for your urgent home service needs. Real people answering the phone for your urgent home service needs.
+1 -1
View File
@@ -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="#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="#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="#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>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<span class="font-industrial font-bold uppercase text-brand-orange text-xs tracking-widest">Capabilities</span> <span class="font-industrial font-bold uppercase text-brand-orange text-xs tracking-widest">Capabilities</span>
+1 -1
View File
@@ -13,7 +13,7 @@
</div> </div>
<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 Request Service
</a> </a>
</div> </div>
+1 -1
View File
@@ -24,7 +24,7 @@
</p> </p>
<div class="flex flex-wrap gap-4 mb-16"> <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 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"> <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> <path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path>
+8
View File
@@ -22,6 +22,14 @@ const businessData = {
"url": "https://www.chescohome.com", "url": "https://www.chescohome.com",
"telephone": "+14843015834", "telephone": "+14843015834",
"email": "info@chescohome.com", "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": [ "openingHoursSpecification": [
{ {
"@type": "OpeningHoursSpecification", "@type": "OpeningHoursSpecification",
+122
View File
@@ -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>
+1 -1
View File
@@ -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. We provide code-compliant, professional work throughout Chester County. One call covers all your electrical, plumbing, HVAC, and repair needs.
</p> </p>
<div class="flex flex-col gap-4"> <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 Request A Quote
</a> </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"> <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">