36 lines
912 B
Vue
36 lines
912 B
Vue
<template>
|
|
<div class="ctaBox">
|
|
<h3 v-if="headline">{{ headline }}</h3>
|
|
<p v-if="text">{{ text }}</p>
|
|
<span v-if="content" v-html="content"></span>
|
|
<button class="btn pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
|
|
{{ buttonText }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useMainStore } from '@/stores/main'
|
|
|
|
const mainStore = useMainStore()
|
|
|
|
const toggleContactBubble = () => {
|
|
mainStore.toggleContactBubble()
|
|
}
|
|
|
|
const props = defineProps({
|
|
headline: { type: String, required: false },
|
|
text: { type: String, required: false },
|
|
content: { type: String, required: false },
|
|
buttonText: { type: String, required: true }
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.ctaBox
|
|
margin: 8rem 10%
|
|
text-align: center
|
|
h3
|
|
font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
|
|
</style>
|
|
|