forked from ourjapanlife/findadoc-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app-coming-soon.vue
100 lines (92 loc) · 5.3 KB
/
app-coming-soon.vue
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
<template>
<div class="h-screen flex flex-col font-['notosans'] theme-coral">
<div class="flex flex-col">
<div class="flex flex-1 flex-col items-center mt-14">
<span class="border-2 border-currentColor text-currentColor rounded-lg px-3 py-0">
Coming Soon
</span>
<span class="portrait:text-3xl font-extrabold text-5xl mt-8 mb-4 font-['notosans-bold']">
Find a Doc, Japan
</span>
<span class="text-gray-500 mt-4 mb-14 w-96">
Connecting people in Japan to the healthcare services they need, in the languages they need.
</span>
</div>
<div class="bg-[url('/assets/images/doctor-banner-1.png')] bg-no-repeat bg-cover
h-[36rem] translate-x-[-150px] w-[calc(100vw+150px)]">
</div>
<div class="flex flex-col flex-1 max-h-12">
<span class="self-center text-xs text-gray-500">*Screens are for illustration purposes only</span>
<img src="@/assets/images/iPhone-showing-map.png" class="hidden md:block h-[550px] w-[400px]
relative right-[8%] left-auto top-[-480px] self-end overflow-visible" />
</div>
<div class="flex flex-row justify-around h-[300px] mt-28 mb-8 portrait:mx-4 text-center">
<div class="flex flex-col w-96 items-center">
<svg role="img" alt="MagnifyingGlass" title="MagnifyingGlass"
class="h-20 w-20 self-center text-primary">
<use xlink:href="./assets/images/magnifying-glass.svg#magnifying-glass-svg" />
</svg>
<span class="landscape:text-2xl portrait:text-xl font-extrabold py-6 font-['notosans-bold']">
Search & Find
</span>
<span class="portrait:text-xs text-gray-700 text-center">
Search and find the right doctors and healthcare professionals for your needs in Japan
</span>
</div>
<div class="flex flex-col w-96 items-center mx-8">
<svg role="img" alt="translation icon" title="translation icon"
class="h-20 w-20 self-center text-primary">
<use xlink:href="./assets/images/translate-icon.svg#translate-icon-svg" />
</svg>
<span class="landscape:text-2xl portrait:text-xl font-extrabold py-6 font-['notosans-bold']">
Multiple Languages
</span>
<span class="portrait:text-xs text-gray-700 text-center">
We're here to connect you to the services you need, in the language you're comfortable with
</span>
</div>
<div class="flex flex-col w-96 items-center">
<svg role="img" alt="heart" title="heart" class="h-20 w-20 self-center text-primary pt-2">
<use xlink:href="./assets/images/heart-icon.svg#heart-icon-svg" />
</svg>
<span class="landscape:text-2xl portrait:text-xl font-extrabold py-6 font-['notosans-bold']">
Free & Reliable
</span>
<span class="portrait:text-xs text-gray-700 text-center">
We're dedicated to providing free and reliable healthcare resources so you can stay informed.
</span>
</div>
</div>
<div class="my-8 flex items-center justify-center bg-[url('/assets/images/map-background.png')] h-80">
<button class="rounded-full bg-currentColor/90 text-white px-6 py-3">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSesYIL33Q_qB4ftwmEqRfZBR_tzC8vAgju4fDaV0peEdVZ2bQ/viewform"
target="_blank">
Get notified when we are ready!
</a>
</button>
</div>
<div class="my-8 flex flex-1 justify-center">
<!-- <svg role="img" alt="heart circle icon" title="heart circle icon"
class="self-center justify-self-center h-[412px] w-[392px] fill-none">
<use xlink:href="./assets/images/heart-circle.svg#heart-circle-svg" />
</svg> -->
<img src="@/assets/images/heart-circle.png" class="h-[392px] w-[412px]" />
</div>
<div class="footer flex grow-1 shrink-0 self-stretch items-stretch">
<div class="middle-footer section flex flex-1 align-bottom justify-center text-gray-500">
<span class="self-center">Powered by</span>
<nav class="flex mx-2 self-center">
<NuxtLink to="https://www.netlify.com/" target="_blank"
class="underline hover:text-primary-hover transition-colors" data-testid="netlify-link">
Netlify
</NuxtLink>
</nav>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({})
</script>