83 lines
2.8 KiB
Vue
83 lines
2.8 KiB
Vue
<template>
|
|
<UiContainer class="space-y-[55px] sm:space-y-[75px] xl:space-y-[100px]">
|
|
<div class="w-full flex flex-col md:flex-row justify-between gap-7">
|
|
<div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]">
|
|
<div class="space-y-[25px]">
|
|
<h1 class="h1-big text-accent-green-light dark:text-accent-green-dark">
|
|
{{ component.section_lang_data.main_title }}
|
|
</h1>
|
|
<p>
|
|
{{ component.section_lang_data.main_description }}
|
|
</p>
|
|
</div>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.section_lang_data.main_subtitle }}
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
|
|
:style="{
|
|
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
/>
|
|
</div>
|
|
<div class="space-25-55-75">
|
|
<h2 class="h2-bold-bounded">
|
|
{{ component.section_lang_data.story_title }}
|
|
</h2>
|
|
<div class="flex flex-col-reverse md:flex-row w-full gap-6">
|
|
<div
|
|
class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]"
|
|
:style="{
|
|
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
/>
|
|
<div class="flex flex-col">
|
|
<p v-for="(item, index) in component.section_lang_data.story_description">
|
|
{{ item }}
|
|
<div v-if="index < component.section_lang_data.story_description.length-1">
|
|
<br>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col w-full gap-6">
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.section_lang_data.story_subtitle }}
|
|
</h4>
|
|
<div class="flex flex-col justify-between xl:max-w-[70%]">
|
|
<p v-for="(el, indexEl) in component.section_lang_data.story_sub_description">
|
|
{{ el }}
|
|
<div v-if="indexEl < component.section_lang_data.story_sub_description.length-1">
|
|
<br>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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;
|
|
main_subtitle: string;
|
|
story_title: string;
|
|
story_description: [];
|
|
story_subtitle: string;
|
|
story_sub_description: [];
|
|
};
|
|
};
|
|
</script>
|