60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<script>
|
||
import { t } from "../../i18n"
|
||
import { path } from '../../utils/stores.js';
|
||
|
||
const onNavigateTo = (e, route) => {
|
||
e.preventDefault()
|
||
history.pushState({}, '', route);
|
||
path.set(route);
|
||
}
|
||
</script>
|
||
|
||
<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="#" on:click={(e) => onNavigateTo(e, "/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="#" on:click={(e) => onNavigateTo(e, "/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>
|
||
|