ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init tft page

Browse Source
This commit is contained in:
samaradel
2021-08-15 13:58:30 +02:00
parent b796a8d23c
commit bed78b89db
13 changed files with 815 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
src/components/custom/sections/CallToAction.vue
View File

@@ -4,12 +4,24 @@
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
<h2
v-if="cta.title"
class="text-4xl text-center uppercase mb-2 leading-none font-light font-heading"
class="
text-4xl text-center
uppercase
mb-2
leading-none
font-light font-heading
"
>
{{ cta.title }}
</h2>
<span
class="text-center uppercase leading-none text-4xl text-gray-800 font-black font-heading"
class="
text-center
uppercase
leading-none
text-4xl text-gray-800
font-black font-heading
"
>
{{ cta.slogan }}
</span>
@@ -17,25 +29,81 @@
<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 rounded shadow rounded-full"
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
"
>{{ cta.video_button }}</a
>
</div>
<g-link
class="inline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
class="
inline-block
bg-blue-900
text-md
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"
:to="cta.link"
>{{ cta.button }}</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"
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"
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
@@ -55,32 +123,213 @@
<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"
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"
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"
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"
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
>
<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"
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.button4"
:to="cta.link4"
>{{ cta.button4 }}</g-link
>
</div>
<!-- tft -->
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'tft'">
<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-2xl 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
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-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
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
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
@@ -98,25 +347,82 @@
<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"
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"
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"
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"
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