Adriano
e6c493b756
- Contatti: nome, cognome, telefono e mail resi obbligatori (validazione client + server); il form del footer ora include cognome e telefono. - Home hero: rimossa la foto (file conservato su disco), fascia ridotta da 100vh a padding contenuto, testo allargato. - Menu: la voce "Promo 2 (test)" è visibile solo agli admin loggati. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
73 lines
3.4 KiB
Plaintext
73 lines
3.4 KiB
Plaintext
---
|
||
// Foto hero rimossa ma conservata su disco per riuso futuro: assets/img/hero-1.png
|
||
import T from '../content/T.astro';
|
||
import { t } from '../../lib/content';
|
||
const slides = [
|
||
{ titleTags: ['home.hero.title-line-1', 'home.hero.title-line-2', 'home.hero.title-line-3'] },
|
||
];
|
||
---
|
||
<section class="hero" aria-label="presentazione">
|
||
{slides.map((s, i) => (
|
||
<div class:list={['hero__slide', { 'is-active': i === 0 }]}>
|
||
<div class="container hero__in">
|
||
<div class="hero__text">
|
||
<h1>{s.titleTags.map((tag) => <T tag={tag} as="span" class="hero__line" />)}</h1>
|
||
<a class="btn" href="/services">{t('home.hero.cta')}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{slides.length > 1 && (
|
||
<>
|
||
<button class="hero__arrow hero__arrow--prev" aria-label="precedente">‹</button>
|
||
<button class="hero__arrow hero__arrow--next" aria-label="successiva">›</button>
|
||
</>
|
||
)}
|
||
</section>
|
||
|
||
<style>
|
||
.hero { position: relative; background:
|
||
repeating-linear-gradient(to bottom, transparent 0 10px, rgba(0,0,0,.05) 10px 11px) left top / 40% 60% no-repeat, #fff; }
|
||
.hero__slide { display: none; }
|
||
.hero__slide.is-active { display: block; }
|
||
/* Come nel Figma: figure a piena altezza ancorate in basso a destra,
|
||
testo sovrapposto sulla sinistra. */
|
||
.hero__in { position: relative; display: flex; align-items: center; min-height: 0; padding-block: 90px; }
|
||
/* Lo span .hero__line è reso dal componente <T> e non riceve il data-astro-cid
|
||
di questo componente: si ancora a .hero__text (che il cid ce l'ha) + :global. */
|
||
.hero__text h1 :global(.hero__line) { display: block; }
|
||
.hero__text { position: relative; z-index: 1; max-width: 640px; }
|
||
.hero__text h1 { font-weight: 500; }
|
||
.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 3rem; color: var(--c-heading); cursor: pointer; }
|
||
.hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; }
|
||
@media (max-width: 991px) {
|
||
.hero__in { flex-direction: column; align-items: flex-start; padding-block: 40px; min-height: 0; gap: 24px; }
|
||
.hero__text { max-width: none; }
|
||
}
|
||
|
||
/* Ingresso al load stile Slider Revolution del template */
|
||
@keyframes hero-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
|
||
:global(html.js) .hero__text h1 :global(.hero__line) { opacity: 0; animation: hero-up .8s ease forwards; }
|
||
:global(html.js) .hero__text h1 :global(.hero__line:nth-child(1)) { animation-delay: .15s; }
|
||
:global(html.js) .hero__text h1 :global(.hero__line:nth-child(2)) { animation-delay: .3s; }
|
||
:global(html.js) .hero__text h1 :global(.hero__line:nth-child(3)) { animation-delay: .45s; }
|
||
:global(html.js) .hero__text .btn { opacity: 0; animation: hero-up .8s ease .7s forwards; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
:global(html.js) .hero__text h1 :global(.hero__line), :global(html.js) .hero__text .btn { opacity: 1; animation: none; }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
const slides = document.querySelectorAll('.hero__slide');
|
||
if (slides.length > 1) {
|
||
let cur = 0;
|
||
const show = (i: number) => {
|
||
slides[cur].classList.remove('is-active');
|
||
cur = (i + slides.length) % slides.length;
|
||
slides[cur].classList.add('is-active');
|
||
};
|
||
document.querySelector('.hero__arrow--prev')?.addEventListener('click', () => show(cur - 1));
|
||
document.querySelector('.hero__arrow--next')?.addEventListener('click', () => show(cur + 1));
|
||
}
|
||
</script>
|