<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-[58px] 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/iontoretina.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>
<!-- RP 240409 Page header minisite - Moved bkg style to external div -->
<div style="background: linear-gradient(180deg, rgba(255, 235, 212, 0.8) -5.28%, rgba(255, 255, 255, 0) 91.17%);">
<!-- RP 240408 Page header minisite - Changed classes -->
<!-- RP 240409 Page header minisite - Removed bkg style -->
<div class="container py-12 lg:py-20 md:px-10 lg:px-16 2xl:px-40 grid gap-6 ">
<!-- RP 240408 Page header minisite - Changed classes -->
<div class="grid gap-6 sm:flex sm:justify-between md:gap-x-12 relative">
<div class="grid auto-rows-min gap-6">
<span class="n7-category n7-category--sm">
<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>
category label
</span>
<h1 class="n7-heading-4 lg:n7-heading-1 n7-content-01 !font-medium">IONTORETINA</h1>
<h2 class="n7-heading-6 lg:n7-heading-3">Trattamento innovativo per la DMLE</h2>
<p class="lg:text-lg xl:text-xl n7-content-01">Guarda il video con il <strong>Dott. Marco Lombardo</strong> per scoprire questo trattamento.</p>
<!-- RP 240408 Page header minisite - Changed classes -->
<div class="grid gap-6 md:flex md:w-max">
<a href="url" class="n7-btn
n7-btn--primary
n7-btn--outline justify-center md:w-fit 2xl:n7-btn--l n7-btn--s">
La Iontoforesi sclerale
<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#solid--arrow-right" />
</svg>
</a>
<a href="url" class="n7-btn
n7-btn--primary
justify-center md:w-fit 2xl:n7-btn--l n7-btn--s">
Acquista online
<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#outline--cursor-arrow-rays" />
</svg>
</a>
</div>
</div>
<!-- RP 240408 Page header minisite - Changed classes -->
<div class="md:grow flex items-start sm:items-center">
<div class="n7-video relative grow flex justify-end">
<iframe class="n7-video__iframe w-full xl:w-[435px] aspect-video rounded-2xl" 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>
<div class="absolute -bottom-12 lg:-bottom-20 w-full h-[147px]" style="background: radial-gradient(57.95% 15.85% at 50% 106.42%, rgba(204, 196, 181, 0.65) 0%, rgba(204, 196, 181, 0) 100%);"></div>
</div>
</div>
</div>
</section>
<section>
<div class="container py-10 lg:py-12 md:px-10 lg:px-40 2xl:px-72">
<div class="grid gap-8 sm:grid-cols-[215px_1fr] lg:gap-16">
<img src="../../images/manuale.jpg" alt="" loading="lazy" class="image" />
<div class="grid gap-6 sm:content-between">
<div class="grid gap-2 xl:gap-6">
<h2 class="n7-heading-4 lg:n7-heading-3">Manuale</h2>
<p class="xl:text-lg">Scarica il manuale per una guida dettagliata all'uso della iontoforesi sclerale, indispensabile per ogni operatore sanitario.</p>
</div>
<a href="url" class="n7-btn
n7-btn--primary
n7-btn--s w-fit">
Scarica il manuale
<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-up-tray" />
</svg>
</a>
</div>
</div>
</div>
</section>
<section>
<div class="container md:px-10 lg:px-16 2xl:px-40">
<div class="grid gap-8 lg:gap-16 p-4 md:p-8 lg:p-16 rounded-3xl n7-background-secondary-light">
<div class="grid gap-3 lg:gap-6">
<h2 class="n7-heading-4 lg:n7-heading-3 text-center">Bibliografia</h2>
</div>
<ul class="grid gap-4 md:flex md:flex-wrap justify-center">
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<article class="n7-card h-full xl:max-w-[314px] py-6 px-4 bg-white rounded shadow-md
">
<!-- RP 240409 Research card - Changed classes -->
<div class="grid gap-4 grid-rows-[min-content_1fr]">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-6 n7-content-01 text-xl font-medium">
Lutein reaches the retina following iontophoresis application
</h3>
</div>
<div class="flex gap-4 py-2 border-t-[1px] n7-border-gray-01">
<span class="text-sm n7-content-01 font-medium">AUTORI</span>
<span class="text-sm n7-content-02">Sara Sousa - Joana Duarte - Marta Monteiro - Marco Lombardo - Giuseppe Lombardo</span>
</div>
<div>
<!-- RP 240409 Research card - Changed classes -->
<a href="#" class="n7-btn
n7-btn--primary
n7-btn--s cursor-pointer mt-4">
Scarica
<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-up-tray" />
</svg>
</a>
</div>
</div>
</article>
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<article class="n7-card h-full xl:max-w-[314px] py-6 px-4 bg-white rounded shadow-md
">
<!-- RP 240409 Research card - Changed classes -->
<div class="grid gap-4 grid-rows-[min-content_1fr]">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-6 n7-content-01 text-xl font-medium">
Assessment of trans-scleral iontophoresis delivery of lutein to the human retina
</h3>
</div>
<div class="flex gap-4 py-2 border-t-[1px] n7-border-gray-01">
<span class="text-sm n7-content-01 font-medium">AUTORI</span>
<span class="text-sm n7-content-02">Marco Lombardo - Valentina Villari - Norberto Micali - Pierre Roy - Sara H. Sousa - Giuseppe Lombardo</span>
</div>
<div>
<!-- RP 240409 Research card - Changed classes -->
<a href="#" class="n7-btn
n7-btn--primary
n7-btn--s cursor-pointer mt-4">
Scarica
<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-up-tray" />
</svg>
</a>
</div>
</div>
</article>
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
<article class="n7-card h-full xl:max-w-[314px] py-6 px-4 bg-white rounded shadow-md
">
<!-- RP 240409 Research card - Changed classes -->
<div class="grid gap-4 grid-rows-[min-content_1fr]">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-6 n7-content-01 text-xl font-medium">
Challenges in Age-Related Macular Degeneration: From Risk Factors to Novel Diagnostics and Prevention Strategies
</h3>
</div>
<div class="flex gap-4 py-2 border-t-[1px] n7-border-gray-01">
<span class="text-sm n7-content-01 font-medium">AUTORI</span>
<span class="text-sm n7-content-02">Marco Lombardo - Sebastiano Serrao - Giuseppe Lombardo</span>
</div>
<div>
<!-- RP 240409 Research card - Changed classes -->
<a href="#" class="n7-btn
n7-btn--primary
n7-btn--s cursor-pointer mt-4">
Scarica
<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-up-tray" />
</svg>
</a>
</div>
</div>
</article>
</li>
</ul>
</div>
</div>
</section>
<section>
<div class="container py-16 md:px-10 lg:px-40 2xl:px-72">
<div class="grid gap-16">
<div class="grid gap-8">
<h2 class="n7-heading-4 lg:n7-heading-3">Esecuzione Pratica</h2>
<div class="n7-video relative ">
<iframe class="n7-video__iframe w-full max-w-[896px] aspect-video rounded-2xl" 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>
<a href="url" class="n7-btn
n7-btn--primary
n7-btn--outline n7-btn--s sm:w-fit justify-self-center xl:n7-btn--l">
Esplora la Videoteca informativa
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 xl:w-6 xl: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#solid--arrow-right" />
</svg>
</a>
</div>
</div>
</section>
<section class="mb-16">
<div class="container md:px-10 lg:px-16 2xl:px-40">
<div class="grid sm:grid-cols-2 sm:gap-4 lg:gap-12">
<div class="rounded-t-2xl sm:rounded-2xl p-4 md:p-8 xl:p-16" style="background: linear-gradient(179.95deg, #FFF1E1 0.04%, rgba(255, 246, 236, 0.62) 103.75%);">
<div class="h-full" style="background: url('/images/bullets-iontoretina.svg') no-repeat right bottom -6px;">
<div class="h-full flex flex-col gap-6 justify-between">
<div class="grid gap-6">
<h2 class="n7-heading-4 lg:n7-heading-3">Contattaci</h2>
<p>Il nostro team di esperti è pronto a fornirti tutte le informazioni necessarie e a rispondere alle tue domande.</p>
</div>
<div class="grid gap-4">
<div class="flex items-center gap-2">
<svg class="inline-block align-middle fill-current w-4 h-4 text-primary-600" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--at-symbol" />
</svg>
<a href="mailto:iontoretina@offhealth.it" class="n7-link font-medium n7-content-01">
iontoretina@offhealth.it
</a>
</div>
<div class="flex items-center gap-2">
<svg class="inline-block align-middle fill-current w-4 h-4 text-primary-600" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--device-phone-mobile" />
</svg>
<a href="tel:+39 055 016 17 68" class="n7-link font-medium n7-content-01">
+39 055 016 17 68
</a>
</div>
</div>
</div>
</div>
</div>
<form class="p-4 sm:px-0 md:py-8 xl:py-24">
<div class="grid gap-6">
<div class="grid gap-6 xl:grid-cols-2 xl:gap-6">
<div class="n7-input-field grid gap-2">
<label for="name" class="block text-base font-medium n7-content-01">Nome</label>
<div class="n7-input flex items-center relative">
<input id="name" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-2 px-3 border n7-border-gray-01 rounded-lg w-full" type="text">
</div>
</div>
<div class="n7-input-field grid gap-2">
<label for="surname" class="block text-base font-medium n7-content-01">Cognome</label>
<div class="n7-input flex items-center relative">
<input id="surname" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-2 px-3 border n7-border-gray-01 rounded-lg w-full" type="text">
</div>
</div>
</div>
<div class="grid gap-6 xl:grid-cols-2 xl:gap-6">
<div class="n7-input-field grid gap-2">
<label for="email" class="block text-base font-medium n7-content-01">Email</label>
<div class="n7-input flex items-center relative">
<input id="email" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-2 px-3 border n7-border-gray-01 rounded-lg w-full" type="email">
</div>
</div>
<div class="n7-input-field grid gap-2">
<label for="phone" class="block text-base font-medium n7-content-01">Telefono</label>
<div class="n7-input flex items-center relative">
<input id="phone" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-2 px-3 border n7-border-gray-01 rounded-lg w-full" type="tel">
</div>
</div>
</div>
<div class="n7-input-field grid gap-2">
<label for="message" class="block text-base font-medium n7-content-01">Messaggio</label>
<textarea id="message" name="message" rows="3" class="border n7-border-gray-01 rounded-lg py-2 px-3 text-sm n7-input-placeholder"></textarea>
</div>
<button type="submit" class="n7-btn
n7-btn--primary
n7-btn--s justify-center xl:n7-btn--l xl:w-fit">
Invia richiesta
</button>
</div>
</form>
</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-52">
<img class="w-full h-full object-contain object-left-top" src="/images/iontoretina.svg" alt="Logo alt text" width="248" height="81" />
</div>
<address class="grid gap-3 n7-content-03 text-sm">
<p><span class="font-bold">Contatti</span>
<br><a class="n7-link n7-link--sm text-current" href="mailto:iontoretina@offhealth.it">iontoretina@offhealth.it</a>
<br>+39 055 016 17 71
<br>Via Giovanni Paisiello, 10 - 50144 - Firenze (FI) - ITALY
</p>
</address>
</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 -->
<!-- RP 240411 Ionto footer - Changed classes -->
<nav class="pb-4 lg:py-4" 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">Guida alla prevenzione della DMLE</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">Sono un Medico</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Footer bottom bar -->
</footer>
{% extends '@page-layout' %}
{% block content %}
<section>
{% render '@page-header--minisite', {titleWeight: '!font-medium'}, true %}
</section>
<section>
<div class="container py-10 lg:py-12 md:px-10 lg:px-40 2xl:px-72">
<div class="grid gap-8 sm:grid-cols-[215px_1fr] lg:gap-16">
{% render "@image", {src: '/images/manuale.jpg'}, true %}
<div class="grid gap-6 sm:content-between">
<div class="grid gap-2 xl:gap-6">
<h2 class="n7-heading-4 lg:n7-heading-3">Manuale</h2>
<p class="xl:text-lg">Scarica il manuale per una guida dettagliata all'uso della iontoforesi sclerale, indispensabile per ogni operatore sanitario.</p>
</div>
{% render '@button--icon-right', {label: 'Scarica il manuale', href: 'url', icon: 'solid--arrow-up-tray', iconsize: 'w-4 h-4', classes: 'n7-btn--s w-fit'} %}
</div>
</div>
</div>
</section>
<section>
<div class="container md:px-10 lg:px-16 2xl:px-40">
<div class="grid gap-8 lg:gap-16 p-4 md:p-8 lg:p-16 rounded-3xl n7-background-secondary-light">
<div class="grid gap-3 lg:gap-6">
<h2 class="n7-heading-4 lg:n7-heading-3 text-center">Bibliografia</h2>
</div>
<ul class="grid gap-4 md:flex md:flex-wrap justify-center">
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--research', {heading: 'Lutein reaches the retina following iontophoresis application', authors: 'Sara Sousa - Joana Duarte - Marta Monteiro - Marco Lombardo - Giuseppe Lombardo'}, true %}
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--research', {heading: 'Assessment of trans-scleral iontophoresis delivery of lutein to the human retina', authors: 'Marco Lombardo - Valentina Villari - Norberto Micali - Pierre Roy - Sara H. Sousa - Giuseppe Lombardo'}, true %}
</li>
<li class="md:max-w-[calc(50%-8px)] xl:max-w-[calc(33%-8px)]">
{% render '@card--research', {heading: 'Challenges in Age-Related Macular Degeneration: From Risk Factors to Novel Diagnostics and Prevention Strategies', authors: 'Marco Lombardo - Sebastiano Serrao - Giuseppe Lombardo'}, true %}
</li>
</ul>
</div>
</div>
</section>
<section>
<div class="container py-16 md:px-10 lg:px-40 2xl:px-72">
<div class="grid gap-16">
<div class="grid gap-8">
<h2 class="n7-heading-4 lg:n7-heading-3">Esecuzione Pratica</h2>
{% render '@video', {overlayImage: false, classes: 'w-full max-w-[896px] aspect-video rounded-2xl'}, true %}
</div>
{% render '@button--icon-right', {label: 'Esplora la Videoteca informativa', icon: 'solid--arrow-right', href: 'url', iconsize: 'w-4 h-4 md:w-5 md:h-5 xl:w-6 xl:h-6', classes: 'n7-btn--outline n7-btn--s sm:w-fit justify-self-center xl:n7-btn--l'} %}
</div>
</div>
</section>
<section class="mb-16">
<div class="container md:px-10 lg:px-16 2xl:px-40">
<div class="grid sm:grid-cols-2 sm:gap-4 lg:gap-12">
<div class="rounded-t-2xl sm:rounded-2xl p-4 md:p-8 xl:p-16" style="background: linear-gradient(179.95deg, #FFF1E1 0.04%, rgba(255, 246, 236, 0.62) 103.75%);">
<div class="h-full" style="background: url('/images/bullets-iontoretina.svg') no-repeat right bottom -6px;">
<div class="h-full flex flex-col gap-6 justify-between">
<div class="grid gap-6">
<h2 class="n7-heading-4 lg:n7-heading-3">Contattaci</h2>
<p>Il nostro team di esperti è pronto a fornirti tutte le informazioni necessarie e a rispondere alle tue domande.</p>
</div>
<div class="grid gap-4">
<div class="flex items-center gap-2">
{% render '@icon', { id: 'outline--at-symbol', size: 'w-4 h-4', classes: 'text-primary-600'}, true %}
{% render '@link', {label: 'iontoretina@offhealth.it', href: 'mailto:iontoretina@offhealth.it', classes: 'font-medium n7-content-01'}, true %}
</div>
<div class="flex items-center gap-2">
{% render '@icon', { id: 'outline--device-phone-mobile', size: 'w-4 h-4', classes: 'text-primary-600'}, true %}
{% render '@link', {label: '+39 055 016 17 68', href: 'tel:+39 055 016 17 68', classes: 'font-medium n7-content-01'}, true %}
</div>
</div>
</div>
</div>
</div>
<form class="p-4 sm:px-0 md:py-8 xl:py-24">
<div class="grid gap-6">
<div class="grid gap-6 xl:grid-cols-2 xl:gap-6">
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
<label for="name" class="block text-base font-medium n7-content-01">Nome</label>
{% render '@input', { id: 'name', classes: 'w-full', type: 'text' }, true %}
</div>
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
<label for="surname" class="block text-base font-medium n7-content-01">Cognome</label>
{% render '@input', { id: 'surname', classes: 'w-full', type: 'text' }, true %}
</div>
</div>
<div class="grid gap-6 xl:grid-cols-2 xl:gap-6">
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
<label for="email" class="block text-base font-medium n7-content-01">Email</label>
{% render '@input', { id: 'email', classes: 'w-full', type: 'email' }, true %}
</div>
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
<label for="phone" class="block text-base font-medium n7-content-01">Telefono</label>
{% render '@input', { id: 'phone', classes: 'w-full', type: 'tel' }, true %}
</div>
</div>
<div class="n7-input-field grid gap-2{% if classes %} {{ classes }}{% endif %}">
<label for="message" class="block text-base font-medium n7-content-01">Messaggio</label>
<textarea id="message" name="message" rows="3" class="border n7-border-gray-01 rounded-lg py-2 px-3 text-sm n7-input-placeholder"></textarea>
</div>
{% render '@button', {label: 'Invia richiesta', type: 'submit', classes: 'n7-btn--s justify-center xl:n7-btn--l xl:w-fit'}, true %}
</div>
</form>
</div>
</div>
</section>
{% endblock content %}
{
"mainHidden": true,
"minisiteHidden": false,
"isIontoretina": 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(
{
...
}
);
});