57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<section
|
|
:id="id"
|
|
class="flex flex-col lg:flex-row gap-y-4 p-4 md:py-12 mb-8 rounded-3xl h-full lg:h-69">
|
|
|
|
<div v-if="shapes.shape_1" class="h-38 w-1/4 flex items-start justify-center">
|
|
<img
|
|
:src="`/img/${shapes.shape_1}`"
|
|
alt="hero background shape right"
|
|
class="h-full w-full object-contain">
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center justify-center gap-4 md:gap-8 w-full">
|
|
<h2
|
|
class="font-semibold italic text-center"
|
|
:class="{
|
|
'text-iguales-dark': textColor === 'iguales',
|
|
}" v-html="content">
|
|
</h2>
|
|
</div>
|
|
|
|
<div v-if="shapes.shape_2" class="h-38 w-1/4 ml-auto lg:mt-auto">
|
|
<img
|
|
:src="`/img/${shapes.shape_2}`"
|
|
alt="hero background shape right"
|
|
class="h-full w-full object-contain" >
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: "consumo",
|
|
},
|
|
shapes: {
|
|
type: Object,
|
|
default: () => ({
|
|
shape_1: "",
|
|
shape_2: "",
|
|
}),
|
|
},
|
|
},
|
|
|
|
};
|
|
</script> |