f35caleb/chesco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added real logo
Build and Deploy / deploy (push) Successful in 28s
Details

Browse Source
This commit is contained in:
CalebLewallen
2026-05-14 14:41:39 -04:00
parent 724286e6e2
commit 4f383a3fd7
5 changed files with 216 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/logo.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

public/logo.webp:Zone.Identifier
BIN
View File
Binary file not shown.
src/components/Footer.astro
+3 -8
View File
@@ -4,14 +4,9 @@
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-start gap-12 pb-16 border-b border-border-subtle">
<div class="max-w-xs">
<div class="flex items-center gap-2 mb-6">
<div class="bg-brand-orange p-1 rounded-sm">
<svg class="w-6 h-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path>
</svg>
</div>
<span class="font-industrial text-xl font-bold uppercase tracking-tighter text-brand-navy">Chester Valley</span>
</div>
<a href="/" class="flex items-center gap-2 mb-6 hover:opacity-90 transition-opacity">
<img src="/logo.webp" alt="Chester Valley Home Services" class="h-12 w-auto" />
</a>
<p class="text-text-secondary text-sm leading-relaxed mb-6">Built on reliability and hard work. Locally owned and operated since 2024. One call covers it all.</p>
<div class="flex gap-4">
src/components/Header.astro
+6 -15
View File
@@ -2,27 +2,18 @@
---
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-border-subtle">
<nav class="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="bg-brand-orange p-1.5 rounded-brand">
<svg class="w-8 h-8 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path>
</svg>
</div>
<div class="flex flex-col leading-tight">
<span class="font-industrial text-xl font-bold tracking-tighter uppercase text-brand-navy">Chester Valley</span>
<span class="text-[10px] tracking-[0.2em] uppercase font-bold text-brand-orange">Home Services</span>
</div>
</div>
<a href="/" class="flex items-center gap-2 hover:opacity-90 transition-opacity">
<img src="/logo.webp" alt="Chester Valley Home Services" class="h-14 w-auto" />
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-bold uppercase tracking-widest text-text-secondary">
<a href="/" class="hover:text-brand-orange transition-colors">Home</a>
<a href="#services" class="hover:text-brand-orange transition-colors">Services</a>
<a href="#about" class="hover:text-brand-orange transition-colors">About</a>
<a href="#area" class="hover:text-brand-orange transition-colors">Service Area</a>
<a href="/services" class="hover:text-brand-orange transition-colors">Services</a>
<a href="/#area" class="hover:text-brand-orange transition-colors whitespace-nowrap">Service Area</a>
</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">
<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>
src/pages/services.astro
+207
View File
@@ -0,0 +1,207 @@
---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const serviceCategories = [
{
title: "Electrical",
id: "electrical",
description: "Safe, code-compliant work for homeowners. We handle everything from minor repairs to major installations with professional care.",
icon: "M13 10V3L4 14h7v7l9-11h-7z",
offerings: [
"Outlet and switch installation",
"Indoor/outdoor lighting design",
"EV charger installation",
"Ceiling fans & fixtures",
"Electrical troubleshooting",
"GFCI/AFCI protection",
"Generator hookups"
]
},
{
title: "Plumbing",
id: "plumbing",
description: "From leaky faucets to major system replacements, our plumbing services are designed to keep your home running smoothly.",
icon: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9",
offerings: [
"Faucet & fixture installation",
"Leak detection & repair",
"Water heater replacement",
"Garbage disposal install",
"Professional drain cleaning",
"Toilet repair & replacement",
"Shut-off valve replacement"
]
},
{
title: "HVAC",
id: "hvac",
description: "Year-round comfort through professional maintenance and rapid-response repairs for your heating and cooling systems.",
icon: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z",
offerings: [
"Seasonal tune-ups",
"System diagnostics",
"Thermostat programming",
"Mini-split installation",
"Filter replacement",
"Duct inspection",
"Carbon monoxide safety checks"
]
},
{
title: "Appliance Repair",
id: "appliance",
description: "Don't replace it—repair it. We specialize in mechanical restoration for major appliance brands to save you money.",
icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z",
offerings: [
"Oven & range repair",
"Refrigerator service",
"Dishwasher troubleshooting",
"Washer & dryer repair",
"Ice maker restoration",
"Microwave repair"
]
},
{
title: "Home Improvements",
id: "improvements",
description: "General home repairs and custom improvements done right. From built-ins to structural repairs.",
icon: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4",
offerings: [
"Built-in shelving & cabinetry",
"Precision trim & molding",
"Deck repair & staining",
"Drywall patching",
"Tile repair",
"Safety rail installation"
]
}
];
---
<Layout title="Our Services | Chester Valley Home Services">
<Header />
<main class="bg-surface-primary">
<!-- Hero Section -->
<section class="py-20 bg-brand-navy text-white">
<div class="max-w-7xl mx-auto px-4">
<h1 class="font-industrial text-6xl md:text-7xl font-bold uppercase mb-6 tracking-tight">Our Services</h1>
<p class="text-xl text-gray-300 max-w-2xl leading-relaxed">
One company. Five service categories. All of Chester County. Professional solutions for every corner of your home.
</p>
</div>
</section>
<!-- Services Detail & Sticky Sidebar -->
<section class="py-24">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col lg:flex-row gap-16 items-start">
<!-- Left Column: Services List -->
<div class="flex-1">
<div class="grid grid-cols-1 gap-24">
{serviceCategories.map((category) => (
<div id={category.id} class="flex flex-col gap-8 scroll-mt-32">
<div>
<div class="w-16 h-16 bg-brand-orange flex items-center justify-center mb-8 rounded-brand shadow-lg">
<svg class="w-10 h-10 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d={category.icon} stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path>
</svg>
</div>
<h2 class="font-industrial text-4xl md:text-5xl font-bold uppercase mb-6 text-brand-navy">{category.title}</h2>
<p class="text-xl text-text-secondary mb-8 leading-relaxed max-w-xl">{category.description}</p>
<div class="bg-surface-secondary p-8 border-l-4 border-brand-orange rounded-brand">
<h3 class="font-bold uppercase tracking-widest text-sm text-brand-orange mb-6">Specific Offerings</h3>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
{category.offerings.map(offering => (
<li class="flex items-center gap-3 text-brand-navy font-bold">
<span class="w-1.5 h-1.5 bg-brand-orange rounded-full"></span>
{offering}
</li>
))}
</ul>
</div>
</div>
</div>
))}
</div>
</div>
<!-- Right Column: Sticky "Need help?" Block -->
<aside class="w-full lg:w-1/3 lg:sticky lg:top-32">
<div class="bg-brand-navy text-white p-10 rounded-brand relative overflow-hidden group shadow-2xl border-t-8 border-brand-orange">
<div class="relative z-10">
<span class="font-black text-brand-orange uppercase tracking-widest text-sm mb-4 block">Neighborly Service</span>
<h4 class="font-industrial text-3xl md:text-4xl font-bold uppercase mb-6 leading-tight">Need a professional <br/> hand?</h4>
<p class="text-gray-300 mb-8 leading-relaxed">
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">
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">
(484) 301-5834
</a>
</div>
<div class="mt-10 pt-10 border-t border-white/10 grid grid-cols-2 gap-4">
<div>
<span class="text-[10px] uppercase font-black tracking-widest text-brand-orange block mb-1">Status</span>
<span class="text-xs font-bold uppercase tracking-widest flex items-center gap-2">
<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
Now Scheduling
</span>
</div>
<div>
<span class="text-[10px] uppercase font-black tracking-widest text-brand-orange block mb-1">Coverage</span>
<span class="text-xs font-bold uppercase tracking-widest">Chester County</span>
</div>
</div>
</div>
<!-- Background Icon Decor -->
<div class="absolute -bottom-16 -right-16 opacity-[0.05] group-hover:scale-110 transition-transform duration-500">
<svg class="w-64 h-64 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path>
</svg>
</div>
</div>
<!-- Trust Badge -->
<div class="mt-6 p-6 bg-surface-secondary rounded-brand border border-border-subtle flex items-center gap-4">
<div class="w-12 h-12 bg-white flex items-center justify-center rounded-full shadow-sm">
<svg class="w-6 h-6 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</div>
<div>
<span class="text-xs font-black uppercase tracking-widest text-brand-navy block">Fully Verified</span>
<span class="text-[10px] font-bold uppercase tracking-widest text-text-secondary">Licensed & Insured</span>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- referral philosophy -->
<section class="py-24 bg-brand-orange">
<div class="max-w-4xl mx-auto px-4 text-center">
<h2 class="font-industrial text-4xl md:text-5xl font-black uppercase text-brand-navy mb-8">Don't see what you need?</h2>
<p class="text-xl font-bold text-brand-navy leading-relaxed mb-12">
Reach out anyway. If we can't help with your specific home repair or improvement, we'll point you to a trusted local professional who can. Our goal is to make sure your home is taken care of, whether it's by us or one of our partners.
</p>
<a href="tel:4843015834" class="inline-block bg-brand-navy text-white px-12 py-5 rounded-brand font-industrial font-bold uppercase text-2xl tracking-widest hover:bg-black transition-all shadow-2xl">
(484) 301-5834
</a>
</div>
</section>
</main>
<Footer />
</Layout>