From 5c3d40919176a2543c79be1270fbd23798f5d946 Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Mon, 17 Aug 2026 14:16:34 +0200
Subject: [PATCH] Voeg scroll-margin toe aan secties zodat de sticky nav niet
 overlapt

De nav is sticky en 64px (h-16) hoog, maar de secties hadden geen
scroll-margin. scrollIntoView(block:'start') lijnde de sectietop dus
exact uit met de viewport-top, waardoor de sticky nav er precies
overheen schoof en de sectiekop (met name bij Over, nu direct na de
Hero) onder de nav verdween - het voelde alsof er te ver werd
doorgescrold. scroll-mt-16 op elke sectie houdt nu ruimte vrij voor
de nav.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/features/landing/components/AboutSection.tsx    | 2 +-
 src/features/landing/components/ContactSection.tsx  | 2 +-
 src/features/landing/components/PackagesSection.tsx | 2 +-
 src/features/landing/components/ProcessSection.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index a87bc1b..c8e449b 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -2,7 +2,7 @@ import { aboutContent } from '../data/content';
 
 export function AboutSection() {
   return (
-    <section id="over" className="py-[88px]">
+    <section id="over" className="scroll-mt-16 py-[88px]">
       <div className="mx-auto max-w-[1080px] px-6">
         <div className="grid grid-cols-1 items-start gap-6 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr] sm:gap-12">
           <div className="order-1 mb-2 sm:col-start-1 sm:row-start-1 sm:mb-0">
diff --git a/src/features/landing/components/ContactSection.tsx b/src/features/landing/components/ContactSection.tsx
index bf6b514..9406a82 100644
--- a/src/features/landing/components/ContactSection.tsx
+++ b/src/features/landing/components/ContactSection.tsx
@@ -4,7 +4,7 @@ export function ContactSection() {
   const mailtoHref = `mailto:${contactInfo.email}?subject=${encodeURIComponent(contactInfo.mailSubject)}`;
 
   return (
-    <section id="contact" className="pb-[110px]">
+    <section id="contact" className="scroll-mt-16 pb-[110px]">
       <div className="mx-auto max-w-[1080px] px-6">
         <div className="rounded-[20px] border border-accent-line bg-gradient-to-br from-surface-2 to-surface px-10 py-14 text-center">
           <span className="font-mono block text-sm uppercase tracking-wider text-accent">
diff --git a/src/features/landing/components/PackagesSection.tsx b/src/features/landing/components/PackagesSection.tsx
index 0c6e0e5..1d8009f 100644
--- a/src/features/landing/components/PackagesSection.tsx
+++ b/src/features/landing/components/PackagesSection.tsx
@@ -12,7 +12,7 @@ export function PackagesSection() {
   return (
     <section
       id="pakketten"
-      className="bg-gradient-to-b from-transparent via-surface/50 to-transparent py-[88px]"
+      className="scroll-mt-16 bg-gradient-to-b from-transparent via-surface/50 to-transparent py-[88px]"
     >
       <div className="mx-auto max-w-[1080px] px-6">
         <div className="mb-[52px]">
diff --git a/src/features/landing/components/ProcessSection.tsx b/src/features/landing/components/ProcessSection.tsx
index 7d53d35..b2521fc 100644
--- a/src/features/landing/components/ProcessSection.tsx
+++ b/src/features/landing/components/ProcessSection.tsx
@@ -3,7 +3,7 @@ import { ProcessStep } from './ProcessStep';
 
 export function ProcessSection() {
   return (
-    <section id="werkwijze" className="py-[88px]">
+    <section id="werkwijze" className="scroll-mt-16 py-[88px]">
       <div className="mx-auto max-w-[1080px] px-6">
         <div className="mb-[52px]">
           <span className="font-mono block text-sm uppercase tracking-wider text-accent">