<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>
<!-- RP 240327 Detail page - Added div -->
<div class="n7-background-gray-02">
<!-- RP 240325 - Removed div
<div class="py-10 lg:py-12 n7-background-gray-02"> -->
<!-- RP 240325 - Changed classes -->
<!-- RP 240326 List page - Changed classes -->
<div class="container py-10 lg:py-12 md:pl-10 lg:pl-16 2xl:px-36 grid gap-6 n7-background-gray-02">
<nav class="n7-breadcrumb " aria-label="Breadcrumb">
<ol class="flex flex-wrap">
<li>
<a class="inline-flex items-center p-1 text-xs n7-content-03 hover:underline" href="#">
Home
<svg class="inline-block align-middle fill-current w-4 h-4 text-neutral-400 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="inline-flex items-center p-1 text-xs n7-content-03 hover:underline" href="#">
livello 1
<svg class="inline-block align-middle fill-current w-4 h-4 text-neutral-400 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="inline-flex items-center p-1 text-xs n7-content-03 font-bold hover:underline" href="#" aria-current="page">
livello 2
</a>
</li>
</ol>
</nav>
<div class="grid gap-2">
<!-- RP 240326 List page - Changed classes -->
<h1 class="n7-display-heading-6 lg:n7-heading-1 n7-content-01">Chi siamo</h1>
</div>
<p class="text-lg lg:text-xl n7-content-01">OFFHEALTH S.p.a. è una dinamica realtà farmaceutica, guidata da un team di professionisti altamente qualificati, con esperienze precedenti in importanti gruppi industriali.<br>L'azienda si distingue per la sua specializzazione unica sulle patologie e i discomfort dell'occhio, ponendo un forte accento sulla qualità e l'innovazione come pilastri fondamentali per ogni suo prodotto.</p>
</div>
<!-- RP 240325 - Removed div
</div> -->
<!-- RP 240327 Detail page - Added div -->
</div>
</section>
<section>
<!-- RP 240326 List page - Changed classes -->
<div class="2xl:container lg:ml-16 2xl:pl-36 2xl:ml-auto bg-gradient-to-r from-white from-0% via-white via-49% to-secondary-100 to-50%">
<!-- RP 240326 List page - Changed classes and style -->
<div class="lg:pr-36 xl:pr-40 2xl:pr-[8.25rem]" style="background: url('/images/bullets-pattern-01.svg') no-repeat right top 30px">
<img class="w-full aspect-video max-h-[450px] object-cover" src="/images/OffHealth-34.jpg" alt="">
</div>
</div>
</section>
<section class="my-10 lg:my-16">
<!-- RP 240326 List page - Changed classes -->
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="container md:pl-10 lg:pl-16 2xl:px-36">
<h2 class="n7-display-heading-6 lg:n7-heading-2 max-w-[450px] text-center mx-auto">All'avanguardia nella Ricerca Oftalmica</h2>
<!-- RP 240325 - Added containing div -->
<div class="mt-5 flex">
<h2 class="sr-only" id="tablist-1">Titolo tablist</h2>
<ul role="tablist" aria-labelledby="tablist-1" class="n7-tablist is-tablist is-manual">
<li role="presentation">
<button id="tab-1" type="button" role="tab" class="n7-tablist__tab is-tab" aria-selected="true" aria-controls="tabpanel-1">
<span class="focus">Ricerca e Sviluppo</span>
</button>
</li>
<li role="presentation">
<button id="tab-2" type="button" role="tab" class="n7-tablist__tab is-tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
<span class="focus">Collaborazione Medica</span>
</button>
</li>
</ul>
<!-- RP 240325 - Added containing div -->
</div>
<div id="tabpanel-1" class="n7-tablist__tabpanel" role="tabpanel" aria-labelledby="tab-1">
<div class="my-10 lg:my-16">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-5 lg:grid-cols-2 xl:grid-cols-[1fr_430px_max-content]">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-6 content-start lg:pr-6">
<h3 class="n7-display-heading-6 lg:n7-heading-2">Ricerca e Sviluppo</h3>
<p class="text-base lg:text-lg">L'approccio di OFFHEALTH alla ricerca e allo sviluppo è caratterizzato da un impegno costante verso l'innovazione. Ciò si traduce nella creazione di prodotti e trattamenti per l'oftalmologia avanzati, con un focus specifico su patologie come le alterazioni della retina, della superficie oculare, il glaucoma.</p>
<p class="text-base lg:text-lg">La nostra ricerca punta a migliorare l'efficacia terapeutica e la tollerabilità dei trattamenti, incrementando così la compliance dei pazienti.</p>
</div>
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-6 p-8 text-white content-end" style="background: linear-gradient(rgba(3, 49, 135, 0.92), rgba(3, 49, 135, 0.92)), url('/images/OffHealth-ricerca.jpg') no-repeat left top; background-size: cover;">
<div class="n7-display-heading-6 lg:n7-heading-2">+10 Anni</div>
<p>OFFHEALTH S.p.a. celebra un decennio di eccellenza nel campo farmaceutico oculistico. Da quando abbiamo iniziato il nostro viaggio nel 2013.</p>
</div>
<img class="hidden xl:block" src="/images/bullets-pattern-03.svg" alt="">
</div>
</div>
</div>
<div id="tabpanel-2" class="n7-tablist__tabpanel hidden" role="tabpanel" aria-labelledby="tab-2">
<div class="my-10 lg:my-16">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-5 lg:grid-cols-2 xl:grid-cols-[1fr_430px_max-content]">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-6 content-start lg:pr-6">
<h3 class="n7-display-heading-6 lg:n7-heading-2">Collaborazione Medica</h3>
<p class="text-base lg:text-lg">La collaborazione con i medici oculisti è fondamentale per OFFHEALTH. Ci impegniamo a fornire alla classe medica prodotti e servizi di alta qualità che siano utili nell’attività clinica, diagnostica e terapeutica.</p>
<p class="text-base lg:text-lg">Questo contribuisce a migliorare la qualità della vita dei pazienti, rispecchiando il nostro impegno nel campo oculistico.</p>
</div>
<div>
<!-- RP 240404 Tablist - Changed classes -->
<img class="object-cover h-full" src="/images/OffHealth-collaborazione.jpg" alt="">
</div>
<img class="hidden xl:block" src="/images/bullets-pattern-03.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- RP 240328 Style fixes - Added class -->
<section class="n7-background-gray-02">
<!-- RP 240326 List page - Changed classes -->
<!-- RP 240328 Style fixes - Changed classes -->
<!-- RP 240412 Style fixes - Changed classes -->
<div class="container py-10 lg:py-12 md:pl-10 lg:pl-16 2xl:px-36">
<!-- RP 240412 Style fixes - Changed classes -->
<div class="grid gap-5 lg:grid-cols-2 lg:gap-11">
<div class="grid gap-6 content-start">
<h3 class="n7-display-heading-6 lg:n7-heading-2">Situati nel Cuore di Firenze</h3>
<p class="text-base lg:text-lg">La sede di OFFHEALTH si trova a Firenze, una città che offre notevoli vantaggi logistici. Questa posizione centrale nel territorio italiano è ideale per la connettività sia via terra, che tramite le reti ferroviarie e aeree, grazie alla vicinanza dell'aeroporto di Peretola a Firenze e dello scalo internazionale di Pisa.</p>
</div>
<div class="lg:order-first">
<!-- RP 240412 Style fixes - Changed classes -->
<img class="object-cover w-full" src="/images/OffHealth-16-2-470x380.webp" alt="">
</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 %}
<section>
{% render '@page-header--detail-compact' %}
</section>
<section>
<!-- RP 240326 List page - Changed classes -->
<div class="2xl:container lg:ml-16 2xl:pl-36 2xl:ml-auto bg-gradient-to-r from-white from-0% via-white via-49% to-secondary-100 to-50%">
<!-- RP 240326 List page - Changed classes and style -->
<div class="lg:pr-36 xl:pr-40 2xl:pr-[8.25rem]" style="background: url('/images/bullets-pattern-01.svg') no-repeat right top 30px">
<img class="w-full aspect-video max-h-[450px] object-cover" src="/images/OffHealth-34.jpg" alt="">
</div>
</div>
</section>
<section class="my-10 lg:my-16">
<!-- RP 240326 List page - Changed classes -->
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="container md:pl-10 lg:pl-16 2xl:px-36">
<h2 class="n7-display-heading-6 lg:n7-heading-2 max-w-[450px] text-center mx-auto">All'avanguardia nella Ricerca Oftalmica</h2>
{% render '@tablist', { tabs: [{label : 'Ricerca e Sviluppo'}, { label : 'Collaborazione Medica'}], classes: 'mt-5 flex' } %}
</div>
</section>
<!-- RP 240328 Style fixes - Added class -->
<section class="n7-background-gray-02">
<!-- RP 240326 List page - Changed classes -->
<!-- RP 240328 Style fixes - Changed classes -->
<!-- RP 240412 Style fixes - Changed classes -->
<div class="container py-10 lg:py-12 md:pl-10 lg:pl-16 2xl:px-36">
<!-- RP 240412 Style fixes - Changed classes -->
<div class="grid gap-5 lg:grid-cols-2 lg:gap-11">
<div class="grid gap-6 content-start">
<h3 class="n7-display-heading-6 lg:n7-heading-2">Situati nel Cuore di Firenze</h3>
<p class="text-base lg:text-lg">La sede di OFFHEALTH si trova a Firenze, una città che offre notevoli vantaggi logistici. Questa posizione centrale nel territorio italiano è ideale per la connettività sia via terra, che tramite le reti ferroviarie e aeree, grazie alla vicinanza dell'aeroporto di Peretola a Firenze e dello scalo internazionale di Pisa.</p>
</div>
<div class="lg:order-first">
<!-- RP 240412 Style fixes - Changed classes -->
<img class="object-cover w-full" src="/images/OffHealth-16-2-470x380.webp" alt="">
</div>
</div>
</div>
</section>
{% endblock content %}
{
"mainHidden": false,
"minisiteHidden": true
}
No notes defined.