blob: 13cbd011fafc36eabb894f41f49a8a7f88b87f4c (
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
88
89
90
91
92
|
<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 { t } from "$lib/translations";
let { data } = $props();
let { faqs, locations } = $derived(data as any);
let howItWorks = $state();
let faq = $state();
let about = $state();
const howItWorksSteps = [
{ image: "coinos:hand", stepID: "step1" },
{ image: "coinos:bolt", stepID: "step2", size: 100 },
{ image: "coinos:smile", stepID: "step3" },
];
</script>
<svelte:head>
<link rel="preload" href="/images/hero-image.webp" as="image" type="image/webp" />
</svelte:head>
<LandingHeader {howItWorks} {faq} {about} />
<main class="space-y-20 md:space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0 pt-20">
<LandingHero />
<LandingInfoCard
image="lightning-qr"
title={$t("landing.info1.title")}
description={$t("landing.info1.description")}
loading="lazy"
width={400}
height={409}
/>
<LandingInfoCard image="phone-checkout" title={$t("landing.info2.title")} order="reverse" loading="lazy" width={400} height={518}>
{$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")}
loading="lazy"
width={400}
height={400}
/>
<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} size={step.size} />
{/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>
<div class="mb-40 md:mb-80">
<About />
</div>
</main>
<Footer />
|
