<header class="n7-header border-b n7-border-gray-01" id="siteHeader" aria-label="Header del sito">
<!-- Main heading -->
<div class="n7-main-heading bg-white flex items-center py-5 xl:py-1">
<div class="container flex items-center flex-1">
<div class="flex items-center n7-branding site-branding xl:max-w-[35.7%]">
<a class="n7-site-logo site-logo flex h-[48px] xl:flex-1 xl:h-16 xl:h-20 xl:max-w-[248px]" href="#">
<img class="w-full h-full object-contain object-left-top" src="/images/DrusenOff.svg" alt="Alt logo image" width="248" height="81" />
</a>
<span class="xl:hidden w-4 h-9 mx-1.5 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
<a class="n7-site-logo site-logo flex xl:hidden h-4 xl:flex-1 xl:max-w-[248px]" href="#">
<img class="w-full h-full object-contain object-left-top" src="/images/offhealth.svg" alt="Alt logo image" width="248" height="81" />
</a>
</div>
<!-- RP 240402 Minisite header - Changed classes -->
<div class="n7-main-heading__navigation flex flex-1 justify-end xl:ml-auto xl:justify-center">
<!-- RP 240403 Minisite header - Add 'n7-link--active' class to <a> tag when it is current page -->
<nav class="n7-primary-navigation flex xl:justify-center" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-none xl:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only is-show-menu group-aria-expanded:hidden">
Menu
</span>
<span class="sr-only is-close-menu hidden group-aria-expanded:block">
Chiudi menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col bg-white max-xl:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed xl:static xl:visible top-[--header-height] bottom-0 max-xl:w-[90%] max-xl:max-w-[350px] overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main xl:border-b-0" id="mainNavListContainer">
<ul class="n7-primary-navigation__list flex max-xl:flex-col gap-6 xl:gap-4 xl:justify-end has-dropdown-menu">
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<!-- RP 240404 Minisite Header - Changed classes -->
<!-- RP 240411 Minisite Header - Changed classes -->
<!-- RP 240416 Minisite Header - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 border-b-4 border-transparent">
Perchè Drusenoff
</a>
</li>
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<!-- RP 240404 Minisite Header - Changed classes -->
<!-- RP 240411 Minisite Header - Changed classes -->
<!-- RP 240416 Minisite Header - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 n7-link--active">
Guida alla prevenzione della DMLE
</a>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex xl:flex-col items-center justify-between py-3 xl:px-3 xl:pb-0 xl:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary" aria-expanded="false" aria-controls="submenuId03">
Area riservata ai Medici<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden xl:absolute xl:pt-2 xl:pb-4 xl:px-4 xl:rounded-lg xl:shadow-xl bg-white xl:w-80" id="submenuId03">
<li class="n7-dropdown-menu__item group is-active">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Panoramica e Risorse</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">La Iontoforesi sclerale</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Videoteca Informativa</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] xl:hidden"></div>
</nav>
<div class="n7-action-area__container flex gap-3 py-6 max-xl:hidden ">
<div class="n7-action-area fixed bottom-6 w-[calc(100%-32px)] xl:static xl:w-auto flex gap-3 items-center max-xl:flex-wrap max-xl:mt-8">
<a href="#" class="n7-btn
n7-btn--primary
max-xl:n7-btn--l max-xl:w-full max-xl:justify-center n7-btn--s">
Acquista
<svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--cursor-arrow-rays" />
</svg>
</a>
</div>
<div class="n7-user-menu">
<nav class="flex" aria-label="Utente">
<!-- RP 240416 Minisite user menu - changed classes -->
<ul class="n7-primary-navigation__list w-full xl:relative xl:w-auto xl:flex xl:justify-end gap-4 xl:gap-8 has-dropdown-menu">
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex xl:flex-col items-center justify-between py-3 xl:px-3 xl:pb-0 xl:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary" aria-expanded="false" aria-controls="usermenu">
Massimiliano Spinosa<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden xl:absolute xl:pt-2 xl:pb-4 xl:px-4 xl:rounded-lg xl:shadow-xl bg-white xl:w-80 xl:z-10 xl:right-0 border-r-0 border-l-0 " id="usermenu">
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">voce 1</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">voce 2</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- RP 240402 03 Minisite header - removed wrong closing div -->
</div>
</div>
<!-- RP 240402 Minisite header - Added block -->
<!-- Language Selector component -->
<div class="n7-language-selector flex items-center xl:ml-8">
<div>ITA</div>
<span class="hidden xl:inline w-4 h-9 mr-2.5 ml-4 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
</div>
<!-- RP 240405 Minisite header - Changed classes -->
<a class="n7-site-logo site-logo flex hidden xl:inline h-12 xl:max-w-[248px]" href="#">
<img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
</a>
</div>
</div>
<!-- -->
</header>
<main id="mainContent">
<section>
<div class="n7-hero grid relative bg-cover bg-[center_top] bg-no-repeat min-h-[25rem] h-full md:min-h-[33rem] lg:h-[85vh] md:max-h-[66rem] lg:max-h-[45rem]">
<!-- RP 240411 Hero - Changed classes -->
<div class="container grid items-center">
<div class="grid md:grid-cols-2 items-center justify-items-center">
<!-- RP 240411 Hero - Added container div -->
<div class="grid items-center justify-items-center">
<img src="../../images/img-hero-drusenoff.png" alt="" loading="lazy" class="image w-full h-64 sm:h-auto object-cover rounded-2xl" />
</div>
<div class="order-first py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
<!-- RP 240411 Hero - Changed classes -->
<div class="sm:container md:max-w-2xl md:px-6 lg:pl-12">
<h1 class="n7-heading-3 xl:n7-heading-1">
Proteggi i tuoi occhi con <span class='font-medium'>DrusenOff collirio</span>
</h1>
<p class=" n7-body-lg mt-3 xl:text-xl md:mt-5 md:max-w-3xl text-teal-500">
Non è solo una difesa, ma un vero alleato per la salute dei tuoi occhi.
</p>
<div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">
<div class="flex-1 whitespace-nowrap">
<a href="#" class="n7-btn
n7-btn--outline n7-btn--s">
Perchè proteggere la tua vista
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="max-md:my-6">
<div class="container">
<div class="n7-background-secondary-light rounded-2xl py-8 px-4 grid gap-8 lg:grid-cols-3 lg:gap-6">
<div class="flex gap-5 sm:gap-6 items-start">
<img src="../../images/barriera-filtrante.svg" alt="" loading="lazy" class="image w-[74px] xl:w-[88px]" />
<div class="grid gap-2">
<h5 class="n7-heading-5">Barriera filtrante</h5>
<p>forma una vera e propria barriera filtrante per il tuo occhio</p>
</div>
</div>
<div class="flex gap-5 sm:gap-6 items-start">
<img src="../../images/protezione-uv.svg" alt="" loading="lazy" class="image w-[74px] xl:w-[88px]" />
<div class="grid gap-2">
<h5 class="n7-heading-5">Protezione UV</h5>
<p>fino a 4 ore di barriera contro i raggi ultravioletti</p>
</div>
</div>
<div class="flex gap-5 sm:gap-6 items-start">
<img src="../../images/luce-blu.svg" alt="" loading="lazy" class="image w-[74px] xl:w-[88px]" />
<div class="grid gap-2">
<h5 class="n7-heading-5">Luce Blu</h5>
<p>difesa specifica dall'esposizione a pc, tv e dispositivi mobili.</p>
</div>
</div>
</div>
</div>
</section>
<section class="my-8 md:my-16">
<div class="container md:px-10 lg:px-16 2xl:px-28">
<div class="grid items-center md:grid-cols-2 md:gap-16">
<img src="../../images/ovunque-ti-trovi.png" alt="" loading="lazy" class="image" />
<ul class="grid gap-8">
<li class="pb-6 border-b n7-border-gray-01">
<h3 class="n7-heading-4 lg:n7-heading-3 mb-6">Che cos’è?</h3>
<p class="lg:text-lg">Soluzione oftalmica protettiva <strong>anti UV</strong> a base di vitamina B2 (riboflavina), vitamina E TPGS, MSM, amminoacidi e acido ialuronico 0,1%: una miscela con un’<strong>elevata efficienza antiossidante</strong>, l’unica in grado di proteggere il danno fotossidativo.</p>
</li>
<li class="pb-6 border-b n7-border-gray-01">
<h3 class="n7-heading-4 lg:n7-heading-3 mb-6">Per chi è indicato?</h3>
<p class="lg:text-lg">Soggetti che presentano fattori di rischio per <strong>degenerazione maculare</strong>; soggetti che, per motivi professionali si trovano esposti per lunghe ore alla radiazione blu di tv e apparecchi elettronici; soggetti che praticano sport all’aperto (sci, vela, corsa); soggetti che hanno subito l’operazione di cataratta.</p>
</li>
<li>
<h3 class="n7-heading-4 lg:n7-heading-3 mb-6">Perchè si usa?</h3>
<p class="lg:text-lg">La soluzione, <strong>priva di effetti collaterali</strong> e da utilizzare come un normale collirio, può essere utilizzata per ridurre e/o evitare l’insorgenza della degenerazione maculare e quindi di importanti disturbi visivi.</p>
</li>
</ul>
</div>
</div>
</section>
<section>
<div class="container">
<div class="rounded-3xl px-4 py-6 sm:p-8 lg:p-16" style="background: linear-gradient(179.92deg, #FFEBD3 0.07%, rgba(255, 255, 255, 0) 25%);">
<div class="grid gap-6 xl:flex xl:justify-between xl:items-end">
<div class="xl:max-w-[60%] 2xl:max-w-[50%]">
<h2 class="n7-heading-4 lg:n7-heading-2 mb-6">Consigli utili per la <span class="font-medium">salute dei tuoi occhi</span></h2>
<p class="lg:text-xl">I tuoi occhi sono le finestre del tuo mondo, e mantenerli in salute è fondamentale per godere appieno della vita. Con l'aumento dell'uso di dispositivi digitali e lo stile di vita frenetico, è cruciale adottare abitudini che promuovano il benessere oculare.</p>
</div>
<a href="#" class="n7-btn
n7-btn--primary
w-fit n7-btn--s">
Tutti i nostri consigli
<svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</a>
</div>
<div class="grid gap-6 lg:grid-cols-3 lg:mx-6 mt-16">
<div class="grid gap-4 content-start p-4">
<svg class="inline-block align-middle fill-current w-16 h-16 lg:w-24 lg:h-24 text-primary-500 bg-primary-100 p-3 lg:p-6 rounded-full" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--check-badge" />
</svg>
<div class="grid gap-3 lg:gap-6">
<h3 class="n7-heading-5 lg:n7-heading-4">Riposo Oculare con la Regola 20-20-20</h3>
<p class="lg:text-lg">Mentre lavori o utilizzi dispositivi digitali, adotta la regola 20-20-20. Ogni 20 minuti, fai una pausa di almeno 20 secondi e guarda qualcosa che si trova a 20 piedi di distanza. </p>
</div>
</div>
<div class="grid gap-4 content-start p-4">
<svg class="inline-block align-middle fill-current w-16 h-16 lg:w-24 lg:h-24 text-primary-500 bg-primary-100 p-3 lg:p-6 rounded-full" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--check-badge" />
</svg>
<div class="grid gap-3 lg:gap-6">
<h3 class="n7-heading-5 lg:n7-heading-4">Proteggi i Tuoi Occhi dalla Luce Blu</h3>
<p class="lg:text-lg">Gli schermi digitali emettono luce blu, che può causare affaticamento e danni agli occhi nel tempo. Utilizza filtri anti-luce blu o indossa occhiali appositamente progettati per ridurre l'esposizione a questa luce dannosa.</p>
</div>
</div>
<div class="grid gap-4 content-start p-4">
<svg class="inline-block align-middle fill-current w-16 h-16 lg:w-24 lg:h-24 text-primary-500 bg-primary-100 p-3 lg:p-6 rounded-full" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--check-badge" />
</svg>
<div class="grid gap-3 lg:gap-6">
<h3 class="n7-heading-5 lg:n7-heading-4">Mantieni una Buona Illuminazione Ambientale</h3>
<p class="lg:text-lg">Assicurati che la tua area di lavoro e le stanze in cui trascorri del tempo siano ben illuminate. Una luce adeguata riduce lo sforzo degli occhi e previene l'affaticamento visivo.</p>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 xl:grid-cols-[55%_1fr] gap-8 mt-16 lg:mx-6 xl:mx-16 2xl:mx-44 n7-background-secondary-light rounded-2xl">
<div class="grid gap-6 px-4 pt-6 sm:px-8 sm:pt-8 md:pr-0 md:py-8 xl:py-16 xl:pl-16 content-center">
<div>
<h3 class="n7-heading-3 mb-6">Dove acquistarlo</h2>
<p class="text-lg"><strong>Drusenoff collirio</strong> lo trovi in tutte le farmacie ed è acquistabile anche online senza prescrizione medica</p>
</div>
<a href="#" class="n7-btn
n7-btn--primary
w-fit n7-btn--s">
Acquista online
<svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--arrow-right" />
</svg>
</a>
</div>
<div>
<img src="../../images/dove acquistarlo.jpg" alt="" loading="lazy" class="image rounded-b-2xl md:rounded-bl-none md:rounded-r-2xl md:h-full md:object-cover" />
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="n7-footer">
<!-- RP 240405 Minisite footer - Changed classes -->
<!-- RP 240405 02 Minisite footer - Changed classes -->
<div class="n7-footer__navigation-row border-t-[3px] n7-border-primary">
<!-- RP 240402 Minisite footer - Changed classes -->
<div class="container grid gap-y-2 lg:flex">
<!-- Left block -->
<!-- RP 240402 Minisite footer - Changed classes -->
<div class="flex flex-col gap-6 pt-6 pb-6 lg:pt-10 lg:pb-12 lg:pr-10">
<div class="n7-site-logo site-logo flex mb-1 w-40">
<img class="w-full h-full object-contain object-left-top" src="/images/DrusenOff.svg" alt="Logo alt text" width="248" height="81" />
</div>
</div>
<!-- RP 240402 Minisite footer - Changed classes -->
<div class="grid gap-6 md:gap-3 lg:justify-end lg:flex-1 lg:pt-10 lg:pb-12">
<!-- Menu footer -->
<!-- RP 240402 Minisite footer - Changed classes -->
<nav class="pb-4 lg:py-4 lg:flex lg:justify-end" aria-label="Contatti e segnalazioni">
<!-- RP 240402 Minisite footer - Changed classes -->
<ul class="flex gap-y-3 lg:gap-y-4 -ml-4 lg:ml-0">
<!-- RP 240402 Minisite footer - Changed classes -->
<li class="group border-r n7-border-gray-01 last:border-r-0">
<!-- RP 240402 Minisite footer - Changed classes -->
<!-- RP 240408 Footer minisite - Changed classes -->
<a href="" class="n7-link n7-link-primary px-4 lg:px-6 lg:py-2 group:last:lg:pr-0 text-sm visited:n7-link-primary">Perchè DrusenOff</a>
</li>
<!-- RP 240402 Minisite footer - Changed classes -->
<li class="group border-r n7-border-gray-01 last:border-r-0">
<!-- RP 240402 Minisite footer - Changed classes -->
<!-- RP 240408 Footer minisite - Changed classes -->
<a href="" class="n7-link n7-link-primary px-4 lg:px-6 lg:py-2 group:last:lg:pr-0 text-sm visited:n7-link-primary">Consigli utili</a>
</li>
</ul>
</nav>
<div class="lg:mt-7 lg:text-right text-sm font-medium">Druseoff collirio è un prodotto OffHealth. Soluzione oftalmica protettiva anti UV a base di vitamina B2 (riboflavina), vitamina E TPGS, MSM, amminoacidi e acido ialuronico 0,1%.<br class="xl:hidden 2xl:inline">Il prodotto è solo per uso Oftalmico , è monopaziente e non va utilizzato nei casi di riconosciuta intolleranza o ipersensibilità ai suoi componenti.</div>
</div>
</div>
</div>
<!-- Footer bottom bar -->
</footer>
{% extends '@page-layout' %}
{% block content %}
<section>
{% render '@hero', {hasBkg: false, title: "Proteggi i tuoi occhi con <span class='font-medium'>DrusenOff collirio</span>", titleClass: 'n7-heading-3 xl:n7-heading-1', body: "Non è solo una difesa, ma un vero alleato per la salute dei tuoi occhi.", bodyClass: 'n7-body-lg mt-3 xl:text-xl md:mt-5 md:max-w-3xl text-teal-500', buttons: buttons, component: component}, true %}
</section>
<section class="max-md:my-6">
<div class="container">
<div class="n7-background-secondary-light rounded-2xl py-8 px-4 grid gap-8 lg:grid-cols-3 lg:gap-6">
<div class="flex gap-5 sm:gap-6 items-start">
{% render '@image', {src: '/images/barriera-filtrante.svg', class: 'w-[74px] xl:w-[88px]'}, true %}
<div class="grid gap-2">
<h5 class="n7-heading-5">Barriera filtrante</h5>
<p>forma una vera e propria barriera filtrante per il tuo occhio</p>
</div>
</div>
<div class="flex gap-5 sm:gap-6 items-start">
{% render '@image', {src: '/images/protezione-uv.svg', class: 'w-[74px] xl:w-[88px]'}, true %}
<div class="grid gap-2">
<h5 class="n7-heading-5">Protezione UV</h5>
<p>fino a 4 ore di barriera contro i raggi ultravioletti</p>
</div>
</div>
<div class="flex gap-5 sm:gap-6 items-start">
{% render '@image', {src: '/images/luce-blu.svg', class: 'w-[74px] xl:w-[88px]'}, true %}
<div class="grid gap-2">
<h5 class="n7-heading-5">Luce Blu</h5>
<p>difesa specifica dall'esposizione a pc, tv e dispositivi mobili.</p>
</div>
</div>
</div>
</div>
</section>
<section class="my-8 md:my-16">
<div class="container md:px-10 lg:px-16 2xl:px-28">
<div class="grid items-center md:grid-cols-2 md:gap-16">
{% render '@image', {src: '/images/ovunque-ti-trovi.png'}, true %}
<ul class="grid gap-8">
<li class="pb-6 border-b n7-border-gray-01">
<h3 class="n7-heading-4 lg:n7-heading-3 mb-6">Che cos’è?</h3>
<p class="lg:text-lg">Soluzione oftalmica protettiva <strong>anti UV</strong> a base di vitamina B2 (riboflavina), vitamina E TPGS, MSM, amminoacidi e acido ialuronico 0,1%: una miscela con un’<strong>elevata efficienza antiossidante</strong>, l’unica in grado di proteggere il danno fotossidativo.</p>
</li>
<li class="pb-6 border-b n7-border-gray-01">
<h3 class="n7-heading-4 lg:n7-heading-3 mb-6">Per chi è indicato?</h3>
<p class="lg:text-lg">Soggetti che presentano fattori di rischio per <strong>degenerazione maculare</strong>; soggetti che, per motivi professionali si trovano esposti per lunghe ore alla radiazione blu di tv e apparecchi elettronici; soggetti che praticano sport all’aperto (sci, vela, corsa); soggetti che hanno subito l’operazione di cataratta.</p>
</li>
<li>
<h3 class="n7-heading-4 lg:n7-heading-3 mb-6">Perchè si usa?</h3>
<p class="lg:text-lg">La soluzione, <strong>priva di effetti collaterali</strong> e da utilizzare come un normale collirio, può essere utilizzata per ridurre e/o evitare l’insorgenza della degenerazione maculare e quindi di importanti disturbi visivi.</p>
</li>
</ul>
</div>
</div>
</section>
<section>
<div class="container">
<div class="rounded-3xl px-4 py-6 sm:p-8 lg:p-16" style="background: linear-gradient(179.92deg, #FFEBD3 0.07%, rgba(255, 255, 255, 0) 25%);">
<div class="grid gap-6 xl:flex xl:justify-between xl:items-end">
<div class="xl:max-w-[60%] 2xl:max-w-[50%]">
<h2 class="n7-heading-4 lg:n7-heading-2 mb-6">Consigli utili per la <span class="font-medium">salute dei tuoi occhi</span></h2>
<p class="lg:text-xl">I tuoi occhi sono le finestre del tuo mondo, e mantenerli in salute è fondamentale per godere appieno della vita. Con l'aumento dell'uso di dispositivi digitali e lo stile di vita frenetico, è cruciale adottare abitudini che promuovano il benessere oculare.</p>
</div>
{% render '@button--size-s', {label:'Tutti i nostri consigli', href: '#', icon: 'mini--arrow-right', classes: 'w-fit'}, true %}
</div>
<div class="grid gap-6 lg:grid-cols-3 lg:mx-6 mt-16">
<div class="grid gap-4 content-start p-4">
{% render '@icon', { id: 'outline--check-badge', size: 'w-16 h-16 lg:w-24 lg:h-24', classes: 'text-primary-500 bg-primary-100 p-3 lg:p-6 rounded-full'}, true %}
<div class="grid gap-3 lg:gap-6">
<h3 class="n7-heading-5 lg:n7-heading-4">Riposo Oculare con la Regola 20-20-20</h3>
<p class="lg:text-lg">Mentre lavori o utilizzi dispositivi digitali, adotta la regola 20-20-20. Ogni 20 minuti, fai una pausa di almeno 20 secondi e guarda qualcosa che si trova a 20 piedi di distanza. </p>
</div>
</div>
<div class="grid gap-4 content-start p-4">
{% render '@icon', { id: 'outline--check-badge', size: 'w-16 h-16 lg:w-24 lg:h-24', classes: 'text-primary-500 bg-primary-100 p-3 lg:p-6 rounded-full'}, true %}
<div class="grid gap-3 lg:gap-6">
<h3 class="n7-heading-5 lg:n7-heading-4">Proteggi i Tuoi Occhi dalla Luce Blu</h3>
<p class="lg:text-lg">Gli schermi digitali emettono luce blu, che può causare affaticamento e danni agli occhi nel tempo. Utilizza filtri anti-luce blu o indossa occhiali appositamente progettati per ridurre l'esposizione a questa luce dannosa.</p>
</div>
</div>
<div class="grid gap-4 content-start p-4">
{% render '@icon', { id: 'outline--check-badge', size: 'w-16 h-16 lg:w-24 lg:h-24', classes: 'text-primary-500 bg-primary-100 p-3 lg:p-6 rounded-full'}, true %}
<div class="grid gap-3 lg:gap-6">
<h3 class="n7-heading-5 lg:n7-heading-4">Mantieni una Buona Illuminazione Ambientale</h3>
<p class="lg:text-lg">Assicurati che la tua area di lavoro e le stanze in cui trascorri del tempo siano ben illuminate. Una luce adeguata riduce lo sforzo degli occhi e previene l'affaticamento visivo.</p>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 xl:grid-cols-[55%_1fr] gap-8 mt-16 lg:mx-6 xl:mx-16 2xl:mx-44 n7-background-secondary-light rounded-2xl">
<div class="grid gap-6 px-4 pt-6 sm:px-8 sm:pt-8 md:pr-0 md:py-8 xl:py-16 xl:pl-16 content-center">
<div>
<h3 class="n7-heading-3 mb-6">Dove acquistarlo</h2>
<p class="text-lg"><strong>Drusenoff collirio</strong> lo trovi in tutte le farmacie ed è acquistabile anche online senza prescrizione medica</p>
</div>
{% render '@button--size-s', {label:'Acquista online', href: '#', icon: 'solid--arrow-right', classes: 'w-fit'}, true %}
</div>
<div>
{% render '@image', {src: '/images/dove acquistarlo.jpg', class: 'rounded-b-2xl md:rounded-bl-none md:rounded-r-2xl md:h-full md:object-cover'}, true %}
</div>
</div>
</div>
</div>
</section>
{% endblock content %}
{
"mainHidden": true,
"minisiteHidden": false,
"isDrusenoff": true,
"video": {
"src": "https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL",
"parameters": "&controls=2&modestbranding=1&rel=0",
"title": "YouTube video title",
"classes": "w-full md:max-w-[500px] aspect-video rounded-2xl"
},
"buttons": {
"outline": {
"href": "#",
"label": "Perchè proteggere la tua vista",
"classes": "n7-btn--s"
}
},
"component": {
"handle": "image",
"context": {
"src": "/images/img-hero-drusenoff.png",
"class": "w-full h-64 sm:h-auto object-cover rounded-2xl"
}
}
}
Slider and carousel library: https://accessible360.github.io/accessible-slick/ (this library is based on jQuery).
Implementation needs loading of library files and slider activation in the main page HTML code
(see components/_preview-layout.njk file).
In the HEAD of the page:
At the bottom of the page:
$(document).ready(function() {
$('#n7HeroSlider').slick(
{
...
}
);
});$(document).ready(function() {
$('#n7NewsCarousel').slick(
{
...
}
);
});