100 lines
3.3 KiB
Vue
100 lines
3.3 KiB
Vue
<template>
|
|
<UiContainer class="space-y-[50px] sm:space-y-[30px] xl:space-y-[100px]">
|
|
<div class="space-25-55">
|
|
<div class="space-25-75">
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.section_lang_data.main_title }}
|
|
</h4>
|
|
<div
|
|
class="w-full h-full flex flex-col items-stretch gap-4 xl:flex-row space-25-55 xl:!space-y-0"
|
|
>
|
|
<div
|
|
class="flex flex-col space-y-[55px] xl:space-y-0 xl:justify-between"
|
|
>
|
|
<p>{{ component.section_lang_data.main_description }}</p>
|
|
<p>{{ component.section_lang_data.section_title }}</p>
|
|
<ul>
|
|
<li
|
|
class=""
|
|
v-for="(item, index) in component.section_lang_data
|
|
.section_items"
|
|
:key="index"
|
|
>
|
|
<span>{{ index + 1 }}. </span>{{ item }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
class="w-full xl:max-w-[690px] h-[200px] sm:h-[390px] block rounded-2xl"
|
|
:style="{
|
|
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<div
|
|
class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5"
|
|
>
|
|
<h4
|
|
class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark"
|
|
>
|
|
20 {{ $t("years") }}
|
|
</h4>
|
|
<img
|
|
class="dark:hidden"
|
|
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=640x0')`"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="hidden dark:block"
|
|
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[3]}?thumb=640x0')`"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 xl:flex-row space-25-55">
|
|
<div class="flex flex-col space-25-55 xl:justify-between">
|
|
<p>{{ component.section_lang_data.info_description }}</p>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.section_lang_data.info_title }}
|
|
</h4>
|
|
<div
|
|
v-html="component.section_lang_data.info_description_second"
|
|
class=""
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-full xl:max-w-[690px] h-[170px] sm:h-[360px] block rounded-2xl"
|
|
:style="{
|
|
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
/>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps<{ component: Component }>();
|
|
type Component = {
|
|
image_collection: string;
|
|
section_id: string;
|
|
section_img: string;
|
|
section_lang_data: {
|
|
main_title: string;
|
|
main_description: string;
|
|
section_title: string;
|
|
section_items: [];
|
|
|
|
info_description: string;
|
|
info_title: string;
|
|
info_description_second: string;
|
|
};
|
|
};
|
|
</script>
|