9d96253888
- Allinea scroll a #contatti, misura header e scroll-padding, spy con documentTopY e piccolo SPY_FUDGE; hashchange/ResizeObserver; footer visibile azzera Contattaci - Footer: id site-footer, griglia senza blocco brand sopra, tagline a destra del copyright; global.css fallback scroll-padding - CTA: eyebrow Contatti, bordo/sezione allineate alle FAQ, #contatti sulla section - Servizi: callout Breaking Glass con look glossy (gradient, highlight, luce) Made-with: Cursor
216 lines
7.3 KiB
Plaintext
216 lines
7.3 KiB
Plaintext
---
|
||
import { footer } from '../data/home';
|
||
|
||
const hasNewsletterAction =
|
||
typeof footer.newsletter.actionUrl === 'string' &&
|
||
footer.newsletter.actionUrl.length > 0;
|
||
|
||
const nl = footer.newsletter;
|
||
const nextUrl =
|
||
typeof nl.successRedirect === 'string' && nl.successRedirect.length > 0
|
||
? nl.successRedirect
|
||
: '';
|
||
const notifySubject =
|
||
typeof nl.notifySubject === 'string' && nl.notifySubject.length > 0
|
||
? nl.notifySubject
|
||
: '';
|
||
|
||
const linkClass =
|
||
'text-sm text-sky-400/90 transition-colors hover:text-sky-300';
|
||
---
|
||
|
||
<footer id="site-footer" class="relative z-[1] border-t border-nx-border px-4 py-12 sm:px-6">
|
||
<div class="mx-auto max-w-6xl">
|
||
<!-- Griglia link; brand + slogan spostati in fondo a fianco al copyright -->
|
||
<div class="border-b border-nx-border py-10">
|
||
<div
|
||
class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4 lg:items-start lg:gap-x-10 xl:gap-x-12"
|
||
>
|
||
<div class="min-w-0">
|
||
<p
|
||
class="mb-4 text-xs font-semibold uppercase tracking-wider text-nx-fg"
|
||
>
|
||
{footer.columnTitles.sections}
|
||
</p>
|
||
<ul class="space-y-2.5">
|
||
{footer.homeNav.map((link) => (
|
||
<li>
|
||
<a class={linkClass} href={link.href}>
|
||
{link.label}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="min-w-0">
|
||
<p
|
||
class="mb-4 text-xs font-semibold uppercase tracking-wider text-nx-fg"
|
||
>
|
||
{footer.columnTitles.legal}
|
||
</p>
|
||
<ul class="space-y-2.5">
|
||
{footer.legalColumnNav.map((link) => (
|
||
<li>
|
||
<a class={linkClass} href={link.href}>
|
||
{link.label}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="min-w-0">
|
||
<p
|
||
class="mb-4 text-xs font-semibold uppercase tracking-wider text-nx-fg"
|
||
>
|
||
{footer.columnTitles.social}
|
||
</p>
|
||
<ul class="space-y-2.5 text-sm">
|
||
{footer.socialLinks.map((item) => (
|
||
<li>
|
||
{item.href ? (
|
||
<a
|
||
class={linkClass}
|
||
href={item.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
{item.label}
|
||
</a>
|
||
) : (
|
||
<span
|
||
class="cursor-not-allowed text-nx-muted opacity-50"
|
||
title="URL da configurare in footer.ts"
|
||
>
|
||
{item.label}
|
||
</span>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="min-w-0">
|
||
<p
|
||
class="mb-4 text-xs font-semibold uppercase tracking-wider text-nx-fg"
|
||
>
|
||
{footer.columnTitles.company}
|
||
</p>
|
||
<ul class="space-y-2.5">
|
||
{footer.companyNav.map((link) => (
|
||
<li>
|
||
{link.href ? (
|
||
<a class={linkClass} href={link.href}>
|
||
{link.label}
|
||
</a>
|
||
) : (
|
||
<span class="text-sm text-nx-muted" title="Collegamento in arrivo">
|
||
{link.label}
|
||
</span>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="mt-10 flex flex-col gap-3 border-t border-nx-border/70 pt-8 sm:flex-row sm:items-center sm:gap-6"
|
||
data-nx-footer-print-collapsible
|
||
>
|
||
<button
|
||
type="button"
|
||
class="inline-flex h-10 shrink-0 items-center justify-center self-start rounded-lg border border-nx-border bg-nx-bg/50 px-4 text-sm font-medium text-sky-400/90 transition-colors hover:border-sky-500/35 hover:bg-sky-500/5 hover:text-sky-300 sm:self-auto"
|
||
data-nx-cc-open
|
||
>
|
||
{footer.cookiePreferences.label}
|
||
</button>
|
||
<p class="max-w-xl text-xs leading-relaxed text-nx-muted sm:flex-1">
|
||
{footer.cookiePreferences.hint}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Una sola area newsletter, allineata a sinistra come la colonna Sezioni -->
|
||
<div class="pt-10 lg:max-w-md" data-nx-footer-print-collapsible>
|
||
<p class="text-xs font-semibold uppercase tracking-wider text-nx-fg">
|
||
{footer.newsletter.title}
|
||
</p>
|
||
<p class="mt-1.5 text-xs leading-relaxed text-nx-muted">
|
||
{footer.newsletter.description}
|
||
</p>
|
||
{
|
||
hasNewsletterAction ? (
|
||
<form
|
||
class="relative mt-3 flex flex-col gap-2 sm:flex-row sm:items-stretch"
|
||
action={nl.actionUrl}
|
||
method="post"
|
||
accept-charset="UTF-8"
|
||
>
|
||
{nextUrl ? <input type="hidden" name="_next" value={nextUrl} /> : null}
|
||
{notifySubject ? (
|
||
<input type="hidden" name="_subject" value={notifySubject} />
|
||
) : null}
|
||
<input
|
||
type="text"
|
||
name="_gotcha"
|
||
tabindex="-1"
|
||
autocomplete="off"
|
||
aria-hidden="true"
|
||
class="pointer-events-none absolute -left-[9999px] h-0 w-0 opacity-0"
|
||
/>
|
||
<input
|
||
type="email"
|
||
name={nl.fieldName}
|
||
required
|
||
autocomplete="email"
|
||
placeholder={nl.placeholder}
|
||
class="min-h-10 w-full rounded-lg border border-nx-border bg-nx-bg/80 px-3 text-sm text-nx-fg placeholder:text-nx-muted/70 outline-none ring-sky-500/30 focus:border-sky-500/40 focus:ring-2"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
class="inline-flex h-10 shrink-0 items-center justify-center rounded-lg bg-nx-fg px-4 text-sm font-semibold text-nx-bg hover:bg-white sm:px-5"
|
||
>
|
||
{nl.buttonLabel}
|
||
</button>
|
||
</form>
|
||
) : (
|
||
<div class="mt-3 space-y-2">
|
||
<input
|
||
type="email"
|
||
disabled
|
||
placeholder={nl.placeholder}
|
||
class="min-h-10 w-full cursor-not-allowed rounded-lg border border-nx-border bg-nx-bg/40 px-3 text-sm text-nx-muted opacity-60"
|
||
aria-describedby="nx-newsletter-hint"
|
||
/>
|
||
<button
|
||
type="button"
|
||
disabled
|
||
class="inline-flex h-10 w-full cursor-not-allowed items-center justify-center rounded-lg border border-nx-border bg-nx-elevated/50 text-sm font-medium text-nx-muted opacity-70 sm:w-auto sm:px-5"
|
||
>
|
||
{nl.buttonLabel}
|
||
</button>
|
||
<p id="nx-newsletter-hint" class="text-xs leading-relaxed text-nx-muted">
|
||
Iscrizione in arrivo: configura l’endpoint nel progetto per attivare il modulo.
|
||
</p>
|
||
</div>
|
||
)
|
||
}
|
||
</div>
|
||
|
||
<div
|
||
class="mt-0 flex flex-col gap-3 border-t border-nx-border pt-8 sm:flex-row sm:items-end sm:justify-between sm:gap-6"
|
||
>
|
||
<p class="min-w-0 text-xs leading-relaxed text-nx-muted sm:text-sm">
|
||
© {new Date().getFullYear()} NexStudio. {footer.legalLine}
|
||
</p>
|
||
<p
|
||
class="max-w-md shrink-0 text-xs leading-relaxed text-nx-muted sm:max-w-lg sm:text-right sm:text-sm"
|
||
>
|
||
{footer.tagline}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|