Update: Home added 'about' and 'mogelijkheden'

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>