87 lines
2.9 KiB
Vue
87 lines
2.9 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.front_section_lang[0].data.main_title }}
|
|
</h1>
|
|
<p>
|
|
{{ component.front_section_lang[0].data.main_description }}
|
|
</p>
|
|
</div>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
{{ component.front_section_lang[0].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/public/file/${component.img[0]}_l.webp')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}"></div>
|
|
</div>
|
|
<div class="space-25-55-75">
|
|
<h2 class="h2-bold-bounded">
|
|
{{ component.front_section_lang[0].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/public/file/${component.img[1]}_l.webp')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}" />
|
|
<div class="flex flex-col">
|
|
<p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
|
|
{{ item }}
|
|
<div v-if="index < component.front_section_lang[0].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.front_section_lang[0].data.story_subtitle }}
|
|
</h4>
|
|
<div class="flex flex-col justify-between xl:max-w-[70%]">
|
|
<p v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description" :key="indexEl">
|
|
{{ el }}
|
|
<div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
|
|
<br>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
defineProps<{
|
|
component: {
|
|
id: number
|
|
name: string
|
|
img: string[]
|
|
component_name: string
|
|
is_no_lang: boolean
|
|
page_name: string
|
|
front_section_lang: {
|
|
data: {
|
|
main_title: string
|
|
main_description: string
|
|
main_subtitle: string
|
|
story_title: string
|
|
story_description: string[]
|
|
story_subtitle: string
|
|
story_sub_description: string[]
|
|
}
|
|
id_front_section: number
|
|
id_lang: number
|
|
}[]
|
|
}
|
|
}>();
|
|
|
|
</script>
|