Model update: Berkel, IJssel, Reest

assets/scss/main.scss

@@ -531,26 +531,26 @@ p {
         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%);
+        background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
     }
 
     .price-badge {
-        background: rgba(255, 255, 255, 0.95);
+        background: rgba(255, 255, 255, 0.9);
         display: inline-block;
         padding: 10px 20px;
         border-radius: 15px;
-        color: #1a1a1a;
+        color: #212121;
         align-self: flex-start; 
         
         span:first-child {
             color: $van-emous-orange;
-            font-size: 0.7rem;
+            // font-size: 0.7rem;
             letter-spacing: 0.1em;
         }
     }
 
     .model-info {
-        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
     }
 }
 
@@ -780,7 +780,7 @@ textarea {
 }
 
 #gallery-splide {
-    overflow: hidden; // Zorgt dat alles wat buiten de slider valt onzichtbaar is
+    overflow: hidden; 
     padding-bottom: 40px;
     .splide__slide {
         transition: transform 0.3s ease;
@@ -834,10 +834,10 @@ textarea {
         background: transparent;
     }
     .modal-backdrop.show {
-        opacity: 0.9; // Lekker donker zodat de foto knalt
+        opacity: 0.9; 
     }
     #lightboxImage {
-        max-height: 90vh; // Voorkomt dat de foto buiten beeld valt op kleine schermen
+        max-height: 90vh; 
         box-shadow: 0 0 50px rgba(0,0,0,0.5);
     }
 }
@@ -858,7 +858,7 @@ textarea {
     height: 45px;
     border-radius: 50%;
     border: none;
-    background-color: $van-emous-orange; // Je primary kleur
+    background-color: $van-emous-orange; 
     color: #fff;
     display: flex;
     align-items: center;
@@ -874,12 +874,12 @@ textarea {
         opacity: 1;
         width: 50px;
         height: 50px;
-        svg { fill: #fff; } // Als je de standaard Splide pijltjes gebruikt
-        i { font-size: 1.5rem; } // Als je Bootstrap Icons gebruikt
+        svg { fill: #fff; } 
+        i { font-size: 1.5rem; }
     }
 
     .splide__track {
-        overflow: visible; // Zorgt dat pijltjes buiten de foto kunnen vallen indien gewenst
+        overflow: visible;
     }
 }
 
@@ -968,17 +968,17 @@ textarea {
 .contact-icon-circle {
     width: 60px;
     height: 60px;
-    background-color: $van-emous-orange; // Gebruik je variabele
+    background-color: $van-emous-orange;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0; // Voorkomt dat de cirkel platgedrukt wordt bij lange tekst
+    flex-shrink: 0;
 
     i, img {
         color: white;
         font-size: 1.5rem;
-        width: 24px; // Mocht je SVG's gebruiken
+        width: 24px;
     }
 }
 

content/modellen/model-berkel.md

@@ -1,27 +1,29 @@
 ---
-title: "Model Berkel"
-subtitle: "Grote ruimtes"
+title: "Berkel"
+subtitle: "Groen sedumdak & grote veranda"
 price: 89000
-image: "/img/modellen/berkel/berkel-001-800x.webp"
+image: "/img/modellen/berkel/berkel-002-800x.webp"
 featured: true
 weight: 1
 layout: model
+size: 90
+
 
 hero:
-  image: "/img/modellen/berkel/berkel-001-1600x.webp"
+  image: "/img/modellen/berkel/berkel-002-1600x.webp"
   image_alt: "Impressie van model Berkel"
   title: "Zorgwoning Berkel"
   eyebrow: "Modern wonen met een groen dak"
-  paragraph: "Geniet van de perfecte balans tussen modern comfort en een landelijke uitstraling met de mantelzorgwoning Berkel. Met een royaal woonoppervlak van maar liefst 90 m² en een verande over de hele lengte biedt dit model u alle ruimte om zelfstandig en stijlvol te wonen."
+  paragraph: "Geniet van de perfecte balans tussen modern comfort en een landelijke uitstraling met de mantelzorgwoning Berkel. Met een royaal woonoppervlak van maar liefst 90m² biedt dit model u alle ruimte om zelfstandig en stijlvol te wonen. Dankzij de extra kamer en praktische berging is de woning flexibel in te delen voor elke levensfase."
   summary:
     - property: "Afmetingen"
-      value: "750cm x 1200cm"
+      value: "7,5m x 12m"
       icon: "bi-arrows-fullscreen"
     - property: "Totaal oppervlakte"
       value: "90m²"
       icon: "bi-house-door"
-    - property: "Slaapkamer(-s)"
-      value: "2 stuks - 13m² / 8m²"
+    - property: "2 Slaapkamers"
+      value: "13m² / 8m²"
       icon: "bi-moon-stars"
     - property: "Berging"
       value: "5m²"
@@ -55,15 +57,10 @@ plattegrond: "/img/modellen/berkel/plattegrond.webp"
 ---
 
 ## Ecologisch en duurzaam ontwerp
-De Berkel is met oog voor de toekomst ontworpen. Wat direct in het oog springt, is het prachtige groene dak. Dit ecologische sedumdak is niet alleen een lust voor het oog, maar biedt ook praktische voordelen: het zorgt voor uitstekende thermische isolatie, dempt geluid en bevordert de lokale biodiversiteit. Zo woont u letterlijk in harmonie met de natuur.
+Wat direct in het oog springt, is het prachtige groene dak. Dit ecologische sedumdak is niet alleen een lust voor het oog, maar biedt ook praktische voordelen: het zorgt voor uitstekende thermische isolatie, dempt geluid en bevordert de lokale biodiversiteit. Zo woont u letterlijk in harmonie met de natuur.
 
 ### Hoogwaardige moderne materialen
-In dit model gaan esthetiek en duurzaamheid hand in hand. Door het gebruik van moderne, onderhoudsarme materialen geniet u van de warme uitstraling van hout, zonder de intensieve zorg die daarbij komt kijken. De strakke antracietkleurige kozijnen en de grote raampartijen geven de woning een eigentijds karakter en zorgen voor een overvloed aan natuurlijk licht in de leefruimte.
+In dit model gaan esthetiek en duurzaamheid hand in hand. Door het gebruik van moderne materialen geniet u van de warme uitstraling van hout, zonder de intensieve zorg die daarbij komt kijken. De strakke antracietkleurige kozijnen en de grote raampartijen geven de woning een eigentijds karakter en zorgen voor een overvloed aan natuurlijk licht in de leefruimte.
 
-### Riant wonen op 90 m²
-Met een oppervlakte van 90 m² is de Berkel een van onze meest ruime modellen. Deze opzet biedt u de vrijheid voor een riante woonkamer met open keuken, een royale slaapkamer en een moderne badkamer. Dankzij de slimme indeling en de overdekte veranda vloeien binnen en buiten naadloos in elkaar over, waardoor de woning nog ruimer aanvoelt.
-
-### Waarom kiezen voor de Berkel?
-- **Duurzaam -** Voorzien van een ecologisch groen dak voor optimale isolatie.
-- **Onderhoudsarm -** Gebruik van moderne materialen die jarenlang mooi blijven.
-- **Landelijke Chique -** Een ontwerp dat naadloos opgaat in elke groene omgeving.
+### Riant wonen op 90m²
+Met een oppervlakte van 90m² is de Berkel een van onze meest ruime modellen. Deze opzet biedt u een riante woonkamer met open keuken, een royale slaapkamer en een moderne badkamer. Dankzij de de overdekte veranda over de hele lengte van de woning vloeien binnen en buiten naadloos in elkaar over.

content/modellen/model-ijssel.md

@@ -0,0 +1,62 @@
+---
+title: "IJssel"
+subtitle: "Met een rietdak"
+price: 89000
+image: "/img/modellen/ijssel/ijssel-002-800x.webp"
+featured: true
+weight: 1
+layout: model
+size: 76
+
+
+hero:
+  image: "/img/modellen/ijssel/ijssel-002-1600x.webp"
+  image_alt: "Impressie van model IJssel"
+  title: "Zorgwoning IJssel"
+  eyebrow: "Onderhoudsarm rieten dak"
+  paragraph: "De IJssel is een prachtige L-vorm woning, die in een landelijke omgeving helemaal tot recht komt. Dankzij de keuze uit diverse kleuren steenstrips vormt de woning altijd een harmonieus geheel met het hoofdgebouw. De geheel open woonkamer en keuken van 38m² gezamenlijk, heeft deuren naar het terras voor aanvullend woonplezier."
+  summary:
+    - property: "Afmetingen"
+      value: "7,6m x 14m"
+      icon: "bi-arrows-fullscreen"
+    - property: "Totaal oppervlakte"
+      value: "76m²"
+      icon: "bi-house-door"
+    - property: "Slaapkamer"
+      value: "12m²"
+      icon: "bi-moon-stars"
+    - property: "Berging"
+      value: "8m²"
+      icon: "bi-box-seam"
+    - property: "Woonkamer / Keuken"
+      value: "38m²"
+      icon: "bi-lamp"
+    - property: "Badkamer"
+      value: "4m²"
+      icon: "bi-droplet"
+
+gallery:
+  - image: "/img/modellen/ijssel/ijssel-001-800x.webp"
+    alt: "Zorgwoning IJssel"
+  - image: "/img/modellen/ijssel/ijssel-002-800x.webp"
+    alt: "Zorgwoning IJssel"
+  - image: "/img/modellen/ijssel/ijssel-003-800x.webp"
+    alt: "Zorgwoning IJssel"
+  - image: "/img/modellen/ijssel/ijssel-004-800x.webp"
+    alt: "Zorgwoning IJssel"
+  - image: "/img/modellen/ijssel/ijssel-005-800x.webp"
+    alt: "Zorgwoning IJssel"
+  - image: "/img/modellen/ijssel/ijssel-006-800x.webp"
+    alt: "Zorgwoning IJssel"
+
+plattegrond: "/img/modellen/ijssel/plattegrond.webp"
+---
+
+## Karakteristiek wonen onder riet
+Wat direct de aandacht trekt, is de prachtige rieten kap. Dit natuurlijke materiaal geeft de IJssel een tijdloze, landelijke uitstraling die perfect opgaat in een groene omgeving. Naast de esthetische waarde biedt een rieten dak uitstekende natuurlijke isolatie; het houdt de woning heerlijk koel in de zomer en behaaglijk warm in de winter. Zo geniet u van een authentiek karakter met het comfort van nu.
+
+### Slimme L-vorm voor optimale privacy
+De doordachte L-vormige architectuur van de IJssel zorgt voor een natuurlijke scheiding tussen wonen en rusten. De royale woonkamer met open keuken van 38m2 vormt het kloppende hart van de woning, terwijl de slaapvleugel met aangrenzende badkamer in de uitbouw voor extra privacy zorgt. 
+
+### Ruimte voor al uw ambities
+Met een totaaloppervlakte van 76m² biedt de IJssel verrassend veel praktische ruimte. Naast de riante slaapkamer van 12m² beschikt de woning over een berging van 8m². Deze ruimte is ideaal als hobbyruimte, werkplek aan huis of zelfs compacte logeerkamer.

content/modellen/model-reest.md

@@ -0,0 +1,62 @@
+---
+title: "Reest"
+subtitle: "Met een rietdak"
+price: 89000
+image: "/img/modellen/reest/reest-004-800x.webp"
+featured: true
+weight: 1
+layout: model
+size: 76
+
+
+hero:
+  image: "/img/modellen/reest/reest-004-1600x.webp"
+  image_alt: "Impressie van model Reest"
+  title: "Zorgwoning Reest"
+  eyebrow: "Onderhoudsarm rieten dak"
+  paragraph: "De Reest is een prachtige L-vorm woning, die in een landelijke omgeving helemaal tot recht komt. Dankzij de keuze uit diverse kleuren steenstrips vormt de woning altijd een harmonieus geheel met het hoofdgebouw. De geheel open woonkamer en keuken van 38m² gezamenlijk, heeft deuren naar het terras voor aanvullend woonplezier."
+  summary:
+    - property: "Afmetingen"
+      value: "7,6m x 14m"
+      icon: "bi-arrows-fullscreen"
+    - property: "Totaal oppervlakte"
+      value: "76m²"
+      icon: "bi-house-door"
+    - property: "Slaapkamer"
+      value: "12m²"
+      icon: "bi-moon-stars"
+    - property: "Berging"
+      value: "8m²"
+      icon: "bi-box-seam"
+    - property: "Woonkamer / Keuken"
+      value: "38m²"
+      icon: "bi-lamp"
+    - property: "Badkamer"
+      value: "4m²"
+      icon: "bi-droplet"
+
+gallery:
+  - image: "/img/modellen/reest/reest-001-800x.webp"
+    alt: "Zorgwoning Reest"
+  - image: "/img/modellen/reest/reest-002-800x.webp"
+    alt: "Zorgwoning Reest"
+  - image: "/img/modellen/reest/reest-003-800x.webp"
+    alt: "Zorgwoning Reest"
+  - image: "/img/modellen/reest/reest-004-800x.webp"
+    alt: "Zorgwoning Reest"
+  - image: "/img/modellen/reest/reest-005-800x.webp"
+    alt: "Zorgwoning Reest"
+  - image: "/img/modellen/reest/reest-006-800x.webp"
+    alt: "Zorgwoning Reest"
+
+plattegrond: "/img/modellen/reest/plattegrond.webp"
+---
+
+## Karakteristiek wonen onder riet
+Wat direct de aandacht trekt, is de prachtige rieten kap. Dit natuurlijke materiaal geeft de Reest een tijdloze, landelijke uitstraling die perfect opgaat in een groene omgeving. Naast de esthetische waarde biedt een rieten dak uitstekende natuurlijke isolatie; het houdt de woning heerlijk koel in de zomer en behaaglijk warm in de winter. Zo geniet u van een authentiek karakter met het comfort van nu.
+
+### Slimme L-vorm voor optimale privacy
+De doordachte L-vormige architectuur van de Reest zorgt voor een natuurlijke scheiding tussen wonen en rusten. De royale woonkamer met open keuken van 38m2 vormt het kloppende hart van de woning, terwijl de slaapvleugel met aangrenzende badkamer in de uitbouw voor extra privacy zorgt. 
+
+### Ruimte voor al uw ambities
+Met een totaaloppervlakte van 76m² biedt de Reest verrassend veel praktische ruimte. Naast de riante slaapkamer van 12m² beschikt de woning over een berging van 8m². Deze ruimte is ideaal als hobbyruimte, werkplek aan huis of zelfs compacte logeerkamer.

hugo.toml

@@ -35,20 +35,20 @@ paginate = 10
 
 [[menus.main]]
     parent = "mantelzorgwoningen"
-    name = "Type A"
-    url = "/mantelzorgwoningen/type-a/"
+    name = "Zorgwoning Berkel"
+    url = "/modellen/model-berkel/"
     weight = 1
 
 [[menus.main]]
     parent = "mantelzorgwoningen"
-    name = "Type B"
-    url = "/mantelzorgwoningen/type-a/"
+    name = "Zorgwoning IJssel"
+    url = "/modellen/model-ijssel/"
     weight = 1
 
 [[menus.main]]
     parent = "mantelzorgwoningen"
-    name = "Type C"
-    url = "/mantelzorgwoningen/type-a/"
+    name = "Zorgwoning Reest"
+    url = "/modellen/model-reest/"
     weight = 1
 
 [[menus.main]]
@@ -61,11 +61,6 @@ paginate = 10
     url = "/projecten/"
     weight = 40
 
-[[menus.main]]
-    name = "Contact"
-    url = "/contact/"
-    weight = 50
-
 [[menus.footer]]
     name = "Modellen"
     url = "/modellen"

hugo_stats.json

@@ -64,6 +64,7 @@
       "bi-chevron-left",
       "bi-chevron-right",
       "bi-cup-hot",
+      "bi-droplet",
       "bi-envelope-fill",
       "bi-geo-alt-fill",
       "bi-house-door",
@@ -111,6 +112,7 @@
       "d-lg-block",
       "d-lg-inline-block",
       "d-lg-none",
+      "d-md-block",
       "d-none",
       "display-3",
       "display-5",
@@ -275,7 +277,6 @@
       "text-primary",
       "text-uppercase",
       "text-white",
-      "text-white-50",
       "top-0",
       "top-bar",
       "usp-bar",
@@ -310,6 +311,7 @@
       "hn-input",
       "hoe-lang-bewaren-we-uw-gegevens",
       "hoogwaardige-moderne-materialen",
+      "karakteristiek-wonen-onder-riet",
       "lead-form",
       "lightbox-splide",
       "lightboxModal",
@@ -328,13 +330,14 @@
       "res-kavelnummer",
       "res-kavelvrij",
       "res-max",
-      "riant-wonen-op-90-m",
+      "riant-wonen-op-90m",
+      "ruimte-voor-al-uw-ambities",
+      "slimme-l-vorm-voor-optimale-privacy",
       "telephone",
       "uw-rechten",
       "uw-veiligheid-staat-voorop",
       "vergunningscheck",
-      "voornaam",
-      "waarom-kiezen-voor-de-berkel"
+      "voornaam"
     ]
   }
 }

layouts/_default/model.html

@@ -71,7 +71,7 @@
                 <div class="col-md-4">
                     <div class="card-secondary">
                         <h4>Plattegrond bekijken</h4>
-                        <p>Maatwerk is mogelijk.</p>
+                        <p>Bekijk de standaard indeling van de woning. Het is uiteraard mogelijk om aanpassingen te maken</p>
                         <div class="bg-white shadow p-4 rounded-4 mb-4">
                             <img class="img-fluid" src="{{ .Params.plattegrond }}">
                         </div>
@@ -91,7 +91,6 @@
         const lightboxEl = document.querySelector('#lightbox-splide');
         
         if (mainGallery && lightboxEl) {
-            // 1. De thumbnail slider (gecombineerde instellingen)
             const primarySplide = new Splide(mainGallery, {
                 type   : 'loop',
                 perPage: 4,
@@ -109,7 +108,6 @@
                 }
             }).mount();
 
-            // 2. De lightbox slider
             const lightboxSplide = new Splide(lightboxEl, {
                 type: 'fade', 
                 rewind: true,
@@ -117,27 +115,20 @@
                 lazyLoad: 'nearby' 
             }).mount();
 
-            // 3. De koppeling
             const modal = document.getElementById('lightboxModal');
             const triggers = document.querySelectorAll('.gallery-trigger');
 
             triggers.forEach((trigger, index) => {
                 trigger.addEventListener('click', (e) => {
-                    // We voorkomen dat de autoplay van de main gallery roet in het eten gooit
                     primarySplide.Components.Autoplay.pause();
-                    
-                    // Splide index kan afwijken door 'loop' (clones)
-                    // We berekenen de echte index op basis van de data-index of positie
                     lightboxSplide.go(index);
                 });
             });
             
-            // Refresh bij openen voor juiste rendering
             modal.addEventListener('shown.bs.modal', function () {
                 lightboxSplide.refresh();
             });
 
-            // Autoplay weer aanzetten als modal sluit
             modal.addEventListener('hidden.bs.modal', function () {
                 primarySplide.Components.Autoplay.play();
             });

layouts/partials/header.html

@@ -78,7 +78,7 @@
 
                 <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" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
-                        Gratis brochure aanvragen
+                        Contact
                     </a>
                 </li>
             </ul>

layouts/partials/hero-model.html

@@ -24,13 +24,16 @@
             {{ 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="col-sm-12 col-md-6 col-lg-4 {{ if ge $index 3 }}d-none d-md-block{{ end }}" 
+                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">
+                        <span class="d-block small text-muted">
                             {{ .property }}
                         </span>
                         <span class="fw-bold d-block">{{ .value }}</span>

layouts/partials/modellen.html

@@ -27,7 +27,7 @@
                                 </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>
+                                    <p class="text-white mb-0">{{ .Params.subtitle }}</p>
                                     <a href="{{ .RelPermalink }}" class="stretched-link"></a>
                                 </div>
                             </div>