34 lines
781 B
Vue
34 lines
781 B
Vue
<template>
|
|
<div class="ctaBox">
|
|
<h3>{{ headline }}</h3>
|
|
<p>{{ text }}</p>
|
|
<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: true },
|
|
text: { type: String, required: true },
|
|
buttonText: { type: String, required: true }
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.ctaBox
|
|
margin: 5vh 10%
|
|
text-align: center
|
|
h3
|
|
font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
|
|
</style>
|
|
|