Adriano
5b34ee1697
Come da documento cliente. Nuovo tag home.method.cta (auto-seed). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017rUFjLYZ1TZ7DgxwTR5q9K
45 lines
2.4 KiB
Plaintext
45 lines
2.4 KiB
Plaintext
---
|
|
import type { ImageMetadata } from 'astro';
|
|
import { methodSteps } from '../../data/method';
|
|
import T from '../content/T.astro';
|
|
import TImg from '../content/TImg.astro';
|
|
const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/method-*.{jpg,png}', { eager: true });
|
|
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
|
|
---
|
|
<section class="section section--alt">
|
|
<div class="container">
|
|
<div class="section-heading" data-reveal>
|
|
<T tag="home.method.title" as="h2" />
|
|
<T tag="method.intro" as="p" />
|
|
</div>
|
|
<T tag="method.extra-note" as="p" class="method__note" />
|
|
<div class="method__row">
|
|
{methodSteps.map((s, i) => (
|
|
<div class:list={['method__step', { 'method__step--extra': s.extra }]} data-reveal style={`--reveal-delay:${(i * 0.15).toFixed(2)}s`}>
|
|
<div class="method__circle">
|
|
{imgOf(s.image) && <TImg tag={`method.step.${s.n}.image`} src={imgOf(s.image)!} alt="" widths={[220]} sizes="220px" />}
|
|
<span>{s.n}</span>
|
|
</div>
|
|
<T tag={`method.step.${s.n}.title`} as="h3" />
|
|
<T tag={`method.step.${s.n}.text`} as="p" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div class="method__cta" data-reveal>
|
|
<a class="btn btn--dark" href="/contact"><T tag="home.method.cta" as="span" /></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.method__note { text-align: right; font-size: .8rem; color: var(--c-text-light); max-width: 260px; margin-left: auto; }
|
|
.method__cta { text-align: center; margin-top: 48px; }
|
|
.method__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; position: relative; }
|
|
.method__circle { position: relative; width: 150px; height: 150px; margin: 0 auto 20px; border: 1px dashed var(--c-accent-dark); border-radius: 50%; padding: 8px; }
|
|
.method__circle img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
|
|
.method__circle span { position: absolute; top: -6px; left: -6px; font-family: var(--font-heading); font-size: 2.4rem; color: var(--c-heading); background: var(--c-bg-alt); padding: 0 8px; }
|
|
.method__step h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; }
|
|
.method__step p { font-size: .85rem; color: var(--c-text-light); }
|
|
@media (max-width: 767px) { .method__row { grid-template-columns: 1fr 1fr; } }
|
|
</style>
|