Homepage: Added 'mogelijkheden'

assets/scss/main.scss

@@ -112,7 +112,7 @@ h6 {
     line-height: normal;
     font-weight: 500;
     letter-spacing: 0.4em;
-    color: darken($van-emous-blue, 40%) !important;
+    //color: darken($van-emous-blue, 40%) !important;
     margin: 0;
     padding-bottom: 20px;
     display: block;

hugo_stats.json

@@ -43,17 +43,21 @@
       "align-items-end",
       "align-middle",
       "bg-light",
+      "bg-primary",
       "bg-secondary",
       "bg-white",
       "bi",
+      "bi-chevron-right",
       "bi-envelope-fill",
       "bi-geo-alt-fill",
       "bi-house-door-fill",
       "bi-telephone-fill",
       "border-0",
+      "border-start",
       "brochure-form",
       "btn",
       "btn-cta",
+      "card",
       "col-12",
       "col-6",
       "col-8",
@@ -61,6 +65,7 @@
       "col-lg-3",
       "col-lg-4",
       "col-lg-5",
+      "col-lg-6",
       "col-lg-7",
       "col-md-4",
       "col-md-5",
@@ -97,12 +102,14 @@
       "form-select",
       "fs-6",
       "fw-bold",
+      "g-0",
       "g-2",
       "g-3",
       "g-4",
       "g-5",
       "g-lg-4",
       "h-100",
+      "h2",
       "h4",
       "h5",
       "h6",
@@ -156,16 +163,21 @@
       "navbar-nav",
       "navbar-toggler",
       "navbar-toggler-icon",
+      "object-fit-cover",
       "offset-lg-1",
       "opacity-10",
+      "opacity-90",
       "overflow-hidden",
       "p-4",
+      "p-lg-5",
       "panel",
       "pb-3",
       "pb-lg-5",
       "pe-lg-5",
       "position-relative",
+      "possibilities",
       "price-badge",
+      "ps-4",
       "ps-lg-5",
       "pt-5",
       "px-3",
@@ -177,6 +189,7 @@
       "py-4",
       "py-5",
       "py-lg-4",
+      "rounded-4",
       "rounded-img",
       "rounded-pill",
       "row",

layouts/index.html

@@ -48,5 +48,6 @@
     </div>
     {{ end }}
     {{ partial "modellen.html" . }}
+    {{ partial "mogelijkheden.html" . }}
     {{ partial "map.html" . }}
 {{ end }}

layouts/partials/mogelijkheden.html

@@ -0,0 +1,60 @@
+<section class="possibilities py-5 my-lg-5">
+    <div class="container">
+        <div class="row mb-5">
+            <div class="col-lg-7">
+                <span class="h6 text-primary mb-2 d-block">Mogelijkheden</span>
+                <h2 class="display-5 fw-bold mb-4">Comfortabel en dichtbij wonen met oog voor zorg</h2>
+            </div>
+            <div class="col-lg-5 ps-lg-5 d-flex align-items-center">
+                <p class="border-start ps-4">
+                    Onze mogelijkheden helpen u om comfortabel en zelfstandig dichtbij uw dierbaren te wonen, met persoonlijke begeleiding bij elke stap.
+                </p>
+            </div>
+        </div>
+
+        <div class="row g-4">
+            <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">
+                        <div class="col-md-6 p-4 p-lg-5 d-flex flex-column justify-content-center">
+                            <h3 class="h2 mb-4 text-white">Modellen</h3>
+                            <p class="mb-5 opacity-90">Bekijk onze verschillende modellen mantelzorgwoningen, volledig aan te passen aan uw wensen en situatie.</p>
+                            <a href="/modellen" class="text-white text-decoration-none fw-bold mt-auto">
+                                Bekijk de modellen <i class="bi bi-chevron-right ms-1"></i>
+                            </a>
+                        </div>
+                        <div class="col-md-6 h-100">
+                            <img src="/img/mogelijkheden.jpg" alt="Model woning" class="h-100 w-100 object-fit-cover">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <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="p-4">
+                        <h3 class="h4 mb-3">Pre mantelzorgwoning</h3>
+                        <p class="mb-4">Een pre mantelzorgwoning biedt comfort en zekerheid, met oog op toekomstige zorgbehoeften.</p>
+                        <a href="/pre-mantelzorgwoning" class="text-dark text-decoration-none fw-bold small">
+                            Meer informatie <i class="bi bi-chevron-right ms-1 text-primary"></i>
+                        </a>
+                    </div>
+                    <img src="/img/mogelijkheden-pre-mantelzorg.jpg" alt="Pre mantelzorg" class="mt-auto w-100 object-fit-cover" style="height: 200px;">
+                </div>
+            </div>
+
+            <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="p-4">
+                        <h3 class="h4 mb-3">Vergunningscheck</h3>
+                        <p class="mb-4">Ontvang duidelijkheid over de vergunning voor uw mantelzorgwoning met onze vrijblijvende vergunningscheck.</p>
+                        <a href="/vergunningscheck" class="text-dark text-decoration-none fw-bold small">
+                            Meer informatie <i class="bi bi-chevron-right ms-1 text-primary"></i>
+                        </a>
+                    </div>
+                    <img src="/img/mogelijkheden-vergunning.jpg" alt="Vergunningscheck" class="mt-auto w-100 object-fit-cover" style="height: 200px;">
+                </div>
+            </div>
+        </div>
+    </div>
+</section>