56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<section class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2">
|
|
<div class="flex flex-col lg:flex-row gap-x-12 gap-y-4 mx-auto container justify-center items-center"
|
|
:class="{
|
|
'items-center justify-center': position === 'left',
|
|
'flex-row-reverse items-center justify-center': position === 'right'
|
|
}">
|
|
<div class="h-20.1 w-20.1 rounded-full overflow-hidden border-2 border-white">
|
|
<img
|
|
v-if="image"
|
|
:src="`/img/${image.src}`"
|
|
:alt="image.alt"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-4 w-full lg:w-2/3">
|
|
<h2 class="font-bold ">{{ title }}</h2>
|
|
<ul class="flex flex-col gap-6">
|
|
<li v-for="(paragraph, index) in paragraphs" :key="`paragraph-${id}-${index}`">
|
|
<p class="text-lg" v-html="paragraph"></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'title'
|
|
},
|
|
paragraphs: {
|
|
type: Array,
|
|
default: () => ['description']
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'left'
|
|
},
|
|
image: {
|
|
type: Object,
|
|
default: () => ({
|
|
src: '',
|
|
alt: ''
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |