Merge pull request 'Nieuwe teksten & Over-sectie, en handmatige test-deploy zonder PR' (#16) from feature/about-photo-and-tekst-update into master

Reviewed-on: #16

.gitea/workflows/continuous_integration.yaml

@@ -254,16 +254,15 @@ jobs:
 
   deploy-test:
     needs: [build, test, config]
-    # TIJDELIJK: 'pull_request' is toegevoegd zodat elke PR ook automatisch
-    # naar de testomgeving deployed, om testen tijdens deze werkbranch te
-    # vereenvoudigen. Verwijder de 'pull_request'-conditie hieronder weer
-    # zodra dat niet meer nodig is.
-    #
-    # De push-naar-master- en pull_request-condities hieronder zijn bewust
-    # ONAFHANKELIJK van het 'deploy_test'-vinkje: de automatische testdeploy
-    # bij een merge naar master moet altijd blijven gebeuren. Het vinkje
-    # geldt alleen voor handmatige workflow_dispatch-runs.
-    if: (github.event_name == 'workflow_dispatch' && github.event.inputs.deploy_test == 'true') || github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref == 'refs/heads/master')
+    # De push-naar-master-conditie hieronder is bewust ONAFHANKELIJK van het
+    # 'deploy_test'-vinkje: de automatische testdeploy bij een merge naar
+    # master moet altijd blijven gebeuren. Het vinkje geldt alleen voor
+    # handmatige workflow_dispatch-runs. Een PR triggert hier bewust GEEN
+    # deploy: wil je een feature-branch naar test deployen, start dan zelf
+    # een workflow_dispatch-run op die branch met 'Deploy to Test' aangevinkt
+    # (Gitea: Actions → Continuous Integration → Run workflow → branch
+    # selecteren) - dat vereist geen (afgeronde) PR.
+    if: (github.event_name == 'workflow_dispatch' && github.event.inputs.deploy_test == 'true') || (github.event_name == 'push' && github.ref == 'refs/heads/master')
     uses: ./.gitea/workflows/deploy.yaml
     secrets: inherit
     # Deze waarden komen uit het `env:`-blok bovenaan dit bestand, via de

src/features/landing/components/AboutSection.tsx

@@ -2,41 +2,45 @@ import { aboutContent } from '../data/content';
 
 export function AboutSection() {
   return (
-    <section id="over" className="py-[88px]">
+    <section className="py-[88px]">
       <div className="mx-auto max-w-[1080px] px-6">
-        <div className="grid grid-cols-1 items-start gap-12 sm:grid-cols-[1.2fr_0.8fr]">
-          <div>
-            <div className="mb-6">
-              <span className="font-mono block text-sm uppercase tracking-wider text-accent">
-                // over
-              </span>
-              <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
-                Eén ontwikkelaar, korte lijnen
-              </h2>
-            </div>
+        <div className="grid grid-cols-1 items-start gap-8 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr] sm:items-stretch sm:gap-12">
+          <div className="order-1 mb-3 sm:col-start-1 sm:row-start-1 sm:mb-0">
+            <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">
+              Eén ontwikkelaar, korte lijnen
+            </h2>
+          </div>
+          <div className="order-2 flex items-center justify-center sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
+            <picture>
+              <source
+                type="image/webp"
+                srcSet="/bryan-slop-400.webp 400w, /bryan-slop-800.webp 800w"
+                sizes="(min-width: 640px) 224px, 160px"
+              />
+              <img
+                src="/bryan-slop-800.jpg"
+                srcSet="/bryan-slop-400.jpg 400w, /bryan-slop-800.jpg 800w"
+                sizes="(min-width: 640px) 224px, 160px"
+                alt="Bryan Slop, oprichter van SLP Software"
+                width={224}
+                height={224}
+                className="h-40 w-40 rounded-full border-2 border-accent-line object-cover shadow-lg sm:h-56 sm:w-56"
+              />
+            </picture>
+          </div>
+          <div className="order-3 sm:order-2 sm:col-start-1 sm:row-start-2">
             {aboutContent.paragraphs.map((paragraph) => (
               <p key={paragraph} className="mb-4 text-muted">
                 {paragraph}
               </p>
             ))}
           </div>
-          <div className="font-mono rounded border border-line bg-surface p-6 text-[0.85rem]">
-            <div className="mb-3.5 text-[0.75rem] uppercase tracking-wider text-accent">
-              tech_stack
-            </div>
-            <ul className="list-none">
-              {aboutContent.techStack.map((item, index) => (
-                <li
-                  key={item.label}
-                  className={`py-1.5 text-muted ${
-                    index < aboutContent.techStack.length - 1 ? 'border-b border-line' : ''
-                  }`}
-                >
-                  <b className="font-medium text-text">{item.label}</b> — {item.value}
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
       </div>
     </section>

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="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">

src/features/landing/components/PackagesSection.tsx

@@ -10,13 +10,13 @@ export function PackagesSection() {
   const { data: packages, isLoading, isError } = usePackagesQuery();
 
   return (
-    <section
-      id="pakketten"
-      className="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">

src/features/landing/components/ProcessSection.tsx

@@ -3,10 +3,13 @@ import { ProcessStep } from './ProcessStep';
 
 export function ProcessSection() {
   return (
-    <section id="werkwijze" className="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">

src/features/landing/data/content.ts

@@ -43,14 +43,8 @@ export interface ProcessStepData {
   description: string;
 }
 
-export interface TechStackItem {
-  label: string;
-  value: string;
-}
-
 export interface AboutContent {
   paragraphs: string[];
-  techStack: TechStackItem[];
 }
 
 export interface ContactInfo {
@@ -61,16 +55,16 @@ export interface ContactInfo {
 }
 
 export const navLinks: NavLink[] = [
+  { label: 'Over', href: '#over' },
   { label: 'Pakketten', href: '#pakketten' },
   { label: 'Werkwijze', href: '#werkwijze' },
-  { label: 'Over', href: '#over' },
   { label: 'Start project', href: '#contact', isCta: true },
 ];
 
 export const heroContent: HeroContent = {
   eyebrow: 'Web & .NET development',
-  heading: 'Software die gewoon werkt. Tegen een prijs die je vooraf kent.',
-  lead: 'SLP Software bouwt snelle websites en maatwerk .NET-oplossingen voor ondernemers die geen verrassingen willen — niet in de code, niet op de factuur.',
+  heading: 'SLP software: websites, apps & meer',
+  lead: 'Bij SLP Software kun je terecht voor maatwerk oplossingen. Of het nou gaat om een website, cms of app: wij bouwen het allemaal. Voor ondernemers die geen verrassingen willen — niet in de code, niet op de factuur.',
   codeLine: 'var website = slp.Bouw(uwIdee);',
 };
 
@@ -128,13 +122,13 @@ export const processSteps: ProcessStepData[] = [
     label: 'stap 01 — intake',
     title: 'Kennismaken',
     description:
-      'We bespreken je idee, doelgroep en wensen. Je krijgt direct een eerlijk advies over welk pakket past.',
+      'We bespreken je idee, doelgroep en wensen. Je krijgt direct een eerlijk advies over welk pakket past bij jouw doel.',
   },
   {
     label: 'stap 02 — bouwen',
     title: 'Ontwerpen & ontwikkelen',
     description:
-      'Ik bouw je site of applicatie en houd je onderweg op de hoogte, zodat er geen verrassingen zijn bij oplevering.',
+      'Ik bouw je site of applicatie en houd je onderweg op de hoogte, zodat er geen verrassingen zijn bij de oplevering.',
   },
   {
     label: 'stap 03 — live',
@@ -146,14 +140,8 @@ export const processSteps: ProcessStepData[] = [
 
 export const aboutContent: AboutContent = {
   paragraphs: [
-    'SLP Software is het bedrijf van een web- en .NET-ontwikkelaar die gelooft dat goede software niet ingewikkeld hoeft te voelen. Geen accountmanagers of lange trajecten: je schakelt direct met degene die je project bouwt.',
-    'Van een strakke landingspagina tot een applicatie met eigen back-end — de aanpak is hetzelfde: heldere afspraken, nette code en een resultaat waar je jaren mee vooruit kunt.',
-  ],
-  techStack: [
-    { label: 'Front-end', value: 'HTML, CSS, JavaScript' },
-    { label: 'Back-end', value: '.NET / C#' },
-    { label: "API's", value: 'REST & koppelingen' },
-    { label: 'Focus', value: 'snelheid & onderhoudbaarheid' },
+    'Hi, ik ben Bryan Slop van SLP Software! Ik ben een ervaren web- en .NET-ontwikkelaar. Ik geloof dat goede software niet ingewikkeld hoeft te voelen. Software zonder lange trajecten: je schakelt direct met mij, de ontwikkelaar van jouw website of applicatie.',
+    'Van een strakke landingspagina tot een applicatie met eigen contentmanagementsysteem — de aanpak is hetzelfde: heldere afspraken, nette code en een resultaat waar je jaren mee vooruit kunt.',
   ],
 };
 

src/features/landing/pages/LandingPage.tsx

@@ -8,9 +8,9 @@ export function LandingPage() {
   return (
     <>
       <Hero />
+      <AboutSection />
       <PackagesSection />
       <ProcessSection />
-      <AboutSection />
       <ContactSection />
     </>
   );