{"id":1139,"date":"2026-01-28T09:44:27","date_gmt":"2026-01-28T08:44:27","guid":{"rendered":"https:\/\/developing.nl\/?page_id=1139"},"modified":"2026-03-19T12:03:12","modified_gmt":"2026-03-19T11:03:12","slug":"home","status":"publish","type":"page","link":"https:\/\/developing.nl\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Funnel+Display:wght@800&family=Funnel+Sans:wght@300;700&display=swap');\n@import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css');\n\n\/* Underline effect - geanimeerde curved streep *\/\n.hero-home h1.font-display span {\n    position: relative;\n    display: inline-block;\n}\n\n.hero-home h1.font-display span::after {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 0;\n    width: 100%;\n    height: 10px;\n    background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='459' height='10' viewBox='0 0 459 10' preserveAspectRatio='none'%3E%3Cpath d='M0 8C87 2 301 -4 459 8' stroke='%23FF5100' stroke-width='3' fill='none'\/%3E%3C\/svg%3E\") no-repeat;\n    background-size: 100% 100%;\n    clip-path: inset(0 100% 0 0);\n    animation: drawUnderline 0.8s 0.5s forwards;\n}\n\n@keyframes drawUnderline {\n    to {\n        clip-path: inset(0 0 0 0);\n    }\n}\n\n\/* Review text span styling - automatische underline *\/\n.review-text span {\n    font-weight: 700;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n}\n\n@media (min-width: 768px) {\n    .hero-home h1.font-display span::after {\n        bottom: -8px;\n        height: 12px;\n    }\n}\n\n\/* Logo slider - infinite scroll animation only on mobile *\/\n.logo-slider-wrapper {\n    overflow: hidden;\n    width: 100%;\n    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-slider {\n    display: flex;\n    gap: 70px;\n    width: max-content;\n}\n\n.logo-slider-item {\n    flex-shrink: 0;\n}\n\n\/* Animation wordt via JavaScript ingesteld voor exacte breedte *\/\n\n\/* Desktop: geen animatie, gewoon gecentreerd *\/\n@media (min-width: 1024px) {\n    .logo-slider-wrapper {\n        overflow: visible;\n        mask-image: none;\n        -webkit-mask-image: none;\n    }\n    \n    .logo-slider {\n        animation: none;\n        width: auto;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 70px;\n    }\n    \n    \/* Verberg gedupliceerde logos op desktop *\/\n    .logo-slider-item:nth-child(n+7) {\n        display: none;\n    }\n}\n\n@media (min-width: 768px) and (max-width: 1023px) {\n    .logo-slider {\n        gap: 4rem;\n    }\n}\n<\/style>\n\n<section class=\"hero-home relative w-full overflow-hidden bg-dark\">\n        \n    <style>\n    #gradient-canvas-69f95a091a36b {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 0;\n        pointer-events: none;\n    }\n    <\/style>\n    \n    <canvas id=\"gradient-canvas-69f95a091a36b\"><\/canvas>\n    \n    <script>\n    (function() {\n        const config = {\n            canvasId: 'gradient-canvas-69f95a091a36b',\n            fadeTop: false,\n            fadeBottom: true,\n            fadeTopIntensity: 0.3,\n            fadeBottomIntensity: 0.25,\n            startFromTop: 0,\n            uvScaleY: 1,\n            scrollEffect: true        };\n        \n        function initGradient() {\n            const canvas = document.getElementById(config.canvasId);\n            if (!canvas) return;\n\n            canvas.width = canvas.offsetWidth || window.innerWidth;\n            canvas.height = canvas.offsetHeight || window.innerHeight;\n            \n            const gl = canvas.getContext('webgl', { antialias: false, alpha: false }) || \n                       canvas.getContext('experimental-webgl', { antialias: false, alpha: false });\n            \n            if (!gl) {\n                canvas.style.background = 'linear-gradient(135deg, #090C14, #3E72FF, #FF5100)';\n                return;\n            }\n\n            const vsSource = `\n                attribute vec2 aPosition;\n                varying vec2 vUv;\n                \n                void main() {\n                    vUv = aPosition * 0.5 + 0.5;\n                    gl_Position = vec4(aPosition, 0.0, 1.0);\n                }\n            `;\n\n            const fsSource = `\n                precision highp float;\n                \n                uniform float uTime;\n                uniform float uScrollProgress;\n                uniform float uUvScale;\n                uniform float uUvDistortionIterations;\n                uniform float uUvDistortionIntensity;\n                uniform vec2 uUvOffset;\n                uniform bool uFadeTop;\n                uniform bool uFadeBottom;\n                uniform float uFadeTopIntensity;\n                uniform float uFadeBottomIntensity;\n                uniform float uStartFromTop;\n                uniform float uUvScaleY;\n                \n                varying vec2 vUv;\n                \n                vec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n                vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n                \n                float snoise(vec3 v) {\n                    const vec2 C = vec2(1.0\/6.0, 1.0\/3.0);\n                    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n                    \n                    vec3 i = floor(v + dot(v, C.yyy));\n                    vec3 x0 = v - i + dot(i, C.xxx);\n                    \n                    vec3 g = step(x0.yzx, x0.xyz);\n                    vec3 l = 1.0 - g;\n                    vec3 i1 = min(g.xyz, l.zxy);\n                    vec3 i2 = max(g.xyz, l.zxy);\n                    \n                    vec3 x1 = x0 - i1 + C.xxx;\n                    vec3 x2 = x0 - i2 + C.yyy;\n                    vec3 x3 = x0 - D.yyy;\n                    \n                    i = mod(i, 289.0);\n                    vec4 p = permute(permute(permute(\n                        i.z + vec4(0.0, i1.z, i2.z, 1.0))\n                        + i.y + vec4(0.0, i1.y, i2.y, 1.0))\n                        + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n                        \n                    float n_ = 1.0\/7.0;\n                    vec3 ns = n_ * D.wyz - D.xzx;\n                    \n                    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n                    \n                    vec4 x_ = floor(j * ns.z);\n                    vec4 y_ = floor(j - 7.0 * x_);\n                    \n                    vec4 x = x_ *ns.x + ns.yyyy;\n                    vec4 y = y_ *ns.x + ns.yyyy;\n                    vec4 h = 1.0 - abs(x) - abs(y);\n                    \n                    vec4 b0 = vec4(x.xy, y.xy);\n                    vec4 b1 = vec4(x.zw, y.zw);\n                    \n                    vec4 s0 = floor(b0)*2.0 + 1.0;\n                    vec4 s1 = floor(b1)*2.0 + 1.0;\n                    vec4 sh = -step(h, vec4(0.0));\n                    \n                    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\n                    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\n                    \n                    vec3 p0 = vec3(a0.xy, h.x);\n                    vec3 p1 = vec3(a0.zw, h.y);\n                    vec3 p2 = vec3(a1.xy, h.z);\n                    vec3 p3 = vec3(a1.zw, h.w);\n                    \n                    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n                    p0 *= norm.x;\n                    p1 *= norm.y;\n                    p2 *= norm.z;\n                    p3 *= norm.w;\n                    \n                    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n                    m = m * m;\n                    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n                }\n                \n                void main() {\n                    vec2 uv = vUv;\n                    \n                    \/\/ Verticale schaal toepassen op gradient content (niet op fades)\n                    uv.y = uv.y * uUvScaleY - (uUvScaleY - 1.0) * 0.5;\n                    \n                    uv.y -= uScrollProgress;\n                    uv *= uUvScale;\n                    uv += uUvOffset;\n                    \n                    for (float i = 0.0; i < 8.0; i++) {\n                        if (i >= uUvDistortionIterations) break;\n                        uv += snoise(vec3(uv - i * 0.25, uTime * 1.3 + i * 32.0)) * uUvDistortionIntensity;\n                    }\n                    \n                    float noiseBlue = snoise(vec3(uv * 1.5, uTime * 1.4)) * 0.5 + 0.5;\n                    float noiseOrange = snoise(vec3(uv * 1.5 + 50.0, uTime * 1.4 + 25.0)) * 0.5 + 0.5;\n                    \n                    vec3 dark = vec3(0.035, 0.047, 0.078);\n                    vec3 blue = vec3(0.243, 0.447, 1.0);\n                    vec3 orange = vec3(1.0, 0.318, 0.0);\n                    vec3 purple = vec3(0.35, 0.1, 0.45);\n                    \n                    float blueAmount = smoothstep(0.15, 0.85, noiseBlue) * 0.72;\n                    float orangeAmount = smoothstep(0.15, 0.85, noiseOrange) * 0.72;\n                    \n                    float bluePos = smoothstep(1.2, 0.0, length(uv - vec2(0.0, 1.0)));\n                    float orangePos = smoothstep(1.2, 0.0, length(uv - vec2(1.0, 0.0)));\n                    \n                    blueAmount = blueAmount * bluePos + bluePos * 0.08;\n                    orangeAmount = orangeAmount * orangePos + orangePos * 0.08;\n                    \n                    vec3 colour = dark;\n                    colour = mix(colour, blue, blueAmount);\n                    colour = mix(colour, orange, orangeAmount);\n                    \n                    float overlap = min(blueAmount, orangeAmount);\n                    colour = mix(colour, purple, overlap * 0.75);\n                    \n                    float glowBlue = smoothstep(1.6, 0.3, length(uv - vec2(0.0, 1.0))) * 0.08;\n                    float glowOrange = smoothstep(1.6, 0.3, length(uv - vec2(1.0, 0.0))) * 0.08;\n                    colour += blue * glowBlue + orange * glowOrange;\n                    \n                    float vignette = 1.0 - length(vUv - 0.5) * 0.4;\n                    colour *= vignette;\n                    \n                    float luminance = dot(colour, vec3(0.299, 0.587, 0.114));\n                    colour = mix(vec3(luminance), colour, 1.3);\n                    colour = pow(colour, vec3(0.95));\n                    \n                    \/\/ Start from top: maak alles boven uStartFromTop donker\n                    \/\/ vUv.y = 0.0 is onderkant, vUv.y = 1.0 is bovenkant\n                    \/\/ uStartFromTop = 0.25 betekent: gradient begint pas vanaf 75% van boven (25% vanaf onder)\n                    float startThreshold = 1.0 - uStartFromTop;\n                    if (vUv.y > startThreshold && uStartFromTop > 0.0) {\n                        \/\/ Fade van gradient naar donker boven de threshold\n                        float startFade = smoothstep(startThreshold, startThreshold + 0.1, vUv.y);\n                        colour = mix(colour, dark, startFade);\n                    }\n                    \n                    \/\/ Configureerbare fades\n                    if (uFadeTop) {\n                        \/\/ Fade aan bovenkant: van gradient naar donker naarmate y naar 1.0 gaat\n                        float topFade = smoothstep(1.0 - uFadeTopIntensity, 1.0, vUv.y);\n                        colour = mix(colour, dark, topFade);\n                    }\n                    \n                    if (uFadeBottom) {\n                        \/\/ Fade aan onderkant: van donker naar gradient naarmate y van 0.0 stijgt\n                        float bottomFade = smoothstep(0.0, uFadeBottomIntensity, vUv.y);\n                        colour = mix(dark, colour, bottomFade);\n                    }\n                    \n                    gl_FragColor = vec4(colour, 1.0);\n                }\n            `;\n\n            function createShader(gl, type, source) {\n                const shader = gl.createShader(type);\n                gl.shaderSource(shader, source);\n                gl.compileShader(shader);\n                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n                    console.error('Shader compile error:', gl.getShaderInfoLog(shader));\n                    gl.deleteShader(shader);\n                    return null;\n                }\n                return shader;\n            }\n\n            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);\n            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);\n\n            if (!vertexShader || !fragmentShader) return;\n\n            const program = gl.createProgram();\n            gl.attachShader(program, vertexShader);\n            gl.attachShader(program, fragmentShader);\n            gl.linkProgram(program);\n\n            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n                console.error('Program link error:', gl.getProgramInfoLog(program));\n                return;\n            }\n\n            gl.useProgram(program);\n\n            const positions = new Float32Array([\n                -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,\n            ]);\n\n            const positionBuffer = gl.createBuffer();\n            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n            gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);\n\n            const aPosition = gl.getAttribLocation(program, 'aPosition');\n            gl.enableVertexAttribArray(aPosition);\n            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);\n\n            const uTime = gl.getUniformLocation(program, 'uTime');\n            const uScrollProgress = gl.getUniformLocation(program, 'uScrollProgress');\n            const uUvScale = gl.getUniformLocation(program, 'uUvScale');\n            const uUvDistortionIterations = gl.getUniformLocation(program, 'uUvDistortionIterations');\n            const uUvDistortionIntensity = gl.getUniformLocation(program, 'uUvDistortionIntensity');\n            const uUvOffset = gl.getUniformLocation(program, 'uUvOffset');\n            const uFadeTop = gl.getUniformLocation(program, 'uFadeTop');\n            const uFadeBottom = gl.getUniformLocation(program, 'uFadeBottom');\n            const uFadeTopIntensity = gl.getUniformLocation(program, 'uFadeTopIntensity');\n            const uFadeBottomIntensity = gl.getUniformLocation(program, 'uFadeBottomIntensity');\n            const uStartFromTop = gl.getUniformLocation(program, 'uStartFromTop');\n            const uUvScaleY = gl.getUniformLocation(program, 'uUvScaleY');\n\n            gl.uniform1f(uUvScale, 1.0);\n            gl.uniform1f(uUvDistortionIterations, 3.0);\n            gl.uniform1f(uUvDistortionIntensity, 0.08);\n            gl.uniform2f(uUvOffset, 0.0, 0.0);\n            gl.uniform1i(uFadeTop, config.fadeTop ? 1 : 0);\n            gl.uniform1i(uFadeBottom, config.fadeBottom ? 1 : 0);\n            gl.uniform1f(uFadeTopIntensity, config.fadeTopIntensity);\n            gl.uniform1f(uFadeBottomIntensity, config.fadeBottomIntensity);\n            gl.uniform1f(uStartFromTop, config.startFromTop);\n            gl.uniform1f(uUvScaleY, config.uvScaleY);\n\n            let startTime = performance.now();\n            let scrollProgress = 0;\n\n            function updateScroll() {\n                if (!config.scrollEffect) return;\n                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n                const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n                scrollProgress = docHeight > 0 ? scrollTop \/ docHeight : 0;\n            }\n            if (config.scrollEffect) {\n                window.addEventListener('scroll', updateScroll, { passive: true });\n            }\n\n            function resize() {\n                canvas.width = canvas.offsetWidth || window.innerWidth;\n                canvas.height = canvas.offsetHeight || window.innerHeight;\n                gl.viewport(0, 0, canvas.width, canvas.height);\n            }\n            window.addEventListener('resize', resize);\n\n            function render() {\n                const time = (performance.now() - startTime) \/ 1000;\n                gl.uniform1f(uTime, time * 0.12);\n                gl.uniform1f(uScrollProgress, scrollProgress * 0.5);\n                gl.drawArrays(gl.TRIANGLES, 0, 6);\n                requestAnimationFrame(render);\n            }\n\n            resize();\n            render();\n        }\n\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', initGradient);\n        } else {\n            initGradient();\n        }\n    })();\n    <\/script>\n        <!-- Extra fade overlay om harde lijn te maskeren -->\n    <div class=\"absolute bottom-0 left-0 right-0 h-[150px] z-[1] pointer-events-none\" style=\"background: linear-gradient(to bottom, transparent 0%, #090C14 100%);\"><\/div>\n    \n    <!-- Content -->\n    <div class=\"relative z-10 flex flex-col items-center text-center px-4 pt-40 md:px-5 md:pt-52 lg:pt-[233px] mb-12 md:mb-20 lg:mb-spacingblocks\">\n        \n        <!-- Mobile Review (alleen 1 review op mobiel) -->\n                \n        <!-- Desktop Reviews -->\n                \n        <!-- Headline -->\n        <h1 class=\"-mx-[10px] sm:mx-auto max-w-[70rem] px-0 sm:px-4 md:px-0 text-center font-display text-[40px] md:text-6xl lg:text-heading-home font-extrabold leading-[1.2] sm:leading-[1.25] text-white [&#038;_span]:text-orange\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n            Online groei begint met <span>technische zekerheid<\/span>        <\/h1>\n        \n        <!-- Description -->\n        <p class=\"mt-6 sm:mt-8 md:mt-12 lg:mt-14 max-w-[46rem] px-2 sm:px-4 md:px-0 text-center font-sans text-lg md:text-lg lg:text-body-large font-light leading-[1.6] text-white\/70\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n            Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.        <\/p>\n        \n        <!-- Scroll Indicator -->\n        <div class=\"w-12 h-12 mt-8 mb-8 sm:w-12 sm:h-12 sm:mt-8 sm:mb-8 md:mt-2 md:mb-10 lg:mb-[114px] lg:mt-[22px] cursor-pointer rounded-full hover:bg-white\/10 transition-colors scroll-to-next-section\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n            <svg class=\"w-full h-full\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M26.4453 34.3008L25.5 35.2891L24.5117 34.3008L18.3242 28.1133L17.3359 27.125L19.3125 25.1914L20.2578 26.1797L24.125 30.0039V17.5V16.125H26.875V17.5V30.0039L30.6992 26.1797L31.6875 25.1914L33.6211 27.125L32.6328 28.1133L26.4453 34.3008Z\" fill=\"white\"\/>\n                <rect opacity=\"0.25\" x=\"0.5\" y=\"0.5\" width=\"49\" height=\"48.4734\" rx=\"24.2367\" stroke=\"white\"\/>\n            <\/svg>\n        <\/div>\n        \n                <!-- Client Logos Slider -->\n        <div class=\"logo-slider-wrapper w-full max-w-7xl\" data-aos=\"fade-up\" data-aos-delay=\"500\">\n            <div class=\"logo-slider flex items-center gap-[70px] py-2\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2025\/12\/5c12d49e9d86615b7d29555cd926b9e4e7c0fb37.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2025\/12\/8791f737dc3d788075243f411b8385d45dd2978e.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2025\/12\/2b5903f8c0528997d7adc4799d8fadf35c73a10b.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/02\/ComplianceWise.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/02\/Logo-Bedrijfsenergielabels.nl_.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/02\/Logo-RDT_v1-1024x578-1.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2025\/12\/5c12d49e9d86615b7d29555cd926b9e4e7c0fb37.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2025\/12\/8791f737dc3d788075243f411b8385d45dd2978e.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2025\/12\/2b5903f8c0528997d7adc4799d8fadf35c73a10b.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/02\/ComplianceWise.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/02\/Logo-Bedrijfsenergielabels.nl_.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                                    <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/02\/Logo-RDT_v1-1024x578-1.png\" \n                         alt=\"\" \n                         class=\"logo-slider-item h-10 md:h-12 w-auto opacity-70 grayscale brightness-200\">\n                            <\/div>\n        <\/div>\n            <\/div>\n<\/section>\n\n<script>\n(function() {\n    \n    \/\/ Logo slider animatie - berekent exacte breedte voor seamless loop\n    function initLogoSlider() {\n        const slider = document.querySelector('.hero-home .logo-slider');\n        const styleId = 'logo-slider-animation';\n        let styleEl = document.getElementById(styleId);\n        \n        \/\/ Op desktop: verwijder animatie\n        if (!slider || window.innerWidth >= 1024) {\n            if (styleEl) {\n                styleEl.textContent = '';\n            }\n            return;\n        }\n        \n        const items = slider.querySelectorAll('.logo-slider-item');\n        const totalItems = items.length;\n        const originalCount = totalItems \/ 2; \/\/ Helft zijn duplicaten\n        \n        \/\/ Bereken de breedte van de eerste helft (originele items + gaps)\n        let halfWidth = 0;\n        const gap = 70; \/\/ Vaste gap van 50px zoals in de markup gedefinieerd\n        \n        for (let i = 0; i < originalCount; i++) {\n            halfWidth += items[i].offsetWidth;\n            if (i < originalCount - 1) {\n                halfWidth += gap;\n            }\n        }\n        \/\/ Voeg nog \u00e9\u00e9n gap toe voor de overgang naar de duplicaten\n        halfWidth += gap;\n        \n        \/\/ Maak keyframes dynamisch aan\n        if (!styleEl) {\n            styleEl = document.createElement('style');\n            styleEl.id = styleId;\n            document.head.appendChild(styleEl);\n        }\n        \n        styleEl.textContent = `\n            @keyframes logo-scroll {\n                0% { transform: translateX(0); }\n                100% { transform: translateX(-${halfWidth}px); }\n            }\n            .hero-home .logo-slider {\n                display: flex;\n                align-items: center;\n                gap: 70px;\n                animation: logo-scroll 25s linear infinite;\n            }\n        `;\n    }\n    \n    \/\/ Herinitialiseer bij resize\n    let resizeTimeout;\n    window.addEventListener('resize', function() {\n        clearTimeout(resizeTimeout);\n        resizeTimeout = setTimeout(initLogoSlider, 200);\n    });\n    \n    \/\/ Media query listener voor betrouwbare desktop\/mobiel detectie\n    const mediaQuery = window.matchMedia('(min-width: 1024px)');\n    mediaQuery.addEventListener('change', function(e) {\n        initLogoSlider();\n    });\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initLogoSlider);\n    } else {\n        initLogoSlider();\n    }\n})();\n<\/script>\n\n\n\n<style>\n.case-slider-sectie-title {\n    margin-left: 1rem; \/* Mobile: standaard linker marge *\/\n}\n@media (min-width: 640px) {\n    .case-slider-sectie-title {\n        margin-left: 1.5rem; \/* sm: iets meer ruimte *\/\n    }\n}\n@media (min-width: 768px) {\n    .case-slider-sectie-title {\n        margin-left: 3rem; \/* md: meer ruimte *\/\n    }\n}\n@media (min-width: 1024px) {\n    .case-slider-sectie-title {\n        margin-left: calc((2 \/ 9) * 120% - 10%); \/* lg+: originele desktop positie *\/\n    }\n}\n<\/style>\n\n<section class=\"w-full bg-black overflow-hidden \" data-aos=\"fade-up\">\n        \n    <div id=\"case-slider-69f95a092003e\" class=\"case-slider-container\" data-slider-config='{&quot;slides&quot;:[{&quot;id&quot;:350,&quot;title&quot;:&quot;Een stabiel en conversiegericht inschrijfformulier met Salesforce integratie&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/arbo-centrum\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/ARBO-Inschrijven-2-1920x1280.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:553,&quot;title&quot;:&quot;Een moderne Engelstalige website op maat voor een internationaal klantenbestand&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/rim-drive-technology\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Rim-Drive-Dealers-1-1920x1280.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:584,&quot;title&quot;:&quot;Maatwerk website met Carerix koppeling en webapp voor urenregistratie&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/liber-personeel\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Liber-home-1.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:544,&quot;title&quot;:&quot;Vernieuwde website van bedrijfsenergielabels met een modern en gebruiksvriendelijk design.&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/bedrijfsenergielabels\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/BEL-home-1-1920x1440.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:577,&quot;title&quot;:&quot;Maatwerk webshop met koppeling naar systemen van diverse gemeentes&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/stichting-stop\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Stichting-Stop-winkel-1-1920x1280.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:590,&quot;title&quot;:&quot;Een oude website in een nieuw jasje gestoken&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/borstvoeding-com\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Borstvoeding-homepage-laptop-1.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:598,&quot;title&quot;:&quot;Van rebranding naar nieuwe website in huisstijl&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/vink\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Vink-Milieu-1-1920x1440.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;},{&quot;id&quot;:565,&quot;title&quot;:&quot;Hoogwaardige nieuwe maatwerk website die recht doet aan imago&quot;,&quot;link&quot;:&quot;https:\\\/\\\/developing.nl\\\/cases\\\/betan-clinics\\\/&quot;,&quot;image&quot;:&quot;https:\\\/\\\/developing.nl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Betan-Home-V2-1-1920x1282.jpg&quot;,&quot;category&quot;:&quot;Cases&quot;}],&quot;slideDuration&quot;:3000,&quot;sectionTitle&quot;:&quot;&quot;,&quot;title&quot;:&quot;Recente &lt;span&gt;projecten&lt;\\\/span&gt;&quot;,&quot;description&quot;:&quot;Je wilt natuurlijk zien wat wij doen. We vertellen je graag over ons werk, maar laten het liever zien. Iedereen kan een goed verhaal vertellen. Op deze pagina vind je enkele voorbeelden van ons werk.&quot;}'>\n        <!-- Minimale loading state - React neemt volledig over -->\n        <div class=\"w-full min-h-[400px] flex items-center justify-center\">\n            <span class=\"text-white\/50 text-sm\"><\/span>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n\n<section class=\"w-full z-20 relative flex overflow-hidden\">\n    <div class=\"hidden lg:block w-[135px] flex-shrink-0 bg-black\"><\/div>\n    <div class=\"flex-1 bg-white mt-16 md:mt-20 lg:mt-spacingblocks mb-16 md:mb-20 lg:mb-spacingblocks\">\n        <div class=\"w-full px-4 sm:px-6 md:px-[40px] pt-6 pb-6 lg:py-16 xl:py-24 2xl:py-spacingblocks lg:px-[65px] xl:px-[75px] 2xl:px-[121px] max-w-full\">\n            <div class=\"w-full max-w-full\">\n                <div class=\"flex flex-col lg:flex-row items-start lg:items-center gap-0 md:gap-10 lg:gap-[3%] xl:gap-[3%] 2xl:gap-40 w-full overflow-hidden 2xl:-ml-[55px] 2xl:justify-center\">\n                    \n                    <!-- Media Sectie -->\n                    <div class=\"w-full lg:w-[38%] xl:w-[40%] 2xl:w-[45%] 3xl:w-[683px] flex-shrink-0\" data-aos=\"fade-right\" data-aos-delay=\"100\">\n                                                    <img decoding=\"async\" \n                                src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/03\/IMG_6821-scaled.jpg\" \n                                alt=\"Onze werkwijze\" \n                                class=\"w-full h-auto lg:h-[380px] xl:h-[420px] 2xl:h-[480px] 3xl:h-[520px] object-cover\"\n                            \/>\n                                            <\/div>\n                    \n                    <!-- Tekst Content Sectie -->\n                    <div class=\"w-full lg:w-[59%] xl:w-[57%] 2xl:w-[52%] 3xl:w-[578px] py-4 lg:py-[30px] xl:py-[40px] 2xl:py-[60px] 3xl:py-[75px] flex flex-col gap-6 md:gap-[30px] overflow-hidden max-w-full\" data-aos=\"fade-left\" data-aos-delay=\"100\">\n                        \n                        <!-- Tekst Group -->\n                        <div class=\"w-full overflow-hidden pr-0 lg:pr-4 xl:pr-6 2xl:pr-4 3xl:max-w-[565px] 3xl:pr-0\">\n                            <!-- Hoofdtitel -->\n                                                            <h2 class=\"font-display text-2xl sm:text-3xl md:text-4xl lg:text-[30px] xl:text-[34px] 2xl:text-[40px] 3xl:text-heading-medium text-black mb-2 sm:mb-2 md:mb-4 lg:mb-4 xl:mb-5 2xl:mb-5\">\n                                    Onze <span class=\"text-orange font-bold\">werkwijze<\/span>                                <\/h2>\n                                                        \n                            <!-- Beschrijving -->\n                                                            <p class=\"font-sans font-light text-sm sm:text-base md:text-lg lg:text-[15px] xl:text-base 2xl:text-lg 3xl:text-body-large leading-[160%] text-black opacity-70 w-full\">\n                                    Kies je voor Developing, dan kies je voor specialisten die veel waarde hechten aan een goede, open en intensieve samenwerking. Jij hebt de vakinhoudelijke kennis: wij hebben de kennis om dit optimaal tot zijn recht te laten komen in de perfecte website, webshop of applicatie. Daarom steken wij de koppen bij elkaar. Wij zien onszelf niet als een passant, maar als een partner die met je meedenkt \u00e9n een stap verder denkt. Wij zijn geen ja-knikkers, maar totaal partners van eerste idee tot support en alles daar tussenin.                                <\/p>\n                                                    <\/div>\n                        \n                        <!-- CTA Button -->\n                                                    <a \n                                href=\"\/contact\" \n                                class=\"inline-flex items-center gap-3 sm:gap-[15px] bg-orange px-4 sm:px-[25px] py-[0.69rem] w-fit max-w-full hover:opacity-90 transition-opacity\"\n                                                            >\n                                <span class=\"font-sans font-bold text-sm md:text-lg leading-[160%] text-white\">\n                                    Kom in contact                                <\/span>\n                               <svg width=\"22\" height=\"15\" viewBox=\"0 0 22 15\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"shrink-0\">\n                               <path d=\"M21.2695 8.03516L15.4258 13.8789L14.6953 14.6094L13.2344 13.1484L13.9648 12.418L18.0469 8.33594H1.03125H0V6.27344H1.03125H18.0469L13.9648 2.19141L13.2344 1.46094L14.6953 0L15.4258 0.730469L21.2695 6.57422L22 7.30469L21.2695 8.03516Z\" fill=\"white\"\/>\n                               <\/svg>\n                            <\/a>\n                                                \n                    <\/div>\n                    \n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const videos = document.querySelectorAll('.auto-play-video');\n    \n    if (videos.length === 0) return;\n    \n    const observerOptions = {\n        root: null,\n        rootMargin: '0px',\n        threshold: 0.5\n    };\n    \n    const videoObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            const video = entry.target;\n            \n            if (entry.isIntersecting) {\n                video.play().catch(error => {\n                    console.log('Autoplay prevented:', error);\n                });\n            } else {\n                video.pause();\n            }\n        });\n    }, observerOptions);\n    \n    videos.forEach(video => {\n        videoObserver.observe(video);\n    });\n});\n<\/script>\n\n\n\n<style>\n.content-image-gradient .content-wrapper {\n    position: relative;\n    z-index: 20;\n}\n<\/style>\n\n<section class=\"w-full flex lg:px-paddingtest overflow-visible content-image-gradient relative z-10 mt-12 md:mt-16 lg:mt-spacingblocks\">\n        \n    <style>\n    #gradient-canvas-69f95a0921200 {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 0;\n        pointer-events: none;\n    }\n    <\/style>\n    \n    <canvas id=\"gradient-canvas-69f95a0921200\"><\/canvas>\n    \n    <script>\n    (function() {\n        const config = {\n            canvasId: 'gradient-canvas-69f95a0921200',\n            fadeTop: true,\n            fadeBottom: true,\n            fadeTopIntensity: 0.35,\n            fadeBottomIntensity: 0.2,\n            startFromTop: 0,\n            uvScaleY: 1,\n            scrollEffect: true        };\n        \n        function initGradient() {\n            const canvas = document.getElementById(config.canvasId);\n            if (!canvas) return;\n\n            canvas.width = canvas.offsetWidth || window.innerWidth;\n            canvas.height = canvas.offsetHeight || window.innerHeight;\n            \n            const gl = canvas.getContext('webgl', { antialias: false, alpha: false }) || \n                       canvas.getContext('experimental-webgl', { antialias: false, alpha: false });\n            \n            if (!gl) {\n                canvas.style.background = 'linear-gradient(135deg, #090C14, #3E72FF, #FF5100)';\n                return;\n            }\n\n            const vsSource = `\n                attribute vec2 aPosition;\n                varying vec2 vUv;\n                \n                void main() {\n                    vUv = aPosition * 0.5 + 0.5;\n                    gl_Position = vec4(aPosition, 0.0, 1.0);\n                }\n            `;\n\n            const fsSource = `\n                precision highp float;\n                \n                uniform float uTime;\n                uniform float uScrollProgress;\n                uniform float uUvScale;\n                uniform float uUvDistortionIterations;\n                uniform float uUvDistortionIntensity;\n                uniform vec2 uUvOffset;\n                uniform bool uFadeTop;\n                uniform bool uFadeBottom;\n                uniform float uFadeTopIntensity;\n                uniform float uFadeBottomIntensity;\n                uniform float uStartFromTop;\n                uniform float uUvScaleY;\n                \n                varying vec2 vUv;\n                \n                vec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n                vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n                \n                float snoise(vec3 v) {\n                    const vec2 C = vec2(1.0\/6.0, 1.0\/3.0);\n                    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n                    \n                    vec3 i = floor(v + dot(v, C.yyy));\n                    vec3 x0 = v - i + dot(i, C.xxx);\n                    \n                    vec3 g = step(x0.yzx, x0.xyz);\n                    vec3 l = 1.0 - g;\n                    vec3 i1 = min(g.xyz, l.zxy);\n                    vec3 i2 = max(g.xyz, l.zxy);\n                    \n                    vec3 x1 = x0 - i1 + C.xxx;\n                    vec3 x2 = x0 - i2 + C.yyy;\n                    vec3 x3 = x0 - D.yyy;\n                    \n                    i = mod(i, 289.0);\n                    vec4 p = permute(permute(permute(\n                        i.z + vec4(0.0, i1.z, i2.z, 1.0))\n                        + i.y + vec4(0.0, i1.y, i2.y, 1.0))\n                        + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n                        \n                    float n_ = 1.0\/7.0;\n                    vec3 ns = n_ * D.wyz - D.xzx;\n                    \n                    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n                    \n                    vec4 x_ = floor(j * ns.z);\n                    vec4 y_ = floor(j - 7.0 * x_);\n                    \n                    vec4 x = x_ *ns.x + ns.yyyy;\n                    vec4 y = y_ *ns.x + ns.yyyy;\n                    vec4 h = 1.0 - abs(x) - abs(y);\n                    \n                    vec4 b0 = vec4(x.xy, y.xy);\n                    vec4 b1 = vec4(x.zw, y.zw);\n                    \n                    vec4 s0 = floor(b0)*2.0 + 1.0;\n                    vec4 s1 = floor(b1)*2.0 + 1.0;\n                    vec4 sh = -step(h, vec4(0.0));\n                    \n                    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\n                    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\n                    \n                    vec3 p0 = vec3(a0.xy, h.x);\n                    vec3 p1 = vec3(a0.zw, h.y);\n                    vec3 p2 = vec3(a1.xy, h.z);\n                    vec3 p3 = vec3(a1.zw, h.w);\n                    \n                    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n                    p0 *= norm.x;\n                    p1 *= norm.y;\n                    p2 *= norm.z;\n                    p3 *= norm.w;\n                    \n                    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n                    m = m * m;\n                    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n                }\n                \n                void main() {\n                    vec2 uv = vUv;\n                    \n                    \/\/ Verticale schaal toepassen op gradient content (niet op fades)\n                    uv.y = uv.y * uUvScaleY - (uUvScaleY - 1.0) * 0.5;\n                    \n                    uv.y -= uScrollProgress;\n                    uv *= uUvScale;\n                    uv += uUvOffset;\n                    \n                    for (float i = 0.0; i < 8.0; i++) {\n                        if (i >= uUvDistortionIterations) break;\n                        uv += snoise(vec3(uv - i * 0.25, uTime * 1.3 + i * 32.0)) * uUvDistortionIntensity;\n                    }\n                    \n                    float noiseBlue = snoise(vec3(uv * 1.5, uTime * 1.4)) * 0.5 + 0.5;\n                    float noiseOrange = snoise(vec3(uv * 1.5 + 50.0, uTime * 1.4 + 25.0)) * 0.5 + 0.5;\n                    \n                    vec3 dark = vec3(0.035, 0.047, 0.078);\n                    vec3 blue = vec3(0.243, 0.447, 1.0);\n                    vec3 orange = vec3(1.0, 0.318, 0.0);\n                    vec3 purple = vec3(0.35, 0.1, 0.45);\n                    \n                    float blueAmount = smoothstep(0.15, 0.85, noiseBlue) * 0.72;\n                    float orangeAmount = smoothstep(0.15, 0.85, noiseOrange) * 0.72;\n                    \n                    float bluePos = smoothstep(1.2, 0.0, length(uv - vec2(0.0, 1.0)));\n                    float orangePos = smoothstep(1.2, 0.0, length(uv - vec2(1.0, 0.0)));\n                    \n                    blueAmount = blueAmount * bluePos + bluePos * 0.08;\n                    orangeAmount = orangeAmount * orangePos + orangePos * 0.08;\n                    \n                    vec3 colour = dark;\n                    colour = mix(colour, blue, blueAmount);\n                    colour = mix(colour, orange, orangeAmount);\n                    \n                    float overlap = min(blueAmount, orangeAmount);\n                    colour = mix(colour, purple, overlap * 0.75);\n                    \n                    float glowBlue = smoothstep(1.6, 0.3, length(uv - vec2(0.0, 1.0))) * 0.08;\n                    float glowOrange = smoothstep(1.6, 0.3, length(uv - vec2(1.0, 0.0))) * 0.08;\n                    colour += blue * glowBlue + orange * glowOrange;\n                    \n                    float vignette = 1.0 - length(vUv - 0.5) * 0.4;\n                    colour *= vignette;\n                    \n                    float luminance = dot(colour, vec3(0.299, 0.587, 0.114));\n                    colour = mix(vec3(luminance), colour, 1.3);\n                    colour = pow(colour, vec3(0.95));\n                    \n                    \/\/ Start from top: maak alles boven uStartFromTop donker\n                    \/\/ vUv.y = 0.0 is onderkant, vUv.y = 1.0 is bovenkant\n                    \/\/ uStartFromTop = 0.25 betekent: gradient begint pas vanaf 75% van boven (25% vanaf onder)\n                    float startThreshold = 1.0 - uStartFromTop;\n                    if (vUv.y > startThreshold && uStartFromTop > 0.0) {\n                        \/\/ Fade van gradient naar donker boven de threshold\n                        float startFade = smoothstep(startThreshold, startThreshold + 0.1, vUv.y);\n                        colour = mix(colour, dark, startFade);\n                    }\n                    \n                    \/\/ Configureerbare fades\n                    if (uFadeTop) {\n                        \/\/ Fade aan bovenkant: van gradient naar donker naarmate y naar 1.0 gaat\n                        float topFade = smoothstep(1.0 - uFadeTopIntensity, 1.0, vUv.y);\n                        colour = mix(colour, dark, topFade);\n                    }\n                    \n                    if (uFadeBottom) {\n                        \/\/ Fade aan onderkant: van donker naar gradient naarmate y van 0.0 stijgt\n                        float bottomFade = smoothstep(0.0, uFadeBottomIntensity, vUv.y);\n                        colour = mix(dark, colour, bottomFade);\n                    }\n                    \n                    gl_FragColor = vec4(colour, 1.0);\n                }\n            `;\n\n            function createShader(gl, type, source) {\n                const shader = gl.createShader(type);\n                gl.shaderSource(shader, source);\n                gl.compileShader(shader);\n                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n                    console.error('Shader compile error:', gl.getShaderInfoLog(shader));\n                    gl.deleteShader(shader);\n                    return null;\n                }\n                return shader;\n            }\n\n            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);\n            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);\n\n            if (!vertexShader || !fragmentShader) return;\n\n            const program = gl.createProgram();\n            gl.attachShader(program, vertexShader);\n            gl.attachShader(program, fragmentShader);\n            gl.linkProgram(program);\n\n            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n                console.error('Program link error:', gl.getProgramInfoLog(program));\n                return;\n            }\n\n            gl.useProgram(program);\n\n            const positions = new Float32Array([\n                -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,\n            ]);\n\n            const positionBuffer = gl.createBuffer();\n            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n            gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);\n\n            const aPosition = gl.getAttribLocation(program, 'aPosition');\n            gl.enableVertexAttribArray(aPosition);\n            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);\n\n            const uTime = gl.getUniformLocation(program, 'uTime');\n            const uScrollProgress = gl.getUniformLocation(program, 'uScrollProgress');\n            const uUvScale = gl.getUniformLocation(program, 'uUvScale');\n            const uUvDistortionIterations = gl.getUniformLocation(program, 'uUvDistortionIterations');\n            const uUvDistortionIntensity = gl.getUniformLocation(program, 'uUvDistortionIntensity');\n            const uUvOffset = gl.getUniformLocation(program, 'uUvOffset');\n            const uFadeTop = gl.getUniformLocation(program, 'uFadeTop');\n            const uFadeBottom = gl.getUniformLocation(program, 'uFadeBottom');\n            const uFadeTopIntensity = gl.getUniformLocation(program, 'uFadeTopIntensity');\n            const uFadeBottomIntensity = gl.getUniformLocation(program, 'uFadeBottomIntensity');\n            const uStartFromTop = gl.getUniformLocation(program, 'uStartFromTop');\n            const uUvScaleY = gl.getUniformLocation(program, 'uUvScaleY');\n\n            gl.uniform1f(uUvScale, 1.0);\n            gl.uniform1f(uUvDistortionIterations, 3.0);\n            gl.uniform1f(uUvDistortionIntensity, 0.08);\n            gl.uniform2f(uUvOffset, 0.0, 0.0);\n            gl.uniform1i(uFadeTop, config.fadeTop ? 1 : 0);\n            gl.uniform1i(uFadeBottom, config.fadeBottom ? 1 : 0);\n            gl.uniform1f(uFadeTopIntensity, config.fadeTopIntensity);\n            gl.uniform1f(uFadeBottomIntensity, config.fadeBottomIntensity);\n            gl.uniform1f(uStartFromTop, config.startFromTop);\n            gl.uniform1f(uUvScaleY, config.uvScaleY);\n\n            let startTime = performance.now();\n            let scrollProgress = 0;\n\n            function updateScroll() {\n                if (!config.scrollEffect) return;\n                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n                const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n                scrollProgress = docHeight > 0 ? scrollTop \/ docHeight : 0;\n            }\n            if (config.scrollEffect) {\n                window.addEventListener('scroll', updateScroll, { passive: true });\n            }\n\n            function resize() {\n                canvas.width = canvas.offsetWidth || window.innerWidth;\n                canvas.height = canvas.offsetHeight || window.innerHeight;\n                gl.viewport(0, 0, canvas.width, canvas.height);\n            }\n            window.addEventListener('resize', resize);\n\n            function render() {\n                const time = (performance.now() - startTime) \/ 1000;\n                gl.uniform1f(uTime, time * 0.12);\n                gl.uniform1f(uScrollProgress, scrollProgress * 0.5);\n                gl.drawArrays(gl.TRIANGLES, 0, 6);\n                requestAnimationFrame(render);\n            }\n\n            resize();\n            render();\n        }\n\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', initGradient);\n        } else {\n            initGradient();\n        }\n    })();\n    <\/script>\n        \n    <div class=\"content-wrapper w-full bg-transparent\">\n         <div class=\"flex flex-col lg:flex-row-reverse items-center justify-center lg:gap-20 max-w-block px-6 md:px-8 lg:px-0 mx-auto mb-12 md:mb-20 lg:mb-spacingblocks\">\n\n\n                        <!-- Afbeelding Sectie - 683x520px -->\n                        <div class=\"w-full lg:w-[45%] xl:w-[50%] 2xl:w-[680px] shrink-0 lg:h-[450px] xl:h-[500px] 2xl:h-[555px] overflow-hidden z-[30]\" data-aos=\"fade-right\" data-aos-delay=\"100\">\n                                                            <img decoding=\"async\" \n                                    src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/01\/Gespecialiseerd-in-ontwikkeling.jpg\" \n                                    alt=\"\" \n                                    class=\"w-full h-64 md:h-80 lg:h-[450px] xl:h-[500px] 2xl:h-[555px] object-cover\"\n                                \/>\n                                                    <\/div>\n                        \n                        <!-- Tekst Content Sectie -->\n                        <div class=\"w-full lg:w-1\/2 flex flex-col justify-center py-10 md:py-16 lg:py-[60px] xl:py-[65px] 2xl:py-[75px] lg:min-h-[450px] xl:min-h-[500px] 2xl:min-h-[555px] gap-6 md:gap-8 z-[30]\" data-aos=\"fade-left\" data-aos-delay=\"100\">\n                            \n                            <!-- Tekst Group -->\n                            <div class=\"max-w-[562px]\">\n                                <!-- Hoofdtitel -->\n                                                                    <h2 class=\"content-image-title font-display font-light text-lg md:text-4xl lg:text-3xl xl:text-4xl 2xl:text-heading-medium leading-tight text-white mb-3 sm:mb-4 md:mb-6 lg:mb-8 [&amp;_span]:text-orange [&amp;_span]:font-bold\">\n                                        Gespecialiseerd in <span>ontwikkeling<\/span>                                    <\/h2>\n                                                                \n                                <!-- Beschrijving -->\n                                                                    <p class=\"font-sans font-light text-lg md:text-lg lg:text-lg xl:text-xl 2xl:text-body-large lg:leading-relaxed leading-relaxed text-white opacity-70\">\n                                        Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties. Ook wanneer je advies nodig hebt over je huidige site, shop of app. Wij ontwikkelen, maar kunnen ook optimaliseren.                                    <\/p>\n                                                            <\/div>\n                            \n                            <!-- CTA Button - padding 25px left\/right, gap 15px, oranje achtergrond -->\n                                                            <a \n                                    href=\"\/contact\" \n                                    class=\"group flex items-center gap-3 lg:gap-3 xl:gap-4 border border-white bg-white text-dark px-[14px] lg:px-[18px] xl:px-[22px] py-2.5 hover:bg-transparent hover:text-white transition-colors duration-300 lg:whitespace-nowrap w-fit max-w-full\"\n                                                                    >\n                                    <span class=\"font-sans font-bold text-sm md:text-lg\">\n                                        Kom in contact                                    <\/span>\n                                    <svg width=\"22\" height=\"15\" viewBox=\"0 0 22 15\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"shrink-0\">\n                                        <path d=\"M21.2695 8.03516L15.4258 13.8789L14.6953 14.6094L13.2344 13.1484L13.9648 12.418L18.0469 8.33594H1.03125H0V6.27344H1.03125H18.0469L13.9648 2.19141L13.2344 1.46094L14.6953 0L15.4258 0.730469L21.2695 6.57422L22 7.30469L21.2695 8.03516Z\" fill=\"#090C14\" class=\"group-hover:fill-white transition-colors duration-300\"\/>\n                                    <\/svg>\n                                <\/a>\n                                                        \n                        <\/div>\n                        \n                    <\/div>\n        <\/div>\n<\/section>\n\n\n\n<section class=\"cta-block z-30 relative w-full overflow-hidden bg-dark pb-12 md:pb-16 lg:pb-12 xl:pb-16 2xl:pb-20 lg:px-4 xl:px-6 2xl:px-paddingtest\"  data-aos=\"fade-up\">\n        \n    <div class=\"relative z-10 px-4 sm:px-6 md:px-8 lg:px-8 xl:px-12 2xl:px-16 pt-8 md:pt-12 lg:pt-16 xl:pt-20 2xl:pt-24 lg:pb-10 xl:pb-12 2xl:pb-16\">\n        <div class=\"max-w-block px-2 sm:px-4 md:px-8 lg:px-0 mx-auto\">\n            <div class=\"flex flex-col gap-8 sm:gap-10 md:gap-12 lg:flex-row lg:items-start lg:gap-6 xl:gap-8 2xl:gap-10\">\n                \n                <!-- Left: Title & Button -->\n                <div class=\"lg:w-5\/12 xl:w-4\/12 lg:pt-8\" data-aos=\"fade-right\" data-aos-delay=\"100\">\n                                        <h2 class=\"cta-title font-display text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-heading-medium font-light text-white leading-tight mb-4 sm:mb-6 md:mb-8 lg:mb-6 xl:mb-8 2xl:mb-10\">\n                        Benieuwd wat we <span>voor jou<\/span> kunnen betekenen?                    <\/h2>\n                                        \n                                        <a href=\"\/contact\" \n                       class=\"inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-2.5 border border-white bg-white text-dark font-sans font-bold text-sm sm:text-lg hover:bg-transparent hover:text-white transition-colors duration-300\"\n                       >\n                        Kom in contact                      <svg width=\"22\" height=\"15\" viewBox=\"0 0 22 15\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"transition-colors duration-300 w-5 h-auto sm:w-[22px]\">\n                        <path d=\"M21.2695 8.03516L15.4258 13.8789L14.6953 14.6094L13.2344 13.1484L13.9648 12.418L18.0469 8.33594H1.03125H0V6.27344H1.03125H18.0469L13.9648 2.19141L13.2344 1.46094L14.6953 0L15.4258 0.730469L21.2695 6.57422L22 7.30469L21.2695 8.03516Z\" fill=\"currentColor\"\/>\n                      <\/svg>\n                    <\/a>\n                                    <\/div>\n                \n                <!-- Right: Contact Card -->\n                <div class=\"w-full lg:flex-1\" data-aos=\"fade-left\" data-aos-delay=\"100\">\n                    <div class=\"relative w-full max-w-full lg:max-w-[600px] xl:max-w-[750px] 2xl:max-w-[925px]\">\n                        <!-- Card -->\n                        <div class=\"relative bg-white\/5 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-8 2xl:p-10 pb-6 sm:pb-8 md:pb-10 lg:pb-12 pt-5 sm:pt-6 md:pt-8 lg:pt-10 xl:pt-12 2xl:pt-14 lg:pl-10 xl:pl-14 overflow-visible lg:min-h-[320px] xl:min-h-[340px] 2xl:min-h-[368px]\">\n                            <div class=\"flex flex-col gap-6 sm:gap-8 md:gap-10 lg:flex-row lg:gap-6 xl:gap-8 2xl:gap-12 h-full relative\">\n                                \n                                <!-- Contact Info -->\n                                <div class=\"w-full lg:w-auto lg:min-w-[200px] lg:max-w-[248px] flex-shrink-0\">\n                                                                        <h4 class=\"font-display text-base sm:text-lg md:text-xl lg:text-lg xl:text-xl 2xl:text-body-large font-semibold text-white mb-3 sm:mb-4\">\n                                        Neem direct contact op                                    <\/h4>\n                                                                        \n                                                                        <ul class=\"space-y-1 sm:space-y-2 mb-4 sm:mb-6\">\n                                                                                <li class=\"flex items-center gap-2 sm:gap-3 text-white\">\n                                                                                        <i class=\"fa-regular fa-comment w-4 sm:w-5 text-center flex-shrink-0\"><\/i>\n                                                                                                                                    <a href=\"#appointment-popup\" \n                                               class=\"font-sans font-light text-sm sm:text-base lg:text-base xl:text-lg 2xl:text-body-large hover:text-white transition-colors break-all sm:break-normal\"\n                                               >\n                                                Plan een belafspraak                                            <\/a>\n                                                                                    <\/li>\n                                                                                <li class=\"flex items-center gap-2 sm:gap-3 text-white\">\n                                                                                        <i class=\"fa-regular fa-envelope w-4 sm:w-5 text-center flex-shrink-0\"><\/i>\n                                                                                                                                    <a href=\"mailto:info@developing.nl\" \n                                               class=\"font-sans font-light text-sm sm:text-base lg:text-base xl:text-lg 2xl:text-body-large hover:text-white transition-colors break-all sm:break-normal\"\n                                               >\n                                                info@developing.nl                                            <\/a>\n                                                                                    <\/li>\n                                                                                <li class=\"flex items-center gap-2 sm:gap-3 text-white\">\n                                                                                        <i class=\"fa-solid fa-mobile-screen w-4 sm:w-5 text-center flex-shrink-0\"><\/i>\n                                                                                                                                    <a href=\"tel:+31851302368\" \n                                               class=\"font-sans font-light text-sm sm:text-base lg:text-base xl:text-lg 2xl:text-body-large hover:text-white transition-colors break-all sm:break-normal\"\n                                               >\n                                                085 130 23 68                                            <\/a>\n                                                                                    <\/li>\n                                                                            <\/ul>\n                                                                        \n                                    <!-- Availability -->\n                                                                        <span class=\"js-availability-badge\"\n                                          data-base-classes=\"js-availability-badge inline-flex items-center gap-2 text-2xs sm:text-2xs md:text-base lg:text-base xl:text-lg font-sans font-light px-3 sm:px-4 py-1.5 sm:py-2 rounded-full\"\n                                          data-dot-wrapper=\"relative flex h-2.5 w-2.5 sm:h-3 sm:w-3\"\n                                          data-dot-size=\"h-2.5 w-2.5 sm:h-3 sm:w-3\"\n                                          style=\"display:none\">\n                                    <\/span>\n                                                                    <\/div>\n                                \n                                <!-- Person Info en Person Image -->\n                                <div class=\"w-full lg:flex-1 lg:max-w-[302px] flex flex-col\">\n                                                                        <h3 class=\"font-display text-lg sm:text-xl md:text-2xl lg:text-xl xl:text-2xl 2xl:text-3xl font-semibold text-white mb-1 sm:mb-2\">\n                                        Developing                                    <\/h3>\n                                                                        \n                                                                        <p class=\"font-sans font-light text-[14px] sm:text-base md:text-lg lg:text-base xl:text-lg 2xl:text-body-large text-white mb-3 sm:mb-4\">\n                                                                              <\/p>\n                                                                        \n                                                                        <div class=\"cta-speech-bubble relative bg-white\/5 backdrop-blur-xl p-3 sm:p-4 mb-4 lg:mb-4\">\n                                        <p class=\"font-sans font-light text-[14px] sm:text-sm md:text-base lg:text-base xl:text-lg 2xl:text-body-large text-white\/80 leading-relaxed italic\">\n                                            Heb je een vraag of wil je eens kennismaken? Bel ons of stuur een bericht!                                        <\/p>\n                                    <\/div>\n                                                                        \n                                    <!-- Person Image - alleen zichtbaar op mobiel\/tablet (tot lg) -->\n                                                                        <div class=\"lg:hidden w-full mt-4 sm:mt-6 md:mt-8 flex justify-center\">\n                                        <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/01\/logo-small-light-orange.png\" \n                                             alt=\"Developing\" \n                                             class=\"w-[180px] sm:w-[220px] md:w-[260px] h-auto object-contain object-top\">\n                                    <\/div>\n                                                                        \n                                    <!-- Person Image - alleen zichtbaar vanaf 2xl (1536px) -->\n                                                                        <div class=\"hidden 2xl:block 2xl:w-[370px] 2xl:h-[430px] 2xl:absolute 2xl:bottom-[-260px] 2xl:right-[-185px] overflow-hidden\">\n                                        <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/01\/logo-small-light-orange.png\" \n                                             alt=\"Developing\" \n                                             class=\"w-[200px] h-[200px] object-contain object-bottom\">\n                                    <\/div>\n                                                                        \n                                    <!-- ORIGINEEL - BACKUP\n                                                                        <div class=\"lg:hidden w-full mt-4 sm:mt-6 md:mt-8 flex justify-center\">\n                                        <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/01\/logo-small-light-orange.png\" \n                                             alt=\"Developing\" \n                                             class=\"w-[180px] sm:w-[220px] md:w-[260px] h-auto object-cover object-top\">\n                                    <\/div>\n                                                                        \n                                                                        <div class=\"hidden 3xl:block 3xl:w-[370px] 3xl:h-[462px] 3xl:absolute 3xl:bottom-[-64px] 3xl:right-[-140px] overflow-hidden\">\n                                        <img decoding=\"async\" src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/01\/logo-small-light-orange.png\" \n                                             alt=\"Developing\" \n                                             class=\"w-[370px] h-[462px] object-cover object-bottom\">\n                                    <\/div>\n                                                                        -->\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<style>\n.onze-specialisaties-gradient {\n    position: relative;\n    z-index: 10;\n}\n.onze-specialisaties-gradient .content-wrapper {\n    position: relative;\n    z-index: 20;\n}\n\n\/* Voor vierkante rectangles *\/\n.make-square {\n    height: auto; \/* Wordt door JS aangepast *\/\n}\n<\/style>\n\n<script>\n\/\/ Functie om de rectangles vierkant te maken, maar alleen op desktop\nfunction makeSquareBoxes() {\n    \/\/ Controleer eerst of we op desktop formaat zijn\n    const isDesktop = window.innerWidth >= 1024; \/\/ 1024px is de lg: breakpoint in Tailwind\n    \n    if (!isDesktop) {\n        \/\/ Op mobiel en tablet behouden we de originele hoogtes\n        return;\n    }\n    \n    \/\/ Alleen op desktop: maak rectangles vierkant\n    let squareHeight = 0;\n    \n    \/\/ Maak de specialisaties vierkant en onthoud de hoogte\n    for (let i = 0; i <= 4; i++) {\n        const specBox = document.getElementById('specialisatie-' + i);\n        if (specBox) {\n            \/\/ Maak vierkant op desktop\n            specBox.style.height = specBox.offsetWidth + 'px';\n            \n            \/\/ Sla de hoogte op, we gebruiken deze voor de hoofdafbeelding\n            if (specBox.offsetHeight > squareHeight) {\n                squareHeight = specBox.offsetHeight;\n            }\n        }\n    }\n    \n    \/\/ Pas nu de hoogte van de hoofdafbeelding aan om gelijk te zijn aan de specialisaties\n    const mainSpec = document.getElementById('main-specialisatie');\n    if (mainSpec && squareHeight > 0) {\n        mainSpec.style.height = squareHeight + 'px';\n    }\n}\n\n\/\/ Reset functie voor mobiel en tablet\nfunction resetBoxHeights() {\n    if (window.innerWidth < 1024) {\n        \/\/ Reset alle elementen naar hun CSS-gedefinieerde hoogten\n        const mainSpec = document.getElementById('main-specialisatie');\n        if (mainSpec) {\n            mainSpec.style.height = '';\n        }\n        \n        for (let i = 0; i <= 4; i++) {\n            const specBox = document.getElementById('specialisatie-' + i);\n            if (specBox) {\n                specBox.style.height = '';\n            }\n        }\n    } else {\n        \/\/ Als we naar desktop schakelen, voer de vierkante berekening uit\n        makeSquareBoxes();\n    }\n}\n\n\/\/ Voer uit als de pagina geladen is\nwindow.addEventListener('load', makeSquareBoxes);\n\n\/\/ Voer uit als het scherm van grootte verandert, met een korte vertraging\nlet resizeTimer;\nwindow.addEventListener('resize', () => {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(resetBoxHeights, 100);\n});\n\n\/\/ Voer elke 100ms uit tijdens laden om zeker te zijn dat het werkt\nlet checkCount = 0;\nconst interval = setInterval(() => {\n    makeSquareBoxes();\n    checkCount++;\n    if (checkCount > 20) { \/\/ Stop na 2 seconden (20 * 100ms)\n        clearInterval(interval);\n    }\n}, 100);\n<\/script>\n\n<section class=\"onze-specialisaties onze-specialisaties-gradient w-full relative lg:px-paddingtest -mb-[200px] pb-[200px]\" data-aos=\"fade-up\">\n        \n    <style>\n    #gradient-canvas-69f95a0922d46 {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: calc(calc(100% + 200px) + 450px);\n        z-index: 0;\n        pointer-events: none;\n    }\n    <\/style>\n    \n    <canvas id=\"gradient-canvas-69f95a0922d46\"><\/canvas>\n    \n    <script>\n    (function() {\n        const config = {\n            canvasId: 'gradient-canvas-69f95a0922d46',\n            fadeTop: true,\n            fadeBottom: true,\n            fadeTopIntensity: 0.35,\n            fadeBottomIntensity: 0.35,\n            startFromTop: 0.1,\n            uvScaleY: 1,\n            scrollEffect: true        };\n        \n        function initGradient() {\n            const canvas = document.getElementById(config.canvasId);\n            if (!canvas) return;\n\n            canvas.width = canvas.offsetWidth || window.innerWidth;\n            canvas.height = canvas.offsetHeight || window.innerHeight;\n            \n            const gl = canvas.getContext('webgl', { antialias: false, alpha: false }) || \n                       canvas.getContext('experimental-webgl', { antialias: false, alpha: false });\n            \n            if (!gl) {\n                canvas.style.background = 'linear-gradient(135deg, #090C14, #3E72FF, #FF5100)';\n                return;\n            }\n\n            const vsSource = `\n                attribute vec2 aPosition;\n                varying vec2 vUv;\n                \n                void main() {\n                    vUv = aPosition * 0.5 + 0.5;\n                    gl_Position = vec4(aPosition, 0.0, 1.0);\n                }\n            `;\n\n            const fsSource = `\n                precision highp float;\n                \n                uniform float uTime;\n                uniform float uScrollProgress;\n                uniform float uUvScale;\n                uniform float uUvDistortionIterations;\n                uniform float uUvDistortionIntensity;\n                uniform vec2 uUvOffset;\n                uniform bool uFadeTop;\n                uniform bool uFadeBottom;\n                uniform float uFadeTopIntensity;\n                uniform float uFadeBottomIntensity;\n                uniform float uStartFromTop;\n                uniform float uUvScaleY;\n                \n                varying vec2 vUv;\n                \n                vec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n                vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n                \n                float snoise(vec3 v) {\n                    const vec2 C = vec2(1.0\/6.0, 1.0\/3.0);\n                    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n                    \n                    vec3 i = floor(v + dot(v, C.yyy));\n                    vec3 x0 = v - i + dot(i, C.xxx);\n                    \n                    vec3 g = step(x0.yzx, x0.xyz);\n                    vec3 l = 1.0 - g;\n                    vec3 i1 = min(g.xyz, l.zxy);\n                    vec3 i2 = max(g.xyz, l.zxy);\n                    \n                    vec3 x1 = x0 - i1 + C.xxx;\n                    vec3 x2 = x0 - i2 + C.yyy;\n                    vec3 x3 = x0 - D.yyy;\n                    \n                    i = mod(i, 289.0);\n                    vec4 p = permute(permute(permute(\n                        i.z + vec4(0.0, i1.z, i2.z, 1.0))\n                        + i.y + vec4(0.0, i1.y, i2.y, 1.0))\n                        + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n                        \n                    float n_ = 1.0\/7.0;\n                    vec3 ns = n_ * D.wyz - D.xzx;\n                    \n                    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n                    \n                    vec4 x_ = floor(j * ns.z);\n                    vec4 y_ = floor(j - 7.0 * x_);\n                    \n                    vec4 x = x_ *ns.x + ns.yyyy;\n                    vec4 y = y_ *ns.x + ns.yyyy;\n                    vec4 h = 1.0 - abs(x) - abs(y);\n                    \n                    vec4 b0 = vec4(x.xy, y.xy);\n                    vec4 b1 = vec4(x.zw, y.zw);\n                    \n                    vec4 s0 = floor(b0)*2.0 + 1.0;\n                    vec4 s1 = floor(b1)*2.0 + 1.0;\n                    vec4 sh = -step(h, vec4(0.0));\n                    \n                    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\n                    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\n                    \n                    vec3 p0 = vec3(a0.xy, h.x);\n                    vec3 p1 = vec3(a0.zw, h.y);\n                    vec3 p2 = vec3(a1.xy, h.z);\n                    vec3 p3 = vec3(a1.zw, h.w);\n                    \n                    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n                    p0 *= norm.x;\n                    p1 *= norm.y;\n                    p2 *= norm.z;\n                    p3 *= norm.w;\n                    \n                    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n                    m = m * m;\n                    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n                }\n                \n                void main() {\n                    vec2 uv = vUv;\n                    \n                    \/\/ Verticale schaal toepassen op gradient content (niet op fades)\n                    uv.y = uv.y * uUvScaleY - (uUvScaleY - 1.0) * 0.5;\n                    \n                    uv.y -= uScrollProgress;\n                    uv *= uUvScale;\n                    uv += uUvOffset;\n                    \n                    for (float i = 0.0; i < 8.0; i++) {\n                        if (i >= uUvDistortionIterations) break;\n                        uv += snoise(vec3(uv - i * 0.25, uTime * 1.3 + i * 32.0)) * uUvDistortionIntensity;\n                    }\n                    \n                    float noiseBlue = snoise(vec3(uv * 1.5, uTime * 1.4)) * 0.5 + 0.5;\n                    float noiseOrange = snoise(vec3(uv * 1.5 + 50.0, uTime * 1.4 + 25.0)) * 0.5 + 0.5;\n                    \n                    vec3 dark = vec3(0.035, 0.047, 0.078);\n                    vec3 blue = vec3(0.243, 0.447, 1.0);\n                    vec3 orange = vec3(1.0, 0.318, 0.0);\n                    vec3 purple = vec3(0.35, 0.1, 0.45);\n                    \n                    float blueAmount = smoothstep(0.15, 0.85, noiseBlue) * 0.72;\n                    float orangeAmount = smoothstep(0.15, 0.85, noiseOrange) * 0.72;\n                    \n                    float bluePos = smoothstep(1.2, 0.0, length(uv - vec2(0.0, 1.0)));\n                    float orangePos = smoothstep(1.2, 0.0, length(uv - vec2(1.0, 0.0)));\n                    \n                    blueAmount = blueAmount * bluePos + bluePos * 0.08;\n                    orangeAmount = orangeAmount * orangePos + orangePos * 0.08;\n                    \n                    vec3 colour = dark;\n                    colour = mix(colour, blue, blueAmount);\n                    colour = mix(colour, orange, orangeAmount);\n                    \n                    float overlap = min(blueAmount, orangeAmount);\n                    colour = mix(colour, purple, overlap * 0.75);\n                    \n                    float glowBlue = smoothstep(1.6, 0.3, length(uv - vec2(0.0, 1.0))) * 0.08;\n                    float glowOrange = smoothstep(1.6, 0.3, length(uv - vec2(1.0, 0.0))) * 0.08;\n                    colour += blue * glowBlue + orange * glowOrange;\n                    \n                    float vignette = 1.0 - length(vUv - 0.5) * 0.4;\n                    colour *= vignette;\n                    \n                    float luminance = dot(colour, vec3(0.299, 0.587, 0.114));\n                    colour = mix(vec3(luminance), colour, 1.3);\n                    colour = pow(colour, vec3(0.95));\n                    \n                    \/\/ Start from top: maak alles boven uStartFromTop donker\n                    \/\/ vUv.y = 0.0 is onderkant, vUv.y = 1.0 is bovenkant\n                    \/\/ uStartFromTop = 0.25 betekent: gradient begint pas vanaf 75% van boven (25% vanaf onder)\n                    float startThreshold = 1.0 - uStartFromTop;\n                    if (vUv.y > startThreshold && uStartFromTop > 0.0) {\n                        \/\/ Fade van gradient naar donker boven de threshold\n                        float startFade = smoothstep(startThreshold, startThreshold + 0.1, vUv.y);\n                        colour = mix(colour, dark, startFade);\n                    }\n                    \n                    \/\/ Configureerbare fades\n                    if (uFadeTop) {\n                        \/\/ Fade aan bovenkant: van gradient naar donker naarmate y naar 1.0 gaat\n                        float topFade = smoothstep(1.0 - uFadeTopIntensity, 1.0, vUv.y);\n                        colour = mix(colour, dark, topFade);\n                    }\n                    \n                    if (uFadeBottom) {\n                        \/\/ Fade aan onderkant: van donker naar gradient naarmate y van 0.0 stijgt\n                        float bottomFade = smoothstep(0.0, uFadeBottomIntensity, vUv.y);\n                        colour = mix(dark, colour, bottomFade);\n                    }\n                    \n                    gl_FragColor = vec4(colour, 1.0);\n                }\n            `;\n\n            function createShader(gl, type, source) {\n                const shader = gl.createShader(type);\n                gl.shaderSource(shader, source);\n                gl.compileShader(shader);\n                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n                    console.error('Shader compile error:', gl.getShaderInfoLog(shader));\n                    gl.deleteShader(shader);\n                    return null;\n                }\n                return shader;\n            }\n\n            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);\n            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);\n\n            if (!vertexShader || !fragmentShader) return;\n\n            const program = gl.createProgram();\n            gl.attachShader(program, vertexShader);\n            gl.attachShader(program, fragmentShader);\n            gl.linkProgram(program);\n\n            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n                console.error('Program link error:', gl.getProgramInfoLog(program));\n                return;\n            }\n\n            gl.useProgram(program);\n\n            const positions = new Float32Array([\n                -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,\n            ]);\n\n            const positionBuffer = gl.createBuffer();\n            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n            gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);\n\n            const aPosition = gl.getAttribLocation(program, 'aPosition');\n            gl.enableVertexAttribArray(aPosition);\n            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);\n\n            const uTime = gl.getUniformLocation(program, 'uTime');\n            const uScrollProgress = gl.getUniformLocation(program, 'uScrollProgress');\n            const uUvScale = gl.getUniformLocation(program, 'uUvScale');\n            const uUvDistortionIterations = gl.getUniformLocation(program, 'uUvDistortionIterations');\n            const uUvDistortionIntensity = gl.getUniformLocation(program, 'uUvDistortionIntensity');\n            const uUvOffset = gl.getUniformLocation(program, 'uUvOffset');\n            const uFadeTop = gl.getUniformLocation(program, 'uFadeTop');\n            const uFadeBottom = gl.getUniformLocation(program, 'uFadeBottom');\n            const uFadeTopIntensity = gl.getUniformLocation(program, 'uFadeTopIntensity');\n            const uFadeBottomIntensity = gl.getUniformLocation(program, 'uFadeBottomIntensity');\n            const uStartFromTop = gl.getUniformLocation(program, 'uStartFromTop');\n            const uUvScaleY = gl.getUniformLocation(program, 'uUvScaleY');\n\n            gl.uniform1f(uUvScale, 1.0);\n            gl.uniform1f(uUvDistortionIterations, 3.0);\n            gl.uniform1f(uUvDistortionIntensity, 0.08);\n            gl.uniform2f(uUvOffset, 0.0, 0.0);\n            gl.uniform1i(uFadeTop, config.fadeTop ? 1 : 0);\n            gl.uniform1i(uFadeBottom, config.fadeBottom ? 1 : 0);\n            gl.uniform1f(uFadeTopIntensity, config.fadeTopIntensity);\n            gl.uniform1f(uFadeBottomIntensity, config.fadeBottomIntensity);\n            gl.uniform1f(uStartFromTop, config.startFromTop);\n            gl.uniform1f(uUvScaleY, config.uvScaleY);\n\n            let startTime = performance.now();\n            let scrollProgress = 0;\n\n            function updateScroll() {\n                if (!config.scrollEffect) return;\n                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n                const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n                scrollProgress = docHeight > 0 ? scrollTop \/ docHeight : 0;\n            }\n            if (config.scrollEffect) {\n                window.addEventListener('scroll', updateScroll, { passive: true });\n            }\n\n            function resize() {\n                canvas.width = canvas.offsetWidth || window.innerWidth;\n                canvas.height = canvas.offsetHeight || window.innerHeight;\n                gl.viewport(0, 0, canvas.width, canvas.height);\n            }\n            window.addEventListener('resize', resize);\n\n            function render() {\n                const time = (performance.now() - startTime) \/ 1000;\n                gl.uniform1f(uTime, time * 0.12);\n                gl.uniform1f(uScrollProgress, scrollProgress * 0.5);\n                gl.drawArrays(gl.TRIANGLES, 0, 6);\n                requestAnimationFrame(render);\n            }\n\n            resize();\n            render();\n        }\n\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', initGradient);\n        } else {\n            initGradient();\n        }\n    })();\n    <\/script>\n        <!-- Extra fade overlay om harde lijn te maskeren -->\n    <div class=\"absolute bottom-[-1000px] left-0 right-0 h-[1050px] z-[1] pointer-events-none\" style=\"background: linear-gradient(to bottom, transparent 0%, #090C14 100%);\"><\/div>\n    \n    <div class=\"content-wrapper w-full mb-12 md:mb-20 lg:mb-spacingblocks\">\n        <div class=\"max-w-block px-6 md:px-8 lg:px-0 mx-auto\">\n        \n        <!-- Sectie Titel -->\n        <h2 class=\"font-display text-xl sm:text-2xl md:text-3xl lg:text-heading-medium font-light text-white mb-4 sm:mb-6 md:mb-8 lg:mb-18 text-left lg:max-w-[1408px] lg:mx-auto [&#038;_span]:text-orange [&#038;_span]:font-bold\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n            Waar we <span>goed<\/span> in zijn        <\/h2>\n        \n                \n        <!-- Grid Container -->\n        <div class=\"flex flex-col gap-6 md:gap-8 lg:gap-6 xl:gap-8 2xl:gap-12\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n            \n            <!-- Bovenste rij: Hoofd Specialisatie (925px) + 1 specialisatie -->\n            <div class=\"flex flex-col lg:flex-row gap-6 md:gap-8 lg:gap-6 xl:gap-8 2xl:gap-12 w-full\">\n                \n                <!-- Hoofd Specialisatie met afbeelding (925px) -->\n                                <div id=\"main-specialisatie\" class=\"relative w-full lg:w-[calc(66.666%-12px)] xl:w-[calc(66.666%-16px)] 2xl:w-[calc(66.666%-24px)] h-56 md:h-80 overflow-hidden shrink-0\">\n                                            <img decoding=\"async\" \n                            src=\"https:\/\/developing.nl\/wp-content\/uploads\/2026\/03\/IMG_6827-scaled.jpg\" \n                            alt=\"\"\n                            class=\"absolute inset-0 w-full h-full object-cover\"\n                        \/>\n                        <!-- Gradient overlay -->\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 to-transparent\"><\/div>\n                                        \n                    <!-- Content overlay -->\n                    <div class=\"absolute bottom-0 left-0 right-0 p-4 md:p-6 lg:p-6 xl:p-8 2xl:p-12 lg:max-w-[24rem] xl:max-w-[28rem] 2xl:max-w-[32rem]\">\n                                                    <div class=\"text-orange mb-3 md:mb-4 w-8 h-8 md:w-10 md:h-10\">\n                                <svg width=\"63\" height=\"50\" viewBox=\"0 0 63 50\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M9.375 3.125V28.125H34.375V31.25H9.375H6.25H3.125V31.543L5.95703 34.375H34.375V37.5H4.6875L0 32.8125V31.25V28.125H3.125H6.25V3.125V0H9.375H46.875H50V3.125V9.375H46.875V3.125H9.375ZM37.5 50V46.875V15.625V12.5H40.625H59.375H62.5V15.625V46.875V50H59.375H40.625H37.5ZM59.375 46.875V15.625H40.625V46.875H59.375Z\" fill=\"white\"\/>\r\n<\/svg>                            <\/div>\n                                                                            <h3 class=\"font-sans text-base sm:text-lg md:text-xl lg:text-xl xl:text-2xl 2xl:text-3xl font-semibold text-white mb-3.5 mt-11\">\n                                High-end websites                            <\/h3>\n                                                                            <p class=\"font-sans text-white text-xs sm:text-xs md:text-sm lg:text-sm xl:text-base 2xl:text-lg font-bold leading-relaxed max-w-xl\">\n                                Een sterke website is de basis van je online zichtbaarheid. Wij ontwikkelen maatwerk sites.                            <\/p>\n                                            <\/div>\n                <\/div>\n                                \n                <!-- Eerste specialisatie naast hoofd (vult resterende ruimte) -->\n                                <div id=\"specialisatie-0\" class=\"specialisatie-card bg-black\/50 p-5 md:p-8 lg:p-6 xl:p-8 2xl:p-10 w-full lg:flex-1 h-56 md:h-80 lg:make-square flex flex-col justify-end lg:max-w-[24rem] xl:max-w-[28rem] 2xl:max-w-[32rem]\">\n                                            <div class=\"text-orange ml-1 mb-3 md:ml-2 w-6 h-6 md:w-14 md:h-8\">\n                            <svg width=\"44\" height=\"50\" viewBox=\"0 0 44 50\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M15.625 9.375V12.5H28.125V9.375C28.125 5.95703 25.293 3.125 21.875 3.125C18.3594 3.125 15.625 5.95703 15.625 9.375ZM12.5 15.625H3.125V46.875H40.625V15.625H31.25V23.4375V25H28.125V23.4375V15.625H15.625V23.4375V25H12.5V23.4375V15.625ZM12.5 12.5V9.375C12.5 4.19922 16.6992 0 21.875 0C27.0508 0 31.25 4.19922 31.25 9.375V12.5H40.625H43.75V15.625V46.875V50H40.625H3.125H0V46.875V15.625V12.5H3.125H12.5Z\" fill=\"white\"\/>\r\n<\/svg>\r\n                        <\/div>\n                                                                <h3 class=\"font-sans text-sm sm:text-base md:text-xl lg:text-xl xl:text-2xl 2xl:text-3xl font-semibold text-white leading-tight mb-3.5 mt-11\">\n                            E-commerce                        <\/h3>\n                                                                <p class=\"font-sans text-xs md:text-sm lg:text-sm xl:text-base 2xl:text-lg font-bold text-white leading-relaxed\">\n                            Wij bouwen webshops die conversie en gebruiksgemak centraal zetten.                        <\/p>\n                                    <\/div>\n                            <\/div>\n            \n            <!-- Onderste rij: alle 3 rectangles naast elkaar met vaste breedtes -->\n            <!-- 3 gelijke delen -->\n            <div class=\"flex flex-col md:flex-row md:flex-wrap lg:flex-nowrap gap-6 md:gap-8 lg:gap-6 xl:gap-8 2xl:gap-12 w-full\">\n                                <div id=\"specialisatie-1\" class=\"specialisatie-card bg-black\/50 p-5 md:p-8 lg:p-6 xl:p-8 2xl:p-12 w-full lg:flex-1 h-56 md:h-80 lg:make-square flex flex-col justify-end\">\n                                            <div class=\"text-orange mb-3 ml-1 w-6 h-6 md:w-14 md:h-10\">\n                            <svg width=\"57\" height=\"50\" viewBox=\"0 0 57 50\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M28.125 21.582L48.5352 12.5L28.125 3.41797L7.61719 12.5L28.125 21.582ZM52.3438 10.8398L56.25 12.5L52.3438 14.2578L28.125 25L3.80859 14.2578L0 12.5L3.80859 10.8398L28.125 0L52.3438 10.8398ZM14.0625 22.168L7.61719 25L28.125 34.082L48.5352 25L42.1875 22.168L45.9961 20.5078L52.3438 23.3398L56.25 25L52.3438 26.7578L28.125 37.5L3.80859 26.7578L0 25L3.80859 23.3398L10.1562 20.5078L14.0625 22.168ZM10.1562 33.0078L14.0625 34.668L7.61719 37.5L28.125 46.582L48.5352 37.5L42.1875 34.668L45.9961 33.0078L52.3438 35.8398L56.25 37.5L52.3438 39.2578L28.125 50L3.80859 39.2578L0 37.5L3.80859 35.8398L10.1562 33.0078Z\" fill=\"white\"\/>\r\n<\/svg>\r\n                        <\/div>\n                                                                <h3 class=\"font-sans text-base md:text-xl lg:text-xl xl:text-2xl 2xl:text-3xl font-semibold text-white mb-2 md:mb-3 leading-tight mb-3.5 mt-11\">\n                            Web-applicaties                        <\/h3>\n                                                                <p class=\"font-sans text-xs md:text-sm lg:text-sm xl:text-base 2xl:text-lg font-bold text-white leading-relaxed\">\n                            Wij ontwikkelen veilige, schaalbare apps die met je organisatie meebewegen.                         <\/p>\n                                    <\/div>\n                                \n                                <div id=\"specialisatie-2\" class=\"specialisatie-card bg-black\/50 p-5 md:p-8 lg:p-6 xl:p-8 2xl:p-12 w-full lg:flex-1 h-56 md:h-80 lg:make-square flex flex-col justify-end\">\n                    <div class=\"max-w-[28rem] lg:mr-[-1rem]\">\n                                                    <div class=\"text-orange mb-3 ml-1 w-6 h-6 md:w-14 md:h-10\">\n                                <svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M40.625 3.125H3.125V40.625H40.625V3.125ZM3.125 0H40.625H43.75V3.125V40.625V43.75H40.625H3.125H0V40.625V3.125V0H3.125ZM7.12891 12.5L9.375 10.3516L10.4492 11.4258L19.8242 20.8008L20.8984 21.875L19.8242 23.0469L10.4492 32.4219L9.375 33.4961L7.12891 31.25L8.20312 30.1758L16.5039 21.875L8.20312 13.6719L7.12891 12.5ZM20.3125 31.25H35.9375H37.5V34.375H35.9375H20.3125H18.75V31.25H20.3125Z\" fill=\"white\"\/>\r\n<\/svg>\r\n                            <\/div>\n                                                                            <h3 class=\"font-sans text-base md:text-xl lg:text-xl xl:text-2xl 2xl:text-3xl font-semibold text-white mb-2 md:mb-3 leading-tight mb-3.5 mt-11\">\n                                Doorontwikkeling                            <\/h3>\n                                                                            <p class=\"font-sans text-xs md:text-sm lg:text-sm xl:text-base 2xl:text-lg font-bold text-white leading-relaxed\">\n                                Blijf groeien met vaste uren per maand. Wij zorgen dat jouw site steeds beter presteert.                            <\/p>\n                                            <\/div>\n                <\/div>\n                                \n                                <div id=\"specialisatie-3\" class=\"specialisatie-card bg-black\/50 p-5 md:p-8 lg:p-6 xl:p-8 2xl:p-12 w-full lg:flex-1 h-56 md:h-80 lg:make-square flex flex-col justify-end\">\n                                            <div class=\"text-orange mb-3 ml-1 w-6 h-6 md:w-14 md:h-10\">\n                            <svg width=\"50\" height=\"44\" viewBox=\"0 0 50 44\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M3.125 3.125V15.625H46.875V3.125H3.125ZM0 0H3.125H46.875H50V3.125V15.625V18.75H46.875H3.125H0V15.625V3.125V0ZM3.125 28.125V40.625H46.875V28.125H3.125ZM0 25H3.125H46.875H50V28.125V40.625V43.75H46.875H3.125H0V40.625V28.125V25ZM29.6875 34.375C29.6875 33.1055 30.6641 32.0312 32.0312 32.0312C33.3008 32.0312 34.375 33.1055 34.375 34.375C34.375 35.7422 33.3008 36.7188 32.0312 36.7188C30.6641 36.7188 29.6875 35.7422 29.6875 34.375ZM32.0312 7.03125C33.3008 7.03125 34.375 8.10547 34.375 9.375C34.375 10.7422 33.3008 11.7188 32.0312 11.7188C30.6641 11.7188 29.6875 10.7422 29.6875 9.375C29.6875 8.10547 30.6641 7.03125 32.0312 7.03125ZM37.5 34.375C37.5 33.1055 38.4766 32.0312 39.8438 32.0312C41.1133 32.0312 42.1875 33.1055 42.1875 34.375C42.1875 35.7422 41.1133 36.7188 39.8438 36.7188C38.4766 36.7188 37.5 35.7422 37.5 34.375ZM39.8438 7.03125C41.1133 7.03125 42.1875 8.10547 42.1875 9.375C42.1875 10.7422 41.1133 11.7188 39.8438 11.7188C38.4766 11.7188 37.5 10.7422 37.5 9.375C37.5 8.10547 38.4766 7.03125 39.8438 7.03125Z\" fill=\"white\"\/>\r\n<\/svg>\r\n                        <\/div>\n                                                                <h3 class=\"font-sans text-base md:text-xl lg:text-xl xl:text-2xl 2xl:text-3xl font-semibold text-white mb-2 md:mb-3 leading-tight mb-3.5 mt-11\">\n                            Hosting en onderhoud                        <\/h3>\n                                                                <p class=\"font-sans text-xs md:text-sm lg:text-sm xl:text-base 2xl:text-lg font-bold text-white leading-relaxed\">\n                            Met onze SLA en hosting ben je verzekerd \u2028van stabiliteit en veiligheid.                         <\/p>\n                                    <\/div>\n                            <\/div>\n            \n        <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section class=\"sla-blokken w-full relative mb-12 md:mb-20 lg:mb-spacingblocks lg:px-paddingtest\">\n    <!-- Zwarte achtergrond laag, achter de gradient van vorige blok -->\n    <div class=\"absolute inset-0 bg-black z-0\"><\/div>\n    <div class=\"max-w-block px-6 md:px-8 lg:px-0 mx-auto relative z-20 \">\n        \n        <!-- Header: Titel links, beschrijving rechts - uitgelijnd met blokken -->\n        <div class=\"flex flex-col lg:flex-row lg:items-start gap-8 lg:gap-6 mb-8 lg:mb-[90px] justify-center relative z-20\" data-aos=\"fade-up\">\n            <!-- H2 Titel - Links, zelfde breedte als oranje blok -->\n            <div class=\"w-full lg:flex-1\">\n                <h2 class=\"font-display font-light text-lg sm:text-xl md:text-2xl lg:text-heading-medium text-white lg:max-w-xl [&#038;_span]:text-orange [&#038;_span]:font-bold\">\n                    Hoe wij <span>samenwerken<\/span> aan een voortdurende groei?                <\/h2>\n            <\/div>\n            \n            <!-- Beschrijving - Rechts, zelfde breedte als blauw blok -->\n            <div class=\"w-full lg:flex-1\">\n                <p class=\"font-sans font-light text-xs sm:text-sm md:text-base lg:text-body-large lg:leading-[1.6] text-white lg:max-w-[684px]\">\n                    We maken een duidelijk onderscheid tussen onze SLA en de maandelijkse doorontwikkeling. De SLA staat voor stabiliteit, veiligheid en snelle ondersteuning. De doorontwikkeling richt zich op voortdurende optimalisatie en groei van de website.                <\/p>\n            <\/div>\n        <\/div>\n        \n        <!-- Blokken Container -->\n        <div class=\"flex flex-col lg:flex-row gap-6 lg:gap-10 justify-center\">\n            \n            <!-- SLA Blok (Oranje) -->\n            <div class=\"relative w-full lg:flex-1\" data-aos=\"fade-right\" data-aos-delay=\"100\">\n                <!-- Klein wit vierkantje linksboven -->\n                <div class=\"absolute top-0 left-4 md:left-6 lg:left-10 w-[42px] h-[42px] bg-white z-10\"><\/div>\n                \n                <!-- Groot wit vierkantje met icoon -->\n                <div class=\"absolute top-[42px] left-4 md:left-6 lg:left-10 translate-x-[42px] w-[83px] h-[83px] bg-white flex items-center justify-center z-20 text-orange\">\n                    <svg class=\"w-7 h-7 md:w-8 md:h-8 lg:w-10 lg:h-10\" width=\"38\" height=\"40\" viewBox=\"0 0 38 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M18.9844 4.0625L3.98438 9.84375C3.90625 13.2812 4.53125 18.2031 6.5625 23.0469C8.82812 28.125 12.5781 33.0469 18.9844 35.9375C25.3125 33.0469 29.0625 28.125 31.3281 23.0469C33.4375 18.2031 33.9844 13.2812 33.9844 9.84375L18.9844 4.0625ZM37.5781 7.26562L37.6562 8.82812C37.8906 12.7344 37.2656 18.75 34.7656 24.5312C32.1875 30.4688 27.6562 36.25 19.9219 39.6094L18.9844 40L17.9688 39.6094C10.2344 36.25 5.70312 30.4688 3.125 24.5312C0.625 18.75 0 12.7344 0.234375 8.82812L0.3125 7.26562L1.79688 6.64062L18.0469 0.390625L18.9844 0L19.8438 0.390625L36.0938 6.64062L37.5781 7.26562Z\" fill=\"currentColor\"\/>\n                    <\/svg>\n                <\/div>\n                \n                <!-- Prijs container rechtsboven -->\n                <div class=\"absolute top-[57px] right-[20px] sm:right-[40px] md:right-[60px] lg:right-[80px] flex flex-col items-end z-30\">\n                    <span class=\"font-display font-semibold text-sm sm:text-base md:text-lg lg:text-body-large lg:leading-relaxed text-white whitespace-nowrap\">\n                        v.a. 500,-                    <\/span>\n                    <span class=\"font-sans font-light text-xs sm:text-xs md:text-sm lg:text-[15px] lg:leading-snug text-white\/50 text-right max-w-[120px] sm:max-w-none\">\n                        SLA prijs per maand.                    <\/span>\n                <\/div>\n                \n                <!-- Oranje achtergrond blok -->\n                <div class=\"bg-orange pt-[125px] pb-6 md:pb-8 lg:pb-10 px-4 md:px-6 lg:pl-10 xl:pl-20 lg:pr-6 xl:pr-10 mt-4 md:mt-5 md:min-h-[300px] lg:min-h-[720px]\">\n                    <!-- Titel -->\n                    <h3 class=\"font-display font-semibold text-lg sm:text-xl md:text-2xl lg:text-3xl lg:leading-tight text-white mb-4\">\n                        Service level agreement (SLA)                    <\/h3>\n                    \n                    <!-- Beschrijving -->\n                                            <p class=\"font-sans font-light text-xs sm:text-sm md:text-base lg:text-lg lg:leading-relaxed text-white mb-8 max-w-[483px]\">\n                            Met onze SLA biedt Developing heldere servicegaranties. Omdat een website vaak een cruciale rol speelt in de bedrijfsvoering, zorgen wij voor snelle ondersteuning en continue monitoring.                        <\/p>\n                                        \n                    <!-- Features Grid -->\n                    <div class=\"flex flex-col md:flex-row gap-6 lg:gap-6 mb-10\">\n                        <!-- Linker kolom -->\n                                                    <div class=\"flex flex-col gap-5\">\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Same-day solution bij kritieke problemen                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            24\/7 spoedservice                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Continue monitoring van beschikbaarheid website                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Wekelijkse updates en onderhoud                                        <\/span>\n                                    <\/div>\n                                                            <\/div>\n                                                \n                        <!-- Rechter kolom -->\n                                                    <div class=\"flex flex-col gap-5\">\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Directe oplossing veiligheidsproblemen tijdens kantoortijden                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Ondersteuning bij vragen en minder kritieke issues binnen kantoortijden                                         <\/span>\n                                    <\/div>\n                                                            <\/div>\n                                            <\/div>\n                    \n                    <!-- Button -->\n                                    <\/div>\n            <\/div>\n            \n            <!-- Doorontwikkeling Blok (Blauw) -->\n            <div class=\"relative w-full lg:flex-1 lg:-mt-16\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n                <!-- Klein wit vierkantje linksboven -->\n                <div class=\"absolute top-0 left-4 md:left-6 lg:left-10 w-[42px] h-[42px] bg-white z-10\"><\/div>\n                \n                <!-- Groot wit vierkantje met icoon -->\n                <div class=\"absolute top-[42px] left-4 md:left-6 lg:left-10 translate-x-[42px] w-[83px] h-[83px] bg-white flex items-center justify-center z-20 text-blue\">\n                    <svg class=\"w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-10\" width=\"50\" height=\"40\" viewBox=\"0 0 50 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M29.0625 0L32.6562 1.17188L32.0312 2.96875L20.7812 37.9688L20.2344 39.7656L16.6406 38.5938L17.2656 36.7969L28.5156 1.79688L29.0625 0ZM33.9062 10.625L36.4062 7.89062L37.8125 9.14062L47.8125 18.5156L49.2969 19.8438L47.8125 21.25L37.8125 30.625L36.4062 31.875L33.9062 29.1406L35.2344 27.8906L43.75 19.8438L35.2344 11.875L33.9062 10.625ZM12.8906 7.89062L15.3906 10.625L14.0625 11.875L5.54688 19.8438L14.0625 27.8906L15.3906 29.1406L12.8906 31.875L11.4844 30.625L1.48438 21.25L0 19.8438L1.48438 18.5156L11.4844 9.14062L12.8906 7.89062Z\" fill=\"currentColor\"\/>\n                    <\/svg>\n                <\/div>\n                \n                <!-- Prijs container rechtsboven -->\n                <div class=\"absolute top-[57px] right-[20px] sm:right-[40px] md:right-[60px] lg:right-[80px] flex flex-col items-end z-30\">\n                    <span class=\"font-display font-semibold text-sm sm:text-base md:text-lg lg:text-body-large lg:leading-relaxed text-white whitespace-nowrap\">\n                        v.a. 4.000,-                    <\/span>\n                    <span class=\"font-sans font-light text-xs sm:text-xs md:text-sm lg:text-[15px] lg:leading-snug text-white\/50 text-right max-w-[120px] sm:max-w-none\">\n                        Doorontwikkeling per maand.                    <\/span>\n                <\/div>\n                \n                <!-- Blauwe achtergrond blok -->\n                <div class=\"bg-blue pt-[125px] pb-6 md:pb-8 lg:pb-10 px-4 md:px-6 lg:pl-20 lg:pr-10 mt-4 md:mt-5 md:min-h-[300px] lg:min-h-[720px]\">\n                    <!-- Titel -->\n                    <h3 class=\"font-display font-semibold text-xl lg:text-3xl lg:leading-tight text-white mb-4\">\n                        Maandelijkse doorontwikkeling                    <\/h3>\n                    \n                    <!-- Beschrijving -->\n                                            <p class=\"font-sans font-light text-sm lg:text-lg lg:leading-relaxed text-white mb-8 max-w-[483px]\">\n                            Met maandelijkse doorontwikkeling zorgen wij voor snelle uitvoering, gereserveerde capaciteit en actief meedenken. Als vaste development partner werken wij structureel aan optimalisatie, innovatie en groei van de website.                        <\/p>\n                                        \n                    <!-- Features Grid -->\n                    <div class=\"flex flex-col md:flex-row gap-6 lg:gap-8 mb-10\">\n                        <!-- Linker kolom -->\n                                                    <div class=\"flex flex-col gap-5\">\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Snelle en gestructureerde uitvoering van taken                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Gereserveerde capaciteit per maand                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Maandelijkse rapportage en facturatie met trans-parante urenregistratie                                        <\/span>\n                                    <\/div>\n                                                            <\/div>\n                                                \n                        <!-- Rechter kolom -->\n                                                    <div class=\"flex flex-col gap-5\">\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Scrum-standups voor prioritering en nieuwe taken                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Vast aanspreekpunt en gespecialiseerd team                                        <\/span>\n                                    <\/div>\n                                                                    <div class=\"flex items-start gap-3\">\n                                        <i class=\"fa-solid fa-circle-check text-white text-lg md:mt-1 lg:mt-2 shrink-0\"><\/i>\n                                        <span class=\"font-sans font-bold text-sm lg:text-lg lg:leading-relaxed text-white md:max-w-[220px]\">\n                                            Actief meedenken over nieuwe mogelijkheden                                        <\/span>\n                                    <\/div>\n                                                            <\/div>\n                                            <\/div>\n                    \n                    <!-- Button -->\n                                    <\/div>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1139","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Online oplossingen voor groeibedrijven \ud83d\ude80<\/title>\n<meta name=\"description\" content=\"Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developing.nl\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Online oplossingen voor groeibedrijven \ud83d\ude80\" \/>\n<meta property=\"og:description\" content=\"Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developing.nl\/\" \/>\n<meta property=\"og:site_name\" content=\"Developing\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T11:03:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/developing.nl\\\/\",\"url\":\"https:\\\/\\\/developing.nl\\\/\",\"name\":\"Home - Online oplossingen voor groeibedrijven \ud83d\ude80\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/developing.nl\\\/#website\"},\"datePublished\":\"2026-01-28T08:44:27+00:00\",\"dateModified\":\"2026-03-19T11:03:12+00:00\",\"description\":\"Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/developing.nl\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/developing.nl\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/developing.nl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/developing.nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/developing.nl\\\/#website\",\"url\":\"https:\\\/\\\/developing.nl\\\/\",\"name\":\"Developing-Nieuw\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/developing.nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Online oplossingen voor groeibedrijven \ud83d\ude80","description":"Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developing.nl\/","og_locale":"nl_NL","og_type":"article","og_title":"Home - Online oplossingen voor groeibedrijven \ud83d\ude80","og_description":"Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.","og_url":"https:\/\/developing.nl\/","og_site_name":"Developing","article_modified_time":"2026-03-19T11:03:12+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/developing.nl\/","url":"https:\/\/developing.nl\/","name":"Home - Online oplossingen voor groeibedrijven \ud83d\ude80","isPartOf":{"@id":"https:\/\/developing.nl\/#website"},"datePublished":"2026-01-28T08:44:27+00:00","dateModified":"2026-03-19T11:03:12+00:00","description":"Developing is een veelzijdig webdevelopment bureau gespecialiseerd in het cre\u00ebren van websites, webshops en webapplicaties.","breadcrumb":{"@id":"https:\/\/developing.nl\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developing.nl\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/developing.nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/developing.nl\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/developing.nl\/#website","url":"https:\/\/developing.nl\/","name":"Developing-Nieuw","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/developing.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/pages\/1139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/comments?post=1139"}],"version-history":[{"count":33,"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/pages\/1139\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/pages\/1139\/revisions\/2235"}],"wp:attachment":[{"href":"https:\/\/developing.nl\/wp-json\/wp\/v2\/media?parent=1139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}