123 lines
3.4 KiB
Vue
123 lines
3.4 KiB
Vue
<template>
|
|
<section
|
|
class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16"
|
|
:class="{
|
|
'bg-gradient-conic-2': bgColor === 'conic-2',
|
|
'bg-gradient-conic-base': bgColor === 'conic-base',
|
|
'bg-gradient-conic-base-gray': bgColor === 'conic-base-gray',
|
|
'bg-background-light': bgColor === 'light'
|
|
}">
|
|
<div
|
|
class="flex justify-between"
|
|
:class="{
|
|
'flex-col lg:flex-row gap-4': position === 'left',
|
|
'flex-col lg:flex-row-reverse gap-4': position === 'right' && !imageCTA,
|
|
'flex-col-reverse lg:flex-row-reverse gap-4': position === 'right' && imageCTA,
|
|
'items-center gap-12': image.display === 'circle'
|
|
}">
|
|
|
|
<div
|
|
:class="{
|
|
'flex flex-col gap-4': imageCTA
|
|
}">
|
|
<div
|
|
v-if="image"
|
|
:class="{
|
|
'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
|
|
'h-fit w-full lg:w-auto': image.display === 'normal'
|
|
}">
|
|
<img
|
|
:src="`/img/${image.src}`"
|
|
:alt="image.alt"
|
|
class="w-full h-full"
|
|
:class="{
|
|
'object-cover': image.display === 'circle',
|
|
'object-contain': image.display === 'normal'
|
|
}"
|
|
/>
|
|
</div>
|
|
<div v-if="imageCTA" class="flex flex-col items-end">
|
|
<p v-if="imageCTA.description" class="text-lg-custom mt-2">{{ imageCTA.description }}</p>
|
|
<NuxtLink v-if="imageCTA.button" :to="imageCTA.button.url">
|
|
<ButtonCTA size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col gap-4 w-full"
|
|
:class="{
|
|
'lg:w-2/3': image.display === 'circle',
|
|
'lg:w-1/2': image.display === 'normal',
|
|
}">
|
|
<h2 class="font-bold ">{{ title }}</h2>
|
|
<ul v-if="paragraphs" class="flex flex-col gap-6">
|
|
<li v-for="(paragraph, index) in paragraphs" :key="`paragraph-${id}-${index}`">
|
|
<p class="text-lg-custom" v-html="paragraph"></p>
|
|
</li>
|
|
</ul>
|
|
<div v-for="(list, index) in lists" :key="`list-${index}-${index}`" class="">
|
|
<p v-if="list.description" class="text-lg-custom mb-4">{{ list.description }}</p>
|
|
<ul v-if="list.items" class="flex flex-col gap-4">
|
|
<li
|
|
v-for="(item, index) in list.items"
|
|
:key="`item-list-${id}-${index}`"
|
|
:class="{
|
|
'list-disc ml-6': hasBullets,
|
|
}">
|
|
<p class="text-lg-custom" v-html="item"></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p class="text-lg-custom" v-html="finalParagraph"></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'title'
|
|
},
|
|
paragraphs: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
lists: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
finalParagraph: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
hasBullets: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'left'
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: 'conic-2'
|
|
},
|
|
image: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
imageCTA: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
}
|
|
}
|
|
</script> |