41 lines
2.2 KiB
Plaintext
41 lines
2.2 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>
|
|
</section>
|
|
|
|
<style>
|
|
.method__note { text-align: right; font-size: .8rem; color: var(--c-text-light); max-width: 260px; margin-left: auto; }
|
|
.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>
|