From 0e57ee069d211dadd20ae644c30f77cc9735c7ac Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Sat, 27 Dec 2025 07:32:51 -0700
Subject: [PATCH] burger

---
 dev/continuity.md     |  37 +++++
 src/pages/index.astro | 325 ++++++++++++++++++++++++++----------------
 2 files changed, 241 insertions(+), 121 deletions(-)

diff --git a/dev/continuity.md b/dev/continuity.md
index 9aca724..e8230c3 100644
--- a/dev/continuity.md
+++ b/dev/continuity.md
@@ -52,6 +52,43 @@ Development log for tracking changes, decisions, and next steps.
 
 ---
 
+## 2025-12-27 - Hero Screenshot Match Polish
+
+### Changes
+- **Hero background treatment**:
+  - Moved the tileable pattern so it lives *outside* the hero card (page background) to match the reference composition.
+  - Updated the hero card to a smoother forest gradient with a soft vignette/highlight, closer to the mock.
+- **Hero visual composition**:
+  - Added/strengthened the circular backdrop behind the brush/swatches image.
+  - Nudged/scaled the brush/swatches to reveal more of the circle and create more negative space.
+  - Repositioned/restyled the floating cards so they sit closer to the brush/circle like the provided screenshot.
+- **CTA styling**:
+  - Tweaked the secondary button to have a subtle dark fill + light border (instead of fully transparent) to better match the mock.
+
+### Decisions
+- Prioritized matching the mock’s “pattern outside the card” framing over keeping texture inside the hero card.
+
+### Next Steps
+- [ ] Replace the floating card text/labels (e.g. “Woodwork Care”) with final approved copy (if needed).
+
+---
+
+## 2025-12-27 - Expertise Mosaic Redesign
+
+### Changes
+- Replaced the prior 3-card “Our Expertise” layout with a **2-row mosaic grid** (icon tiles + image tiles + text tiles) to match the provided screenshot.
+- Added a **patterned frame treatment** for the expertise section using `src/assets/tileablepattern.png`, including top/bottom pattern strips and subtle vignette.
+- Reused existing site imagery assets (`closeupbrush4.png`, `cards.png`, `puttyknife2.png`) for the mosaic image tiles.
+
+### Decisions
+- Kept the section’s semantic heading (`h2`) as **screen-reader-only** to preserve accessibility while matching the screenshot’s visual layout.
+- Implemented the mosaic with a responsive grid: stacks to 1 column on mobile, 2 columns on small screens, 4 columns on desktop.
+
+### Next Steps
+- [ ] Review and approve the tile text copy (Premium Painting / Handyman Services descriptions).
+
+---
+
 ## 2025-12-27 - Logo Integration & Favicon Generation
 
 ### Changes
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fdc5d88..3531791 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,6 @@ import {
     Paintbrush,
     Hammer,
     Check,
-    Star,
     MapPin,
     Trees,
     Ruler,
@@ -95,153 +94,237 @@ import brushImg from "../assets/brushandswatchestransparent.png";
 
     <main class="w-full overflow-hidden bg-[#FAF9F6]">
         <!-- Hero Section -->
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6">
+        <section class="relative mt-6">
+            <!-- Pattern lives OUTSIDE the hero card (matches reference) -->
             <div
-                class="relative bg-[#3A4D39] rounded-[3rem] p-8 md:p-16 overflow-hidden min-h-[700px] flex flex-col md:flex-row items-center justify-between gap-12"
+                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;`}
             >
-                <!-- Tileable Pattern Overlay -->
-                <div 
-                    class="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
-                    style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 400px;`}
-                ></div>
+            </div>
 
-                <!-- Hero Content (Left) -->
-                <div class="relative z-10 max-w-xl text-center md:text-left mt-8 md:mt-0">
+            <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="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/90 text-sm font-medium mb-8"
+                        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%);"
                     >
-                        <Star size={14} className="text-[#ECE3CE]" fill="#ECE3CE" />
-                        <span>Colorado Springs' Trusted Partner</span>
                     </div>
+                    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/10 pointer-events-none"></div>
 
-                    <h1
-                        class="text-5xl md:text-7xl lg:text-8xl font-serif font-normal tracking-tight leading-[1.1] mb-8 text-white"
-                    >
-                        Craftsmanship <br /> For Your Home
-                    </h1>
-
-                    <p
-                        class="text-xl text-stone-200 mb-10 max-w-md mx-auto md:mx-0 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-center md:justify-start gap-4"
-                    >
-                        <a
-                            href="#contact"
-                            class="min-w-[160px] bg-[#ECE3CE] text-[#3A4D39] text-base font-medium px-8 py-4 rounded-full hover:bg-white transition-colors text-center"
+                    <!-- 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"
                         >
-                            Get a Quote
-                        </a>
-                        <a
-                            href="#services"
-                            class="min-w-[160px] text-white border border-white/30 hover:bg-white/10 text-base font-medium px-8 py-4 rounded-full transition-colors backdrop-blur-sm text-center"
-                        >
-                            View Services
-                        </a>
-                    </div>
-                </div>
+                            Craftsmanship <br /> For Your Home
+                        </h1>
 
-                <!-- Hero Visual (Right) -->
-                <div class="relative z-10 flex-1 flex justify-center items-center w-full">
-                    <div class="relative w-full max-w-[500px]">
-                        <!-- Main Brush & Swatches Image -->
-                        <Image
-                            src={brushImg}
-                            alt="Paint brush and color swatches"
-                            class="w-full h-auto drop-shadow-2xl"
-                        />
-
-                        <!-- Floating Card 1: Deck Restoration -->
-                        <div
-                            class="absolute -right-4 top-[10%] bg-white p-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform rotate-[6deg] hover:rotate-0 transition-transform duration-500"
+                        <p
+                            class="text-base md:text-lg text-white/80 mb-8 max-w-md leading-relaxed font-light"
                         >
-                            <div class="flex justify-between items-start mb-3">
-                                <div class="w-10 h-10 rounded-full bg-[#3A4D39] flex items-center justify-center">
-                                    <Trees size={20} className="text-white" />
-                                </div>
-                                <span class="text-[10px] font-bold bg-stone-100 text-stone-600 px-2 py-1 rounded">Exterior</span>
-                            </div>
-                            <p class="text-sm font-serif font-bold text-stone-900 mb-2">Deck Restoration</p>
-                            <div class="flex gap-2">
-                                <div class="w-4 h-4 rounded-full bg-[#3A4D39]"></div>
-                                <div class="w-4 h-4 rounded-full bg-[#739072]"></div>
-                                <div class="w-4 h-4 rounded-full bg-[#ECE3CE]"></div>
-                            </div>
+                            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>
 
-                        <!-- Floating Card 2: Ext. Paint -->
-                        <div
-                            class="absolute -left-8 bottom-[20%] bg-white p-4 rounded-2xl shadow-2xl w-48 hidden lg:block transform -rotate-[6deg] hover:rotate-0 transition-transform duration-500"
-                        >
-                            <div class="flex items-center gap-3 mb-3">
-                                <div class="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
-                                    <PaintRoller size={20} className="text-stone-600" />
+                    <!-- 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="text-left">
-                                    <p class="text-xs font-bold text-stone-900">Ext. Paint</p>
-                                    <p class="text-[10px] text-stone-500">In Progress</p>
+                                <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>
-                            <div class="h-1.5 w-full bg-stone-100 rounded-full overflow-hidden">
-                                <div class="h-full w-[75%] bg-[#739072]"></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>
-        </div>
+        </section>
 
-        <!-- Core Services Section -->
-        <section id="services" class="max-w-7xl mx-auto px-6 py-24">
-            <h2 class="text-4xl md:text-5xl font-serif font-medium text-[#1c1917] mb-16 text-center">
-                Our Expertise
-            </h2>
+        <!-- Expertise Mosaic (matches reference grid layout) -->
+        <section id="services" class="relative py-16 md:py-20">
+            <h2 class="sr-only">Our Expertise</h2>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- Card 1: Interior & Exterior Painting -->
-                <div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
-                    <div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
-                        <Image src={closeUpBrushImg} alt="Interior & Exterior Painting" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
-                    </div>
-                    <h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Interior & Exterior Painting</h3>
-                    <p class="text-stone-100 mb-8 leading-relaxed text-sm">
-                        Flawless finishes for your home's interior and exterior, using premium materials and meticulous techniques.
-                    </p>
-                    <a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
-                        Learn More
-                    </a>
+            <!-- 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>
 
-                <!-- Card 2: Wood Restoration -->
-                <div class="bg-[#3A4D39] rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
-                    <div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
-                        <Image src={cardsImg} alt="Wood Restoration" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
+            <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>
-                    <h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Wood Restoration</h3>
-                    <p class="text-stone-100 mb-8 leading-relaxed text-sm">
-                        Revitalizing your decks, fences, and woodwork, restoring their natural beauty and protecting them for years.
-                    </p>
-                    <a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
-                        Learn More
-                    </a>
-                </div>
 
-                <!-- Card 3: Skilled Handyman -->
-                <div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
-                    <div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
-                        <Image src={puttyKnifeImg} alt="Skilled Handyman" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
+                    <!-- 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>
-                    <h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Skilled Handyman</h3>
-                    <p class="text-stone-100 mb-8 leading-relaxed text-sm">
-                        Reliable solutions for a wide range of home repairs and improvements, delivered with precision and care.
-                    </p>
-                    <a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
-                        Learn More
-                    </a>
                 </div>
             </div>
         </section>