feat: video films for social media, with the skill to make more

Adds apps/video, a standalone Remotion package (not part of the pnpm
workspace, so it never reaches the web build or the Docker image). It
renders six looping films, one per service, in German and English, as
4:5 for LinkedIn and 16:9 for YouTube and ads, together with the text
to post and an overview page.

Each film is one continuous shot: close on something abstract, the
camera pulls back to show what it really is, the form changes, and the
picture folds back into its opening. The slide deck code from the
earlier attempts is still in the package and no longer used.

Also adds the Google Ads concept, brings the relaunch concept in line
with the site as built, and a project skill that describes how to make
further films.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/plans/freelance-relaunch.md

@@ -1,7 +1,9 @@
 # mintel.me relaunch concept: freelance engineer site
 
-Scope: this website only. Goal: a visitor understands what I sell within 10 seconds and
-books a 20-minute intro call within 2 minutes. Low sales overhead, more bookable hours.
+Scope: this website, plus the videos made from it (`apps/video`, see section 6). Goal: a visitor understands
+what I sell within 10 seconds and writes an email within 2 minutes. Low sales overhead, more bookable hours.
+
+Status note: sections 3 to 6 describe the site as built. Sections 2 and 9 are kept as history and are marked as such.
 
 ## 1. Positioning
 
@@ -13,10 +15,10 @@ books a 20-minute intro call within 2 minutes. Low sales overhead, more bookable
 
 - **Never mention AI as my own tool.** How I work is none of the client's business: no "AI-built", "AI-accelerated", "AI-code rescue", no FAQ about AI tools. The one exception is the automation service, where AI steps are part of what the client gets (sorting, summarising, reading documents).
 - **Modest and factual.** No promises I have not made (response times, weekly updates, start dates, search ranking). Only state what the owner confirmed. No superlatives.
-- **No internal method vocabulary** on client-facing pages: no specs, TDD, mutation testing, coverage, pull requests. Translate into what the client gets: changes do not break things, a written update every week, predictable cost. Technical detail belongs on `/process` and `/notes`, for engineers.
+- **No internal method vocabulary** on client-facing pages: no specs, TDD, mutation testing, coverage, pull requests. Translate into what the client gets: changes do not break things, predictable cost.
 - Do not say: "everything", "fullstack for anyone", "vibe coding". No location or tax talk; say "remote, available during European business hours".
 - Pick the visitor up: introduce me first, then let them choose their need (developer for a product, make an app reliable, just a website), then explain for that need what they get, how it runs, what it costs.
-- Language (owner decision, 2026-10-04): German is the main language at the root, English lives under `/en`. The language is detected from the browser and can be switched in the header.
+- Language (owner decision, 2026-10-04): German is the main language at the root, English lives under `/en`. The language is detected from the browser and can be switched in the header. The videos and their post texts exist in both languages too (`apps/video/src/content/videos.ts`).
 
 ### Audiences (priority order)
 
@@ -29,7 +31,10 @@ books a 20-minute intro call within 2 minutes. Low sales overhead, more bookable
 - Offer: websites and web apps (Next.js/TypeScript, strong design), light backend (APIs, auth, integrations), CLI tools and automation, AI agents/MCP servers, architecture and code review, the spec/test/mutation process for teams, Web3 frontends. macOS apps on request only.
 - Do not offer (state it plainly): Windows apps, mobile apps, running client infrastructure, database-heavy work, email/DNS administration.
 
-## 2. Differentiator: verified AI speed
+## 2. Differentiator: verified AI speed (internal, not shown on the site)
+
+This is how the work is done. Under the copy rules above none of it appears in client-facing copy, and the pages
+named below (`/process`, the sample report) were not built: the site is one page (section 3).
 
 Anyone can generate code. The scarce thing is code that survives production.
 Spec first -> red -> green -> refactor -> mutation check on changed code -> coverage as gap finder -> a delivery report with exact commands and results on every PR.
@@ -57,9 +62,10 @@ The old site (`/blog`, `/case-studies`, `/contact`, `/websites`, `/technologies`
 ## 4. Design
 
 - Light, the original look of the site: white, oversized type, binary texture, one accent (the yellow marker).
-- The hero headline is built from running binary digits ("SHIP FAST. / BREAK NOTHING."). The owner approved it: do not change the hero design.
+- The hero headline is built from running binary digits ("WEB APPS / & WEBSITES."). The owner approved the design: do not change it.
 - One left axis for logo, navigation and content. No sidebars. Few sections, each with one job.
-- Availability line fed by one constant, shown in the hero, the sticky booking bar and the closing section.
+- No availability line and no booking bar: both were dropped with the calendar. The hero shows two facts instead (15 years in web; remote, EU core hours).
+- Dark surfaces carry light: `BitAura` (light along an edge, digits drifting off it), `BitSeam` (lit top edge of a dark section) and `BitGlow` (light following the pointer on `data-glow` surfaces, including the dark button).
 
 ## 5. Offers and pricing
 
@@ -92,8 +98,9 @@ Audit of an AI-built codebase, test foundation, mutation baseline, prioritized r
 ## 6. Getting clients (low effort first)
 
 1. Own network: former colleagues from i22, Trusted Shops, sdox.io, Sevenval. Ten personal messages.
-2. LinkedIn and X: one post a week from real work (process, numbers, diagrams), one pinned "next free block" post.
-3. Platforms (freelancermap, freelance.de, Web3 job boards) as a secondary channel.
+2. LinkedIn and X: one post a week. A set of short looping videos, one per service, with post texts in English and German, is produced in `apps/video` (`node scripts/export.ts` writes `out/library`).
+3. Google Ads for German clients: search campaigns for "website" and "automation". Concept, ad texts and open prerequisites in `plans/google-ads.md`.
+4. Platforms (freelancermap, freelance.de, Web3 job boards) as a secondary channel.
 4. Direct outreach: 10 targeted messages a week with one template.
 5. Testimonials: one line each from existing clients.
 
@@ -110,7 +117,7 @@ Audit of an AI-built codebase, test foundation, mutation baseline, prioritized r
 - Impressum needs a serviceable address (DDG section 5); settle it with a tax advisor. Do not publish tax, visa or payment-provider details.
 - Scheinselbststaendigkeit: prefer 15-20 h blocks over one client at 35-40 h.
 
-## 9. Implementation order
+## 9. Implementation order (history: superseded by the one-page site in section 3)
 
 1. Cal.com event and `/book`.
 2. Spec tests for availability and redirects, then new hero, nav and offers; remove old SMB sections.

apps/web/plans/google-ads.md

@@ -0,0 +1,158 @@
+# Google Ads concept: German clients at low cost
+
+Status: draft for the owner's review. Nothing has been created in the Ads account, and no API call has been made.
+Wording and prices come from the website's German texts (`apps/web/src/content/de.ts`). Search volumes and click prices are **not** in
+this document: they have to come from the Keyword Planner once API access works (section 7).
+
+## 1. Goal and principle
+
+Goal: enquiries by email from German companies, for the two services a layperson searches for:
+a website, and process automation. Small budget, so every euro goes to people who are already looking.
+
+- **Search ads first.** Someone who types "Website erstellen lassen" has a need today. Video and display ads
+  reach people who do not, and cost more per enquiry.
+- **Narrow, then widen.** Few exact search terms, one country, business hours. Widen only what produces enquiries.
+- **Measure enquiries, not clicks.** Without counting email clicks per search term, nothing can be steered.
+- The videos (`apps/video`) are for LinkedIn posts and, later, for showing to people who already visited the site.
+
+## 2. Before the first euro is spent
+
+| # | Prerequisite | Why | State |
+| - | :----------- | :-- | :---- |
+| 1 | German landing page | German ad, German page. | Done: German is the main language of the site since 2026-10-04. Ads lead to the homepage, to the section of the service. Own pages per campaign would convert better, but the site is one page by decision |
+| 2 | Count email clicks | `EmailLink` does not record a click today. Umami is on the site and needs no cookie banner. | Open: add an event, e.g. `contact_email_click`, with the campaign from the URL |
+| 3 | Campaign tagging | Every ad URL carries `utm_source=google&utm_medium=cpc&utm_campaign=<name>&utm_term={keyword}` so Umami shows which search term led to an email click. | With the ads |
+| 4 | Developer token and customer number | The Ads API rejects every call without them. `gcloud` login with the Ads scope and the enabled API exist (project `mintelme-402610`). | Open: owner provides both |
+| 5 | Payment method and billing country in the Ads account | Cannot be checked from here. | Open: owner |
+
+On prerequisite 2: Google's own conversion tag would let Google optimise bids by itself, but it sets cookies and
+needs a consent banner. Recommendation: start without it, judge by Umami, and decide about the tag after the
+first month.
+
+## 3. Account structure
+
+Two search campaigns at the start, one ad group each, so that budget and results stay readable.
+
+| Setting | Value | Reason |
+| :------ | :---- | :----- |
+| Networks | Google Search only; search partners and Display off | Partners and Display bring cheap clicks that rarely enquire |
+| Location | Germany, "presence" only (people who are there, not people interested in it) | Default setting includes people abroad |
+| Language | German | |
+| Schedule | Monday to Friday, 7:00 to 19:00 | Business owners search during working hours; review after two weeks |
+| Match types | Phrase and exact only, no broad match | Broad match spends a small budget on unrelated searches |
+| Bidding | Maximise clicks with a click-price cap | There is no conversion data yet for automatic bidding |
+| Budget | A fixed daily amount per campaign, set by the owner | See section 6 |
+
+## 4. Campaign "Website"
+
+Landing page: the German homepage, services section, case "website".
+
+Search terms (phrase and exact):
+
+- website erstellen lassen
+- homepage erstellen lassen
+- firmenwebsite erstellen lassen
+- webseite erstellen lassen kosten
+- website für unternehmen erstellen lassen
+- webdesigner freelancer
+- webentwickler freelancer
+
+Excluded terms: kostenlos, gratis, selbst, selber, baukasten, wix, jimdo, squarespace, wordpress, shopify,
+onlineshop, vorlage, template, kurs, lernen, ausbildung, studium, job, jobs, stellenangebot, gehalt, praktikum.
+
+Responsive search ad. Headlines (at most 30 characters each):
+
+- H: Website erstellen lassen
+- H: Firmenwebsite vom Entwickler
+- H: Ab 3.800 € netto
+- H: 15 Jahre Web-Erfahrung
+- H: Design, Bau und Hosting
+- H: Änderungen per E-Mail
+- H: Kein Baukasten nötig
+- H: Erstgespräch: 20 Minuten
+- H: Freelancer statt Agentur
+- H: Passt auf Handy und Desktop
+- H: Marc Mintel, Webentwickler
+- H: Individuelles Design
+
+Descriptions (at most 90 characters each):
+
+- D: Sie sagen, was Ihr Unternehmen macht. Ich gestalte, baue und betreue Ihre Website.
+- D: Ein Design für Ihr Unternehmen statt einer Vorlage. Auf Handy, Tablet und Desktop.
+- D: Um das Hosting kümmere ich mich. Änderungen schicken Sie mir einfach per E-Mail.
+- D: Schätzung nach dem ersten Gespräch. Eine typische Firmenwebsite ab 3.800 € netto.
+
+Sitelinks: "So läuft es ab", "Was es kostet", "Meine Arbeiten", "Kontakt".
+
+## 5. Campaign "Automatisierung"
+
+Landing page: the German homepage, services section, case "automation".
+
+Search terms (phrase and exact):
+
+- prozesse automatisieren
+- geschäftsprozesse automatisieren
+- prozessautomatisierung unternehmen
+- schnittstelle programmieren lassen
+- api anbindung programmieren lassen
+- rechnungen automatisch erfassen
+- systeme verbinden schnittstelle
+
+Excluded terms: definition, beispiele, bachelorarbeit, masterarbeit, studium, kurs, schulung, zertifizierung,
+job, jobs, stellenangebot, gehalt, kostenlos, sap, uipath, power automate, zapier, make.
+
+The last four are tool names. People searching for them want the tool, not a developer. Review after two weeks:
+"zapier" or "make" plus "einrichten lassen" could be worth an own ad group.
+
+Responsive search ad. Headlines:
+
+- H: Prozesse automatisieren
+- H: Systeme verbinden lassen
+- H: Schluss mit Copy-and-paste
+- H: Schnittstellen vom Entwickler
+- H: Rechnungen automatisch lesen
+- H: Von Bestellung bis Rechnung
+- H: 100 € pro Stunde, netto
+- H: Erst Schätzung, dann Budget
+- H: Erstgespräch: 20 Minuten
+- H: 15 Jahre Web-Erfahrung
+- H: Ihre Tools, verbunden
+- H: Keine Anfrage geht verloren
+
+Descriptions:
+
+- D: Ich verbinde die Tools, die Sie schon nutzen. Wiederkehrende Schritte laufen von selbst.
+- D: Daten von Hand von einem Tool ins andere tippen? Das lässt sich meist automatisieren.
+- D: Ich sehe mir den Ablauf an und schätze den Aufwand. Die Schätzung wird Ihr Budget.
+- D: Menschen entscheiden die Ausnahmen, die Routine läuft von selbst. Erstgespräch: 20 Min.
+
+Sitelinks: "Beispiele", "So läuft es ab", "Was es kostet", "Kontakt".
+
+## 6. Budget and when to stop
+
+The amounts are the owner's decision. A workable way to set them:
+
+- Decide what one new client is worth, and how much of that may go into finding them.
+- Run both campaigns for four weeks at a fixed daily amount. Do not change anything in the first week.
+- Weekly, 15 minutes: read the search terms report, add wasted terms to the excluded list, pause search terms
+  that got clicks but no email click.
+- After four weeks: a campaign that produced no enquiry is stopped or rebuilt, not given more budget.
+- Automatic bidding on enquiries only once there are enough of them to learn from (Google's guidance is in the
+  order of 30 conversions a month; check the current figure before switching).
+
+## 7. Later steps
+
+1. **Numbers first.** With API access: pull monthly searches and click-price ranges for the terms above
+   (Keyword Planner), drop terms nobody searches, and set the click-price cap from real figures.
+2. **Developer campaign.** Terms like "react entwickler freelancer", "next.js entwickler freelance",
+   "frontend entwickler freelancer". Fewer searches, and staffing platforms bid on them. Start only when the
+   first two campaigns are understood. Video: `ProductDeveloper-de`.
+3. **"Make an app reliable".** Wait until the offer and its price are settled.
+4. **Videos as ads.** Upload the 16:9 versions (`*-de-wide.mp4`) to YouTube and show them only to people who
+   visited the site in the last 30 days. This needs Google's tag and therefore the consent banner (section 2).
+
+## 8. What Claude may do with the API
+
+- Read: list the account, campaigns, search terms and Keyword Planner figures.
+- Prepare: create campaigns, ad groups, ads and excluded terms **paused**, after the owner approved this document.
+- Never: enable a campaign, set or raise a budget, or change billing. That stays with the owner.