feat: drawings in circuit style, visible hero digits, hourly booking only on the freelance page

Drawings: "How I work" and the step drawings under "How it runs" now use
the same language as the story thread. Systems and people are chips with
pins, connections are tracks with 45 degree bends and solder points, and
what travels is a bit instead of a round dot (circuit.tsx).

Hero: the digits in the background were close to invisible on white. They
are about twice as strong now, and the ones near the pointer light up indigo.

Homepage vs. freelance page: the homepage is for clients who buy a result,
so it shows three cases. The developer case (100 EUR per hour, booked by the
month) and its steps live on the freelance page only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-05 11:37:26 +02:00
co-authored by Claude Opus 5.5
parent affd4b7ee7
commit f0c25b802b
11 changed files with 430 additions and 294 deletions
+15 -1
View File
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { DecodeText } from "@/src/components/bits/DecodeText";
import { Block } from "@/src/components/home/Block";
import { ClosingCta } from "@/src/components/home/ClosingCta";
import { PathStory } from "@/src/components/home/PathPicker";
import { TopicButton } from "@/src/components/home/TopicButton";
import { PipelineRun } from "@/src/components/illustrations/PipelineRun";
import { Reveal } from "@/src/components/Reveal";
@@ -38,6 +39,8 @@ export default async function FreelancePage({ params }: Props) {
const content = contentFor(locale);
const { freelance, technology } = content;
const { booking } = freelance;
const { services } = content;
const teamPath = services.paths.find((path) => path.id === "developer");
return (
<div className="relative flex flex-col bg-white">
@@ -137,8 +140,19 @@ export default async function FreelancePage({ params }: Props) {
</Reveal>
</Block>
{teamPath && (
<Block index="03" label={services.howItRuns} title={teamPath.headline}>
<Reveal>
<p className={`${BODY} mb-12 max-w-3xl`}>{teamPath.intro}</p>
</Reveal>
<Reveal>
<PathStory path={teamPath} active />
</Reveal>
</Block>
)}
<Block
index="03"
index="04"
label={booking.label}
title={
<>