feat(web): add open-source section to the marketing home page

[NiclasDev63]

What & why

Scibly is AGPLv3 and self-hostable, and the landing page never said so. This adds an open-source section between compliance and comparison, plus a teaser chip in the hero that anchors down to it.

The section. A license card (AGPLv3, "fork it, audit it, run it") next to a terminal that replays a real self-hosting transcript across four steps: git clone, docker compose up, open localhost:3001, gh issue create. Steps autoplay every ~4s and stop the moment you click one.

The typewriter is CSS, not JS. apps/web/src/styles/marketing-motion.css owns the steps() keyframes and a @media (scripting: enabled) gate, so the server ships the finished transcript and CSS only hides it when JS is around to restore it. No-JS readers get the full text, prefers-reduced-motion skips straight to the finished line, and a key={active.kind} remount is what replays the timeline on step change.

packages/routes gains external.github (repo, issues, file(path)) so the repo URL stops being spelled out at each call site.

The terminal transcript is deliberately untranslated. docker compose up prints English in every locale, so it is the one user-facing string that skips the i18n pipeline; everything around it ships EN and DE.

Reviewer notes

• Inline styles are custom properties on purpose. An inline boxShadow outranks Tailwind's active:shadow-none and kills the keycap press state, so tinted surfaces pass --os-lip / --tile-face and keep the shadow in a class. Same trick as hero-compliance-strip.tsx.
• The caret span is content-box. Under the app's global border-box the 2px border-right clips the last glyph of a width: Nch command.
• Output lines are div, not p. packages/ui/src/styles/globals.css:503 sets :where(p, li, dd) { text-wrap: pretty } outside every cascade layer, so it beats whitespace-nowrap on a <p>.
• The hero chip links to #open-source rather than straight to GitHub, since the section below carries both the repo and self-hosting CTAs. One-line change if you'd rather it jump out.
• Open question: the terminal holds min-h-[206px] sm:min-h-[224px] so steps don't jump. Dropping it on mobile removes dead space under the shortest transcript at the cost of a small layout shift.

Checklist

• pnpm check passes (typecheck + lint + format)
• pnpm test:unit passes (10/10 tasks, 2,780 tests)
• For apps/app/apps/web changes, ran pnpm --filter @scibly/web run format:check

Also verified pnpm build (3/3 apps) and grepped the prerendered en.html / de.html for id="open-source", the localized chip copy, AGPLv3, and docker compose up. apps/app's Playwright suite was not run: it seeds and clears the local dev database.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
startup-app	Ignored		Aug 19, 2026 1:55pm
startup-web	Ignored		Aug 19, 2026 1:55pm