72 lines
2.0 KiB
Plaintext
72 lines
2.0 KiB
Plaintext
---
|
|
import type { Translations } from '../i18n/translations'
|
|
|
|
export interface Props {
|
|
t: Translations['why']
|
|
}
|
|
|
|
const { t } = Astro.props
|
|
const underline = "/assets/why-underline.svg";
|
|
const icons = [
|
|
"/assets/why-icon-simple.svg",
|
|
"/assets/why-icon-familiar.svg",
|
|
"/assets/why-icon-connected.svg",
|
|
"/assets/why-icon-modern.svg",
|
|
]
|
|
const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-card__icon--square', 'why-card__icon--modern']
|
|
---
|
|
|
|
<section class="why">
|
|
<div class="why__inner">
|
|
<div class="why__intro">
|
|
<div class="why__copy">
|
|
<div class="section-eyebrow">
|
|
<span class="section-eyebrow__text">{t.eyebrow}</span>
|
|
</div>
|
|
<div class="why__text">
|
|
<div class="why__title">
|
|
<p class="why__title-line">{t.titleLine1}</p>
|
|
<p class="why__title-line">{t.titleLine2}</p>
|
|
</div>
|
|
<div class="why__underline">
|
|
<div class="why__underline-frame">
|
|
<img alt="" class="why__underline-image" src={underline} />
|
|
</div>
|
|
</div>
|
|
<p class="why__description">
|
|
{t.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="why__illustration">
|
|
<video
|
|
aria-label={t.illustrationAlt}
|
|
class="why__illustration-image"
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
preload="metadata"
|
|
>
|
|
<source src="/assets/why-illustration.mp4" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="why__grid">
|
|
{t.cards.map((card, index) => (
|
|
<div class="why-card">
|
|
<div class="why-card__icon-frame">
|
|
<img alt="" class={`why-card__icon ${iconClasses[index]}`} src={icons[index]} />
|
|
</div>
|
|
<div class="why-card__copy">
|
|
<p class="why-card__title">{card.title}</p>
|
|
<p class="why-card__description">{card.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|