EVO WEBDESIGN<\/title> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: auto; } body { font-family: Arial, Helvetica, sans-serif; background: #ffffff; color: #111111; overflow-x: hidden; overflow-y: auto; } a { color: inherit; text-decoration: none; } .page { width: 100%; min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; color: #ffffff; background-image: url(\"https:\/\/mosocars.nl\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-22-jun-2026-23_01_32.png\"); background-size: cover; background-position: 100% center; background-repeat: no-repeat; } .page::before { content: \"\"; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 24%, rgba(0,0,0,.86) 45%, rgba(0,0,0,.34) 64%, rgba(0,0,0,.07) 82%, rgba(0,0,0,0) 100% ); } header { height: 86px; padding: 0 3.1%; position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; background: rgba(3, 3, 5, 0.86); border-bottom: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .logo { display: flex; align-items: center; gap: 16px; } .logo-main { font-size: 34px; font-weight: 900; letter-spacing: -2.5px; color: #ffffff; text-shadow: 0 0 10px rgba(139,92,246,.95), 0 0 26px rgba(139,92,246,.65); } .logo-sub { font-size: 13px; font-weight: 900; letter-spacing: 7px; color: rgba(255,255,255,.82); } nav { display: flex; align-items: center; gap: 38px; margin-left: auto; margin-right: 38px; } nav a { font-size: 16px; font-weight: 800; color: rgba(255,255,255,.82); } .header-btn { padding: 17px 28px; border-radius: 999px; border: 1px solid rgba(168,85,247,.55); background: rgba(255,255,255,.04); color: #ffffff; font-size: 16px; font-weight: 900; } .hero { min-height: calc(100vh - 86px); display: flex; flex-direction: column; justify-content: space-between; position: relative; } .hero-top { padding: clamp(58px, 7vh, 88px) 3.1% 36px; flex: 1; display: flex; align-items: center; } .hero-content { width: min(760px, 45vw); position: relative; z-index: 3; } .hero-title { max-width: 780px; font-size: clamp(52px, 5.45vw, 98px); line-height: .92; letter-spacing: -5.5px; font-weight: 900; margin-bottom: 26px; color: #ffffff; text-shadow: 0 12px 42px rgba(0,0,0,.88); } .hero-title span, .gradient-text { background: linear-gradient(90deg, #9b2cff 0%, #8b5cf6 32%, #6d5dfc 62%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-text { max-width: 700px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.58; font-weight: 700; color: #f2f2f2; margin-bottom: 34px; text-shadow: 0 10px 28px rgba(0,0,0,.9); } .hero-actions { display: flex; gap: 18px; flex-wrap: wrap; } .primary-btn, .secondary-btn { min-width: 250px; padding: 20px 32px; border-radius: 999px; font-size: 16px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: .28s ease; } .primary-btn { background: #ffffff; color: #070707; box-shadow: 0 0 26px rgba(255,255,255,.22), 0 14px 36px rgba(0,0,0,.45); } .secondary-btn { color: #ffffff; background: rgba(255,255,255,.045); border: 1px solid rgba(168,85,247,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hero-bottom { width: 100%; padding: 28px 3.1% 34px; background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.92) 100% ); } .hero-stats { max-width: 760px; display: flex; gap: 34px; } .stat { min-width: 160px; padding-right: 34px; border-right: 1px solid rgba(255,255,255,.18); } .stat:last-child { border-right: none; } .stat h3 { font-size: clamp(34px, 3vw, 48px); line-height: 1; font-weight: 900; margin-bottom: 10px; color: #ffffff; } .stat span { display: block; font-size: 14px; line-height: 1.45; font-weight: 700; color: rgba(255,255,255,.72); } .aanpak { padding: 96px 3.1% 110px; background: #ffffff; color: #111111; } .section-head { max-width: 980px; margin-bottom: 58px; } .section-head h2 { font-size: clamp(38px, 4.45vw, 72px); line-height: 1; letter-spacing: -3.5px; margin-bottom: 24px; color: #111111; } .section-head p { max-width: 680px; font-size: 19px; font-weight: 500; line-height: 1.7; color: #626977; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .step-card { min-height: 305px; padding: 34px; border-radius: 32px; background: #ffffff; border: 1px solid #eeeeee; box-shadow: 0 20px 60px rgba(0,0,0,.06); position: relative; overflow: hidden; transition: .3s ease; } .step-number { font-size: 15px; font-weight: 900; letter-spacing: 2px; color: #8b5cf6; margin-bottom: 56px; text-transform: uppercase; } .step-card h3 { font-size: 30px; line-height: 1.15; font-weight: 900; margin-bottom: 20px; color: #111111; } .step-card p { font-size: 17px; line-height: 1.8; font-weight: 500; color: #5d6472; } .result-box { margin-top: 30px; padding: 52px; border-radius: 36px; background: linear-gradient(135deg, #8b5cf6 0%, #6d5dfc 52%, #4f8cff 100%); color: #ffffff; display: flex; justify-content: space-between; gap: 30px; align-items: center; box-shadow: 0 30px 90px rgba(139,92,246,.24); } .result-box h3 { font-size: clamp(32px, 3.1vw, 56px); letter-spacing: -2px; line-height: 1; font-weight: 900; color: #ffffff; } .result-box p { max-width: 540px; font-size: 19px; font-weight: 500; line-height: 1.65; color: rgba(255,255,255,.84); } .result-box .gradient-text { background: linear-gradient(90deg, #ffffff, #dbeafe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 1000px) { nav, .header-btn { display: none; } header { height: 74px; padding: 0 5%; } .page { min-height: auto; background-position: 72% center; } .page::before { background: linear-gradient( 90deg, rgba(0,0,0,.97), rgba(0,0,0,.88) 52%, rgba(0,0,0,.42) ); } .hero { min-height: auto; } .hero-top { padding: 70px 5% 38px; align-items: flex-start; } .hero-content { width: 100%; } .hero-title { max-width: 720px; font-size: clamp(44px, 10vw, 68px); letter-spacing: -3px; } .hero-actions { flex-direction: column; } .primary-btn, .secondary-btn { width: 100%; min-width: auto; } .hero-bottom { padding: 24px 5% 34px; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 100%; } .stat { min-width: 0; padding-left: 10px; padding-right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,.18); } .stat h3 { font-size: 25px; } .stat span { font-size: 12px; } .steps { grid-template-columns: 1fr; } .result-box { flex-direction: column; align-items: flex-start; } } @media (max-width: 430px) { .logo-main { font-size: 28px; } .logo-sub { font-size: 11px; letter-spacing: 5px; } .hero-top { padding: 44px 5% 32px; } .hero-title { font-size: 42px; letter-spacing: -2.4px; margin-bottom: 22px; } .hero-text { font-size: 15px; line-height: 1.55; } .aanpak { padding: 72px 5% 88px; } .section-head h2 { font-size: 42px; letter-spacing: -2px; } .step-card { border-radius: 24px; padding: 28px; } .step-card h3 { font-size: 26px; } .result-box { border-radius: 26px; padding: 32px; } } <\/style>\n<p><\/head><body> <main class=\"page\"> <\/p>\n<header> <a href=\"#\" class=\"logo\"> <span class=\"logo-main\">EVO<\/span> <span class=\"logo-sub\">WEBDESIGN<\/span> <\/a> <\/p>\n<nav> <a href=\"#aanpak\">Aanpak<\/a> <a href=\"#\">Cases<\/a> <a href=\"#\">Systemen<\/a> <a href=\"#\">Over ons<\/a> <a href=\"#\">Contact<\/a> <\/nav>\n<p> <a href=\"#\" class=\"header-btn\">Strategiegesprek \u2197<\/a> <\/header>\n<p> <\/p>\n<section class=\"hero\"> <\/p>\n<div class=\"hero-top\"> <\/p>\n<div class=\"hero-content\"> <\/p>\n<h1 class=\"hero-title\">Meer dan een website. Een <span>omzetmachine.<\/span><\/h1>\n<p> <pee class=\"hero-text\"> Wij bouwen premium websites die bezoekers omzetten in leads, afspraken en klanten. Ontworpen voor groei. Gebouwd voor conversie. <\/pee> <\/p>\n<div class=\"hero-actions\"> <a href=\"#\" class=\"primary-btn\">Plan strategiegesprek \u2197<\/a> <a href=\"#aanpak\" class=\"secondary-btn\">Bekijk onze aanpak<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"hero-bottom\"> <\/p>\n<div class=\"hero-stats\"> <\/p>\n<div class=\"stat\"> <\/p>\n<h3>2.3x<\/h3>\n<p> <span>Gemiddelde stijging in conversie<\/span> <\/div>\n<p> <\/p>\n<div class=\"stat\"> <\/p>\n<h3>+47%<\/h3>\n<p> <span>Meer kwalitatieve leads<\/span> <\/div>\n<p> <\/p>\n<div class=\"stat\"> <\/p>\n<h3>24\/7<\/h3>\n<p> <span>Digitale verkoper actief<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p> <\/main> <\/p>\n<section class=\"aanpak\" id=\"aanpak\"> <\/p>\n<div class=\"section-head\"> <\/p>\n<h2>Hoe wij van bezoekers <span class=\"gradient-text\">betalende klanten<\/span> maken.<\/h2>\n<p> <pee> Geen giswerk. Geen standaard templates. Een helder systeem dat bezoekers omzet in leads, afspraken en klanten. <\/pee> <\/div>\n<p> <\/p>\n<div class=\"steps\"> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">01 \/ Analyse<\/div>\n<p> <\/p>\n<h3>Strategie & Positionering<\/h3>\n<p> <pee>We analyseren jouw markt, concurrenten en doelgroep zodat jouw website direct onderscheidend wordt.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">02 \/ Design<\/div>\n<p> <\/p>\n<h3>Premium Design<\/h3>\n<p> <pee>Een high-end uitstraling die vertrouwen opbouwt en bezoekers overtuigt om actie te ondernemen.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">03 \/ Conversie<\/div>\n<p> <\/p>\n<h3>Conversie Optimalisatie<\/h3>\n<p> <pee>Elke knop, sectie en pagina wordt ontworpen om meer leads en afspraken te genereren.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">04 \/ Groei<\/div>\n<p> <\/p>\n<h3>Lanceren & Schalen<\/h3>\n<p> <pee>Na livegang blijft jouw website 24\/7 werken als digitale omzetmachine voor je bedrijf.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"result-box\"> <\/p>\n<h3>Meer bezoekers. Meer leads. <span class=\"gradient-text\">Meer klanten.<\/span><\/h3>\n<p> <pee> Het resultaat is geen standaard website, maar een premium digitaal systeem dat vertrouwen opbouwt en groei stimuleert. <\/pee> <\/div>\n<p> <\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<section class=\"cases\" id=\"cases\"> <\/p>\n<div class=\"cases-header\"> <span class=\"cases-badge\"> <span><\/span> Onze Cases <\/span> <\/p>\n<h2> Resultaten <span>die spreken.<\/span> <\/h2>\n<p> <\/div>\n<p> <\/p>\n<div class=\"cases-nav\"> <button id=\"prevCase\" aria-label=\"Vorige case\">\u2190<\/button> <button id=\"nextCase\" aria-label=\"Volgende case\">\u2192<\/button> <\/div>\n<p> <\/p>\n<div class=\"cases-slider\"> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"MOSO Cars\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>MOSO Cars<\/h3>\n<p> <span>Automotive Website<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"Luxury Brand\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>Luxury Brand<\/h3>\n<p> <span>High-End Webdesign<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"Lead System\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>Lead System<\/h3>\n<p> <span>Conversie Website<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"Premium Service\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>Premium Service<\/h3>\n<p> <span>Sales Funnel Website<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"EVO Project\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>EVO Project<\/h3>\n<p> <span>Digitale Omzetmachine<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-dots\"> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <\/div>\n<p> <\/p>\n<div class=\"case-benefits\"> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u2197<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>Meer conversie<\/h3>\n<p> <pee>Gemiddeld 2.3x meer conversie door strategisch webdesign.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u25ce<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>Meer leads<\/h3>\n<p> <pee>Meer kwalitatieve aanvragen door slimme funnels.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u25f7<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>24\/7 actief<\/h3>\n<p> <pee>Jouw website werkt dag en nacht als digitale verkoper.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u2726<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>Gebouwd voor groei<\/h3>\n<p> <pee>Schaalbaar, snel en ontworpen voor maximale resultaten.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p><\/section>\n<p><\/p>\n<style> .cases { padding: 72px 5% 76px; background: #ffffff; color: #111111; overflow: hidden; position: relative; } .cases::before { content: \"\"; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%); top: -330px; right: -210px; pointer-events: none; } .cases-header { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 3; } .cases-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; background: linear-gradient(90deg, rgba(139,92,246,.12), rgba(79,140,255,.08)); color: #7c3aed; font-weight: 900; font-size: 14px; margin-bottom: 20px; border: 1px solid rgba(139,92,246,.12); box-shadow: 0 14px 35px rgba(139,92,246,.08); } .cases-badge span { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #4f8cff); box-shadow: 0 0 16px rgba(139,92,246,.65); } .cases-header h2 { margin: 0 auto; font-size: clamp(50px, 5.2vw, 88px); line-height: .9; letter-spacing: -4.2px; font-weight: 900; color: #111111; } .cases-header h2 span { display: block; background: linear-gradient(90deg, #8b5cf6 0%, #6d5dfc 45%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cases-nav { display: flex; justify-content: center; gap: 16px; margin: 28px 0 18px; position: relative; z-index: 5; } .cases-nav button { width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer; color: #111111; font-size: 25px; font-weight: 900; background: #ffffff; box-shadow: 0 18px 42px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.06); transition: .25s ease; } .cases-nav button:hover { transform: translateY(-3px); color: #7c3aed; box-shadow: 0 20px 45px rgba(139,92,246,.18), inset 0 0 0 1px rgba(139,92,246,.18); } .cases-slider { position: relative; width: 100%; height: 380px; perspective: 1900px; } .case-slide { position: absolute; top: 0; left: 50%; width: min(700px, 74vw); height: 350px; border-radius: 32px; overflow: visible; background: transparent; transform-style: preserve-3d; transition: transform .55s ease, opacity .55s ease, filter .55s ease; will-change: transform, opacity; } .case-screen { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 32px; background: #111111; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 42px 90px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.08); transform-style: preserve-3d; } .case-slide::before { content: \"\"; position: absolute; left: 18px; right: 18px; bottom: -18px; height: 20px; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #2a2a2f 0%, #111113 100%); transform: skewX(-18deg); box-shadow: 0 20px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); z-index: -1; } .case-slide::after { content: \"\"; position: absolute; top: 18px; bottom: -3px; right: -14px; width: 18px; border-radius: 0 28px 28px 0; background: linear-gradient(90deg, #2b2b31 0%, #0e0e11 100%); transform: skewY(-18deg); box-shadow: 10px 18px 34px rgba(0,0,0,.18), inset 1px 0 0 rgba(255,255,255,.10); z-index: -1; } .case-slide.active .case-screen { box-shadow: 0 0 80px rgba(139,92,246,.22), 0 45px 100px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.10); border-color: rgba(139,92,246,.25); } .case-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .6s ease; } .case-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,0)); color: #ffffff; } .case-overlay h3 { font-size: 25px; font-weight: 900; margin-bottom: 7px; color: #ffffff !important; text-shadow: 0 4px 18px rgba(0,0,0,.7); } .case-overlay span { font-size: 15px; font-weight: 900; color: #e5e7eb !important; text-shadow: 0 4px 16px rgba(0,0,0,.8); } .case-dots { display: flex; justify-content: center; gap: 11px; margin-top: 4px; } .case-dot { width: 10px; height: 10px; border: none; border-radius: 50%; background: #d6d6dc; cursor: pointer; transition: .25s ease; } .case-dot.active { width: 30px; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #4f8cff); } .case-benefits { max-width: 1220px; margin: 36px auto 0; padding-top: 34px; border-top: 1px solid #e6e8ee; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .case-benefit { display: flex; align-items: flex-start; gap: 18px; padding-right: 24px; border-right: 1px solid #e6e8ee; } .case-benefit:last-child { border-right: none; } .benefit-icon { width: 56px; height: 56px; border-radius: 17px; flex: 0 0 auto; display: grid; place-items: center; font-size: 29px; font-weight: 900; color: #8b5cf6; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(79,140,255,.09)); box-shadow: inset 0 0 0 1px rgba(139,92,246,.10); } .case-benefit h3 { font-size: 19px; font-weight: 900; margin-bottom: 8px; color: #111111 !important; } .case-benefit p { font-size: 15.5px; line-height: 1.52; color: #5f6b7a !important; font-weight: 650; } @media (max-width: 1000px) { .case-benefits { grid-template-columns: repeat(2, 1fr); } .case-benefit:nth-child(2) { border-right: none; } } @media (max-width: 900px) { .cases { padding: 64px 5% 76px; } .cases-slider { height: 325px; perspective: none; } .case-slide { width: 86vw; height: 292px; } .cases-header h2 { font-size: 46px; letter-spacing: -2.5px; } } @media (max-width: 650px) { .case-benefits { grid-template-columns: 1fr; gap: 18px; } .case-benefit, .case-benefit:nth-child(2) { border-right: none; padding-right: 0; padding-bottom: 18px; border-bottom: 1px solid #e6e8ee; } .case-benefit:last-child { border-bottom: none; } } @media (max-width: 480px) { .cases { padding: 56px 5% 68px; } .cases-header h2 { font-size: 42px; } .cases-slider { height: 260px; } .case-slide { width: 88vw; height: 225px; } .case-screen { border-radius: 24px; } .case-overlay { padding: 19px; } .case-overlay h3 { font-size: 20px; } .case-overlay span { font-size: 13px; } }<\/style>\n<p><script> const caseSlides = document.querySelectorAll(\".case-slide\"); const caseDots = document.querySelectorAll(\".case-dot\"); const prevCase = document.getElementById(\"prevCase\"); const nextCase = document.getElementById(\"nextCase\"); let currentCase = 2; let autoCase; function updateCases() { caseSlides.forEach((slide, index) => { let offset = index - currentCase; if (offset > 2) offset -= caseSlides.length; if (offset < -2) offset += caseSlides.length; slide.classList.toggle(\"active\", offset === 0); const isMobile = window.innerWidth <= 900; const distance = isMobile ? 112 : 220; const scale = offset === 0 ? 1 : isMobile ? 0.82 : 0.76; const rotate = isMobile ? 0 : offset * -18; const opacity = Math.abs(offset) > 2 ? 0 : offset === 0 ? 1 : 0.6; const blur = offset === 0 ? \"0px\" : \"1px\"; slide.style.zIndex = 10 - Math.abs(offset); slide.style.opacity = opacity; slide.style.filter = `blur(${blur})`; slide.style.transform = ` translateX(calc(-50% + ${offset * distance}px)) scale(${scale}) rotateY(${rotate}deg) `; }); caseDots.forEach((dot, index) => { dot.classList.toggle(\"active\", index === currentCase); }); } function nextSlide() { currentCase = (currentCase + 1) % caseSlides.length; updateCases(); } function prevSlide() { currentCase = (currentCase - 1 + caseSlides.length) % caseSlides.length; updateCases(); } nextCase.addEventListener(\"click\", () => { nextSlide(); resetAutoCase(); }); prevCase.addEventListener(\"click\", () => { prevSlide(); resetAutoCase(); }); caseDots.forEach((dot, index) => { dot.addEventListener(\"click\", () => { currentCase = index; updateCases(); resetAutoCase(); }); }); function startAutoCase() { autoCase = setInterval(nextSlide, 4500); } function resetAutoCase() { clearInterval(autoCase); startAutoCase(); } window.addEventListener(\"resize\", updateCases); updateCases(); startAutoCase();<\/script>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<section class=\"evo-difference\" id=\"waarom-evo\"> <\/p>\n<div class=\"evo-bg evo-bg-one\"><\/div>\n<p> <\/p>\n<div class=\"evo-bg evo-bg-two\"><\/div>\n<p> <\/p>\n<div class=\"evo-head\"> <span class=\"evo-badge\"> <i><\/i> Waarom EVO <\/span> <\/p>\n<h2> Geen standaard agency. <span>Wel websites die verkopen.<\/span> <\/h2>\n<p> <pee> Wij combineren premium design, strategie en conversie tot \u00e9\u00e9n digitale ervaring die vertrouwen opbouwt en klanten oplevert. <\/pee> <\/div>\n<p> <\/p>\n<div class=\"evo-cards\"> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u2726<\/div>\n<p> <span class=\"evo-number\">01<\/span> <\/p>\n<h3>Geen templates<\/h3>\n<p> <pee> Jouw website wordt uniek ontworpen voor jouw merk, doelgroep en aanbod. Geen standaard layout die iedereen al heeft gezien. <\/pee> <\/article>\n<p> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u26a1<\/div>\n<p> <span class=\"evo-number\">02<\/span> <\/p>\n<h3>Supersnel<\/h3>\n<p> <pee> Snel laden, strak gebouwd en perfect voor mobiel. Bezoekers blijven langer en klikken sneller door naar actie. <\/pee> <\/article>\n<p> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u2197<\/div>\n<p> <span class=\"evo-number\">03<\/span> <\/p>\n<h3>Conversiegericht<\/h3>\n<p> <pee> Elke sectie, knop en tekst heeft een doel: meer leads, meer afspraken en meer klanten voor jouw bedrijf. <\/pee> <\/article>\n<p> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u25ce<\/div>\n<p> <span class=\"evo-number\">04<\/span> <\/p>\n<h3>Strategisch<\/h3>\n<p> <pee> We denken verder dan design. Positionering, vertrouwen en klantreis worden vanaf het begin slim meegenomen. <\/pee> <\/article>\n<p> <\/div>\n<p> <\/p>\n<div class=\"evo-bottom-line\"> <strong>Wij ontwerpen niet voor likes.<\/strong> <span>Wij ontwerpen voor leads.<\/span> <\/div>\n<p><\/section>\n<p><\/p>\n<style> .evo-difference { padding: 96px 5%; background: radial-gradient(circle at 18% 18%, rgba(139,92,246,.18), transparent 34%), radial-gradient(circle at 82% 78%, rgba(79,140,255,.14), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%); color: #111111; position: relative; overflow: hidden; } .evo-difference::before { content: \"\"; position: absolute; inset: 0; background-image: linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px); background-size: 70px 70px; mask-image: radial-gradient(circle at center, black, transparent 72%); pointer-events: none; } .evo-bg { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: evoFloat 8s ease-in-out infinite; } .evo-bg-one { width: 360px; height: 360px; background: rgba(139,92,246,.20); top: -130px; left: -120px; } .evo-bg-two { width: 420px; height: 420px; background: rgba(79,140,255,.16); right: -160px; bottom: -160px; animation-delay: -3s; } @keyframes evoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.04); } } .evo-head { max-width: 900px; margin: 0 auto 62px; text-align: center; position: relative; z-index: 2; } .evo-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(139,92,246,.14); box-shadow: 0 18px 44px rgba(139,92,246,.10); color: #7c3aed; font-size: 14px; font-weight: 900; margin-bottom: 20px; } .evo-badge i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #4f8cff); box-shadow: 0 0 18px rgba(139,92,246,.65); } .evo-head h2 { font-size: clamp(44px, 5vw, 84px); line-height: .92; letter-spacing: -4px; font-weight: 900; color: #111111; margin-bottom: 22px; } .evo-head h2 span { display: block; background: linear-gradient(90deg, #8b5cf6 0%, #6d5dfc 45%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .evo-head p { max-width: 690px; margin: 0 auto; color: #5f6b7a; font-size: 19px; line-height: 1.7; font-weight: 600; } .evo-cards { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 3; perspective: 1600px; } .evo-card { min-height: 390px; padding: 30px; border-radius: 34px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,255,.92)); border: 1px solid rgba(17,17,17,.08); box-shadow: 0 30px 80px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.75); transform-style: preserve-3d; transition: .45s ease; } .evo-card::before { content: \"\"; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 0%, rgba(255,255,255,.9) 38%, transparent 64%); transform: translateX(-120%); transition: .75s ease; pointer-events: none; } .evo-card::after { content: \"\"; position: absolute; left: 22px; right: 22px; bottom: -18px; height: 22px; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #d7d7e6, #bfc0d0); transform: skewX(-18deg); z-index: -1; box-shadow: 0 22px 42px rgba(0,0,0,.10); } .evo-card:hover { transform: translateY(-14px) rotateX(7deg) rotateY(-5deg); border-color: rgba(139,92,246,.28); box-shadow: 0 0 80px rgba(139,92,246,.18), 0 40px 100px rgba(0,0,0,.12); } .evo-card:hover::before { transform: translateX(120%); } .evo-card-glow { position: absolute; width: 210px; height: 210px; border-radius: 50%; right: -80px; top: -90px; background: radial-gradient(circle, rgba(139,92,246,.22), transparent 70%); filter: blur(4px); pointer-events: none; } .evo-icon { width: 66px; height: 66px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; color: #8b5cf6; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(79,140,255,.09)); box-shadow: inset 0 0 0 1px rgba(139,92,246,.12), 0 18px 40px rgba(139,92,246,.10); margin-bottom: 72px; position: relative; z-index: 2; } .evo-number { position: absolute; right: 28px; top: 30px; font-size: 14px; font-weight: 900; color: #8b5cf6; letter-spacing: 2px; } .evo-card h3 { font-size: 31px; line-height: 1.08; letter-spacing: -1px; font-weight: 900; color: #111111; margin-bottom: 18px; position: relative; z-index: 2; } .evo-card p { color: #5f6b7a; font-size: 16.5px; line-height: 1.75; font-weight: 600; position: relative; z-index: 2; } .evo-bottom-line { max-width: 1240px; margin: 28px auto 0; padding: 34px 40px; border-radius: 34px; background: #111111; color: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 26px; position: relative; z-index: 3; box-shadow: 0 30px 90px rgba(0,0,0,.18); } .evo-bottom-line strong { font-size: clamp(28px, 2.8vw, 48px); line-height: 1; letter-spacing: -2px; font-weight: 900; color: #ffffff; } .evo-bottom-line span { font-size: clamp(28px, 2.8vw, 48px); line-height: 1; letter-spacing: -2px; font-weight: 900; background: linear-gradient(90deg, #8b5cf6, #4f8cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 1100px) { .evo-cards { grid-template-columns: repeat(2, 1fr); } .evo-bottom-line { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .evo-difference { padding: 76px 5%; } .evo-head { margin-bottom: 42px; } .evo-head h2 { font-size: 43px; letter-spacing: -2.4px; } .evo-head p { font-size: 16px; } .evo-cards { grid-template-columns: 1fr; gap: 18px; } .evo-card { min-height: auto; padding: 28px; border-radius: 28px; } .evo-icon { margin-bottom: 42px; } .evo-card h3 { font-size: 28px; } .evo-bottom-line { padding: 28px; border-radius: 28px; } }<\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<section class=\"about\" id=\"over-ons\"> <\/p>\n<div class=\"about-glow glow-one\"><\/div>\n<p> <\/p>\n<div class=\"about-glow glow-two\"><\/div>\n<p> <\/p>\n<div class=\"about-wrap\"> <\/p>\n<div class=\"about-left\"> <span class=\"about-badge\"> <i><\/i> Over ons <\/span> <\/p>\n<h2> Premium webdesign met \u00e9\u00e9n doel: <span>meer klanten.<\/span> <\/h2>\n<p> <pee> EVO WEBDESIGN helpt ondernemers met websites die niet alleen mooi zijn, maar ook resultaat opleveren. Wij combineren strategie, design en conversie tot een website die vertrouwen opbouwt en aanvragen genereert. <\/pee> <\/p>\n<div class=\"about-actions\"> <a href=\"#contact\" class=\"about-primary\">Neem contact op \u2197<\/a> <a href=\"#cases\" class=\"about-secondary\">Bekijk cases<\/a> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"about-right\"> <\/p>\n<div class=\"about-card main-card\"> <\/p>\n<div class=\"about-card-top\"> <span>EVO Focus<\/span> <strong>Resultaat boven alles<\/strong> <\/div>\n<p> <\/p>\n<div class=\"about-meter\"> <\/p>\n<div> <span>Strategie<\/span> <b>98%<\/b> <\/div>\n<p> <i><em style=\"width:98%\"><\/em><\/i> <\/div>\n<p> <\/p>\n<div class=\"about-meter\"> <\/p>\n<div> <span>Design<\/span> <b>95%<\/b> <\/div>\n<p> <i><em style=\"width:95%\"><\/em><\/i> <\/div>\n<p> <\/p>\n<div class=\"about-meter\"> <\/p>\n<div> <span>Conversie<\/span> <b>100%<\/b> <\/div>\n<p> <i><em style=\"width:100%\"><\/em><\/i> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"about-mini mini-one\"> <\/p>\n<h3>Geen templates<\/h3>\n<p> <pee>Elke website wordt uniek ontworpen.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"about-mini mini-two\"> <\/p>\n<h3>Leadgericht<\/h3>\n<p> <pee>Gebouwd om bezoekers om te zetten.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p><\/section>\n<p><\/p>\n<style> .about { padding: 110px 5%; background: radial-gradient(circle at 18% 20%, rgba(139,92,246,.16), transparent 32%), radial-gradient(circle at 85% 75%, rgba(79,140,255,.12), transparent 32%), linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%); color: #111111; position: relative; overflow: hidden; } .about-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: .75; animation: aboutFloat 8s ease-in-out infinite; } .glow-one { width: 360px; height: 360px; background: rgba(139,92,246,.18); top: -140px; left: -120px; } .glow-two { width: 420px; height: 420px; background: rgba(79,140,255,.14); right: -160px; bottom: -160px; animation-delay: -3s; } @keyframes aboutFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } } .about-wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; position: relative; z-index: 2; } .about-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(139,92,246,.14); box-shadow: 0 18px 44px rgba(139,92,246,.10); color: #7c3aed; font-size: 14px; font-weight: 900; margin-bottom: 24px; } .about-badge i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #4f8cff); box-shadow: 0 0 18px rgba(139,92,246,.65); } .about h2 { max-width: 780px; font-size: clamp(44px, 5vw, 84px); line-height: .94; letter-spacing: -4px; font-weight: 900; color: #111111; margin-bottom: 28px; } .about h2 span { display: block; background: linear-gradient(90deg, #8b5cf6 0%, #6d5dfc 45%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-left p { max-width: 690px; color: #5f6b7a; font-size: 19px; line-height: 1.75; font-weight: 600; margin-bottom: 34px; } .about-actions { display: flex; gap: 14px; flex-wrap: wrap; } .about-primary, .about-secondary { padding: 17px 26px; border-radius: 999px; font-size: 15px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: .25s ease; } .about-primary { background: #111111; color: #ffffff; box-shadow: 0 22px 50px rgba(0,0,0,.14); } .about-secondary { background: #ffffff; color: #111111; border: 1px solid #ececf0; } .about-primary:hover, .about-secondary:hover { transform: translateY(-3px); } .about-right { position: relative; min-height: 520px; perspective: 1400px; } .about-card { border-radius: 38px; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,255,.94)); border: 1px solid rgba(17,17,17,.08); box-shadow: 0 40px 110px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.72); position: relative; overflow: hidden; } .main-card { padding: 34px; min-height: 410px; transform: rotateY(-8deg) rotateX(4deg); animation: cardFloat 7s ease-in-out infinite; } @keyframes cardFloat { 0%,100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-4deg) rotateX(2deg) translateY(-14px); } } .about-card::before { content: \"\"; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 38%); pointer-events: none; } .about-card-top { position: relative; z-index: 2; margin-bottom: 52px; } .about-card-top span { display: block; color: #8b5cf6; font-weight: 900; font-size: 14px; margin-bottom: 10px; } .about-card-top strong { display: block; color: #111111; font-size: 34px; line-height: 1; letter-spacing: -1.4px; font-weight: 900; } .about-meter { position: relative; z-index: 2; margin-bottom: 24px; } .about-meter div { display: flex; justify-content: space-between; margin-bottom: 10px; } .about-meter span { color: #5f6b7a; font-weight: 800; font-size: 15px; } .about-meter b { color: #111111; font-weight: 900; font-size: 18px; } .about-meter i { display: block; height: 12px; border-radius: 999px; background: #ececf0; overflow: hidden; } .about-meter em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #4f8cff); box-shadow: 0 0 22px rgba(139,92,246,.35); animation: fillMeter 1.8s ease forwards; } @keyframes fillMeter { from { width: 0; } } .about-mini { position: absolute; width: 250px; padding: 22px; border-radius: 26px; background: #111111; color: #ffffff; box-shadow: 0 30px 70px rgba(0,0,0,.18); animation: miniFloat 6s ease-in-out infinite; } .about-mini h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; color: #ffffff; } .about-mini p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.68); font-weight: 600; } .mini-one { right: -20px; top: 40px; } .mini-two { left: -20px; bottom: 35px; animation-delay: -2.5s; } @keyframes miniFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (max-width: 950px) { .about-wrap { grid-template-columns: 1fr; gap: 48px; } .about-right { min-height: 500px; } } @media (max-width: 600px) { .about { padding: 76px 5%; } .about h2 { font-size: 43px; letter-spacing: -2.4px; } .about-left p { font-size: 16px; } .about-actions { flex-direction: column; } .about-primary, .about-secondary { width: 100%; } .about-right { min-height: auto; } .main-card { transform: none; animation: none; padding: 28px; border-radius: 30px; } .about-card-top strong { font-size: 30px; } .about-mini { position: relative; width: 100%; left: auto; right: auto; top: auto; bottom: auto; margin-top: 16px; } }<\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<footer class=\"footer\"> <\/p>\n<div class=\"footer-glow\"><\/div>\n<p> <\/p>\n<div class=\"footer-cta\"> <span class=\"footer-badge\"> <i><\/i> Laatste stap <\/span> <\/p>\n<h2> Klaar voor een website die <span>meer klanten oplevert?<\/span> <\/h2>\n<p> <pee> Laat EVO WEBDESIGN jouw website veranderen in een digitale verkoopmachine. <\/pee> <a href=\"#contact\" class=\"footer-btn\"> Plan een strategiegesprek \u2197 <\/a> <\/div>\n<p> <\/p>\n<div class=\"footer-divider\"><\/div>\n<p> <\/p>\n<div class=\"footer-bottom\"> <\/p>\n<div class=\"footer-brand\"> <\/p>\n<h3>EVO<\/h3>\n<p> <span>WEBDESIGN<\/span> <pee> Premium websites gebouwd voor groei, conversie en resultaat. <\/pee> <\/div>\n<p> <\/p>\n<div class=\"footer-links\"> <\/p>\n<h4>Navigatie<\/h4>\n<p> <a href=\"#\">Home<\/a> <a href=\"#\">Aanpak<\/a> <a href=\"#\">Cases<\/a> <a href=\"#\">Over ons<\/a> <a href=\"#\">Contact<\/a> <\/div>\n<p> <\/p>\n<div class=\"footer-links\"> <\/p>\n<h4>Diensten<\/h4>\n<p> <a href=\"#\">Webdesign<\/a> <a href=\"#\">Conversie<\/a> <a href=\"#\">Branding<\/a> <a href=\"#\">Optimalisatie<\/a> <\/div>\n<p> <\/p>\n<div class=\"footer-contact\"> <\/p>\n<h4>Contact<\/h4>\n<p> <a href=\"#\">info@evowebdesign.nl<\/a> <a href=\"#\">+31 8 004 1234<\/a> <\/p>\n<div class=\"footer-socials\"> <a href=\"#\">IG<\/a> <a href=\"#\">LI<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"footer-copyright\"> \u00a9 2026 EVO WEBDESIGN \u2022 Alle rechten voorbehouden. <\/div>\n<p><\/footer>\n<p><\/p>\n<style>.footer{ position:relative; overflow:hidden; padding:110px 5% 35px; background:#050509; color:#ffffff;}.footer-glow{ position:absolute; width:700px; height:700px; border-radius:50%; background:radial-gradient( circle, rgba(139,92,246,.25), transparent 70% ); top:-350px; left:50%; transform:translateX(-50%); filter:blur(90px); pointer-events:none;}.footer-cta{ max-width:950px; margin:0 auto; text-align:center; position:relative; z-index:2;}.footer-badge{ display:inline-flex; align-items:center; gap:9px; padding:10px 22px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.85); font-size:14px; font-weight:900; margin-bottom:24px;}.footer-badge i{ width:9px; height:9px; border-radius:50%; background:linear-gradient( 135deg, #8b5cf6, #4f8cff ); box-shadow:0 0 18px rgba(139,92,246,.8);}.footer-cta h2{ font-size:clamp(50px,6vw,96px); line-height:.9; letter-spacing:-4px; font-weight:900; margin-bottom:24px; color:#ffffff;}.footer-cta h2 span{ display:block; background:linear-gradient( 90deg, #8b5cf6, #6d5dfc, #4f8cff ); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}.footer-cta p{ max-width:700px; margin:0 auto 34px; color:rgba(255,255,255,.65); font-size:19px; line-height:1.7; font-weight:500;}.footer-btn{ display:inline-flex; align-items:center; justify-content:center; padding:18px 34px; border-radius:999px; background:#ffffff; color:#111111; font-size:16px; font-weight:900; text-decoration:none; box-shadow: 0 20px 50px rgba(255,255,255,.08);}.footer-divider{ height:1px; background:rgba(255,255,255,.08); margin:90px 0 60px;}.footer-bottom{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:50px;}.footer-brand h3{ font-size:58px; line-height:1; letter-spacing:-3px; color:#ffffff;}.footer-brand span{ display:block; color:#8b5cf6; font-size:14px; font-weight:900; letter-spacing:8px; margin-top:4px;}.footer-brand p{ margin-top:24px; max-width:320px; color:rgba(255,255,255,.6); line-height:1.7;}.footer-links h4,.footer-contact h4{ color:#ffffff; font-size:17px; font-weight:900; margin-bottom:22px;}.footer-links a,.footer-contact a{ display:block; color:rgba(255,255,255,.62); text-decoration:none; margin-bottom:14px; transition:.25s;}.footer-links a:hover,.footer-contact a:hover{ color:#ffffff;}.footer-socials{ display:flex; gap:12px; margin-top:22px;}.footer-socials a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#ffffff; font-weight:900;}.footer-copyright{ text-align:center; margin-top:70px; padding-top:30px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45); font-size:14px;}@media(max-width:900px){ .footer{ padding:80px 5% 30px; } .footer-bottom{ grid-template-columns:1fr; gap:35px; } .footer-cta h2{ font-size:46px; letter-spacing:-2px; } .footer-cta p{ font-size:16px; } .footer-divider{ margin:60px 0 40px; } .footer-brand h3{ font-size:44px; }}<\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n<p>This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n\n<p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)<\/p>\n\n<\/blockquote>\n\n\n\n<p>...or something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/evowebdesign.nl\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n","_et_gb_content_width":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":14,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2026-06-23T09:51:51","date_gmt":"2026-06-23T09:51:51","guid":{"rendered":"https:\/\/evowebdesign.nl\/?page_id=2"},"modified":"2026-06-23T12:45:39","modified_gmt":"2026-06-23T12:45:39","slug":"evo-webdesign","status":"publish","type":"page","link":"https:\/\/evowebdesign.nl\/","title":{"rendered":"Evo Webdesign"},"content":{"rendered":"

[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.6″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] EVO WEBDESIGN<\/title> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: auto; } body { font-family: Arial, Helvetica, sans-serif; background: #ffffff; color: #111111; overflow-x: hidden; overflow-y: auto; } a { color: inherit; text-decoration: none; } .page { width: 100%; min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; color: #ffffff; background-image: url(\"https:\/\/mosocars.nl\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-22-jun-2026-23_01_32.png\"); background-size: cover; background-position: 100% center; background-repeat: no-repeat; } .page::before { content: \"\"; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 24%, rgba(0,0,0,.86) 45%, rgba(0,0,0,.34) 64%, rgba(0,0,0,.07) 82%, rgba(0,0,0,0) 100% ); } header { height: 86px; padding: 0 3.1%; position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; background: rgba(3, 3, 5, 0.86); border-bottom: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .logo { display: flex; align-items: center; gap: 16px; } .logo-main { font-size: 34px; font-weight: 900; letter-spacing: -2.5px; color: #ffffff; text-shadow: 0 0 10px rgba(139,92,246,.95), 0 0 26px rgba(139,92,246,.65); } .logo-sub { font-size: 13px; font-weight: 900; letter-spacing: 7px; color: rgba(255,255,255,.82); } nav { display: flex; align-items: center; gap: 38px; margin-left: auto; margin-right: 38px; } nav a { font-size: 16px; font-weight: 800; color: rgba(255,255,255,.82); } .header-btn { padding: 17px 28px; border-radius: 999px; border: 1px solid rgba(168,85,247,.55); background: rgba(255,255,255,.04); color: #ffffff; font-size: 16px; font-weight: 900; } .hero { min-height: calc(100vh - 86px); display: flex; flex-direction: column; justify-content: space-between; position: relative; } .hero-top { padding: clamp(58px, 7vh, 88px) 3.1% 36px; flex: 1; display: flex; align-items: center; } .hero-content { width: min(760px, 45vw); position: relative; z-index: 3; } .hero-title { max-width: 780px; font-size: clamp(52px, 5.45vw, 98px); line-height: .92; letter-spacing: -5.5px; font-weight: 900; margin-bottom: 26px; color: #ffffff; text-shadow: 0 12px 42px rgba(0,0,0,.88); } .hero-title span, .gradient-text { background: linear-gradient(90deg, #9b2cff 0%, #8b5cf6 32%, #6d5dfc 62%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-text { max-width: 700px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.58; font-weight: 700; color: #f2f2f2; margin-bottom: 34px; text-shadow: 0 10px 28px rgba(0,0,0,.9); } .hero-actions { display: flex; gap: 18px; flex-wrap: wrap; } .primary-btn, .secondary-btn { min-width: 250px; padding: 20px 32px; border-radius: 999px; font-size: 16px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: .28s ease; } .primary-btn { background: #ffffff; color: #070707; box-shadow: 0 0 26px rgba(255,255,255,.22), 0 14px 36px rgba(0,0,0,.45); } .secondary-btn { color: #ffffff; background: rgba(255,255,255,.045); border: 1px solid rgba(168,85,247,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hero-bottom { width: 100%; padding: 28px 3.1% 34px; background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.92) 100% ); } .hero-stats { max-width: 760px; display: flex; gap: 34px; } .stat { min-width: 160px; padding-right: 34px; border-right: 1px solid rgba(255,255,255,.18); } .stat:last-child { border-right: none; } .stat h3 { font-size: clamp(34px, 3vw, 48px); line-height: 1; font-weight: 900; margin-bottom: 10px; color: #ffffff; } .stat span { display: block; font-size: 14px; line-height: 1.45; font-weight: 700; color: rgba(255,255,255,.72); } .aanpak { padding: 96px 3.1% 110px; background: #ffffff; color: #111111; } .section-head { max-width: 980px; margin-bottom: 58px; } .section-head h2 { font-size: clamp(38px, 4.45vw, 72px); line-height: 1; letter-spacing: -3.5px; margin-bottom: 24px; color: #111111; } .section-head p { max-width: 680px; font-size: 19px; font-weight: 500; line-height: 1.7; color: #626977; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .step-card { min-height: 305px; padding: 34px; border-radius: 32px; background: #ffffff; border: 1px solid #eeeeee; box-shadow: 0 20px 60px rgba(0,0,0,.06); position: relative; overflow: hidden; transition: .3s ease; } .step-number { font-size: 15px; font-weight: 900; letter-spacing: 2px; color: #8b5cf6; margin-bottom: 56px; text-transform: uppercase; } .step-card h3 { font-size: 30px; line-height: 1.15; font-weight: 900; margin-bottom: 20px; color: #111111; } .step-card p { font-size: 17px; line-height: 1.8; font-weight: 500; color: #5d6472; } .result-box { margin-top: 30px; padding: 52px; border-radius: 36px; background: linear-gradient(135deg, #8b5cf6 0%, #6d5dfc 52%, #4f8cff 100%); color: #ffffff; display: flex; justify-content: space-between; gap: 30px; align-items: center; box-shadow: 0 30px 90px rgba(139,92,246,.24); } .result-box h3 { font-size: clamp(32px, 3.1vw, 56px); letter-spacing: -2px; line-height: 1; font-weight: 900; color: #ffffff; } .result-box p { max-width: 540px; font-size: 19px; font-weight: 500; line-height: 1.65; color: rgba(255,255,255,.84); } .result-box .gradient-text { background: linear-gradient(90deg, #ffffff, #dbeafe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 1000px) { nav, .header-btn { display: none; } header { height: 74px; padding: 0 5%; } .page { min-height: auto; background-position: 72% center; } .page::before { background: linear-gradient( 90deg, rgba(0,0,0,.97), rgba(0,0,0,.88) 52%, rgba(0,0,0,.42) ); } .hero { min-height: auto; } .hero-top { padding: 70px 5% 38px; align-items: flex-start; } .hero-content { width: 100%; } .hero-title { max-width: 720px; font-size: clamp(44px, 10vw, 68px); letter-spacing: -3px; } .hero-actions { flex-direction: column; } .primary-btn, .secondary-btn { width: 100%; min-width: auto; } .hero-bottom { padding: 24px 5% 34px; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 100%; } .stat { min-width: 0; padding-left: 10px; padding-right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,.18); } .stat h3 { font-size: 25px; } .stat span { font-size: 12px; } .steps { grid-template-columns: 1fr; } .result-box { flex-direction: column; align-items: flex-start; } } @media (max-width: 430px) { .logo-main { font-size: 28px; } .logo-sub { font-size: 11px; letter-spacing: 5px; } .hero-top { padding: 44px 5% 32px; } .hero-title { font-size: 42px; letter-spacing: -2.4px; margin-bottom: 22px; } .hero-text { font-size: 15px; line-height: 1.55; } .aanpak { padding: 72px 5% 88px; } .section-head h2 { font-size: 42px; letter-spacing: -2px; } .step-card { border-radius: 24px; padding: 28px; } .step-card h3 { font-size: 26px; } .result-box { border-radius: 26px; padding: 32px; } } <\/style>\n<p><\/head><body> <main class=\"page\"> <\/p>\n<header> <a href=\"#\" class=\"logo\"> <span class=\"logo-main\">EVO<\/span> <span class=\"logo-sub\">WEBDESIGN<\/span> <\/a> <\/p>\n<nav> <a href=\"#aanpak\">Aanpak<\/a> <a href=\"#\">Cases<\/a> <a href=\"#\">Systemen<\/a> <a href=\"#\">Over ons<\/a> <a href=\"#\">Contact<\/a> <\/nav>\n<p> <a href=\"#\" class=\"header-btn\">Strategiegesprek \u2197<\/a> <\/header>\n<p> <\/p>\n<section class=\"hero\"> <\/p>\n<div class=\"hero-top\"> <\/p>\n<div class=\"hero-content\"> <\/p>\n<h1 class=\"hero-title\">Meer dan een website. Een <span>omzetmachine.<\/span><\/h1>\n<p> <pee class=\"hero-text\"> Wij bouwen premium websites die bezoekers omzetten in leads, afspraken en klanten. Ontworpen voor groei. Gebouwd voor conversie. <\/pee> <\/p>\n<div class=\"hero-actions\"> <a href=\"#\" class=\"primary-btn\">Plan strategiegesprek \u2197<\/a> <a href=\"#aanpak\" class=\"secondary-btn\">Bekijk onze aanpak<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"hero-bottom\"> <\/p>\n<div class=\"hero-stats\"> <\/p>\n<div class=\"stat\"> <\/p>\n<h3>2.3x<\/h3>\n<p> <span>Gemiddelde stijging in conversie<\/span> <\/div>\n<p> <\/p>\n<div class=\"stat\"> <\/p>\n<h3>+47%<\/h3>\n<p> <span>Meer kwalitatieve leads<\/span> <\/div>\n<p> <\/p>\n<div class=\"stat\"> <\/p>\n<h3>24\/7<\/h3>\n<p> <span>Digitale verkoper actief<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p> <\/main> <\/p>\n<section class=\"aanpak\" id=\"aanpak\"> <\/p>\n<div class=\"section-head\"> <\/p>\n<h2>Hoe wij van bezoekers <span class=\"gradient-text\">betalende klanten<\/span> maken.<\/h2>\n<p> <pee> Geen giswerk. Geen standaard templates. Een helder systeem dat bezoekers omzet in leads, afspraken en klanten. <\/pee> <\/div>\n<p> <\/p>\n<div class=\"steps\"> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">01 \/ Analyse<\/div>\n<p> <\/p>\n<h3>Strategie & Positionering<\/h3>\n<p> <pee>We analyseren jouw markt, concurrenten en doelgroep zodat jouw website direct onderscheidend wordt.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">02 \/ Design<\/div>\n<p> <\/p>\n<h3>Premium Design<\/h3>\n<p> <pee>Een high-end uitstraling die vertrouwen opbouwt en bezoekers overtuigt om actie te ondernemen.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">03 \/ Conversie<\/div>\n<p> <\/p>\n<h3>Conversie Optimalisatie<\/h3>\n<p> <pee>Elke knop, sectie en pagina wordt ontworpen om meer leads en afspraken te genereren.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-number\">04 \/ Groei<\/div>\n<p> <\/p>\n<h3>Lanceren & Schalen<\/h3>\n<p> <pee>Na livegang blijft jouw website 24\/7 werken als digitale omzetmachine voor je bedrijf.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"result-box\"> <\/p>\n<h3>Meer bezoekers. Meer leads. <span class=\"gradient-text\">Meer klanten.<\/span><\/h3>\n<p> <pee> Het resultaat is geen standaard website, maar een premium digitaal systeem dat vertrouwen opbouwt en groei stimuleert. <\/pee> <\/div>\n<p> <\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<section class=\"cases\" id=\"cases\"> <\/p>\n<div class=\"cases-header\"> <span class=\"cases-badge\"> <span><\/span> Onze Cases <\/span> <\/p>\n<h2> Resultaten <span>die spreken.<\/span> <\/h2>\n<p> <\/div>\n<p> <\/p>\n<div class=\"cases-nav\"> <button id=\"prevCase\" aria-label=\"Vorige case\">\u2190<\/button> <button id=\"nextCase\" aria-label=\"Volgende case\">\u2192<\/button> <\/div>\n<p> <\/p>\n<div class=\"cases-slider\"> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"MOSO Cars\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>MOSO Cars<\/h3>\n<p> <span>Automotive Website<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"Luxury Brand\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>Luxury Brand<\/h3>\n<p> <span>High-End Webdesign<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"Lead System\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>Lead System<\/h3>\n<p> <span>Conversie Website<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"Premium Service\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>Premium Service<\/h3>\n<p> <span>Sales Funnel Website<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-slide\"> <\/p>\n<div class=\"case-screen\"> <img decoding=\"async\" src=\"https:\/\/unblast.com\/wp-content\/uploads\/2020\/05\/Website-Mockup.jpg\" alt=\"EVO Project\"> <\/p>\n<div class=\"case-overlay\"> <\/p>\n<h3>EVO Project<\/h3>\n<p> <span>Digitale Omzetmachine<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-dots\"> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <button class=\"case-dot\"><\/button> <\/div>\n<p> <\/p>\n<div class=\"case-benefits\"> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u2197<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>Meer conversie<\/h3>\n<p> <pee>Gemiddeld 2.3x meer conversie door strategisch webdesign.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u25ce<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>Meer leads<\/h3>\n<p> <pee>Meer kwalitatieve aanvragen door slimme funnels.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u25f7<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>24\/7 actief<\/h3>\n<p> <pee>Jouw website werkt dag en nacht als digitale verkoper.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"case-benefit\"> <\/p>\n<div class=\"benefit-icon\">\u2726<\/div>\n<p> <\/p>\n<div> <\/p>\n<h3>Gebouwd voor groei<\/h3>\n<p> <pee>Schaalbaar, snel en ontworpen voor maximale resultaten.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p><\/section>\n<p><\/p>\n<style> .cases { padding: 72px 5% 76px; background: #ffffff; color: #111111; overflow: hidden; position: relative; } .cases::before { content: \"\"; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%); top: -330px; right: -210px; pointer-events: none; } .cases-header { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 3; } .cases-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; background: linear-gradient(90deg, rgba(139,92,246,.12), rgba(79,140,255,.08)); color: #7c3aed; font-weight: 900; font-size: 14px; margin-bottom: 20px; border: 1px solid rgba(139,92,246,.12); box-shadow: 0 14px 35px rgba(139,92,246,.08); } .cases-badge span { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #4f8cff); box-shadow: 0 0 16px rgba(139,92,246,.65); } .cases-header h2 { margin: 0 auto; font-size: clamp(50px, 5.2vw, 88px); line-height: .9; letter-spacing: -4.2px; font-weight: 900; color: #111111; } .cases-header h2 span { display: block; background: linear-gradient(90deg, #8b5cf6 0%, #6d5dfc 45%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cases-nav { display: flex; justify-content: center; gap: 16px; margin: 28px 0 18px; position: relative; z-index: 5; } .cases-nav button { width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer; color: #111111; font-size: 25px; font-weight: 900; background: #ffffff; box-shadow: 0 18px 42px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.06); transition: .25s ease; } .cases-nav button:hover { transform: translateY(-3px); color: #7c3aed; box-shadow: 0 20px 45px rgba(139,92,246,.18), inset 0 0 0 1px rgba(139,92,246,.18); } .cases-slider { position: relative; width: 100%; height: 380px; perspective: 1900px; } .case-slide { position: absolute; top: 0; left: 50%; width: min(700px, 74vw); height: 350px; border-radius: 32px; overflow: visible; background: transparent; transform-style: preserve-3d; transition: transform .55s ease, opacity .55s ease, filter .55s ease; will-change: transform, opacity; } .case-screen { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 32px; background: #111111; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 42px 90px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.08); transform-style: preserve-3d; } .case-slide::before { content: \"\"; position: absolute; left: 18px; right: 18px; bottom: -18px; height: 20px; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #2a2a2f 0%, #111113 100%); transform: skewX(-18deg); box-shadow: 0 20px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); z-index: -1; } .case-slide::after { content: \"\"; position: absolute; top: 18px; bottom: -3px; right: -14px; width: 18px; border-radius: 0 28px 28px 0; background: linear-gradient(90deg, #2b2b31 0%, #0e0e11 100%); transform: skewY(-18deg); box-shadow: 10px 18px 34px rgba(0,0,0,.18), inset 1px 0 0 rgba(255,255,255,.10); z-index: -1; } .case-slide.active .case-screen { box-shadow: 0 0 80px rgba(139,92,246,.22), 0 45px 100px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.10); border-color: rgba(139,92,246,.25); } .case-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .6s ease; } .case-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,0)); color: #ffffff; } .case-overlay h3 { font-size: 25px; font-weight: 900; margin-bottom: 7px; color: #ffffff !important; text-shadow: 0 4px 18px rgba(0,0,0,.7); } .case-overlay span { font-size: 15px; font-weight: 900; color: #e5e7eb !important; text-shadow: 0 4px 16px rgba(0,0,0,.8); } .case-dots { display: flex; justify-content: center; gap: 11px; margin-top: 4px; } .case-dot { width: 10px; height: 10px; border: none; border-radius: 50%; background: #d6d6dc; cursor: pointer; transition: .25s ease; } .case-dot.active { width: 30px; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #4f8cff); } .case-benefits { max-width: 1220px; margin: 36px auto 0; padding-top: 34px; border-top: 1px solid #e6e8ee; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .case-benefit { display: flex; align-items: flex-start; gap: 18px; padding-right: 24px; border-right: 1px solid #e6e8ee; } .case-benefit:last-child { border-right: none; } .benefit-icon { width: 56px; height: 56px; border-radius: 17px; flex: 0 0 auto; display: grid; place-items: center; font-size: 29px; font-weight: 900; color: #8b5cf6; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(79,140,255,.09)); box-shadow: inset 0 0 0 1px rgba(139,92,246,.10); } .case-benefit h3 { font-size: 19px; font-weight: 900; margin-bottom: 8px; color: #111111 !important; } .case-benefit p { font-size: 15.5px; line-height: 1.52; color: #5f6b7a !important; font-weight: 650; } @media (max-width: 1000px) { .case-benefits { grid-template-columns: repeat(2, 1fr); } .case-benefit:nth-child(2) { border-right: none; } } @media (max-width: 900px) { .cases { padding: 64px 5% 76px; } .cases-slider { height: 325px; perspective: none; } .case-slide { width: 86vw; height: 292px; } .cases-header h2 { font-size: 46px; letter-spacing: -2.5px; } } @media (max-width: 650px) { .case-benefits { grid-template-columns: 1fr; gap: 18px; } .case-benefit, .case-benefit:nth-child(2) { border-right: none; padding-right: 0; padding-bottom: 18px; border-bottom: 1px solid #e6e8ee; } .case-benefit:last-child { border-bottom: none; } } @media (max-width: 480px) { .cases { padding: 56px 5% 68px; } .cases-header h2 { font-size: 42px; } .cases-slider { height: 260px; } .case-slide { width: 88vw; height: 225px; } .case-screen { border-radius: 24px; } .case-overlay { padding: 19px; } .case-overlay h3 { font-size: 20px; } .case-overlay span { font-size: 13px; } }<\/style>\n<p><script> const caseSlides = document.querySelectorAll(\".case-slide\"); const caseDots = document.querySelectorAll(\".case-dot\"); const prevCase = document.getElementById(\"prevCase\"); const nextCase = document.getElementById(\"nextCase\"); let currentCase = 2; let autoCase; function updateCases() { caseSlides.forEach((slide, index) => { let offset = index - currentCase; if (offset > 2) offset -= caseSlides.length; if (offset < -2) offset += caseSlides.length; slide.classList.toggle(\"active\", offset === 0); const isMobile = window.innerWidth <= 900; const distance = isMobile ? 112 : 220; const scale = offset === 0 ? 1 : isMobile ? 0.82 : 0.76; const rotate = isMobile ? 0 : offset * -18; const opacity = Math.abs(offset) > 2 ? 0 : offset === 0 ? 1 : 0.6; const blur = offset === 0 ? \"0px\" : \"1px\"; slide.style.zIndex = 10 - Math.abs(offset); slide.style.opacity = opacity; slide.style.filter = `blur(${blur})`; slide.style.transform = ` translateX(calc(-50% + ${offset * distance}px)) scale(${scale}) rotateY(${rotate}deg) `; }); caseDots.forEach((dot, index) => { dot.classList.toggle(\"active\", index === currentCase); }); } function nextSlide() { currentCase = (currentCase + 1) % caseSlides.length; updateCases(); } function prevSlide() { currentCase = (currentCase - 1 + caseSlides.length) % caseSlides.length; updateCases(); } nextCase.addEventListener(\"click\", () => { nextSlide(); resetAutoCase(); }); prevCase.addEventListener(\"click\", () => { prevSlide(); resetAutoCase(); }); caseDots.forEach((dot, index) => { dot.addEventListener(\"click\", () => { currentCase = index; updateCases(); resetAutoCase(); }); }); function startAutoCase() { autoCase = setInterval(nextSlide, 4500); } function resetAutoCase() { clearInterval(autoCase); startAutoCase(); } window.addEventListener(\"resize\", updateCases); updateCases(); startAutoCase();<\/script>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<section class=\"evo-difference\" id=\"waarom-evo\"> <\/p>\n<div class=\"evo-bg evo-bg-one\"><\/div>\n<p> <\/p>\n<div class=\"evo-bg evo-bg-two\"><\/div>\n<p> <\/p>\n<div class=\"evo-head\"> <span class=\"evo-badge\"> <i><\/i> Waarom EVO <\/span> <\/p>\n<h2> Geen standaard agency. <span>Wel websites die verkopen.<\/span> <\/h2>\n<p> <pee> Wij combineren premium design, strategie en conversie tot \u00e9\u00e9n digitale ervaring die vertrouwen opbouwt en klanten oplevert. <\/pee> <\/div>\n<p> <\/p>\n<div class=\"evo-cards\"> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u2726<\/div>\n<p> <span class=\"evo-number\">01<\/span> <\/p>\n<h3>Geen templates<\/h3>\n<p> <pee> Jouw website wordt uniek ontworpen voor jouw merk, doelgroep en aanbod. Geen standaard layout die iedereen al heeft gezien. <\/pee> <\/article>\n<p> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u26a1<\/div>\n<p> <span class=\"evo-number\">02<\/span> <\/p>\n<h3>Supersnel<\/h3>\n<p> <pee> Snel laden, strak gebouwd en perfect voor mobiel. Bezoekers blijven langer en klikken sneller door naar actie. <\/pee> <\/article>\n<p> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u2197<\/div>\n<p> <span class=\"evo-number\">03<\/span> <\/p>\n<h3>Conversiegericht<\/h3>\n<p> <pee> Elke sectie, knop en tekst heeft een doel: meer leads, meer afspraken en meer klanten voor jouw bedrijf. <\/pee> <\/article>\n<p> <\/p>\n<article class=\"evo-card\"> <\/p>\n<div class=\"evo-card-glow\"><\/div>\n<p> <\/p>\n<div class=\"evo-icon\">\u25ce<\/div>\n<p> <span class=\"evo-number\">04<\/span> <\/p>\n<h3>Strategisch<\/h3>\n<p> <pee> We denken verder dan design. Positionering, vertrouwen en klantreis worden vanaf het begin slim meegenomen. <\/pee> <\/article>\n<p> <\/div>\n<p> <\/p>\n<div class=\"evo-bottom-line\"> <strong>Wij ontwerpen niet voor likes.<\/strong> <span>Wij ontwerpen voor leads.<\/span> <\/div>\n<p><\/section>\n<p><\/p>\n<style> .evo-difference { padding: 96px 5%; background: radial-gradient(circle at 18% 18%, rgba(139,92,246,.18), transparent 34%), radial-gradient(circle at 82% 78%, rgba(79,140,255,.14), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%); color: #111111; position: relative; overflow: hidden; } .evo-difference::before { content: \"\"; position: absolute; inset: 0; background-image: linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px); background-size: 70px 70px; mask-image: radial-gradient(circle at center, black, transparent 72%); pointer-events: none; } .evo-bg { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: evoFloat 8s ease-in-out infinite; } .evo-bg-one { width: 360px; height: 360px; background: rgba(139,92,246,.20); top: -130px; left: -120px; } .evo-bg-two { width: 420px; height: 420px; background: rgba(79,140,255,.16); right: -160px; bottom: -160px; animation-delay: -3s; } @keyframes evoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.04); } } .evo-head { max-width: 900px; margin: 0 auto 62px; text-align: center; position: relative; z-index: 2; } .evo-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(139,92,246,.14); box-shadow: 0 18px 44px rgba(139,92,246,.10); color: #7c3aed; font-size: 14px; font-weight: 900; margin-bottom: 20px; } .evo-badge i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #4f8cff); box-shadow: 0 0 18px rgba(139,92,246,.65); } .evo-head h2 { font-size: clamp(44px, 5vw, 84px); line-height: .92; letter-spacing: -4px; font-weight: 900; color: #111111; margin-bottom: 22px; } .evo-head h2 span { display: block; background: linear-gradient(90deg, #8b5cf6 0%, #6d5dfc 45%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .evo-head p { max-width: 690px; margin: 0 auto; color: #5f6b7a; font-size: 19px; line-height: 1.7; font-weight: 600; } .evo-cards { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 3; perspective: 1600px; } .evo-card { min-height: 390px; padding: 30px; border-radius: 34px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,255,.92)); border: 1px solid rgba(17,17,17,.08); box-shadow: 0 30px 80px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.75); transform-style: preserve-3d; transition: .45s ease; } .evo-card::before { content: \"\"; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 0%, rgba(255,255,255,.9) 38%, transparent 64%); transform: translateX(-120%); transition: .75s ease; pointer-events: none; } .evo-card::after { content: \"\"; position: absolute; left: 22px; right: 22px; bottom: -18px; height: 22px; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #d7d7e6, #bfc0d0); transform: skewX(-18deg); z-index: -1; box-shadow: 0 22px 42px rgba(0,0,0,.10); } .evo-card:hover { transform: translateY(-14px) rotateX(7deg) rotateY(-5deg); border-color: rgba(139,92,246,.28); box-shadow: 0 0 80px rgba(139,92,246,.18), 0 40px 100px rgba(0,0,0,.12); } .evo-card:hover::before { transform: translateX(120%); } .evo-card-glow { position: absolute; width: 210px; height: 210px; border-radius: 50%; right: -80px; top: -90px; background: radial-gradient(circle, rgba(139,92,246,.22), transparent 70%); filter: blur(4px); pointer-events: none; } .evo-icon { width: 66px; height: 66px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; color: #8b5cf6; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(79,140,255,.09)); box-shadow: inset 0 0 0 1px rgba(139,92,246,.12), 0 18px 40px rgba(139,92,246,.10); margin-bottom: 72px; position: relative; z-index: 2; } .evo-number { position: absolute; right: 28px; top: 30px; font-size: 14px; font-weight: 900; color: #8b5cf6; letter-spacing: 2px; } .evo-card h3 { font-size: 31px; line-height: 1.08; letter-spacing: -1px; font-weight: 900; color: #111111; margin-bottom: 18px; position: relative; z-index: 2; } .evo-card p { color: #5f6b7a; font-size: 16.5px; line-height: 1.75; font-weight: 600; position: relative; z-index: 2; } .evo-bottom-line { max-width: 1240px; margin: 28px auto 0; padding: 34px 40px; border-radius: 34px; background: #111111; color: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 26px; position: relative; z-index: 3; box-shadow: 0 30px 90px rgba(0,0,0,.18); } .evo-bottom-line strong { font-size: clamp(28px, 2.8vw, 48px); line-height: 1; letter-spacing: -2px; font-weight: 900; color: #ffffff; } .evo-bottom-line span { font-size: clamp(28px, 2.8vw, 48px); line-height: 1; letter-spacing: -2px; font-weight: 900; background: linear-gradient(90deg, #8b5cf6, #4f8cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 1100px) { .evo-cards { grid-template-columns: repeat(2, 1fr); } .evo-bottom-line { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .evo-difference { padding: 76px 5%; } .evo-head { margin-bottom: 42px; } .evo-head h2 { font-size: 43px; letter-spacing: -2.4px; } .evo-head p { font-size: 16px; } .evo-cards { grid-template-columns: 1fr; gap: 18px; } .evo-card { min-height: auto; padding: 28px; border-radius: 28px; } .evo-icon { margin-bottom: 42px; } .evo-card h3 { font-size: 28px; } .evo-bottom-line { padding: 28px; border-radius: 28px; } }<\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<section class=\"about\" id=\"over-ons\"> <\/p>\n<div class=\"about-glow glow-one\"><\/div>\n<p> <\/p>\n<div class=\"about-glow glow-two\"><\/div>\n<p> <\/p>\n<div class=\"about-wrap\"> <\/p>\n<div class=\"about-left\"> <span class=\"about-badge\"> <i><\/i> Over ons <\/span> <\/p>\n<h2> Premium webdesign met \u00e9\u00e9n doel: <span>meer klanten.<\/span> <\/h2>\n<p> <pee> EVO WEBDESIGN helpt ondernemers met websites die niet alleen mooi zijn, maar ook resultaat opleveren. Wij combineren strategie, design en conversie tot een website die vertrouwen opbouwt en aanvragen genereert. <\/pee> <\/p>\n<div class=\"about-actions\"> <a href=\"#contact\" class=\"about-primary\">Neem contact op \u2197<\/a> <a href=\"#cases\" class=\"about-secondary\">Bekijk cases<\/a> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"about-right\"> <\/p>\n<div class=\"about-card main-card\"> <\/p>\n<div class=\"about-card-top\"> <span>EVO Focus<\/span> <strong>Resultaat boven alles<\/strong> <\/div>\n<p> <\/p>\n<div class=\"about-meter\"> <\/p>\n<div> <span>Strategie<\/span> <b>98%<\/b> <\/div>\n<p> <i><em style=\"width:98%\"><\/em><\/i> <\/div>\n<p> <\/p>\n<div class=\"about-meter\"> <\/p>\n<div> <span>Design<\/span> <b>95%<\/b> <\/div>\n<p> <i><em style=\"width:95%\"><\/em><\/i> <\/div>\n<p> <\/p>\n<div class=\"about-meter\"> <\/p>\n<div> <span>Conversie<\/span> <b>100%<\/b> <\/div>\n<p> <i><em style=\"width:100%\"><\/em><\/i> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"about-mini mini-one\"> <\/p>\n<h3>Geen templates<\/h3>\n<p> <pee>Elke website wordt uniek ontworpen.<\/pee> <\/div>\n<p> <\/p>\n<div class=\"about-mini mini-two\"> <\/p>\n<h3>Leadgericht<\/h3>\n<p> <pee>Gebouwd om bezoekers om te zetten.<\/pee> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p><\/section>\n<p><\/p>\n<style> .about { padding: 110px 5%; background: radial-gradient(circle at 18% 20%, rgba(139,92,246,.16), transparent 32%), radial-gradient(circle at 85% 75%, rgba(79,140,255,.12), transparent 32%), linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%); color: #111111; position: relative; overflow: hidden; } .about-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: .75; animation: aboutFloat 8s ease-in-out infinite; } .glow-one { width: 360px; height: 360px; background: rgba(139,92,246,.18); top: -140px; left: -120px; } .glow-two { width: 420px; height: 420px; background: rgba(79,140,255,.14); right: -160px; bottom: -160px; animation-delay: -3s; } @keyframes aboutFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } } .about-wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; position: relative; z-index: 2; } .about-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(139,92,246,.14); box-shadow: 0 18px 44px rgba(139,92,246,.10); color: #7c3aed; font-size: 14px; font-weight: 900; margin-bottom: 24px; } .about-badge i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #4f8cff); box-shadow: 0 0 18px rgba(139,92,246,.65); } .about h2 { max-width: 780px; font-size: clamp(44px, 5vw, 84px); line-height: .94; letter-spacing: -4px; font-weight: 900; color: #111111; margin-bottom: 28px; } .about h2 span { display: block; background: linear-gradient(90deg, #8b5cf6 0%, #6d5dfc 45%, #4f8cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-left p { max-width: 690px; color: #5f6b7a; font-size: 19px; line-height: 1.75; font-weight: 600; margin-bottom: 34px; } .about-actions { display: flex; gap: 14px; flex-wrap: wrap; } .about-primary, .about-secondary { padding: 17px 26px; border-radius: 999px; font-size: 15px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: .25s ease; } .about-primary { background: #111111; color: #ffffff; box-shadow: 0 22px 50px rgba(0,0,0,.14); } .about-secondary { background: #ffffff; color: #111111; border: 1px solid #ececf0; } .about-primary:hover, .about-secondary:hover { transform: translateY(-3px); } .about-right { position: relative; min-height: 520px; perspective: 1400px; } .about-card { border-radius: 38px; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,255,.94)); border: 1px solid rgba(17,17,17,.08); box-shadow: 0 40px 110px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.72); position: relative; overflow: hidden; } .main-card { padding: 34px; min-height: 410px; transform: rotateY(-8deg) rotateX(4deg); animation: cardFloat 7s ease-in-out infinite; } @keyframes cardFloat { 0%,100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-4deg) rotateX(2deg) translateY(-14px); } } .about-card::before { content: \"\"; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 38%); pointer-events: none; } .about-card-top { position: relative; z-index: 2; margin-bottom: 52px; } .about-card-top span { display: block; color: #8b5cf6; font-weight: 900; font-size: 14px; margin-bottom: 10px; } .about-card-top strong { display: block; color: #111111; font-size: 34px; line-height: 1; letter-spacing: -1.4px; font-weight: 900; } .about-meter { position: relative; z-index: 2; margin-bottom: 24px; } .about-meter div { display: flex; justify-content: space-between; margin-bottom: 10px; } .about-meter span { color: #5f6b7a; font-weight: 800; font-size: 15px; } .about-meter b { color: #111111; font-weight: 900; font-size: 18px; } .about-meter i { display: block; height: 12px; border-radius: 999px; background: #ececf0; overflow: hidden; } .about-meter em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #4f8cff); box-shadow: 0 0 22px rgba(139,92,246,.35); animation: fillMeter 1.8s ease forwards; } @keyframes fillMeter { from { width: 0; } } .about-mini { position: absolute; width: 250px; padding: 22px; border-radius: 26px; background: #111111; color: #ffffff; box-shadow: 0 30px 70px rgba(0,0,0,.18); animation: miniFloat 6s ease-in-out infinite; } .about-mini h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; color: #ffffff; } .about-mini p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.68); font-weight: 600; } .mini-one { right: -20px; top: 40px; } .mini-two { left: -20px; bottom: 35px; animation-delay: -2.5s; } @keyframes miniFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (max-width: 950px) { .about-wrap { grid-template-columns: 1fr; gap: 48px; } .about-right { min-height: 500px; } } @media (max-width: 600px) { .about { padding: 76px 5%; } .about h2 { font-size: 43px; letter-spacing: -2.4px; } .about-left p { font-size: 16px; } .about-actions { flex-direction: column; } .about-primary, .about-secondary { width: 100%; } .about-right { min-height: auto; } .main-card { transform: none; animation: none; padding: 28px; border-radius: 30px; } .about-card-top strong { font-size: 30px; } .about-mini { position: relative; width: 100%; left: auto; right: auto; top: auto; bottom: auto; margin-top: 16px; } }<\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n<footer class=\"footer\"> <\/p>\n<div class=\"footer-glow\"><\/div>\n<p> <\/p>\n<div class=\"footer-cta\"> <span class=\"footer-badge\"> <i><\/i> Laatste stap <\/span> <\/p>\n<h2> Klaar voor een website die <span>meer klanten oplevert?<\/span> <\/h2>\n<p> <pee> Laat EVO WEBDESIGN jouw website veranderen in een digitale verkoopmachine. <\/pee> <a href=\"#contact\" class=\"footer-btn\"> Plan een strategiegesprek \u2197 <\/a> <\/div>\n<p> <\/p>\n<div class=\"footer-divider\"><\/div>\n<p> <\/p>\n<div class=\"footer-bottom\"> <\/p>\n<div class=\"footer-brand\"> <\/p>\n<h3>EVO<\/h3>\n<p> <span>WEBDESIGN<\/span> <pee> Premium websites gebouwd voor groei, conversie en resultaat. <\/pee> <\/div>\n<p> <\/p>\n<div class=\"footer-links\"> <\/p>\n<h4>Navigatie<\/h4>\n<p> <a href=\"#\">Home<\/a> <a href=\"#\">Aanpak<\/a> <a href=\"#\">Cases<\/a> <a href=\"#\">Over ons<\/a> <a href=\"#\">Contact<\/a> <\/div>\n<p> <\/p>\n<div class=\"footer-links\"> <\/p>\n<h4>Diensten<\/h4>\n<p> <a href=\"#\">Webdesign<\/a> <a href=\"#\">Conversie<\/a> <a href=\"#\">Branding<\/a> <a href=\"#\">Optimalisatie<\/a> <\/div>\n<p> <\/p>\n<div class=\"footer-contact\"> <\/p>\n<h4>Contact<\/h4>\n<p> <a href=\"#\">info@evowebdesign.nl<\/a> <a href=\"#\">+31 8 004 1234<\/a> <\/p>\n<div class=\"footer-socials\"> <a href=\"#\">IG<\/a> <a href=\"#\">LI<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"footer-copyright\"> \u00a9 2026 EVO WEBDESIGN \u2022 Alle rechten voorbehouden. <\/div>\n<p><\/footer>\n<p><\/p>\n<style>.footer{ position:relative; overflow:hidden; padding:110px 5% 35px; background:#050509; color:#ffffff;}.footer-glow{ position:absolute; width:700px; height:700px; border-radius:50%; background:radial-gradient( circle, rgba(139,92,246,.25), transparent 70% ); top:-350px; left:50%; transform:translateX(-50%); filter:blur(90px); pointer-events:none;}.footer-cta{ max-width:950px; margin:0 auto; text-align:center; position:relative; z-index:2;}.footer-badge{ display:inline-flex; align-items:center; gap:9px; padding:10px 22px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.85); font-size:14px; font-weight:900; margin-bottom:24px;}.footer-badge i{ width:9px; height:9px; border-radius:50%; background:linear-gradient( 135deg, #8b5cf6, #4f8cff ); box-shadow:0 0 18px rgba(139,92,246,.8);}.footer-cta h2{ font-size:clamp(50px,6vw,96px); line-height:.9; letter-spacing:-4px; font-weight:900; margin-bottom:24px; color:#ffffff;}.footer-cta h2 span{ display:block; background:linear-gradient( 90deg, #8b5cf6, #6d5dfc, #4f8cff ); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}.footer-cta p{ max-width:700px; margin:0 auto 34px; color:rgba(255,255,255,.65); font-size:19px; line-height:1.7; font-weight:500;}.footer-btn{ display:inline-flex; align-items:center; justify-content:center; padding:18px 34px; border-radius:999px; background:#ffffff; color:#111111; font-size:16px; font-weight:900; text-decoration:none; box-shadow: 0 20px 50px rgba(255,255,255,.08);}.footer-divider{ height:1px; background:rgba(255,255,255,.08); margin:90px 0 60px;}.footer-bottom{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:50px;}.footer-brand h3{ font-size:58px; line-height:1; letter-spacing:-3px; color:#ffffff;}.footer-brand span{ display:block; color:#8b5cf6; font-size:14px; font-weight:900; letter-spacing:8px; margin-top:4px;}.footer-brand p{ margin-top:24px; max-width:320px; color:rgba(255,255,255,.6); line-height:1.7;}.footer-links h4,.footer-contact h4{ color:#ffffff; font-size:17px; font-weight:900; margin-bottom:22px;}.footer-links a,.footer-contact a{ display:block; color:rgba(255,255,255,.62); text-decoration:none; margin-bottom:14px; transition:.25s;}.footer-links a:hover,.footer-contact a:hover{ color:#ffffff;}.footer-socials{ display:flex; gap:12px; margin-top:22px;}.footer-socials a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#ffffff; font-weight:900;}.footer-copyright{ text-align:center; margin-top:70px; padding-top:30px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45); font-size:14px;}@media(max-width:900px){ .footer{ padding:80px 5% 30px; } .footer-bottom{ grid-template-columns:1fr; gap:35px; } .footer-cta h2{ font-size:46px; letter-spacing:-2px; } .footer-cta p{ font-size:16px; } .footer-divider{ margin:60px 0 40px; } .footer-brand h3{ font-size:44px; }}<\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n<p>This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n\n<p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)<\/p>\n\n<\/blockquote>\n\n\n\n<p>...or something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/evowebdesign.nl\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n","_et_gb_content_width":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":14,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/evowebdesign.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}