feat: overhaul homepage layout, add contact page, refactor components

- Add new media assets for hero, mosaic, service area, etc.
- Create Astro components: Nav, Footer, Button, Container, Section, SectionHeading, Hero, ExpertiseMosaic, ServiceList, WhyUs, ServiceArea.
- Refactor src/pages/index.astro into reusable components.
- Add src/pages/contact.astro with contact form and info.
- Fix dead navigation links and service links.
- Implement mobile navigation using details/summary.
- Apply strict 12‑column grid and 1140px container.
- Add scroll‑triggered reveal animations and sticky hero background.

dev/continuity.md

@@ -21,6 +21,67 @@ Development log for tracking changes, decisions, and next steps.
 
 ---
 
+## 2025-12-27 - Editorial Grid, Atmosphere, & Dynamic Text Reveal
+
+### Changes
+- **Structural Foundation**:
+  - Narrowed the primary container (`--width-brand`) to **1140px** for a focused, magazine-style layout.
+  - Implemented a strict **12-column grid system** (`.grid-12`) across all sections for precise content alignment.
+  - Significant vertical rhythm update: Increased section padding to `py-32 md:py-48 lg:py-64` to solve the "short/stunted" section feeling.
+- **Atmospheric Image Integration**:
+  - **Hero**: Implemented a **pinned/sticky background** effect using `painting1.png`, allowing content to scroll over a fixed gritty texture.
+  - **Expertise Mosaic**: Updated bento tiles with high-texture assets (`mixing1.png`, `shavings1.png`, `cloth1.png`) and added floating `shavings` connector assets to bridge section gaps.
+  - **Service Area**: Layered `wall2.png` as a subtle atmospheric overlay on the mountain visual.
+- **Dynamic Reveal Animations**:
+  - Implemented a global **Intersection Observer** for scroll-triggered reveal animations.
+  - Added "Sliding Line" text reveals for all major headings (H1, H2) using `text-reveal-mask` and `text-reveal-line` utilities.
+  - Applied `reveal-item` fade/slide transitions to bento tiles, image cards, and trust badges.
+- **Interaction & Polish**:
+  - **Button Refinement**: Updated `Button.astro` with premium editorial tracking, bold uppercase text, and hover-lift effects.
+  - **Soft Edge Masks**: Applied `mask-soft-edges` (linear gradients) to dark sections to create a seamless transition into the cream page background.
+  - **Section Alignment**: Re-balanced all elements to specific column spans (e.g., col-span-7 content, col-span-5 media) for a high-end editorial feel.
+
+### Decisions
+- **Sticky Hero Background**: Chose a sticky background for the hero to create immediate visual depth and a "painterly" parallax impression.
+- **Strict Grid Spans**: Used the 12-column grid to intentionally limit text line-lengths, mimicking premium print layout standards.
+- **Connector Assets**: Used floating wood shavings (`shavings2.png`, `shavings3.png`) to literally "sew" sections together, breaking up horizontal division lines.
+
+### Next Steps
+- [ ] Audit the contact page for consistency with the new 1140px container and grid-12 structure.
+- [ ] Review performance of high-texture images on low-bandwidth mobile devices.
+- [ ] Finalize any remaining dead links in the refined footer.
+
+---
+
+## 2025-12-27 - Vibrant Bento & Editorial Polish
+
+### Changes
+- **Expertise Section Redesign**:
+  - Rebuilt the Expertise section as a structured **Bento Grid** with high-impact imagery and interactive chips.
+  - Added magazine-style numbering ("01", "02", "03") and hover-reveal logic for a high-end feel.
+- **Dynamic Brand Marquee**:
+  - Implemented a seamless scrolling marquee with bold brand essence keywords: "TRUSTWORTHY", "EDITORIAL", "ORGANIC", "STURDY".
+- **Media Split Service Area**:
+  - Refactored the Service Area into an asymmetric layout with a large, moody mountain visual on the left and neighborhood chips on the right.
+- **Service List (More Than Just Painting) Polish**:
+  - Added "stat" labels (e.g., "Precise", "Clean") to each service item for editorial precision.
+  - Refined the layout with better card spacing and a floating stat badge.
+- **Refined Site Shell**:
+  - **Nav**: Updated button hierarchy and sticky behavior for better contrast and usability.
+  - **Footer**: Added a top social bar, organized links into a three-column "Hybrid Footer" grid, and refined the "Pill" CTA section.
+
+### Decisions
+- **Bento Logic**: Chose to prioritize one large card for "Premium Painting" to establish it as the primary service, with smaller auxiliary cards for secondary services.
+- **Marquee Integration**: Placed the marquee between the Expertise and Service List sections to serve as a high-energy visual divider.
+- **Media Split**: Used a grayscale-to-color transition on the mountain image to emphasize the "discovery" aspect of locating the service area.
+
+### Next Steps
+- [ ] Review the mobile transition for the media split (ensure it stacks elegantly).
+- [ ] Finalize the "Recipes" or "Project Stories" slider if real project data becomes available.
+- [ ] Conduct a final cross-browser audit for animation performance (marquee and hover states).
+
+---
+
 ## 2025-12-27 - Hero, Services, and Footer Design Revamp
 
 ### Changes
@@ -193,4 +254,116 @@ Development log for tracking changes, decisions, and next steps.
 
 ---
 
-Add new entries below...
+## 2025-12-27 - Homepage Redesign & Component Refactor
+
+### Changes
+- **Aggressive Component Refactor**: Broke monolithic `src/pages/index.astro` (780+ lines) into reusable Astro components:
+  - **Site Shell**: `src/components/site/Nav.astro` (sticky nav with mobile menu using `details/summary`), `src/components/site/Footer.astro`
+  - **UI Primitives**: `src/components/ui/Container.astro`, `src/components/ui/Button.astro`, `src/components/ui/Section.astro`, `src/components/ui/SectionHeading.astro`
+  - **Homepage Sections**: `src/components/home/Hero.astro`, `src/components/home/ExpertiseMosaic.astro`, `src/components/home/ServiceList.astro`, `src/components/home/WhyUs.astro`, `src/components/home/ServiceArea.astro`
+
+- **Fixed Dead Navigation Links**: All CTAs and nav links that pointed to non-existent `#contact` now route to `/contact` page
+
+- **Created `/contact` Page**: New `src/pages/contact.astro` with:
+  - Contact information card (phone, email, location, hours)
+  - Service areas chips
+  - Contact form with name, phone, email, service dropdown, project details
+  - Consistent styling with homepage
+
+- **Mobile Navigation**: Added functional hamburger menu using native `details/summary` (no JavaScript required)
+  - Shows all nav links, phone number, and CTA
+  - Toggle icon changes from hamburger to X when open
+
+- **Services Section Redesign**: Replaced confusing mosaic grid with clean 3-column card layout:
+  - Each card has image, icon badge, title, description, and "Get a Quote" CTA
+  - Clear visual hierarchy and relationship between elements
+  - Bottom CTA for consultation
+
+- **Footer Links Fixed**: Service links now point to `#services` instead of dead `#` links
+
+### Decisions
+- **No JavaScript Mobile Menu**: Used `details/summary` HTML pattern for mobile nav to stay Astro-first and reduce client-side JS
+- **Separate Contact Page**: Chose dedicated `/contact` page over inline section to allow for future form integration
+- **Component Granularity**: Created both low-level UI primitives and page-specific section components for flexibility
+- **Phone Number**: Using placeholder `(312) 456-7890` from `dev/design.json` - needs updating with real number
+
+### Technical Details
+- All components use brand tokens from `src/styles/global.css` (`--color-brand-green`, `--color-brand-sage`, etc.)
+- Button component supports `primary`, `secondary`, `outline`, `ghost` variants
+- Section component supports `default`, `white`, `dark`, `accent` backgrounds
+- Mobile menu auto-closes when navigating (native browser behavior)
+
+### Next Steps
+- [ ] Update placeholder phone number/email with real contact info
+- [ ] Add form submission handler (Cloudflare Functions or external service)
+- [ ] Create `/privacy` and `/terms` pages (footer links currently dead)
+- [ ] Add scroll-margin-top to sections for better anchor navigation with sticky header
+- [ ] Consider adding subtle entrance animations to homepage sections
+
+---
+
+## 2025-12-27 - Editorial Cohesion & Moody Identity Implementation
+
+### Changes
+- **Layout Refinement**:
+  - Narrowed the primary content container (`--width-brand`) to **1200px** for a more focused, high-end editorial feel.
+  - Increased section vertical spacing and added significant breathing room between blocks.
+- **Hero Transformation**:
+  - Replaced the split-screen hero with a centered, high-impact "Moody Hero" layout.
+  - Integrated `brush1.png` as an atmospheric background texture with radial lighting and blended gradients.
+  - Enhanced typography with larger, more intentional serif and italic pairings.
+- **Visual Depth & Texture**:
+  - Implemented a page-wide subtle texture using `tileablepattern.png` on the `body` background.
+  - Refactored `ExpertiseMosaic`, `ServiceList`, and `ServiceArea` to use semi-transparent backgrounds (`bg-brand-cream/50`) and backdrop blurs to melt into the page texture.
+  - Standardized all section rounding to match the "Pill" design language.
+- **"Pill" Footer Implementation**:
+  - Rebuilt the footer to precisely match the brand identity guide.
+  - Added a floating dark green "Pill" CTA section that anchors the page.
+  - Refactored the bottom links into a "Hybrid Footer" three-column grid (Contact, Branding, Links).
+- **Design Token Standardization**:
+  - Renamed all remaining `stone-` and `#3a4d39` references to brand tokens (`brand-dark`, `brand-green`, etc.) across the entire codebase.
+
+### Decisions
+- **Centered Hero**: Moving to a centered hero created a more direct and atmospheric first impression, allowing the `brush1.png` texture to serve as the "canvas" for the site.
+- **Narrower Width**: Reducing the width from 1440px to 1200px immediately improved the "editorial" feel, making long paragraphs more readable and visual assets more balanced.
+- **Page-wide Texture**: Using a very subtle (1.5% opacity) texture on the `body` instead of per-section backgrounds eliminated the "abrupt transition" issue.
+
+### Next Steps
+- [ ] Review mobile responsiveness for the new centered hero and layered footer.
+- [ ] Finalize the interactive map or neighborhood visualization in the `ServiceArea` section.
+- [ ] Audit all secondary pages (Contact) for the new container width.
+
+---
+
+## 2025-12-27 - Full-Page Beautification & Bento Refactor
+
+### Changes
+- **Expertise Mosaic Redesign**:
+    - Completely rebuilt the section as a high-impact **Bento Mosaic**.
+    - Replaced standard cards with large, background-image-driven tiles.
+    - Added hover-reveal descriptions and magazine-style numbering ("01", "02", "03").
+    - Integrated glassmorphism UI elements for icons and CTAs.
+- **Service List (More Than Just Painting) Polish**:
+    - Rebuilt as a premium card with a subtle pattern background and rounded layout.
+    - Replaced the simple list with a grid of icon chips for handyman services.
+    - Added a floating "200+ Jobs Completed" badge for social proof.
+- **Service Area (Service Area) Redesign**:
+    - Transformed into a "Community Card" with a full-width mountain backdrop (`mountains.png`).
+    - Added a floating, glowing map marker badge and stylized neighborhood tags.
+    - Included a bottom trust bar with core value indicators (Licensed & Insured, etc.).
+- **Navigation (Nav) Refinement**:
+    - Enhanced the sticky header with backdrop-blur glassmorphism.
+    - Added a sub-brand line ("& Handyman Services") and refined typography with better tracking and bold uppercase weights.
+    - Improved hover states with animated underlines and subtle shadow transitions on CTAs.
+- **Layout Breathing Room**:
+    - Increased vertical margins between large sections (to `mb-48` in some cases) to create an airy, premium "editorial" feel.
+
+### Decisions
+- **Photography First**: Shifted the design to lead with high-quality, large-scale photography to better showcase craftsmanship.
+- **Micro-Interactions**: Added scale and rotate animations on hover for cards and images to make the site feel responsive and high-end.
+- **Glassmorphism**: Used backdrop filters (`backdrop-blur-xl`) on navigation and floating elements to maintain legibility while overlaying beautiful imagery.
+
+### Next Steps
+- [ ] Add smooth-scroll behavior to the whole page for better anchor navigation.
+- [ ] Finalize mobile responsiveness for the new bento tiles (ensure text remains readable over images).
+- [ ] Update the placeholder project counts/years once real data is available.

src/components/home/ExpertiseMosaic.astro

@@ -0,0 +1,119 @@
+---
+import { Image } from "astro:assets";
+import { Paintbrush, Trees, Hammer, ArrowRight } from "lucide-react";
+
+const services = [
+    {
+        id: "01",
+        icon: Paintbrush,
+        title: "Premium Painting",
+        chip: "Painting",
+        description: "Meticulous interior and exterior painting using premium materials for a lasting finish.",
+        image: "/media/mixing1.png",
+        accent: "bg-brand-green",
+        gridClass: "lg:col-span-8 lg:row-span-2",
+    },
+    {
+        id: "02",
+        icon: Trees,
+        title: "Wood Restoration",
+        chip: "Restoration",
+        description: "Expert deck staining and wood preservation.",
+        image: "/media/shavings1.png",
+        accent: "bg-brand-sage",
+        gridClass: "lg:col-span-4 lg:row-span-1",
+    },
+    {
+        id: "03",
+        icon: Hammer,
+        title: "Handyman Services",
+        chip: "Handyman",
+        description: "Reliable home repairs and installations.",
+        image: "/media/cloth1.png",
+        accent: "bg-brand-dark",
+        gridClass: "lg:col-span-4 lg:row-span-1",
+    },
+];
+---
+
+<section id="services" class="relative py-32 md:py-48 lg:py-64 overflow-hidden">
+    <!-- Floating Connector Shavings -->
+    <div class="absolute -top-24 right-[10%] w-64 h-64 opacity-20 pointer-events-none z-0 hidden lg:block rotate-12">
+        <img src="/media/shavings2.png" alt="" class="w-full h-full object-contain" />
+    </div>
+
+    <div class="container-brand relative z-10">
+        <!-- Bento Header -->
+        <div class="grid-12 items-end mb-24 md:mb-32">
+            <div class="col-span-1 md:col-span-8 lg:col-span-6">
+                <h2 class="text-6xl md:text-8xl font-serif font-medium tracking-tight text-brand-dark leading-[0.85] mb-8">
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line">Do it all,</span>
+                    </span>
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line italic font-light">paint it all</span>
+                    </span>
+                </h2>
+                <p class="text-xl md:text-2xl text-brand-dark/60 max-w-md font-light italic">
+                    If you're detail-curious, you're in the right place — we've got a finish for every surface.
+                </p>
+            </div>
+            <div class="col-span-1 md:col-span-4 lg:col-span-6 flex md:justify-end mt-12 md:mt-0">
+                <a 
+                    href="/contact" 
+                    class="inline-flex items-center gap-4 px-10 py-5 bg-brand-dark text-white rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-brand-green transition-all shadow-xl hover:-translate-y-1"
+                >
+                    Our Services <ArrowRight size={18} />
+                </a>
+            </div>
+        </div>
+
+        <!-- Structured Bento Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 min-h-[800px]">
+            {services.map((service, index) => (
+                <a 
+                    href="/contact" 
+                    class:list={["group relative rounded-[3rem] overflow-hidden bg-brand-cream shadow-2xl transition-all duration-1000 hover:-translate-y-2", service.gridClass]}
+                >
+                    <!-- Background Image -->
+                    <div class="absolute inset-0">
+                        <img
+                            src={service.image}
+                            alt={service.title}
+                            class="w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110 grayscale group-hover:grayscale-0"
+                        />
+                        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/90 via-brand-dark/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity" />
+                    </div>
+
+                    <!-- Chip -->
+                    <div class="absolute top-10 left-10 z-20">
+                        <div class="px-5 py-2.5 bg-brand-dark/90 backdrop-blur-md border border-white/10 rounded-full text-[11px] font-bold text-white uppercase tracking-[0.3em]">
+                            {service.chip}
+                        </div>
+                    </div>
+
+                    <!-- Content -->
+                    <div class="relative h-full p-12 flex flex-col justify-end text-white">
+                        <div class="flex items-center gap-4 mb-6 opacity-60">
+                            <span class="font-serif italic text-3xl">/ {service.id}</span>
+                        </div>
+                        <h3 class="text-4xl md:text-5xl font-serif font-medium mb-6 leading-tight">
+                            {service.title}
+                        </h3>
+                        <p class="text-lg md:text-xl text-white/80 font-light leading-relaxed max-w-xl mb-8 transition-all duration-700 line-clamp-2 group-hover:line-clamp-none">
+                            {service.description}
+                        </p>
+                        <div class="flex items-center gap-4 text-[11px] font-bold uppercase tracking-[0.3em] opacity-0 -translate-x-6 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-700">
+                            View Details <ArrowRight size={16} />
+                        </div>
+                    </div>
+                </a>
+            ))}
+        </div>
+    </div>
+
+    <!-- Floating Connector Shavings 2 -->
+    <div class="absolute -bottom-32 left-[5%] w-80 h-80 opacity-15 pointer-events-none z-0 hidden lg:block -rotate-12">
+        <img src="/media/shavings3.png" alt="" class="w-full h-full object-contain" />
+    </div>
+</section>

src/components/home/Hero.astro

@@ -0,0 +1,77 @@
+---
+import { Image } from "astro:assets";
+import { ArrowRight, Star, CheckCircle } from "lucide-react";
+import painting1 from "../../assets/painting1.png";
+---
+
+<section class="relative min-h-[90vh] flex items-center justify-center overflow-hidden py-32 md:py-48 lg:py-64 bg-brand-green">
+    <!-- Sticky Background Texture -->
+    <div class="absolute inset-0 z-0 pointer-events-none">
+        <div class="sticky top-0 h-screen w-full">
+            <div 
+                class="absolute inset-0 opacity-[0.3] mix-blend-overlay scale-110"
+                style="background-image: url('/media/painting1.png'); background-size: cover; background-position: center;"
+            ></div>
+            <div class="absolute inset-0 bg-gradient-to-b from-brand-dark/40 via-transparent to-brand-dark/60"></div>
+        </div>
+    </div>
+
+    <div class="container-brand relative z-10">
+        <div class="grid-12 items-center">
+            <div class="col-span-1 md:col-span-10 md:col-start-2 lg:col-span-8 lg:col-start-3 text-center">
+                <!-- Trust Badge -->
+                <div class="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2.5 mb-12 opacity-0 translate-y-4 animate-in fade-in slide-in-from-bottom-4 duration-1000 fill-mode-forwards">
+                    <div class="flex -space-x-1">
+                        {[1, 2, 3, 4, 5].map(() => (
+                            <Star size={12} className="text-brand-cream fill-brand-cream" />
+                        ))}
+                    </div>
+                    <span class="text-white text-[10px] font-bold uppercase tracking-[0.3em]">Colorado's Premium Choice</span>
+                </div>
+
+                <h1 class="text-6xl sm:text-7xl md:text-9xl font-serif font-medium tracking-tight leading-[0.9] mb-12 text-white">
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line">Masterful</span>
+                    </span>
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line italic text-brand-cream">Painting</span>
+                    </span>
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line">Services</span>
+                    </span>
+                </h1>
+
+                <p class="text-xl md:text-2xl text-white/80 mb-16 max-w-2xl mx-auto leading-relaxed font-light italic">
+                    Professional wood restoration and premium painting for Colorado Springs. Built on trust, defined by quality.
+                </p>
+
+                <div class="flex flex-col sm:flex-row items-center justify-center gap-8 mb-16">
+                    <a
+                        href="/contact"
+                        class="px-12 py-6 bg-brand-cream text-brand-green text-xs font-bold uppercase tracking-[0.3em] rounded-full hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
+                    >
+                        Free Estimate
+                    </a>
+                    <a
+                        href="#services"
+                        class="px-12 py-6 bg-white/5 text-white border border-white/20 backdrop-blur-sm hover:bg-white/10 text-xs font-bold uppercase tracking-[0.3em] rounded-full transition-all group/btn flex items-center gap-3"
+                    >
+                        View Our Work
+                        <ArrowRight size={16} className="group-hover/btn:translate-x-1 transition-transform" />
+                    </a>
+                </div>
+
+                <div class="flex items-center justify-center gap-12 text-white/40">
+                    <div class="flex items-center gap-3">
+                        <CheckCircle size={20} className="text-brand-cream/60" />
+                        <span class="text-[12px] font-bold uppercase tracking-widest">Licensed & Insured</span>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <CheckCircle size={20} className="text-brand-cream/60" />
+                        <span class="text-[12px] font-bold uppercase tracking-widest">Local Experts</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

src/components/home/ServiceArea.astro

@@ -0,0 +1,86 @@
+---
+import { Image } from "astro:assets";
+import { MapPin, Navigation, ArrowRight } from "lucide-react";
+import mountainsImg from "../../assets/mountains.png";
+
+const areas = [
+    "Colorado Springs",
+    "Monument",
+    "Black Forest",
+    "Woodland Park",
+    "Manitou Springs",
+    "Falcon",
+];
+---
+
+<section id="areas" class="relative py-32 md:py-48 lg:py-64 overflow-hidden bg-brand-dark mask-soft-edges">
+    <!-- Background Texture & Wall Mask -->
+    <div class="absolute inset-0 z-0 opacity-[0.1] pointer-events-none mix-blend-overlay scale-110" style="background-image: url('/media/wall2.png'); background-size: cover; background-position: center;"></div>
+    <div class="absolute inset-0 brush-texture opacity-[0.05] pointer-events-none z-0"></div>
+
+    <div class="container-brand relative z-10">
+        <div class="grid-12 items-center">
+            <!-- Left: Media (Atmospheric Mountain) (Col 1-6) -->
+            <div class="col-span-1 md:col-span-12 lg:col-span-6 relative">
+                <div class="relative rounded-[4rem] overflow-hidden shadow-2xl group border border-white/5 reveal-item transition-all duration-1000">
+                    <div class="absolute inset-0 bg-brand-green/30 mix-blend-multiply z-10"></div>
+                    <Image 
+                        src={mountainsImg} 
+                        alt="Pikes Peak mountains landscape" 
+                        class="w-full aspect-[4/5] object-cover transition-transform duration-[15s] group-hover:scale-110 grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100"
+                    />
+                    
+                    <!-- Floating Map Marker Overlay -->
+                    <div class="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
+                        <div class="relative scale-75 md:scale-100">
+                            <div class="absolute inset-0 bg-brand-green/40 rounded-full blur-3xl opacity-50 animate-pulse"></div>
+                            <div class="relative w-32 h-32 rounded-[3.5rem] bg-white/95 backdrop-blur-xl flex items-center justify-center shadow-2xl rotate-12 group-hover:rotate-0 transition-transform duration-1000 border border-white">
+                                <MapPin size={48} className="text-brand-green" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Video-like overlay effect -->
+                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-brand-dark opacity-60 pointer-events-none z-10"></div>
+                </div>
+            </div>
+
+            <!-- Right: Content (Col 8-12) -->
+            <div class="col-span-1 md:col-span-12 lg:col-span-5 lg:col-start-8 flex flex-col items-center lg:items-start text-center lg:text-left mt-24 lg:mt-0">
+                <div class="inline-flex items-center gap-4 px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-white/40 text-[11px] font-bold uppercase tracking-[0.5em] mb-12">
+                    <Navigation size={16} />
+                    Locate the service
+                </div>
+
+                <h2 class="text-6xl md:text-8xl font-serif font-medium text-white mb-12 tracking-tight leading-[0.85]">
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line">Locate</span>
+                    </span>
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line italic text-brand-cream font-light">the summit</span>
+                    </span>
+                </h2>
+
+                <p class="text-xl md:text-2xl text-white/60 leading-relaxed mb-16 max-w-xl font-light italic">
+                    Satisfy your project needs with a name worth trusting. We serve our neighbors with pride and professional excellence.
+                </p>
+
+                <!-- Area Chips -->
+                <div class="flex flex-wrap justify-center lg:justify-start gap-4 mb-16">
+                    {areas.map((area) => (
+                        <div class="px-8 py-4 rounded-2xl bg-white/5 border border-white/10 text-white/80 text-sm md:text-base font-bold tracking-tight hover:bg-brand-green hover:border-brand-green hover:text-white transition-all cursor-default shadow-xl">
+                            {area}
+                        </div>
+                    ))}
+                </div>
+
+                <a 
+                    href="/contact" 
+                    class="inline-flex items-center gap-4 px-12 py-6 bg-brand-cream text-brand-green rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
+                >
+                    Where to Buy <ArrowRight size={18} />
+                </a>
+            </div>
+        </div>
+    </div>
+</section>

src/components/home/ServiceList.astro

@@ -0,0 +1,92 @@
+---
+import { Image } from "astro:assets";
+import { Check, Hammer, Settings, Home, Wrench, Trash2, Box, PenTool, Layout, ArrowRight } from "lucide-react";
+
+const services = [
+    { name: "Drywall Repair", icon: Box, stat: "Precise" },
+    { name: "Wallpaper Removal", icon: Layout, stat: "Clean" },
+    { name: "Trim Installation", icon: PenTool, stat: "Expert" },
+    { name: "Gutter Cleaning", icon: Settings, stat: "Reliable" },
+    { name: "Plumbing Fixtures", icon: Wrench, stat: "Modern" },
+    { name: "TV Mounting", icon: Home, stat: "Secure" },
+    { name: "Junk Removal", icon: Trash2, stat: "Efficient" },
+    { name: "General Repairs", icon: Hammer, stat: "Holistic" },
+];
+---
+
+<section class="py-32 md:py-48 lg:py-64 overflow-hidden">
+    <div class="container-brand relative">
+        <!-- Grid-12 Layout -->
+        <div class="grid-12 items-center">
+            <!-- Left: Content (Col 1-7) -->
+            <div class="col-span-1 md:col-span-12 lg:col-span-7">
+                <div class="inline-flex items-center gap-4 px-5 py-2.5 rounded-full bg-brand-green/5 text-brand-green text-[11px] font-bold uppercase tracking-[0.4em] mb-12">
+                    <span class="w-2 h-2 rounded-full bg-brand-green animate-pulse" />
+                    Complete Home Care
+                </div>
+
+                <h2 class="text-6xl md:text-8xl font-serif font-medium tracking-tight mb-12 text-brand-dark leading-[0.85]">
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line">More Than</span>
+                    </span>
+                    <span class="text-reveal-mask">
+                        <span class="text-reveal-line text-brand-green italic font-light">Just Painting</span>
+                    </span>
+                </h2>
+                
+                <p class="text-xl md:text-2xl text-brand-dark/60 leading-relaxed mb-16 max-w-2xl font-light italic">
+                    We handle the small jobs that make a big difference. From precise drywall repair to seamless fixture installation.
+                </p>
+                
+                <!-- Services Grid -->
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-16">
+                    {services.map((service) => (
+                        <div class="flex items-center justify-between p-6 rounded-[2rem] bg-white border border-brand-green/5 hover:bg-brand-cream/30 hover:shadow-xl transition-all group cursor-default">
+                            <div class="flex items-center gap-5">
+                                <div class="w-12 h-12 rounded-2xl bg-brand-cream flex items-center justify-center shadow-sm group-hover:bg-brand-green group-hover:text-white transition-all duration-500">
+                                    <service.icon size={20} />
+                                </div>
+                                <span class="text-brand-dark font-bold tracking-tight text-base">{service.name}</span>
+                            </div>
+                            <span class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                {service.stat}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+
+                <a href="/contact" class="inline-flex items-center gap-4 text-brand-green font-bold uppercase tracking-[0.3em] group/link text-xs">
+                    <span>Get Cookin' With A Quote</span>
+                    <div class="w-12 h-12 rounded-full border border-brand-green/20 flex items-center justify-center group-hover/link:bg-brand-green group-hover/link:text-white transition-all shadow-lg">
+                        <ArrowRight size={20} />
+                    </div>
+                </a>
+            </div>
+
+            <!-- Right: Image (Col 8-12) -->
+            <div class="col-span-1 md:col-span-12 lg:col-span-5 lg:col-start-8 mt-24 lg:mt-0">
+                <div class="relative group">
+                    <!-- Layered Textures -->
+                    <div class="absolute -top-12 -left-12 w-48 h-48 opacity-10 pointer-events-none z-0 rotate-12">
+                        <img src="/media/wall1.png" alt="" class="w-full h-full object-cover rounded-full" />
+                    </div>
+
+                    <div class="relative rounded-[4rem] overflow-hidden shadow-2xl transition-transform duration-[10s] group-hover:scale-[1.02] border border-brand-green/10 z-10">
+                        <img
+                            src="/media/painting2.png"
+                            alt="Professional service"
+                            class="w-full h-auto aspect-[4/5] object-cover grayscale group-hover:grayscale-0 transition-all duration-1000"
+                        />
+                        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/60 via-transparent to-brand-dark/20" />
+                    </div>
+
+                    <!-- Floating Stat Badge -->
+                    <div class="absolute -bottom-12 -right-8 bg-brand-dark text-white p-12 rounded-[3.5rem] shadow-2xl transform -rotate-3 group-hover:rotate-0 transition-transform duration-1000 border border-white/5 z-20">
+                        <p class="text-6xl font-serif font-medium mb-2 leading-none">200+</p>
+                        <p class="text-[11px] text-brand-cream/40 font-bold uppercase tracking-[0.4em] leading-none">Jobs Completed</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

src/components/home/WhyUs.astro

@@ -0,0 +1,87 @@
+---
+import { Image } from "astro:assets";
+---
+
+<section id="why-us" class="py-32 md:py-48 lg:py-64 overflow-hidden bg-brand-cream">
+    <div class="container-brand relative">
+        <h2 class="sr-only">Why Neighbors Trust Summit</h2>
+
+        <div class="grid-12">
+            <!-- Left: Main Value Card (Col 1-7) -->
+            <div class="col-span-1 md:col-span-12 lg:col-span-7 bg-white rounded-[4rem] p-12 md:p-20 shadow-2xl relative overflow-hidden group mb-12 lg:mb-0">
+                <div class="absolute inset-0 brush-texture opacity-[0.03] pointer-events-none"></div>
+                
+                <div class="relative z-10">
+                    <span class="inline-block text-[11px] font-bold uppercase tracking-[0.4em] text-brand-green/60 mb-10 reveal-item">Values & Ethics</span>
+                    <h3 class="text-5xl md:text-7xl font-serif font-medium tracking-tighter text-brand-dark uppercase leading-[0.85] mb-12">
+                        <span class="text-reveal-mask">
+                            <span class="text-reveal-line">Craftsmanship</span>
+                        </span>
+                        <span class="text-reveal-mask">
+                            <span class="text-reveal-line italic font-light opacity-40">In Every Detail</span>
+                        </span>
+                    </h3>
+                    <p class="text-xl md:text-2xl text-brand-dark/80 leading-relaxed font-light max-w-xl mb-16 italic">
+                        Our stewardship with our expert craftsmanship sets us apart. <span class="font-bold text-brand-dark">Premium painting</span> is the process to stay quality-focused and meticulous.
+                    </p>
+
+                    <!-- Trust Mini-Grid -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <div class="reveal-item transition-all duration-700 delay-100">
+                            <div class="w-3 h-3 rounded-full bg-brand-green mb-6" />
+                            <h4 class="font-bold text-brand-dark mb-3 uppercase tracking-widest text-[10px]">Detail</h4>
+                            <p class="text-brand-dark/40 text-sm leading-relaxed font-light">
+                                We scrape, sand, and prime diligently.
+                            </p>
+                        </div>
+                        <div class="reveal-item transition-all duration-700 delay-200">
+                            <div class="w-3 h-3 rounded-full bg-brand-sage mb-6" />
+                            <h4 class="font-bold text-brand-dark mb-3 uppercase tracking-widest text-[10px]">Fairness</h4>
+                            <p class="text-brand-dark/40 text-sm leading-relaxed font-light">
+                                No hidden fees. Detailed estimates.
+                            </p>
+                        </div>
+                        <div class="reveal-item transition-all duration-700 delay-300">
+                            <div class="w-3 h-3 rounded-full bg-brand-cream ring-1 ring-brand-green/10 mb-6" />
+                            <h4 class="font-bold text-brand-dark mb-3 uppercase tracking-widest text-[10px]">Reliability</h4>
+                            <p class="text-brand-dark/40 text-sm leading-relaxed font-light">
+                                Colorado Springs residents you can trust.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right: Image Tiles (Col 8-12) -->
+            <div class="col-span-1 md:col-span-12 lg:col-span-5 flex flex-col gap-12 lg:pl-12">
+                <!-- Image Tile 1 -->
+                <div class="relative h-[400px] rounded-[4rem] overflow-hidden shadow-2xl group reveal-item transition-all duration-1000">
+                    <img
+                        src="/media/cloth1.png"
+                        alt="Quality detail"
+                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110 grayscale group-hover:grayscale-0"
+                    />
+                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/60 via-transparent to-transparent opacity-80" />
+                    <div class="absolute bottom-10 left-10 text-white">
+                        <p class="text-[10px] font-bold uppercase tracking-[0.3em] opacity-60 mb-3">Texture</p>
+                        <p class="text-3xl font-serif">Meticulous Detail</p>
+                    </div>
+                </div>
+
+                <!-- Image Tile 2 -->
+                <div class="relative h-[300px] rounded-[4rem] overflow-hidden shadow-2xl group reveal-item transition-all duration-1000 delay-200">
+                    <img
+                        src="/media/mixing2.png"
+                        alt="Color mixing"
+                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110 grayscale group-hover:grayscale-0"
+                    />
+                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/60 via-transparent to-transparent opacity-80" />
+                    <div class="absolute bottom-10 left-10 text-white">
+                        <p class="text-[10px] font-bold uppercase tracking-[0.3em] opacity-60 mb-3">Process</p>
+                        <p class="text-3xl font-serif italic font-light">Hand-Mixed Perfection</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

src/components/site/Footer.astro

@@ -0,0 +1,158 @@
+---
+import { Image } from "astro:assets";
+import { Phone, Mail, MapPin, ArrowRight, Instagram, Facebook, Share2 } from "lucide-react";
+
+const currentYear = new Date().getFullYear();
+
+const services = [
+    { label: "Interior Painting", href: "/contact" },
+    { label: "Exterior Painting", href: "/contact" },
+    { label: "Deck Restoration", href: "/contact" },
+    { label: "Handyman Services", href: "/contact" },
+];
+
+const company = [
+    { label: "Our Expertise", href: "#services" },
+    { label: "Service Areas", href: "#areas" },
+    { label: "Contact Us", href: "/contact" },
+    { label: "About Our Craft", href: "#why-us" },
+];
+---
+
+<footer class="footer relative pb-20 overflow-hidden">
+    <div class="max-w-brand mx-auto px-6 relative z-10">
+        <!-- Footer Top: Social Bar -->
+        <div class="flex flex-col md:flex-row items-center justify-between py-12 border-b border-brand-green/10 mb-20">
+            <h3 class="text-3xl md:text-4xl font-serif font-medium text-brand-dark mb-8 md:mb-0">Like us wherever you like</h3>
+            <div class="flex items-center gap-6">
+                <a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
+                    <Instagram size={24} />
+                </a>
+                <a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
+                    <Facebook size={24} />
+                </a>
+                <a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
+                    <Share2 size={24} />
+                </a>
+            </div>
+        </div>
+
+        <!-- Footer Middle: Pill CTA + Hybrid Layout -->
+        <div class="relative mb-32">
+            <!-- Unified Footer CTA - The "Pill" -->
+            <div class="relative rounded-[4rem] bg-brand-green p-12 md:p-20 mb-24 overflow-hidden group shadow-2xl">
+                <!-- Brush Texture -->
+                <div class="absolute inset-0 opacity-[0.2] pointer-events-none mix-blend-overlay bg-[url('/media/brush1.png')] bg-cover bg-center" />
+                
+                <div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
+                    <div class="max-w-2xl text-center lg:text-left">
+                        <span class="inline-block text-[11px] font-bold uppercase tracking-[0.4em] text-brand-cream/60 mb-8">Start Your Transformation</span>
+                        <h2 class="text-5xl md:text-7xl font-serif font-medium text-white mb-8 tracking-tight leading-[0.9]">
+                            Quality That <br /> <span class="italic text-brand-cream font-light">Speaks For Itself</span>
+                        </h2>
+                        <p class="text-white/60 text-lg md:text-xl font-light max-w-xl">
+                            Experience the difference of meticulous attention to detail and premium materials.
+                        </p>
+                    </div>
+                    <div class="flex flex-col sm:flex-row items-center gap-6">
+                        <a
+                            href="/contact"
+                            class="px-12 py-6 bg-brand-cream text-brand-green rounded-full font-bold uppercase tracking-[0.3em] text-xs hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
+                        >
+                            Get Free Quote
+                        </a>
+                        <a
+                            href="tel:3124567890"
+                            class="px-10 py-6 bg-white/5 text-white border border-white/20 backdrop-blur-md rounded-full font-bold uppercase tracking-[0.3em] text-xs hover:bg-white/10 transition-all flex items-center justify-center gap-3"
+                        >
+                            <Phone size={18} />
+                            (312) 456-7890
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- The Hybrid Link Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
+                <!-- Brand Centerpiece (Mobile: Top, Desktop: Left) -->
+                <div class="md:col-span-4 flex flex-col items-center md:items-start text-center md:text-left">
+                    <picture>
+                        <source srcset="/media/logo-col.webp" type="image/webp" />
+                        <img
+                            src="/media/logo-col.png"
+                            alt="Summit Painting Logo"
+                            class="w-24 h-24 mb-10 opacity-90 transition-transform group-hover:scale-110"
+                        />
+                    </picture>
+                    <span class="text-3xl font-serif font-bold text-brand-dark tracking-tight mb-2">Summit Painting</span>
+                    <span class="text-[11px] text-brand-green font-bold uppercase tracking-[0.5em]">& Handyman Services</span>
+                    <p class="mt-10 text-brand-dark/40 text-base font-light italic max-w-[280px] leading-relaxed">
+                        "Craftsmanship is the root of our work, and your home is our canvas."
+                    </p>
+                </div>
+
+                <!-- Links Column 1: Services -->
+                <div class="md:col-span-2 flex flex-col items-center md:items-start">
+                    <h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Products</h3>
+                    <ul class="space-y-5">
+                        {services.map((link) => (
+                            <li>
+                                <a href={link.href} class="text-sm font-bold uppercase tracking-widest text-brand-dark/60 hover:text-brand-green transition-colors">
+                                    {link.label}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+
+                <!-- Links Column 2: Company -->
+                <div class="md:col-span-2 flex flex-col items-center md:items-start">
+                    <h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Company</h3>
+                    <ul class="space-y-5">
+                        {company.map((link) => (
+                            <li>
+                                <a href={link.href} class="text-sm font-bold uppercase tracking-widest text-brand-dark/60 hover:text-brand-green transition-colors">
+                                    {link.label}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+
+                <!-- Links Column 3: Contact Details -->
+                <div class="md:col-span-4 flex flex-col items-center md:items-end text-center md:text-right">
+                    <h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Contact</h3>
+                    <div class="space-y-8">
+                        <div>
+                            <p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Phone</p>
+                            <a href="tel:3124567890" class="text-2xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors">(312) 456-7890</a>
+                        </div>
+                        <div>
+                            <p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Email</p>
+                            <a href="mailto:summit@gmail.com" class="text-xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors">summit@gmail.com</a>
+                        </div>
+                        <div>
+                            <p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Location</p>
+                            <span class="text-lg font-serif font-medium text-brand-dark/60">Colorado Springs, CO</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer Bottom: Legal & Copyright -->
+        <div class="pt-12 border-t border-brand-green/5 flex flex-col md:flex-row items-center justify-between gap-8">
+            <p class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/30">
+                Copyright © {currentYear}, Summit Painting & Handyman Brands
+            </p>
+            <ul class="flex items-center gap-10">
+                <li>
+                    <a href="/terms" class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/40 hover:text-brand-green transition-colors">Terms & Conditions</a>
+                </li>
+                <li>
+                    <a href="/privacy" class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/40 hover:text-brand-green transition-colors">Privacy Policy</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</footer>

src/components/site/Nav.astro

@@ -0,0 +1,124 @@
+---
+import { ArrowRight, Menu, X, Phone } from "lucide-react";
+
+interface NavLink {
+    label: string;
+    href: string;
+}
+
+const links: NavLink[] = [
+    { label: "Services", href: "#services" },
+    { label: "Why Us", href: "#why-us" },
+    { label: "Areas", href: "#areas" },
+    { label: "Contact", href: "/contact" },
+];
+---
+
+<nav class="sticky top-0 z-50 w-full transition-all duration-500" id="main-nav">
+    <div class="bg-white/80 backdrop-blur-xl border-b border-stone-100/80 shadow-[0_2px_20px_-10px_rgba(0,0,0,0.05)]">
+        <div class="max-w-brand mx-auto px-6 py-4 md:py-5 flex items-center justify-between">
+            <!-- Logo -->
+            <a href="/" class="flex items-center gap-4 group">
+                <div class="relative">
+                    <div class="absolute inset-0 bg-brand-green/10 rounded-xl blur-md group-hover:blur-lg transition-all" />
+                    <picture>
+                        <source srcset="/media/logo-col.webp" type="image/webp" />
+                        <img
+                            src="/media/logo-col.png"
+                            alt="Summit Painting Logo"
+                            class="relative w-11 h-11 md:w-12 md:h-12 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+                            width="48"
+                            height="48"
+                        />
+                    </picture>
+                </div>
+                <div class="flex flex-col">
+                    <span class="text-lg md:text-xl font-serif font-bold tracking-tight text-brand-dark leading-none">
+                        Summit Painting
+                    </span>
+                    <span class="text-[10px] text-brand-green font-bold uppercase tracking-[0.2em] mt-1 hidden sm:block">
+                        & Handyman Services
+                    </span>
+                </div>
+            </a>
+
+            <!-- Desktop Navigation -->
+            <div class="hidden lg:flex items-center gap-10 text-[12px] font-bold uppercase tracking-[0.2em] text-brand-dark/60">
+                {links.map((link) => (
+                    <a
+                        href={link.href}
+                        class="hover:text-brand-green transition-all relative group py-2"
+                    >
+                        {link.label}
+                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-green transition-all group-hover:w-full" />
+                    </a>
+                ))}
+            </div>
+
+            <!-- Desktop CTA -->
+            <div class="hidden md:flex items-center gap-8">
+                <a
+                    href="tel:3124567890"
+                    class="flex items-center gap-3 text-sm font-bold text-brand-dark hover:text-brand-green transition-colors group"
+                >
+                    <div class="w-9 h-9 rounded-full bg-brand-green/5 flex items-center justify-center group-hover:bg-brand-green group-hover:text-white transition-all">
+                        <Phone size={14} />
+                    </div>
+                    <span>(312) 456-7890</span>
+                </a>
+                <a
+                    href="/contact"
+                    class="bg-brand-dark text-white text-[11px] font-bold uppercase tracking-[0.3em] px-8 py-4 rounded-full hover:bg-brand-green transition-all shadow-lg hover:shadow-brand-green/20 hover:-translate-y-0.5 flex items-center gap-3"
+                >
+                    <span>Free Estimate</span>
+                    <ArrowRight size={16} />
+                </a>
+            </div>
+
+            <!-- Mobile Menu Toggle -->
+            <details class="md:hidden group">
+                <summary class="list-none cursor-pointer p-2 -mr-2 rounded-xl hover:bg-stone-50 transition-colors">
+                    <Menu size={26} className="text-brand-dark group-open:hidden" />
+                    <X size={26} className="text-brand-dark hidden group-open:block" />
+                </summary>
+                
+                <div class="absolute top-full left-0 right-0 bg-white/95 backdrop-blur-2xl border-b border-stone-100 shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-4 duration-300">
+                    <div class="max-w-7xl mx-auto px-6 py-10 flex flex-col gap-8">
+                        {links.map((link) => (
+                            <a
+                                href={link.href}
+                                class="text-2xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors"
+                            >
+                                {link.label}
+                            </a>
+                        ))}
+                        <div class="h-px bg-stone-100" />
+                        <div class="flex flex-col gap-6">
+                            <a
+                                href="tel:3124567890"
+                                class="flex items-center gap-4 text-xl font-medium text-brand-dark"
+                            >
+                                <div class="w-12 h-12 rounded-2xl bg-brand-green/5 flex items-center justify-center">
+                                    <Phone size={20} />
+                                </div>
+                                (312) 456-7890
+                            </a>
+                            <a
+                                href="/contact"
+                                class="bg-brand-green text-white text-center font-bold uppercase tracking-widest px-8 py-5 rounded-3xl hover:bg-brand-dark transition-colors shadow-xl shadow-brand-green/10"
+                            >
+                                Get Free Estimate
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </details>
+        </div>
+    </div>
+</nav>
+
+<style>
+    details summary::-webkit-details-marker {
+        display: none;
+    }
+</style>

src/components/ui/Button.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+    href?: string;
+    variant?: "primary" | "secondary" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    class?: string;
+}
+
+const { 
+    href, 
+    variant = "primary", 
+    size = "md",
+    class: className = "" 
+} = Astro.props;
+
+const Tag = href ? "a" : "button";
+
+const baseStyles = "inline-flex items-center justify-center gap-3 font-bold uppercase tracking-[0.3em] text-[10px] transition-all duration-500 rounded-full text-center hover:-translate-y-0.5";
+
+const variants = {
+    primary: "bg-brand-green text-white hover:bg-brand-green-moody shadow-lg hover:shadow-brand-green/20",
+    secondary: "bg-brand-dark text-white hover:bg-black shadow-lg",
+    outline: "bg-transparent border border-brand-dark/20 text-brand-dark hover:border-brand-dark hover:bg-brand-dark hover:text-white",
+    ghost: "bg-brand-cream text-brand-green hover:bg-white shadow-xl hover:shadow-white/20",
+};
+
+const sizes = {
+    sm: "px-6 py-3",
+    md: "px-10 py-5",
+    lg: "px-12 py-6 text-[11px]",
+};
+---
+
+<Tag 
+    href={href}
+    class:list={[baseStyles, variants[variant], sizes[size], className]}
+>
+    <slot />
+</Tag>
+

src/components/ui/Container.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+    class?: string;
+    as?: "div" | "section" | "article" | "main" | "header" | "footer";
+}
+
+const { class: className = "", as: Tag = "div" } = Astro.props;
+---
+
+<Tag class:list={["max-w-brand mx-auto px-6", className]}>
+    <slot />
+</Tag>
+

src/components/ui/Marquee.astro

@@ -0,0 +1,52 @@
+---
+interface Props {
+    items: string[];
+    speed?: number;
+    reverse?: boolean;
+}
+
+const { items, speed = 20, reverse = false } = Astro.props;
+---
+
+<div class="marquee-container overflow-hidden whitespace-nowrap bg-brand-dark py-8 md:py-12 border-y border-white/5">
+    <div class:list={["marquee-content inline-block animate-marquee flex items-center", reverse && "animate-marquee-reverse"]}>
+        {Array(4).fill(0).map(() => (
+            <div class="flex items-center">
+                {items.map((item) => (
+                    <div class="mx-12 md:mx-20 flex items-center gap-8 md:gap-12">
+                        <span class="text-4xl md:text-7xl font-serif font-medium tracking-tight text-white uppercase opacity-80">
+                            {item}
+                        </span>
+                        <div class="w-3 h-3 md:w-4 md:h-4 rounded-full bg-brand-green"></div>
+                    </div>
+                ))}
+            </div>
+        ))}
+    </div>
+</div>
+
+<style>
+    @keyframes marquee {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-25%); }
+    }
+
+    @keyframes marquee-reverse {
+        0% { transform: translateX(-25%); }
+        100% { transform: translateX(0); }
+    }
+
+    .animate-marquee {
+        animation: marquee 30s linear infinite;
+    }
+
+    .animate-marquee-reverse {
+        animation: marquee-reverse 30s linear infinite;
+    }
+
+    .marquee-container:hover .animate-marquee,
+    .marquee-container:hover .animate-marquee-reverse {
+        animation-play-state: paused;
+    }
+</style>
+

src/components/ui/Section.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+    id?: string;
+    class?: string;
+    containerClass?: string;
+    background?: "default" | "white" | "dark" | "accent";
+}
+
+const { 
+    id,
+    class: className = "",
+    containerClass = "",
+    background = "default"
+} = Astro.props;
+
+const backgrounds = {
+    default: "bg-brand-cream",
+    white: "bg-white",
+    dark: "bg-brand-dark text-white",
+    accent: "bg-brand-green text-white",
+};
+---
+
+<section id={id} class:list={["py-32 md:py-48 lg:py-64", backgrounds[background], className]}>
+    <div class:list={["max-w-brand mx-auto px-6", containerClass]}>
+        <slot />
+    </div>
+</section>
+

src/components/ui/SectionHeading.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+    title: string;
+    subtitle?: string;
+    centered?: boolean;
+    class?: string;
+}
+
+const { title, subtitle, centered = false, class: className = "" } = Astro.props;
+---
+
+<div class:list={[centered && "text-center", "mb-12 md:mb-16", className]}>
+    <h2 class="text-3xl md:text-5xl font-serif font-medium tracking-tight text-brand-dark mb-4">
+        <Fragment set:html={title} />
+    </h2>
+    {subtitle && (
+        <p class="text-lg text-stone-500 leading-relaxed max-w-2xl" class:list={[centered && "mx-auto"]}>
+            {subtitle}
+        </p>
+    )}
+</div>
+

src/layouts/Layout.astro

@@ -30,9 +30,34 @@ import "../styles/global.css";
         <title>{title}</title>
     </head>
     <body
-        class="antialiased bg-stone-50 text-stone-800 selection:bg-[#739072] selection:text-white"
+        class="antialiased bg-brand-cream text-brand-dark selection:bg-brand-sage selection:text-white relative"
     >
-        <slot />
+        <!-- Page-wide Subtle Texture -->
+        <div class="fixed inset-0 brush-texture opacity-[0.015] pointer-events-none z-0"></div>
+        <div class="relative z-10">
+            <slot />
+        </div>
+
+        <script>
+            // Intersection Observer for Reveal Animations
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('is-in-view');
+                        // Once animated, no need to observe anymore
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, observerOptions);
+
+            // Observe all reveal masks and generic reveal items
+            document.querySelectorAll('.text-reveal-mask, .reveal-item').forEach(el => observer.observe(el));
+        </script>
     </body>
 </html>
 

src/pages/contact.astro

@@ -0,0 +1,234 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Nav from "../components/site/Nav.astro";
+import Footer from "../components/site/Footer.astro";
+import { Phone, Mail, MapPin, Clock, ArrowRight } from "lucide-react";
+import tileablePattern from "../assets/tileablepattern.png";
+
+// Contact info from design.json
+const contactInfo = {
+    phone: "(312) 456-7890",
+    email: "summit@gmail.com",
+    location: "Colorado Springs, CO",
+    hours: "Mon–Sat: 7am–6pm",
+};
+
+const serviceAreas = [
+    "Colorado Springs",
+    "Monument",
+    "Black Forest",
+    "Woodland Park",
+    "Manitou Springs",
+    "Fountain",
+];
+---
+
+<Layout title="Contact Us | Summit Painting & Handyman Services">
+    <Nav />
+    
+    <main class="w-full overflow-hidden bg-[#FAF9F6]">
+        <!-- Hero Section -->
+        <section class="relative py-16 md:py-24">
+            <!-- Pattern background -->
+            <div
+                class="absolute inset-0 opacity-[0.06] mix-blend-multiply pointer-events-none"
+                style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 520px;`}
+            />
+            
+            <div class="max-w-7xl mx-auto px-6 relative z-10">
+                <div class="text-center mb-12 md:mb-16">
+                    <h1 class="text-4xl md:text-6xl font-serif font-medium tracking-tight mb-6 text-brand-dark">
+                        Get in Touch
+                    </h1>
+                    <p class="text-lg md:text-xl text-stone-500 max-w-2xl mx-auto leading-relaxed">
+                        Ready to transform your home? Contact us for a free, no-obligation estimate. 
+                        We typically respond within 24 hours.
+                    </p>
+                </div>
+
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">
+                    <!-- Contact Info Card -->
+                    <div class="bg-white rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 shadow-sm border border-stone-100">
+                        <h2 class="text-2xl md:text-3xl font-serif font-medium mb-8 text-brand-dark">
+                            Contact Information
+                        </h2>
+                        
+                        <div class="space-y-6">
+                            <!-- Phone -->
+                            <a 
+                                href={`tel:${contactInfo.phone.replace(/[^0-9]/g, '')}`}
+                                class="flex items-start gap-4 group"
+                            >
+                                <div class="w-12 h-12 rounded-full bg-brand-green flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                                    <Phone size={20} className="text-white" />
+                                </div>
+                                <div>
+                                    <p class="text-sm font-medium text-stone-500 mb-1">Phone</p>
+                                    <p class="text-lg font-medium text-brand-dark group-hover:text-brand-green transition-colors">
+                                        {contactInfo.phone}
+                                    </p>
+                                </div>
+                            </a>
+
+                            <!-- Email -->
+                            <a 
+                                href={`mailto:${contactInfo.email}`}
+                                class="flex items-start gap-4 group"
+                            >
+                                <div class="w-12 h-12 rounded-full bg-brand-sage flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                                    <Mail size={20} className="text-white" />
+                                </div>
+                                <div>
+                                    <p class="text-sm font-medium text-stone-500 mb-1">Email</p>
+                                    <p class="text-lg font-medium text-brand-dark group-hover:text-brand-green transition-colors">
+                                        {contactInfo.email}
+                                    </p>
+                                </div>
+                            </a>
+
+                            <!-- Location -->
+                            <div class="flex items-start gap-4">
+                                <div class="w-12 h-12 rounded-full bg-stone-100 flex items-center justify-center flex-shrink-0">
+                                    <MapPin size={20} className="text-stone-600" />
+                                </div>
+                                <div>
+                                    <p class="text-sm font-medium text-stone-500 mb-1">Location</p>
+                                    <p class="text-lg font-medium text-brand-dark">
+                                        {contactInfo.location}
+                                    </p>
+                                </div>
+                            </div>
+
+                            <!-- Hours -->
+                            <div class="flex items-start gap-4">
+                                <div class="w-12 h-12 rounded-full bg-stone-100 flex items-center justify-center flex-shrink-0">
+                                    <Clock size={20} className="text-stone-600" />
+                                </div>
+                                <div>
+                                    <p class="text-sm font-medium text-stone-500 mb-1">Hours</p>
+                                    <p class="text-lg font-medium text-brand-dark">
+                                        {contactInfo.hours}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Service Areas -->
+                        <div class="mt-10 pt-8 border-t border-stone-100">
+                            <h3 class="text-lg font-serif font-medium mb-4 text-brand-dark">
+                                Service Areas
+                            </h3>
+                            <div class="flex flex-wrap gap-2">
+                                {serviceAreas.map((area) => (
+                                    <span class="px-3 py-1.5 rounded-full bg-stone-100 text-sm text-stone-700">
+                                        {area}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Contact Form Card -->
+                    <div class="bg-brand-green rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 text-white">
+                        <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4">
+                            Request a Free Estimate
+                        </h2>
+                        <p class="text-white/80 mb-8 leading-relaxed">
+                            Tell us about your project and we'll get back to you with a detailed estimate.
+                        </p>
+
+                        <form class="space-y-5" action={`mailto:${contactInfo.email}`} method="POST" enctype="text/plain">
+                            <div>
+                                <label for="name" class="block text-sm font-medium mb-2 text-white/90">
+                                    Your Name
+                                </label>
+                                <input
+                                    type="text"
+                                    id="name"
+                                    name="name"
+                                    required
+                                    class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors"
+                                    placeholder="John Smith"
+                                />
+                            </div>
+
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label for="phone" class="block text-sm font-medium mb-2 text-white/90">
+                                        Phone
+                                    </label>
+                                    <input
+                                        type="tel"
+                                        id="phone"
+                                        name="phone"
+                                        class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors"
+                                        placeholder="(555) 123-4567"
+                                    />
+                                </div>
+                                <div>
+                                    <label for="email" class="block text-sm font-medium mb-2 text-white/90">
+                                        Email
+                                    </label>
+                                    <input
+                                        type="email"
+                                        id="email"
+                                        name="email"
+                                        required
+                                        class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors"
+                                        placeholder="john@example.com"
+                                    />
+                                </div>
+                            </div>
+
+                            <div>
+                                <label for="service" class="block text-sm font-medium mb-2 text-white/90">
+                                    Service Needed
+                                </label>
+                                <select
+                                    id="service"
+                                    name="service"
+                                    class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors appearance-none cursor-pointer"
+                                >
+                                    <option value="" class="text-brand-dark">Select a service...</option>
+                                    <option value="interior-painting" class="text-brand-dark">Interior Painting</option>
+                                    <option value="exterior-painting" class="text-brand-dark">Exterior Painting</option>
+                                    <option value="deck-restoration" class="text-brand-dark">Deck Restoration</option>
+                                    <option value="handyman" class="text-brand-dark">Handyman Services</option>
+                                    <option value="other" class="text-brand-dark">Other</option>
+                                </select>
+                            </div>
+
+                            <div>
+                                <label for="message" class="block text-sm font-medium mb-2 text-white/90">
+                                    Project Details
+                                </label>
+                                <textarea
+                                    id="message"
+                                    name="message"
+                                    rows="4"
+                                    class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors resize-none"
+                                    placeholder="Tell us about your project..."
+                                ></textarea>
+                            </div>
+
+                            <button
+                                type="submit"
+                                class="w-full bg-white text-brand-green font-semibold px-6 py-4 rounded-full hover:bg-brand-cream transition-colors flex items-center justify-center gap-2 shadow-lg"
+                            >
+                                Send Request
+                                <ArrowRight size={18} />
+                            </button>
+                        </form>
+
+                        <p class="text-sm text-white/60 mt-6 text-center">
+                            We respect your privacy and never share your information.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    
+    <Footer />
+</Layout>
+

src/pages/index.astro

@@ -1,779 +1,26 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import {
-    Phone,
-    ArrowRight,
-    Paintbrush,
-    Hammer,
-    Check,
-    MapPin,
-    Trees,
-    Ruler,
-    Headset,
-    Coins,
-    ArrowDown,
-    LayoutGrid,
-    Box,
-    PaintRoller,
-} from "lucide-react";
-
-// Branding Colors (Refined for Eden Style):
-// Primary Dark: #1c1917 (Stone 950)
-// Accent Green: #3A4D39 (Deep Forest)
-// Background: #FAF9F6 (Stone 50)
-
-import { Image } from "astro:assets";
-import cardsImg from "../assets/cards.png";
-import puttyKnifeImg from "../assets/puttyknife2.png";
-import closeUpBrushImg from "../assets/closeupbrush4.png";
-import mountainsImg from "../assets/mountains.png";
-import tileablePattern from "../assets/tileablepattern.png";
-import brushImg from "../assets/brushandswatchestransparent.png";
+import Nav from "../components/site/Nav.astro";
+import Footer from "../components/site/Footer.astro";
+import Hero from "../components/home/Hero.astro";
+import ExpertiseMosaic from "../components/home/ExpertiseMosaic.astro";
+import Marquee from "../components/ui/Marquee.astro";
+import ServiceList from "../components/home/ServiceList.astro";
+import WhyUs from "../components/home/WhyUs.astro";
+import ServiceArea from "../components/home/ServiceArea.astro";
 ---
 
 <Layout title="Summit Painting & Handyman Services | Colorado Springs">
-    <!-- Navigation -->
-    <nav
-        class="sticky top-0 z-50 w-full bg-[#FAF9F6]/80 backdrop-blur-md border-b border-stone-100"
-    >
-        <div
-            class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"
-        >
-            <div class="flex items-center gap-3">
-                <picture>
-                    <source srcset="/media/logo-col.webp" type="image/webp" />
-                    <img
-                        src="/media/logo-col.png"
-                        alt="Summit Painting Logo"
-                        class="w-12 h-12"
-                        width="48"
-                        height="48"
-                    />
-                </picture>
-                <span
-                    class="text-xl font-serif font-medium tracking-tight text-[#1c1917]"
-                    >Summit Painting</span
-                >
-            </div>
-
-            <div
-                class="hidden md:flex items-center gap-8 text-sm font-medium text-stone-600"
-            >
-                <a
-                    href="#services"
-                    class="hover:text-[#3A4D39] transition-colors">Services</a
-                >
-                <a href="#why-us" class="hover:text-[#3A4D39] transition-colors"
-                    >Why Us</a
-                >
-                <a href="#areas" class="hover:text-[#3A4D39] transition-colors"
-                    >Areas</a
-                >
-                <a
-                    href="#contact"
-                    class="hover:text-[#3A4D39] transition-colors">Contact</a
-                >
-            </div>
-
-            <div class="flex items-center gap-4">
-                <a
-                    href="tel:7195550123"
-                    class="hidden sm:block text-sm font-medium text-stone-600 hover:text-[#3A4D39] transition-colors"
-                    >(719) 555-0123</a
-                >
-                <a
-                    href="#contact"
-                    class="bg-[#1c1917] text-white text-sm font-medium px-6 py-2.5 rounded-full hover:bg-stone-800 transition-colors flex items-center gap-2"
-                >
-                    <span>Free Estimate</span>
-                    <ArrowRight size={16} />
-                </a>
-            </div>
-        </div>
-    </nav>
-
-    <main class="w-full overflow-hidden bg-[#FAF9F6]">
-        <!-- Hero Section -->
-        <section class="relative mt-6">
-            <!-- Pattern lives OUTSIDE the hero card (matches reference) -->
-            <div
-                class="absolute inset-0 opacity-[0.10] mix-blend-multiply pointer-events-none"
-                style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 520px;`}
-            >
-            </div>
-
-            <div class="max-w-7xl mx-auto px-4 sm:px-6">
-                <div
-                    class="relative rounded-[3rem] px-10 py-12 md:px-16 md:py-16 overflow-hidden min-h-[520px] flex flex-col md:flex-row items-start md:items-center justify-between gap-10 bg-gradient-to-br from-[#4b664b] via-[#3A4D39] to-[#2a3b2a] shadow-[0_40px_110px_rgba(0,0,0,0.25)]"
-                >
-                    <!-- Soft vignette + highlight (smooth card look) -->
-                    <div
-                        class="absolute inset-0 pointer-events-none"
-                        style="background: radial-gradient(1200px circle at 18% 18%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(900px circle at 78% 30%, rgba(0,0,0,0.22), transparent 55%);"
-                    >
-                    </div>
-                    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/10 pointer-events-none"></div>
-
-                    <!-- Hero Content (Left) -->
-                    <div class="relative z-10 max-w-xl text-left">
-                        <h1
-                            class="text-5xl md:text-7xl lg:text-7xl font-serif font-normal tracking-tight leading-[1.05] mb-6 text-white"
-                        >
-                            Craftsmanship <br /> For Your Home
-                        </h1>
-
-                        <p
-                            class="text-base md:text-lg text-white/80 mb-8 max-w-md leading-relaxed font-light"
-                        >
-                            Elevate your living space with professional painting, wood
-                            restoration, and handyman services in Colorado Springs.
-                        </p>
-
-                        <div class="flex flex-col sm:flex-row items-center justify-start gap-4">
-                            <a
-                                href="#contact"
-                                class="min-w-[140px] bg-[#ECE3CE] text-[#3A4D39] text-sm font-medium px-6 py-3 rounded-full hover:bg-white transition-colors text-center shadow-sm"
-                            >
-                                Get a Quote
-                            </a>
-                            <a
-                                href="#services"
-                                class="min-w-[140px] bg-[#2f4231]/50 text-white border border-white/25 hover:bg-white/10 text-sm font-medium px-6 py-3 rounded-full transition-colors text-center"
-                            >
-                                View Services
-                            </a>
-                        </div>
-                    </div>
-
-                    <!-- Hero Visual (Right) -->
-                    <div class="relative z-10 flex-1 flex justify-center md:justify-end w-full">
-                        <div class="relative w-full max-w-[460px]">
-                            <!-- Circular backdrop behind brush/swatches -->
-                            <div
-                                class="absolute right-4 top-1/2 -translate-y-1/2 w-[320px] h-[320px] md:w-[360px] md:h-[360px] rounded-full bg-[#243224]/65"
-                            >
-                            </div>
-
-                            <!-- Main Brush & Swatches Image -->
-                            <Image
-                                src={brushImg}
-                                alt="Paint brush and color swatches"
-                                class="relative z-10 w-full h-auto drop-shadow-2xl translate-x-2 md:translate-x-4 scale-[0.94]"
-                            />
-
-                            <!-- Floating Card: Deck Restoration -->
-                            <div
-                                class="absolute right-0 top-6 bg-white/95 backdrop-blur-sm px-5 py-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform rotate-[4deg] hover:rotate-0 transition-transform duration-500 ring-1 ring-black/5"
-                            >
-                                <div class="flex items-start justify-between gap-3 mb-3">
-                                    <div class="flex items-center gap-2">
-                                        <div class="w-9 h-9 rounded-full bg-[#3A4D39] flex items-center justify-center">
-                                            <Trees size={18} className="text-white" />
-                                        </div>
-                                        <div class="text-left">
-                                            <p class="text-sm font-serif font-bold text-stone-900">
-                                                Deck Restoration
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <span class="text-[10px] font-semibold bg-stone-100 text-stone-600 px-2 py-1 rounded-full">
-                                        Exterior
-                                    </span>
-                                </div>
-                                <div class="flex items-center gap-2">
-                                    <div class="w-3 h-3 rounded-full bg-[#3A4D39]"></div>
-                                    <div class="w-3 h-3 rounded-full bg-[#739072]"></div>
-                                    <div class="w-3 h-3 rounded-full bg-[#ECE3CE] ring-1 ring-black/5"></div>
-                                </div>
-                            </div>
-
-                            <!-- Floating Card: Ext. Paint -->
-                            <div
-                                class="absolute right-2 top-[58%] -translate-y-1/2 bg-white/95 backdrop-blur-sm px-5 py-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform -rotate-[3deg] hover:rotate-0 transition-transform duration-500 ring-1 ring-black/5"
-                            >
-                                <div class="flex items-center gap-3 mb-3">
-                                    <div class="w-9 h-9 rounded-full bg-stone-100 flex items-center justify-center ring-1 ring-black/5">
-                                        <PaintRoller size={18} className="text-stone-700" />
-                                    </div>
-                                    <div class="text-left">
-                                        <p class="text-xs font-bold text-stone-900 leading-none">Ext. Paint</p>
-                                        <p class="text-[10px] uppercase tracking-widest text-stone-400 mt-1">
-                                            Woodwork Care
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="h-1.5 w-full bg-stone-100 rounded-full overflow-hidden">
-                                    <div class="h-full w-[72%] bg-[#739072]"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Expertise Mosaic (matches reference grid layout) -->
-        <section id="services" class="relative py-16 md:py-20">
-            <h2 class="sr-only">Our Expertise</h2>
-
-            <!-- Patterned frame background -->
-            <div class="absolute inset-0 pointer-events-none">
-                <div
-                    class="absolute inset-0 opacity-[0.10] mix-blend-multiply"
-                    style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 520px;`}
-                >
-                </div>
-                <!-- subtle vignette -->
-                <div class="absolute inset-0 bg-gradient-to-b from-[#FAF9F6] via-transparent to-[#FAF9F6]"></div>
-            </div>
-
-            <div class="max-w-7xl mx-auto px-6 relative z-10">
-                <div class="bg-[#FAF9F6]/80 backdrop-blur-[1px] border border-stone-300/60 shadow-[0_30px_90px_rgba(0,0,0,0.08)] overflow-hidden">
-                    <!-- Top pattern strip -->
-                    <div
-                        class="h-20 opacity-[0.25]"
-                        style={`background-image: url(${tileablePattern.src}); background-repeat: repeat-x; background-size: 520px;`}
-                    >
-                    </div>
-
-                    <!-- Mosaic grid -->
-                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-                        <!-- Row 1 / Col 1: Premium Painting (icon tile) -->
-                        <div class="bg-gradient-to-b from-[#f5efe2] to-[#efe6d2] border-r border-b border-stone-200/80 p-10 flex flex-col items-center justify-center text-center gap-6 min-h-[210px]">
-                            <div class="w-14 h-14 rounded-full bg-white/70 border border-stone-200 flex items-center justify-center shadow-sm">
-                                <Paintbrush size={26} className="text-stone-900" />
-                            </div>
-                            <p class="text-lg font-semibold tracking-wide text-stone-900 uppercase leading-tight">
-                                Premium<br />Painting
-                            </p>
-                        </div>
-
-                        <!-- Row 1 / Col 2: Image -->
-                        <div class="relative border-r border-b border-stone-200/80 min-h-[210px]">
-                            <Image
-                                src={closeUpBrushImg}
-                                alt="Premium painting detail"
-                                class="absolute inset-0 w-full h-full object-cover"
-                            />
-                            <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/5"></div>
-                        </div>
-
-                        <!-- Row 1 / Col 3: Wood Restoration (icon tile) -->
-                        <div class="bg-gradient-to-b from-[#f5efe2] to-[#efe6d2] border-r border-b border-stone-200/80 p-10 flex flex-col items-center justify-center text-center gap-6 min-h-[210px]">
-                            <div class="w-14 h-14 rounded-full bg-white/70 border border-stone-200 flex items-center justify-center shadow-sm">
-                                <Trees size={26} className="text-stone-900" />
-                            </div>
-                            <p class="text-lg font-semibold tracking-wide text-stone-900 uppercase leading-tight">
-                                Wood<br />Restoration
-                            </p>
-                        </div>
-
-                        <!-- Row 1 / Col 4: Image -->
-                        <div class="relative border-b border-stone-200/80 min-h-[210px]">
-                            <Image
-                                src={puttyKnifeImg}
-                                alt="Handyman work detail"
-                                class="absolute inset-0 w-full h-full object-cover"
-                            />
-                            <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/5"></div>
-                        </div>
-
-                        <!-- Row 2 / Col 1: Handyman Services (icon tile) -->
-                        <div class="bg-gradient-to-b from-[#f5efe2] to-[#efe6d2] border-r border-stone-200/80 p-10 flex flex-col items-center justify-center text-center gap-6 min-h-[210px]">
-                            <div class="w-14 h-14 rounded-full bg-white/70 border border-stone-200 flex items-center justify-center shadow-sm">
-                                <Hammer size={26} className="text-stone-900" />
-                            </div>
-                            <p class="text-lg font-semibold tracking-wide text-stone-900 uppercase leading-tight">
-                                Handyman<br />Services
-                            </p>
-                        </div>
-
-                        <!-- Row 2 / Col 2: Premium Painting (text tile) -->
-                        <div class="bg-gradient-to-b from-[#fbf7ee] to-[#f1e8d6] border-r border-stone-200/80 p-10 flex flex-col justify-center gap-4 min-h-[210px]">
-                            <p class="text-base font-bold tracking-wide text-stone-900 uppercase leading-tight">
-                                Premium<br />Painting
-                            </p>
-                            <p class="text-stone-700 leading-relaxed">
-                                Interior & exterior painting with meticulous prep, premium materials, and clean finishes that last.
-                            </p>
-                        </div>
-
-                        <!-- Row 2 / Col 3: Image -->
-                        <div class="relative border-r border-stone-200/80 min-h-[210px]">
-                            <Image
-                                src={cardsImg}
-                                alt="Wood stain and finish samples"
-                                class="absolute inset-0 w-full h-full object-cover"
-                            />
-                            <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/5"></div>
-                        </div>
-
-                        <!-- Row 2 / Col 4: Handyman Services (text tile) -->
-                        <div class="bg-gradient-to-b from-[#fbf7ee] to-[#f1e8d6] p-10 flex flex-col justify-center gap-4 min-h-[210px]">
-                            <p class="text-base font-bold tracking-wide text-stone-900 uppercase leading-tight">
-                                Handyman<br />Services
-                            </p>
-                            <p class="text-stone-700 leading-relaxed">
-                                Reliable repairs and improvements—from drywall and trim to fixture installs—done with care and precision.
-                            </p>
-                        </div>
-                    </div>
-
-                    <!-- Bottom pattern strip -->
-                    <div
-                        class="h-20 opacity-[0.25] border-t border-stone-200/80"
-                        style={`background-image: url(${tileablePattern.src}); background-repeat: repeat-x; background-size: 520px;`}
-                    >
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Feature: Complete Service List (Eden Style) -->
-        <section id="all-services" class="max-w-7xl mx-auto px-6 mb-32">
-            <div
-                class="bg-white rounded-[3rem] p-8 md:p-16 flex flex-col-reverse md:flex-row items-center gap-16 shadow-sm border border-stone-100"
-            >
-                <div class="w-full md:w-1/2">
-                    <h2
-                        class="text-3xl md:text-5xl font-serif font-medium tracking-tight mb-6 text-[#1c1917]"
-                    >
-                        More Than Just <br /> Painting
-                    </h2>
-                    <p class="text-lg text-stone-500 leading-relaxed mb-10">
-                        We handle the small jobs too. From drywall repair to
-                        fixture installation, we are your holistic home care
-                        partners.
-                    </p>
-                    <div class="grid grid-cols-2 gap-y-5 gap-x-8">
-                        <!-- Column 1 -->
-                        <div class="space-y-4">
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >Drywall Repair</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >Wallpaper Removal</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >Trim Installation</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >Gutter Cleaning</span
-                                >
-                            </div>
-                        </div>
-                        <!-- Column 2 -->
-                        <div class="space-y-4">
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >Plumbing Fixtures</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >TV Mounting</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >Junk Removal</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-3 group">
-                                <div
-                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
-                                >
-                                    <Check
-                                        size={14}
-                                        className="text-stone-400 group-hover:text-white"
-                                    />
-                                </div>
-                                <span class="text-stone-700 font-medium"
-                                    >General Repairs</span
-                                >
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div
-                    class="w-full md:w-1/2 relative h-[450px] flex items-center justify-center p-8"
-                >
-                    <!-- Large Sage Circle Back drop -->
-                    <div
-                        class="w-[400px] h-[400px] bg-[#739072]/10 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-                    >
-                    </div>
-
-                    <!-- Cards Image -->
-                    <Image
-                        src={cardsImg}
-                        alt="Service cards deck"
-                        class="relative z-10 w-full max-w-xl h-auto object-contain drop-shadow-2xl rounded-[2.5rem] hover:scale-105 transition-transform duration-700"
-                    />
-                </div>
-            </div>
-        </section>
-
-        <!-- Why Us Section -->
-        <section id="why-us" class="max-w-7xl mx-auto px-6 mb-24">
-            <h2
-                class="text-3xl md:text-5xl font-serif font-medium tracking-tight mb-16 text-[#1c1917] text-center"
-            >
-                Why Neighbors Trust Summit
-            </h2>
-
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- Card 1 -->
-                <div
-                    class="bg-stone-100 rounded-[2rem] p-8 hover:bg-white hover:shadow-lg transition-all border border-transparent hover:border-stone-100"
-                >
-                    <div
-                        class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
-                    >
-                        <Ruler size={20} className="text-white" />
-                    </div>
-                    <h3
-                        class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
-                    >
-                        Attention to Detail
-                    </h3>
-                    <p class="text-stone-600 leading-relaxed text-sm">
-                        The difference is in the prep. We scrape, sand, and
-                        prime diligently so your finish lasts for years, not
-                        months.
-                    </p>
-                </div>
-
-                <!-- Card 2 -->
-                <div
-                    class="bg-stone-100 rounded-[2rem] p-8 hover:bg-white hover:shadow-lg transition-all border border-transparent hover:border-stone-100"
-                >
-                    <div
-                        class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
-                    >
-                        <Coins size={20} className="text-white" />
-                    </div>
-                    <h3
-                        class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
-                    >
-                        Fair & Transparent
-                    </h3>
-                    <p class="text-stone-600 leading-relaxed text-sm">
-                        No hidden fees. We provide detailed, written estimates
-                        explaining exactly what you are paying for and why.
-                    </p>
-                </div>
-
-                <!-- Card 3 -->
-                <div
-                    class="bg-stone-100 rounded-[2rem] p-8 hover:bg-white hover:shadow-lg transition-all border border-transparent hover:border-stone-100"
-                >
-                    <div
-                        class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
-                    >
-                        <Headset size={20} className="text-white" />
-                    </div>
-                    <h3
-                        class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
-                    >
-                        Local & Reliable
-                    </h3>
-                    <p class="text-stone-600 leading-relaxed text-sm">
-                        We are proud Colorado Springs residents. We show up when
-                        we say we will and communicate clearly.
-                    </p>
-                </div>
-            </div>
-        </section>
-
-        <!-- Service Area -->
-        <section id="areas" class="max-w-7xl mx-auto px-6 mb-24">
-            <div
-                class="bg-[#1c1917] rounded-[3rem] p-8 md:p-16 text-white relative overflow-hidden"
-            >
-                <div
-                    class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-12"
-                >
-                    <div class="max-w-md">
-                        <div
-                            class="flex items-center gap-2 mb-4 text-[#739072]"
-                        >
-                            <MapPin size={20} />
-                            <span
-                                class="text-sm font-bold uppercase tracking-wider"
-                                >Service Area</span
-                            >
-                        </div>
-                        <h2
-                            class="text-3xl md:text-5xl font-serif font-medium mb-6"
-                        >
-                            Proudly Serving Pikes Peak
-                        </h2>
-                        <p class="text-stone-400 leading-relaxed mb-8">
-                            We cover Colorado Springs and the surrounding
-                            mountain communities.
-                        </p>
-                        <div class="flex flex-wrap gap-2">
-                            <span
-                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
-                                >Colorado Springs</span
-                            >
-                            <span
-                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
-                                >Monument</span
-                            >
-                            <span
-                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
-                                >Black Forest</span
-                            >
-                            <span
-                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
-                                >Woodland Park</span
-                            >
-                        </div>
-                    </div>
-
-                    <div
-                        class="relative w-full md:w-[400px] h-64 bg-[#2a2725] rounded-2xl overflow-hidden border border-stone-700 flex items-center justify-center group"
-                    >
-                        <div class="absolute inset-0 bg-[#3A4D39]/20"></div>
-
-                        <div
-                            class="relative z-10 flex flex-col items-center gap-3"
-                        >
-                            <MapPin
-                                size={32}
-                                className="text-[#739072] drop-shadow-md"
-                            />
-                            <p
-                                class="text-stone-400 text-sm font-medium tracking-wide"
-                            >
-                                Serving Colorado Springs
-                            </p>
-                        </div>
-
-                        <!-- Pulse Effect -->
-                        <div
-                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-[#739072]/10 rounded-full blur-xl animate-pulse"
-                        >
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
+    <Nav />
+    
+    <main class="w-full overflow-hidden bg-brand-cream">
+        <Hero />
+        <ExpertiseMosaic />
+        <Marquee items={["Trustworthy", "Editorial", "Organic", "Sturdy"]} />
+        <ServiceList />
+        <WhyUs />
+        <ServiceArea />
     </main>
-
-    <!-- Hybrid Footer / Rounded CTA -->
-    <footer class="mt-24">
-        <!-- Footer Top: Branding Section -->
-        <div class="bg-[#3A4D39] text-[#ECE3CE] py-16 px-6 rounded-t-[3rem]">
-            <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-12">
-                <div class="flex flex-col items-center md:items-start gap-4">
-                    <div class="flex items-center gap-4">
-                        <picture>
-                            <source srcset="/media/logo-white.webp" type="image/webp" />
-                            <img src="/media/logo-white.png" alt="Summit Painting Logo" class="w-20 h-20" width="80" height="80" />
-                        </picture>
-                        <span class="text-4xl md:text-5xl font-serif font-bold tracking-tighter uppercase">Summit</span>
-                    </div>
-                </div>
-                
-                <div class="max-w-xl text-center md:text-left">
-                    <h2 class="text-3xl md:text-5xl font-serif font-medium mb-6 leading-tight">
-                        Rooted in Colorado Springs, <br /> Driven by Quality.
-                    </h2>
-                    <p class="text-stone-200 leading-relaxed font-light">
-                        We are a local team dedicated to bringing premium craftsmanship and a personal touch to every project. Our commitment is to trustworthy service, attention to detail, and enhancing the beauty of your home.
-                    </p>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer Bottom: CTA & Links -->
-        <div class="bg-[#1c1917] text-white pt-24 pb-12">
-            <div class="max-w-7xl mx-auto px-6">
-                <!-- Large CTA Section -->
-                <div class="text-center mb-24 border-b border-stone-800 pb-20">
-                    <h2
-                        class="text-4xl md:text-6xl font-serif font-medium tracking-tight mb-8 text-white max-w-2xl mx-auto leading-tight"
-                    >
-                        Ready to Transform <br /> Your Home?
-                    </h2>
-                    <p class="text-xl text-stone-400 mb-10 max-w-lg mx-auto">
-                        Get a free, detailed estimate for your painting or handyman
-                        project today.
-                    </p>
-                    <div
-                        class="flex flex-col sm:flex-row items-center justify-center gap-4"
-                    >
-                        <a
-                            href="tel:7195550123"
-                            class="min-w-[200px] bg-white text-[#1c1917] text-lg font-medium px-8 py-4 rounded-full hover:bg-stone-200 transition-colors shadow-lg flex items-center justify-center gap-2"
-                        >
-                            <Phone size={20} />
-                            Call Now
-                        </a>
-                        <a
-                            href="mailto:contact@summitpainting.com"
-                            class="min-w-[200px] bg-transparent text-white border border-stone-600 text-lg font-medium px-8 py-4 rounded-full hover:border-white hover:bg-white/5 transition-colors flex items-center justify-center gap-2"
-                        >
-                            Send Email
-                        </a>
-                    </div>
-                </div>
-
-                <!-- Footer Links -->
-                <div class="flex flex-col md:flex-row justify-between gap-12 mb-16">
-                    <div>
-                        <div class="flex items-center gap-2 mb-6">
-                            <picture>
-                                <source
-                                    srcset="/media/logo-white.webp"
-                                    type="image/webp"
-                                />
-                                <img
-                                    src="/media/logo-white.png"
-                                    alt="Summit Painting Logo"
-                                    class="w-12 h-12"
-                                    width="48"
-                                    height="48"
-                                />
-                            </picture>
-                            <span
-                                class="text-xl font-serif font-medium tracking-tight"
-                                >Summit Painting</span
-                            >
-                        </div>
-                        <p class="text-stone-400 max-w-xs leading-relaxed">
-                            Quality craftsmanship and honest service for Colorado
-                            Springs and beyond.
-                        </p>
-                    </div>
-                    <div class="flex flex-wrap gap-12 md:gap-24 text-sm">
-                        <div class="flex flex-col gap-4">
-                            <span class="font-bold text-white tracking-wide"
-                                >Services</span
-                            >
-                            <a
-                                href="#"
-                                class="text-stone-400 hover:text-white transition-colors"
-                                >Painting</a
-                            >
-                            <a
-                                href="#"
-                                class="text-stone-400 hover:text-white transition-colors"
-                                >Deck Restoration</a
-                            >
-                            <a
-                                href="#"
-                                class="text-stone-400 hover:text-white transition-colors"
-                                >Handyman</a
-                            >
-                        </div>
-                        <div class="flex flex-col gap-4">
-                            <span class="font-bold text-white tracking-wide"
-                                >Company</span
-                            >
-                            <a
-                                href="#why-us"
-                                class="text-stone-400 hover:text-white transition-colors"
-                                >About Us</a
-                            >
-                            <a
-                                href="#areas"
-                                class="text-stone-400 hover:text-white transition-colors"
-                                >Service Areas</a
-                            >
-                            <a
-                                href="#contact"
-                                class="text-stone-400 hover:text-white transition-colors"
-                                >Contact</a
-                            >
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Bottom Bar -->
-                <div
-                    class="pt-8 border-t border-stone-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-stone-500"
-                >
-                    <p>
-                        &copy; {new Date().getFullYear()} Summit Painting & Handyman Services.
-                    </p>
-                    <div class="flex gap-6">
-                        <a href="#" class="hover:text-white transition-colors"
-                            >Privacy</a
-                        >
-                        <a href="#" class="hover:text-white transition-colors"
-                            >Terms</a
-                        >
-                    </div>
-                </div>
-            </div>
-        </div>
-    </footer>
+    
+    <Footer />
 </Layout>