From 43132bb491114fb1a6662b0fa5022a3ad9a7419f Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Mon, 17 Aug 2026 14:20:01 +0200
Subject: [PATCH] Scroll naar de eyebrow-label i.p.v. sectietop, met ruimte
 voor de nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

id + scroll-mt-16 stonden op de <section>, die zelf al py-[88px]
padding heeft - scrollIntoView lijnde dus de sectierand (inclusief
die padding) uit met de viewport-top, waardoor het te ver leek door
te scrollen en de content alsnog achter de sticky nav kon vallen.
id + scroll-mt-16 staan nu direct op de eyebrow-span ("// over",
"// werkwijze", "// pakketten", "// contact"), zodat er precies
daarheen én met 64px ruimte voor de nav wordt gescrold.

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

diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index c8e449b..9777afb 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -2,11 +2,14 @@ import { aboutContent } from '../data/content';
 
 export function AboutSection() {
   return (
-    <section id="over" className="scroll-mt-16 py-[88px]">
+    <section className="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">
-            <span className="font-mono block text-sm uppercase tracking-wider text-accent">
+            <span
+              id="over"
+              className="font-mono block scroll-mt-16 text-sm uppercase tracking-wider text-accent"
+            >
               // over
             </span>
             <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
diff --git a/src/features/landing/components/ContactSection.tsx b/src/features/landing/components/ContactSection.tsx
index 9406a82..f1109c3 100644
--- a/src/features/landing/components/ContactSection.tsx
+++ b/src/features/landing/components/ContactSection.tsx
@@ -4,10 +4,13 @@ export function ContactSection() {
   const mailtoHref = `mailto:${contactInfo.email}?subject=${encodeURIComponent(contactInfo.mailSubject)}`;
 
   return (
-    <section id="contact" className="scroll-mt-16 pb-[110px]">
+    <section className="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">
+          <span
+            id="contact"
+            className="font-mono block scroll-mt-16 text-sm uppercase tracking-wider text-accent"
+          >
             // contact
           </span>
           <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
diff --git a/src/features/landing/components/PackagesSection.tsx b/src/features/landing/components/PackagesSection.tsx
index 1d8009f..1e7fead 100644
--- a/src/features/landing/components/PackagesSection.tsx
+++ b/src/features/landing/components/PackagesSection.tsx
@@ -10,13 +10,13 @@ export function PackagesSection() {
   const { data: packages, isLoading, isError } = usePackagesQuery();
 
   return (
-    <section
-      id="pakketten"
-      className="scroll-mt-16 bg-gradient-to-b from-transparent via-surface/50 to-transparent py-[88px]"
-    >
+    <section className="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]">
-          <span className="font-mono block text-sm uppercase tracking-wider text-accent">
+          <span
+            id="pakketten"
+            className="font-mono block scroll-mt-16 text-sm uppercase tracking-wider text-accent"
+          >
             // pakketten
           </span>
           <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
diff --git a/src/features/landing/components/ProcessSection.tsx b/src/features/landing/components/ProcessSection.tsx
index b2521fc..f59d63c 100644
--- a/src/features/landing/components/ProcessSection.tsx
+++ b/src/features/landing/components/ProcessSection.tsx
@@ -3,10 +3,13 @@ import { ProcessStep } from './ProcessStep';
 
 export function ProcessSection() {
   return (
-    <section id="werkwijze" className="scroll-mt-16 py-[88px]">
+    <section className="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">
+          <span
+            id="werkwijze"
+            className="font-mono block scroll-mt-16 text-sm uppercase tracking-wider text-accent"
+          >
             // werkwijze
           </span>
           <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">