1794 lines
37 KiB
Vue
1794 lines
37 KiB
Vue
<template>
|
|
<section
|
|
class="bg-cover text-center"
|
|
:class="{
|
|
pink: id == 'home' && !lastCta,
|
|
green: id == 'mission' && lastCta,
|
|
gray: id == 'developer',
|
|
}"
|
|
>
|
|
<!-- mission -->
|
|
<div
|
|
class="w-full mx-auto lg:py-20"
|
|
v-if="id == 'mission' && !textOnly && !lastCta"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-xl text-gray-800"
|
|
></div>
|
|
<g-image :src="cta.image" class="my-10 mx-auto" />
|
|
|
|
<!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
|
<a
|
|
@click="toggleModal"
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
"
|
|
>{{ cta.video_button }}</a
|
|
>
|
|
</div> -->
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full max-w-3xl mx-auto py-12"
|
|
v-else-if="id == 'mission' && textOnly"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-5xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-xl text-gray-800"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full max-w-3xl mx-auto py-20"
|
|
v-else-if="id == 'mission' && lastCta"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-5xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<h2
|
|
v-if="cta.subtitle"
|
|
class="
|
|
lg:text-5xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.subtitle }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-xl text-gray-800"
|
|
></div>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
|
|
<!-- farm -->
|
|
<div
|
|
class="w-full mx-auto lg:mt-20 lg:py-20"
|
|
v-else-if="id == 'farm' && !lastCta"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
<span class="font-bold">{{ cta.title2 }}</span>
|
|
</h2>
|
|
<div v-html="cta.content" class="mt-6 mb-8 lg:text-2xl"></div>
|
|
<g-image :src="cta.image" class="lg:my-20 mx-auto" />
|
|
<!-- <a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
> -->
|
|
</div>
|
|
|
|
<div class="w-full mx-auto py-16" v-else-if="id == 'farm' && lastCta">
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
<span class="font-bold">{{ cta.subtitle }}</span>
|
|
</h2>
|
|
<!-- <h2
|
|
v-if="cta.subtitle"
|
|
class="
|
|
lg:text-5xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.subtitle }}
|
|
|
|
</h2> -->
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 text-xl max-w-6xl mx-auto"
|
|
></div>
|
|
<g-image :src="cta.image" class="lg:my-20 lg:w-3/4 mx-auto" />
|
|
<!-- <a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
> -->
|
|
</div>
|
|
|
|
<!-- developer -->
|
|
<div
|
|
class="w-full mx-auto lg:mt-20 py-10 lg:p-20"
|
|
v-else-if="id == 'developer' && lastCta"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
<span class="font-bold">{{ cta.subtitle }}</span>
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-2xl lg:max-w-4xl mx-auto px-4"
|
|
></div>
|
|
<div class="inline-block" v-if="cta.button">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
<div class="inline-block" v-if="cta.button2">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button2 && cta.link2.includes('http')"
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- community -->
|
|
<div
|
|
class="w-full mx-auto py-6 lg:py-10"
|
|
v-else-if="id == 'community' && !textOnly"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
<br />
|
|
<span class="font-bold">{{ cta.subtitle }}</span>
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-2xl lg:max-w-4xl mx-auto px-4"
|
|
></div>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full mx-auto lg:mt-20 py-10 lg:p-20"
|
|
v-else-if="id == 'community' && textOnly"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
<br />
|
|
<span class="font-bold">{{ cta.subtitle }}</span>
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-2xl lg:max-w-4xl mx-auto px-4"
|
|
></div>
|
|
<div>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-200
|
|
text-lg
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mx-3
|
|
my-4
|
|
"
|
|
target="_blank"
|
|
:href="cta.faqlink"
|
|
>{{ cta.faqbutton }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-200
|
|
text-lg
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mx-3
|
|
my-4
|
|
"
|
|
target="_blank"
|
|
:href="cta.faqlink2"
|
|
>{{ cta.faqbutton2 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-200
|
|
text-lg
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mx-3
|
|
my-4
|
|
"
|
|
target="_blank"
|
|
:href="cta.faqlink3"
|
|
>{{ cta.faqbutton3 }}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- support -->
|
|
<div
|
|
class="w-full mx-auto lg:mt-20 py-10"
|
|
v-else-if="id == 'support' && textOnly"
|
|
>
|
|
<div class="gray py-10 lg:py-20">
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
<br />
|
|
<span class="font-bold">{{ cta.subtitle }}</span>
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 text-xl lg:max-w-4xl mx-auto px-4"
|
|
></div>
|
|
<div class="mb-32">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-300
|
|
text-lg
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mx-3
|
|
my-4
|
|
"
|
|
:href="cta.faqlink"
|
|
>{{ cta.faqbutton }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-300
|
|
text-lg
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mx-3
|
|
my-4
|
|
"
|
|
:href="cta.faqlink2"
|
|
>{{ cta.faqbutton2 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-300
|
|
text-lg
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mx-3
|
|
my-4
|
|
"
|
|
target="_blank"
|
|
:href="cta.faqlink3"
|
|
>{{ cta.faqbutton3 }}</a
|
|
>
|
|
</div>
|
|
|
|
<!-- <a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
> -->
|
|
</div>
|
|
<div class="relative lg:mt-48 mt-28">
|
|
<g-image
|
|
:src="cta.image"
|
|
class="lg:my-16 mx-auto absolute inset-x-0 bottom-0 h-60 w-60"
|
|
/>
|
|
</div>
|
|
<div class="mt-40">
|
|
<h2
|
|
v-if="cta.smalltitle"
|
|
class="
|
|
lg:text-5xl
|
|
text-center
|
|
uppercase
|
|
mb-8
|
|
leading-none
|
|
font-normal font-heading
|
|
"
|
|
>
|
|
{{ cta.smalltitle }}
|
|
<br />
|
|
<span class="font-bold">{{ cta.smalltitle2 }}</span>
|
|
</h2>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button2 && cta.link2.includes('http')"
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- home -->
|
|
|
|
<div
|
|
class="w-full mx-auto mt-10 py-16"
|
|
v-else-if="id == 'home' && !lastCta"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
uppercase
|
|
mb-0
|
|
leading-tight
|
|
font-semibold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
|
|
<h2
|
|
v-if="cta.subtitle"
|
|
class="
|
|
lg:text-6xl
|
|
uppercase
|
|
mt-0
|
|
leading-tight
|
|
font-semibold font-heading
|
|
"
|
|
>
|
|
{{ cta.subtitle }}
|
|
</h2>
|
|
|
|
<g-image :src="cta.image.src" />
|
|
<!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
|
<a
|
|
@click="toggleModal"
|
|
class="
|
|
inline-block
|
|
cursor-pointer
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
"
|
|
>{{ cta.video_button }}</a
|
|
>
|
|
</div> -->
|
|
<div class="max-w-7xl mx-auto grid lg:grid-cols-3 gap-4">
|
|
<div v-if="cta.button">
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
mx-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button2">
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
mx-2
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button2 && cta.link2.includes('http')"
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button3">
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button3 && cta.link3.includes('http')"
|
|
:href="cta.link3"
|
|
>{{ cta.button3 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link3"
|
|
>{{ cta.button3 }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button4">
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button4 && cta.link4.includes('http')"
|
|
:href="cta.link4"
|
|
>{{ cta.button4 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link4"
|
|
>{{ cta.button4 }}</a
|
|
>
|
|
</div>
|
|
|
|
<div v-if="cta.button5">
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button5 && cta.link5.includes('http')"
|
|
:href="cta.link5"
|
|
>{{ cta.button5 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link5"
|
|
>{{ cta.button5 }}</a
|
|
>
|
|
</div>
|
|
|
|
<div v-if="cta.button6">
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button6 && cta.link6.includes('http')"
|
|
:href="cta.link6"
|
|
>{{ cta.button6 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
mx-2
|
|
py-1
|
|
lg:mr-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link6"
|
|
>{{ cta.button6 }}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full max-w-7xl mx-auto mt-10 px-2 lg:py-16"
|
|
v-else-if="id == 'home' && lastCta"
|
|
>
|
|
<g-image class="mx-auto" :src="cta.image" />
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
mb-2
|
|
uppercase
|
|
leading-tight
|
|
font-semibold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 mx-auto text-xl text-gray-800"
|
|
></div>
|
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
|
<a
|
|
@click="toggleModal"
|
|
class="
|
|
inline-block
|
|
cursor-pointer
|
|
bg-blue-900
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
lg:mr-5
|
|
my-2
|
|
shadow
|
|
rounded-full
|
|
"
|
|
>{{ cta.video_button }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button" class="inline-block">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button2" class="inline-block">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button2 && cta.link2.includes('http')"
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button3" class="inline-block">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button3 && cta.link3.includes('http')"
|
|
:href="cta.link3"
|
|
>{{ cta.button3 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link3"
|
|
>{{ cta.button3 }}</a
|
|
>
|
|
</div>
|
|
<div v-if="cta.button4" class="inline-block">
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button4 && cta.link4.includes('http')"
|
|
:href="cta.link4"
|
|
>{{ cta.button4 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
bo
|
|
px-12
|
|
py-1
|
|
lg:mr-5
|
|
my-2
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link4"
|
|
>{{ cta.button4 }}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- grid -->
|
|
<div
|
|
id="zero_os"
|
|
class="w-full max-w-3xl mx-auto lg:py-20"
|
|
v-else-if="id == 'grid'"
|
|
>
|
|
<g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
my-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-xl text-gray-800"
|
|
></div>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button2 && cta.link2.includes('http')"
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link2"
|
|
>{{ cta.button2 }}</a
|
|
>
|
|
</div>
|
|
|
|
<!-- tft -->
|
|
<div
|
|
class="w-full max-w-6xl mx-auto lg:my-20"
|
|
v-else-if="id == 'tft' && !lastCta"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
text-base
|
|
lg:text-5xl
|
|
max-w-3xl
|
|
mx-auto
|
|
text-center
|
|
uppercase
|
|
my-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 max-w-3xl mx-auto lg:text-xl text-gray-800"
|
|
></div>
|
|
<g-image :src="cta.image" class="mx-auto w-full my-10" />
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
lg:text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
</div>
|
|
|
|
<div class="w-full mx-auto lg:py-20" v-else-if="id == 'tft' && lastCta">
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:max-w-3xl
|
|
mx-auto
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="mt-6 mb-8 lg:text-xl text-gray-800"
|
|
></div>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button && cta.link.includes('http')"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-4
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
v-else
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<g-image :src="cta.image" class="w-full my-10" />
|
|
</div>
|
|
|
|
<!-- tft -->
|
|
<div
|
|
class="w-full lg:max-w-4xl mx-auto lg:mt-20 lg:px-16 lg:py-10 tft_section"
|
|
v-else-if="id == 'tft'"
|
|
>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="
|
|
lg:max-w-lg
|
|
text-8xl
|
|
mb-6
|
|
mt-20
|
|
leading-none
|
|
font-heading
|
|
mx-auto
|
|
"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div
|
|
v-html="cta.content"
|
|
class="
|
|
mt-6
|
|
mb-8
|
|
text-2xl
|
|
leading-tight
|
|
tracking-wide
|
|
tft_subtitle
|
|
text-gray-800
|
|
"
|
|
></div>
|
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
|
<a
|
|
@click="toggleModal"
|
|
class="
|
|
inline-block
|
|
bg-gray-900
|
|
text-2xl
|
|
learn-button
|
|
hover:bg-gray-800
|
|
text-gray-100
|
|
px-16
|
|
py-1
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
tft_subtitle
|
|
tracking-wide
|
|
"
|
|
>{{ cta.video_button }}</a
|
|
>
|
|
</div>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-gray-900
|
|
text-2xl
|
|
learn-button
|
|
hover:bg-gray-800
|
|
text-gray-100
|
|
px-16
|
|
py-1
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
tft_subtitle
|
|
tracking-wide
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<g-link
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
"
|
|
v-if="cta.button2"
|
|
:to="cta.link2"
|
|
>{{ cta.button2 }}</g-link
|
|
>
|
|
<g-link
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
"
|
|
v-if="cta.button3"
|
|
:to="cta.link3"
|
|
>{{ cta.button3 }}</g-link
|
|
>
|
|
|
|
<g-link
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
shadow
|
|
rounded-full
|
|
"
|
|
v-if="cta.button4"
|
|
:to="cta.link4"
|
|
>{{ cta.button4 }}</g-link
|
|
>
|
|
</div>
|
|
|
|
<div class="w-full max-w-7xl mx-auto" v-else>
|
|
<h2
|
|
v-if="cta.title"
|
|
class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
|
|
>
|
|
{{ cta.title }}
|
|
</h2>
|
|
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
|
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
|
<a
|
|
@click="toggleModal"
|
|
class="
|
|
inline-block
|
|
cursor-pointer
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
rounded
|
|
shadow
|
|
rounded-full
|
|
"
|
|
>{{ cta.video_button }}</a
|
|
>
|
|
</div>
|
|
<a
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
rounded
|
|
shadow
|
|
rounded-full
|
|
"
|
|
target="_blank"
|
|
v-if="cta.button"
|
|
:href="cta.link"
|
|
>{{ cta.button }}</a
|
|
>
|
|
<g-link
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
rounded
|
|
shadow
|
|
rounded-full
|
|
"
|
|
v-if="cta.button2"
|
|
:to="cta.link2"
|
|
>{{ cta.button2 }}</g-link
|
|
>
|
|
<g-link
|
|
class="
|
|
inline-block
|
|
bg-blue-900
|
|
text-sm
|
|
learn-button
|
|
hover:bg-blue-800
|
|
text-gray-100
|
|
px-12
|
|
py-2
|
|
mr-5
|
|
mb-4
|
|
rounded
|
|
shadow
|
|
rounded-full
|
|
"
|
|
v-if="cta.button3"
|
|
:to="cta.link3"
|
|
>{{ cta.button3 }}</g-link
|
|
>
|
|
</div>
|
|
<Modal
|
|
:link="cta.video_link"
|
|
:showModal="showModal"
|
|
@onClose="handleClose"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from "~/components/custom/Modal.vue";
|
|
|
|
export default {
|
|
props: ["cta", "id", "textOnly", "lastCta"],
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
};
|
|
},
|
|
components: {
|
|
Modal,
|
|
},
|
|
methods: {
|
|
toggleModal() {
|
|
this.showModal = !this.showModal;
|
|
},
|
|
handleClose() {
|
|
this.showModal = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.pink {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.green {
|
|
background-color: #70dfc9;
|
|
}
|
|
|
|
.gray {
|
|
background: #f2f2f2;
|
|
}
|
|
</style> |