<div class="w-full h-[300px] relative">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random=1 800w, https://picsum.photos/1000/500?random=1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random=1">
</picture>
<div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-10 h-full flex items-end relative">
<h1 class="text-5xl font-bold text-white text-shadow-md">Mental health</h1>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-16 mt-16">
<div class="flex w-full" x-data="App.Slider()">
<div class="w-full h-[500px] relative" x-on:keydown.right="next" x-on:keydown.left="prev" role="region">
<div class="absolute top-1/2 z-10 -mt-8 -left-10 sm:left-4 lg:left-10 flex items-center justify-center w-16 h-16 bg-light sm:bg-light/75 rounded-full sm:shadow-lg text-dark cursor-pointer hover:bg-light/100" x-on:click="prev" x-on:keydown.space="prev" :aria-disabled="atBeginning" :tabindex="atBeginning ? -1 : 0" :class="{'text-opacity-30 sm:opacity-50 sm:text-opacity-100 cursor-not-allowed': atBeginning, 'hover:bg-light/100':!atBeginning}"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="w-full h-full overflow-x-scroll snap-x snap-mandatory flex space-x-10 rounded" x-ref="slider" role="listbox">
<div x-bind="disableNextAndPreviousButtons" class="relative w-full h-full flex shrink-0 items-center snap-start" role="option">
<picture class="">
<img class="absolute top-0 w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random=1 800w, https://picsum.photos/1000/500?random=1 480w" width="100%" height="100%" alt="" loading="eager" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random=1">
</picture>
<div class="absolute w-full h-full bg-gradient-to-r from-black/70 via-black/50 to-black/30 sm:from-black/50 sm:via-black/30 sm:to-black/10"></div>
<div class="relative py-10 sm:py-20 px-16 sm:px-28 md:px-32 lg:px-44 max-w-4xl">
<h2 class="text-3xl sm:text-4xl font-bold text-white text-shadow-md mb-6">Food for the brain</h2>
<div class="text-xl sm:text-3xl text-white text-shadow-md leading-relaxed">10 foods to boost your mental wellbeing and cognitive health.</div>
<a href="#" x-bind="focusableWhenVisible" class="btn btn-light mt-10">Read more</a>
</div>
</div>
<div x-bind="disableNextAndPreviousButtons" class="relative w-full h-full flex shrink-0 items-center snap-start" role="option">
<picture class="">
<img class="absolute top-0 w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random=2 800w, https://picsum.photos/1000/500?random=2 480w" width="100%" height="100%" alt="" loading="eager" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random=2">
</picture>
<div class="absolute w-full h-full bg-gradient-to-r from-black/70 via-black/50 to-black/30 sm:from-black/50 sm:via-black/30 sm:to-black/10"></div>
<div class="relative py-10 sm:py-20 px-16 sm:px-44 max-w-4xl">
<h2 class="text-3xl sm:text-4xl font-bold text-white text-shadow-md mb-6">Food for the brain</h2>
<div class="text-xl sm:text-3xl text-white text-shadow-md leading-relaxed">10 foods to boost your mental wellbeing and cognitive health.</div>
<a href="#" x-bind="focusableWhenVisible" class="btn btn-light mt-10">Read more</a>
</div>
</div>
<div x-bind="disableNextAndPreviousButtons" class="relative w-full h-full flex shrink-0 items-center snap-start" role="option">
<picture class="">
<img class="absolute top-0 w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random=3 800w, https://picsum.photos/1000/500?random=3 480w" width="100%" height="100%" alt="" loading="eager" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random=3">
</picture>
<div class="absolute w-full h-full bg-gradient-to-r from-black/70 via-black/50 to-black/30 sm:from-black/50 sm:via-black/30 sm:to-black/10"></div>
<div class="relative py-10 sm:py-20 px-16 sm:px-44 max-w-4xl">
<h2 class="text-3xl sm:text-4xl font-bold text-white text-shadow-md mb-6">Food for the brain</h2>
<div class="text-xl sm:text-3xl text-white text-shadow-md leading-relaxed">10 foods to boost your mental wellbeing and cognitive health.</div>
<a href="#" x-bind="focusableWhenVisible" class="btn btn-light mt-10">Read more</a>
</div>
</div>
</div>
<div class="absolute top-1/2 z-10 -mt-8 -right-10 sm:right-4 lg:right-10 flex items-center justify-center w-16 h-16 bg-light sm:bg-light/75 rounded-full sm:shadow-lg text-dark cursor-pointer hover:bg-light/100" x-on:click="next" x-on:keydown.space="next" :aria-disabled="atEnd" :tabindex="atEnd ? -1 : 0" :class="{'text-opacity-30 sm:opacity-50 sm:text-opacity-100 cursor-not-allowed': atEnd, 'hover:bg-light/100':!atEnd}"><i class="fas fa-chevron-right fa-2x"></i></div>
</div>
</div>
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
<div class="bg-pink rounded flex flex-col overflow-hidden">
<div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
<h3 class="text-3xl font-bold">Time to talk</h3>
<div class="text-lg">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-cta">Find out more</a>
</div>
</div>
<div class="bg-green rounded flex flex-col overflow-hidden">
<div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
<h3 class="text-3xl font-bold">Time to talk</h3>
<div class="text-lg">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-cta">Find out more</a>
</div>
</div>
<div class="bg-secondary rounded flex flex-col overflow-hidden">
<div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
<h3 class="text-3xl font-bold">Time to talk</h3>
<div class="text-lg">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-cta">Find out more</a>
</div>
</div>
</div>
<!-- image left -->
<div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
<div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random=1 800w, https://picsum.photos/1000/500?random=1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random=1">
</picture>
</div>
<div class="flex-1 p-8 sm:p-16 space-y-8">
<h3 class="text-4xl font-bold">Time to talk</h3>
<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-lg">Find out more</a>
</div>
</div>
<div class="grid sm:grid-cols-2 gap-8 lg:gap-16">
<div class="bg-green rounded flex flex-col overflow-hidden">
<div class="aspect-[16/9] sm:aspect-auto sm:h-[400px] relative">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random=2 800w, https://picsum.photos/640/480?random=2 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random=2">
</picture>
</div>
<div class="flex-1 p-8 pt-9 sm:p-12 relative text-light">
<div class="bg-light rounded-full w-24 h-24 border-8 border-green absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-green scale-75 sm:scale-100">
<i class="fas fa-heartbeat fa-3x"></i>
</div>
<h4 class="text-3xl font-bold mb-10 mr-20">Physical health</h4>
<div class="text-lg mr-10">Your body is your temple. Here, you’ll find details on your medical and dental cover as well as other useful resources to help you to take care of your physical health.</div>
<a href="#" class="btn btn-light mt-6">More about physical health</a>
</div>
<div class="flex flex-col divide-y divide-light/10 border-t border-light/10">
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Private health insurance</span>
<i class="fas fa-arrow-right fa-lg"></i>
</a>
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10" target="_blank" rel="noopener">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Dental discounts</span>
<i class="fas fa-arrow-right fa-lg -rotate-45"></i>
</a>
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic Clinic</span>
<i class="fas fa-arrow-right fa-lg"></i>
</a>
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic GP</span>
<i class="fas fa-arrow-right fa-lg"></i>
</a>
</div>
</div>
<div class="bg-blue rounded flex flex-col overflow-hidden">
<div class="aspect-[16/9] sm:aspect-auto sm:h-[400px] relative">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random=3 800w, https://picsum.photos/640/480?random=3 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random=3">
</picture>
</div>
<div class="flex-1 p-8 pt-9 sm:p-12 relative text-light">
<div class="bg-light rounded-full w-24 h-24 border-8 border-blue absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-blue scale-75 sm:scale-100">
<i class="fas fa-heartbeat fa-3x"></i>
</div>
<h4 class="text-3xl font-bold mb-10 mr-20">Physical health</h4>
<div class="text-lg mr-10">Your body is your temple. Here, you’ll find details on your medical and dental cover as well as other useful resources to help you to take care of your physical health.</div>
<a href="#" class="btn btn-light mt-6">More about physical health</a>
</div>
<div class="flex flex-col divide-y divide-light/10 border-t border-light/10">
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Private health insurance</span>
<i class="fas fa-arrow-right fa-lg"></i>
</a>
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10" target="_blank" rel="noopener">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Dental discounts</span>
<i class="fas fa-arrow-right fa-lg -rotate-45"></i>
</a>
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic Clinic</span>
<i class="fas fa-arrow-right fa-lg"></i>
</a>
<a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
<span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic GP</span>
<i class="fas fa-arrow-right fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="">
<h3 class="text-3xl font-bold text-dark border-t border-dark/10 pt-6 my-10">Get help now</h3>
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
<div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-dark">
<h3 class="text-3xl font-bold">Kinetic Halo</h3>
<div class="text-lg">Get 24/7 access to a team of experts for confidential support when you need it. Call 0800 123456.
</div>
</div>
<a href="#" class="bg-blue flex px-6 py-5 text-light text-lg font-bold justify-center hover:bg-opacity-90 focus:outline-none focus:ring-0 focus:underline focus:underline-offset-4">Visit kinetic-halo.co.uk</a>
</div>
<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
<div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-dark">
<h3 class="text-3xl font-bold">Kinetic Halo</h3>
<div class="text-lg">Get 24/7 access to a team of experts for confidential support when you need it. Call 0800 123456.
</div>
</div>
<a href="#" class="bg-blue flex px-6 py-5 text-light text-lg font-bold justify-center hover:bg-opacity-90 focus:outline-none focus:ring-0 focus:underline focus:underline-offset-4">Visit kinetic-halo.co.uk</a>
</div>
<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
<div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-dark">
<h3 class="text-3xl font-bold">Kinetic Halo</h3>
<div class="text-lg">Get 24/7 access to a team of experts for confidential support when you need it. Call 0800 123456.
</div>
</div>
<a href="#" class="bg-blue flex px-6 py-5 text-light text-lg font-bold justify-center hover:bg-opacity-90 focus:outline-none focus:ring-0 focus:underline focus:underline-offset-4">Visit kinetic-halo.co.uk</a>
</div>
</div>
</div>
</div>
{{> '@header--small'}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-16 mt-16">
{{ render '@slider'}}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
{{> @cta--card color="pink" }}
{{> @cta--card color="green"}}
{{> @cta--card color="secondary"}}
</div>
{{> '@cta--large-contained' left=true}}
<div class="grid sm:grid-cols-2 gap-8 lg:gap-16">
{{> @infobox--image color="green" image="https://picsum.photos/640/480?random=2"}}
{{> @infobox--image color="blue" image="https://picsum.photos/640/480?random=3"}}
</div>
<div class="">
{{> '@header--section' title='Get help now'}}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
{{> @cta--card-button color="blue" }}
{{> @cta--card-button color="blue"}}
{{> @cta--card-button color="blue"}}
</div>
</div>
</div>
{
"image": "https://picsum.photos/1000/500?random=1"
}
No notes defined.