Refine landing layout: calendar actions and editorial gift section

This commit is contained in:
bisco
2026-03-25 19:37:04 +01:00
parent 8f580745d8
commit eb12dd880d
3 changed files with 484 additions and 18 deletions

View File

@ -17,23 +17,8 @@
<div class="hero__overlay"></div>
<div class="hero__content container">
<!-- <p class="eyebrow">Save the date</p> -->
<h1 class="hero__title">Hey, ci sono i 40 anni del Gianca!</h1>
<div class="hero__underline" aria-hidden="true"></div>
<br />
<div class="event-tag__date">Save the date</div>
<!-- <div class="event-tag event-tag--icon" aria-label="Informazioni evento">
<div class="event-tag__icon">
<span class="party-popper" aria-hidden="true"></span>
</div>
<div class="event-tag__content">
<div class="event-tag__date">25 aprile 2026</div>
<div class="event-tag__place">Lost Paradise Beach Club</div>
<div class="event-tag__divider"></div>
<div class="event-tag__meta">Bacoli • ore 12.00</div>
</div>
</div> -->
</div>
</header>
@ -52,9 +37,26 @@
</div>
<div class="details-card">
<div class="details-card__item">
<div class="details-card__item details-card__item--calendar">
<span class="details-card__label">Quando</span>
<strong>Sabato 25 aprile 2026</strong>
<div class="calendar-tools">
<a
class="calendar-tools__action"
id="google-calendar-link"
target="_blank"
rel="noopener noreferrer"
>
Google Calendar
</a>
<button
class="calendar-tools__action calendar-tools__action--button"
type="button"
id="ical-download"
>
iCal / Apple Calendar
</button>
</div>
</div>
<div class="details-card__item">
<span class="details-card__label">Dove</span>
@ -69,6 +71,52 @@
</div>
</section>
<section class="section gift" id="regalo">
<div class="container gift__shell">
<div class="gift__layout" aria-labelledby="gift-title">
<h3 class="gift__title" id="gift-title">Dettagli regalo</h3>
<div class="gift__col gift__col--left">
<p class="section-kicker gift__kicker">Regalo / quota viaggio</p>
<h2 class="gift__heading">Un piccolo gesto, con il sorriso.</h2>
<p class="gift__lead">
Se ti fa piacere contribuire al regalo o alla quota viaggio, qui trovi i riferimenti.
</p>
<p class="gift__note" id="gift-note">Nota facoltativa: un pensiero semplice è più che sufficiente.</p>
</div>
<div class="gift__col gift__col--right">
<span class="gift__accent" aria-hidden="true"></span>
<!-- Dati contributo: modifica rapidamente intestatario, IBAN, causale e nota in script.js (costante GIFT_DETAILS). -->
<dl class="gift__details">
<div class="gift__row">
<dt>Intestatario</dt>
<dd id="gift-holder">Giancarlo ...</dd>
</div>
<div class="gift__row gift__row--iban">
<dt>IBAN</dt>
<dd id="gift-iban">IT00X0000000000000000000000</dd>
<div class="gift__iban-actions">
<button
class="button button--secondary button--compact gift__copy"
type="button"
id="copy-iban"
data-copy-target="gift-iban"
>
Copia IBAN
</button>
<p class="gift__feedback" id="iban-feedback" aria-live="polite"></p>
</div>
</div>
<div class="gift__row">
<dt>Causale consigliata</dt>
<dd id="gift-causal">Regalo 40 anni Gianca</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section class="section rsvp" id="rsvp">
<div class="container rsvp__grid">
<div class="rsvp__copy">
@ -175,7 +223,7 @@
<footer class="footer">
<div class="container footer__inner">
<p>Ci vediamo a Bacoli.</p>
<p>Sviluppato con ♥ da bisco con Codex</p>
</div>
</footer>
</div>