64 lines
1.6 KiB
Svelte
64 lines
1.6 KiB
Svelte
<script>
|
||
import Seo from '$lib/components/Seo.svelte';
|
||
import { t } from '$lib/translations';
|
||
|
||
/** @type {import('./$types').PageProps} */
|
||
let { data } = $props();
|
||
|
||
const metadata = data.metadata;
|
||
</script>
|
||
|
||
<Seo {...metadata} />
|
||
|
||
<div class="home-container">
|
||
<section aria-labelledby="main-title">
|
||
<h1 id="main-title">{$t('home.main.title')}</h1>
|
||
{@html $t('home.main.description')}
|
||
</section>
|
||
|
||
<section aria-labelledby="features-title">
|
||
<h2 id="features-title">{$t('home.features.title')}</h2>
|
||
{@html $t('home.features.list')}
|
||
</section>
|
||
|
||
<section aria-labelledby="how-to-use-title">
|
||
<h2 id="how-to-use-title">{$t('home.howtouse.title')}</h2>
|
||
{@html $t('home.howtouse.list')}
|
||
</section>
|
||
|
||
<section aria-labelledby="testimonials-title">
|
||
<h2 id="testimonials-title">{$t('home.testimonials.title')}</h2>
|
||
{@html $t('home.testimonials.description')}
|
||
</section>
|
||
|
||
<section aria-labelledby="donation-title">
|
||
<h2 id="donation-title">{$t('home.donation.title')}</h2>
|
||
{@html $t('home.donation.description')}
|
||
<p>
|
||
<a href="/donate" class="button">{$t('home.donation.cta')}</a>
|
||
– {$t('home.donation.cta.description')}
|
||
</p>
|
||
</section>
|
||
|
||
<!--TODO: add video preview-->
|
||
<section aria-labelledby="cta-title">
|
||
<h2 id="cta-title">{$t('home.cta.title')}</h2>
|
||
<p>
|
||
<a href="/viewer" class="button">{$t('home.cta.cta')}</a>
|
||
– {@html $t('home.cta.cta.description')}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
|
||
<style>
|
||
.home-container {
|
||
margin: 0 auto;
|
||
width: 70%;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.home-container {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|