Html Page Whocarescampagne

<section class="w-full -mt-40 aspect-square lg:aspect-video relative" style="max-height: 85dvh">
        <video
            class="w-full h-full object-cover absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
            autoplay
            muted
            loop
            playsinline
            >
        <source src="https://www.vebego.nl/media/sbwp5btl/vzs_bannerbeeld.mp4" type="video/mp4" />
        </video>
</section>

<section class="vebego-container text-center my-16">
    <h1 class="font-display text-h1 lg:text-xxl font-semibold leading-none text-secondary-col-2 block mb-8">Who Cares?</h1>
    <p class="atm-paragraph text-center text-lg leading-normal max-w-3xl mx-auto">
        De zorg verder brengen. Who Cares?
        </br>
        De zorg staat onder druk: personeelstekorten, bezuinigingen en onzekerheden… Maar als Vebego Zorgservice zien we ook kansen. Daarom spraken wij met verschillende koplopers uit de zorg over hun visie op de toekomst van de zorg. Het resultaat: ‘Who Cares?’, een kwalitatief onderzoek naar de juiste weg voorwaarts in de zorg. 
        </br>
        </br>
        In Who Cares? lees je verdiepende en vernieuwende beschouwingen, waarin bekende zorgmanagers en bestuurders aan het woord komen. Zij vertellen uit persoonlijke ervaring waar ze tegenaan lopen en delen hoe de zorg er volgens hen uit zou moeten zien. Lees het onderzoek en word geïnspireerd. Laten we samen slimmer zorgen.
        </br>
        </br>
        <span class="font-semibold text-black">Who Cares? Dat lees je hier. Vanaf 9 juni.</span>
    </p>
</section>

<section class="vebego-container org-video-block">
   <div class="mol-video-player max-w-3xl mx-auto">
            <div class="video-player-video">
              <div class="thumbnail">
                <picture class="atm-image">
                    <img class="" src="https://www.vebego.nl/media/hngdhjgj/schermafbeelding-2025-05-13-152214.png" alt="" loading="lazy">
                </picture>
               <button class="atm-play">
                    <i class="atm-icon  fal fa-play-circle  fa-md "></i>
                </button>
              </div> 
                <div class="atm-video">
                    <video
                            class="w-full aspect-square lg:aspect-video object-cover"
                            controls
                            loop
                            playsinline
                            >
                        <source src="https://www.vebego.nl/media/wgufib2g/vzs_film_16-9.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>
          </div>
</section>

<section class="bg-primary/10">
    <div class="vebego-container py-16">
        <h2 class="text-h2 text-secondary-col-2 font-medium font-display mb-8">Artikelen</h2>
        
        <a href="https://www.vebego.nl/zorgservice/whocares-bezwijkenonderdedruk-te" class="block p-4 bg-white sm:grid grid-cols-12 mb-8">
            <div class="col-span-4">
                <picture class="atm-image">
                    <img class="aspect-square object-cover" src="https://www.vebego.nl/media/jsbnqo1k/vz3584-1.jpg" alt="" loading="lazy">
                </picture>
            </div>   

            <div class="col-start-6 col-span-6 flex flex-col justify-between py-4 lg:py-12  gap-y-4">
                <div>
                    <h3 class="text-h1 font-display text-secondary-col-2 font-semibold mb-4">
                        Bezwijken onder de druk(te)
                    </h3>
                    <p class="text-h4">Mensen worden steeds ouder. Een teken dat onze zorg van uitstekende kwaliteit is.</p>
                </div>
                <div class="flex gap-x-8">
                    <div class="flex items-center gap-x-2">
                        <i class="atm-icon fa-regular fa-calendar-week"></i>
                        <span>
                            27-01-2025
                        </span>
                    </div>
                    <div class="flex items-center gap-x-2">
                        <i class="fa-regular fa-eye"></i>
                        <span>
                            10 min
                        </span>
                    </div>
                </div>
            </div>  
        </a>

        <a href="https://www.vebego.nl/zorgservice/whocares-dansenopeenvulkaan" class="block p-4 bg-white sm:grid grid-cols-12 mb-8">
            <div class="col-span-4">
                <picture class="atm-image">
                    <img class="aspect-square object-cover w-full" src="https://www.vebego.nl/media/d25ajkfw/vzs_artikel-afbeeldingen-1080x1080-dansen-op-een-vulkaan.jpg" alt="" loading="lazy">
                </picture>
            </div>   

            <div class="col-start-6 col-span-6 flex flex-col justify-between py-4 lg:py-12 gap-y-4">
                <div>
                    <h3 class="text-h1 font-semibold font-display text-secondary-col-2 mb-4">
                        Dansen op een vulkaan                    
                    </h3>
                    <p class="text-h4">Het leven in een zorginstelling draait vaak om rust en reinheid. Dat is immers het beste voor een snel herstel.</p>
                </div>
                <div class="flex gap-x-8">
                    <div class="flex items-center gap-x-2">
                        <i class="atm-icon fa-regular fa-calendar-week"></i>
                        <span>
                            27-01-2025
                        </span>
                    </div>
                    <div class="flex items-center gap-x-2">
                        <i class="fa-regular fa-eye"></i>
                        <span>
                            10 min
                        </span>
                    </div>
                </div>
            </div>  
        </a>

        <a href="https://www.vebego.nl/zorgservice/whocares-dezorgaanhetinfuus" class="block p-4 bg-white sm:grid grid-cols-12">
                <div class="col-span-4">
                    <picture class="atm-image">
                        <img class="aspect-square object-cover w-full" src="https://www.vebego.nl/media/beopxgvo/vzs_artikel-afbeeldingen-1080x1080-de-zorg-aan-het-infuus.jpg" alt="" loading="lazy">
                    </picture>
                </div>   

                <div class="col-start-6 col-span-6 flex flex-col justify-between py-4 lg:py-12  gap-y-4">
                    <div>
                        <h3 class="text-h1 font-display text-secondary-col-2 font-semibold mb-4">
                            Hoe verdienen wij (aan) de zorg?                    
                        </h3>
                        <p class="text-h4">Willen we in de toekomst goede zorg blijven bieden, dan moeten we de zorg betaalbaar houden. </p>
                    </div>
                    <div class="flex gap-x-8">
                        <div class="flex items-center gap-x-2">
                            <i class="atm-icon fa-regular fa-calendar-week"></i>
                            <span>
                                27-01-2025
                            </span>
                        </div>
                        <div class="flex items-center gap-x-2">
                            <i class="fa-regular fa-eye"></i>
                            <span>
                                10 min
                            </span>
                        </div>
                    </div>
                </div>  
            </a>
    </div>
</section>

<section class="vebego-container text-center mb-16 mt-24">
    <h2 class="font-display text-h1 font-semibold leading-none text-secondary-col-1 block mb-4">Blijf op de hoogte</h2>
    <p class="atm-paragraph text-center text-lg leading-normal max-w-3xl mx-auto">
        Laat hier je gegevens achter en we houden je op de hoogte van het complete onderzoek. 
    </p>

    <a class="atm-button atm-button-primary button-md no-icon mt-4" href="https://www.vebego.nl/zorgservice/aanmelden-nieuwsbrief">
        <div class="button-content-wrapper">
            <span class="button-content">
                <span>Aanmelden</span>
            </span>
        </div>
        <span class="button-triangle"></span>
    </a>
</section>


<script>
    const videoBlock = document.querySelector('.org-video-block');

    if (videoBlock) {
        const playButton = videoBlock.querySelector('.atm-play');
        const thumbnail = videoBlock.querySelector('.thumbnail');
        const video = videoBlock.querySelector('.atm-video video');

        if (playButton && video) {
        playButton.addEventListener('click', () => {
            // Verberg thumbnail
            if (thumbnail) {
            thumbnail.classList.add('hidden');
            }

            // Start video
            video.play();
        });
        }
    }
</script>