generated from antfu-collective/vitesse-lite
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.vue
240 lines (231 loc) · 13.5 KB
/
index.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<div class="relative overflow-hidden">
<!-- Stripes-->
<div class="absolute -top-1 bg-white w-full">
<img class="w-full" src="/public/assets/images/stripes.svg" alt="" />
</div>
<div class="relative z-10 pt-12 sm:pt-24 pb-12 bg-gradient-to-b from-voxo-gray-light to-transparent">
<!-- Hero Vector-->
<div class="absolute right-0 top-0">
<img src="/public/assets/images/home-hero-vector.svg" alt="" />
</div>
<!-- Hero Content-->
<div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
<div class="lg:mx-auto lg:max-w-7xl lg:px-8 flex sm:justify-between relative z-10 flex-wrap">
<div class="px-4 max-w-xl mx-auto sm:px-6 lg:max-w-none lg:mx-0 lg:px-0 lg:flex-none lg:w-5/12">
<div>
<h1 class="text-3xl text-voxo-gray-header tracking-tight md:text-6xl mt-2">
Simply Communicate
</h1>
<p class="pt-6 pb-8 text-base">
At VOXO, we know there is power in simplicity. We provide solutions that are straightforward and easy to
manage, allowing your organization to collaborate with ease while optimizing business communication.
</p>
<div class="flex flex-wrap sm:flex-wrap-none w-full items-center gap-x-2">
<div class="w-full mt-3 sm:mt-0 sm:w-auto">
<a target="_blank" href="https://apps.apple.com/us/app/voxo-mobility/id1434645492" class="w-full flex items-center justify-center py-2 px-4 border border-transparent shadow-sm rounded-md text-white bg-voxo-gray-dark hover:bg-white hover:border-voxo-gray-dark hover:text-voxo-gray-dark md:py-3 md:text-lg md:px-6 transition duration-200">
<span class="pr-2"><svg class="fill-current" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M17.1371 20.4103C15.9835 21.5297 14.7108 21.3552 13.4977 20.8274C12.2079 20.289 11.0289 20.2549 9.66676 20.8274C7.97051 21.5595 7.07024 21.3467 6.04866 20.4103C0.281 14.4723 1.13232 5.42713 7.68745 5.0866C9.27728 5.17174 10.3904 5.96559 11.3268 6.03156C12.7187 5.7485 14.051 4.93762 15.5408 5.04404C17.3307 5.18876 18.6694 5.89535 19.5633 7.16594C15.8814 9.37936 16.754 14.2318 20.1358 15.594C19.459 17.3711 18.5907 19.1269 17.1349 20.4252L17.1371 20.4103ZM11.1991 5.02276C11.0267 2.38368 13.1657 0.212829 15.626 0C15.9644 3.04345 12.8592 5.32072 11.1991 5.02276Z" /></svg></span>
<span class="text-base">App Store</span>
</a>
</div>
<div class="w-full mt-3 sm:mt-0 sm:w-auto">
<a target="_blank" href="https://play.google.com/store/apps/details?id=com.voxo.voxo.android" class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md text-white bg-voxo-gray-dark hover:bg-white hover:border-voxo-gray-dark hover:text-voxo-gray-dark md:py-3 md:text-lg md:px-6 transition duration-200">
<span class="pr-2"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.36259 1.31402C2.10812 1.61933 1.97943 2.01008 2.00268 2.40685V19.6434C1.98075 20.04 2.10928 20.4303 2.36259 20.7363L2.42149 20.7952L12.0737 11.1364V10.9074L2.42149 1.25513L2.36259 1.31402Z" fill="url(#paint0_linear)" />
<path d="M15.2933 14.3558L12.0737 11.1362V10.9071L15.2933 7.69409L15.3653 7.73336L19.1804 9.89938C20.2732 10.5145 20.2732 11.5288 19.1804 12.1505L15.3653 14.3165L15.2933 14.3558Z" fill="url(#paint1_linear)" />
<path d="M15.3652 14.3169L12.0933 11.0449L2.36255 20.7364C2.58684 20.9208 2.86609 21.0254 3.15634 21.0337C3.44658 21.042 3.73134 20.9535 3.9658 20.7822L15.3456 14.3169" fill="url(#paint2_linear)" />
<path d="M15.3652 7.73361L3.9658 1.26171C3.73386 1.08339 3.44721 0.991125 3.1548 1.00067C2.86239 1.01022 2.58236 1.12099 2.36255 1.31406L12.0737 11.0252L15.3652 7.73361Z" fill="url(#paint3_linear)" />
<path opacity="0.1" d="M15.2934 14.2449L3.9659 20.671C3.73995 20.8393 3.46569 20.9303 3.18391 20.9303C2.90212 20.9303 2.62787 20.8393 2.40191 20.671L2.34302 20.7299L2.40191 20.7888C2.62787 20.9571 2.90212 21.0481 3.18391 21.0481C3.46569 21.0481 3.73995 20.9571 3.9659 20.7888L15.3457 14.3234L15.2934 14.2449Z" fill="black" />
<path opacity="0.07" d="M2.36264 20.6316C2.10891 20.3233 1.98043 19.9309 2.00273 19.5322V19.6435C1.9808 20.0401 2.10933 20.4303 2.36264 20.7363L2.42154 20.6774L2.36264 20.6316Z" fill="black" />
<path opacity="0.07" d="M19.1805 12.033L15.2935 14.2448L15.3654 14.3168L19.1805 12.1246C19.4043 12.0262 19.5979 11.8701 19.7417 11.6724C19.8854 11.4746 19.974 11.2423 19.9985 10.999C19.9539 11.2239 19.8564 11.4349 19.7142 11.6146C19.572 11.7944 19.3891 11.9378 19.1805 12.033Z" fill="black" />
<path opacity="0.3" d="M3.96646 1.37963L19.181 10.011C19.3875 10.1039 19.5692 10.2441 19.7113 10.4203C19.8534 10.5966 19.952 10.8038 19.999 11.0253C19.9758 10.7817 19.8877 10.5487 19.7438 10.3508C19.5999 10.1528 19.4056 9.99703 19.181 9.89977L3.96646 1.26184C2.89326 0.646715 2.0033 1.15714 2.0033 2.40702V2.51827C2.0033 1.27493 2.89326 0.757961 3.96646 1.37963Z" fill="white" />
<defs>
<linearGradient
id="paint0_linear"
x1="11.223"
y1="2.22362"
x2="-1.85821"
y2="15.3048"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#008EFF" />
<stop offset="0.01" stop-color="#008FFF" />
<stop offset="0.26" stop-color="#00ACFF" />
<stop offset="0.51" stop-color="#00C0FF" />
<stop offset="0.76" stop-color="#00CDFF" />
<stop offset="1" stop-color="#00D1FF" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="19.3113"
y1="11.0249"
x2="0.451791"
y2="11.0249"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FFD800" />
<stop offset="1" stop-color="#FF8A00" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="13.5788"
y1="12.8118"
x2="-4.15516"
y2="30.5457"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF3A44" />
<stop offset="1" stop-color="#B11162" />
</linearGradient>
<linearGradient
id="paint3_linear"
x1="-0.0848645"
y1="-4.42493"
x2="7.83978"
y2="3.49317"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#328E71" />
<stop offset="0.07" stop-color="#2D9571" />
<stop offset="0.48" stop-color="#15BD74" />
<stop offset="0.8" stop-color="#06D575" />
<stop offset="1" stop-color="#00DE76" />
</linearGradient>
</defs>
</svg>
</span>
<span class="text-base">Google Play</span>
</a>
</div>
</div>
</div>
</div>
<div class="hidden w-3/4 ml-8 lg:mt-0 lg:flex-1 lg:block lg:-mr-36">
<img class="mxl-auto lg:w-auto" src="/public/assets/images/home-hero-image.svg" alt="Simply Communicate" />
</div>
</div>
</div>
</div>
<!-- What We Do-->
<div class="lg:mx-auto lg:max-w-7xl lg:px-8 flex items-center sm:justify-between relative z-10 flex-wrap pb-16 pt-16 lg:pb-32 lg:pt-24">
<div class="w-3/4 lg:mt-0 lg:flex-1 lg:block lg:order-1 order-2 mx-auto lg:mt-0 mt-12">
<img class="mx-auto lg:w-auto" src="/public/assets/images/what-we-do.png" alt="Simply Communicate" />
</div>
<div class="px-4 max-w-xl mx-auto sm:px-6 lg:max-w-none lg:mx-0 lg:px-0 lg:flex-none lg:w-96 lg:ml-24 lg:order-2 order-1">
<div>
<h1 class="text-3xl text-voxo-gray-header tracking-tight md:text-5xl mt-2">
What We Do
</h1>
<p class="pt-6 lg:pb-8 text-base">
We provide business telephone systems and call center software solutions built for mid to large-sized businesses.
We develop and manage all of our software in-house, providing industry-leading customization to our clients.
All of our services are offered on a no-contract basis.
</p>
</div>
</div>
</div>
</div>
<!-- Why We Do It-->
<div class="relative bg-voxo-gray-light z-10">
<div class="lg:mx-auto lg:max-w-7xl lg:px-8 flex items-center justify-center xl:justify-between relative z-10 flex-wrap py-10">
<div class="px-4 max-w-xl mx-auto sm:px-6 lg:mx-0 lg:px-0 lg:flex-none xl:w-96">
<div>
<h1 class="text-3xl text-voxo-gray-header tracking-tight md:text-5xl mt-2">
Why We Do It
</h1>
<p class="pt-6 pb-8 text-base">
We want to make a difference. We imagine a world where people matter more than profit, where employees love
to come to work, and where clients feel like they matter. We are governed by God’s principles, and above
all else, we want to honor Him.
</p>
</div>
</div>
<div class="w-full mx-4 lg:mt-0 lg:flex-1 lg:block xl:ml-24 mx-auto cursor-pointer" @click="open = true">
<img class="w-full max-w-xl mx-auto lg:w-auto shadow-lg" src="/public/assets/images/video-placeholder.svg" alt="Simply Communicate" />
</div>
</div>
</div>
<!-- Our Clients-->
<div class="bg-white py-8">
<div class="lg:mx-auto lg:max-w-6xl lg:px-8 flex items-center sm:justify-between relative z-10 flex-wrap py-8">
<div class="px-4 flex w-full items-center justify-center flex-wrap lg:gap-24 gap-y-8 gap-x-16">
<h1 class="text-2xl text-voxo-gray-dark flex-none mx-auto w-full text-center lg:flex-shrink lg:w-auto lg:mx-0">
Our Clients
</h1>
<div class="block w-30">
<img class="mx-auto h-15" src="/public/assets/images/logo-ti.png" alt="NTG Freight" />
</div>
<div class="block w-30">
<img class="mx-auto" src="/public/assets/images/logo-enc.svg" alt="Encompass Health" />
</div>
<div class="block w-30">
<img class="mx-auto h-15" src="/public/assets/images/logo-jones.svg" alt="Jones Companies" />
</div>
<div class="block w-30">
<img class="mx-auto" src="/public/assets/images/logo-stm.png" alt="Southern Tire Mart" />
</div>
</div>
</div>
</div>
<!--Video Modal-->
<TransitionRoot as="template" :show="open">
<Dialog as="div" class="fixed z-50 inset-0 overflow-y-auto" @close="open = false">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="inline-block align-middle sm:h-screen" aria-hidden="true">​</span>
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div class="inline-block align-middle bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle max-w-7xl w-full sm:mb-0 mb-auto">
<div class="aspect-w-16 aspect-h-9">
<iframe
src="https://www.youtube.com/embed/kAryfEvlMgo?controls=1&rel=0"
class="mx-auto"
allowfullscreen
/>
</div>
</div>
</TransitionChild>
</div>
</Dialog>
</TransitionRoot>
</template>
<script>
import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { XIcon } from '@heroicons/vue/outline'
import { ref } from 'vue'
export default {
components: {
Dialog,
DialogOverlay,
DialogTitle,
TransitionRoot,
TransitionChild,
XIcon,
},
setup() {
const open = ref(false)
return {
open,
}
},
}
</script>