From 916998c709a22d8b9024e35a9b03b97119ff9f71 Mon Sep 17 00:00:00 2001 From: Bob Vandevliet <35454011+bvandevliet@users.noreply.github.com> Date: Wed, 4 Feb 2026 08:17:48 +0100 Subject: [PATCH 1/8] Initialized CLAUDE.md and product-marketing-context.md --- .claude/product-marketing-context.md | 112 +++++++++++++++++++++++++++ .claude/settings.local.json | 14 ++++ .gitignore | 3 + CLAUDE.md | 89 +++++++++++++++++++++ 4 files changed, 218 insertions(+) create mode 100644 .claude/product-marketing-context.md create mode 100644 .claude/settings.local.json create mode 100644 CLAUDE.md diff --git a/.claude/product-marketing-context.md b/.claude/product-marketing-context.md new file mode 100644 index 0000000..883acd0 --- /dev/null +++ b/.claude/product-marketing-context.md @@ -0,0 +1,112 @@ +# Product Marketing Context + +*Last updated: 2026-02-04* + +## Product Overview +**One-liner:** Professionele FPV dronevideo's voor bedrijven en vastgoed in Gelderland en omgeving. +**What it does:** Vandevliet Aerial Shots maakt cinematische FPV (First Person View) dronevideo's die een vloeiend, dynamisch verhaal vertellen in een enkele vlucht. De drones worden op maat gebouwd en kunnen zowel binnen als buiten filmen — van kantoren en fabrieken tot woningen en percelen. Het resultaat: beeldmateriaal dat traditionele drone- en cameravideo overtreft qua impact en engagement. +**Product category:** FPV drone videografie / dronevideo productie +**Product type:** Service (freelance / ZZP) +**Business model:** Project-based pricing. Open categorie vanaf €350/vlucht, specifieke categorie vanaf €450/vlucht, nabewerking vanaf €400. Exclusief BTW en reiskosten (€0,35/km vanuit Arnhem). + +## Target Audience +**Target companies:** Nederlandse bedrijven (MKB), vastgoedmakelaars, projectontwikkelaars, verhuurders van (vakantie)woningen en evenementenorganisaties. Primair in Gelderland en omgeving, maar ook landelijk. +**Decision-makers:** Bedrijfseigenaren, marketingmanagers, vastgoedmakelaars, property managers, event managers. +**Primary use case:** Bedrijven en vastgoedpartijen die hun locatie, product of pand willen presenteren met impactvol, cinematisch beeldmateriaal dat opvalt op social media en vastgoedplatforms. +**Jobs to be done:** +- "Ik wil mijn bedrijf/pand op een indrukwekkende manier in beeld brengen" +- "Ik wil me onderscheiden van concurrenten met opvallend videocontent" +- "Ik wil meer views en snellere verkopen/verhuringen realiseren" +**Use cases:** +- Indoor drone tours door fabrieken, kantoren, werkplaatsen +- Virtuele rondleidingen door (vakantie)woningen voor verkoop of verhuur +- Bedrijfspresentaties voor websites, social media en beurzen +- Toekomst: recreatieparken, sportevenementen, festivals, bruiloften + +## Problems & Pain Points +**Core problem:** Traditionele foto's en standaard drone-opnames zijn statisch en saai — ze vangen de aandacht niet en vertellen geen verhaal. Bedrijven en vastgoedpartijen willen opvallen maar weten niet hoe, of kunnen geen FPV-specialist vinden of kennen deze technieken niet. +**Why alternatives fall short:** +- Standaard dronebedrijven maken alleen luchtfoto's en statische bovenaanzichten, niet de vloeiende indoor/outdoor cinematische vluchten die FPV biedt +- Videoproductiebedrijven zijn duurder en bieden meestal geen FPV-capaciteit +- Andere FPV-piloten in Nederland zijn schaars en niet altijd gecertificeerd of ervaren in bedrijfsomgevingen +**What it costs them:** Woningen staan langer te koop, bedrijven missen zichtbaarheid op social media, content verdwijnt in de massa van standaard beeldmateriaal. +**Emotional tension:** Frustratie dat je weet dat je bedrijf of pand meer te bieden heeft dan wat statische foto's laten zien. Onzekerheid of video-investering zich terugbetaalt. + +## Competitive Landscape +**Direct:** Andere FPV-dronepiloten in Nederland — schaars, niet altijd gecertificeerd, minder ervaring met bedrijfsomgevingen. Bob combineert technische achtergrond (industrieel ontwerp + software) met FPV-expertise, wat uniek is. +**Secondary:** Traditionele dronebedrijven — bieden standaard luchtopnames maar missen de vloeiende, cinematische FPV-stijl die door gebouwen en ruimtes navigeert. +**Indirect:** Videoproductiebedrijven — bieden volledige producties maar tegen hogere kosten, en zonder FPV-specialisatie. + +## Differentiation +**Key differentiators:** +- FPV-specialisatie: cinematische, vloeiende vluchten die een verhaal vertellen in een continue vlucht +- Indoor + outdoor: op maat gemaakte drones die zowel door fabrieken en kantoren als buiten vliegen +- Technische achtergrond: industrieel productontwerp + software engineering geeft begrip van bedrijfsprocessen en veilige, technisch goede vluchten +- Persoonlijke aanpak: direct contact met de piloot, geen tussenpersonen +- Gecertificeerd: officieel gecertificeerd FPV-dronepiloot +**How we do it differently:** Custom-built FPV drones met GoPro/actiecamera's, afgestemd op de specifieke situatie (cinewhoop voor indoor, grotere drones voor outdoor). Elk project begint met een intake en script/draaiboek. +**Why that's better:** Het resultaat is vloeiend, filmisch en dynamisch — je vertelt een compleet verhaal in een vlucht, wat traditionele dronebeelden niet kunnen. +**Why customers choose us:** Combinatie van technische expertise, creatief oog, persoonlijke aanpak, en een scherpe prijs vergeleken met productiebedrijven. + +## Objections +| Objection | Response | +|-----------|----------| +| "Is het veilig om binnen te vliegen?" | We gebruiken lichte cinewhoop-drones met propguards, speciaal ontworpen voor veilig indoor vliegen. Als gecertificeerd piloot met een achtergrond in techniek staat veiligheid altijd voorop. | +| "Wat is FPV eigenlijk?" | FPV staat voor First Person View. In tegenstelling tot standaard drones, die stilhangen voor luchtfoto's, vliegen FPV-drones vloeiend door ruimtes en vertellen een cinematisch verhaal in een continue vlucht. Denk aan de beste scene's uit films, maar dan met jouw bedrijf of woning als decor. | +| "Is het de investering waard?" | Woningen met dronebeelden krijgen gemiddeld 68% meer views op vastgoedplatforms. Voor bedrijven levert het opvallend videocontent op dat op social media en websites het verschil maakt tegenover concurrenten. | + +**Anti-persona:** +- Mensen die alleen een enkele foto nodig hebben, geen video +- Grote bedrijven die een volledig productieteam, meerdere draaidagen, acteurs, etc. nodig hebben — dat is een ander type productie + +## Switching Dynamics +**Push:** Huidige foto's en video's zijn saai en generiek, vallen niet op bij doelgroep, woningen staan te lang te koop, concurrent heeft betere content. +**Pull:** Impactvolle, cinematische beelden die direct opvallen. Betaalbaar startpunt (vanaf €350). Persoonlijke, flexibele samenwerking. +**Habit:** "We doen het altijd zo" — standaard fotograaf of geen video. Onbekendheid met FPV als optie. +**Anxiety:** "Is het veilig?", "Wat als het niet wordt wat ik verwacht?", "Ken ik niemand die dit al heeft gedaan." + +## Customer Language +**How they describe the problem:** +- "Onze foto's zijn te saai" +- "We vallen niet op tussen de concurrentie" +- "Ik wil iets anders dan standaard luchtfoto's" +- "Hoe laat ik mijn pand het beste zien?" +**How they describe us:** +- "Die gast met de FPV drone" +- "Dronevideo laten maken" +**Words to use:** dronevideo, FPV, cinematisch, vloeiend, dynamisch, virtuele rondleiding, drone tour, indoor drone, beleving, verhaal vertellen, professioneel, op maat +**Words to avoid:** hobbyist, goedkoop, standaard, simpel, basic +**Glossary:** +| Term | Meaning | +|------|---------| +| FPV | First Person View — de piloot ziet via een bril wat de drone ziet, waardoor vloeiende en dynamische vluchten mogelijk zijn | +| Cinewhoop | Klein, licht type FPV-drone met propguards, geschikt voor veilig indoor vliegen | +| Open categorie | EU-dronecategorie voor vluchten met laag risico in ongecontroleerd luchtruim | +| Specifieke categorie | EU-dronecategorie voor vluchten met hoger risico, vereist extra vergunningen | +| Nabewerking | Post-productie: montage, kleurcorrectie en geluidsbewerking van het ruwe beeldmateriaal | + +## Brand Voice +**Tone:** Professioneel maar benaderbaar. Informeel Nederlands (je/jij), warm, direct. +**Style:** Helder en to the point. Geen jargon tenzij het uitgelegd wordt. Persoonlijk — Bob spreekt als zichzelf, niet als een bedrijf. +**Personality:** Vakkundig, creatief, betrouwbaar, toegankelijk, technisch onderlegd. + +## Proof Points +**Metrics:** +- Woningen met dronebeelden krijgen gemiddeld 68% meer views op vastgoedplatforms +- 4K/60FPS kwaliteit +- Levering binnen 3 werkdagen +**Customers:** Portefeuille nog in opbouw — 1 business-relevant projectvideo beschikbaar. +**Testimonials:** Nog niet beschikbaar — te verzamelen bij eerste klanten. +**Value themes:** +| Theme | Proof | +|-------|-------| +| Cinematische kwaliteit | FPV-beelden zijn vloeiend, dynamisch en vertellen een verhaal in een continue vlucht | +| Veilig en gecertificeerd | Gecertificeerd FPV-piloot, achtergrond in industrieel ontwerp en techniek | +| Persoonlijk en flexibel | Direct contact, ZZP'er die flexibel plant naast parttime baan | +| Betaalbaar instapniveau | Vanaf €350 per vlucht, inclusief intake en script | + +## Goals +**Business goal:** Eerste klantenbasis opbouwen en portfolio uitbreiden. +**Conversion action:** Offerte aanvragen via contactpagina (e-mail). +**Current channels:** Voornamelijk cold outreach en mond-tot-mondreclame. Doel: organisch verkeer via Google opbouwen. +**Current metrics:** Nog niet beschikbaar (vroege fase). diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..3b940e0 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,14 @@ +{ + "permissions": { + "allow": [ + "Bash(tree:*)", + "Bash(ls:*)", + "Bash(find:*)", + "Bash(echo:*)", + "Bash(git log:*)", + "Bash(pnpm run:*)", + "WebFetch(domain:github.com)", + "WebFetch(domain:raw.githubusercontent.com)" + ] + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 254f3fa..38f0727 100644 --- a/.gitignore +++ b/.gitignore @@ -23,6 +23,9 @@ lib/ dist/ tsconfig.tsbuildinfo +# MCP config (contains API keys) +.mcp.json + # Visual Studio Code configs .vscode/ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..fdf7b4d --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,89 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +Static website for Vandevliet Aerial Shots (drone videography business), built with plain HTML, SCSS, and vanilla JavaScript. Uses Apache-style Server Side Includes (SSI) via Nginx for templating — there is no backend framework or static site generator. + +## Build & Dev Commands + +Package manager is **pnpm** (v10.11.0). + +```sh +pnpm run build # Full build: Sass → PostCSS autoprefixer → Terser JS minify +pnpm run css-compile # Sass only +pnpm run css-prefix # PostCSS autoprefixer only +pnpm run js-minify # Terser JS minify only +pnpm run server # Start local Nginx container (docker compose up -d) +pnpm start # Build + start server +``` + +Lint JavaScript: +```sh +pnpm exec eslint src/js/ +``` + +Local dev server runs at **http://localhost:8080** via Docker (nginx:stable-alpine with SSI enabled). + +## Architecture + +### SSI Templating + +Pages use Nginx SSI directives for composition. Variables are set per page and consumed by shared includes: + +```html + + + +``` + +### Routing + +Nginx `try_files` resolves URLs without extensions: `/vastgoed` → `pages/vastgoed.html`. The `/includes/` directory is marked `internal` and not directly accessible. + +### Directory Layout + +- `public/` — All served files (HTML pages, compiled assets, static media) + - `includes/components/` — Reusable UI components (nav, contact row) + - `includes/partials/` — Layout fragments (head, footer) + - `includes/pricing/` — Pricing card components + - `pages/` — Service sub-pages (routed via Nginx) + - `assets/css/` — Compiled CSS (do not edit, generated from src) + - `assets/js/` — Compiled JS (do not edit, generated from src) + - `assets/static/` — Images, videos, PDFs +- `src/scss/styles.scss` — Master stylesheet (imports Bootstrap + custom styles) +- `src/js/scripts.js` — All client-side JavaScript + +### Styling + +Bootstrap 5.3.8 customized via SCSS variables. Primary color overridden to `#cc2929`. Custom fonts: Century Gothic (headers) and Eras ITC (subheaders) loaded from `assets/font/`. Notable custom CSS: parallax scrolling, navbar transparency with scroll detection, grayscale image hover effects, anchor link generation. + +### JavaScript + +Single source file (`src/js/scripts.js`) with vanilla ES6+. Handles parallax scrolling, mobile nav collapse, auto-generated anchor links, and scroll-state tracking. No frameworks or module bundler. + +## Code Style + +### JavaScript (ESLint enforced) + +- **Allman brace style** (opening brace on its own line) +- 2-space indentation, single quotes, always semicolons +- Unix line endings (`\n`), no trailing whitespace, no final newline (`eol-last: ["error", "never"]`) +- Arrow functions preferred, `const` preferred, no `var` +- Template literals preferred over string concatenation +- Trailing commas in multiline constructs (`comma-dangle: always-multiline`) + +### HTML + +- Semantic HTML5 with Schema.org microdata (FAQPage markup) +- OpenGraph meta tags on all pages +- SSI variables for per-page title/description + +## CI/CD + +GitHub Actions workflow (`.github/workflows/build-and-deploy.yml`) runs `pnpm run build`, appends version query strings for cache busting, minifies HTML, then deploys to Nginx. Version format: `YYMM.DD.HHMMSS`. Git LFS is used for `.mp4` video files. + +## Nginx Config + +Located at `.volumes/nginx/conf/conf.d/default.conf`. SSI is enabled (`ssi on`). The config defines rewrite rules and internal locations — changes here affect routing behavior. From 67569e7c9cbc968146991e1e14285da7420e0417 Mon Sep 17 00:00:00 2001 From: Bob Vandevliet <35454011+bvandevliet@users.noreply.github.com> Date: Wed, 4 Feb 2026 17:01:49 +0100 Subject: [PATCH 2/8] n8n competitor scrape. --- .claude/settings.local.json | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 3b940e0..02790ce 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -8,7 +8,16 @@ "Bash(git log:*)", "Bash(pnpm run:*)", "WebFetch(domain:github.com)", - "WebFetch(domain:raw.githubusercontent.com)" + "WebFetch(domain:raw.githubusercontent.com)", + "Bash(npx n8n-mcp:*)", + "mcp__n8n-mcp__n8n_get_workflow", + "mcp__n8n-mcp__n8n_executions", + "mcp__n8n-mcp__n8n_update_partial_workflow", + "mcp__n8n-mcp__tools_documentation", + "mcp__n8n-mcp__n8n_test_workflow" ] - } + }, + "enabledMcpjsonServers": [ + "n8n-mcp" + ] } \ No newline at end of file From 9ad7e0f8818da8703e800f811c60444ebd7eb8cf Mon Sep 17 00:00:00 2001 From: Bob Vandevliet <35454011+bvandevliet@users.noreply.github.com> Date: Wed, 4 Feb 2026 17:12:15 +0100 Subject: [PATCH 3/8] Enhance existing service pages and add 3 new service pages. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit bedrijfsvideo: add benefits section, CTA, FAQ with Schema.org markup. vastgoed: fix OG URL bug, expand benefits/FAQ, fix heading hierarchy. New pages: recreatie, sport, evenementen — full structure with hero, benefits, pricing, CTA, and FAQ sections. Co-Authored-By: Claude Opus 4.5 --- public/pages/bedrijfsvideo.html | 100 +++++++++++++++++++- public/pages/evenementen.html | 163 ++++++++++++++++++++++++++++++++ public/pages/recreatie.html | 163 ++++++++++++++++++++++++++++++++ public/pages/sport.html | 163 ++++++++++++++++++++++++++++++++ public/pages/vastgoed.html | 74 ++++++++++----- 5 files changed, 639 insertions(+), 24 deletions(-) create mode 100644 public/pages/evenementen.html create mode 100644 public/pages/recreatie.html create mode 100644 public/pages/sport.html diff --git a/public/pages/bedrijfsvideo.html b/public/pages/bedrijfsvideo.html index 6331936..bc094ee 100644 --- a/public/pages/bedrijfsvideo.html +++ b/public/pages/bedrijfsvideo.html @@ -1,5 +1,5 @@ - + @@ -38,6 +38,32 @@
+
+

Waarom kiezen voor een FPV bedrijfsvideo?

+
    +
  • + Jouw verhaal in één vloeiende vlucht
    + Een FPV drone neemt kijkers mee op een dynamische reis door jouw bedrijf. Van de ingang, langs de werkplaats, door de gangen tot aan het eindproduct — alles in één cinematische opname die het verhaal van jouw bedrijf vertelt. +
    • +
  • + Binnen én buiten filmen
    + Dankzij op maat gemaakte cinewhoop-drones met propguards vliegen we veilig door kantoren, magazijnen en fabrieken. Buiten schakelen we naadloos over naar luchtopnames van je pand en omgeving. +
    • +
  • + Opvallen op social media
    + Video's presteren beter dan foto's op LinkedIn, Instagram en je website. Een FPV bedrijfsvideo is nog relatief zeldzaam en trekt direct de aandacht van je doelgroep. +
    • +
  • + Persoonlijke aanpak
    + Elk project begint met een intake en op maat gemaakt draaiboek. Geen standaard template, maar een video die past bij jouw merk, boodschap en doelgroep. +
    • +
  • + Snel geleverd, transparante prijs
    + De gemonteerde video ontvang je binnen 3 werkdagen. Basispakket vanaf €350, inclusief intake, script en shoot. +
    • +
+
+

Prijzen en tarieven

Wat kost een bedrijfs-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.

@@ -53,6 +79,78 @@
+ +
+

Klaar om jouw bedrijf in het beste licht te zetten?

+

Neem vandaag nog contact op voor een vrijblijvende offerte. Vertel me over jouw bedrijf en ik denk graag mee over de mogelijkheden.

+

Offerte aanvragen

+
+ +
+

Veelgestelde vragen

+
+
+

+ +

+
+
+ Een FPV bedrijfsvideo begint vanaf €350 in de open categorie. Dit is inclusief intake, script, opname (max. 4 uur) en levering binnen 3 werkdagen. Wil je professionele nabewerking met kleurcorrectie en geluidsbewerking? Dan komt daar vanaf €400 bij. De totale investering hangt af van de locatie, complexiteit en gewenste montage. +
+
+
+
+

+ +

+
+
+ Ja, dat is zelfs een van onze specialiteiten. We gebruiken lichte cinewhoop-drones met propguards, speciaal ontworpen voor veilig indoor vliegen. Deze drones zijn klein, wendbaar en vliegen veilig door kantoren, fabrieken en magazijnen. Als gecertificeerd FPV-piloot met een achtergrond in techniek staat veiligheid altijd voorop. +
+
+
+
+

+ +

+
+
+ Gemiddeld ben ik 2 tot 4 uur op locatie. Dit is inclusief voorbereiding, meerdere takes en het vastleggen van zowel binnen- als buitenbeelden. Je bedrijf hoeft niet stil te staan tijdens de opnames — de drone vliegt om medewerkers heen en legt de dagelijkse gang van zaken vast. +
+
+
+
+

+ +

+
+
+ Een gewone drone hangt stil in de lucht en maakt statische luchtfoto's of video's van bovenaf. Een FPV drone (First Person View) vliegt vloeiend door ruimtes en vertelt een cinematisch verhaal in een continue vlucht. Denk aan de cameravoering uit films, maar dan met jouw bedrijf als decor. Het resultaat is dynamischer, spannender en veel beter deelbaar op social media. +
+
+
+
+

+ +

+
+
+ De basis gemonteerde video ontvang je binnen 3 werkdagen na de opname. Kies je voor uitgebreide nabewerking met kleurcorrectie, geluidsbewerking en muziek? Dan is de levertijd doorgaans 5 tot 7 werkdagen. De video wordt geleverd in formaten die direct geschikt zijn voor je website, social media en presentaties. +
+
+
+
+