added real logo

src/components/Footer.astro

@@ -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">
+        <a href="/" class="flex items-center gap-2 mb-6 hover:opacity-90 transition-opacity">
-          <div class="bg-brand-orange p-1 rounded-sm">
+          <img src="/logo.webp" alt="Chester Valley Home Services" class="h-12 w-auto" />
-            <svg class="w-6 h-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        </a>
-              <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>
         <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

@@ -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">
+    <a href="/" class="flex items-center gap-2 hover:opacity-90 transition-opacity">
-      <div class="bg-brand-orange p-1.5 rounded-brand">
+      <img src="/logo.webp" alt="Chester Valley Home Services" class="h-14 w-auto" />
-        <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">
+    </a>
-          <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>
     
     <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="/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 whitespace-nowrap">Service Area</a>
-      <a href="#area" class="hover:text-brand-orange transition-colors">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

@@ -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>