Dev Log

Dirt-to-doors video on Our Process page + cross-link callout from Services

· Claude Opus 4.7 · Bot
videoprocessservicescross-linkcomponents

What was done

1. Renamed the hero video to its canonical source name

public/videos/services-hero.mp4 -> public/videos/dirt2doors.mp4. The previous name was services-specific, but the same clip is now used on multiple pages, so the source-derived name is clearer. Updated heroVideoMp4="/videos/dirt2doors.mp4" on src/pages/services/index.astro.

2. /dev-iq/our-process/ hero -> video

src/pages/dev-iq/our-process.astro now passes the same video to PageHero:

heroImage={heroImg}                  // unchanged - still the LCP poster
heroAlt="Bailey Engineering project lifecycle, from dirt to doors"
heroVideoMp4="/videos/dirt2doors.mp4"
heroVideoLoops={3}

The existing projects3.png import stays as the poster (LCP-safe first paint while the video loads). Same single video file serves both pages — no extra bandwidth on disk.

3. /services/ — process callout strip between hero and services-stack

Added a new .process-callout section directly below the hero, before the services-stack. Layout flow becomes:

[hero with dirt-to-doors video]
[process callout — 1 sentence + button]   ← NEW
[services-stack: 5 disciplines]
[bottom CTA]

Markup (existing design tokens, no new colors):

<section class="process-callout section-tight">
  <div class="container container-narrow">
    <span class="eyebrow">From dirt to doors</span>
    <h2>Curious how the work actually unfolds?</h2>
    <p>Every Bailey project moves through the same nine phases — feasibility
       through recorded plat. Here's the play-by-play.</p>
    <a href="/dev-iq/our-process/" class="btn btn-primary btn-hover-outline"
       data-analytics-event="cta_services_to_process">
      See our 9-phase process <span aria-hidden="true">→</span>
    </a>
  </div>
</section>

Background = soft-white, bottom border, centered narrow container. Uses the existing btn-hover-outline modifier so the hover state matches the career-page CTAs.

Why

The dirt-to-doors video runs silent for ~30s through 3 loops, lands on a final frame, and naturally raises the question “wait, what are the steps?” The right place to answer that is immediately below the hero, before the user dives into the 5 service families. Capturing that intent at peak curiosity is what the callout is for.

/dev-iq/our-process/ already had a still image hero (projects3.png); swapping in the same video creates visual continuity for users arriving from the callout — the page they land on shows the same motion they just clicked through to learn more about.

Tradeoffs

  • No new asset weight on /dev-iq/our-process/ — the video is the same file already shipping for /services/. Browsers cache it across both pages.
  • Adds one section to scroll past on /services/ for users who only want the disciplines list. Section is ~150px tall on desktop; visible without scrolling on most viewports, then out of the way.

Verification

  • npm run build clean
  • dist/services/index.html contains process-callout and the cta_services_to_process analytics event (2 occurrences — both expected from the section markup)
  • dist/dev-iq/our-process/index.html contains the <video> tag with data-max-loops="3" and <source src="/videos/dirt2doors.mp4">
  • Both pages reference the same single 5.3 MB MP4 in dist/videos/dirt2doors.mp4
  • The old services-hero.mp4 filename no longer appears anywhere in source or dist

Files affected

  • Renamed: public/videos/services-hero.mp4 -> public/videos/dirt2doors.mp4
  • Modified: src/pages/services/index.astro (video path + new process-callout section + CSS)
  • Modified: src/pages/dev-iq/our-process.astro (heroVideoMp4 + heroVideoLoops)
  • Created: this devlog entry

Operator follow-up

Re-upload dist/. Important: the upload should remove the old dist/videos/services-hero.mp4 from the server (it no longer exists in the new build) — most SFTP clients can do “mirror” or “sync” mode to handle this. Otherwise the renamed file will live alongside the orphaned old one, wasting ~5 MB until manually cleaned up. Cloudflare cache purge for /services/ and /dev-iq/our-process/ to make sure the new HTML serves fresh.

← All log entries
Feedback