This commit is contained in:
2025-06-25 12:43:42 +02:00
parent 98a4125804
commit 9407253e69
26 changed files with 874 additions and 755 deletions

View File

@ -4,57 +4,52 @@
<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 }}
{{ component.front_section_lang[0].data.main_title }}
</h1>
<p>
{{ component.section_lang_data.main_description }}
{{ component.front_section_lang[0].data.main_description }}
</p>
</div>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.main_subtitle }}
{{ 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"
<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')`,
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.section_lang_data.story_title }}
{{ 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/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<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.section_lang_data.story_description">
{{ item }}
<div v-if="index < component.section_lang_data.story_description.length-1">
<br>
</div>
<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.section_lang_data.story_subtitle }}
{{ 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.section_lang_data.story_sub_description">
<p v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description" :key="indexEl">
{{ el }}
<div v-if="indexEl < component.section_lang_data.story_sub_description.length-1">
<br>
</div>
<div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
<br>
</div>
</p>
</div>
</div>
@ -64,19 +59,28 @@
<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: [];
};
};
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>