diff --git a/assets/js/map-connector.js b/assets/js/map-connector.js new file mode 100644 index 0000000..c0f2053 --- /dev/null +++ b/assets/js/map-connector.js @@ -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)}`; +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 38f7a13..406648e 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -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; + } } \ No newline at end of file diff --git a/content/_index.md b/content/_index.md index bf475ce..355b5c0 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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" ---- \ No newline at end of file + 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" +--- + diff --git a/content/modellen/model-alpha.md b/content/modellen/model-alpha.md new file mode 100644 index 0000000..0435210 --- /dev/null +++ b/content/modellen/model-alpha.md @@ -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. \ No newline at end of file diff --git a/content/modellen/model-beta.md b/content/modellen/model-beta.md new file mode 100644 index 0000000..653d9c7 --- /dev/null +++ b/content/modellen/model-beta.md @@ -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. \ No newline at end of file diff --git a/content/modellen/model-gamma.md b/content/modellen/model-gamma.md new file mode 100644 index 0000000..514544a --- /dev/null +++ b/content/modellen/model-gamma.md @@ -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. \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index d33d480..ef09c37 100644 --- a/hugo.toml +++ b/hugo.toml @@ -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." diff --git a/hugo_stats.json b/hugo_stats.json index 672edb2..b6d7dcd 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -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" ] } } diff --git a/layouts/index.html b/layouts/index.html index b571ee6..6b311bb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,9 +1,52 @@ {{ define "main" }} {{ partial "hero.html" . }} + {{ partial "usps.html" . }} + {{ if .Params.info_section }} +
+
+
+ +
+
+ {{ with .Params.info_section.image }} + {{ $.Params.info_section.image_alt | default + {{ end }} +
+
- -
+
+ {{ with .Params.info_section.eyebrow }} + + {{ . }} + + {{ end }} + +

+ {{ .Params.info_section.title }} +

+ +
+ {{ range .Params.info_section.text_paragraphs }} +

+ {{ . | markdownify }} +

+ {{ end }} +
+
+ +
+
+
+ {{ end }} + + {{ if .Content }} +
{{ .Content }}
+ {{ end }} + {{ partial "modellen.html" . }} + {{ partial "map.html" . }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c827d09..1073ecd 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,4 +1,78 @@ -{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }} {{/* Gebruik de NIET-minified versie als bron */}} + + +{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }} {{ if $js }} {{ $js = $js | resources.Minify | resources.Fingerprint }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 20bbe78..6ecf3b1 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,23 +1,25 @@
-
+
{{ if .Site.Params.google_rating }} -
- +
+ diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 8c01aa3..ca236de 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -1,17 +1,36 @@
-
+
-

{{ .Params.hero.title }}

- - {{ .Params.hero.cta_text }} - +

{{ .Params.hero.title | markdownify }}

+ +
+ + {{ .Params.hero.cta_text }} + +

- {{ .Params.hero.subtitle }} + {{ .Params.hero.subtitle | markdownify }}

+ +
+ + {{ .Params.hero.cta_text }} + +
+
+
+ +
+
+ {{ with .Params.hero.image }} +
+
+ {{ end }}
diff --git a/layouts/partials/map.html b/layouts/partials/map.html new file mode 100644 index 0000000..3170ca2 --- /dev/null +++ b/layouts/partials/map.html @@ -0,0 +1,165 @@ +
+
+
+
Doe een vooronderzoek
+

Toets uw kavel

+
+
+ +
+
+
+
+

Voer uw (plaatsing-)adres in.

+ + + +
+
+
+
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/layouts/partials/modellen.html b/layouts/partials/modellen.html new file mode 100644 index 0000000..6c533a5 --- /dev/null +++ b/layouts/partials/modellen.html @@ -0,0 +1,36 @@ +
+
+
+
{{ .Params.modellen_subtitle | default "Onze mantelzorgwoningen" }}
+

{{ .Params.modellen_title | default "Samen leven, zelfstandig wonen" }}

+
+ +
+ {{ $modellen := (where .Site.RegularPages "Section" "modellen") }} + {{ range $modellen.ByWeight }} +
+
+ + {{ with .Params.image }} +
+ {{ end }} + +
+
+ Vanaf + € {{ lang.FormatNumber 0 .Params.price }} +
+ +
+

{{ .Title }}

+

{{ .Params.subtitle }}

+ + +
+
+
+
+ {{ end }} +
+
+
\ No newline at end of file diff --git a/layouts/partials/usps.html b/layouts/partials/usps.html new file mode 100644 index 0000000..79c2324 --- /dev/null +++ b/layouts/partials/usps.html @@ -0,0 +1,16 @@ +
+
+
+ {{ range .Params.usps }} +
+
+ + + + {{ . }} +
+
+ {{ end }} +
+
+
\ No newline at end of file diff --git a/static/img/banner/home.jpg b/static/img/banner/home.jpg new file mode 100644 index 0000000..b8e09e8 Binary files /dev/null and b/static/img/banner/home.jpg differ diff --git a/static/img/design.svg b/static/img/design.svg new file mode 100644 index 0000000..c551c76 --- /dev/null +++ b/static/img/design.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/general/brochure.jpg b/static/img/general/brochure.jpg new file mode 100644 index 0000000..c38efad Binary files /dev/null and b/static/img/general/brochure.jpg differ diff --git a/static/img/logo-box.svg b/static/img/logo-box.svg new file mode 100644 index 0000000..2e7b17a --- /dev/null +++ b/static/img/logo-box.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/modellen/model-001.jpg b/static/img/modellen/model-001.jpg new file mode 100644 index 0000000..1a39dc4 Binary files /dev/null and b/static/img/modellen/model-001.jpg differ diff --git a/static/img/modellen/model-002.jpg b/static/img/modellen/model-002.jpg new file mode 100644 index 0000000..cc0fdae Binary files /dev/null and b/static/img/modellen/model-002.jpg differ diff --git a/static/img/modellen/model-003.jpg b/static/img/modellen/model-003.jpg new file mode 100644 index 0000000..0ecdd15 Binary files /dev/null and b/static/img/modellen/model-003.jpg differ