blob: 1b5e0947d43bbb7e64dd193be0422da1013ce21c (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<script lang="ts">
import LandingHeader from "$comp/LandingHeader.svelte";
import LandingHero from "$comp/LandingHero.svelte";
import LandingInfoCard from "$comp/LandingInfoCard.svelte";
import HowItWorksCard from "$comp/HowItWorksCard.svelte";
import FaqCard from "$comp/FaqCard.svelte";
import Image from "$comp/Image.svelte";
import Footer from "$comp/Footer.svelte";
import About from "$comp/About.svelte";
import { locale, t } from "$lib/translations";
import { onDestroy, onMount, tick } from "svelte";
let { data } = $props();
let { faqs, locations, user } = $derived(data);
let howItWorks = $state();
let faq = $state();
let about = $state();
const howItWorksSteps = [
{ image: "coinos:hand", stepID: "step1" },
{ image: "coinos:bolt", stepID: "step2" },
{ image: "coinos:smile", stepID: "step3" },
];
</script>
<LandingHeader {howItWorks} {faq} {about} {user} />
<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
<LandingHero />
<LandingInfoCard
image="lightning-qr"
title={$t("landing.info1.title")}
description={$t("landing.info1.description")}
/>
<LandingInfoCard
image="phone-checkout"
title={$t("landing.info2.title")}
order="reverse"
>
{$t("landing.info2.description1")}
<br /><br />
{$t("landing.info2.description2")}
<br /><br />
{@html $t("landing.info2.description3")}
</LandingInfoCard>
<div>
<LandingInfoCard
image="customize"
title={$t("landing.info3.title")}
description={$t("landing.info3.description")}
/>
<div bind:this={howItWorks}></div>
<div id="about"></div>
</div>
<div>
<h3 class="text-5xl font-medium mb-10 text-center">
{$t("howItWorks.header")}
</h3>
<div class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center">
{#each howItWorksSteps as step}
<HowItWorksCard image={step.image} stepID={step.stepID} />
{/each}
</div>
<div bind:this={faq}></div>
</div>
<div>
<div class="space-y-10">
<h3 class="text-5xl font-medium text-center pt-40 -mt-40" id="faq">
{$t("faq.header")}
</h3>
{#each faqs as f}
<FaqCard questionID={f} />
{/each}
</div>
<div bind:this={about}></div>
</div>
<About />
</main>
<Footer />
|
