Image heroes on 25 pages, contact NAP refresh

What was done

1. PageHero component extended (src/components/PageHero.astro)

Added two optional props: heroImage: ImageMetadata and heroAlt: string. When heroImage is provided the section switches to a side-by-side 1.4fr 1fr grid mirroring the homepage hero (text left, image right, collapses to single column under 1024px). When omitted the component renders identically to before, so all pages NOT in this batch are untouched.

The image renders through Astro’s <Image> with:

• widths={[400, 600, 800]}
• sizes="(max-width: 1024px) 90vw, 480px"
• format="webp", quality={75}
• loading="eager", fetchpriority="high"

So each 2-3 MB source PNG ships as a 16-30 KB webp on first paint. LCP-safe.

2. 7 hero source images added (src/assets/heroes/)

services2.png, projects3.png, community2.png, community3.png, service-areas3.png, bailey.png, office4.png — copied from .tmp/hero/ so they enter Astro’s asset pipeline.

3. 25 pages wired with their assigned hero

Image	Pages
services2.png	/services/, /services/civil-engineering/, /services/land-planning/, /services/commercial-industrial-site-design/, /services/multifamily-site-design/, /services/master-planned-communities/, /dev-iq/iq-meet/
projects3.png	/projects/, /dev-iq/faqs/, /dev-iq/our-process/, /dev-iq/land-use-intelligence/
community2.png	/community/, /contact/
community3.png	/dev-iq/, /about/
service-areas3.png	/service-areas/ + 6 county hubs (ada/canyon/owyhee/elmore/blaine/boise)
bailey.png	/about/bailey/
office4.png	/careers/, /careers/growth/

Each page now has import heroImg from "<rel>/assets/heroes/<file>.png"; and passes heroImage={heroImg} + a contextual heroAlt.

(/projects/[slug]/, /service-areas/<county>/<city>/, and the career sub-pages were intentionally untouched - they have their own bespoke heroes.)

4. Contact NAP refresh (src/data/site.ts)

site.phone changed from "208-938-0013" to "(208) 938-0013" to match the canonical NAP format the user provided. All other NAP fields already matched:

• name: Bailey Engineering ✓
• address: 868 E Riverside Dr #120, Eagle, ID 83616 ✓
• email: [email protected] ✓

tel: links continue to work because the contact card strips non-digits with site.phone.replace(/[^0-9]/g, "") -> tel:2089380013.

Why

User requested a uniform image-hero treatment across the site’s primary pages so they read with the same visual weight as the homepage. They also confirmed the canonical NAP for the contact page.

Implementation made two structural choices:

• Extended the existing PageHero rather than creating a new component, so future pages can opt in or out cleanly with one prop.
• Used Astro’s responsive <Image> so 2-3 MB source PNGs serve as ~20 KB webp variants - critical for LCP across 25 newly-image-heavy pages.

Verification

• npm run build clean (119 pages indexed)
• 7 hero images each emitted 4 variants in dist/_astro/. Smallest webp per hero: 16-30 KB. Largest (800w retina): 65-320 KB.
• dist/contact/index.html confirmed to render (208) 938-0013, [email protected], 868 E Riverside Dr #120, Eagle, ID 83616.
• tel:2089380013 link still resolves correctly (parens/dash stripped at render time).

Files affected

• Created: src/assets/heroes/{services2,projects3,community2,community3,service-areas3,bailey,office4}.png
• Modified: src/components/PageHero.astro (added optional image variant)
• Modified: src/data/site.ts (phone format)
• Modified: 24 page files - imports + heroImage/heroAlt props on <PageHero>
• Modified: src/pages/contact.astro (image hero added)
• Created: this devlog entry