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
|
<script>
import {
LandingHeader,
LandingHero,
LandingInfoCard,
HowItWorksCard,
FaqCard,
Image,
About,
Footer
} from '$comp';
import { t } from '$lib/translations';
let howItWorks;
let faq;
let about;
const howItWorksSteps = [
{ image: 'hand', stepID: 'step1' },
{ image: 'bolt', stepID: 'step2' },
{ image: 'smile', stepID: 'step3' }
];
const faqIDs = ['cost', 'compatibility', 'safety'];
</script>
<LandingHeader {howItWorks} {faq} {about} />
<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
<!-- hero -->
<LandingHero />
<!-- landing info 1 -->
<LandingInfoCard
image="lightning-qr"
title={$t('landing.info1.title')}
description={$t('landing.info1.description')}
/>
<!-- landing info 2 -->
<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>
<!-- landing info 3 -->
<div>
<LandingInfoCard
image="customize"
title={$t('landing.info3.title')}
description={$t('landing.info3.description')}
/>
<div bind:this={howItWorks} />
</div>
<!-- how it works -->
<div>
<h3 class="text-5xl font-medium mb-10 text-center">{$t('howItWorks.header')}</h3>
<div
class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
>
{#each howItWorksSteps as step}
<HowItWorksCard image={step.image} stepID={step.stepID} />
{/each}
</div>
<div bind:this={faq} />
</div>
<!-- faq -->
<div>
<div class="space-y-10">
<h3 class="text-5xl font-medium text-center">{$t('faq.header')}</h3>
{#each faqIDs as faqID}
<FaqCard questionID={faqID} />
{/each}
</div>
<div bind:this={about} />
</div>
<!-- about -->
<div>
<About />
</div>
</main>
<Footer />
|
