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

Make video pop up

Browse Source
This commit is contained in:
samaradel
2021-04-04 12:15:34 +02:00
parent 11930914b1
commit 1215a36be0
5 changed files with 114 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,74 @@
<template>
<section class="pb-20 px-4 bg-cover text-center">
<br>
<br
<br>
<br />
<br />
<br />
<div class="w-full max-w-7xl mx-auto">
<h2 class="text-4xl leading-tight font-semibold font-heading">
<h2
v-if="cta.title"
class="text-4xl leading-tight font-semibold font-heading"
>
{{ cta.title }}
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 text-gray-700 leading-relaxed"
></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
<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"
v-if="cta.button2"
:to="cta.link2"
>{{ cta.button2 }}</g-link
>{{ cta.video_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.button3"
:to="cta.link3"
>{{ cta.button3 }}</g-link
>
</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"],
data() {
return {
showModal: false,
};
},
components: {
Modal,
},
methods: {
toggleModal() {
this.showModal = !this.showModal;
},
handleClose() {
this.showModal = false;
},
},
};
</script>