<header class="n7-header border-b n7-border-gray-01" id="siteHeader" aria-label="Header del sito">
<!-- Top bar -->
<div class="n7-top-bar lg:flex items-center lg:py-1 n7-background-gray-02">
<div class="n7-top-bar__container container lg:flex items-center lg:flex-1">
<div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">
<!-- LINK CERTIFICAZIONE ISO -->
<!-- Secondary nav/menu component -->
<nav aria-label="Secondaria">
<ul class="n7-secondary-navigation flex max-lg:flex-col max-lg:gap-6">
<li class="">
<a href="page" class="n7-link max-lg:block py-2 lg:p-2 text-sm n7-content-01">
Notizie
</a>
</li>
<li class="">
<a href="page" class="n7-link max-lg:block py-2 lg:p-2 text-sm n7-content-01">
Contatti
</a>
</li>
</ul>
</nav>
</div>
<div class="n7-top-bar__utilities-area flex items-center justify-between lg:flex-start lg:ml-auto">
<!-- Social links component -->
<ul class="n7-social-links flex items-center gap-8">
<li class="flex items-center">
<a href="facebook.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
<span class="sr-only">Vai al profilo Facebook di ???</span>
<svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--facebook" />
</svg>
</a>
</li>
<li class="flex items-center">
<a href="instagram.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
<span class="sr-only">Vai al profilo Instagram di ???</span>
<svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--instagram" />
</svg>
</a>
</li>
<li class="flex items-center">
<a href="youtube.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
<span class="sr-only">Vai al canale YouTube di ???</span>
<svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--youtube" />
</svg>
</a>
</li>
</ul>
<span class="hidden lg:inline w-1e h-10 mx-6 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
<!-- Language Selector component -->
<div>Lingua</div>
<!-- Search component -->
<div>
<button type="button" id="searchModalTrigger" class="n7-link n7-btn n7-btn--icon n7-content-01 border-0 w-10 h-10">
<span class="sr-only">Cerca nel sito di OffHealth - apri la modale</span>
<svg class="inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
<!-- Search Modal - BEGIN -->
<div id="searchModal" class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="relative h-full w-full mx-auto p-6 lg:p-16 shadow-lg n7-background-gray-01">
<div class="container lg:px-16 grid gap-14">
<div class="flex justify-between items-center n7-content-01">
<h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito</h2>
<button id="closeModal" class="n7-link n7-btn n7-btn--icon n7-content-01 border-0">
<span class="sr-only">Chiudi</span>
<svg class="inline-block align-middle fill-current w-8 h-8" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
</button>
</div>
<div class="modal-content">
<form role="search" class="flex flex-col lg:flex-row gap-4">
<div class="n7-input-field grid gap-2 flex-1">
<label for="search" class="block text-base font-medium n7-content-01">Cerca tra i prodotti, le notizie, ecc ...</label>
<div class="n7-input flex items-center relative">
<svg class="inline-block align-middle fill-current w-6 h-6 absolute left-3 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
<input id="search" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-3 pr-3 border n7-border-gray-01 rounded-full w-full pl-10 " type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="n7-btn
n7-btn--primary
n7-btn--primary w-fit lg:self-end">
Cerca nel sito
<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>
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Search Modal - END -->
</div><!--/ END Search component -->
</div><!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
<!-- Main heading -->
<div class="n7-main-heading bg-white flex items-center py-6 lg:py-1">
<div class="container flex items-center flex-1">
<div class="flex items-center n7-branding site-branding lg:max-w-[35.7%]">
<a class="n7-site-logo site-logo flex h-9 md:flex-1 lg:max-w-[248px]" href="#">
<img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/offhealth.svg" alt="Alt logo image" width="248" height="81" />
</a>
<span class="hidden lg:inline w-4 h-10 md:w-10 md:h-20 ml-4 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
</div>
<div class="flex-1 lg:ml-auto lg:justify-end">
<nav class="n7-primary-navigation flex lg:justify-end" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-none lg: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-lg:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed lg:static lg:visible top-[--header-height] bottom-0 max-lg:w-[90%] max-lg:max-w-[350px] overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main lg:border-b-0" id="mainNavListContainer">
<ul class="n7-primary-navigation__list flex max-lg:flex-col gap-6 lg:gap-4 lg:justify-end has-dropdown-menu">
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium visited:n7-content-01 n7-link--active">
Chi Siamo
</a>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId01">
Salute dell’Occhio<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 lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId01">
<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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 1</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 2</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 3</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 4</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
</ul>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId02">
Ricerca e Innovazione<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 lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId02">
<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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 1</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 2</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 3</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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">Item label 4</span>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
</ul>
</li>
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01">
Prodotti
</a>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
</div>
<div class="n7-action-area__container flex gap-3 ml-4 max-lg:hidden">
<div class="n7-action-area flex gap-3 items-center max-lg:flex-wrap max-lg:mt-8">
<a href="#" class="n7-btn
n7-btn--primary
max-lg:n7-btn--l max-lg:w-full max-lg:justify-center n7-btn--s">
Prontuario
</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 lg:relative lg:w-auto lg:flex lg: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 lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" 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 lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80 lg:right-0 lg:z-10 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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</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 lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg: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>
<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" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<main id="mainContent">
<section class="n7-hero n7-background-primary-dark">
<div class="2xl:container">
<div id="n7HeroSlider">
<!-- Slide start -->
<!-- RP 240510 - Changed classes -->
<div class="h-full">
<!-- RP 240509 - Changed classes -->
<!-- RP 240510 - Changed classes -->
<div class="grid md:grid-cols-2 lg:grid-cols-2 items-center h-full">
<img src="../../images/hero-01.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover sm:object-contain md:object-cover" />
<!-- RP 240509 - Changed classes -->
<!-- RP 240510 - Changed classes -->
<div class="order-first py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
<!-- RP 240322 - Changed classes -->
<!-- RP 240509 - Changed classes -->
<!-- RP 240510 - Changed classes -->
<div class="container md:max-w-2xl md:px-10 lg:px-16">
<h1 class=" n7-heading-3 xl:n7-heading-1 n7-content-inverse">
Innovare con un Occhio al Futuro
</h1>
<p class="n7-body-lg mt-3 xl:n7-body-xl md:mt-5 md:max-w-3xl n7-content-inverse">
OFFHEALTH si afferma come pioniera nell'innovazione oftalmica. Uniamo passione e competenza per sviluppare prodotti e fornire servizi mirati a migliorare la qualità di vita dei pazienti.
</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--primary
xl:n7-btn--l n7-btn--s">
Scopri di più
<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>
</div>
</div>
</div>
</div>
<!-- Slide end -->
<!-- Slide start -->
<div class="h-full">
<div class="grid md:grid-cols-2 lg:grid-cols-2 items-center h-full">
<img src="../../images/hero-02.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover sm:object-contain md:object-cover" />
<div class="order-first py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
<!-- RP 240322 - Changed classes -->
<div class="container md:max-w-2xl md:px-10 lg:px-16">
<!-- <div class="container md:max-w-xl md:px-10 lg:px-12"> -->
<h1 class=" n7-heading-3 xl:n7-heading-1 n7-content-inverse">
Da oggi un’arma in piu’ per proteggerli dal sole e da fonti luminose dannose
</h1>
<p class="n7-body-lg mt-3 xl:n7-body-xl md:mt-5 md:max-w-3xl n7-content-inverse">
DRUSEN off collirio è una soluzione brevettata, utile a filtrare i raggi UV e la Luce Blu ed è un Dispositivo di Protezione Individuale (DPI)
</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--primary
xl:n7-btn--l n7-btn--s">
Scopri di più
<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>
</div>
</div>
</div>
</div>
<!-- Slide end -->
</div>
</div>
</section>
<section class="bg-gradient-to-r from-white from-0% via-white via-49% to-primary-1000 to-50%">
<div class="2xl:container lg:pr-36 lg:ml-16 xl:pr-40 2xl:pl-28 2xl:pr-44 2xl:ml-auto" style="background: url('/images/bullets-pattern-01.svg') no-repeat right 1rem top 30px">
<div class="n7-video relative ">
<!-- RP 240322 - Changed classes -->
<div class="n7-video__overlay absolute z-10 w-full aspect-video max-h-[450px]">
<!-- RP 240322 - Changed classes -->
<img src="/images/video-home.jpg" class="w-full aspect-video max-h-[450px] object-cover">
<button type="" class="n7-btn
n7-btn--icon n7-video__play absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 n7-btn--outline-reverse cursor-pointer"><svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 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--play" />
</svg>
</button>
</div>
<iframe class="n7-video__iframe w-full aspect-video max-h-[450px]" src="https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL&controls=2&modestbranding=1&rel=0" title="YouTube video title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</section>
<section class="my-10 lg:my-16">
<div class="container md:pl-10 lg:pl-16 2xl:pr-40 2xl:pl-28">
<div class="grid gap-2 lg:flex lg:flex-wrap lg:justify-between">
<span class="n7-category n7-category--lg lg:basis-full">
<svg class="inline-block align-middle fill-current w-2 h-2 mr-2 transition-all duration-200 ease-out transform group-hover:-translate-x-1 text-primary-400" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--circle" />
</svg>
prodotti
</span>
<h2 class="n7-display-heading-6 lg:n7-heading-2 max-w-[544px]">Soluzioni all'avanguardia per la <span class="font-medium">Salute Oculare</span></h2>
<a href="#" class="n7-btn
n7-btn--primary
n7-btn--s w-fit mt-6 lg:mt-0 lg:mb-4 lg:self-end">
Scopri tutti i prodotti
<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 class="container md:pl-10 lg:pl-16 2xl:pr-40 2xl:pl-28 mt-8">
<ul class="grid gap-8 2xl:gap-12 md:flex">
<li>
<!-- RP 240322 - Changed classes -->
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card max-w-[389px] pb-4
group is-card-fullclickable">
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<!-- RP 240322 - Changed classes -->
<img class="object-cover w-full h-full rounded group-hover:shadow-lg" alt="" src="/images/farmaci.jpg" />
</div>
<div class="grid gap-8">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
Integratori
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
</div>
<p class="n7-card__excerpt text-base">
I nostri integratori sono pensati per supportare la salute oculare a livello nutrizionale, fornendo un equilibrio di vitamine e minerali essenziali.
</p>
</div>
</article>
</li>
<li>
<!-- RP 240322 - Changed classes -->
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card max-w-[389px] pb-4
group is-card-fullclickable">
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<!-- RP 240322 - Changed classes -->
<img class="object-cover w-full h-full rounded group-hover:shadow-lg" alt="" src="/images/farmaci.jpg" />
</div>
<div class="grid gap-8">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
Integratori
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
</div>
<p class="n7-card__excerpt text-base">
I nostri integratori sono pensati per supportare la salute oculare a livello nutrizionale, fornendo un equilibrio di vitamine e minerali essenziali.
</p>
</div>
</article>
</li>
<li>
<!-- RP 240322 - Changed classes -->
<!-- RP 240326 List page - Changed classes -->
<article class="n7-card max-w-[389px] pb-4
group is-card-fullclickable">
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<!-- RP 240322 - Changed classes -->
<img class="object-cover w-full h-full rounded group-hover:shadow-lg" alt="" src="/images/farmaci.jpg" />
</div>
<div class="grid gap-8">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
Integratori
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
</div>
<p class="n7-card__excerpt text-base">
I nostri integratori sono pensati per supportare la salute oculare a livello nutrizionale, fornendo un equilibrio di vitamine e minerali essenziali.
</p>
</div>
</article>
</li>
</ul>
</div>
</section>
<!-- RP 240326 Home fixes - Changed classes -->
<section class="lg:pl-16 2xl:pl-0 bg-gradient-to-r from-white from-0% via-white via-50% to-primary-900 to-50%">
<div class="xl:container xl:pl-0 2xl:pr-0 2xl:pl-28">
<div class="container md:pl-10 lg:pl-16 lg:pr-0 bg-primary-900 text-white">
<div class="grid gap-8 2xl:gap-12 lg:grid-cols-2 py-10 lg:py-0">
<span class="n7-category n7-category--lg lg:basis-full lg:mt-16">
<svg class="inline-block align-middle fill-current w-2 h-2 mr-2 transition-all duration-200 ease-out transform group-hover:-translate-x-1 text-primary-400" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--circle" />
</svg>
I NOSTRI VALORI
</span>
<div class="grid gap-6 lg:gap-2.5 md:grid-cols-2 lg:mb-16">
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Focus sul Paziente</h3>
<p>La nostra visione è plasmare il futuro dell'assistenza oculistica, fornendo ai medici strumenti di qualità che migliorano la vita dei pazienti</p>
</div>
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Integrità e Trasparenza</h3>
<p>Operiamo con un impegno incondizionato verso l'etica e la chiarezza, onorando regole e persone con la massima professionalità </p>
</div>
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Qualità senza Compromessi</h3>
<p>Impegnati nell'eccellenza, i nostri prodotti e servizi si distinguono per l'alta qualità e l'innovazione, assicurando risultati superiori per la cura degli occhi.</p>
</div>
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Collaborazione Produttiva</h3>
<p>Creiamo sinergie con esperti del settore per sviluppare terapie all'avanguardia, migliorando così gli esiti clinici e supportando i professionisti nella loro pratica quotidiana.</p>
</div>
</div>
<div class="lg:row-start-1 lg:row-span-2 lg:col-start-2">
<img class="lg:h-full lg:object-cover" src="/images/nostri-valori.jpeg" alt="" />
</div>
</div>
</div>
</div>
</section>
<section class="my-8 lg:my-20">
<div class="container md:pl-10 lg:pl-16 2xl:pl-28 2xl:pr-40">
<div class="grid gap-8 xl:gap-20 md:grid-cols-2 xl:grid-cols-3">
<div class="grid gap-8">
<h2 class="n7-display-heading-6 lg:n7-heading-2">I più frequenti <span class="font-medium">disturbi e malattie dell'occhio</span></h2>
<p class="md:text-lg">Approfondimenti sulle condizioni e malattie oculari gravi, come glaucoma, cataratta, degenerazione maculare e altre, con focus su cause, sintomi, diagnosi e terapie.</p>
</div>
<img class="hidden xl:block" src="/images/home-occhio.jpg" alt="" />
<!-- RP 240326 Home fixes 02 - Changed classes -->
<div class="grid gap-12 content-center">
<ul>
<li>
<a href="#" class="n7-btn
n7-btn--only-text n7-btn--primary">
Blefarite
<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>
</li>
<li>
<a href="#" class="n7-btn
n7-btn--only-text n7-btn--primary">
Cataratta
<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>
</li>
<li>
<a href="#" class="n7-btn
n7-btn--only-text n7-btn--primary">
Congiuntivite
<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>
</li>
<li>
<a href="#" class="n7-btn
n7-btn--only-text n7-btn--primary">
Glaucoma
<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>
</li>
</ul>
<a href="#" class="n7-btn
n7-btn--primary
n7-btn--s w-fit">
Scopri tutte le condizioni
<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>
</section>
<!-- RP 240326 Home fixes - Changed classes -->
<section class="n7-background-primary-light">
<!-- RP 240326 Home fixes - Changed classes -->
<div class="container py-10 md:pl-10 lg:py-12 lg:pl-16 2xl:pl-28">
<span class="n7-category n7-category--lg lg:basis-full">
<svg class="inline-block align-middle fill-current w-2 h-2 mr-2 transition-all duration-200 ease-out transform group-hover:-translate-x-1 text-primary-400" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#solid--circle" />
</svg>
NOTIZIE
</span>
<div id="n7NewsCarousel" class="pt-8">
<!-- Slide start -->
<div>
<!-- RP 240322 - Changed classes -->
<article class="n7-card max-w-[476px] bg-transparent
lg:grid-cols-[1fr_min-content]
is-card-fullclickable">
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2 px-4 lg:px-0">
<h3 class="n7-card__title flex items-center gap-2 text-base font-medium n7-content-01">
<a class="grow hover:underline" href="">
TriMix® gocce oculari: ora disponibile anche in formulazione monodose
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<!-- RP 240322 - Changed classes -->
<div class="flex items-baseline justify-between">
<div class="n7-card__date text-sm n7-content-03">
<time datetime="2024-01-17">17 Gennaio 2024</time>
</div>
</div>
</div>
</div>
<!-- RP 240322 - Changed classes -->
<div class="n7-card__image lg:w-32
aspect-w-16 aspect-h-9">
<img class="object-cover w-full h-full" alt="" src="/images/feathers.jpg" />
</div>
</article>
</div>
<!-- Slide end -->
<!-- Slide start -->
<div>
<!-- RP 240322 - Changed classes -->
<article class="n7-card max-w-[476px] bg-transparent
lg:grid-cols-[1fr_min-content]
is-card-fullclickable">
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2 px-4 lg:px-0">
<h3 class="n7-card__title flex items-center gap-2 text-base font-medium n7-content-01">
<a class="grow hover:underline" href="">
TriMix® gocce oculari: ora disponibile anche in formulazione monodose
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<!-- RP 240322 - Changed classes -->
<div class="flex items-baseline justify-between">
<div class="n7-card__date text-sm n7-content-03">
<time datetime="2024-01-17">17 Gennaio 2024</time>
</div>
</div>
</div>
</div>
<!-- RP 240322 - Changed classes -->
<div class="n7-card__image lg:w-32
aspect-w-16 aspect-h-9">
<img class="object-cover w-full h-full" alt="" src="/images/feathers.jpg" />
</div>
</article>
</div>
<!-- Slide end -->
<!-- Slide start -->
<div>
<!-- RP 240322 - Changed classes -->
<article class="n7-card max-w-[476px] bg-transparent
lg:grid-cols-[1fr_min-content]
is-card-fullclickable">
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2 px-4 lg:px-0">
<h3 class="n7-card__title flex items-center gap-2 text-base font-medium n7-content-01">
<a class="grow hover:underline" href="">
TriMix® gocce oculari: ora disponibile anche in formulazione monodose
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<!-- RP 240322 - Changed classes -->
<div class="flex items-baseline justify-between">
<div class="n7-card__date text-sm n7-content-03">
<time datetime="2024-01-17">17 Gennaio 2024</time>
</div>
</div>
</div>
</div>
<!-- RP 240322 - Changed classes -->
<div class="n7-card__image lg:w-32
aspect-w-16 aspect-h-9">
<img class="object-cover w-full h-full" alt="" src="/images/feathers.jpg" />
</div>
</article>
</div>
<!-- Slide end -->
<!-- Slide start -->
<div>
<!-- RP 240322 - Changed classes -->
<article class="n7-card max-w-[476px] bg-transparent
lg:grid-cols-[1fr_min-content]
is-card-fullclickable">
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2 px-4 lg:px-0">
<h3 class="n7-card__title flex items-center gap-2 text-base font-medium n7-content-01">
<a class="grow hover:underline" href="">
TriMix® gocce oculari: ora disponibile anche in formulazione monodose
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<!-- RP 240322 - Changed classes -->
<div class="flex items-baseline justify-between">
<div class="n7-card__date text-sm n7-content-03">
<time datetime="2024-01-17">17 Gennaio 2024</time>
</div>
</div>
</div>
</div>
<!-- RP 240322 - Changed classes -->
<div class="n7-card__image lg:w-32
aspect-w-16 aspect-h-9">
<img class="object-cover w-full h-full" alt="" src="/images/feathers.jpg" />
</div>
</article>
</div>
<!-- Slide end -->
</div>
</div>
</section>
<!-- RP 240326 Home fixes - Changed classes -->
<section class="bg-primary-900 text-white">
<!-- RP 240326 Home fixes - Changed classes -->
<div class="container py-10 lg:py-16 md:pl-10 lg:pl-16 2xl:pl-28 2xl:pr-40">
<div class="grid gap-8 lg:grid-cols-2">
<div class="grid gap-8 lg:gap-12">
<div class="grid gap-6">
<h2 class="n7-display-heading-6 lg:n7-heading-2 font-medium">Progetti Attivi</h2>
<p>Progetti cofinanziato dall’Unione Europea, dallo Stato Italiano e dalla RegioneCampania, nell’ambito del POR Campania FESR 2014-2020</p>
</div>
<a href="#" class="n7-btn
n7-btn--outline-reverse n7-btn--s w-fit">
Tutti i progetti
<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 class="grid gap-5 md:grid-cols-2">
<!-- RP 240322 - Changed classes -->
<article class="n7-card md:max-w-[384px] pb-4 lg:pb-0 bg-transparent
group is-card-fullclickable">
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<!-- RP 240322 - Changed classes -->
<img class="object-cover w-full h-full " alt="" src="/images/keratrene-gel.jpeg" />
</div>
<div class="grid gap-8 lg:h-0">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
Keratrene gel
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
</div>
</div>
</article>
<!-- RP 240322 - Changed classes -->
<article class="n7-card md:max-w-[384px] pb-4 lg:pb-0 bg-transparent
group is-card-fullclickable">
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<!-- RP 240322 - Changed classes -->
<img class="object-cover w-full h-full " alt="" src="/images/keratrene-gel.jpeg" />
</div>
<div class="grid gap-8 lg:h-0">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
Keratrene gel<br>Lipocur - Drusenoff lipo
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</main>
<footer class="n7-footer">
<div class="n7-footer__navigation-row n7-background-gray-01">
<!-- RP 240322 - Changed classes -->
<div class="container grid gap-y-2 md:flex md:pr-0">
<!-- Left block -->
<div class="flex flex-col gap-6 pt-6 pb-6 md:pt-10 md:pb-12 md:pr-10">
<div class="n7-site-logo site-logo flex mb-1 w-52">
<img class="w-full h-full object-contain object-left-top" src="/images/offhealth.svg" alt="Logo alt text" width="248" height="81" />
</div>
<address class="grid gap-3 n7-content-03 text-sm">
<p>OFFHEALTH S.p.a.
<br>P.Iva – IT 06335340482
<br>Via Giovanni Paisiello, 10 – 50144 – Firenze (FI)
<br>Tel.: +39 055 016 17 71
<br><a class="n7-link n7-link--sm text-current" href="mailto:info@offhealth.it">info@offhealth.it</a>
</p>
</address>
<img src="/images/logo-certification.svg" width="155" alt="" class="" />
<div>
<a class="n7-link n7-link--sm n7-link--underline text-current" href="#">ISO 13485 IT originale IT302832</a>
<br><a class="n7-link n7-link--sm n7-link--underline text-current" href="#">ISO 9001 IT originale IT302831</a>
</div>
</div>
<!-- Center block -->
<!-- Three columns - To be implemented dynamic number of columns -->
<div class="grid xl:grid-cols-3 w-full md:pb-12">
<div class="basis-full lg:basis-1/2 xl:basis-full pt-8 md:pt-14 md:px-6">
<nav aria-labelledby="footerMainNav01">
<h2 id="footerMainNav01" class="text-lg text-primary-900 font-medium mb-4">Chi siamo</h2>
<ul class="flex flex-col gap-2">
<li>
<a href="#" class="n7-link n7-link--sm text-current">La Nostra identità </a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">Missione e Valori</a>
</li>
</ul>
<nav>
</div>
<div class="basis-full lg:basis-1/2 xl:basis-full pt-8 md:pt-14 md:px-6">
<nav aria-labelledby="footerMainNav02">
<h2 id="footerMainNav02" class="text-lg text-primary-900 font-medium mb-4">Salute dell’Occhio</h2>
<ul class="flex flex-col gap-2">
<li>
<a href="#" class="n7-link n7-link--sm text-current">Anatomia dell'Occhio</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">Condizioni e malattie dell’occhio</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">FAQ sulla Salute Oculare</a>
</li>
</ul>
<nav>
</div>
<div class="basis-full lg:basis-1/2 xl:basis-full pt-8 md:pt-14 md:px-6">
<nav aria-labelledby="footerMainNav03">
<h2 id="footerMainNav03" class="text-lg text-primary-900 font-medium mb-4">Ricerca e Innovazione</h2>
<ul class="flex flex-col gap-3">
<li>
<a href="#" class="n7-link n7-link--sm text-current">Progetti attivi</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">Attività di ricerca</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current">FAQ sulla Salute Oculare</a>
</li>
</ul>
<nav>
</div>
</div>
<!-- Right block -->
<!-- RP 240322 - Changed classes and added style -->
<div class="lg:min-w-[375px] max-md:mt-6 max-md:mx-[-1rem] pt-14 pb-12 px-6" style="background: #fff url('/images/bullets-pattern-02.svg') no-repeat right bottom">
<div class="flex flex-col gap-8 justify-center h-full">
<h2 class="n7-display-heading-6">Visita<br>lo <strong>store online</strong></h2>
<p>Scopri il nostro assortimento completo di soluzioni per la cura degli occhi.</p>
<a href="#" class="n7-btn
n7-btn--primary
max-md:w-full max-md:justify-center md:n7-btn--s md:w-fit">
Visita ora
<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>
<!-- Footer bottom bar -->
<div class="n7-footer__bottom-bar border-t n7-border-gray-01 n7-background-gray-02 py-6">
<div class="container grid gap-6 md:flex items-center">
<!-- Utilities and other -->
<nav aria-label="Utilità ">
<ul class="flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap">
<li>
<a href="#" class="n7-link n7-link--sm text-current py-1 px-3 n7-content-03 text-sm">Gestione cookies</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current py-1 px-3 n7-content-03 text-sm">Note legali e copyright</a>
</li>
<li>
<a href="#" class="n7-link n7-link--sm text-current py-1 px-3 n7-content-03 text-sm">Privacy e cookie</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
{% extends '@page-layout' %}
{% block content %}
{% render '@slider' %}
<section class="bg-gradient-to-r from-white from-0% via-white via-49% to-primary-1000 to-50%">
<div class="2xl:container lg:pr-36 lg:ml-16 xl:pr-40 2xl:pl-28 2xl:pr-44 2xl:ml-auto" style="background: url('/images/bullets-pattern-01.svg') no-repeat right 1rem top 30px">
{% render '@video', {overlayImage: '/images/video-home.jpg'}, true %}
</div>
</section>
<section class="my-10 lg:my-16">
<div class="container md:pl-10 lg:pl-16 2xl:pr-40 2xl:pl-28">
<div class="grid gap-2 lg:flex lg:flex-wrap lg:justify-between">
{% render '@category--overline', {text: 'prodotti', classes: 'n7-category--lg lg:basis-full'}, true %}
<h2 class="n7-display-heading-6 lg:n7-heading-2 max-w-[544px]">Soluzioni all'avanguardia per la <span class="font-medium">Salute Oculare</span></h2>
{% render '@button--icon-right', {classes: 'n7-btn--s w-fit mt-6 lg:mt-0 lg:mb-4 lg:self-end', href: '#', label: 'Scopri tutti i prodotti'}, true %}
</div>
</div>
<div class="container md:pl-10 lg:pl-16 2xl:pr-40 2xl:pl-28 mt-8">
<ul class="grid gap-8 2xl:gap-12 md:flex">
<li>
{% render '@card--home-product', {}, true %}
</li>
<li>
{% render '@card--home-product', {}, true %}
</li>
<li>
{% render '@card--home-product', {}, true %}
</li>
</ul>
</div>
</section>
<!-- RP 240326 Home fixes - Changed classes -->
<section class="lg:pl-16 2xl:pl-0 bg-gradient-to-r from-white from-0% via-white via-50% to-primary-900 to-50%">
<div class="xl:container xl:pl-0 2xl:pr-0 2xl:pl-28">
<div class="container md:pl-10 lg:pl-16 lg:pr-0 bg-primary-900 text-white">
<div class="grid gap-8 2xl:gap-12 lg:grid-cols-2 py-10 lg:py-0">
{% render '@category--overline', {text: 'I NOSTRI VALORI', classes: 'n7-category--lg lg:basis-full lg:mt-16'}, true %}
<div class="grid gap-6 lg:gap-2.5 md:grid-cols-2 lg:mb-16">
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Focus sul Paziente</h3>
<p>La nostra visione è plasmare il futuro dell'assistenza oculistica, fornendo ai medici strumenti di qualità che migliorano la vita dei pazienti</p>
</div>
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Integrità e Trasparenza</h3>
<p>Operiamo con un impegno incondizionato verso l'etica e la chiarezza, onorando regole e persone con la massima professionalità </p>
</div>
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Qualità senza Compromessi</h3>
<p>Impegnati nell'eccellenza, i nostri prodotti e servizi si distinguono per l'alta qualità e l'innovazione, assicurando risultati superiori per la cura degli occhi.</p>
</div>
<div class="grid gap-3 content-start lg:pb-9">
<h3 class="n7-heading-5">Collaborazione Produttiva</h3>
<p>Creiamo sinergie con esperti del settore per sviluppare terapie all'avanguardia, migliorando così gli esiti clinici e supportando i professionisti nella loro pratica quotidiana.</p>
</div>
</div>
<div class="lg:row-start-1 lg:row-span-2 lg:col-start-2">
<img class="lg:h-full lg:object-cover" src="/images/nostri-valori.jpeg" alt=""/>
</div>
</div>
</div>
</div>
</section>
<section class="my-8 lg:my-20">
<div class="container md:pl-10 lg:pl-16 2xl:pl-28 2xl:pr-40">
<div class="grid gap-8 xl:gap-20 md:grid-cols-2 xl:grid-cols-3">
<div class="grid gap-8">
<h2 class="n7-display-heading-6 lg:n7-heading-2">I più frequenti <span class="font-medium">disturbi e malattie dell'occhio</span></h2>
<p class="md:text-lg">Approfondimenti sulle condizioni e malattie oculari gravi, come glaucoma, cataratta, degenerazione maculare e altre, con focus su cause, sintomi, diagnosi e terapie.</p>
</div>
<img class="hidden xl:block" src="/images/home-occhio.jpg" alt=""/>
<!-- RP 240326 Home fixes 02 - Changed classes -->
<div class="grid gap-12 content-center">
<ul>
<li>
{% render '@button--text', { label: 'Blefarite', href: '#' }, true %}
</li>
<li>
{% render '@button--text', { label: 'Cataratta', href: '#' }, true %}
</li>
<li>
{% render '@button--text', { label: 'Congiuntivite', href: '#' }, true %}
</li>
<li>
{% render '@button--text', { label: 'Glaucoma', href: '#' }, true %}
</li>
</ul>
{% render '@button--icon-right', { label: 'Scopri tutte le condizioni', href: '#', classes: 'n7-btn--s w-fit' }, true %}
</div>
</div>
</div>
</section>
<!-- RP 240326 Home fixes - Changed classes -->
<section class="n7-background-primary-light">
<!-- RP 240326 Home fixes - Changed classes -->
<div class="container py-10 md:pl-10 lg:py-12 lg:pl-16 2xl:pl-28">
{% render '@category--overline', {text: 'NOTIZIE', classes: 'n7-category--lg lg:basis-full'}, true %}
<div id="n7NewsCarousel" class="pt-8">
<!-- Slide start -->
<div>
{% render '@card--news-compact', {}, true %}
</div>
<!-- Slide end -->
<!-- Slide start -->
<div>
{% render '@card--news-compact', {}, true %}
</div>
<!-- Slide end -->
<!-- Slide start -->
<div>
{% render '@card--news-compact', {}, true %}
</div>
<!-- Slide end -->
<!-- Slide start -->
<div>
{% render '@card--news-compact', {}, true %}
</div>
<!-- Slide end -->
</div>
</div>
</section>
<!-- RP 240326 Home fixes - Changed classes -->
<section class="bg-primary-900 text-white">
<!-- RP 240326 Home fixes - Changed classes -->
<div class="container py-10 lg:py-16 md:pl-10 lg:pl-16 2xl:pl-28 2xl:pr-40">
<div class="grid gap-8 lg:grid-cols-2">
<div class="grid gap-8 lg:gap-12">
<div class="grid gap-6">
<h2 class="n7-display-heading-6 lg:n7-heading-2 font-medium">Progetti Attivi</h2>
<p>Progetti cofinanziato dall’Unione Europea, dallo Stato Italiano e dalla RegioneCampania, nell’ambito del POR Campania FESR 2014-2020</p>
</div>
{% render '@button--outline-reverse', { label: 'Tutti i progetti', href: '#', classes: 'n7-btn--s w-fit' }, true %}
</div>
<div class="grid gap-5 md:grid-cols-2">
{% render '@card--home-project', {heading: 'Keratrene gel'}, true %}
{% render '@card--home-project', {heading: 'Keratrene gel<br>Lipocur - Drusenoff lipo'}, true %}
</div>
</div>
</div>
</section>
{% endblock content %}
{
"mainHidden": false,
"minisiteHidden": true
}
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(
{
...
}
);
});