Update: Home added 'about' and 'mogelijkheden'

assets/scss/main.scss

@@ -559,4 +559,9 @@ p {
     a:hover {
         color: $van-emous-orange !important;
     }
+}
+
+// Scrollstops
+#vergunningscheck {
+  scroll-margin-top: 100px;
 }

content/_index.md

@@ -24,5 +24,14 @@ info_section:
     - "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"
+
+about_section:
+  eyebrow: "Over Van Emous"
+  title: "Mantelzorgwoningen die families dichter bij elkaar brengen"
+  text_paragraphs:
+    - "Bij het realiseren van een mantelzorgwoning komt veel kijken. Het vraagt om duidelijke keuzes, betrouwbare begeleiding en een partner die uw situatie begrijpt. Van Emous Mantelzorgwoningen is een familiebedrijf met jarenlange ervaring in het begeleiden, bouwen en plaatsen van mantelzorgwoningen. Wij staan naast u gedurende het hele traject en zorgen voor rust, overzicht en een zorgzame woonoplossing waar u op kunt vertrouwen."
+
+  image: "/img/about-home.jpg"
+  image_alt: "Van Emous brochure op een stoel"
 ---
 

hugo_stats.json

@@ -236,7 +236,8 @@
       "res-kavelformaat",
       "res-kavelnummer",
       "res-kavelvrij",
-      "res-max"
+      "res-max",
+      "vergunningscheck"
     ]
   }
 }

layouts/index.html

@@ -19,7 +19,7 @@
 
                 <div class="col-lg-7 ps-lg-5">
                     {{ with .Params.info_section.eyebrow }}
-                    <span class="h6 tracking-widest text-secondary mb-3 d-block">
+                    <span class="h6 text-primary mb-3 d-block">
                         {{ . }}
                     </span>
                     {{ end }}
@@ -50,4 +50,44 @@
     {{ partial "modellen.html" . }}
     {{ partial "mogelijkheden.html" . }}
     {{ partial "map.html" . }}
+
+    {{ if .Params.about_section }}
+    <section class="info-section py-5 my-lg-5">
+        <div class="container">
+            <div class="row align-items-center g-5">
+                
+                <div class="col-lg-5 pe-lg-5">
+                    <div class="info-image-wrapper">
+                        {{ with .Params.about_section.image }}
+                        <img src="{{ . | relURL }}" 
+                             alt="{{ $.Params.info_section.image_alt | default "Van Emous Mantelzorgwoningen" }}" 
+                             class="img-fluid rounded-img shadow fade-left">
+                        {{ end }}
+                    </div>
+                </div>
+
+                <div class="col-lg-7 ps-lg-5">
+                    {{ with .Params.about_section.eyebrow }}
+                    <span class="h6 text-primary mb-3 d-block">
+                        {{ . }}
+                    </span>
+                    {{ end }}
+
+                    <h2 class="display-5 mb-4">
+                        {{ .Params.about_section.title }}
+                    </h2>
+                    
+                    <div class="info-content">
+                        {{ range .Params.about_section.text_paragraphs }}
+                            <p class="lead-text mb-4 text-muted">
+                                {{ . | markdownify }}
+                            </p>
+                        {{ end }}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </section>
+    {{ end }}
 {{ end }}

layouts/partials/hero.html

@@ -2,22 +2,22 @@
     <div class="container">
         <div class="row align-items-end">
             <div class="col-lg-7">
-                <h1 class="display-3 mb-4 mb-lg-5">{{ .Params.hero.title | markdownify }}</h1>
+                <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-up" data-aos-delay="300">
+                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta" data-aos="fade-right" data-aos-delay="600">
                         {{ .Params.hero.cta_text }}
                     </a>
                 </div>
             </div>
             
             <div class="col-lg-5">
-                <p class="lead mb-2">
+                <p class="lead mb-2" data-aos="fade-in" data-aos-delay="100">
                     {{ .Params.hero.subtitle | markdownify }}
                 </p>
 
                 <div class="d-lg-none mt-4">
-                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta fade-left">
+                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
                         {{ .Params.hero.cta_text }}
                     </a>
                 </div>
@@ -27,7 +27,7 @@
         <div class="row mt-4 mt-lg-5">
             <div class="col-12">
                 {{ with .Params.hero.image }}
-                <div class="hero-image-dynamic" data-aos="fade-in" data-aos-delay="100"
+                <div class="hero-image-dynamic" data-aos="fade-up" data-aos-delay="400"
                     style="background-image: url('{{ . | relURL }}');">
                 </div>
                 {{ end }}

layouts/partials/map.html

@@ -1,4 +1,4 @@
-<section class="info-section py-5 my-lg-5">
+<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">

layouts/partials/mogelijkheden.html

@@ -48,7 +48,7 @@
                     <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">
+                        <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>