VanEmous/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New: Model template

Browse Source
This commit is contained in:
Machiel Heinen
2026-03-02 20:33:30 +01:00
parent f1aedfb218
commit 3aefa3ef04
60 changed files with 1348 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
layouts/partials/faq.html Normal file
View File

@@ -0,0 +1,38 @@
{{ $home := .Site.Home }}
{{ with $home.Params.faq }}
<section id="faq" class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="d-block pb-4 text-center">
<p class="h6 text-primary">{{ .subtitle | default "Een snel overzicht" }}</p>
<h2 class="display-3">{{ .title | default "Veelgestelde vragen" }}</h2>
</div>
<div class="accordion faq-accordion" id="accordionFAQ">
{{ range $index, $element := .list }}
<div class="accordion-item mb-3 border-0 shadow-sm">
<h2 class="accordion-header">
<button class="accordion-button {{ if ne $index 0 }}collapsed{{ end }}"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseFAQ{{ $index }}">
{{ $element.question }}
</button>
</h2>
<div id="collapseFAQ{{ $index }}"
class="accordion-collapse collapse {{ if eq $index 0 }}show{{ end }}"
data-bs-parent="#accordionFAQ">
<div class="accordion-body">
{{ $element.answer | markdownify }}
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>
</div>
</section>
{{ end }}

87
layouts/partials/footer-contact.html Normal file
View File

@@ -0,0 +1,87 @@
<section>
<div class="container py-5">
<div class="row">
<div class="col-md-6">
<p class="h6 text-primary">Neem contact op</p>
<h2 class="display-3">Benieuwd naar de mogelijkheden?</h2>
<div class="row g-4">
<div class="col-12 d-flex align-items-start">
<div class="contact-icon-circle me-3">
<i class="bi bi-telephone-fill"></i> </div>
<div>
<h5 class="fw-bold mb-1">Telefoon</h5>
<p class="mb-0 text-muted"><a href="+31341275147" class="text-muted numbers">0341 - 275 147</a> </p>
</div>
</div>
<div class="col-12 d-flex align-items-start">
<div class="contact-icon-circle me-3">
<i class="bi bi-envelope-fill"></i>
</div>
<div>
<h5 class="fw-bold mb-1">E-mail</h5>
<p class="mb-0 text-muted"><a href="info@vanemousmantelzorgwoningen.nl" class="text-muted">info@vanemousmantelzorgwoningen.nl</a></p>
</div>
</div>
<div class="col-12 d-flex align-items-start">
<div class="contact-icon-circle me-3">
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<h5 class="fw-bold mb-1">Adres</h5>
<p class="mb-0 text-muted"><a href="https://www.google.com/maps/place/Keizerswoert+19,+3881+LE+Putten/@52.2688553,5.5817873,17z/data=!3m1!4b1!4m6!3m5!1s0x47c6367cdb1ed75f:0x3ee3272c1a65f9ac!8m2!3d52.268852!4d5.5843622!16s%2Fg%2F11c16gl4zp?entry=ttu&g_ep=EgoyMDI2MDIyNS4wIKXMDSoASAFQAw%3D%3D" class="text-muted"> Keizerswoert <span class="numbers">19</span>, <span class="numbers">3881</span> LE Putten</a></p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<form action="jouw-verwerkings-url" method="POST">
<div class="row g-4">
<div class="col-md-6">
<label for="voornaam" class="form-label">Voornaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required>
</div>
<div class="col-md-6">
<label for="achternaam" class="form-label">Achternaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">E-mailadres</label>
<input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required>
</div>
<div class="col-md-6">
<label for="telephone" class="form-label">Telefoon</label>
<input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required>
</div>
<div class="col-12">
<label for="" class="form-label">Uw bericht</label>
<textarea class="form-control bg-light border-0" rows="6"></textarea>
</div>
<div class="col-12">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="nieuwsbrief" name="nieuwsbrief" checked>
<label class="form-check-label" for="nieuwsbrief">
Ja, ik meld mij aan voor de nieuwsbrief en blijf graag op de hoogte.
</label>
</div>
<div class="">
<p class=" py-2 small">U gaat bij verzenden akkoord met de verwerking van gegevens zoals beschreven in het privacybeleid.</p>
<button type="submit" class="btn btn-cta">Verstuur aanvraag</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>

66
layouts/partials/footer.html
View File

@@ -37,7 +37,7 @@
<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>
<a href="tel:{{ .Site.Params.telefoon_link }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.telefoon | markdownify }}</a>
</div>
</div>
<div class="d-flex align-items-center mb-3">
@@ -61,7 +61,7 @@
<div class="row small text-muted">
<div class="col-md-8">
Copyright © {{ now.Format "2006" }} | Van Emous Mantelzorgwoningen | kvk: {{ .Site.Params.kvk }}
Copyright © {{ now.Format "2006" }} | Van Emous Mantelzorgwoningen | kvk: {{ .Site.Params.kvk | markdownify }}
</div>
<div class="col-md-4 text-md-end">
<a href="/sitemap" class="text-decoration-none text-muted me-3">Sitemap</a>
@@ -72,6 +72,68 @@
</div>
</footer>
<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content rounded-4 border-0 shadow p-lg-5 p-md-4">
<div class="modal-header border-0">
<div class="row">
<h6 class="text-primary d-lg-inline-block">Een compleet overzicht</h6>
<h5 class="modal-title h3 d-block">Informatie brochure</h5>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form action="jouw-verwerkings-url" method="POST">
<div class="row mb-3">
<div class="col-md-6">
<label for="voornaam" class="form-label">Voornaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required>
</div>
<div class="col-md-6">
<label for="achternaam" class="form-label">Achternaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="email" class="form-label">E-mailadres</label>
<input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required>
</div>
<div class="col-md-6">
<label for="telephone" class="form-label">Telefoon</label>
<input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required>
</div>
</div>
<hr class="my-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="nieuwsbrief" name="nieuwsbrief">
<label class="form-check-label" for="nieuwsbrief">
Ja, ik meld mij aan voor de nieuwsbrief en blijf graag op de hoogte.
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="callme" name="callme" required>
<label class="form-check-label" for="callme">
Ik wil graag vrijblijvend & persoonlijk advies ontvangen
</label>
</div>
<div class="">
<p class=" py-4 small">U gaat bij verzenden akkoord met de verwerking van gegevens zoals beschreven in het privacybeleid.</p>
<button type="submit" class="btn btn-cta">Verstuur aanvraag</button>
</div>
</form>
</div>
</div>
</div>
</div>
{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }}
{{ if $js }}
{{ $js = $js | resources.Minify | resources.Fingerprint }}

6
layouts/partials/head.html
View File

@@ -23,6 +23,8 @@
{{ end }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
{{ with resources.Get "js/main.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>
@@ -40,4 +42,6 @@
<meta property="twitter:url" content="{{ .Permalink }}">
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta property="twitter:description" content="{{ $description }}">
<meta property="twitter:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
<meta property="twitter:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
<script defer data-domain="vanemous.start-it.nl" src="https://stats.start-it.nl/js/script.js"></script>

9
layouts/partials/header.html
View File

@@ -3,9 +3,9 @@
<div class="container d-flex justify-content-between align-items-center">
<nav class="contact-info" aria-label="Contactinformatie">
{{ if .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 }}">
<a href="tel:{{ .Site.Params.telefoon_link | urlize }}" class="me-lg-5 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon_link }}">
<i class="bi bi-telephone-fill fs-6 align-middle" aria-hidden="true"></i>
<span class="ms-1">{{ .Site.Params.telefoon }}</span>
<span class="ms-1">{{ .Site.Params.telefoon | markdownify }}</span>
</a>
{{ end }}
@@ -77,11 +77,12 @@
{{ end }}
<li class="nav-item ms-lg-3 d-flex align-items-center justify-content-end cta-wrapper">
<a href="/brochure" class="btn btn-cta" role="button">
<a href="/brochure" class="btn btn-cta" role="button" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
Gratis brochure aanvragen
</a>
</li>
</ul>
</div>
</div>
</nav>
</nav>

43
layouts/partials/hero-model.html Normal file
View File

@@ -0,0 +1,43 @@
{{ $hero := .Params.hero }}
{{ if $hero.image }}
<div class="hero-image-model mb-5" data-aos="fade-up" data-aos-delay="400"
style="background-image: url('{{ $hero.image | relURL }}');">
</div>
{{ end }}
<div class="col-md-11 mx-auto">
{{ if $hero.eyebrow }}
<p class="h6 text-primary" data-aos="fade-in" data-aos-delay="600">{{ $hero.eyebrow | markdownify }}</p>
{{ end }}
<h1 class="h1 display-3 mb-lg-3" data-aos="fade-in" data-aos-delay="100">
{{ $hero.title | default .Title | markdownify }}
</h1>
{{ if $hero.paragraph }}
<p class="" data-aos="fade-in" data-aos-delay="200">{{ $hero.paragraph | markdownify }}</p>
{{ end }}
{{ if $hero.summary }}
<div id="model-eigenschappen" class="row g-3 mt-2">
{{ range $index, $element := $hero.summary }}
{{ $delay := add 200 (mul $index 100) }}
<div class="col-sm-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $delay }}">
<div class="d-flex align-items-center p-3 border rounded-4 bg-light h-100">
<div class="icon-box me-3 text-primary">
<i class="bi {{ .icon | default "bi-info-circle" }}"></i>
</div>
<div>
<span class="d-block">
{{ .property }}
</span>
<span class="fw-bold d-block">{{ .value }}</span>
</div>
</div>
</div>
{{ end }}
</div>
{{ end }}
</div>

20
layouts/partials/hero-single.html Normal file
View File

@@ -0,0 +1,20 @@
<section class="hero-section">
<div class="container">
<div class="row align-items-end">
<div class="col-md-11 mx-auto">
<p class="h6 text-primary">{{ .Params.hero.eyebrow | markdownify }}</p>
<h1 class="h1 display-3 mb-lg-3" data-aos="fade-in" data-aos-delay="100">{{ .Params.hero.title | markdownify }}</h1>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
{{ with .Params.hero.image }}
<div class="hero-image-single" data-aos="fade-up" data-aos-delay="400"
style="background-image: url('{{ . | relURL }}');">
</div>
{{ end }}
</div>
</div>
</div>
</section>

6
layouts/partials/hero.html
View File

@@ -4,15 +4,15 @@
<div class="col-lg-7">
<h1 class="display-3 mb-4 mb-lg-5" data-aos="fade-in" data-aos-delay="100">{{ .Params.hero.title | markdownify }}</h1>
<div class="d-none d-lg-block">
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta" data-aos="fade-right" data-aos-delay="600">
<div class="d-none d-lg-block" data-aos="fade-right" data-aos-delay="600">
<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" data-aos="fade-in" data-aos-delay="100">
<p class="border-start ps-4" data-aos="fade-in" data-aos-delay="100">
{{ .Params.hero.subtitle | markdownify }}
</p>

6
layouts/partials/map.html
View File

@@ -1,7 +1,7 @@
<section class="info-section py-5 my-lg-5" id="vergunningscheck">
<div class="container overflow-hidden">
<div class="row">
<div class="mb-4 col-8">
<div class="mb-4 col-md-8">
<h6 class="text-primary">Doe een vooronderzoek</h6>
<h2 class="display-5 fw-bold">Toets uw kavel</h2>
<p>U kunt geheel vrijblijvend een vooronderzoek doen naar uw mogelijkheden. Voer uw (plaatsing-)adres in en krijg direct resultaat en een uitgebreid verslag ontvangt u binnen 5 minuten per email.</p>
@@ -9,7 +9,7 @@
</div>
</div>
<div class="row flex-nowrap g-5 h-100" style="min-height: 600px;" data-aos="fade-in" data-aos-delay="100">
<div class="row flex-nowrap g-5 h-100" style="min-height: 400px;" data-aos="zoom-in" data-aos-offset="500" data-aos-delay="100">
<div id="col-map" class="col-12 mb-3" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
<div class="panel overflow-hidden shadow" style="height: 600px; position: relative;border:2px solid #fff;">
@@ -20,7 +20,7 @@
<button id="btnSearch" class="btn btn-cta">Analyseer Kavel</button>
</div>
</div>
<div id="map" style="width: 100%; height: 100%; background: #eee;"></div>
<div id="map" style="width: 100%; height: 100%; background: #eee;;"></div>
</div>
</div>

63
layouts/partials/modellen.html
View File

File diff suppressed because one or more lines are too long

33
layouts/partials/mogelijkheden.html
View File

@@ -1,24 +1,33 @@
{{ with .Params.mogelijkheden_section }}
<section class="possibilities py-5 my-lg-5">
<div class="container">
<div class="row mb-5">
<div class="col-lg-7">
<span class="text-secondary text-uppercase tracking-widest mb-2 d-block">Mogelijkheden</span>
<h2 class="display-5 fw-bold mb-4">{{ .title }}</h2>
<span class="text-primary h6 mb-2 d-block" data-aos="fade-right" data-aos-delay="0">{{ .subtitle }}</span>
<h2 class="display-5 fw-bold mb-4" data-aos="fade-right" data-aos-delay="100">{{ .title }}</h2>
</div>
<div class="col-lg-5 ps-lg-5 d-flex align-items-center">
<div class="col-lg-5 ps-lg-5 d-flex align-items-center" data-aos="fade-left" data-aos-delay="200">
<p class="border-start ps-4">{{ .intro_text }}</p>
</div>
</div>
<div class="row g-4">
{{ range .kaarten }}
{{ if .is_large }}
<div class="col-lg-6">
<div class="card h-100 border-0 overflow-hidden rounded-4 shadow-sm bg-primary text-white">
<div class="row g-0 h-100">
{{ range $i, $e := .kaarten }}
{{ $delay := add 400 (mul $i 200) }} {{ if .is_large }}
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="{{ $delay }}">
<div class="card h-100 border-0 overflow-hidden rounded-4 bg-primary text-white position-relative">
<div class="position-absolute svg-bg-container start-0 top-0 w-100 h-100 d-flex align-items-center pointer-events-none" style="opacity: 0.1; z-index: 0;">
<svg class="scroll-draw-svg" width="100%" height="100%" viewBox="30 0 129 238" fill="none">
<path class="drawing-line" style="transition: stroke-dashoffset 10s ease-in, opacity 1s ease;" d="m 20.442137,235.76187 c 7.97,0.148 15.26,0.282 15.26,0.282 0,0 5.6,-29.107 3.44,-44.825 -2.16,-15.684 -20.17,-35.483 -15.56,-36.094 4.6,-0.613 21.99,23.604 20.57,15.403 -1.42,-8.196 2.39,-70.709097 4.53,-56.701 2.13,14.032 1.45,62.792 6.57,53.289 5.11,-9.475 19.71,-35.554 15.97,-24.644 -3.75,10.94 -17.18,32.025 -10.65,30.711 6.52,-1.311 29.94,-2.169 27.07,-19.195 -2.86,-16.988 -6.81,-20.778 -1.18,-33.053 5.62,-12.233 5.51,-18.799 -2.42,-30.005497 -7.92,-11.2069 -13.74,-11.4238 -11.99,-24.4402 1.74,-12.9824 11.4,-13.3108 -2.95,-24.7501 -14.37,-11.461 -30.29,-42.48843064 -25.74,-40.1119497 4.56,2.37338 -13.59,1.52749 -13.42,15.9877497 0.16,14.4944 7.32,14.8073 4.17,24.1056 -3.15,9.32 -16,29.2428 -10.04,36.0531 5.97,6.8103 13.92,16.6168 2.92,27.978297 -11.04,11.415 -25.6900002,-5.298 -25.4900002,17.596 0.2,22.987 14.8300002,33.06 14.9200002,41.984 0.09,8.935 1.51,17.921 8.82,21.831 7.3,3.904 40.06,-2.736 36.12,-4.316 -3.95,-1.583 -9.71,9.422 -8.84,25.838 0.87,16.455 -3.64,24.61 7.59,26.321 11.19,1.704 20.97,-1.103 20.83,-10.805 -0.16,-9.688 -10.56,-50.755 -5.27,-46.178 5.28,4.576 13.26,15.135 14.46,9.242 1.21,-5.887 0.4,-15.507 0.4,-15.507 0,0 -1.31,-40.481 1.48,-28.661 2.78,11.836 4.61,43.586 9.010003,35.573 4.4,-7.991 13.81,-23.167 8.85,-12.288 -4.98,10.913 -15.210003,19.514 -16.370003,28.366 -1.15,8.868 5.27,3.823 15.550003,-1.85 10.24,-5.657 22.41,-9.038 17.68,-20.917 -4.73,-11.873 -0.87,-11.768 -1.81,-27.17 -0.94,-15.362 -18.97,-17.395 -17.95,-31.957 1.03,-14.519197 9.25,-20.759397 1.35,-32.644897 -7.91,-11.8886 -13.930003,-26.5844 -17.030003,-19.4797 -3.09,7.117 8.780003,24.9731 6.43,37.971 -2.36,13.034597 -6.67,25.310597 1.8,29.970597 8.470003,4.657 18.750003,4.248 17.630003,12.983 -1.13,8.753 0.28,15.389 1.07,22.751 0.78,7.371 -14.38,26.888 -16.07,41.655 -1.7,14.811 -6.080003,25.141 5.64,25.367"
stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="row g-0 h-100 position-relative" style="z-index: 1;">
<div class="col-md-6 p-4 p-lg-5 d-flex flex-column justify-content-center">
<h3 class="h2 mb-4 text-white">{{ .title }}</h3>
<h3 class="h3 mb-4 text-white">{{ .title }}</h3>
<p class="mb-5 opacity-90">{{ .text }}</p>
<a href="{{ .link_url }}" class="text-white text-decoration-none fw-bold mt-auto">
{{ .link_text }} <i class="bi bi-chevron-right ms-1"></i>
@@ -31,8 +40,9 @@
</div>
</div>
{{ else }}
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 rounded-4 shadow-sm bg-light overflow-hidden">
<div class="col-lg-3 col-md-6" data-aos="fade-left" data-aos-delay="{{ $delay }}">
<div class="card h-100 border-0 rounded-4 bg-light overflow-hidden">
<div class="p-4">
<h3 class="h4 mb-3">{{ .title }}</h3>
<p class="mb-4">{{ .text }}</p>
@@ -48,4 +58,5 @@
</div>
</div>
</section>
{{ end }}