Website Redesign — Leashline Launch

ForgeKit · June 18, 2026 · ForgeKit Website · Leashline · Design

Added Leashline to the public face of ForgeKit. Four products, two engines, one homepage. Mobile heroes fixed across all three product pages.

Start
Deploy check
Leashline already live on master
Phase 1
Nav + homepage
Products dropdown, 4-tool layout, platform diagram
Phase 2
Leashline stub
/leashline teaser, app links hidden
Phase 3
Copy fixes
Sally not Katie, neighbourhood story sharpened
Phase 4
Mobile heroes
Homepage, Forge, PilotLight flame
Ship
GitHub + Vercel
forgekits.build live
01

Nav — Products Dropdown

~30 min
What Shipped

Products dropdown

  • Forge (Rail Engine) + Leashline (Rounds Engine)
  • Engine label + Soon badge on Leashline
  • Right-aligned to prevent viewport overflow
  • hover + click open, mouse-leave close
  • Mobile drawer with same structure

Let's build → CTA

  • mailto:zeb@forgekits.build
  • Tooltip on click shows email address
  • Click email in tooltip → copies to clipboard → Copied! confirmation
  • Replaces redundant Our Apps button
Where We Spun

Dropdown right-overflow on mobile

Dropdown was left-aligned and wider than viewport, cutting off ROUNDS ENGINE label.

right-0 alignment + w-64 + whitespace-nowrap on engine label

02

Homepage — 4 Tools, 2 Engines

~45 min
What Shipped

What We've Built section

  • Four tools. Two engines. Real life. headline
  • Forge + Leashline as equal featured cards (Rail / Rounds Engine labels)
  • PilotLight + Flyback as secondary 2-col row
  • Sally story on Leashline card (not Katie — private person)

Platform diagram

  • Today block: Forge · Leashline · PilotLight · Flyback
  • Platform chips: added Routes
  • Armory copy: two catalogs — Rail configs + Rounds configs

Bottom CTA

  • SEE LEASHLINE → links to /leashline teaser (not live app)
  • No leashline.forgekits.build links anywhere on site
  • Forge app link unchanged
03

/leashline Stub Page

~20 min
What Shipped

Teaser page

  • Don't Lose the Route. hero with coming soon notice
  • Sally story — neighbourhood dog watcher everyone fights over
  • Feature list (route board, one-tap status, finish panel, etc.)
  • Rounds Engine callout — 4 Rounds verticals listed
  • No link to leashline.forgekits.build anywhere
04

Mobile Hero Fixes

~90 min (most of the session)
What Shipped

Homepage hero

  • Solid black div hidden on mobile (was covering image entirely)
  • Mobile gradient stripped from image container (was also solid black on mobile)
  • objectPosition: 80% to show craftsman on right edge of photo
  • Overlay dialled to 65% — Zeb tuned live

Forge page hero

  • Same three fixes applied (solid div, gradient, overlay)
  • objectPosition: 35% to show worker correctly
  • Overlay at 78%

PilotLight flame on mobile

  • Flame SVG absolutely positioned top-right on mobile
  • 40% opacity — reads as background, not foreground element
  • Full opacity + in-flow on desktop unchanged
Where We Spun

objectPosition ignored for most of the chase

Spent ~60 min adjusting objectPosition values that had no effect. Root cause: a solid bg-[#0D1117] div with no mobile breakpoint guard was painting over the entire image. And a bg-gradient-to-r from-[#0D1117] inside the image container was doing the same. Neither had md: guards so both applied on mobile regardless of the overlay div we were tweaking.

hidden md:block on the solid div. md: prefix on gradient classes. Only then did the overlay control actually work.

Tailwind arbitrary objectPosition values ignored

Tried max-md:[object-position:65%_20%] and similar — had no effect locally. Also tried style prop on Next.js Image fill — inconsistent. Switched to plain <img> tag for mobile element, which respected style prop reliably.

Split into two separate image elements (mobile plain img, desktop Next.js Image) — abandoned after finding root cause was the overlay divs, not objectPosition

What Worked Well
🔍

Read the image before positioning

Once we actually looked at the photo, the crop strategy became obvious. craftsman-toolshed.jpg: subject far right → 80%. worker-jobsite.jpg: subject left-center → 35%. Should have done this first.

🎛️

Live dialling works

Zeb calling out exact numbers (65, 70, 78) while checking locally is faster than iterating through descriptive adjectives. Precision beats prose for visual tuning.

Session in Numbers
4
Products on homepage
2
Engines named
3
Mobile heroes fixed
1
New page (/leashline)
0
Live app links to Leashline
~90m
Spent on mobile overlay root cause
Rules Added to Playbook
1

Read the photo before positioning

Before touching objectPosition, open the image and find where the subject sits in the frame. 2 seconds of looking beats 10 iterations of guessing.

2

Check ALL overlay layers before tweaking opacity

A section hero can have 3+ stacked divs. Any one without a responsive guard applies to all breakpoints. List every absolute div and confirm its mobile behavior before adjusting values.

3

Private people get pseudonyms in public copy

Real seed customers (Katie → Sally) should never appear by real name on the public website. Use a consistent alias and save the real name in memory only.

We spent 90 minutes chasing the wrong thing. Once we looked at the actual overlays, it was a one-line fix. Trace before you tweak.

Session retro — ForgeKit · June 18, 2026
Next Session — Start Here

Next Session — Start Here

Leashline

Add/edit client + pet + visit UI — Phase 1 usability — currently all data is seeded via script. Katie needs to be able to add a new client herself.

Leashline

Cancel/reschedule workflow — Open slot detection when a visit is cancelled. Core to daily usability.

Website

Full /leashline product page — Stub is live. Build the real page: hero, features, Sally story, Rounds engine callout, screenshots.

Website

Settings stub on Leashline — Business name, phone, preferences — currently empty.

ForgeKit

Connect GitHub → Vercel for website — Currently deploying via CLI. Wire up auto-deploy on push to master.

ForgeKit · Website Redesign — Leashline Launch · June 18, 2026 forgekits.build · ← Build Log