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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<script>
import {
LandingHeader,
LandingHero,
LandingInfoCard,
HowItWorksCard,
FaqCard,
Image,
About,
Footer
} from '$comp';
import { t } from '$lib/translations';
import { close } from '$lib/socket';
import { onDestroy, onMount } from 'svelte';
export let data;
let { faqs, locations, user } = data;
let update = (data) => ({ faqs, locations, user } = data);
$: update(data);
let howItWorks;
let faq;
let about;
let log = console.log;
const howItWorksSteps = [
{ image: 'hand', stepID: 'step1' },
{ image: 'bolt', stepID: 'step2' },
{ image: 'smile', stepID: 'step3' }
];
let loaded;
onMount(async () => {
close();
try {
({ locations } = await fetch('/locations').then((r) => r.json()));
} catch (e) {
console.log(e);
}
loaded = true;
});
onDestroy(() => (loaded = false));
</script>
<svelte:head>
<script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>
</svelte:head>
{#if loaded}
<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 {user} />
<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 id="about" />
</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 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>
<About {locations} />
</main>
<Footer />
{/if}
|
