yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix data

Browse Source
This commit is contained in:
Marek Goc
2025-06-25 12:43:42 +02:00
parent 98a4125804
commit 9407253e69
26 changed files with 874 additions and 755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
components/section/BusinessReasons.vue
View File

@ -2,23 +2,22 @@
<UiContainer class="space-55-75 xl:!space-y-[100px]">
<div class="space-25-75">
<h2 class="h2-bold-bounded max-w-[95%]">
<span v-for="(item, index) in component.section_lang_data
.reasons_section_title" :key="index" :class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]">
<span v-for="(item, index) in component.front_section_lang[0].data.reasons_section_title" :key="index" :class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]">
{{ item.text }}
<span v-if="
index !==
component.section_lang_data.reasons_section_title.length - 1
component.front_section_lang[0].data.reasons_section_title.length - 1
">
</span>
</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 md:px-10 xl:p-0 gap-8 auto-rows-fr">
<div v-for="(item, index) in component.section_lang_data.reason_blocks" :key="index" :class="[
<div v-for="(item, index) in component.front_section_lang[0].data.reason_blocks" :key="index" :class="[
'p-[25px] rounded-2xl border border-block flex flex-col justify-between gap-20',
index === 1 && 'xl:col-start-2 xl:col-end-3',
index === 2 && 'xl:col-start-4 xl:col-end-5',
@ -32,7 +31,7 @@
<div class="row-end-7 sm:row-auto rounded-2xl flex items-center justify-center min-h-[200px]">
<div class="w-full h-full rounded-2xl" :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: 'top',
}" />
@ -43,31 +42,31 @@
<div>
<div class="space-25-75">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.cta_section_title }}
{{ component.front_section_lang[0].data.cta_section_title }}
</h2>
<div class="hidden xl:grid grid-cols-2 gap-6">
<div class="flex flex-col gap-20">
<p>{{ component.section_lang_data.cta_description_intro }}</p>
<p>{{ component.section_lang_data.cta_description_details }}</p>
<p>{{ component.front_section_lang[0].data.cta_description_intro }}</p>
<p>{{ component.front_section_lang[0].data.cta_description_details }}</p>
</div>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.main_call_to_action_statement }}
{{ component.front_section_lang[0].data.main_call_to_action_statement }}
</h4>
</div>
<div class="xl:hidden space-25-55">
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-[55px] space-25-55">
<p>{{ component.section_lang_data.cta_description_intro }}</p>
<p>{{ component.front_section_lang[0].data.cta_description_intro }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.main_call_to_action_statement }}
{{ component.front_section_lang[0].data.main_call_to_action_statement }}
</h4>
</div>
<p>{{ component.section_lang_data.cta_description_details }}</p>
<p>{{ component.front_section_lang[0].data.cta_description_details }}</p>
</div>
</div>
</div>
<div class="space-y-[45px]">
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.form_section_title }}
{{ component.front_section_lang[0].data.form_section_title }}
</h4>
<div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
<div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
@ -114,14 +113,14 @@
</div>
<div class="flex flex-col xl:flex-row xl:h-[130px] gap-[45px]">
<div class="w-full xl:w-[560px] h-[130px] xl:h-full rounded-2xl" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<div class="flex flex-col h-full justify-between items-stretch space-y-[25px] sm:space-y-[55px] xl:space-y-0">
<p>{{ component.section_lang_data.closing_inspirational_block }}</p>
<p>{{ component.front_section_lang[0].data.closing_inspirational_block }}</p>
<h4 class="h4-uppercase-bold-inter">
<span v-for="(item, index) in component.section_lang_data.title" :key="index" :class="[
<span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
@ -130,12 +129,12 @@
{{ item.text }}
<span v-if="
index !==
component.section_lang_data.reasons_section_title.length - 1
component.front_section_lang[0].data.reasons_section_title.length - 1
">
</span>
</span>
</h4>
<p>{{ component.section_lang_data.final_tagline }}</p>
<p>{{ component.front_section_lang[0].data.final_tagline }}</p>
</div>
</div>
</div>
@ -143,39 +142,41 @@
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
reasons_section_title: [
{
text: string;
highlight: boolean;
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
reasons_section_title: {
text: string
highlight: boolean
}[]
reason_blocks: {
title: string
description: string
}[]
cta_section_title: string
cta_description_intro: string
cta_description_details: string
main_call_to_action_statement: string
form_section_title: string
closing_inspirational_block: string
title: {
text: string
highlight: boolean
}[]
final_tagline: string
contact_info: string
}
];
reason_blocks: [
{
title: string;
description: string;
}
];
id_front_section: number
id_lang: number
}[]
}
}>();
cta_section_title: string;
cta_description_intro: string;
cta_description_details: string;
main_call_to_action_statement: string;
form_section_title: string;
closing_inspirational_block: string;
title: [
{
text: string;
highlight: boolean;
}
];
final_tagline: string;
};
};
</script>