New: Model template

assets/js/main.js

@@ -1,6 +1,63 @@
+const isMobile = window.innerWidth < 992;
+
 AOS.init({
-      once: true,
-      offset: 100,
-      easing: 'ease',
-      duration: 1200
+    useClassNames: false, 
+    disableMutationObserver: false,
+    
+    offset: isMobile ? 50 : 120,
+    duration: 800,
+    once: true,
+});
+
+if (isMobile) {
+    document.querySelectorAll('[data-aos="fade-left"], [data-aos="fade-right"]').forEach(el => {
+        el.setAttribute('data-aos', 'fade-up');
     });
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.3 
+  };
+
+  const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+          if (entry.isIntersecting) {
+              entry.target.classList.add('is-visible');
+          }
+      });
+  }, observerOptions);
+
+  const targets = document.querySelectorAll('.scroll-trigger, .scroll-draw-svg, .modellen-sectie');
+  targets.forEach(target => observer.observe(target));
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+    var splide = new Splide('#model-splide', {
+        type   : 'loop',
+        perPage: 2,
+        focus  : 'center',
+        perMove: 1,
+        padding: '1rem',
+        gap    : '2rem',
+        autoplay: true,
+        interval: 4000,
+        arrows : false,
+        pagination: true,
+        breakpoints: {
+            1200: {
+                perPage: 2,
+                padding: '1rem',
+            },
+            768: {
+                perPage: 1,
+                padding: '2rem',
+                gap: '1rem',
+            }
+        }
+    });
+
+    splide.mount();
+});

assets/scss/main.scss

@@ -82,12 +82,24 @@ $headings-color:       #212121;
     background-color: $van-emous-blue !important;
 }
 
+body,
+html {
+    margin: 0;
+    padding: 0;
+}
+
 body {
   font-family: $font-family-sans-serif;
   font-weight: 400;
+  line-height: 1.8em;;
   -webkit-font-smoothing: antialiased;
 }
 
+.row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 h1, h2, h3, h4, h5, h6, 
 .h1, .h2, .h3, .h4, .h5, .h6, 
 [class^="display-"] {
@@ -126,7 +138,7 @@ h6 {
 p {
     font-family: $mukta-font;
 	font-size: 18px;
-	line-height: 30px;
+	line-height: 1.8em !important;
 	font-weight: normal;
 	margin-block-start: 0;
 	margin-block-end: 0;
@@ -137,6 +149,14 @@ p {
     }
 }
 
+.text-dark {
+    color:#212121;
+}
+
+.numbers {
+    font-size: 1.15em; 
+    letter-spacing: 0.02em;
+}
 
 .panel {
     border-radius: 40px;
@@ -164,6 +184,10 @@ p {
     font-weight: 400; 
 }
 
+.py-10 {
+    padding: 4em 0 12em 0;
+}
+
 .rounded-img {
     border-radius: 20px;;
 }
@@ -214,6 +238,15 @@ p {
     opacity: 1;
 }
 
+[data-aos="zoom-in"] {
+  transform: scale(0.9) !important; 
+  transition-property: transform, opacity;
+  
+  &.aos-animate {
+    transform: scale(1);
+  }
+}
+
 .dropdown-menu {
     border: none;
     box-shadow: 0 10px 30px rgba(0,0,0,0.1);
@@ -306,6 +339,46 @@ p {
     }
 }
 
+.hero-image-single {
+    width: 100%;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 40px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    
+    min-height: 200px;
+    max-height: 200px;
+    height: 200px;
+    
+    @media (min-width: 992px) {
+        min-height: 300px;
+        max-height: 300px;
+        height: 300px;
+        aspect-ratio: 21 / 9; 
+    }
+}
+
+.hero-image-model {
+    width: 100%;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 40px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    
+    min-height: 300px;
+    max-height: 300px;
+    height: 300px;
+    
+    @media (min-width: 992px) {
+        min-height: 400px;
+        max-height: 400px;
+        height: 400px;
+        aspect-ratio: 21 / 9; 
+    }
+}
+
 // Buttons
 .btn-cta {
     display: inline-block;
@@ -335,10 +408,11 @@ p {
         top: 50%;
         transform: translateY(-50%);
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        color: #ffffff !important;
     }
 
     &:hover {
-        color: #ffffff;
+        color: #ffffff !important;
         padding-right: 80px; 
         
         &::after {
@@ -413,6 +487,22 @@ p {
     }
 }
 
+.card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+    
+    &:hover {
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+        transform: translateY(-10px) rotate(.5deg);
+    }
+}
+
+.card-secondary {
+    background-color: $van-emous-blue;
+    border-radius:30px;
+    min-height:200px;
+    padding: 2rem;
+}
+
 .modellen-sectie {
     .model-card {
         min-height: 480px; 
@@ -562,6 +652,342 @@ p {
 }
 
 // Scrollstops
-#vergunningscheck {
+#vergunningscheck,
+#modellen {
   scroll-margin-top: 100px;
+}
+
+#map canvas {
+    touch-action: pan-y !important;
+}
+
+.info-image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-size: cover;
+	background-position: 50%;
+	transition: transform .6s cubic-bezier(.165,.84,.44,1);
+	z-index: 1;
+}
+
+// SVG
+.modellen-sectie {
+    position: relative;
+    overflow: hidden;
+}
+
+.svg-bg-container {
+   // position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0.15;
+}
+
+.drawing-line {
+    stroke-dasharray: 10000; 
+    stroke-dashoffset: 10000;
+    transition: stroke-dashoffset 10s ease-in, opacity 1s ease;
+    opacity: 0;
+}
+
+.is-visible .drawing-line, 
+.is-visible.drawing-line {
+    stroke-dashoffset: 0;
+    opacity: 1;
+}
+
+// Forms
+.form-control:focus {
+    border-color: #b95913;
+    box-shadow: 0 0 0 0.25rem rgba(185, 89, 19, 0.25);
+}
+
+.form-check-input {
+    border: 1px solid #999 !important;
+    height: 1.2em;
+    width: 1.2em;
+    margin-right: 12px;
+}
+
+.form-check-input:checked {
+    background-color: #b95913;
+    border-color: #b95913 !important;
+}
+
+.form-check-input:focus {
+    border-color: #b95913 !important;
+    box-shadow: 0 0 0 0.25rem rgba(185, 89, 19, 0.25);
+}
+
+#contactModal .btn-primary {
+    background-color: #b95913;
+    border-color: #b95913;
+    color: #fff; 
+}
+
+#contactModal .btn-primary:hover, 
+#contactModal .btn-primary:active {
+    background-color: #964810;
+    border-color: #964810;
+}
+textarea {
+    resize: none;
+    border-radius: 30px !important;
+}
+
+// Slider
+#model-splide {
+    padding-bottom: 3rem; 
+
+    .splide__pagination {
+        bottom: 0;
+        
+        &__page {
+            width: 12px;
+            height: 12px;
+            background: darken($van-emous-blue, 20%);
+            border: none;
+            margin: 0 6px;
+            opacity: 0.5;
+            transition: all 0.3s ease;
+
+            &.is-active {
+                background: $van-emous-orange;
+                transform: scale(1.4);
+                opacity: 1;
+            }
+
+            &:hover {
+                opacity: 1;
+                background: $van-emous-orange;
+            }
+        }
+    }
+    .splide__track {
+        overflow: visible !important;
+    }
+    .splide__list {
+        cursor: grab; 
+        &:active { cursor: grabbing; }
+    }
+}
+
+#gallery-splide {
+    overflow: hidden; // Zorgt dat alles wat buiten de slider valt onzichtbaar is
+    padding-bottom: 40px;
+    .splide__slide {
+        transition: transform 0.3s ease;
+        &:hover {
+
+        }
+    }
+    
+    .splide__arrow {
+        background: $van-emous-orange;
+        color: white;
+        opacity: 1;
+        &:hover { background: darken($van-emous-orange, 10%); }
+    }
+
+    .splide__pagination {
+
+        
+        &__page {
+            width: 12px;
+            height: 12px;
+            background: $van-emous-blue;
+            border: none;
+            margin: 0 6px;
+            opacity: 1;
+            transition: all 0.3s ease;
+
+            &.is-active {
+                background: $van-emous-orange;
+                transform: scale(1.4);
+                opacity: 1;
+            }
+
+            &:hover {
+                opacity: 1;
+                background: $van-emous-orange;
+            }
+        }
+    }
+    .splide__track {
+        overflow: visible !important;
+    }
+    .splide__list {
+        cursor: grab; 
+        &:active { cursor: grabbing; }
+    }
+}
+
+#lightboxModal {
+    .modal-content {
+        background: transparent;
+    }
+    .modal-backdrop.show {
+        opacity: 0.9; // Lekker donker zodat de foto knalt
+    }
+    #lightboxImage {
+        max-height: 90vh; // Voorkomt dat de foto buiten beeld valt op kleine schermen
+        box-shadow: 0 0 50px rgba(0,0,0,0.5);
+    }
+}
+
+.gallery-trigger {
+    transition: opacity 0.3s ease;
+    &:hover {
+        opacity: 0.9;
+    }
+}
+
+.btn-lightbox-close {
+    position: absolute;
+    top: -20px;
+    right: -20px;
+    z-index: 1060;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    border: none;
+    background-color: $van-emous-orange; // Je primary kleur
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+    &:hover { transform: scale(1.1); color: #fff; }
+}
+
+#lightbox-splide {
+    .splide__arrow {
+        background-color: $van-emous-orange !important;
+        color: #fff !important;
+        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
+    }
+
+    .splide__track {
+        overflow: visible; // Zorgt dat pijltjes buiten de foto kunnen vallen indien gewenst
+    }
+}
+
+
+.icon-box {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    opacity: .5;
+    border-radius: 10px;
+    color: $van-emous-orange;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+
+    i {
+        font-size: 2em;
+        opacity: 1 !important;
+    }
+}
+
+// FAQ
+.faq-accordion {
+    .accordion-item {
+        border-radius: 25px !important;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        overflow: hidden;
+        border: none;
+        margin-bottom: 1.5rem;
+    }
+
+    .accordion-button {
+        padding: 2rem 3rem;
+        font-weight: 600;
+        font-size: 1.25rem;
+        color: #212121;
+        background-color: #fff;
+        box-shadow: none;
+        transition: background-color 0.3s, border-radius 0.3s;
+        
+        &::after {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3e%3cpath d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z'/%3e%3c/svg%3e");
+            background-size: 1.25rem;
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+
+        &:not(.collapsed) {
+            background-color: $van-emous-orange;
+            color: #fff;
+            border-bottom-left-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+            
+            &::after {
+                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
+            }
+        }
+
+        &:focus {
+            box-shadow: none;
+            border-color: rgba(0,0,0,.125);
+        }
+    }
+
+    .accordion-body {
+        background-color: $van-emous-orange; 
+        color: #fff;
+        padding: 0 3rem 2rem 3rem;
+        border-bottom-left-radius: 25px;
+        border-bottom-right-radius: 25px;
+
+        a {
+            color: #fff !important;
+            font-weight: 600;
+        }
+    }
+    .accordion-button {
+        font-size: 1.5rem !important;
+        font-weight:500;
+    }
+}
+
+// Footer
+.contact-icon-circle {
+    width: 60px;
+    height: 60px;
+    background-color: $van-emous-orange; // Gebruik je variabele
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0; // Voorkomt dat de cirkel platgedrukt wordt bij lange tekst
+
+    i, img {
+        color: white;
+        font-size: 1.5rem;
+        width: 24px; // Mocht je SVG's gebruiken
+    }
+}
+
+#contact-info {
+    h5 {
+        font-size: 1.25rem;
+        color: #212121;
+    }
+    p {
+        font-size: 1.1rem;
+    }
 }

content/_index.md

@@ -2,46 +2,48 @@
 title: "Home"
 
 hero:
-  title: "Zorgzame woonoplossingen met comfort en maatwerk"
-  subtitle: "Van Emous Mantelzorgwoningen begeleidt u persoonlijk bij het realiseren van een mantelzorgwoning, van kennismaking tot oplevering."
+  title: "Zorg & zelfstandigheid <br>op eigen grond"
+  subtitle: "Wij bouwen mantelzorgwoningen die naadloos aansluiten op uw levensstijl. Ons ervaren team van bouwers maakt in onze fabriek de woning exact naar uw wens. Advies is vrijblijvend."
   cta_text: "Adviesgesprek aanvragen"
   cta_link: "/contact"
   image: "/img/banner/home.jpg"
-  image_alt: "Senioren die genieten van hun nieuwe mantelzorgwoning"
+  image_alt: "Man die geniet van zijn nieuwe mantelzorgwoning"
 
 usps:
   - "Vrijblijvende offerte"
   - "Persoonlijke begeleiding"
   - "Volledige ontzorging"
   - "Woningen van hoge kwaliteit"
-  - "Project snel van start"
+  - "Erkend bouwbedrijf"
 
 info_section:
-  eyebrow: "Uw mantelzorgwoning begint hier"
-  title: "Moderne mantelzorgwoningen voor elke levensfase"
+  eyebrow: "Samen met eigen woning"
+  title: "Comfort & privacy"
   text_paragraphs:
-    - "Een mantelzorgwoning biedt u de mogelijkheid om dichtbij elkaar te wonen, met behoud van privacy en comfort. Van Emous Mantelzorgwoningen realiseert moderne mantelzorgwoningen die volledig worden afgestemd op uw wensen, situatie en toekomst."
-    - "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."
+    - paragraph: "Een mantelzorgwoning biedt de perfecte balans. U woont dichtbij elkaar, maar behoudt tegelijkertijd uw eigen plek. Wij realiseren moderne woningen die volledig worden afgestemd op uw wensen, zorgbehoefte & toekomst."
+    - paragraph: "Van de eerste vergunningscheck tot de uiteindelijke oplevering: ons eigen team van vakmensen begeleidt u persoonlijk. Met decennia ervaring in modulaire bouw garanderen wij kwaliteit, rust & een resultaat 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"
+  eyebrow: "Nieuwe naam, vertrouwde kwaliteit"
+  title: "Vakmanschap & Vertrouwen"
   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."
+    - "Onze wortels liggen in de bouw van luxe chalets, de afgelopen jaren kregen wij steeds vaker opdrachten om hoogwaardige mantelzorgwoningen te bouwen. Inmiddels hebben wij vele woningen mogen bouwen & plaatsen voor tevreden bewoners door heel Nederland."
+    - "Wij zijn geen adviesbureau of tussenpersoon, maar een team van ervaren bouwers & adviseurs. In onze eigen fabriek en de aangrenzende showroom kunt u onze woningen in alle fasen van de bouw bekijken. Wij begeleiden u persoonlijk van A tot Z: van het eerste ontwerp tot de vakkundige plaatsing."
 
   image: "/img/about-home.jpg"
   image_alt: "Van Emous brochure op een stoel"
 
 mogelijkheden_section:
-  title: "Comfortabel en dichtbij wonen met oog voor zorg"
-  intro_text: "Onze mogelijkheden helpen u om comfortabel en zelfstandig dichtbij uw dierbaren te wonen, met persoonlijke begeleiding bij elke stap."
+  title: "Onze modellen & diensten"
+  subtitle: "Wat wij voor u doen"
+  intro_text: "Wij staan voor u klaar om u persoonlijk te begeleiden. Van de vergunning tot aan service & onderhoud, bij ons bent u in goede handen."
   kaarten:
-    - title: "Modellen"
-      text: "Bekijk onze verschillende modellen mantelzorgwoningen, volledig aan te passen aan uw wensen en situatie."
+    - title: "Zorgwoningen"
+      text: "Bekijk onze verschillende modellen woningen, volledig aan te passen aan uw wensen en situatie."
       link_text: "Bekijk de modellen"
-      link_url: "/modellen"
+      link_url: "#modellen"
       image: "/img/mogelijkheden.jpg"
       is_large: true 
     - title: "Pre mantelzorgwoning"
@@ -56,5 +58,19 @@ mogelijkheden_section:
       link_url: "#vergunningscheck"
       image: "/img/mogelijkheden-vergunning.jpg"
       is_large: false
----
 
+faq:
+  title: "Veelgestelde vragen"
+  list:
+    - question: "Wat is een mantelzorgwoning precies?"
+      answer: "Voor mensen die zorg nodig hebben en dicht bij familie willen wonen, zonder hun eigen privacy & zelfstandigheid te verliezen."
+    - question: "Voor wie is een mantelzorgwoning bedoeld?"
+      answer: "Onze woningen zijn bedoeld voor iedereen die mantelzorg verleent of ontvangt, van senioren tot mensen met een beperking."
+    - question: "Wat zijn de kosten van een mantelzorgwoning?"
+      answer: "De kosten bestaan uit de woning zelf, grondwerkzaamheden zoals infrastructuur aansluiten & het transport van de woning naar uw kavel toe."
+    - question: "Hoe werkt de vergunningsvrije regeling?"
+      answer: "In veel gevallen mag u een mantelzorgwoning plaatsen zonder omgevingsvergunning, mits u voldoet aan de landelijke regels. U kan gebruik maken van onze [vergunningcheck](#vergunningscheck) voor een snel overzicht of neem [contact](/contact) op voor vrijblijvend persoonlijk advies."
+    - question: "Zijn de woningen conform bouwbesluit gebouwd?"
+      answer: "Wij bouwen conform [Besluit Bouwwerken Leefomgeving (BBL)](https://iplo.nl/thema/bouw/bouwen-vergunning-melding/bijbehorende-bouwwerken/) voor onze permanent te plaatsen woningen. Wij nodigen u graag uit in onze showroom & fabriek om zelf te kwaliteit te ervaren."
+
+---

content/modellen/model-berkel.md

@@ -0,0 +1,69 @@
+---
+title: "Model Berkel"
+subtitle: "Grote ruimtes"
+price: 89000
+image: "/img/modellen/berkel/berkel-001-800x.webp"
+featured: true
+weight: 1
+layout: model
+
+hero:
+  image: "/img/modellen/berkel/berkel-001-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."
+  summary:
+    - property: "Afmetingen"
+      value: "750cm x 1200cm"
+      icon: "bi-arrows-fullscreen"
+    - property: "Totaal oppervlakte"
+      value: "90m²"
+      icon: "bi-house-door"
+    - property: "Slaapkamer(-s)"
+      value: "2 stuks - 13m² / 8m²"
+      icon: "bi-moon-stars"
+    - property: "Berging"
+      value: "5m²"
+      icon: "bi-box-seam"
+    - property: "Woonkamer"
+      value: "23m²"
+      icon: "bi-lamp"
+    - property: "Open keuken"
+      value: "16m²"
+      icon: "bi-cup-hot"
+
+gallery:
+  - image: "/img/modellen/berkel/berkel-001-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-002-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-003-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-004-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-005-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-006-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-007-800x.webp"
+    alt: "Zorgwoning Berkel"
+  - image: "/img/modellen/berkel/berkel-008-800x.webp"
+    alt: "Zorgwoning Berkel"
+
+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.
+
+### 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.
+
+### 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.

content/modellen/model-delta.md

@@ -1,8 +1,8 @@
 ---
-title: "Model Alfa"
+title: "Model Delta"
 subtitle: "Compact en comfortabel"
 price: 89000
-image: "/img/modellen/model-001.jpg"
+image: "/img/modellen/model-003.jpg"
 featured: true
 weight: 1
 ---

content/privacybeleid.md

@@ -0,0 +1,30 @@
+---
+title: "Privacybeleid"
+
+hero:
+  title: "Privacybeleid"
+  eyebrow: "Hoe wij met uw data omgaan"
+  image: "/img/banner/privacy.webp"
+  image_alt: "Stel leest de krant"
+
+---
+
+Bij Van Emous Mantelzorgwoningen bouwen we aan een fijn thuis voor u of uw naasten. Daar hoort een veilig gevoel bij, ook online. Om eerlijk te zijn: wij waarderen uw bezoek en uw interesse in onze woningen vele malen meer dan uw data. Daarom houden we het graag simpel en transparant.
+
+## Geen Cookies
+Onze website is volledig cookie-vrij. We volgen u niet over het internet, plaatsen geen marketing-trackers en gebruiken geen analytische software die inbreuk maakt op uw privacy. U kunt rustig rondkijken zonder dat er een digitaal kruimelspoor achterblijft.
+
+## Uw veiligheid staat voorop
+Onze website is uiteraard beveiligd met een SSL-certificaat (het bekende slotje in de adresbalk). Dit betekent dat alle informatie die u via de website met ons deelt, versleuteld wordt verzonden.
+
+## Geen onnodige toegangen
+Wij hebben geen affiliaties met andere partijen en verkopen of delen uw gegevens nooit met derden. 
+
+## Hoe lang bewaren we uw gegevens?
+Wij bewaren uw gegevens niet langer dan noodzakelijk:
+- **6 maanden -** Uw gegevens worden geanonimiseerd.
+- **12 maanden -** Uw gegevens worden volledig uit onze systemen verwijderd.
+- **Uitzondering -** Bij financiële transacties bewaren we gegevens langer conform wetgeving.
+
+## Uw rechten
+U heeft altijd het recht om uw gegevens in te zien, te laten corrigeren of eerder te laten verwijderen. Neem hiervoor contact met onze medewerker [Machiel Heinen](mailto:machiel@vanemousmantelzorgwoningen.nl).

hugo.toml

@@ -79,14 +79,15 @@ paginate = 10
 ## Params
 [params]
     description = "Van Emous bouwt hoogwaardige mantelzorgwoningen op maat. Duurzaam, comfortabel en volledig ontzorgd."
-    telefoon = "+31 6 15116762"
+    telefoon = "+<span class='numbers'>31 6 15116762</span>"
     telefoon_link = "+31615116762"
     email = "info@vanemousmantelzorgwoningen.nl"
     address = "Adresgegevens hier..."
+    kvk = "91908671"
     
     # SEO & Socials
     author = "Van Emous"
-    logo = "img/logo.svg"
+    logo = "img/logo-animated-2.svg"
     favicon = "favicon.ico"
     og_image = "img/og-image.jpg"
     

hugo_stats.json

@@ -4,6 +4,7 @@
       "a",
       "article",
       "body",
+      "br",
       "button",
       "div",
       "footer",
@@ -11,6 +12,7 @@
       "h1",
       "h2",
       "h3",
+      "h4",
       "h5",
       "h6",
       "head",
@@ -35,43 +37,71 @@
       "span",
       "strong",
       "svg",
+      "textarea",
       "title",
       "ul"
     ],
     "classes": [
+      "accordion",
+      "accordion-body",
+      "accordion-button",
+      "accordion-collapse",
+      "accordion-header",
+      "accordion-item",
+      "align-items-bottom",
       "align-items-center",
       "align-items-end",
+      "align-items-start",
       "align-middle",
       "bg-light",
       "bg-primary",
       "bg-secondary",
+      "bg-transparent",
       "bg-white",
       "bi",
+      "bi-arrows-fullscreen",
+      "bi-box-seam",
+      "bi-chevron-left",
       "bi-chevron-right",
+      "bi-cup-hot",
       "bi-envelope-fill",
       "bi-geo-alt-fill",
+      "bi-house-door",
       "bi-house-door-fill",
+      "bi-lamp",
+      "bi-moon-stars",
       "bi-telephone-fill",
+      "bi-x-lg",
+      "border",
       "border-0",
       "border-start",
       "brochure-form",
       "btn",
+      "btn-close",
       "btn-cta",
+      "btn-lightbox-close",
       "card",
+      "card-secondary",
+      "col-11",
       "col-12",
       "col-6",
-      "col-8",
       "col-auto",
       "col-lg-3",
       "col-lg-4",
       "col-lg-5",
       "col-lg-6",
       "col-lg-7",
+      "col-lg-8",
+      "col-md-10",
+      "col-md-11",
       "col-md-4",
       "col-md-5",
       "col-md-6",
       "col-md-8",
+      "col-sm-12",
       "collapse",
+      "collapsed",
+      "contact-icon-circle",
       "contact-info",
       "container",
       "content",
@@ -83,14 +113,16 @@
       "d-lg-none",
       "d-none",
       "display-3",
-      "display-4",
       "display-5",
+      "drawing-line",
       "dropdown",
       "dropdown-item",
       "dropdown-menu",
       "dropdown-toggle",
+      "fade",
       "fade-left",
       "fade-up",
+      "faq-accordion",
       "flex-column",
       "flex-nowrap",
       "footer-inner",
@@ -99,6 +131,7 @@
       "form-check-input",
       "form-check-label",
       "form-control",
+      "form-label",
       "form-select",
       "fs-6",
       "fw-bold",
@@ -108,14 +141,19 @@
       "g-4",
       "g-5",
       "g-lg-4",
+      "gallery-trigger",
       "h-100",
-      "h2",
+      "h1",
+      "h3",
       "h4",
       "h5",
       "h6",
       "hero-image-dynamic",
+      "hero-image-model",
+      "hero-image-single",
       "hero-rounded-img",
       "hero-section",
+      "icon-box",
       "icon-circle",
       "img-fluid",
       "info-content",
@@ -124,8 +162,6 @@
       "justify-content-between",
       "justify-content-center",
       "justify-content-end",
-      "lead",
-      "lead-text",
       "list-unstyled",
       "mb-0",
       "mb-1",
@@ -133,24 +169,37 @@
       "mb-3",
       "mb-4",
       "mb-5",
+      "mb-lg-3",
       "mb-lg-5",
       "me-2",
       "me-3",
       "me-lg-5",
+      "modal",
+      "modal-body",
+      "modal-content",
+      "modal-dialog",
+      "modal-dialog-centered",
+      "modal-header",
+      "modal-lg",
+      "modal-title",
+      "modal-xl",
       "model-card",
       "model-card-bg",
       "model-card-overlay",
       "model-info",
+      "model-section",
       "modellen-sectie",
       "ms-1",
       "ms-auto",
       "ms-lg-3",
+      "mt-2",
       "mt-3",
       "mt-4",
       "mt-5",
       "mt-auto",
       "mt-lg-5",
       "mx-auto",
+      "my-4",
       "my-5",
       "my-lg-5",
       "nav-item",
@@ -163,17 +212,24 @@
       "navbar-nav",
       "navbar-toggler",
       "navbar-toggler-icon",
+      "numbers",
       "object-fit-cover",
       "offset-lg-1",
       "opacity-10",
       "opacity-90",
       "overflow-hidden",
+      "p-0",
+      "p-3",
       "p-4",
       "p-lg-5",
+      "p-md-4",
       "panel",
       "pb-3",
+      "pb-4",
       "pb-lg-5",
       "pe-lg-5",
+      "pointer-events-none",
+      "position-absolute",
       "position-relative",
       "possibilities",
       "price-badge",
@@ -184,6 +240,7 @@
       "px-4",
       "px-5",
       "px-lg-5",
+      "py-10",
       "py-2",
       "py-3",
       "py-4",
@@ -193,42 +250,76 @@
       "rounded-img",
       "rounded-pill",
       "row",
+      "scroll-draw-svg",
       "shadow",
       "shadow-sm",
+      "show",
       "small",
+      "splide",
+      "splide__arrow",
+      "splide__arrow--next",
+      "splide__arrow--prev",
+      "splide__arrows",
+      "splide__list",
+      "splide__slide",
+      "splide__track",
+      "start-0",
       "sticky-top",
       "stretched-link",
+      "svg-bg-container",
       "text-center",
       "text-dark",
       "text-decoration-none",
       "text-md-end",
       "text-muted",
       "text-primary",
-      "text-secondary",
       "text-uppercase",
       "text-white",
       "text-white-50",
+      "top-0",
       "top-bar",
-      "tracking-widest",
       "usp-bar",
       "usp-item",
       "usp-text",
       "w-100"
     ],
     "ids": [
+      "accordionFAQ",
+      "achternaam",
       "btnSearch",
+      "callme",
       "col-map",
       "col-results",
+      "collapseFAQ0",
+      "collapseFAQ1",
+      "collapseFAQ2",
+      "collapseFAQ3",
+      "collapseFAQ4",
+      "contactModal",
+      "ecologisch-en-duurzaam-ontwerp",
+      "email",
       "f-aanhef",
       "f-achternaam",
       "f-email",
       "f-telefoon",
+      "faq",
       "form-success",
+      "gallery-splide",
+      "geen-cookies",
+      "geen-onnodige-toegangen",
       "hn-input",
+      "hoe-lang-bewaren-we-uw-gegevens",
+      "hoogwaardige-moderne-materialen",
       "lead-form",
+      "lightbox-splide",
+      "lightboxModal",
       "map",
+      "model-eigenschappen",
+      "model-splide",
+      "modellen",
       "navbarDropdownmantelzorgwoningen",
       "navbarNav",
+      "nieuwsbrief",
       "panel",
       "pc-input",
       "privacyCheck",
@@ -237,7 +328,13 @@
       "res-kavelnummer",
       "res-kavelvrij",
       "res-max",
-      "vergunningscheck"
+      "riant-wonen-op-90-m",
+      "telephone",
+      "uw-rechten",
+      "uw-veiligheid-staat-voorop",
+      "vergunningscheck",
+      "voornaam",
+      "waarom-kiezen-voor-de-berkel"
     ]
   }
 }

layouts/_default/model.html

@@ -0,0 +1,147 @@
+{{ define "main" }}
+<section class="model-section py-4">
+    <div class="container">
+        <div class="row">
+            {{ partial "hero-model.html" . }}
+        </div>
+    </div>
+</section>
+
+{{ with .Params.gallery }}
+<div id="gallery-splide" class="splide mt-2" aria-label="Afbeeldingen van model {{ $.Title }}">
+    <div class="splide__track">
+        <ul class="splide__list">
+            {{ range . }}
+            <li class="splide__slide text-center">
+                <img src="{{ .image | relURL }}" 
+                    alt="{{ .alt }}" 
+                    class="img-fluid rounded-4 shadow-sm gallery-trigger" 
+                    style="height: 400px; object-fit: cover; cursor: pointer;"
+                    data-bs-toggle="modal" 
+                    data-bs-target="#lightboxModal"
+                    onclick="const bigImg = this.src.replace('800x', '3200x'); document.getElementById('lightboxImage').src = bigImg;">
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+</div>
+{{ end }}
+
+<div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content bg-transparent border-0">
+            <div class="modal-body p-0">
+                <button type="button" class="btn-lightbox-close" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+
+                <div id="lightbox-splide" class="splide">
+                    <div class="splide__track">
+                        <ul class="splide__list">
+                            {{ range .Params.gallery }}
+                            <li class="splide__slide text-center">
+                                {{ $bigImg := replace .image "800x" "3200x" }}
+                                <img data-splide-lazy="{{ $bigImg | relURL }}" class="img-fluid rounded-4" alt="{{ .alt }}">
+                            </li>
+                            {{ end }}
+                        </ul>
+                    </div>
+                    
+                    <div class="splide__arrows">
+                        <button class="splide__arrow splide__arrow--prev"><i class="bi bi-chevron-left"></i></button>
+                        <button class="splide__arrow splide__arrow--next"><i class="bi bi-chevron-right"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-11 mx-auto">
+            <div class="row g-5">
+                <div class="col-md-8">
+                    <article>
+                        <div class="content mt-4">
+                            {{ .Content }}
+                        </div>
+                </article>
+                </div>
+                <div class="col-md-4">
+                    <div class="card-secondary">
+                        <h4>Plattegrond bekijken</h4>
+                        <p>Maatwerk is mogelijk.</p>
+                        <div class="bg-white shadow p-4 rounded-4 mb-4">
+                            <img class="img-fluid" src="{{ .Params.plattegrond }}">
+                        </div>
+                        <a class="btn btn-cta">Download plattegrond</a>
+                        
+                    </div>
+                    
+                </div>
+            </div>       
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const mainGallery = document.querySelector('#gallery-splide');
+        const lightboxEl = document.querySelector('#lightbox-splide');
+        
+        if (mainGallery && lightboxEl) {
+            // 1. De thumbnail slider (gecombineerde instellingen)
+            const primarySplide = new Splide(mainGallery, {
+                type   : 'loop',
+                perPage: 4,
+                focus  : 'center',
+                perMove: 1,
+                padding: '1rem',
+                gap    : '2rem',
+                autoplay: true,
+                interval: 4000,
+                arrows : false,
+                pagination: true,
+                breakpoints: {
+                    1200: { perPage: 2, padding: '1rem' },
+                    768: { perPage: 1, padding: '2rem', gap: '1rem' }
+                }
+            }).mount();
+
+            // 2. De lightbox slider
+            const lightboxSplide = new Splide(lightboxEl, {
+                type: 'fade', 
+                rewind: true,
+                pagination: false,
+                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();
+            });
+        }
+    });
+</script>
+{{ end }}

layouts/_default/single.html

@@ -1,8 +1,15 @@
 {{ define "main" }}
-    <article class="py-5">
-        <h1 class="display-4 fw-bold">{{ .Title }}</h1>
-        <div class="content mt-4">
-            {{ .Content }}
+<section class="info-section">
+    <div class="container">
+        <div class="align-items-center">
+            <article>
+                {{ partial "hero-single.html" . }}
+                <div class="content mt-4 col-md-11 mx-auto">
+                    {{ .Content | markdownify }}
+                </div>
+            </article>
         </div>
-    </article>
+    </div>
+</section>
+    
 {{ end }}

layouts/index.html

@@ -1,7 +1,6 @@
 {{ define "main" }}
     {{ partial "hero.html" . }}
     {{ partial "usps.html" . }}
-
     {{ if .Params.info_section }}
     <section class="info-section py-5 my-lg-5">
         <div class="container">
@@ -30,9 +29,9 @@
                     
                     <div class="info-content">
                         {{ range .Params.info_section.text_paragraphs }}
-                            <p class="lead-text mb-4 text-muted">
-                                {{ . | markdownify }}
-                            </p>
+                            <div class="mb-4">
+                                {{ .paragraph | markdownify }}
+                            </div>
                         {{ end }}
                     </div>
                 </div>
@@ -41,15 +40,16 @@
         </div>
     </section>
     {{ end }}
+    
+    {{ partial "mogelijkheden.html" . }}
+    {{ partial "map.html" . }}
+    {{ partial "modellen.html" . }}
 
     {{ if .Content }}
     <div class="container my-5">
         {{ .Content }}
     </div>
     {{ end }}
-    {{ partial "modellen.html" . }}
-    {{ partial "mogelijkheden.html" . }}
-    {{ partial "map.html" . }}
 
     {{ if .Params.about_section }}
     <section class="info-section py-5 my-lg-5">
@@ -61,7 +61,7 @@
                         {{ 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">
+                             class="img-fluid rounded-img shadow">
                         {{ end }}
                     </div>
                 </div>
@@ -79,7 +79,7 @@
                     
                     <div class="info-content">
                         {{ range .Params.about_section.text_paragraphs }}
-                            <p class="lead-text mb-4 text-muted">
+                            <p class="mb-4">
                                 {{ . | markdownify }}
                             </p>
                         {{ end }}
@@ -90,4 +90,9 @@
         </div>
     </section>
     {{ end }}
+
+    {{ partial "faq.html" . }}
+
+    {{ partial "footer-contact.html" . }}
+
 {{ end }}

layouts/partials/faq.html

@@ -0,0 +1,38 @@
+{{ $home := .Site.Home }}
+{{ with $home.Params.faq }}
+<section id="faq" class="py-5 bg-light">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <div class="d-block pb-4 text-center">
+                    <p class="h6 text-primary">{{ .subtitle | default "Een snel overzicht" }}</p>
+                    <h2 class="display-3">{{ .title | default "Veelgestelde vragen" }}</h2>
+                </div>
+                <div class="accordion faq-accordion" id="accordionFAQ">
+                    
+                    {{ range $index, $element := .list }}
+                    <div class="accordion-item mb-3 border-0 shadow-sm">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button {{ if ne $index 0 }}collapsed{{ end }}" 
+                                    type="button" 
+                                    data-bs-toggle="collapse" 
+                                    data-bs-target="#collapseFAQ{{ $index }}">
+                                {{ $element.question }}
+                            </button>
+                        </h2>
+                        <div id="collapseFAQ{{ $index }}" 
+                            class="accordion-collapse collapse {{ if eq $index 0 }}show{{ end }}" 
+                            data-bs-parent="#accordionFAQ">
+                            <div class="accordion-body">
+                                {{ $element.answer | markdownify }}
+                            </div>
+                        </div>
+                    </div>
+                    {{ end }}
+
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/partials/footer-contact.html

@@ -0,0 +1,87 @@
+<section>
+    <div class="container py-5">
+        <div class="row">
+            <div class="col-md-6">
+                <p class="h6 text-primary">Neem contact op</p>
+                <h2 class="display-3">Benieuwd naar de mogelijkheden?</h2>
+
+                <div class="row g-4">
+            
+                    <div class="col-12 d-flex align-items-start">
+                        <div class="contact-icon-circle me-3">
+                            <i class="bi bi-telephone-fill"></i> </div>
+                        <div>
+                            <h5 class="fw-bold mb-1">Telefoon</h5>
+                            <p class="mb-0 text-muted"><a href="+31341275147" class="text-muted numbers">0341 - 275 147</a> </p>
+                        </div>
+                    </div>
+
+                    <div class="col-12 d-flex align-items-start">
+                        <div class="contact-icon-circle me-3">
+                            <i class="bi bi-envelope-fill"></i>
+                        </div>
+                        <div>
+                            <h5 class="fw-bold mb-1">E-mail</h5>
+                            <p class="mb-0 text-muted"><a href="info@vanemousmantelzorgwoningen.nl" class="text-muted">info@vanemousmantelzorgwoningen.nl</a></p>
+                        </div>
+                    </div>
+
+                    <div class="col-12 d-flex align-items-start">
+                        <div class="contact-icon-circle me-3">
+                            <i class="bi bi-geo-alt-fill"></i>
+                        </div>
+                        <div>
+                            <h5 class="fw-bold mb-1">Adres</h5>
+                            <p class="mb-0 text-muted"><a href="https://www.google.com/maps/place/Keizerswoert+19,+3881+LE+Putten/@52.2688553,5.5817873,17z/data=!3m1!4b1!4m6!3m5!1s0x47c6367cdb1ed75f:0x3ee3272c1a65f9ac!8m2!3d52.268852!4d5.5843622!16s%2Fg%2F11c16gl4zp?entry=ttu&g_ep=EgoyMDI2MDIyNS4wIKXMDSoASAFQAw%3D%3D" class="text-muted"> Keizerswoert <span class="numbers">19</span>, <span class="numbers">3881</span> LE Putten</a></p>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="col-md-6">
+                <form action="jouw-verwerkings-url" method="POST">
+                    <div class="row g-4">
+                        <div class="col-md-6">
+                            <label for="voornaam" class="form-label">Voornaam</label>
+                            <input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label for="achternaam" class="form-label">Achternaam</label>
+                            <input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label for="email" class="form-label">E-mailadres</label>
+                            <input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label for="telephone" class="form-label">Telefoon</label>
+                            <input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required>
+                        </div>
+
+                        <div class="col-12">
+                            <label for="" class="form-label">Uw bericht</label>
+                            <textarea class="form-control bg-light border-0" rows="6"></textarea>
+                        </div>
+
+                        <div class="col-12">
+                            <div class="form-check mb-2">
+                                <input class="form-check-input" type="checkbox" id="nieuwsbrief" name="nieuwsbrief" checked>
+                                <label class="form-check-label" for="nieuwsbrief">
+                                    Ja, ik meld mij aan voor de nieuwsbrief en blijf graag op de hoogte.
+                                </label>
+                            </div>
+
+                            <div class="">
+                                <p class=" py-2 small">U gaat bij verzenden akkoord met de verwerking van gegevens zoals beschreven in het privacybeleid.</p>
+                                <button type="submit" class="btn btn-cta">Verstuur aanvraag</button>
+                            </div>
+                        </div>
+                    </div>                    
+                </form>
+            </div>
+        </div>
+    </div>
+</section>

layouts/partials/footer.html

@@ -37,7 +37,7 @@
                         <div class="icon-circle me-3"><i class="bi bi-telephone-fill"></i></div>
                         <div>
                             <span class="d-block small text-muted">Telefoon</span>
-                            <a href="tel:{{ .Site.Params.telefoon }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.telefoon }}</a>
+                            <a href="tel:{{ .Site.Params.telefoon_link }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.telefoon | markdownify }}</a>
                         </div>
                     </div>
                     <div class="d-flex align-items-center mb-3">
@@ -61,7 +61,7 @@
 
             <div class="row small text-muted">
                 <div class="col-md-8">
-                    Copyright © {{ now.Format "2006" }} | Van Emous Mantelzorgwoningen | kvk: {{ .Site.Params.kvk }}
+                    Copyright © {{ now.Format "2006" }} | Van Emous Mantelzorgwoningen | kvk: {{ .Site.Params.kvk | markdownify }}
                 </div>
                 <div class="col-md-4 text-md-end">
                     <a href="/sitemap" class="text-decoration-none text-muted me-3">Sitemap</a>
@@ -72,6 +72,68 @@
     </div>
 </footer>
 
+<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content rounded-4 border-0 shadow p-lg-5 p-md-4">
+        <div class="modal-header border-0">
+            <div class="row">
+                <h6 class="text-primary d-lg-inline-block">Een compleet overzicht</h6>
+                <h5 class="modal-title h3 d-block">Informatie brochure</h5>
+            </div>
+            
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body p-4">
+            <form action="jouw-verwerkings-url" method="POST">
+                <div class="row mb-3">
+                    <div class="col-md-6">
+                        <label for="voornaam" class="form-label">Voornaam</label>
+                        <input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="achternaam" class="form-label">Achternaam</label>
+                        <input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required>
+                    </div>
+                </div>
+                <div class="row mb-3">
+                    <div class="col-md-6">
+                        <label for="email" class="form-label">E-mailadres</label>
+                        <input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="telephone" class="form-label">Telefoon</label>
+                        <input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required>
+                    </div>
+                </div>
+
+                <hr class="my-4">
+
+                <div class="form-check mb-2">
+                    <input class="form-check-input" type="checkbox" id="nieuwsbrief" name="nieuwsbrief">
+                    <label class="form-check-label" for="nieuwsbrief">
+                        Ja, ik meld mij aan voor de nieuwsbrief en blijf graag op de hoogte.
+                    </label>
+                </div>
+                <div class="form-check mb-4">
+                    <input class="form-check-input" type="checkbox" id="callme" name="callme" required>
+                    <label class="form-check-label" for="callme">
+                        Ik wil graag vrijblijvend & persoonlijk advies ontvangen
+                    </label>
+                </div>
+
+                <div class="">
+                    <p class=" py-4 small">U gaat bij verzenden akkoord met de verwerking van gegevens zoals beschreven in het privacybeleid.</p>
+                    <button type="submit" class="btn btn-cta">Verstuur aanvraag</button>
+                    
+                </div>
+            </form>
+        </div>
+        </div>
+    </div>
+</div>
+
 {{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }}
 {{ if $js }}
     {{ $js = $js | resources.Minify | resources.Fingerprint }}

layouts/partials/head.html

@@ -23,6 +23,8 @@
 {{ end }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
 
 {{ with resources.Get "js/main.js" | resources.Minify | resources.Fingerprint }}
     <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>
@@ -40,4 +42,6 @@
 <meta property="twitter:url" content="{{ .Permalink }}">
 <meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
 <meta property="twitter:description" content="{{ $description }}">
-<meta property="twitter:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
+<meta property="twitter:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
+
+<script defer data-domain="vanemous.start-it.nl" src="https://stats.start-it.nl/js/script.js"></script>

layouts/partials/header.html

@@ -3,9 +3,9 @@
         <div class="container d-flex justify-content-between align-items-center">
             <nav class="contact-info" aria-label="Contactinformatie">
                 {{ if .Site.Params.telefoon }}
-                    <a href="tel:{{ .Site.Params.telefoon | urlize }}" class="me-lg-5 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon }}">
+                    <a href="tel:{{ .Site.Params.telefoon_link | urlize }}" class="me-lg-5 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon_link }}">
                         <i class="bi bi-telephone-fill fs-6 align-middle" aria-hidden="true"></i> 
-                        <span class="ms-1">{{ .Site.Params.telefoon }}</span>
+                        <span class="ms-1">{{ .Site.Params.telefoon | markdownify }}</span>
                     </a>
                 {{ end }}
                 
@@ -77,11 +77,12 @@
                 {{ end }}
 
                 <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">
+                    <a href="/brochure" class="btn btn-cta" role="button" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
                         Gratis brochure aanvragen
                     </a>
                 </li>
             </ul>
         </div>
     </div>
-</nav>
+</nav>
+

layouts/partials/hero-model.html

@@ -0,0 +1,43 @@
+{{ $hero := .Params.hero }}
+
+{{ if $hero.image }}
+    <div class="hero-image-model mb-5" data-aos="fade-up" data-aos-delay="400"
+        style="background-image: url('{{ $hero.image | relURL }}');">
+    </div>
+{{ end }}
+
+<div class="col-md-11 mx-auto">
+    {{ if $hero.eyebrow }}
+        <p class="h6 text-primary" data-aos="fade-in" data-aos-delay="600">{{ $hero.eyebrow | markdownify }}</p>
+    {{ end }}
+    
+    <h1 class="h1 display-3 mb-lg-3" data-aos="fade-in" data-aos-delay="100">
+        {{ $hero.title | default .Title | markdownify }}
+    </h1>
+    
+    {{ if $hero.paragraph }}
+        <p class="" data-aos="fade-in" data-aos-delay="200">{{ $hero.paragraph | markdownify }}</p>
+    {{ end }}
+
+    {{ if $hero.summary }}
+        <div id="model-eigenschappen" class="row g-3 mt-2">
+            {{ 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="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">
+                            {{ .property }}
+                        </span>
+                        <span class="fw-bold d-block">{{ .value }}</span>
+                    </div>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    {{ end }}
+</div>

layouts/partials/hero-single.html

@@ -0,0 +1,20 @@
+<section class="hero-section">
+    <div class="container">
+        <div class="row align-items-end">
+            <div class="col-md-11 mx-auto">
+                <p class="h6 text-primary">{{ .Params.hero.eyebrow | markdownify }}</p>
+                <h1 class="h1 display-3 mb-lg-3" data-aos="fade-in" data-aos-delay="100">{{ .Params.hero.title | markdownify }}</h1>
+            </div>
+        </div>
+        
+        <div class="row mt-4">
+            <div class="col-12">
+                {{ with .Params.hero.image }}
+                <div class="hero-image-single" data-aos="fade-up" data-aos-delay="400"
+                    style="background-image: url('{{ . | relURL }}');">
+                </div>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+</section>

layouts/partials/hero.html

@@ -4,15 +4,15 @@
             <div class="col-lg-7">
                 <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-right" data-aos-delay="600">
+                <div class="d-none d-lg-block" data-aos="fade-right" data-aos-delay="600">
+                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
                         {{ .Params.hero.cta_text }}
                     </a>
                 </div>
             </div>
             
             <div class="col-lg-5">
-                <p class="lead mb-2" data-aos="fade-in" data-aos-delay="100">
+                <p class="border-start ps-4" data-aos="fade-in" data-aos-delay="100">
                     {{ .Params.hero.subtitle | markdownify }}
                 </p>
 

layouts/partials/map.html

@@ -1,7 +1,7 @@
 <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">
+      <div class="mb-4 col-md-8">
         <h6 class="text-primary">Doe een vooronderzoek</h6>
         <h2 class="display-5 fw-bold">Toets uw kavel</h2>
         <p>U kunt geheel vrijblijvend een vooronderzoek doen naar uw mogelijkheden. Voer uw (plaatsing-)adres in en krijg direct resultaat en een uitgebreid verslag ontvangt u binnen 5 minuten per email.</p>
@@ -9,7 +9,7 @@
       </div>
     </div>
     
-    <div class="row flex-nowrap g-5 h-100" style="min-height: 600px;" data-aos="fade-in" data-aos-delay="100"> 
+    <div class="row flex-nowrap g-5 h-100" style="min-height: 400px;" data-aos="zoom-in" data-aos-offset="500" data-aos-delay="100"> 
       
       <div id="col-map" class="col-12 mb-3" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
         <div class="panel overflow-hidden shadow" style="height: 600px; position: relative;border:2px solid #fff;">
@@ -20,7 +20,7 @@
               <button id="btnSearch" class="btn btn-cta">Analyseer Kavel</button>
             </div>
           </div>
-          <div id="map" style="width: 100%; height: 100%; background: #eee;"></div>
+          <div id="map" style="width: 100%; height: 100%; background: #eee;;"></div>
         </div>
       </div>
 

layouts/partials/mogelijkheden.html

@@ -1,24 +1,33 @@
 {{ with .Params.mogelijkheden_section }}
+
 <section class="possibilities py-5 my-lg-5">
     <div class="container">
         <div class="row mb-5">
             <div class="col-lg-7">
-                <span class="text-secondary text-uppercase tracking-widest mb-2 d-block">Mogelijkheden</span>
-                <h2 class="display-5 fw-bold mb-4">{{ .title }}</h2>
+                <span class="text-primary h6 mb-2 d-block" data-aos="fade-right" data-aos-delay="0">{{ .subtitle }}</span>
+                <h2 class="display-5 fw-bold mb-4" data-aos="fade-right" data-aos-delay="100">{{ .title }}</h2>
             </div>
-            <div class="col-lg-5 ps-lg-5 d-flex align-items-center">
+            <div class="col-lg-5 ps-lg-5 d-flex align-items-center" data-aos="fade-left" data-aos-delay="200">
                 <p class="border-start ps-4">{{ .intro_text }}</p>
             </div>
         </div>
 
         <div class="row g-4">
-            {{ range .kaarten }}
-                {{ if .is_large }}
-                <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">
+            {{ range $i, $e := .kaarten }}
+            {{ $delay := add 400 (mul $i 200) }} {{ if .is_large }}
+                <div class="col-lg-6" data-aos="fade-right" data-aos-delay="{{ $delay }}">
+                    <div class="card h-100 border-0 overflow-hidden rounded-4 bg-primary text-white position-relative">
+                        
+                        <div class="position-absolute svg-bg-container start-0 top-0 w-100 h-100 d-flex align-items-center pointer-events-none" style="opacity: 0.1; z-index: 0;">
+                            <svg class="scroll-draw-svg" width="100%" height="100%" viewBox="30 0 129 238" fill="none">
+                                <path class="drawing-line" style="transition: stroke-dashoffset 10s ease-in, opacity 1s ease;" d="m 20.442137,235.76187 c 7.97,0.148 15.26,0.282 15.26,0.282 0,0 5.6,-29.107 3.44,-44.825 -2.16,-15.684 -20.17,-35.483 -15.56,-36.094 4.6,-0.613 21.99,23.604 20.57,15.403 -1.42,-8.196 2.39,-70.709097 4.53,-56.701 2.13,14.032 1.45,62.792 6.57,53.289 5.11,-9.475 19.71,-35.554 15.97,-24.644 -3.75,10.94 -17.18,32.025 -10.65,30.711 6.52,-1.311 29.94,-2.169 27.07,-19.195 -2.86,-16.988 -6.81,-20.778 -1.18,-33.053 5.62,-12.233 5.51,-18.799 -2.42,-30.005497 -7.92,-11.2069 -13.74,-11.4238 -11.99,-24.4402 1.74,-12.9824 11.4,-13.3108 -2.95,-24.7501 -14.37,-11.461 -30.29,-42.48843064 -25.74,-40.1119497 4.56,2.37338 -13.59,1.52749 -13.42,15.9877497 0.16,14.4944 7.32,14.8073 4.17,24.1056 -3.15,9.32 -16,29.2428 -10.04,36.0531 5.97,6.8103 13.92,16.6168 2.92,27.978297 -11.04,11.415 -25.6900002,-5.298 -25.4900002,17.596 0.2,22.987 14.8300002,33.06 14.9200002,41.984 0.09,8.935 1.51,17.921 8.82,21.831 7.3,3.904 40.06,-2.736 36.12,-4.316 -3.95,-1.583 -9.71,9.422 -8.84,25.838 0.87,16.455 -3.64,24.61 7.59,26.321 11.19,1.704 20.97,-1.103 20.83,-10.805 -0.16,-9.688 -10.56,-50.755 -5.27,-46.178 5.28,4.576 13.26,15.135 14.46,9.242 1.21,-5.887 0.4,-15.507 0.4,-15.507 0,0 -1.31,-40.481 1.48,-28.661 2.78,11.836 4.61,43.586 9.010003,35.573 4.4,-7.991 13.81,-23.167 8.85,-12.288 -4.98,10.913 -15.210003,19.514 -16.370003,28.366 -1.15,8.868 5.27,3.823 15.550003,-1.85 10.24,-5.657 22.41,-9.038 17.68,-20.917 -4.73,-11.873 -0.87,-11.768 -1.81,-27.17 -0.94,-15.362 -18.97,-17.395 -17.95,-31.957 1.03,-14.519197 9.25,-20.759397 1.35,-32.644897 -7.91,-11.8886 -13.930003,-26.5844 -17.030003,-19.4797 -3.09,7.117 8.780003,24.9731 6.43,37.971 -2.36,13.034597 -6.67,25.310597 1.8,29.970597 8.470003,4.657 18.750003,4.248 17.630003,12.983 -1.13,8.753 0.28,15.389 1.07,22.751 0.78,7.371 -14.38,26.888 -16.07,41.655 -1.7,14.811 -6.080003,25.141 5.64,25.367" 
+                                      stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </div>
+
+                        <div class="row g-0 h-100 position-relative" style="z-index: 1;">
                             <div class="col-md-6 p-4 p-lg-5 d-flex flex-column justify-content-center">
-                                <h3 class="h2 mb-4 text-white">{{ .title }}</h3>
+                                <h3 class="h3 mb-4 text-white">{{ .title }}</h3>
                                 <p class="mb-5 opacity-90">{{ .text }}</p>
                                 <a href="{{ .link_url }}" class="text-white text-decoration-none fw-bold mt-auto">
                                     {{ .link_text }} <i class="bi bi-chevron-right ms-1"></i>
@@ -31,8 +40,9 @@
                     </div>
                 </div>
                 {{ else }}
-                <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="col-lg-3 col-md-6" data-aos="fade-left" data-aos-delay="{{ $delay }}">
+                    <div class="card h-100 border-0 rounded-4 bg-light overflow-hidden">
                         <div class="p-4">
                             <h3 class="h4 mb-3">{{ .title }}</h3>
                             <p class="mb-4">{{ .text }}</p>
@@ -48,4 +58,5 @@
         </div>
     </div>
 </section>
+
 {{ end }}

static/admin/config.yml

@@ -7,7 +7,6 @@ backend:
   base_url: https://git.start-it.nl
   auth_endpoint: https://git.start-it.nl/login/oauth/authorize
   local_backend: true 
-  auth_type: implicit
 
 media_folder: "static/img"
 public_folder: "/img"
@@ -21,19 +20,84 @@ collections:
         name: "home"
         fields:
           - { label: "Titel", name: "title", widget: "string" }
-          
-          - label: "Mogelijkheden Header"
-            name: "possibilities_header"
+
+          # HERO SECTIE
+          - label: "Hero Sectie"
+            name: "hero"
             widget: "object"
             fields:
               - { label: "Titel", name: "title", widget: "string" }
-              - { label: "Intro Tekst", name: "text", widget: "text" }
+              - { label: "Subtitel", name: "subtitle", widget: "text" }
+              - { label: "CTA Tekst", name: "cta_text", widget: "string" }
+              - { label: "CTA Link", name: "cta_link", widget: "string" }
+              - { label: "Hero Afbeelding", name: "image", widget: "image" }
+              - { label: "Afbeelding Alt-tekst", name: "image_alt", widget: "string" }
 
-          - label: "Mogelijkheden Kaarten"
-            name: "possibilities_cards"
+          # USP SECTIE
+          - label: "USP's"
+            name: "usps"
             widget: "list"
+            summary: "{{fields.item}}"
             fields:
-              - { label: "Kaart Titel", name: "title", widget: "string" }
-              - { label: "Omschrijving", name: "description", widget: "text" }
-              - { label: "Link naar", name: "link", widget: "string" }
-              - { label: "Afbeelding", name: "image", widget: "image" }
+              - { label: "USP", name: "item", widget: "string" }
+
+          # INFO SECTIE
+          - label: "Info Sectie"
+            name: "info_section"
+            widget: "object"
+            fields:
+              - { label: "Eyebrow", name: "eyebrow", widget: "string" }
+              - { label: "Titel", name: "title", widget: "string" }
+              - label: "Tekst Paragrafen"
+                name: "text_paragraphs"
+                widget: "list"
+                fields:
+                  - { label: "Paragraaf", name: "paragraph", widget: "markdown" }
+              - { label: "Afbeelding", name: "image", widget: "image" }
+              - { label: "Afbeelding Alt-tekst", name: "image_alt", widget: "string" }
+
+          # MOGELIJKHEDEN SECTIE
+          - label: "Mogelijkheden Sectie"
+            name: "mogelijkheden_section"
+            widget: "object"
+            fields:
+              - { label: "Sectie Titel", name: "title", widget: "string" }
+              - { label: "Introductie Tekst", name: "intro_text", widget: "text" }
+              - label: "Kaarten"
+                name: "kaarten"
+                widget: "list"
+                summary: "{{fields.title}}"
+                fields:
+                  - { label: "Grote bruine kaart?", name: "is_large", widget: "boolean", default: false }
+                  - { label: "Titel", name: "title", widget: "string" }
+                  - { label: "Beschrijving", name: "text", widget: "text" }
+                  - { label: "Link tekst", name: "link_text", widget: "string" }
+                  - { label: "Link URL", name: "link_url", widget: "string" }
+                  - { label: "Afbeelding", name: "image", widget: "image" }
+
+          # ABOUT SECTIE
+          - label: "Over Sectie"
+            name: "about_section"
+            widget: "object"
+            fields:
+              - { label: "Eyebrow", name: "eyebrow", widget: "string" }
+              - { label: "Titel", name: "title", widget: "string" }
+              - label: "Tekst Paragrafen"
+                name: "text_paragraphs"
+                widget: "list"
+                fields:
+                  - { label: "Paragraaf", name: "paragraph", widget: "markdown" }
+              - { label: "Afbeelding", name: "image", widget: "image" }
+              - { label: "Afbeelding Alt-tekst", name: "image_alt", widget: "string" }
+  - name: "modellen"
+    label: "Modellen"
+    folder: "content/modellen"
+    create: true
+    slug: "{{slug}}"
+    fields:
+      - { label: "Titel", name: "title", widget: "string" }
+      - { label: "Publicatiedatum", name: "date", widget: "datetime" }
+      - { label: "Prijs vanaf", name: "price", widget: "string", required: false }
+      - { label: "Oppervlakte (m²)", name: "surface", widget: "number", required: false }
+      - { label: "Afbeelding", name: "image", widget: "image" }
+      - { label: "Beschrijving", name: "body", widget: "markdown" }

static/img/animation-tree.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="129.27864"
+   height="237.54387"
+   viewBox="0 0 129.27864 237.54387"
+   fill="none"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 20.442137,235.76187 c 7.97,0.148 15.26,0.282 15.26,0.282 0,0 5.6,-29.107 3.44,-44.825 -2.16,-15.684 -20.17,-35.483 -15.56,-36.094 4.6,-0.613 21.99,23.604 20.57,15.403 -1.42,-8.196 2.39,-70.709097 4.53,-56.701 2.13,14.032 1.45,62.792 6.57,53.289 5.11,-9.475 19.71,-35.554 15.97,-24.644 -3.75,10.94 -17.18,32.025 -10.65,30.711 6.52,-1.311 29.94,-2.169 27.07,-19.195 -2.86,-16.988 -6.81,-20.778 -1.18,-33.053 5.62,-12.233 5.51,-18.799 -2.42,-30.005497 -7.92,-11.2069 -13.74,-11.4238 -11.99,-24.4402 1.74,-12.9824 11.4,-13.3108 -2.95,-24.7501 -14.37,-11.461 -30.29,-42.48843064 -25.74,-40.1119497 4.56,2.37338 -13.59,1.52749 -13.42,15.9877497 0.16,14.4944 7.32,14.8073 4.17,24.1056 -3.15,9.32 -16,29.2428 -10.04,36.0531 5.97,6.8103 13.92,16.6168 2.92,27.978297 -11.04,11.415 -25.6900002,-5.298 -25.4900002,17.596 0.2,22.987 14.8300002,33.06 14.9200002,41.984 0.09,8.935 1.51,17.921 8.82,21.831 7.3,3.904 40.06,-2.736 36.12,-4.316 -3.95,-1.583 -9.71,9.422 -8.84,25.838 0.87,16.455 -3.64,24.61 7.59,26.321 11.19,1.704 20.97,-1.103 20.83,-10.805 -0.16,-9.688 -10.56,-50.755 -5.27,-46.178 5.28,4.576 13.26,15.135 14.46,9.242 1.21,-5.887 0.4,-15.507 0.4,-15.507 0,0 -1.31,-40.481 1.48,-28.661 2.78,11.836 4.61,43.586 9.010003,35.573 4.4,-7.991 13.81,-23.167 8.85,-12.288 -4.98,10.913 -15.210003,19.514 -16.370003,28.366 -1.15,8.868 5.27,3.823 15.550003,-1.85 10.24,-5.657 22.41,-9.038 17.68,-20.917 -4.73,-11.873 -0.87,-11.768 -1.81,-27.17 -0.94,-15.362 -18.97,-17.395 -17.95,-31.957 1.03,-14.519197 9.25,-20.759397 1.35,-32.644897 -7.91,-11.8886 -13.930003,-26.5844 -17.030003,-19.4797 -3.09,7.117 8.780003,24.9731 6.43,37.971 -2.36,13.034597 -6.67,25.310597 1.8,29.970597 8.470003,4.657 18.750003,4.248 17.630003,12.983 -1.13,8.753 0.28,15.389 1.07,22.751 0.78,7.371 -14.38,26.888 -16.07,41.655 -1.7,14.811 -6.080003,25.141 5.64,25.367"
+     stroke="#a8bbd5"
+     stroke-opacity="0.5"
+     stroke-width="3"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1"
+     style="stroke:#ffffff;stroke-opacity:0.2" />
+</svg>