Files

830 lines
68 KiB
HTML

<!DOCTYPE html><html lang="nl-NL"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Helvoirt Gevelreiniging · Gevelreiniging, voegwerk en dakcoating</title><meta name="description" content="Helvoirt Gevelreiniging reinigt en renoveert gevels, voegwerk, daken en schoorstenen. Vakwerk in de regio. Vraag een gratis offerte aan."><meta name="robots" content="index, follow, max-image-preview:large"><link rel="canonical" href="http://localhost:4321/"><meta property="og:type" content="website"><meta property="og:locale" content="nl_NL"><meta property="og:title" content="Helvoirt Gevelreiniging · Gevelreiniging, voegwerk en dakcoating"><meta property="og:description" content="Helvoirt Gevelreiniging reinigt en renoveert gevels, voegwerk, daken en schoorstenen. Vakwerk in de regio. Vraag een gratis offerte aan."><meta property="og:url" content="http://localhost:4321/"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap"><style data-vite-dev-id="C:/projects/dewebsmid/helvoirt/src/styles/tokens.css">/* Helvoirt Gevelreiniging — design tokens.
Register: conversiegerichte lokale dienstensite (geen quiet-luxury).
Palette uit het zusterbedrijf onderhoudsbedrijfvanhelvoirt.nl:
cyaan #4EBFD9, actie-blauw #0069FF / #0055CE, donker petrol #1D4852,
licht cyaan #E5FAFF, antraciet #373737. Fonts: Poppins (kop) + Open Sans (body). */
:root {
/* === Actie / blauw (CTA, links) === */
--c-action: #0069ff; /* primaire CTA fill + links */
--c-action-deep: #0055ce; /* hover + links op wit (WCAG AA) */
--c-action-soft: #e7f1ff; /* zachte blauwe tint (badges, hover-bg) */
/* === Brand / cyaan (accent, iconen, highlights) === */
--c-brand: #4ebfd9; /* merk-cyaan, accenten en icoon-tint */
--c-brand-soft: #8fd9e8; /* lichtere cyaan */
/* === Petrol (donkere secties, koppen) === */
--c-petrol: #1d4852; /* donkere secties + koppen op licht */
--c-petrol-deep: #15363d; /* footer / diepste donker */
/* === Neutraal — licht (getint, geen puur wit) === */
--c-paper: #f6fafb; /* page background, koel off-white */
--c-paper-soft: #eef4f7; /* alt sectie */
--c-card: #fdfeff; /* kaart/oppervlak boven paper */
--c-tint: #e3f6fd; /* licht-cyaan accent-sectie */
--c-white: #fdfeff; /* near-white (geen #fff) */
/* === Neutraal — ink === */
--c-ink: #1f2a2e; /* body tekst (zacht zwart, petrol-getint) */
--c-ink-soft: #5b6a70; /* secundair tekst, meta */
--c-line: #dce6eb; /* hairlines, borders, dividers */
/* === Tekst op donker === */
--c-on-dark: #ffffff;
--c-on-dark-soft: #c7dae0;
--c-divider-on-dark: rgba(255, 255, 255, 0.16);
/* === Form tokens (light-surface form) === */
--c-form-bg: #fdfeff;
--c-form-border: #cbd8de;
--c-form-border-hover: #9fb6be;
--c-form-placeholder: #8a989e;
/* === Error / status / accent === */
--c-error: #d64545;
--c-error-bg: #fcedec;
--c-on-error: #ffb4b4; /* error-tekst op donker oppervlak */
--c-on-success: #8fe6b4; /* succes-tekst op donker oppervlak */
--c-star: #f5a623; /* review-sterren */
/* === Header / glass + scrim === */
--c-paper-glass: rgba(255, 255, 255, 0.90);
--c-paper-glass-scrolled: rgba(255, 255, 255, 0.97);
--c-veil-deep: rgba(21, 54, 61, 0.55);
--c-veil-mid: rgba(21, 54, 61, 0.20);
--c-veil-end: rgba(21, 54, 61, 0.92);
/* === Type === */
--font-display: "Archivo Expanded", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--t-display: clamp(2.5rem, 1.1rem + 5.6vw, 4.75rem);
--t-headline: clamp(1.85rem, 1rem + 3vw, 3rem);
--t-title: 1.3125rem;
--t-subtitle: 1.125rem;
--t-body: 1.0625rem;
--t-small: 0.9375rem;
--t-label: 0.8125rem;
--lh-tight: 1.08;
--lh-snug: 1.2;
--lh-normal: 1.6;
--lh-loose: 1.75;
/* === Layout & spacing === */
--max-w: 1240px;
--max-w-prose: 65ch;
--gutter: clamp(1.25rem, 4vw, 2.75rem);
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
/* === Motion === */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--d-fast: 140ms;
--d-base: 220ms;
--d-slow: 360ms;
/* === Shadows / depth === */
--shadow-soft: 0 6px 22px -10px rgba(21, 54, 61, 0.18),
0 2px 6px -3px rgba(21, 54, 61, 0.10);
--shadow-lift: 0 16px 38px -12px rgba(21, 54, 61, 0.28),
0 4px 10px -4px rgba(21, 54, 61, 0.16);
--shadow-cta: 0 10px 26px -10px rgba(0, 105, 255, 0.45);
--shadow-focus: 0 0 0 3px rgba(0, 105, 255, 0.40);
/* === Header height (offset voor sticky / anchor scroll) === */
--header-h: 80px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* === Base reset === */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--c-paper);
color: var(--c-ink);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: var(--lh-normal);
font-feature-settings: "kern", "liga";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, picture, svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
input,
textarea,
select {
font: inherit;
color: inherit;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
line-height: var(--lh-snug);
color: var(--c-petrol);
}
p {
margin: 0;
}
p + p {
margin-top: var(--s-4);
}
::selection {
background: var(--c-action);
color: var(--c-white);
}
:focus-visible {
outline: 2px solid var(--c-action);
outline-offset: 3px;
border-radius: 2px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.wrap {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* === Buttons === */
/* Primary CTA — actie-blauw fill, witte tekst, vriendelijk afgerond. */
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.9rem 1.6rem;
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 700;
letter-spacing: 0.005em;
color: var(--c-white);
background: var(--c-action);
border: 1px solid var(--c-action);
border-radius: var(--radius-md);
box-shadow: var(--shadow-cta);
transition: background var(--d-base) var(--ease-out),
border-color var(--d-base) var(--ease-out),
box-shadow var(--d-base) var(--ease-out),
transform var(--d-base) var(--ease-out);
}
.btn-cta:hover {
background: var(--c-action-deep);
border-color: var(--c-action-deep);
transform: translateY(-1px);
box-shadow: 0 14px 32px -10px rgba(0, 85, 206, 0.55);
}
.btn-cta svg {
transition: transform var(--d-base) var(--ease-out);
}
.btn-cta:hover svg {
transform: translateX(3px);
}
/* Secundaire knop — outline op licht / wit op donker */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.9rem 1.6rem;
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 700;
color: var(--c-action);
background: transparent;
border: 1px solid var(--c-action);
border-radius: var(--radius-md);
transition: background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out);
}
.btn-outline:hover {
background: var(--c-action);
color: var(--c-white);
}
/* Text-arrow link — secondary CTA */
.btn-text {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding-bottom: 0.35rem;
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 600;
color: var(--c-action-deep);
border-bottom: 1px solid currentColor;
transition: color var(--d-base) var(--ease-out);
}
.btn-text svg {
transition: transform var(--d-base) var(--ease-out);
}
.btn-text:hover svg,
.btn-text:focus-visible svg {
transform: translateX(4px);
}
/* === Section helpers === */
.section {
padding-block: clamp(var(--s-8), 8vw, var(--s-10));
}
.section--paper { background: var(--c-paper); }
.section--soft { background: var(--c-paper-soft); }
.section--tint { background: var(--c-tint); }
.section--petrol {
background: var(--c-petrol);
color: var(--c-on-dark);
}
.section--petrol-deep {
background: var(--c-petrol-deep);
color: var(--c-on-dark);
}
.section--petrol h1, .section--petrol h2, .section--petrol h3,
.section--petrol-deep h1, .section--petrol-deep h2, .section--petrol-deep h3 {
color: var(--c-on-dark);
}
/* === Scroll-reveal (IO-systeem voegt .revealed toe, in Base.astro) === */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal[data-delay="1"] { --reveal-delay: 100; }
.reveal[data-delay="2"] { --reveal-delay: 200; }
.reveal[data-delay="3"] { --reveal-delay: 300; }
.reveal[data-delay="4"] { --reveal-delay: 400; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
}
</style>
<style data-vite-dev-id="C:/projects/dewebsmid/helvoirt/src/layouts/Base.astro?astro&#38;type=style&#38;index=0&#38;lang.css">.skip-link {
position: absolute;
top: -40px;
left: 16px;
background: var(--c-petrol);
color: var(--c-white);
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
z-index: 1100;
transition: top var(--d-base) var(--ease-out);
}
.skip-link:focus { top: 12px; }
/* Solide, donkere headerbalk: altijd aanwezig en goed leesbaar. */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--c-petrol-deep);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
transition: box-shadow var(--d-slow) var(--ease-out);
}
.header--scrolled {
box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6);
border-bottom-color: rgba(255, 255, 255, 0.14);
}
.header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-6);
min-height: var(--header-h);
padding-block: var(--s-3);
}
main { padding-top: var(--header-h); }
/* Hero sectie hangt onder de transparante header */
main > .hero:first-child { margin-top: calc(-1 * var(--header-h)); }
.brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--c-white);
}
.brand__mark {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-action);
}
.brand__mark svg { display: block; }
.brand__text {
display: inline-flex;
flex-direction: column;
line-height: 1;
}
.brand__name {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.4rem;
line-height: 1;
letter-spacing: -0.01em;
color: var(--c-white);
}
.brand__sub {
margin-top: 0.28rem;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.62rem;
line-height: 1;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-brand);
}
.nav-desktop { display: flex; justify-content: center; }
.nav-desktop > ul {
display: flex;
gap: var(--s-6);
list-style: none;
margin: 0;
padding: 0;
}
.nav-link {
display: inline-block;
position: relative;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.005em;
color: rgba(255, 255, 255, 0.86);
padding-block: 0.55rem;
transition: color var(--d-base) var(--ease-out);
}
.nav-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 3px;
border-radius: 2px;
background: var(--c-brand);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--d-base) var(--ease-out);
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--c-white); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
/* Dropdown / submenu (desktop) */
.nav-item { position: relative; }
.nav-link--parent { display: inline-flex; align-items: center; gap: 0.34rem; }
.nav-caret { opacity: 0.6; transition: transform var(--d-base) var(--ease-out); }
.has-submenu:hover .nav-caret,
.has-submenu:focus-within .nav-caret { transform: rotate(180deg); }
.submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
margin: 0;
padding: var(--s-3);
list-style: none;
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: 12px;
box-shadow: var(--shadow-lift);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition: opacity var(--d-base) var(--ease-out),
transform var(--d-base) var(--ease-out),
visibility var(--d-base) var(--ease-out);
z-index: 60;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.has-submenu.is-closed .submenu {
opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
}
.submenu__link {
display: block;
padding: 0.6rem 0.75rem;
border-radius: 8px;
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 600;
color: var(--c-ink);
white-space: nowrap;
transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.submenu__link:hover,
.submenu__link:focus-visible,
.submenu__link[aria-current="page"] {
background: var(--c-action-soft);
color: var(--c-action-deep);
}
.drawer__nav a[aria-current="page"],
.drawer__submenu a[aria-current="page"] { color: var(--c-action); }
.header__actions {
display: inline-flex;
align-items: center;
gap: var(--s-4);
justify-self: end;
}
.header__phone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 44px;
min-height: 44px;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--c-white);
transition: color var(--d-base) var(--ease-out);
}
.header__phone svg { color: var(--c-brand); }
.header__phone:hover { color: var(--c-brand); }
.header__cta { padding: 0.85rem 1.6rem; font-size: 0.975rem; }
.hamburger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 44px;
min-height: 44px;
padding: 10px;
margin-right: -10px;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--c-white);
transition: transform var(--d-base) var(--ease-out),
opacity var(--d-fast) var(--ease-out),
background var(--d-slow) var(--ease-out);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer {
position: fixed;
inset: var(--header-h) 0 0 0;
background: var(--c-paper);
z-index: 90;
padding: var(--s-6) var(--gutter) var(--s-7);
display: flex;
flex-direction: column;
gap: var(--s-6);
overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__nav ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.drawer__nav > ul > li + li { border-top: 1px solid var(--c-line); }
.drawer__nav a {
display: block;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--c-petrol);
padding: var(--s-4) 0;
}
.drawer__submenu {
list-style: none;
margin: 0 0 var(--s-3);
padding: 0 0 0 var(--s-5);
display: flex; flex-direction: column;
}
.drawer__submenu a {
font-family: var(--font-body);
font-size: 1.02rem;
font-weight: 600;
color: var(--c-ink-soft);
padding: var(--s-3) 0;
}
.drawer__submenu a:hover { color: var(--c-action); }
.drawer__cta { font-size: 1rem; padding: 1rem 1.4rem; }
.drawer__contact {
display: flex; flex-direction: column; gap: var(--s-2);
padding-top: var(--s-5);
border-top: 1px solid var(--c-line);
}
.drawer__contact a { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
@media (max-width: 980px) {
.nav-desktop,
.header__cta,
.header__phone-num { display: none; }
.hamburger { display: flex; }
.header__inner { grid-template-columns: auto 1fr; }
}
/* === Prefooter (conversie-band) === */
.prefooter {
background: var(--c-petrol);
color: var(--c-on-dark);
padding-block: clamp(var(--s-8), 7vw, var(--s-10));
scroll-margin-top: var(--header-h);
}
.prefooter__inner {
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(var(--s-6), 5vw, var(--s-8));
align-items: start;
}
.prefooter__eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-brand-soft);
margin: 0 0 var(--s-3);
}
.prefooter__lead h2 {
color: var(--c-white);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
margin: 0 0 var(--s-4);
}
.prefooter__lead p {
color: var(--c-on-dark-soft);
max-width: 44ch;
line-height: var(--lh-loose);
}
.prefooter__contacts {
list-style: none;
margin: var(--s-6) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.prefooter__contacts li {
display: grid;
grid-template-columns: 22px 1fr;
gap: var(--s-4);
align-items: start;
}
.prefooter__icon { color: var(--c-brand); margin-top: 3px; flex-shrink: 0; }
.prefooter__val {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--c-white);
line-height: 1.4;
justify-self: start;
}
a.prefooter__val {
border-bottom: 1px solid transparent;
transition: border-color var(--d-base) var(--ease-out);
}
a.prefooter__val:hover { border-bottom-color: var(--c-brand); }
/* === Contact form (lichte velden op donkere band) === */
.cform { display: flex; flex-direction: column; gap: var(--s-4); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.cform__field { display: flex; flex-direction: column; gap: 0.4rem; }
.cform__lbl {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--c-on-dark-soft);
}
.cform__lbl em { font-style: normal; font-weight: 400; color: var(--c-brand-soft); }
.cform input,
.cform textarea,
.cform select {
width: 100%;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--c-ink);
background: var(--c-form-bg);
border: 1px solid var(--c-form-border);
border-radius: 8px;
padding: 0.7rem 0.85rem;
transition: border-color var(--d-base) var(--ease-out),
box-shadow var(--d-base) var(--ease-out);
}
.cform textarea { resize: vertical; min-height: 120px; }
.cform input::placeholder,
.cform textarea::placeholder { color: var(--c-form-placeholder); }
.cform input:hover,
.cform textarea:hover,
.cform select:hover { border-color: var(--c-form-border-hover); }
.cform input:focus,
.cform textarea:focus,
.cform select:focus {
outline: none;
border-color: var(--c-action);
box-shadow: var(--shadow-focus);
}
.cform input[aria-invalid="true"],
.cform textarea[aria-invalid="true"] { border-color: var(--c-error); }
.cform__error {
font-family: var(--font-body);
font-size: 0.78rem;
line-height: 1.4;
color: var(--c-on-error);
min-height: 0;
}
.cform__error:empty { display: none; }
.cform__honeypot {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cform__actions { margin-top: var(--s-3); }
.cform__submit { align-self: flex-start; }
.cform__submit:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.cform__status {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.55;
color: var(--c-white);
margin-top: var(--s-2);
min-height: 0;
}
.cform__status:empty { margin-top: 0; }
.cform__status[data-state="success"] { color: var(--c-on-success); }
.cform__status[data-state="error"] { color: var(--c-on-error); }
.cform[data-submitted="true"] .cform__row,
.cform[data-submitted="true"] .cform__field,
.cform[data-submitted="true"] .cform__actions { display: none; }
@media (max-width: 768px) {
.prefooter__inner { grid-template-columns: 1fr; }
.cform__row { grid-template-columns: 1fr; }
}
/* === Footer === */
.footer {
background: var(--c-petrol-deep);
color: var(--c-on-dark-soft);
padding-block: var(--s-5);
}
.footer__inner {
display: flex;
flex-wrap: wrap;
gap: var(--s-4) var(--s-6);
align-items: center;
justify-content: space-between;
font-size: var(--t-label);
letter-spacing: 0.02em;
}
.footer__nav { display: flex; gap: var(--s-5); }
.footer__nav a {
display: inline-block;
padding-block: 0.4rem;
border-bottom: 1px solid transparent;
transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.footer__nav a:hover { color: var(--c-white); border-bottom-color: var(--c-brand); }
.footer__credit { opacity: 0.7; transition: opacity var(--d-base) var(--ease-out); }
.footer__credit:hover { opacity: 1; }
/* === Sticky mobile CTA === */
.sticky-mobile-cta {
display: none;
position: fixed;
left: var(--gutter);
right: var(--gutter);
bottom: max(var(--s-4), env(safe-area-inset-bottom));
z-index: 80;
transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.sticky-mobile-cta[data-hidden="true"] {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
@media (max-width: 768px) {
.sticky-mobile-cta { display: inline-flex; }
main { padding-bottom: 96px; }
}</style>
<style data-vite-dev-id="C:/projects/dewebsmid/helvoirt/src/components/Hero.astro?astro&#38;type=style&#38;index=0&#38;lang.css">@property --pos{syntax: "<percentage>"; inherits: true; initial-value: 50%;}.hero[data-astro-cid-bbe6dxrz]{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(620px,90svh,900px);overflow:hidden;background:var(--c-petrol-deep);isolation:isolate}.ba[data-astro-cid-bbe6dxrz]{position:absolute;inset:0;z-index:0;--pos: 50%;touch-action:none;cursor:ew-resize;animation:ba-hint 2.4s var(--ease-expo) 0.4s both}@keyframes ba-hint{0%{--pos: 50%}35%{--pos: 66%}70%{--pos: 42%}100%{--pos: 50%}}.ba__img[data-astro-cid-bbe6dxrz]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.ba__before[data-astro-cid-bbe6dxrz]{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}.ba__tag[data-astro-cid-bbe6dxrz]{position:absolute;top:clamp(var(--s-6),12vh,var(--s-9));font-family:var(--font-body);font-weight:700;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-white);background:rgba(13,33,38,0.55);backdrop-filter:blur(4px);padding:0.35rem 0.7rem;border-radius:999px}.ba__tag--before[data-astro-cid-bbe6dxrz]{left:var(--gutter)}.ba__tag--after[data-astro-cid-bbe6dxrz]{right:var(--gutter)}.ba__handle[data-astro-cid-bbe6dxrz]{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-1px);background:rgba(253,254,255,0.9);box-shadow:0 0 0 1px rgba(13,33,38,0.25);cursor:ew-resize}.ba__knob[data-astro-cid-bbe6dxrz]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:var(--c-action);color:var(--c-white);box-shadow:0 6px 20px -4px rgba(13,33,38,0.6)}.ba__handle[data-astro-cid-bbe6dxrz]:focus-visible{outline:none}.ba__handle[data-astro-cid-bbe6dxrz]:focus-visible .ba__knob[data-astro-cid-bbe6dxrz]{outline:3px solid var(--c-white);outline-offset:2px}.hero__scrim[data-astro-cid-bbe6dxrz]{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(94deg,rgba(13,33,38,0.82) 0%,rgba(13,33,38,0.40) 34%,transparent 58%),linear-gradient(0deg,rgba(13,33,38,0.55) 0%,transparent 30%)}.hero__inner[data-astro-cid-bbe6dxrz]{position:relative;z-index:2;width:100%;pointer-events:none;padding-block:clamp(var(--s-7),9vh,var(--s-9));display:flex;flex-direction:column;gap:clamp(var(--s-6),5vh,var(--s-8))}.hero__content[data-astro-cid-bbe6dxrz]{max-width:min(90vw,640px)}.hero__title[data-astro-cid-bbe6dxrz]{color:var(--c-white);font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,1.3rem + 4.4vw,4.25rem);line-height:0.96;letter-spacing:-0.02em;text-wrap:balance;text-shadow:0 4px 30px rgba(13,33,38,0.45);margin:0}.hero__sub[data-astro-cid-bbe6dxrz]{max-width:46ch;margin:var(--s-5) 0 0;color:var(--c-on-dark-soft);font-size:clamp(1.05rem,0.95rem + 0.5vw,1.25rem);line-height:var(--lh-normal);text-shadow:0 2px 16px rgba(13,33,38,0.5);pointer-events:auto}.hero__cta[data-astro-cid-bbe6dxrz]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-6);pointer-events:auto}.hero__cta-primary[data-astro-cid-bbe6dxrz]{font-size:1rem;padding:1rem 1.7rem}.hero__cta-secondary[data-astro-cid-bbe6dxrz]{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:700;font-size:var(--t-small);color:var(--c-white);border-bottom:2px solid var(--c-brand);padding-bottom:0.25rem;transition:color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}.hero__cta-secondary[data-astro-cid-bbe6dxrz]:hover{color:var(--c-brand-soft);border-color:var(--c-brand-soft)}.hero__trust[data-astro-cid-bbe6dxrz]{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(var(--s-5),4vw,var(--s-8));pointer-events:auto}.hero__trust[data-astro-cid-bbe6dxrz] li[data-astro-cid-bbe6dxrz]{display:flex;flex-direction:column;line-height:1.15}.hero__trust[data-astro-cid-bbe6dxrz] strong[data-astro-cid-bbe6dxrz]{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--c-white)}.hero__trust[data-astro-cid-bbe6dxrz] span[data-astro-cid-bbe6dxrz]{font-family:var(--font-body);font-size:0.8rem;color:var(--c-on-dark-soft);margin-top:0.15rem}@media (prefers-reduced-motion: reduce){.ba[data-astro-cid-bbe6dxrz]{animation:none}}@media (max-width: 768px){.hero[data-astro-cid-bbe6dxrz]{min-height:86svh}.hero__content[data-astro-cid-bbe6dxrz]{max-width:100%}.ba__knob[data-astro-cid-bbe6dxrz]{width:46px;height:46px}}</style>
<style data-vite-dev-id="C:/projects/dewebsmid/helvoirt/src/pages/index.astro?astro&#38;type=style&#38;index=0&#38;lang.css">.intro__inner[data-astro-cid-j7pv25f6]{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(var(--s-6),6vw,var(--s-9));align-items:start}.intro__statement[data-astro-cid-j7pv25f6]{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,1rem + 2.6vw,2.9rem);line-height:1.05;letter-spacing:-0.02em;color:var(--c-petrol);text-wrap:balance;margin:0}.intro__aside[data-astro-cid-j7pv25f6] p[data-astro-cid-j7pv25f6]{color:var(--c-ink-soft);font-size:1.1rem;line-height:var(--lh-loose);max-width:46ch}.intro__facts[data-astro-cid-j7pv25f6]{list-style:none;margin:var(--s-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7)}.intro__facts[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6]{display:flex;flex-direction:column}.intro__facts[data-astro-cid-j7pv25f6] strong[data-astro-cid-j7pv25f6]{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--c-petrol)}.intro__facts[data-astro-cid-j7pv25f6] span[data-astro-cid-j7pv25f6]{font-size:0.85rem;color:var(--c-ink-soft);margin-top:0.1rem}.svc__head[data-astro-cid-j7pv25f6]{max-width:26ch;margin-bottom:clamp(var(--s-6),4vw,var(--s-8))}.svc__kicker[data-astro-cid-j7pv25f6]{font-family:var(--font-body);font-weight:700;font-size:0.8rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-brand);margin:0 0 var(--s-3)}.svc__head[data-astro-cid-j7pv25f6] h2[data-astro-cid-j7pv25f6]{color:var(--c-white);font-size:var(--t-headline)}.acc[data-astro-cid-j7pv25f6]{display:flex;gap:clamp(6px,0.8vw,14px);height:clamp(440px,62vh,640px)}.apanel[data-astro-cid-j7pv25f6]{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);transition:flex-grow 0.6s var(--ease-expo);isolation:isolate}.apanel[data-astro-cid-j7pv25f6].is-open{flex-grow:5.2}.apanel__img[data-astro-cid-j7pv25f6]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}.apanel[data-astro-cid-j7pv25f6].is-open .apanel__img[data-astro-cid-j7pv25f6]{transform:scale(1.04)}.apanel__veil[data-astro-cid-j7pv25f6]{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,33,38,0.86) 0%,rgba(13,33,38,0.34) 46%,rgba(13,33,38,0.58) 100%);transition:background var(--d-slow) var(--ease-out)}.apanel[data-astro-cid-j7pv25f6].is-open .apanel__veil[data-astro-cid-j7pv25f6]{background:linear-gradient(0deg,rgba(13,33,38,0.90) 0%,rgba(13,33,38,0.18) 56%,rgba(0,85,206,0.32) 100%)}.apanel__num[data-astro-cid-j7pv25f6]{position:absolute;top:clamp(var(--s-4),2vw,var(--s-6));left:clamp(var(--s-4),2vw,var(--s-6));z-index:2;font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--c-brand)}.apanel__v[data-astro-cid-j7pv25f6]{position:absolute;left:50%;bottom:clamp(var(--s-5),4vh,var(--s-7));transform:translateX(-50%);writing-mode:vertical-rl;text-orientation:mixed;z-index:2;font-family:var(--font-display);font-weight:800;font-size:clamp(0.95rem,1.2vw,1.2rem);letter-spacing:0.01em;color:var(--c-white);white-space:nowrap;opacity:1;transition:opacity var(--d-base) var(--ease-out)}.apanel[data-astro-cid-j7pv25f6].is-open .apanel__v[data-astro-cid-j7pv25f6]{opacity:0}.apanel__h[data-astro-cid-j7pv25f6]{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(var(--s-5),2.4vw,var(--s-7));opacity:0;transform:translateY(12px);transition:opacity 0.5s var(--ease-out) 0.12s,transform 0.5s var(--ease-out) 0.12s;pointer-events:none}.apanel[data-astro-cid-j7pv25f6].is-open .apanel__h[data-astro-cid-j7pv25f6]{opacity:1;transform:none}.apanel__title[data-astro-cid-j7pv25f6]{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,1rem + 2vw,2.9rem);line-height:1.0;letter-spacing:-0.02em;color:var(--c-white);text-wrap:balance}.apanel__desc[data-astro-cid-j7pv25f6]{display:block;margin-top:0.7rem;max-width:42ch;color:rgba(255,255,255,0.82);font-family:var(--font-body);font-size:1rem;line-height:var(--lh-normal)}.apanel__go[data-astro-cid-j7pv25f6]{display:inline-flex;align-items:center;gap:0.5rem;margin-top:var(--s-4);font-family:var(--font-body);font-weight:700;font-size:0.95rem;color:var(--c-white)}.apanel__go[data-astro-cid-j7pv25f6] svg[data-astro-cid-j7pv25f6]{transition:transform var(--d-base) var(--ease-out)}.apanel[data-astro-cid-j7pv25f6]:hover .apanel__go[data-astro-cid-j7pv25f6] svg[data-astro-cid-j7pv25f6]{transform:translateX(5px)}.apanel[data-astro-cid-j7pv25f6]:focus-visible{outline:3px solid var(--c-brand);outline-offset:-3px}@media (max-width: 760px){.acc[data-astro-cid-j7pv25f6]{flex-direction:column;height:auto;gap:var(--s-4)}.apanel[data-astro-cid-j7pv25f6]{flex:none;aspect-ratio:16 / 11}.apanel__img[data-astro-cid-j7pv25f6]{transform:none!important}.apanel__v[data-astro-cid-j7pv25f6]{display:none}.apanel__h[data-astro-cid-j7pv25f6]{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.apanel[data-astro-cid-j7pv25f6],.apanel__img[data-astro-cid-j7pv25f6],.apanel__h[data-astro-cid-j7pv25f6],.apanel__v[data-astro-cid-j7pv25f6],.apanel__veil[data-astro-cid-j7pv25f6]{transition:none}}.flow__head[data-astro-cid-j7pv25f6]{color:var(--c-petrol);font-size:var(--t-headline);max-width:18ch;margin-bottom:clamp(var(--s-7),5vw,var(--s-8))}.flow__steps[data-astro-cid-j7pv25f6]{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);position:relative}.flow__steps[data-astro-cid-j7pv25f6]::before{content:"";position:absolute;top:28px;left:calc(12.5%);right:calc(12.5%);height:2px;background:var(--c-line)}.flow__step[data-astro-cid-j7pv25f6]{position:relative;display:flex;flex-direction:column}.flow__num[data-astro-cid-j7pv25f6]{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--c-action);color:var(--c-white);font-family:var(--font-display);font-weight:800;font-size:1.35rem;margin-bottom:var(--s-4);position:relative;z-index:1;box-shadow:0 8px 20px -8px rgba(0,105,255,0.5)}.flow__title[data-astro-cid-j7pv25f6]{color:var(--c-petrol);font-size:1.2rem}.flow__text[data-astro-cid-j7pv25f6]{color:var(--c-ink-soft);font-size:var(--t-small);line-height:var(--lh-normal);margin-top:var(--s-2);max-width:26ch}.proof__head[data-astro-cid-j7pv25f6]{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;margin-bottom:clamp(var(--s-6),4vw,var(--s-7))}.proof__head[data-astro-cid-j7pv25f6] h2[data-astro-cid-j7pv25f6]{font-size:var(--t-headline)}.proof__grid[data-astro-cid-j7pv25f6]{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(130px,15vw,190px);gap:clamp(var(--s-3),1.4vw,var(--s-4))}.gtile[data-astro-cid-j7pv25f6]{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-md);grid-column:span 4;grid-row:span 1;box-shadow:var(--shadow-soft)}.gtile[data-astro-cid-j7pv25f6]:nth-child(2),.gtile[data-astro-cid-j7pv25f6]:nth-child(3){grid-column:span 6}.gtile--feature[data-astro-cid-j7pv25f6]{grid-column:span 6;grid-row:span 2}.gtile[data-astro-cid-j7pv25f6] img[data-astro-cid-j7pv25f6]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--ease-out)}.gtile[data-astro-cid-j7pv25f6]:hover img[data-astro-cid-j7pv25f6]{transform:scale(1.05)}.gtile[data-astro-cid-j7pv25f6] figcaption[data-astro-cid-j7pv25f6]{position:absolute;inset:auto 0 0 0;padding:var(--s-5) var(--s-4) var(--s-3);font-family:var(--font-body);font-size:0.85rem;font-weight:600;color:var(--c-white);background:linear-gradient(0deg,rgba(13,33,38,0.78) 0%,transparent 100%)}.reviews__inner[data-astro-cid-j7pv25f6]{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(var(--s-6),5vw,var(--s-8));align-items:center}.reviews__main[data-astro-cid-j7pv25f6]{position:relative}.reviews__quote[data-astro-cid-j7pv25f6]{position:absolute;top:-0.55em;left:-0.1em;font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,12vw,9rem);line-height:1;color:var(--c-brand);opacity:0.35;pointer-events:none}.reviews__featured[data-astro-cid-j7pv25f6]{margin:0;position:relative}.reviews__featured[data-astro-cid-j7pv25f6] p[data-astro-cid-j7pv25f6]{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1rem + 1.6vw,2.1rem);line-height:1.22;letter-spacing:-0.01em;color:var(--c-petrol)}.reviews__featured[data-astro-cid-j7pv25f6] footer[data-astro-cid-j7pv25f6]{margin-top:var(--s-4);font-size:1rem;color:var(--c-ink-soft)}.reviews__featured[data-astro-cid-j7pv25f6] strong[data-astro-cid-j7pv25f6]{color:var(--c-petrol)}.reviews__badge[data-astro-cid-j7pv25f6]{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);font-size:0.95rem;color:var(--c-ink-soft)}.reviews__stars[data-astro-cid-j7pv25f6]{color:var(--c-star);font-size:1.15rem;letter-spacing:0.06em}.reviews__badge[data-astro-cid-j7pv25f6] strong[data-astro-cid-j7pv25f6]{color:var(--c-petrol)}.reviews__side[data-astro-cid-j7pv25f6]{display:flex;flex-direction:column;gap:var(--s-5)}.reviews__small[data-astro-cid-j7pv25f6]{margin:0}.reviews__side[data-astro-cid-j7pv25f6] .reviews__small[data-astro-cid-j7pv25f6]+.reviews__small[data-astro-cid-j7pv25f6]{border-top:1px solid var(--c-line);padding-top:var(--s-5)}.reviews__small-stars[data-astro-cid-j7pv25f6]{display:block;color:var(--c-star);font-size:0.95rem;letter-spacing:0.06em;margin-bottom:var(--s-2)}.reviews__small[data-astro-cid-j7pv25f6] p[data-astro-cid-j7pv25f6]{color:var(--c-ink);line-height:var(--lh-normal)}.reviews__small[data-astro-cid-j7pv25f6] footer[data-astro-cid-j7pv25f6]{margin-top:var(--s-2);font-weight:700;font-size:0.9rem;color:var(--c-petrol)}.gebied__inner[data-astro-cid-j7pv25f6]{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(var(--s-6),5vw,var(--s-8));align-items:center}.gebied__lead[data-astro-cid-j7pv25f6] h2[data-astro-cid-j7pv25f6]{font-size:var(--t-headline)}.gebied__lead[data-astro-cid-j7pv25f6] p[data-astro-cid-j7pv25f6]{margin-top:var(--s-3);color:var(--c-ink-soft);max-width:36ch}.gebied__places[data-astro-cid-j7pv25f6]{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-3)}.gebied__places[data-astro-cid-j7pv25f6] li[data-astro-cid-j7pv25f6]{font-family:var(--font-body);font-weight:600;font-size:0.95rem;color:var(--c-petrol);background:var(--c-card);border:1px solid var(--c-line);border-radius:999px;padding:0.5rem 1rem}@media (max-width: 860px){.intro__inner[data-astro-cid-j7pv25f6]{grid-template-columns:1fr;gap:var(--s-6)}.flow__steps[data-astro-cid-j7pv25f6]{grid-template-columns:1fr 1fr}.flow__steps[data-astro-cid-j7pv25f6]::before{display:none}.reviews__inner[data-astro-cid-j7pv25f6]{grid-template-columns:1fr}.gebied__inner[data-astro-cid-j7pv25f6]{grid-template-columns:1fr;gap:var(--s-5)}}@media (max-width: 620px){.flow__steps[data-astro-cid-j7pv25f6]{grid-template-columns:1fr}.proof__grid[data-astro-cid-j7pv25f6]{grid-template-columns:1fr 1fr;grid-auto-rows:42vw}.gtile[data-astro-cid-j7pv25f6],.gtile[data-astro-cid-j7pv25f6]:nth-child(2),.gtile[data-astro-cid-j7pv25f6]:nth-child(3),.gtile--feature[data-astro-cid-j7pv25f6]{grid-column:span 1;grid-row:span 1}}</style><script type="module" src="/@vite/client"></script>
<script type="module" src="/src/styles/tokens.css"></script>
<script type="module" src="/src/layouts/Base.astro?astro&type=style&index=0&lang.css"></script>
<script type="module" src="/src/components/Hero.astro?astro&type=style&index=0&lang.css"></script>
<script type="module" src="/src/pages/index.astro?astro&type=style&index=0&lang.css"></script></head> <body> <a href="#main" class="skip-link">Naar de inhoud</a> <header class="header header--over-hero" id="siteHeader"> <div class="header__inner wrap"> <a href="/" class="brand" aria-label="Helvoirt Gevelreiniging, naar de homepagina"> <span class="brand__mark" aria-hidden="true"> <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="34" height="34" rx="8" fill="currentColor"></rect> <path d="M17 7s-6 7-6 11a6 6 0 0 0 12 0c0-4-6-11-6-11z" fill="#fff"></path> </svg> </span> <span class="brand__text"> <span class="brand__name">Helvoirt</span> <span class="brand__sub">Gevelreiniging</span> </span> </a> <nav class="nav-desktop" aria-label="Hoofdmenu"> <ul> <li class="nav-item has-submenu"> <a href="/diensten" class="nav-link nav-link--parent"> Diensten <svg class="nav-caret" width="11" height="7" viewBox="0 0 12 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 1.5 L6 6.5 L11 1.5"></path></svg> </a> <ul class="submenu"> <li><a href="/diensten/gevelreiniging" class="submenu__link">Gevelreiniging + renovatie</a></li><li><a href="/diensten/voegwerk" class="submenu__link">Voegwerkzaamheden</a></li><li><a href="/diensten/dakreiniging-coating" class="submenu__link">Dak reinigen + coating</a></li><li><a href="/diensten/schoorsteen-voegwerk" class="submenu__link">Schoorsteen voegwerk</a></li><li><a href="/diensten/algemeen-reinigen" class="submenu__link">Algemeen reinigen</a></li> </ul> </li><li class="nav-item"> <a href="/projecten" class="nav-link">Projecten</a> </li><li class="nav-item"> <a href="/over-ons" class="nav-link">Over ons</a> </li><li class="nav-item"> <a href="/contact" class="nav-link">Contact</a> </li> </ul> </nav> <div class="header__actions"> <a href="tel:+31851301010" class="header__phone" aria-label="Bel 085 130 1010"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path> </svg> <span class="header__phone-num">085 130 1010</span> </a> <a href="/contact" class="btn-cta header__cta"> <span>Gratis offerte</span> <svg width="14" height="12" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 8 L22 8 M16 2 L22 8 L16 14"></path></svg> </a> <button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false" aria-controls="mobileDrawer"> <span></span><span></span><span></span> </button> </div> </div> </header> <div class="drawer" id="mobileDrawer" hidden> <nav class="drawer__nav" aria-label="Mobiel menu"> <ul> <li> <a href="/diensten">Diensten</a> <ul class="drawer__submenu"> <li><a href="/diensten/gevelreiniging">Gevelreiniging + renovatie</a></li><li><a href="/diensten/voegwerk">Voegwerkzaamheden</a></li><li><a href="/diensten/dakreiniging-coating">Dak reinigen + coating</a></li><li><a href="/diensten/schoorsteen-voegwerk">Schoorsteen voegwerk</a></li><li><a href="/diensten/algemeen-reinigen">Algemeen reinigen</a></li> </ul> </li><li> <a href="/projecten">Projecten</a> </li><li> <a href="/over-ons">Over ons</a> </li><li> <a href="/contact">Contact</a> </li> </ul> </nav> <a href="/contact" class="btn-cta drawer__cta">
Gratis offerte aanvragen
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> <div class="drawer__contact"> <a href="tel:+31851301010">085 130 1010</a> <a href="mailto:info@helvoirtgevelreiniging.nl">info@helvoirtgevelreiniging.nl</a> </div> </div> <main id="main"> <section class="hero" data-astro-cid-bbe6dxrz> <div class="ba" data-ba aria-label="Voor en na: sleep om te vergelijken" data-astro-cid-bbe6dxrz> <img class="ba__img" src="/images/hero-after.webp" srcset="/images/hero-after-768.webp 768w, /images/hero-after-1280.webp 1280w, /images/hero-after-1920.webp 1920w, /images/hero-after.webp 2752w" sizes="100vw" alt="Hetzelfde herenhuis na reiniging, met strakke schone gevel in de zon" width="1600" height="893" fetchpriority="high" decoding="async" data-astro-cid-bbe6dxrz> <div class="ba__before" data-astro-cid-bbe6dxrz> <img class="ba__img" src="/images/hero-before.webp" srcset="/images/hero-before-768.webp 768w, /images/hero-before-1280.webp 1280w, /images/hero-before-1920.webp 1920w, /images/hero-before.webp 2752w" sizes="100vw" alt="Bakstenen herenhuis met jaren aanslag en groene vervuiling op de gevel" width="1600" height="893" fetchpriority="low" decoding="async" data-astro-cid-bbe6dxrz> </div> <span class="ba__tag ba__tag--before" aria-hidden="true" data-astro-cid-bbe6dxrz>Voor</span> <span class="ba__tag ba__tag--after" aria-hidden="true" data-astro-cid-bbe6dxrz>Na</span> <button type="button" class="ba__handle" role="slider" aria-label="Vergelijk voor en na" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" data-astro-cid-bbe6dxrz> <span class="ba__knob" aria-hidden="true" data-astro-cid-bbe6dxrz> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-bbe6dxrz><path d="M9 6 4 12l5 6M15 6l5 6-5 6" data-astro-cid-bbe6dxrz></path></svg> </span> </button> </div> <div class="hero__scrim" aria-hidden="true" data-astro-cid-bbe6dxrz></div> <div class="wrap hero__inner" data-astro-cid-bbe6dxrz> <div class="hero__content" data-astro-cid-bbe6dxrz> <h1 class="hero__title" data-astro-cid-bbe6dxrz>Weer trots op je gevel.</h1> <p class="hero__sub" data-astro-cid-bbe6dxrz>We halen jaren aanslag, groen en vuil weg en herstellen voegwerk, dak en schoorsteen. Sleep de balk en zie het verschil.</p> <div class="hero__cta" data-astro-cid-bbe6dxrz> <a href="/contact" class="btn-cta hero__cta-primary" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Gratis offerte</span> <svg width="16" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-bbe6dxrz><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-bbe6dxrz></path></svg> </a> <a href="/diensten" class="hero__cta-secondary" data-astro-cid-bbe6dxrz>Bekijk wat we doen</a> </div> </div> <ul class="hero__trust" data-astro-cid-bbe6dxrz> <li data-astro-cid-bbe6dxrz><strong data-astro-cid-bbe6dxrz>4,9</strong><span data-astro-cid-bbe6dxrz>Google-beoordeling</span></li> <li data-astro-cid-bbe6dxrz><strong data-astro-cid-bbe6dxrz>Helvoirt e.o.</strong><span data-astro-cid-bbe6dxrz>en omgeving</span></li> <li data-astro-cid-bbe6dxrz><strong data-astro-cid-bbe6dxrz>Gratis</strong><span data-astro-cid-bbe6dxrz>offerte aan huis</span></li> </ul> </div> </section> <script type="module" src="/@id/C:/projects/dewebsmid/helvoirt/src/components/Hero.astro?astro&type=script&index=0&lang.ts"></script> <section class="section intro section--paper" data-astro-cid-j7pv25f6> <div class="wrap intro__inner" data-astro-cid-j7pv25f6> <p class="intro__statement" data-astro-cid-j7pv25f6>
Schoon, strak en vakkundig. Dat is waar Helvoirt Gevelreiniging voor staat.
</p> <div class="intro__aside" data-astro-cid-j7pv25f6> <p data-astro-cid-j7pv25f6>
Of het nu om een hele gevel gaat of om één schoorsteen: we komen langs, denken mee en
leveren werk waar je trots op bent. Voor particulieren en bedrijven in Helvoirt en omgeving.
</p> <ul class="intro__facts" data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6><strong data-astro-cid-j7pv25f6>Particulier &amp; zakelijk</strong><span data-astro-cid-j7pv25f6>van woning tot VvE</span></li> <li data-astro-cid-j7pv25f6><strong data-astro-cid-j7pv25f6>Eerlijke prijs</strong><span data-astro-cid-j7pv25f6>vooraf op papier</span></li> <li data-astro-cid-j7pv25f6><strong data-astro-cid-j7pv25f6>Netjes werken</strong><span data-astro-cid-j7pv25f6>schoon opgeleverd</span></li> </ul> </div> </div> </section> <section class="section svc section--petrol-deep" aria-labelledby="diensten-h" data-astro-cid-j7pv25f6> <div class="wrap" data-astro-cid-j7pv25f6> <div class="svc__head" data-astro-cid-j7pv25f6> <p class="svc__kicker" data-astro-cid-j7pv25f6>Onze diensten</p> <h2 id="diensten-h" data-astro-cid-j7pv25f6>Vakwerk voor je hele buitenkant</h2> </div> <div class="acc" data-acc data-astro-cid-j7pv25f6> <a class="apanel is-open" href="/diensten/gevelreiniging" data-i="0" data-astro-cid-j7pv25f6> <img class="apanel__img" src="/images/dienst-gevelreiniging.webp" srcset="/images/dienst-gevelreiniging-768.webp 768w, /images/dienst-gevelreiniging-1280.webp 1280w, /images/dienst-gevelreiniging-1920.webp 1920w, /images/dienst-gevelreiniging.webp 2400w" sizes="(min-width: 760px) 60vw, 100vw" alt="Bakstenen gevel half gereinigd: links nog vuil, rechts weer schoon" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <span class="apanel__veil" aria-hidden="true" data-astro-cid-j7pv25f6></span> <span class="apanel__num" data-astro-cid-j7pv25f6>01</span> <span class="apanel__v" aria-hidden="true" data-astro-cid-j7pv25f6>Gevelreiniging + renovatie</span> <span class="apanel__h" data-astro-cid-j7pv25f6> <span class="apanel__title" data-astro-cid-j7pv25f6>Gevelreiniging + renovatie</span> <span class="apanel__desc" data-astro-cid-j7pv25f6>Jaren aanslag, groene vervuiling en vuil weg, en waar nodig herstel. De gevel staat er weer strak en verzorgd bij, zonder schade aan de steen.</span> <span class="apanel__go" data-astro-cid-j7pv25f6>Bekijk<svg width="22" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-j7pv25f6><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-j7pv25f6></path></svg></span> </span> </a><a class="apanel" href="/diensten/voegwerk" data-i="1" data-astro-cid-j7pv25f6> <img class="apanel__img" src="/images/dienst-voegwerk.webp" srcset="/images/dienst-voegwerk-768.webp 768w, /images/dienst-voegwerk-1280.webp 1280w, /images/dienst-voegwerk-1920.webp 1920w, /images/dienst-voegwerk.webp 2400w" sizes="(min-width: 760px) 60vw, 100vw" alt="Strak nieuw voegwerk tussen rode bakstenen" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <span class="apanel__veil" aria-hidden="true" data-astro-cid-j7pv25f6></span> <span class="apanel__num" data-astro-cid-j7pv25f6>02</span> <span class="apanel__v" aria-hidden="true" data-astro-cid-j7pv25f6>Voegwerkzaamheden</span> <span class="apanel__h" data-astro-cid-j7pv25f6> <span class="apanel__title" data-astro-cid-j7pv25f6>Voegwerkzaamheden</span> <span class="apanel__desc" data-astro-cid-j7pv25f6>Oud en kapot voegwerk uithakken en opnieuw voegen. Dat houdt de gevel waterdicht en netjes, in een kleur en stijl die bij het huis past.</span> <span class="apanel__go" data-astro-cid-j7pv25f6>Bekijk<svg width="22" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-j7pv25f6><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-j7pv25f6></path></svg></span> </span> </a><a class="apanel" href="/diensten/dakreiniging-coating" data-i="2" data-astro-cid-j7pv25f6> <img class="apanel__img" src="/images/dienst-dakreiniging.webp" srcset="/images/dienst-dakreiniging-768.webp 768w, /images/dienst-dakreiniging-1280.webp 1280w, /images/dienst-dakreiniging-1920.webp 1920w, /images/dienst-dakreiniging.webp 2400w" sizes="(min-width: 760px) 60vw, 100vw" alt="Schoon dakpannendak na reiniging en coating" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <span class="apanel__veil" aria-hidden="true" data-astro-cid-j7pv25f6></span> <span class="apanel__num" data-astro-cid-j7pv25f6>03</span> <span class="apanel__v" aria-hidden="true" data-astro-cid-j7pv25f6>Dak reinigen + coating</span> <span class="apanel__h" data-astro-cid-j7pv25f6> <span class="apanel__title" data-astro-cid-j7pv25f6>Dak reinigen + coating</span> <span class="apanel__desc" data-astro-cid-j7pv25f6>Mos en aanslag eraf, daarna een beschermende coating. Een schoon dak dat water beter afvoert en langer mooi en heel blijft.</span> <span class="apanel__go" data-astro-cid-j7pv25f6>Bekijk<svg width="22" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-j7pv25f6><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-j7pv25f6></path></svg></span> </span> </a><a class="apanel" href="/diensten/schoorsteen-voegwerk" data-i="3" data-astro-cid-j7pv25f6> <img class="apanel__img" src="/images/dienst-schoorsteen.webp" srcset="/images/dienst-schoorsteen-768.webp 768w, /images/dienst-schoorsteen-1280.webp 1280w, /images/dienst-schoorsteen-1920.webp 1920w, /images/dienst-schoorsteen.webp 2400w" sizes="(min-width: 760px) 60vw, 100vw" alt="Herstelde schoorsteen met nieuw voegwerk op een dak" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <span class="apanel__veil" aria-hidden="true" data-astro-cid-j7pv25f6></span> <span class="apanel__num" data-astro-cid-j7pv25f6>04</span> <span class="apanel__v" aria-hidden="true" data-astro-cid-j7pv25f6>Schoorsteen voegwerk</span> <span class="apanel__h" data-astro-cid-j7pv25f6> <span class="apanel__title" data-astro-cid-j7pv25f6>Schoorsteen voegwerk</span> <span class="apanel__desc" data-astro-cid-j7pv25f6>Voeg- en metselwerk aan de schoorsteen herstellen, zodat lekkage en verdere schade voorkomen worden. Vaak gecombineerd met het loodwerk.</span> <span class="apanel__go" data-astro-cid-j7pv25f6>Bekijk<svg width="22" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-j7pv25f6><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-j7pv25f6></path></svg></span> </span> </a><a class="apanel" href="/diensten/algemeen-reinigen" data-i="4" data-astro-cid-j7pv25f6> <img class="apanel__img" src="/images/dienst-algemeen.webp" srcset="/images/dienst-algemeen-768.webp 768w, /images/dienst-algemeen-1280.webp 1280w, /images/dienst-algemeen-1920.webp 1920w, /images/dienst-algemeen.webp 2400w" sizes="(min-width: 760px) 60vw, 100vw" alt="Terras en bestrating worden schoongespoten" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <span class="apanel__veil" aria-hidden="true" data-astro-cid-j7pv25f6></span> <span class="apanel__num" data-astro-cid-j7pv25f6>05</span> <span class="apanel__v" aria-hidden="true" data-astro-cid-j7pv25f6>Algemeen reinigen</span> <span class="apanel__h" data-astro-cid-j7pv25f6> <span class="apanel__title" data-astro-cid-j7pv25f6>Algemeen reinigen</span> <span class="apanel__desc" data-astro-cid-j7pv25f6>Terras, oprit, bestrating en ander buitenwerk. We pakken het hele plaatje aan en maken de buitenkant van je huis weer fris.</span> <span class="apanel__go" data-astro-cid-j7pv25f6>Bekijk<svg width="22" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-j7pv25f6><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-j7pv25f6></path></svg></span> </span> </a> </div> </div> </section> <section class="section flow section--soft" aria-labelledby="flow-h" data-astro-cid-j7pv25f6> <div class="wrap" data-astro-cid-j7pv25f6> <h2 id="flow-h" class="flow__head" data-astro-cid-j7pv25f6>Van eerste belletje tot schoon opgeleverd</h2> <ol class="flow__steps" data-astro-cid-j7pv25f6> <li class="flow__step reveal" data-delay="1" data-astro-cid-j7pv25f6> <span class="flow__num" data-astro-cid-j7pv25f6>1</span> <h3 class="flow__title" data-astro-cid-j7pv25f6>Bellen of mailen</h3> <p class="flow__text" data-astro-cid-j7pv25f6>Je vraagt een gratis offerte aan. Vertel kort om welk werk het gaat.</p> </li><li class="flow__step reveal" data-delay="2" data-astro-cid-j7pv25f6> <span class="flow__num" data-astro-cid-j7pv25f6>2</span> <h3 class="flow__title" data-astro-cid-j7pv25f6>We komen kijken</h3> <p class="flow__text" data-astro-cid-j7pv25f6>We bekijken het werk ter plekke, meten op en denken met je mee.</p> </li><li class="flow__step reveal" data-delay="3" data-astro-cid-j7pv25f6> <span class="flow__num" data-astro-cid-j7pv25f6>3</span> <h3 class="flow__title" data-astro-cid-j7pv25f6>Heldere offerte</h3> <p class="flow__text" data-astro-cid-j7pv25f6>Je krijgt een duidelijke prijs op papier. Geen verrassingen achteraf.</p> </li><li class="flow__step reveal" data-delay="4" data-astro-cid-j7pv25f6> <span class="flow__num" data-astro-cid-j7pv25f6>4</span> <h3 class="flow__title" data-astro-cid-j7pv25f6>Schoon opgeleverd</h3> <p class="flow__text" data-astro-cid-j7pv25f6>We voeren het netjes uit, ruimen op en lopen het samen na.</p> </li> </ol> </div> </section> <section class="section proof section--paper" aria-labelledby="proof-h" data-astro-cid-j7pv25f6> <div class="wrap" data-astro-cid-j7pv25f6> <div class="proof__head" data-astro-cid-j7pv25f6> <h2 id="proof-h" data-astro-cid-j7pv25f6>Echt werk, echte resultaten</h2> <a href="/projecten" class="btn-text" data-astro-cid-j7pv25f6>Alle projecten<svg width="15" height="12" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-j7pv25f6><path d="M1 8 L22 8 M16 2 L22 8 L16 14" data-astro-cid-j7pv25f6></path></svg></a> </div> <div class="proof__grid" data-astro-cid-j7pv25f6> <figure class="gtile reveal gtile--feature" data-astro-cid-j7pv25f6> <img src="/images/werk-3.webp" alt="Voegwerk aan de gevel" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <figcaption data-astro-cid-j7pv25f6>Voegwerk aan de gevel</figcaption> </figure><figure class="gtile reveal" data-astro-cid-j7pv25f6> <img src="/images/werk-1.webp" alt="Schoorsteen met nieuw loodwerk" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <figcaption data-astro-cid-j7pv25f6>Schoorsteen met nieuw loodwerk</figcaption> </figure><figure class="gtile reveal" data-astro-cid-j7pv25f6> <img src="/images/werk-4.webp" alt="Dak vol mos, voor reiniging" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <figcaption data-astro-cid-j7pv25f6>Dak vol mos, voor reiniging</figcaption> </figure><figure class="gtile reveal" data-astro-cid-j7pv25f6> <img src="/images/werk-2.webp" alt="Tuinmuur en bestrating" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <figcaption data-astro-cid-j7pv25f6>Tuinmuur en bestrating</figcaption> </figure><figure class="gtile reveal" data-astro-cid-j7pv25f6> <img src="/images/werk-5.webp" alt="Dakreiniging op hoogte" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <figcaption data-astro-cid-j7pv25f6>Dakreiniging op hoogte</figcaption> </figure><figure class="gtile reveal" data-astro-cid-j7pv25f6> <img src="/images/werk-6.webp" alt="Metselwerk, tuintrap" loading="lazy" decoding="async" data-astro-cid-j7pv25f6> <figcaption data-astro-cid-j7pv25f6>Metselwerk, tuintrap</figcaption> </figure> </div> </div> </section> <section class="section reviews section--tint" aria-labelledby="rev-h" data-astro-cid-j7pv25f6> <div class="wrap reviews__inner" data-astro-cid-j7pv25f6> <div class="reviews__main reveal" data-astro-cid-j7pv25f6> <h2 id="rev-h" class="sr-only" data-astro-cid-j7pv25f6>Wat klanten zeggen</h2> <span class="reviews__quote" aria-hidden="true" data-astro-cid-j7pv25f6>&ldquo;</span> <blockquote class="reviews__featured" data-astro-cid-j7pv25f6> <p data-astro-cid-j7pv25f6>Onze gevel zat vol groene aanslag en ziet er nu weer als nieuw uit. Keurig gewerkt, alles netjes afgedekt en opgeruimd. Echt vakwerk.</p> <footer data-astro-cid-j7pv25f6><strong data-astro-cid-j7pv25f6>Familie Jansen</strong>, Helvoirt</footer> </blockquote> <div class="reviews__badge" data-astro-cid-j7pv25f6> <span class="reviews__stars" aria-hidden="true" data-astro-cid-j7pv25f6>★★★★★</span> <span data-astro-cid-j7pv25f6><strong data-astro-cid-j7pv25f6>4,9</strong> gemiddeld op Google</span> </div> </div> <div class="reviews__side" data-astro-cid-j7pv25f6> <blockquote class="reviews__small reveal" data-delay="1" data-astro-cid-j7pv25f6> <span class="reviews__small-stars" aria-hidden="true" data-astro-cid-j7pv25f6>★★★★★</span> <p data-astro-cid-j7pv25f6>Snel een eerlijke offerte gekregen en het voegwerk is prachtig geworden.</p> <footer data-astro-cid-j7pv25f6>Peter de Vries</footer> </blockquote><blockquote class="reviews__small reveal" data-delay="2" data-astro-cid-j7pv25f6> <span class="reviews__small-stars" aria-hidden="true" data-astro-cid-j7pv25f6>★★★★★</span> <p data-astro-cid-j7pv25f6>Dak laten reinigen en coaten. Goede communicatie en een mooi resultaat.</p> <footer data-astro-cid-j7pv25f6>M. Bakker</footer> </blockquote> </div> </div> </section> <section class="section gebied section--soft" aria-labelledby="gebied-h" data-astro-cid-j7pv25f6> <div class="wrap gebied__inner" data-astro-cid-j7pv25f6> <div class="gebied__lead" data-astro-cid-j7pv25f6> <h2 id="gebied-h" data-astro-cid-j7pv25f6>Werkzaam in Helvoirt en omgeving</h2> <p data-astro-cid-j7pv25f6>Staat jouw plaats er niet bij? Bel of mail gerust, vaak komen we er ook.</p> </div> <ul class="gebied__places" data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6>Helvoirt</li><li data-astro-cid-j7pv25f6>Vught</li><li data-astro-cid-j7pv25f6>&#39;s-Hertogenbosch</li><li data-astro-cid-j7pv25f6>Boxtel</li><li data-astro-cid-j7pv25f6>Oisterwijk</li><li data-astro-cid-j7pv25f6>Haaren</li><li data-astro-cid-j7pv25f6>Esch</li><li data-astro-cid-j7pv25f6>Sint-Michielsgestel</li><li data-astro-cid-j7pv25f6>Berlicum</li><li data-astro-cid-j7pv25f6>Udenhout</li><li data-astro-cid-j7pv25f6>Tilburg</li><li data-astro-cid-j7pv25f6>Cromvoirt</li> </ul> </div> </section> </main> <section class="prefooter" id="contact"> <div class="wrap prefooter__inner"> <div class="prefooter__lead reveal"> <p class="prefooter__eyebrow">Gratis en vrijblijvend</p> <h2>Vraag een offerte aan</h2> <p>Laat je gegevens achter, dan plannen we een moment om langs te komen en de gevel te bekijken. Je krijgt een heldere prijs, zonder verplichtingen.</p> <ul class="prefooter__contacts"> <li> <svg class="prefooter__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path> </svg> <a href="tel:+31851301010" class="prefooter__val">085 130 1010</a> </li> <li> <svg class="prefooter__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <a href="mailto:info@helvoirtgevelreiniging.nl" class="prefooter__val">info@helvoirtgevelreiniging.nl</a> </li> </ul> </div> <form class="cform reveal" data-delay="1" id="contactForm" method="post" action="/api/contact" novalidate> <div class="cform__row"> <label class="cform__field"> <span class="cform__lbl">Naam</span> <input id="cform-name" type="text" name="name" required autocomplete="name" maxlength="120" aria-describedby="err-name"> <span id="err-name" class="cform__error"></span> </label> <label class="cform__field"> <span class="cform__lbl">E-mail</span> <input id="cform-email" type="email" name="email" required autocomplete="email" maxlength="254" inputmode="email" aria-describedby="err-email"> <span id="err-email" class="cform__error"></span> </label> </div> <div class="cform__row"> <label class="cform__field"> <span class="cform__lbl">Telefoon</span> <input id="cform-phone" type="tel" name="phone" autocomplete="tel" maxlength="40" inputmode="tel" aria-describedby="err-phone"> <span id="err-phone" class="cform__error"></span> </label> <label class="cform__field"> <span class="cform__lbl">Waarvoor <em>(optioneel)</em></span> <select id="cform-dienst" name="dienst" class="cform__select"> <option value="">Kies een dienst…</option> <option value="Gevelreiniging + renovatie">Gevelreiniging + renovatie</option><option value="Voegwerkzaamheden">Voegwerkzaamheden</option><option value="Dak reinigen + coating">Dak reinigen + coating</option><option value="Schoorsteen voegwerk">Schoorsteen voegwerk</option><option value="Algemeen reinigen">Algemeen reinigen</option><option value="Anders / weet ik nog niet">Anders / weet ik nog niet</option> </select> </label> </div> <label class="cform__field"> <span class="cform__lbl">Bericht</span> <textarea id="cform-message" name="message" required rows="4" maxlength="4000" placeholder="Vertel kort om welk werk het gaat en op welk adres." aria-describedby="err-message"></textarea> <span id="err-message" class="cform__error"></span> </label> <div class="cform__honeypot" aria-hidden="true"> <label>Website (laat dit veld leeg)
<input type="text" name="website_url" tabindex="-1" autocomplete="off"> </label> </div> <input type="hidden" name="ts" value="1780498015147"> <div class="cform__actions"> <button type="submit" class="btn-cta cform__submit"> <span>Vraag offerte aan</span> <svg width="16" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M1 8 L22 8 M16 2 L22 8 L16 14"></path> </svg> </button> </div> <div class="cform__status" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"></div> </form> </div> </section> <footer class="footer"> <div class="wrap footer__inner"> <span class="footer__copy">© 2026 Helvoirt Gevelreiniging</span> <nav class="footer__nav" aria-label="Footer"> <a href="/privacy">Privacy</a> <a href="/voorwaarden">Voorwaarden</a> <a href="/sitemap.xml">Sitemap</a> </nav> <a href="https://dewebsmid.nl" target="_blank" rel="noopener" class="footer__credit">Webdesign door De Websmid</a> </div> </footer> <a href="/contact" class="btn-cta sticky-mobile-cta" id="stickyMobileCta">
Gratis offerte aanvragen
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> <script type="module" src="/@id/C:/projects/dewebsmid/helvoirt/src/layouts/Base.astro?astro&type=script&index=0&lang.ts"></script> </body> </html> <script type="module" src="/@id/C:/projects/dewebsmid/helvoirt/src/pages/index.astro?astro&type=script&index=0&lang.ts"></script>