82 lines
2.6 KiB
Plaintext
82 lines
2.6 KiB
Plaintext
---
|
|
import { assetPath } from '../assets'
|
|
import type { Translations } from '../i18n/translations'
|
|
|
|
export interface Props {
|
|
t: Translations['download']
|
|
siteLinks: Translations['siteLinks']
|
|
}
|
|
|
|
const { t, siteLinks } = Astro.props
|
|
const bgPattern = assetPath("/assets/cta-bg-pattern.svg");
|
|
const talkproLogo = assetPath("/assets/cta-talkpro-logo.svg");
|
|
const androidIcon = assetPath("/assets/cta-android-icon.svg");
|
|
const appleIcon = assetPath("/assets/cta-apple-icon.svg");
|
|
const phoneArt = assetPath("/assets/cta-phone-art.png");
|
|
const defaultApkHref = "https://talkspro.xyz/download";
|
|
const siteLinksJson = JSON.stringify(siteLinks);
|
|
---
|
|
|
|
<section id="download" class="download-cta">
|
|
<img alt="" class="download-cta__pattern" src={bgPattern} />
|
|
|
|
<div class="download-cta__inner">
|
|
<div class="download-cta__content">
|
|
<div class="section-eyebrow">
|
|
<span class="section-eyebrow__text">{t.eyebrow}</span>
|
|
</div>
|
|
|
|
<div class="download-cta__copy">
|
|
<div class="download-cta__heading">
|
|
<p class="download-cta__title">{t.title}</p>
|
|
<div class="download-cta__logo-frame">
|
|
<img alt={t.logoAlt} class="download-cta__logo" src={talkproLogo} />
|
|
</div>
|
|
</div>
|
|
<p class="download-cta__description">
|
|
{t.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="store-badges">
|
|
<a
|
|
class="store-badge store-badge--android store-badge--browser"
|
|
href={defaultApkHref}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<div class="store-badge__icon-frame">
|
|
<img alt={t.androidAlt} class="store-badge__android-icon" src={androidIcon} />
|
|
</div>
|
|
<div class="store-badge__copy">
|
|
<p class="store-badge__platform">{t.android}</p>
|
|
<p class="store-badge__label">{t.androidCta}</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
class="store-badge store-badge--ios store-badge--apple"
|
|
href="#"
|
|
data-app-soon="1"
|
|
>
|
|
<div class="store-badge__icon-frame">
|
|
<img alt={t.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
|
|
</div>
|
|
<div class="store-badge__copy">
|
|
<p class="store-badge__platform">{t.ios}</p>
|
|
<p class="store-badge__label">{t.iosCta}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="download-cta__phone">
|
|
<div class="download-cta__phone-crop">
|
|
<img alt={t.phoneAlt} class="download-cta__phone-image" src={phoneArt} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script type="application/json" id="site-links-i18n" set:html={siteLinksJson} />
|