Map: Init

This commit is contained in:
2026-02-22 20:06:00 +01:00
parent 69d47ea4dd
commit 75c2b3dfcd
22 changed files with 880 additions and 35 deletions

View File

@@ -0,0 +1,58 @@
const API_BASE = "https://maps.start-it.nl/api";
const TILE_BASE = "https://maps.start-it.nl";
const sources = {
osm: new ol.source.OSM(),
"pdok-luchtfoto": new ol.source.XYZ({
url: "https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_ortho25/EPSG:3857/{z}/{x}/{y}.jpeg"
}),
"pdok-grijs": new ol.source.XYZ({
url: "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/grijs/EPSG:3857/{z}/{x}/{y}.png"
})
};
const baseLayer = new ol.layer.Tile({ source: sources.osm });
const kavelLayer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: `${TILE_BASE}/public.perceel/{z}/{x}/{y}.pbf`
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({ color: 'rgba(185, 89, 19, 0.4)', width: 1 })
})
});
const map = new ol.Map({
target: 'map',
layers: [baseLayer, kavelLayer],
view: new ol.View({ center: ol.proj.fromLonLat([5.594, 52.285]), zoom: 16 })
});
document.getElementById('doSearch').addEventListener('click', async () => {
const pc = document.getElementById('pc').value.replace(/\s+/g, '');
const hn = document.getElementById('hn').value;
try {
const response = await fetch(`${API_BASE}/analyse?postcode=${pc}&huisnummer=${hn}`);
const data = await response.json();
if (data.results && data.results.length > 0) {
updateUI(data.results[0]);
zoomToResult(data.results[0]);
}
} catch (err) {
console.error("Fout bij ophalen data", err);
}
});
function updateUI(row) {
document.getElementById('placeholder-text').style.display = 'none';
document.getElementById('data-content').style.display = 'block';
document.getElementById('res-adres').innerText = row.adres;
document.getElementById('res-bouwjaar').innerText = row.hoofdgebouw_bouwjaar;
document.getElementById('res-kavel').innerText = row.kavel_m2 + " m²";
document.getElementById('res-bebouwd').innerText = row.bebouwd_m2 + " m²";
document.getElementById('res-max').innerText = row.max_mantelzorgwoning_m2 + " m²";
document.getElementById('res-omgevingswet').href = `https://omgevingswet.overheid.nl/regels-op-de-kaart/documenten?locatie=${encodeURIComponent(row.adres)}`;
}

View File

@@ -1,3 +1,13 @@
// Globals
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1520px
);
// Imports
@import "node_modules/bootstrap/scss/bootstrap";
@@ -42,7 +52,6 @@
src: url('/fonts/kantumruy-500.woff2') format('woff2');
}
@font-face {
font-family: 'Kantumruy Pro';
font-style: normal;
@@ -52,7 +61,7 @@
}
// Defaults
$van-emous-blue: #A8BBD5;
$van-emous-blue: #dce4ee;
$van-emous-orange: #b95913;
$nav-link-color: #212121;
$primary: $van-emous-orange;
@@ -65,6 +74,20 @@ $headings-font-family: $kantumruy-font;
$headings-font-weight: 500;
$headings-color: #212121;
.text-primary {
color: $van-emous-orange !important;
}
.bg-secondary {
background-color: $van-emous-blue !important;
}
body {
font-family: $font-family-sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class^="display-"] {
@@ -84,6 +107,22 @@ h2, .h2 {
margin-bottom: 1.25rem;
}
h6 {
font-size: 20px;
line-height: normal;
font-weight: 500;
letter-spacing: 0.4em;
color: darken($van-emous-blue, 40%) !important;
margin: 0;
padding-bottom: 20px;
display: block;
@media (max-width: 991px) {
font-size: 14px;
letter-spacing: 0.3em;
}
}
p {
font-family: $mukta-font;
font-size: 18px;
@@ -94,21 +133,45 @@ p {
padding-bottom: 20px;
}
.panel {
border-radius: 40px;
}
.bg-primary {
background: $van-emous-orange !important;
}
.bg-light {
background: #f0f1ec !important;
}
.bg-blue {
background: $van-emous-blue;
}
.bg-blue-dark {
background: #a8bbd5;
}
.footer-main {
border-radius: 100px 100px 0 0;
}
.lead {
font-weight: 400;
}
// Menu
.top-bar {
background-color: $van-emous-blue;
background-color: #a8bbd5;
font-size: 0.9rem;
color: white;
font-size:18px;
font-family: $mukta-font;
a { color: white; text-decoration: none; }
}
.navbar-nav .nav-link {
color: $nav-link-color;
font-weight: 500;
font-weight: 600;
&:hover { color: $van-emous-orange; }
}
@@ -122,7 +185,8 @@ p {
position: sticky !important;
top: 0 !important;
z-index: 1030 !important;
background-color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(4px);
}
@keyframes fadeIn {
@@ -143,13 +207,12 @@ p {
font-weight: 400;
color: #fff;
position: relative;
transition: all 0.2s ease-in-out; // Zorgt voor de vloeiende verschuiving
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
// Het '>' symbool (onzichtbaar in ruststand)
&::before {
content: "\F285"; // Bootstrap Icons code voor 'chevron-right'
content: "\F285";
font-family: "bootstrap-icons";
position: absolute;
left: 0.5rem;
@@ -161,11 +224,11 @@ p {
&:hover {
background-color: $van-emous-orange;
color: #fff;
padding-left: 2.2rem; // Schuift de tekst naar rechts om ruimte te maken voor >
padding-left: 2.2rem;
&::before {
opacity: 1;
left: 1.2rem; // Laat het symbool subtiel 'invliegen'
left: 1.2rem;
}
}
@@ -207,6 +270,22 @@ p {
}
}
.hero-image-dynamic {
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
min-height: 400px;
@media (min-width: 992px) {
min-height: 600px;
aspect-ratio: 21 / 9;
}
}
// Buttons
.btn-cta {
display: inline-block;
@@ -254,4 +333,162 @@ p {
display: flex;
justify-content: flex-end;
}
}
// Hero
.hero-rounded-img {
border-radius: 40px;
width: 100%;
height: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
image-rendering: -webkit-optimize-contrast;
}
.hero-image-container {
position: relative;
overflow: hidden;
animation: imageReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes imageReveal {
from {
opacity: 0;
transform: translateY(30px) scale(1.02);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.hero-rounded-img {
border-radius: 20px;
}
}
// USPS
.usp-bar {
.usp-item {
.usp-text {
font-family: $mukta-font;
font-size: 18px;
font-weight: 500;
color: #1a1a1a;
white-space: nowrap;
}
svg {
flex-shrink: 0;
}
}
@media (max-width: 991px) {
.row {
flex-direction: column;
align-items: flex-start;
padding-left: 1rem;
}
}
}
.modellen-sectie {
.model-card {
min-height: 480px;
border: none;
background-color: #fff;
&:hover .model-card-bg {
transform: scale(1.05);
}
}
.model-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1;
}
.model-card-overlay {
position: relative;
height: 100%;
width: 100%;
z-index: 2;
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
}
.price-badge {
background: rgba(255, 255, 255, 0.95);
display: inline-block;
padding: 10px 20px;
border-radius: 15px;
color: #1a1a1a;
align-self: flex-start;
span:first-child {
color: $van-emous-orange;
font-size: 0.7rem;
letter-spacing: 0.1em;
}
}
.model-info {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
}
// Map
#col-map {
transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#col-results {
opacity: 0;
transform: translateX(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
display: none;
}
#col-results.animate-in {
display: block !important;
opacity: 1 !important;
transform: translateX(0) !important;
}
// Footer
.footer-main {
.footer-inner {
border-radius: 60px 60px 0 0;
background-color: #e2eaf0 !important;
}
.icon-circle {
width: 45px;
height: 45px;
background-color: $van-emous-orange;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.form-control {
box-shadow: none;
&::placeholder {
color: #adb5bd;
}
}
a:hover {
color: $van-emous-orange !important;
}
}

View File

@@ -1,8 +1,28 @@
---
title: "Home"
hero:
title: "Zorgzame woonoplossingen met comfort en maatwerk"
subtitle: "Van Emous Mantelzorgwoningen begeleidt u persoonlijk bij het realiseren van een mantelzorgwoning, van kennismaking tot oplevering."
cta_text: "Adviesgesprek aanvragen"
cta_link: "/contact"
---
image: "/img/banner/home.jpg"
image_alt: "Senioren die genieten van hun nieuwe mantelzorgwoning"
usps:
- "Vrijblijvende offerte"
- "Persoonlijke begeleiding"
- "Volledige ontzorging"
- "Woningen van hoge kwaliteit"
- "Project snel van start"
info_section:
eyebrow: "Uw mantelzorgwoning begint hier"
title: "Moderne mantelzorgwoningen voor elke levensfase"
text_paragraphs:
- "Een mantelzorgwoning biedt u de mogelijkheid om dichtbij elkaar te wonen, met behoud van privacy en comfort. Van Emous Mantelzorgwoningen realiseert moderne mantelzorgwoningen die volledig worden afgestemd op uw wensen, situatie en toekomst."
- "Wij begeleiden u persoonlijk bij elke stap: van advies en vergunningscheck tot ontwerp, bouw en oplevering. Met oog voor kwaliteit, rust en duidelijkheid zorgen wij voor een zorgzame woonoplossing waar u op kunt vertrouwen."
image: "/img/general/brochure.jpg"
image_alt: "Van Emous brochure op een stoel"
---

View File

@@ -0,0 +1,9 @@
---
title: "Model Alfa"
subtitle: "Compact en comfortabel"
price: 89000
image: "/img/modellen/model-001.jpg"
featured: true
weight: 1
---
Dit model is speciaal ontworpen voor kleinere tuinen zonder in te leveren op luxe.

View File

@@ -0,0 +1,9 @@
---
title: "Model Beta"
subtitle: "Compact en comfortabel"
price: 89000
image: "/img/modellen/model-002.jpg"
featured: true
weight: 1
---
Dit model is speciaal ontworpen voor kleinere tuinen zonder in te leveren op luxe.

View File

@@ -0,0 +1,9 @@
---
title: "Model Gamma"
subtitle: "Compact en comfortabel"
price: 89000
image: "/img/modellen/model-003.jpg"
featured: true
weight: 1
---
Dit model is speciaal ontworpen voor kleinere tuinen zonder in te leveren op luxe.

View File

@@ -52,6 +52,16 @@ title = 'Van Emous Mantelzorgwoningen'
url = "/contact/"
weight = 50
[[menus.footer]]
name = "Modellen"
url = "/modellen"
weight = 1
[[menus.footer]]
name = "Pre mantelzorgwoning"
url = "/pre-mantelzorgwoning"
weight = 2
## Params
[params]
description = "Van Emous bouwt hoogwaardige mantelzorgwoningen op maat."

View File

@@ -2,68 +2,147 @@
"htmlElements": {
"tags": [
"a",
"article",
"body",
"button",
"div",
"footer",
"form",
"h1",
"h2",
"h3",
"h5",
"h6",
"head",
"header",
"hr",
"html",
"i",
"img",
"input",
"label",
"li",
"link",
"main",
"meta",
"nav",
"option",
"p",
"path",
"script",
"section",
"select",
"span",
"strong",
"svg",
"title",
"ul"
],
"classes": [
"align-items-center",
"align-items-end",
"align-middle",
"bg-light",
"bg-secondary",
"bg-white",
"bi",
"bi-chevron-right",
"bi-envelope",
"bi-envelope-fill",
"bi-geo-alt-fill",
"bi-house-door-fill",
"bi-telephone",
"bi-telephone-fill",
"border-0",
"brochure-form",
"btn",
"btn-cta",
"col-12",
"col-6",
"col-auto",
"col-lg-3",
"col-lg-4",
"col-lg-5",
"col-lg-6",
"col-lg-7",
"col-md-4",
"col-md-5",
"col-md-6",
"col-md-8",
"collapse",
"contact-info",
"container",
"content",
"cta-wrapper",
"d-block",
"d-flex",
"d-md-block",
"d-lg-block",
"d-lg-inline-block",
"d-lg-none",
"d-none",
"display-3",
"display-4",
"display-5",
"dropdown",
"dropdown-item",
"dropdown-menu",
"dropdown-toggle",
"flex-column",
"flex-nowrap",
"footer-inner",
"footer-main",
"form-check",
"form-check-input",
"form-check-label",
"form-control",
"form-select",
"fs-6",
"fw-bold",
"g-3",
"g-4",
"g-5",
"g-lg-4",
"google-reviews",
"h-100",
"h4",
"h5",
"h6",
"hero-image-dynamic",
"hero-rounded-img",
"hero-section",
"icon-circle",
"img-fluid",
"info-content",
"info-image-wrapper",
"info-section",
"justify-content-between",
"justify-content-center",
"justify-content-end",
"lead",
"lead-text",
"list-unstyled",
"mb-0",
"mb-1",
"mb-2",
"mb-3",
"mb-4",
"mb-5",
"mb-lg-5",
"me-1",
"me-2",
"me-3",
"ms-2",
"me-lg-5",
"model-card",
"model-card-bg",
"model-card-overlay",
"model-info",
"modellen-sectie",
"ms-1",
"ms-auto",
"ms-lg-3",
"mt-3",
"mt-4",
"mt-5",
"mt-auto",
"mt-lg-5",
"mx-auto",
"mx-lg-5",
"my-5",
"my-lg-5",
"nav-item",
@@ -77,21 +156,72 @@
"navbar-toggler",
"navbar-toggler-icon",
"offset-lg-1",
"opacity-10",
"overflow-hidden",
"p-4",
"p-5",
"panel",
"pb-3",
"pb-lg-5",
"pe-lg-5",
"position-relative",
"price-badge",
"ps-lg-5",
"pt-5",
"px-3",
"px-4",
"px-lg-4",
"px-lg-5",
"py-2",
"py-3",
"py-5",
"py-lg-4",
"rounded-pill",
"row",
"shadow-sm",
"small",
"sticky-top",
"stretched-link",
"text-center",
"text-dark",
"text-decoration-none",
"text-md-end",
"text-muted",
"text-primary",
"text-secondary",
"text-uppercase",
"text-warning",
"text-white",
"top-bar"
"text-white-50",
"top-bar",
"tracking-widest",
"usp-bar",
"usp-item",
"usp-text",
"w-100"
],
"ids": [
"btnSearch",
"col-map",
"col-results",
"f-aanhef",
"f-achternaam",
"f-email",
"f-telefoon",
"form-success",
"hn-input",
"lead-form",
"map",
"navbarDropdownmantelzorgwoningen",
"navbarNav"
"navbarNav",
"panel",
"pc-input",
"privacyCheck",
"res-bouwjaar",
"res-kavelformaat",
"res-kavelnummer",
"res-kavelvrij",
"res-max"
]
}
}

View File

@@ -1,9 +1,52 @@
{{ define "main" }}
{{ partial "hero.html" . }}
{{ partial "usps.html" . }}
{{ if .Params.info_section }}
<section class="info-section py-5 my-lg-5 mx-lg-5">
<div class="container px-lg-5">
<div class="row align-items-center g-5">
<div class="col-lg-5 pe-lg-5">
<div class="info-image-wrapper">
{{ with .Params.info_section.image }}
<img src="{{ . | relURL }}"
alt="{{ $.Params.info_section.image_alt | default "Van Emous Mantelzorgwoningen" }}"
class="img-fluid hero-rounded-img shadow-sm">
{{ end }}
</div>
</div>
<div class="container my-5">
<div class="col-lg-7 ps-lg-5">
{{ with .Params.info_section.eyebrow }}
<span class="h6 tracking-widest text-secondary mb-3 d-block">
{{ . }}
</span>
{{ end }}
<h2 class="display-5 mb-4">
{{ .Params.info_section.title }}
</h2>
<div class="info-content">
{{ range .Params.info_section.text_paragraphs }}
<p class="lead-text mb-4 text-muted">
{{ . | markdownify }}
</p>
{{ end }}
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ if .Content }}
<div class="container my-5 px-lg-10">
{{ .Content }}
</div>
{{ end }}
{{ partial "modellen.html" . }}
{{ partial "map.html" . }}
{{ end }}

View File

@@ -1,4 +1,78 @@
{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }} {{/* Gebruik de NIET-minified versie als bron */}}
<footer class="footer-main mt-5 bg-secondary">
<div class="footer-inner pt-5 pb-3">
<div class="container px-lg-5">
<div class="row">
<div class="col-lg-4">
<img src="/img/logo-box.svg" alt="Van Emous Logo" class="mb-4 pb-lg-5" style="height: 240px;max-width:100%;">
<h5 class="fw-bold mb-3">Gratis brochure aanvragen</h5>
<form action="#" class="brochure-form">
<div class="mb-3">
<input type="email" class="form-control rounded-pill border-0 px-4 py-2" placeholder="Vul uw emailadres in">
</div>
<div class="form-check mb-3 small text-muted">
<input class="form-check-input" type="checkbox" id="privacyCheck">
<label class="form-check-label" for="privacyCheck">
Ik ga akkoord met het privacybeleid.
</label>
</div>
<button type="submit" class="btn btn-cta">Aanvragen</button>
</form>
</div>
<div class="col-6 col-lg-3 offset-lg-1">
<h5 class="fw-bold mb-4">Navigatie</h5>
<ul class="list-unstyled">
{{ range .Site.Menus.footer }}
<li class="mb-2">
<a href="{{ .URL | relURL }}" class="text-decoration-none text-dark">{{ .Name }}</a>
</li>
{{ end }}
</ul>
</div>
<div class="col-lg-4 col-md-6">
<h5 class="fw-bold mb-4">Contactgegevens</h5>
<div class="d-flex align-items-center mb-3">
<div class="icon-circle me-3"><i class="bi bi-telephone-fill"></i></div>
<div>
<span class="d-block small text-muted">Telefoon</span>
<a href="tel:{{ .Site.Params.telefoon }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.telefoon }}</a>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<div class="icon-circle me-3"><i class="bi bi-envelope-fill"></i></div>
<div>
<span class="d-block small text-muted">E-mail</span>
<a href="mailto:{{ .Site.Params.email }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.email }}</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="icon-circle me-3"><i class="bi bi-geo-alt-fill"></i></div>
<div>
<span class="d-block small text-muted">Adres</span>
<span class="text-dark fw-bold">{{ .Site.Params.adres }}</span>
</div>
</div>
</div>
</div>
<hr class="mt-5 mb-4 opacity-10">
<div class="row small text-muted">
<div class="col-md-8">
Copyright © {{ now.Format "2006" }} | Van Emous Mantelzorgwoningen | kvk: {{ .Site.Params.kvk }}
</div>
<div class="col-md-4 text-md-end">
<a href="/sitemap" class="text-decoration-none text-muted me-3">Sitemap</a>
<a href="/privacybeleid" class="text-decoration-none text-muted">Privacybeleid</a>
</div>
</div>
</div>
</div>
</footer>
{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }}
{{ if $js }}
{{ $js = $js | resources.Minify | resources.Fingerprint }}
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>

View File

@@ -1,23 +1,25 @@
<header>
<div class="top-bar py-2">
<div class="container d-flex justify-content-between align-items-center">
<div class="container d-flex justify-content-between align-items-center px-lg-5">
<nav class="contact-info" aria-label="Contactinformatie">
{{ if .Site.Params.telefoon }}
<a href="tel:{{ .Site.Params.telefoon | urlize }}" class="me-3 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon }}">
<i class="bi bi-telephone" aria-hidden="true"></i> {{ .Site.Params.telefoon }}
<a href="tel:{{ .Site.Params.telefoon | urlize }}" class="me-lg-5 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon }}">
<i class="bi bi-telephone-fill fs-6 align-middle" aria-hidden="true"></i>
<span class="ms-1">{{ .Site.Params.telefoon }}</span>
</a>
{{ end }}
{{ if .Site.Params.email }}
<a href="mailto:{{ .Site.Params.email }}" class="text-white text-decoration-none" aria-label="Stuur een e-mail naar {{ .Site.Params.email }}">
<i class="bi bi-envelope" aria-hidden="true"></i> {{ .Site.Params.email }}
<a href="mailto:{{ .Site.Params.email }}" class="text-white text-decoration-none d-none d-lg-inline-block" aria-label="Stuur een e-mail naar {{ .Site.Params.email }}">
<i class="bi bi-envelope-fill fs-6 align-middle" aria-hidden="true"></i>
<span class="ms-1">{{ .Site.Params.email }}</span>
</a>
{{ end }}
</nav>
{{ if .Site.Params.google_rating }}
<div class="google-reviews d-none d-md-block" aria-label="Google beoordeling: {{ .Site.Params.google_rating }} van de 5 sterren">
<span class="fw-bold" aria-hidden="true">G {{ .Site.Params.google_rating }}</span>
<div class="google-reviews d-flex align-items-center" aria-label="Google beoordeling: {{ .Site.Params.google_rating }} van de 5 sterren">
<span class="fw-bold me-1 text-white" aria-hidden="true">G {{ .Site.Params.google_rating }}</span>
<span class="text-warning" aria-hidden="true">
{{ range (seq (int .Site.Params.google_rating)) }}★{{ end }}
</span>

View File

@@ -1,17 +1,36 @@
<section class="hero-section py-5 my-lg-5">
<div class="container">
<div class="row align-items-end">
<div class="row align-items-end mx-lg-5 px-lg-4">
<div class="col-lg-7">
<h1 class="display-3 mb-5">{{ .Params.hero.title }}</h1>
<a href="{{ .Params.hero.cta_link }}" class="btn btn-cta">
{{ .Params.hero.cta_text }}
</a>
<h1 class="display-3 mb-4 mb-lg-5">{{ .Params.hero.title | markdownify }}</h1>
<div class="d-none d-lg-block">
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
{{ .Params.hero.cta_text }}
</a>
</div>
</div>
<div class="col-lg-5">
<p class="lead mb-2">
{{ .Params.hero.subtitle }}
{{ .Params.hero.subtitle | markdownify }}
</p>
<div class="d-lg-none mt-4">
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
{{ .Params.hero.cta_text }}
</a>
</div>
</div>
</div>
<div class="row mt-4 mt-lg-5">
<div class="col-12">
{{ with .Params.hero.image }}
<div class="hero-image-dynamic"
style="background-image: url('{{ . | relURL }}');">
</div>
{{ end }}
</div>
</div>
</div>

165
layouts/partials/map.html Normal file
View File

@@ -0,0 +1,165 @@
<section class="info-section py-5 my-lg-5">
<div class="container overflow-hidden">
<div class="mb-5">
<h6 class="text-primary">Doe een vooronderzoek</h6>
<h2 class="display-5 fw-bold">Toets uw kavel</h2>
</div>
<div class="row flex-nowrap g-5" style="min-height: 650px;">
<div id="col-map" class="col-12" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
<div class="panel overflow-hidden" style="height: 650px; position: relative;">
<div id="panel" class="bg-white p-4" style="position: absolute; left: 20px; top: 20px; z-index: 1000; width: 350px; border-radius: 20px; max-height: 90%;">
<div class="mb-3">
<p class="text-dark">Voer uw (plaatsing-)adres in.</p>
<input type="text" id="pc-input" class="form-control mb-2 rounded-pill" placeholder="Postcode (3771VH)">
<input type="number" id="hn-input" class="form-control mb-2 rounded-pill" placeholder="Huisnummer">
<button id="btnSearch" class="btn btn-cta">Analyseer Kavel</button>
</div>
</div>
<div id="map" style="width: 100%; height: 100%; background: #eee;"></div>
</div>
</div>
<div id="col-results" class="col-md-5 " style="display: none; opacity: 0; transform: translateX(50px); transition: all 0.6s ease-out; flex-shrink: 0;">
<div class="bg-light p-4 panel p-5">
<h3 class="fw-bold mb-4">Resultaten</h3>
<div class="d-flex justify-content-between mb-2"><span>Kavelnummer:</span><strong id="res-kavelnummer"></strong></div>
<div class="d-flex justify-content-between mb-2"><span>Bouwjaar hoofdgebouw:</span><strong id="res-bouwjaar"></strong></div>
<hr>
<div class="d-flex justify-content-between mb-2"><span>Formaat kavel:</span><strong id="res-kavelformaat"></strong></div>
<div class="d-flex justify-content-between mb-2"><span>Formaat kavel:</span><strong id="res-kavelvrij"></strong></div>
<div class="d-flex justify-content-between mb-2"><span class="text-primary h5">Max. Mantelzorgwoning</span><strong class="text-primary h5" style="filter: blur(7px);" id="res-max"></strong></div>
<hr>
<p>Ontvang een volledig rapport over alle mogelijkheden binnen 5 minuten in uw email.</p>
<form id="lead-form">
<div class="row">
<div class="mb-2 col-md-4">
<select class="form-select form-select rounded-pill" id="f-aanhef" required>
<option value="" selected disabled>Aanhef</option>
<option value="Dhr.">Dhr.</option>
<option value="Mevr.">Mevr.</option>
</select>
</div>
<div class="mb-2 col-md-8">
<input type="text" id="f-achternaam" class="form-control form-control rounded-pill" placeholder="Achternaam" required>
</div>
<div class="mb-2">
<input type="email" id="f-email" class="form-control form-control rounded-pill" placeholder="E-mailadres" required>
</div>
<div class="mb-3">
<input type="tel" id="f-telefoon" class="form-control form-control rounded-pill" placeholder="Telefoonnummer" required>
</div>
<button type="submit" class="btn btn-cta">Rapport Aanvragen</button>
</div>
</form>
<div id="form-success" class="mt-3 text-center d-none">
<p class="fw-bold mb-0">✓ Je rapport is onderweg!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@9.2.4/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@9.2.4/dist/ol.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 1. Bronnen initialiseren
const perceelSource = new ol.source.Vector();
const gebouwSource = new ol.source.Vector();
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Vector({
source: perceelSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#B95913', width: 4 }),
fill: new ol.style.Fill({ color: 'rgba(185, 89, 19, 0.2)' })
})
}),
new ol.layer.Vector({
source: gebouwSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#ffffff', width: 2 }),
fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.4)' })
})
})
],
view: new ol.View({ center: ol.proj.fromLonLat([5.594, 52.285]), zoom: 12 })
});
// 2. Click Handler
document.getElementById('btnSearch').addEventListener('click', async function() {
const pc = document.getElementById('pc-input').value.replace(/\s+/g, "").toUpperCase();
const hn = document.getElementById('hn-input').value;
if (!pc || !hn) return alert("Vul postcode en huisnummer in.");
try {
const response = await fetch(`https://maps.start-it.nl/api/analyse?postcode=${pc}&huisnummer=${hn}`);
const data = await response.json();
if (data.results && data.results.length > 0) {
const r = data.results[0];
// A. Data invullen
// document.getElementById('res-adres').innerText = r.adres || '—';
document.getElementById('res-bouwjaar').innerText = r.hoofdgebouw_bouwjaar || '—';
document.getElementById('res-max').innerText = (r.max_mantelzorgwoning_m2 || 0) + ' m²';
document.getElementById("res-kavelnummer").innerText = r.kavelnummer || "—";
document.getElementById("res-kavelformaat").innerText = (r.kavel_m2 || 0) + ' m²';
document.getElementById("res-kavelvrij").innerText = (r.vrije_m2 || 0) + ' m²';
// B. Animatie Logica
const colMap = document.getElementById('col-map');
const colRes = document.getElementById('col-results');
// Stap 1: Krimp de kaart-kolom
colMap.classList.remove('col-12');
colMap.classList.add('col-md-7');
// Stap 2: Toon zijpaneel met fade-in
setTimeout(() => {
colRes.style.display = "block";
// Kleine delay voor de browser om display:block te verwerken voor de transitie
setTimeout(() => {
colRes.style.opacity = "1";
colRes.style.transform = "translateX(0)";
}, 50);
}, 100);
// C. Kaart tekenen
setTimeout(() => {
map.updateSize();
perceelSource.clear();
gebouwSource.clear();
const format = new ol.format.GeoJSON();
if (r.perceel_geojson) {
perceelSource.addFeatures(format.readFeatures(JSON.parse(r.perceel_geojson), {
dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'
}));
}
if (r.gebouw_geojson) {
gebouwSource.addFeatures(format.readFeatures(JSON.parse(r.gebouw_geojson), {
dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'
}));
}
if (perceelSource.getFeatures().length > 0) {
map.getView().fit(perceelSource.getExtent(), {
padding: [50, 50, 50, 50], duration: 1000
});
}
}, 400);
}
} catch (e) { console.error(e); }
});
});
</script>

View File

@@ -0,0 +1,36 @@
<section class="modellen-sectie py-5 bg-secondary w-100">
<div class="container px-lg-5">
<div class="mb-5">
<h6 class="text-primary">{{ .Params.modellen_subtitle | default "Onze mantelzorgwoningen" }}</h6>
<h2 class="display-5 fw-bold">{{ .Params.modellen_title | default "Samen leven, zelfstandig wonen" }}</h2>
</div>
<div class="row g-4 justify-content-center">
{{ $modellen := (where .Site.RegularPages "Section" "modellen") }}
{{ range $modellen.ByWeight }}
<div class="col-md-6 col-lg-4">
<div class="model-card position-relative shadow-sm overflow-hidden hero-rounded-img h-100">
{{ with .Params.image }}
<div class="model-card-bg" style="background-image: url('{{ . | relURL }}');"></div>
{{ end }}
<div class="model-card-overlay d-flex flex-column justify-content-between p-4">
<div class="price-badge">
<span class="d-block small text-uppercase">Vanaf</span>
<span class="h4 fw-bold">€ {{ lang.FormatNumber 0 .Params.price }}</span>
</div>
<div class="model-info mt-auto">
<h3 class="h4 fw-bold text-white mb-1">{{ .Title }}</h3>
<p class="text-white-50 small mb-0">{{ .Params.subtitle }}</p>
<a href="{{ .RelPermalink }}" class="stretched-link" aria-label="Bekijk {{ .Title }}"></a>
</div>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</section>

View File

@@ -0,0 +1,16 @@
<section class="usp-bar py-3 py-lg-4 bg-white">
<div class="container px-lg-5">
<div class="row g-3 g-lg-4 justify-content-center">
{{ range .Params.usps }}
<div class="col-auto mx-auto">
<div class="usp-item d-flex align-items-center">
<svg class="me-2" width="26" height="22" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 7.5L6.5 12.5L16.5 1.5" stroke="#B95913" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="usp-text">{{ . }}</span>
</div>
</div>
{{ end }}
</div>
</div>
</section>

BIN
static/img/banner/home.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 528 KiB

3
static/img/design.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

5
static/img/logo-box.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB