Update: overzicht modellen

content/modellen/_index.md

@@ -1,10 +1,11 @@
 ---
 title: "Zorgwoning overzicht"
-subtitle: "Groen sedumdak & grote veranda"
+subtitle: "Onze woningen zijn aanpasbaar"
-price: 89000
-image: "/img/modellen/berkel/berkel-002-800x.webp"
-featured: true
 weight: 1
-layout: model
+layout: modellen
-size: 90
+
+hero:
+
+  title: "Modellen overzicht"
+  eyebrow: "Al onze woningen zijn aanpasbaar"
 ---

content/modellen/model-amstel.md

@@ -6,7 +6,7 @@ image: "/img/modellen/amstel/amstel-002-800x.webp"
 featured: true
 weight: 1
 layout: model
-size: 90
+size: 82
 
 
 hero:

content/modellen/model-waal.md

@@ -6,7 +6,7 @@ image: "/img/modellen/waal/waal-007-800x.webp"
 featured: true
 weight: 1
 layout: model
-size: 100
+size: 90
 
 hero:
   image: "/img/modellen/waal/waal-007-1600x.webp"

hugo_stats.json

@@ -69,12 +69,12 @@
       "bi-hr",
       "bi-lamp",
       "bi-moon-stars",
-      "bi-person-hearts",
       "bi-telephone-fill",
       "bi-x-lg",
       "border",
       "border-0",
       "border-start",
+      "border-top",
       "brochure-form",
       "btn",
       "btn-close",
@@ -99,6 +99,8 @@
       "col-md-6",
       "col-md-8",
       "col-sm-12",
+      "col-xl-5",
+      "col-xl-7",
       "collapse",
       "collapsed",
       "contact-icon-circle",
@@ -187,6 +189,7 @@
       "model-check",
       "model-info",
       "model-section",
+      "modellen-overzicht",
       "modellen-sectie",
       "ms-1",
       "ms-auto",
@@ -197,6 +200,7 @@
       "mt-5",
       "mt-auto",
       "mt-lg-5",
+      "mt-md-0",
       "mx-0",
       "mx-auto",
       "my-3",
@@ -222,6 +226,7 @@
       "p-0",
       "p-3",
       "p-4",
+      "p-5",
       "p-lg-5",
       "p-md-4",
       "panel",
@@ -236,6 +241,8 @@
       "price-badge",
       "ps-4",
       "ps-lg-5",
+      "ps-md-5",
+      "pt-2",
       "pt-5",
       "px-0",
       "px-3",
@@ -332,7 +339,6 @@
       "modelModal",
       "model_model-amstel",
       "model_model-berkel",
-      "model_model-berkel copy",
       "model_model-ijssel",
       "model_model-maas",
       "model_model-reest",

layouts/_default/modellen.html

@@ -0,0 +1,58 @@
+{{ define "main" }}
+{{ partial "hero-single.html" . }}
+<section class="modellen-overzicht">
+    <div class="container">
+
+        <div class="row g-5"> {{ range .Paginator.Pages }}
+            <div class="col-12">
+                <div class="row g-0 align-items-center">
+                    
+                    <div class="col-xl-7">
+                        <div class="row g-0 shadow rounded-4 overflow-hidden">
+                            <div class="col-md-6">
+                                <a href="{{ .RelPermalink }}">
+                                    <img src="{{ .Params.image | relURL }}" 
+                                         class="img-fluid h-100 object-fit-cover" 
+                                         style="min-height: 300px; width: 100%;" 
+                                         alt="{{ .Title }}">
+                                </a>
+                            </div>
+                            <div class="col-md-6 bg-light p-5 d-flex flex-column justify-content-center justify-content-between">
+                                <h2 class="h1 fw-bold">{{ .Title }}</h2>
+                                <ul class="list-unstyled mb-0">
+                                    {{ range first 3 .Params.hero.summary }}
+                                    <li class="d-flex align-items-center mb-2">
+                                        <i class="bi {{ .icon }} text-primary me-2"></i>
+                                        <span><strong>{{ .property }}:</strong> {{ .value }}</span>
+                                    </li>
+                                    {{ end }}
+                                </ul>
+                                <div class="mt-3 pt-2 border-top">
+                                    <span class="h5 fw-bold text-dark">vanaf € {{ lang.FormatNumber 0 .Params.price }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-5 ps-md-5 mt-4 mt-md-0">
+                        
+                        <p class="text-muted mt-5">
+                            {{ if .Params.hero.paragraph }}
+                                {{ .Params.hero.paragraph | truncate 500 }}
+                            {{ else }}
+                                {{ .Summary | truncate 500 }}
+                            {{ end }}
+                        </p>
+                        <a href="{{ .RelPermalink }}" class="btn btn-cta">Bekijk woning</a>
+                    </div>
+                    
+                </div>
+                <hr class="mt-5 opacity-10">
+            </div>
+            {{ end }}
+        </div>
+        
+        {{ partial "pagination.html" . }}
+    </div>
+</section>
+{{ end }}

layouts/index.html

@@ -43,7 +43,7 @@
     
     {{ partial "mogelijkheden.html" . }}
     {{ partial "map.html" . }}
-    {{ partial "modellen.html" . }}
+    {{ partial "modellen-overzicht.html" . }}
 
     {{ if .Content }}
     <div class="container my-5">