73 lines
2.3 KiB
Plaintext
73 lines
2.3 KiB
Plaintext
---
|
|
import type { Translations } from '../i18n/translations'
|
|
|
|
export interface Props {
|
|
t: Translations['hero']
|
|
download: Translations['download']
|
|
}
|
|
|
|
const { t, download } = Astro.props
|
|
const heroBg = "/assets/hero-bg.png";
|
|
const phoneMockup = "/assets/hero-phone.png";
|
|
const androidIcon = "/assets/cta-android-icon.svg";
|
|
const appleIcon = "/assets/cta-apple-icon.svg";
|
|
---
|
|
|
|
<section id="hero" class="hero">
|
|
<img alt="" class="hero__bg" src={heroBg} />
|
|
|
|
<div class="hero__inner">
|
|
<div class="hero__phone-column">
|
|
<div class="hero__phone-frame">
|
|
<div class="hero__phone-crop">
|
|
<img alt={t.phoneAlt} class="hero__phone" src={phoneMockup} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero__content">
|
|
<div class="hero__badge">
|
|
<p class="hero__badge-text">{t.badge}</p>
|
|
</div>
|
|
|
|
<div class="hero__copy">
|
|
<div class="hero__title">
|
|
<p class="hero__title-line">{t.titleLine1}</p>
|
|
<p class="hero__title-line">{t.titleLine2}</p>
|
|
</div>
|
|
<p class="hero__description">
|
|
{t.description}
|
|
</p>
|
|
<div class="hero__actions">
|
|
<a href="#download" class="store-badge store-badge--android hero__store-badge">
|
|
<div class="store-badge__icon-frame">
|
|
<img alt={download.androidAlt} class="store-badge__android-icon" src={androidIcon} />
|
|
</div>
|
|
<div class="store-badge__copy">
|
|
<p class="store-badge__platform">{download.android}</p>
|
|
<p class="store-badge__label">{download.androidCta}</p>
|
|
</div>
|
|
</a>
|
|
<a href="#download" class="store-badge store-badge--ios hero__store-badge">
|
|
<div class="store-badge__icon-frame">
|
|
<img alt={download.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
|
|
</div>
|
|
<div class="store-badge__copy">
|
|
<p class="store-badge__platform">{download.ios}</p>
|
|
<p class="store-badge__label">{download.iosCta}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero__tags">
|
|
{t.tags.map(tag => (
|
|
<div class="hero__tag">
|
|
<span class="hero__tag-text">{tag}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|