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

Modify sections

Browse Source
This commit is contained in:
samaradel
2021-09-17 07:46:08 +02:00
parent f3bb478404
commit 80711ed92e
14 changed files with 630 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,10 @@
<template>
<section class="pb-10 px-4 bg-cover text-center">
<section
class="pb-10 px-4 bg-cover text-center"
:class="{
pink: id == 'home',
}"
>
<!-- why -->
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
<h2
@@ -112,15 +117,23 @@
<!-- home -->
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'home'">
<div class="w-full mx-auto mt-10 py-16" v-else-if="id == 'home'">
<h2
v-if="cta.title"
class="text-3xl mb-2 uppercase leading-tight font-semibold font-heading"
class="text-3xl uppercase leading-tight font-semibold font-heading"
>
{{ cta.title }}
</h2>
<div v-html="cta.content" class="mt-6 mb-8 text-gray-800"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<h2
v-if="cta.subtitle"
class="text-3xl uppercase 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="
@@ -140,173 +153,246 @@
"
>{{ cta.video_button }}</a
>
</div>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-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-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-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-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link2"
>{{ cta.button2 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
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
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link3"
>{{ cta.button3 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
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
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link4"
>{{ cta.button4 }}</a
>
</div>
</div> -->
<div class="max-w-7xl mx-auto grid grid-cols-3 gap-4">
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
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-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
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="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link2"
>{{ cta.button2 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
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="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link3"
>{{ cta.button3 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
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="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link4"
>{{ cta.button4 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
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="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link5"
>{{ cta.button5 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button6 && cta.link6.includes('http')"
:href="cta.link4"
>{{ cta.button6 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link6"
>{{ cta.button6 }}</a
>
</div>
</div>
<!-- tft -->
<div
class="w-full lg:max-w-4xl mx-auto lg:mt-20 lg:px-16 lg:py-10 tft_section"
@@ -563,3 +649,8 @@ export default {
},
};
</script>
<style scoped>
.pink {
background-color: #ea1ff7;
}
</style>