74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<section
|
|
:id="id"
|
|
class="flex flex-col-reverse lg:flex-row gap-8 lg:gap-21 rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2 ">
|
|
<div class="flex flex-col lg:w-3/5">
|
|
<div class="flex flex-col">
|
|
<h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
|
|
<p class="mb-8 text-lg-custom" v-html="description"></p>
|
|
</div>
|
|
|
|
<ul class="flex flex-col gap-4 mb-8">
|
|
<li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
|
|
<img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
|
|
<p class="text-lg-custom" v-html="item.content"></p>
|
|
</li>
|
|
</ul>
|
|
<ButtonCTA v-if="button" :to="`/${langcode}/${button.link}`" :color="button.color" class="uppercase w-fit">
|
|
{{ button.label }}
|
|
</ButtonCTA>
|
|
</div>
|
|
<div class="lg:w-2/5 h-full">
|
|
<img
|
|
v-if="image"
|
|
:src="`/img/${image.src}`"
|
|
:alt="image.alt"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
image: {
|
|
type: Object,
|
|
default: () => ({
|
|
src: "",
|
|
alt: "",
|
|
}),
|
|
},
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
button: {
|
|
type: Object,
|
|
default: () => ({
|
|
label: "",
|
|
link: "",
|
|
}),
|
|
},
|
|
},
|
|
computed: {
|
|
langcode() {
|
|
return this.$store.getters.langcode;
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|