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

16
components/HeaderBlock.vue
View File

@ -6,9 +6,9 @@
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex"> <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
<ul class="flex items-center justify-between whitespace-nowrap w-full"> <ul class="flex items-center justify-between whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index" <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']"> :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
0{{ index + 1 }} <br /> 0{{ index + 1 }} <br />
{{ item.name }} {{ item.front_menu_lang[0].name }}
</li> </li>
</ul> </ul>
<ClientOnly v-if="!colorMode?.forced"> <ClientOnly v-if="!colorMode?.forced">
@ -60,16 +60,12 @@
<template #content> <template #content>
<div class="w-full border-border border-b pt-6 pb-8"> <div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]"> <UiContainer class="flex flex-col gap-[30px]">
<div v-for="(item, index) in menuStore.menu" @click=" <div v-for="(item, index) in menuStore.menu" :key="index"
() => { :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']"
menuStore.navigateToItem(item); @click="() => { menuStore.navigateToItem(item); open = false; }">
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter"> <div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span> <span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }} {{ item.front_menu_lang[0].name }}
</div> </div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> --> <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">

51
components/section/AboutGoldImpact.vue
View File

@ -3,12 +3,12 @@
<div class="space-25-55-75"> <div class="space-25-55-75">
<div class="grid sm:grid-cols-7 md:grid-cols-4 xl:grid-cols-2"> <div class="grid sm:grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
<h2 class="sm:col-start-2 sm:col-end-8 md:col-end-5 xl:col-start-2 h2-bold-bounded"> <h2 class="sm:col-start-2 sm:col-end-8 md:col-end-5 xl:col-start-2 h2-bold-bounded">
{{ component.section_lang_data.section_1.title }} {{ component.front_section_lang[0].data.section_1.title }}
</h2> </h2>
</div> </div>
<div class="space-y-[40px] sm:space-55-75"> <div class="space-y-[40px] sm:space-55-75">
<div v-for="(item, index) in component.section_lang_data.section_1 <div v-for="(item, index) in component.front_section_lang[0].data.section_1.text_blocks"
.text_blocks" :key="index" class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2"> :key="index" class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
<div class="flex gap-[200px]"> <div class="flex gap-[200px]">
<h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4> <h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
<h4 class="hidden xl:block h4-uppercase-bold-inter w-full whitespace-nowrap"> <h4 class="hidden xl:block h4-uppercase-bold-inter w-full whitespace-nowrap">
@ -26,10 +26,10 @@
</div> </div>
<div class="space-25-55-75"> <div class="space-25-55-75">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_2.title }} {{ component.front_section_lang[0].data.section_2.title }}
</h2> </h2>
<div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-[30px] auto-cols-fr auto-rows-fr"> <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-[30px] auto-cols-fr auto-rows-fr">
<div class="border border-border rounded-2xl p-8 flex flex-col justify-between gap-[55px]" v-for="(item, index) in component.section_lang_data.section_2 <div class="border border-border rounded-2xl p-8 flex flex-col justify-between gap-[55px]" v-for="(item, index) in component.front_section_lang[0].data.section_2
.text_blocks" :key="index"> .text_blocks" :key="index">
<div> <div>
<h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4> <h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
@ -40,12 +40,12 @@
<div <div
class="row-end-4 sm:row-end-3 col-start-1 col-end-2 xl:row-end-1 xl:col-start-3 xl:col-end-4 flex flex-col gap-[10px] md:gap-[30px]"> class="row-end-4 sm:row-end-3 col-start-1 col-end-2 xl:row-end-1 xl:col-start-3 xl:col-end-4 flex flex-col gap-[10px] md:gap-[30px]">
<div class="w-full h-full md:h-[211px] rounded-2xl" :style="{ <div class="w-full h-full md:h-[211px] 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', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
<div class="w-full h-full md:h-[211px] rounded-2xl" :style="{ <div class="w-full h-full md:h-[211px] rounded-2xl" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`, backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
@ -54,10 +54,10 @@
</div> </div>
<div class="grid space-25-55 xl:grid-cols-2"> <div class="grid space-25-55 xl:grid-cols-2">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_3.title }} {{ component.front_section_lang[0].data.section_3.title }}
</h2> </h2>
<div class="flex flex-col space-25-55"> <div class="flex flex-col space-25-55">
<p v-for="(item, index) in component.section_lang_data.section_3 <p v-for="(item, index) in component.front_section_lang[0].data.section_3
.text_blocks" :key="index"> .text_blocks" :key="index">
{{ item }} {{ item }}
</p> </p>
@ -66,27 +66,31 @@
<div class="grid xl:space-25-55 grid-cols-1 xl:grid-cols-2 xl:gap-[30px]"> <div class="grid xl:space-25-55 grid-cols-1 xl:grid-cols-2 xl:gap-[30px]">
<div class="flex flex-col gap-[25px] sm:gap-[55px] md:gap-[75px] xl:justify-between"> <div class="flex flex-col gap-[25px] sm:gap-[55px] md:gap-[75px] xl:justify-between">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_4.title }} {{ component.front_section_lang[0].data.section_4.title }}
</h2> </h2>
<p>{{ component.section_lang_data.section_4.description }}</p> <p>{{ component.front_section_lang[0].data.section_4.description }}</p>
</div> </div>
<div class="mb-[25px] mt-5 md:mb-[55px] xl:m-0 w-full h-[222px] sm:h-[371px] rounded-2xl" :style="{ <div class="mb-[25px] mt-5 md:mb-[55px] xl:m-0 w-full h-[222px] sm:h-[371px] rounded-2xl" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`, backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
<p class="xl:col-start-2 xl:col-end-3">{{ component.section_lang_data.section_4.description_second }}</p> <p class="xl:col-start-2 xl:col-end-3">{{ component.front_section_lang[0].data.section_4.description_second }}</p>
</div> </div>
</UiContainer> </UiContainer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
section_1: { section_1: {
title: string; title: string;
text_blocks: [ text_blocks: [
@ -114,6 +118,11 @@ type Component = {
description: string; description: string;
description_second: string; description_second: string;
}; };
}; }
}; id_front_section: number
id_lang: number
}[]
}
}>();
</script> </script>

73
components/section/AboutGoldMain.vue
View File

@ -6,27 +6,27 @@
class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between"> class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between">
<div> <div>
<h1 class="h1-big text-accent-green-light mb-6 md:mb-10"> <h1 class="h1-big text-accent-green-light mb-6 md:mb-10">
{{ component.section_lang_data.title }} {{ component.front_section_lang[0].data.title }}
</h1> </h1>
<p class="text-text-light sm:text-xl md:text-2xl font-medium">{{ <p class="text-text-light sm:text-xl md:text-2xl font-medium">{{
component.section_lang_data.description }}</p> component.front_section_lang[0].data.description }}</p>
</div> </div>
<UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow> <UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
</div> </div>
<div class="flex gap-[10px] sm:gap-[30px]"> <div class="flex gap-[10px] sm:gap-[30px]">
<div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{ <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`, backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
<div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{ <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`, backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
<div class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block" <div class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block"
:style="{ :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', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
@ -34,37 +34,40 @@
</div> </div>
<div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block" <div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block"
:style="{ :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', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
</div> </div>
<div class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]"> <div class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]">
<div class="space-25-55-75"> <div class="space-25-55-75">
<h2 class="h2-bold-bounded">{{ component.section_lang_data.section_2.title }}</h2> <h2 class="h2-bold-bounded">{{ component.front_section_lang[0].data.section_2.title }}</h2>
<div class="space-y-[40px] sm:space-y-[50px]"> <div class="space-y-[40px] sm:space-y-[50px]">
<p v-for="(item, index) in component.section_lang_data.section_2.text_blocks" :key="index">{{ item <p v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">{{ item
}}</p> }}</p>
</div> </div>
</div> </div>
<div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{ <div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[3]}?thumb=1200x0')`, backgroundImage: `url('/api/public/file/${component.img[3]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]"> <div
<h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{ component.section_lang_data.section_3.title }}</h2> class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]">
<div v-for="(item, index) in component.section_lang_data.section_3.text_blocks" :key="index" <h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{ component.front_section_lang[0].data.section_3.title }}
</h2>
<div v-for="(item, index) in component.front_section_lang[0].data.section_3.text_blocks" :key="index"
class="flex flex-col justify-between space-25-55"> class="flex flex-col justify-between space-25-55">
<p class="md:px-4 xl:p-0">{{ item }}</p> <p class="md:px-4 xl:p-0">{{ item }}</p>
<div class=" rounded-2xl h-[227px] sm:h-[281px]" :style="{ <div class=" rounded-2xl h-[227px] sm:h-[281px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index + 4]}?thumb=1200x0')`, backgroundImage: `url('/api/public/file/${component.img[index + 4]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
</div> </div>
<div class="sm:col-start-1 sm:col-end-3 xl:col-start-3 xl:col-end-5 flex justify-center xl:items-end xl:justify-end"> <div
class="sm:col-start-1 sm:col-end-3 xl:col-start-3 xl:col-end-5 flex justify-center xl:items-end xl:justify-end">
<UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow> <UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
</div> </div>
</div> </div>
@ -72,23 +75,31 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: string; is_no_lang: boolean
description: string; page_name: string
button_label: string; front_section_lang: {
data: {
title: string
description: string
section_2: { section_2: {
title: string; title: string
text_blocks: [] text_blocks: string[]
},
section_3: {
title: string;
text_blocks: []
} }
}; section_3: {
}; title: string
text_blocks: string[]
}
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script> </script>

66
components/section/AboutUsDifferent.vue
View File

@ -3,44 +3,35 @@
<div class="grid xl:grid-cols-2"> <div class="grid xl:grid-cols-2">
<div class="space-25-75 xl:col-start-2"> <div class="space-25-75 xl:col-start-2">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.title }} {{ component.front_section_lang[0].data.title }}
</h2> </h2>
<p>{{ component.section_lang_data.description }}</p> <p>{{ component.front_section_lang[0].data.description }}</p>
</div> </div>
</div> </div>
<div <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-rows-5 md:grid-rows-3 xl:grid-rows-2 gap-8">
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-rows-5 md:grid-rows-3 xl:grid-rows-2 gap-8" <div v-for="(item, index) in component.front_section_lang[0].data.feature_blocks" :key="index" :class="[
>
<div
v-for="(item, index) in component.section_lang_data.feature_blocks"
:key="index"
:class="[
'p-8 rounded-2xl border border-block flex flex-col justify-between gap-4', 'p-8 rounded-2xl border border-block flex flex-col justify-between gap-4',
index === 0 && 'bg-block dark:text-bg-dark', index === 0 && 'bg-block dark:text-bg-dark',
index === 1 && 'xl:col-start-2 xl:col-end-3', index === 1 && 'xl:col-start-2 xl:col-end-3',
index === 2 && 'xl:col-start-4 xl:col-end-5', index === 2 && 'xl:col-start-4 xl:col-end-5',
index === 3 && index === 3 &&
'md:col-start-1 md:col-end-3 xl:col-start-2 xl:col-end-4', 'md:col-start-1 md:col-end-3 xl:col-start-2 xl:col-end-4',
]" ]">
>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
<span>0{{ index + 1 }} <br /></span>{{ item.block_title }} <span>0{{ index + 1 }} <br /></span>{{ item.block_title }}
</h4> </h4>
<p>{{ item.block_description }}</p> <p>{{ item.block_description }}</p>
</div> </div>
<div <div
class="sm:text-white xl:row-start-2 md:col-start-1 md:col-end-3 xl:col-end-2 w-full md:h-full flex justify-center xl:items-end" class="sm:text-white xl:row-start-2 md:col-start-1 md:col-end-3 xl:col-end-2 w-full md:h-full flex justify-center xl:items-end">
>
<UiButtonArrow :arrow="true" type="fill">Zakoupit zlato</UiButtonArrow> <UiButtonArrow :arrow="true" type="fill">Zakoupit zlato</UiButtonArrow>
</div> </div>
<div <div class="rounded-2xl row-start-4 md:row-start-2 md:col-start-2 md:col-end-3 xl:col-start-4 xl:col-end-5"
class="rounded-2xl row-start-4 md:row-start-2 md:col-start-2 md:col-end-3 xl:col-start-4 xl:col-end-5"
:style="{ :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', backgroundSize: 'cover',
backgroundPosition: 'top', backgroundPosition: 'top',
}" }" />
/>
</div> </div>
</UiContainer> </UiContainer>
</template> </template>
@ -48,21 +39,28 @@
<script lang="ts" setup> <script lang="ts" setup>
import { UiButtonArrow } from "#components"; import { UiButtonArrow } from "#components";
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: string; is_no_lang: boolean
description: string; page_name: string
feature_blocks: [ front_section_lang: {
{ data: {
block_title: string; title: string
block_description: string; description: string
fill: boolean; feature_blocks: {
block_title: string
block_description: string
fill?: boolean
}[]
} }
]; id_front_section: number
}; id_lang: number
}; }[]
}
}>();
</script> </script>

126
components/section/AboutUsHistory.vue
View File

@ -2,98 +2,79 @@
<UiContainer class="space-55-75"> <UiContainer class="space-55-75">
<div class="space-25-55-75"> <div class="space-25-55-75">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_1.title }} {{ component.front_section_lang[0].data.section_1.title }}
</h2> </h2>
<div class="flex flex-col xl:flex-row gap-12"> <div class="flex flex-col xl:flex-row gap-12">
<div <div class="rounded-2xl h-[255px] sm:h-[435px] md:h-[500px] w-full xl:min-w-[700px]" :style="{
class="rounded-2xl h-[255px] sm:h-[435px] md:h-[500px] w-full xl:min-w-[700px]" backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'bottom', backgroundPosition: 'bottom',
}" }" />
/>
<div class="flex flex-col justify-between space-25-55"> <div class="flex flex-col justify-between space-25-55">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.section_1.sub_title }} {{ component.front_section_lang[0].data.section_1.sub_title }}
</h4> </h4>
<div class="flex flex-col"> <div class="flex flex-col">
<p <p v-for="(item, index) in component.front_section_lang[0].data.section_1.sub_description" :key="index">
v-for="item in component.section_lang_data.section_1
.sub_description"
>
{{ item }} {{ item }}
</p> </p>
</div> </div>
</div> </div>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.section_1.sub_title_second }} {{ component.front_section_lang[0].data.section_1.sub_title_second }}
</h4> </h4>
</div> </div>
</div> </div>
</div> </div>
<div class="space-25-55-75"> <div class="space-25-55-75">
<h2 class="h2-bold-bounded sm:text-center"> <h2 class="h2-bold-bounded sm:text-center">
{{ component.section_lang_data.section_2.title }} {{ component.front_section_lang[0].data.section_2.title }}
</h2> </h2>
<div class="space-25-55"> <div class="space-25-55">
<div class="flex flex-col w-full xl:w-[55%]"> <div class="flex flex-col w-full xl:w-[55%]">
<p v-for="item in component.section_lang_data.section_2.description"> <p v-for="(item, index) in component.front_section_lang[0].data.section_2.description" :key="index">
{{ item }} {{ item }}
</p> </p>
</div> </div>
<div class="w-full md:ml-10 xl:m-0 xl:grid xl:grid-cols-2"> <div class="w-full md:ml-10 xl:m-0 xl:grid xl:grid-cols-2">
<h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter"> <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
{{ component.section_lang_data.section_3.title }} {{ component.front_section_lang[0].data.section_3.title }}
</h4> </h4>
</div> </div>
</div> </div>
<div class="flex flex-col xl:flex-row gap-12"> <div class="flex flex-col xl:flex-row gap-12">
<div class="flex flex-col sm:flex-row gap-3 min-w-[60%]"> <div class="flex flex-col sm:flex-row gap-3 min-w-[60%]">
<div <div class="rounded-2xl h-[230px] sm:h-[300px] w-full xl:h-[770px]" :style="{
class="rounded-2xl h-[230px] sm:h-[300px] w-full xl:h-[770px]" backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/> <div class="rounded-2xl xl:hidden w-full h-[230px] sm:h-[300px] xl:w-full xl:h-[328px]" :style="{
<div backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
class="rounded-2xl xl:hidden w-full h-[230px] sm:h-[300px] xl:w-full xl:h-[328px]"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
</div> </div>
<div class="flex flex-col justify-between space-25-55 xl:w-[70%]"> <div class="flex flex-col justify-between space-25-55 xl:w-[70%]">
<div <div class="hidden xl:block rounded-2xl max-full min-h-[330px]" :style="{
class="hidden xl:block rounded-2xl max-full min-h-[330px]" backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
<div class="h-full flex flex-col gap-5 xl:gap-0 justify-between"> <div class="h-full flex flex-col gap-5 xl:gap-0 justify-between">
<h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter"> <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
{{ component.section_lang_data.section_4.title }} {{ component.front_section_lang[0].data.section_4.title }}
</h4> </h4>
<div class="flex flex-col"> <div class="flex flex-col">
<p <p v-if="component.front_section_lang[0].data.section_4.description"
v-if="component.section_lang_data.section_4.description" v-html="component.front_section_lang[0].data.section_4.description[0]"></p>
v-html="component.section_lang_data.section_4.description[0]"
></p>
<br /> <br />
<p <p v-if="component.front_section_lang[0].data.section_4.description"
v-if="component.section_lang_data.section_4.description" v-html="component.front_section_lang[0].data.section_4.description[1]"></p>
v-html="component.section_lang_data.section_4.description[1]"
></p>
</div> </div>
<h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter"> <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
{{ component.section_lang_data.section_5.title }} {{ component.front_section_lang[0].data.section_5.title }}
</h4> </h4>
</div> </div>
</div> </div>
@ -103,24 +84,41 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
interface ContentSection { component: {
title: string; id: number
sub_title?: string; name: string
sub_title_second?: string; img: string[]
sub_description?: string[]; component_name: string
description?: string[]; is_no_lang: boolean
} page_name: string
type Component = { front_section_lang: {
image_collection: string; data: {
section_id: string; section_1: {
section_img: string; title: string
section_lang_data: { sub_title: string
section_1: ContentSection; sub_description: string[]
section_2: ContentSection; sub_title_second: string
section_3: ContentSection; }
section_4: ContentSection; section_2: {
section_5: ContentSection; title: string
}; description: string[]
}; }
section_3: {
title: string
}
section_4: {
title: string
description: string[]
}
section_5: {
title: string
}
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script> </script>

74
components/section/AboutUsMain.vue
View File

@ -4,42 +4,37 @@
<div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]"> <div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]">
<div class="space-y-[25px]"> <div class="space-y-[25px]">
<h1 class="h1-big text-accent-green-light dark:text-accent-green-dark"> <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> </h1>
<p> <p>
{{ component.section_lang_data.main_description }} {{ component.front_section_lang[0].data.main_description }}
</p> </p>
</div> </div>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.main_subtitle }} {{ component.front_section_lang[0].data.main_subtitle }}
</h4> </h4>
</div> </div>
<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"
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="{ :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', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }"></div>
/>
</div> </div>
<div class="space-25-55-75"> <div class="space-25-55-75">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.story_title }} {{ component.front_section_lang[0].data.story_title }}
</h2> </h2>
<div class="flex flex-col-reverse md:flex-row w-full gap-6"> <div class="flex flex-col-reverse md:flex-row w-full gap-6">
<div <div class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]" :style="{
class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]" backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
<div class="flex flex-col"> <div class="flex flex-col">
<p v-for="(item, index) in component.section_lang_data.story_description"> <p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
{{ item }} {{ item }}
<div v-if="index < component.section_lang_data.story_description.length-1"> <div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
<br> <br>
</div> </div>
</p> </p>
@ -47,12 +42,12 @@
</div> </div>
<div class="flex flex-col w-full gap-6"> <div class="flex flex-col w-full gap-6">
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.story_subtitle }} {{ component.front_section_lang[0].data.story_subtitle }}
</h4> </h4>
<div class="flex flex-col justify-between xl:max-w-[70%]"> <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 }} {{ el }}
<div v-if="indexEl < component.section_lang_data.story_sub_description.length-1"> <div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
<br> <br>
</div> </div>
</p> </p>
@ -64,19 +59,28 @@
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
main_title: string; is_no_lang: boolean
main_description: string; page_name: string
main_subtitle: string; front_section_lang: {
story_title: string; data: {
story_description: []; main_title: string
story_subtitle: string; main_description: string
story_sub_description: []; main_subtitle: string
}; story_title: string
}; story_description: string[]
story_subtitle: string
story_sub_description: string[]
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script> </script>

128
components/section/BusinessMain.vue
View File

@ -2,131 +2,117 @@
<UiContainer class="space-y-[55px] md:space-y-[75px] xl:space-y-[100px]"> <UiContainer class="space-y-[55px] md:space-y-[75px] xl:space-y-[100px]">
<div class="space-y-10 sm:space-y-[55px] md:space-y-14"> <div class="space-y-10 sm:space-y-[55px] md:space-y-14">
<h1 class="h1 text-center"> <h1 class="h1 text-center">
<span <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
v-for="(item, index) in component.section_lang_data.title"
:key="index"
:class="[
item.highlight item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
'inline', 'inline',
]" ]">
>
{{ item.text }} {{ item.text }}
<span v-if="index !== component.section_lang_data.title.length - 1"> <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
</span> </span>
</span> </span>
</h1> </h1>
<div <div class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl" :style="{
class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl" backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
<div class="md:w-full xl:w-[70%] space-y-14"> <div class="md:w-full xl:w-[70%] space-y-14">
<p>{{ component.section_lang_data.main_description }}</p> <p>{{ component.front_section_lang[0].data.main_description }}</p>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.secondary_description }} {{ component.front_section_lang[0].data.secondary_description }}
</h4> </h4>
</div> </div>
</div> </div>
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2"> <div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_1_title }} {{ component.front_section_lang[0].data.section_1_title }}
</h2> </h2>
<p v-html="component.section_lang_data.section_1_description"></p> <p v-html="component.front_section_lang[0].data.section_1_description"></p>
</div> </div>
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2"> <div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
<span <span v-for="(item, index) in component.front_section_lang[0].data.section_2_title" :key="index" :class="[
v-for="(item, index) in component.section_lang_data.section_2_title"
:key="index"
:class="[
item.highlight item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
'inline', 'inline',
]" ]">
>
{{ item.text }} {{ item.text }}
<span v-if="index !== component.section_lang_data.title.length - 1"> <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
</span> </span>
</span> </span>
</h2> </h2>
<p v-html="component.section_lang_data.section_2_description"></p> <p v-html="component.front_section_lang[0].data.section_2_description"></p>
</div> </div>
<div class="space-25-75"> <div class="space-25-75">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_3_title }} {{ component.front_section_lang[0].data.section_3_title }}
</h2> </h2>
<div <div class="grid grid-cols-1 space-25-55 md:space-0 xl:gap-2 md:grid-cols-2">
class="grid grid-cols-1 space-25-55 md:space-0 xl:gap-2 md:grid-cols-2"
>
<div class="space-y-[25px] sm:space-y-[45px]"> <div class="space-y-[25px] sm:space-y-[45px]">
<p>{{ component.section_lang_data.section_3_description }}</p> <p>{{ component.front_section_lang[0].data.section_3_description }}</p>
<div class=""> <div class="">
<p <p v-for="(item, index) in component.front_section_lang[0].data
v-for="(item, index) in component.section_lang_data .section_3_items" :key="index">
.section_3_items"
:key="index"
>
{{ index + 1 }}. {{ index + 1 }}.
{{ item }} {{ item }}
</p> </p>
</div> </div>
</div> </div>
<div <div class="h-[315px] xl:h-full rounded-2xl" :style="{
class="h-[315px] xl:h-full rounded-2xl" backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 xl:grid-cols-2"> <div class="grid grid-cols-1 xl:grid-cols-2">
<div class="col-start-2 col-end-3 space-25-75 xl:space-0"> <div class="col-start-2 col-end-3 space-25-75 xl:space-0">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_4_title }} {{ component.front_section_lang[0].data.section_4_title }}
</h2> </h2>
<p v-html="component.section_lang_data.section_4_description"></p> <p v-html="component.front_section_lang[0].data.section_4_description"></p>
</div> </div>
</div> </div>
</UiContainer> </UiContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: [ is_no_lang: boolean
{ page_name: string
text: string; front_section_lang: {
highlight: boolean; data: {
title: {
text: string
highlight: boolean
}[]
main_description: string
secondary_description: string
section_1_title: string
section_1_description: string
section_2_title: {
text: string
highlight: boolean
}[]
section_2_description: string
section_3_title: string
section_3_description: string
section_3_items: string[]
section_4_title: string
section_4_description: string
} }
]; id_front_section: number
main_description: string; id_lang: number
secondary_description: string; }[]
section_1_title: string;
section_1_description: string;
section_2_title: [
{
text: string;
highlight: boolean;
} }
]; }>();
section_2_description: string;
section_3_title: string;
section_3_description: string;
section_3_items: [];
section_4_title: string;
section_4_description: string;
};
};
</script> </script>

101
components/section/BusinessReasons.vue
View File

@ -2,8 +2,7 @@
<UiContainer class="space-55-75 xl:!space-y-[100px]"> <UiContainer class="space-55-75 xl:!space-y-[100px]">
<div class="space-25-75"> <div class="space-25-75">
<h2 class="h2-bold-bounded max-w-[95%]"> <h2 class="h2-bold-bounded max-w-[95%]">
<span v-for="(item, index) in component.section_lang_data <span v-for="(item, index) in component.front_section_lang[0].data.reasons_section_title" :key="index" :class="[
.reasons_section_title" :key="index" :class="[
item.highlight item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
@ -12,13 +11,13 @@
{{ item.text }} {{ item.text }}
<span v-if=" <span v-if="
index !== index !==
component.section_lang_data.reasons_section_title.length - 1 component.front_section_lang[0].data.reasons_section_title.length - 1
"> ">
</span> </span>
</span> </span>
</h2> </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 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', '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 === 1 && 'xl:col-start-2 xl:col-end-3',
index === 2 && 'xl:col-start-4 xl:col-end-5', 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="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="{ <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', backgroundSize: 'cover',
backgroundPosition: 'top', backgroundPosition: 'top',
}" /> }" />
@ -43,31 +42,31 @@
<div> <div>
<div class="space-25-75"> <div class="space-25-75">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
{{ component.section_lang_data.cta_section_title }} {{ component.front_section_lang[0].data.cta_section_title }}
</h2> </h2>
<div class="hidden xl:grid grid-cols-2 gap-6"> <div class="hidden xl:grid grid-cols-2 gap-6">
<div class="flex flex-col gap-20"> <div class="flex flex-col gap-20">
<p>{{ component.section_lang_data.cta_description_intro }}</p> <p>{{ component.front_section_lang[0].data.cta_description_intro }}</p>
<p>{{ component.section_lang_data.cta_description_details }}</p> <p>{{ component.front_section_lang[0].data.cta_description_details }}</p>
</div> </div>
<h4 class="h4-uppercase-bold-inter"> <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> </h4>
</div> </div>
<div class="xl:hidden space-25-55"> <div class="xl:hidden space-25-55">
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-[55px] 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"> <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> </h4>
</div> </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>
</div> </div>
<div class="space-y-[45px]"> <div class="space-y-[45px]">
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.form_section_title }} {{ component.front_section_lang[0].data.form_section_title }}
</h4> </h4>
<div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0"> <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%]"> <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>
<div class="flex flex-col xl:flex-row xl:h-[130px] gap-[45px]"> <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="{ <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', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" /> }" />
<div class="flex flex-col h-full justify-between items-stretch space-y-[25px] sm:space-y-[55px] xl:space-y-0"> <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"> <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 item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
@ -130,12 +129,12 @@
{{ item.text }} {{ item.text }}
<span v-if=" <span v-if="
index !== index !==
component.section_lang_data.reasons_section_title.length - 1 component.front_section_lang[0].data.reasons_section_title.length - 1
"> ">
</span> </span>
</span> </span>
</h4> </h4>
<p>{{ component.section_lang_data.final_tagline }}</p> <p>{{ component.front_section_lang[0].data.final_tagline }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -143,39 +142,41 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
reasons_section_title: [ is_no_lang: boolean
{ page_name: string
text: string; front_section_lang: {
highlight: boolean; 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
} }
]; id_front_section: number
reason_blocks: [ id_lang: number
{ }[]
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;
};
};
</script> </script>

29
components/section/ContactMain.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<UiContainer class="space-y-[45px]"> <UiContainer class="space-y-[45px]">
<div class="xl:w-[70%] space-y-[25px]"> <div class="xl:w-[70%] space-y-[25px]">
<h1 class="h1">{{ component.section_lang_data.title }}</h1> <h1 class="h1">{{ component.front_section_lang[0].data.title }}</h1>
<p v-html="component.section_lang_data.description"></p> <p v-html="component.front_section_lang[0].data.description"></p>
</div> </div>
<div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0"> <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%]"> <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
@ -50,14 +50,23 @@
</UiContainer> </UiContainer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string; title: string;
description: string; description: string;
}; }
}; id_front_section: number
id_lang: number
}[]
}
}>();
</script> </script>

39
components/section/FooterBlock.vue
View File

@ -3,7 +3,7 @@
<UiContainer class="flex flex-col gap-24"> <UiContainer class="flex flex-col gap-24">
<div <div
class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"> class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
<div v-for="(item, index) in component.section_lang_data" :key="index" <div v-for="(item, index) in component.front_section_lang[0].data" :key="index"
class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"> class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
<h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3> <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
<div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter" <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
@ -22,24 +22,29 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: string; is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string
children: { children: {
title: string; title: string
value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info'; value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info'
link?: string; link?: string
}[]; }[]
}[]; }[]
}; id_front_section: number
id_lang: number
}[]
}
}>();
const store = useStore();
const open = ref(false);
const menuStore = useMenuStore(); const menuStore = useMenuStore();
const colorMode = useColorMode(); const colorMode = useColorMode();

31
components/section/InvestmentFaq.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<UiContainer> <UiContainer>
<div class="space-25-55"> <div class="space-25-55">
<h2 class="h2-bold-bounded">{{ component.section_lang_data.title }}</h2> <h2 class="h2-bold-bounded">{{ component.front_section_lang[0].data.title }}</h2>
<div class="flex flex-col gap-10"> <div class="flex flex-col gap-10">
<div v-for="(item, index) in component.section_lang_data.faq" :key="index" <div v-for="(item, index) in component.front_section_lang[0].data.faq" :key="index"
@click="active = active === index ? 0 : index" @click="active = active === index ? 0 : index"
class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer"> class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer">
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<h4 class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66"> <h4 class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66">
<span v-for="(item, index) in component.section_lang_data.sub_title" :key="index" :class="{ <span v-for="(item, index) in component.front_section_lang [0].data.sub_title" :key="index" :class="{
'text-accent-green-light dark:text-accent-green-dark': 'text-accent-green-light dark:text-accent-green-dark':
item.highlight, item.highlight,
}"> }">
@ -53,12 +53,16 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string; title: string;
faq: [ faq: [
{ {
@ -72,8 +76,13 @@ type Component = {
highlight: boolean; highlight: boolean;
} }
]; ];
}; }
}; id_front_section: number
id_lang: number
}[]
}
}>();
const active = ref<number>(0); const active = ref<number>(0);
</script> </script>

96
components/section/InvestmentMain.vue
View File

@ -1,63 +1,45 @@
<template> <template>
<UiContainer class="space-y-[30px] xl:space-y-[55px]"> <UiContainer class="space-y-[30px] xl:space-y-[55px]">
<div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5"> <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
<div <div class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto">
class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
>
<h1 class="h1"> <h1 class="h1">
<span <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
v-for="(item, index) in component.section_lang_data.title"
:key="index"
:class="[
item.highlight item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
'inline', 'inline',
]" ]">
>
{{ item.text }} {{ item.text }}
<span v-if="index !== component.section_lang_data.title.length - 1"> <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
</span> </span>
</span> </span>
</h1> </h1>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
<span <span v-for="(item, index) in component.front_section_lang[0].data.sub_title" :key="index" :class="{
v-for="(item, index) in component.section_lang_data.sub_title"
:key="index"
:class="{
'text-accent-green-light dark:text-accent-green-dark': 'text-accent-green-light dark:text-accent-green-dark':
item.highlight, item.highlight,
}" }">
>
{{ item.text }} {{ item.text }}
</span> </span>
</h4> </h4>
<p>{{ component.section_lang_data.description }}</p> <p>{{ component.front_section_lang[0].data.description }}</p>
</div> </div>
<div <div class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl" :style="{
class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl" backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
</div> </div>
<div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5"> <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
<div <div class="w-full xl:max-w-[570px] h-[225px] block rounded-2xl" :style="{
class="w-full xl:max-w-[570px] h-[225px] block rounded-2xl" backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/> <div class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto">
<div <p>{{ component.front_section_lang[0].data.description_second }}</p>
class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
>
<p>{{ component.section_lang_data.description_second }}</p>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.sub_title_second }} {{ component.front_section_lang[0].data.sub_title_second }}
</h4> </h4>
</div> </div>
</div> </div>
@ -65,27 +47,31 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: [ is_no_lang: boolean
{ page_name: string
text: string; front_section_lang: {
highlight: boolean; data: {
title: {
text: string
highlight: boolean
}[]
sub_title: {
text: string
highlight: boolean
}[]
description: string
description_second: string
sub_title_second: string
} }
]; id_front_section: number
sub_title: [ id_lang: number
{ }[]
text: string;
highlight: boolean;
} }
]; }>();
description: string;
description_second: string;
sub_title_second: string;
};
};
</script> </script>

111
components/section/InvestmentSave.vue
View File

@ -3,97 +3,80 @@
<div class="space-25-55"> <div class="space-25-55">
<div class="space-25-75"> <div class="space-25-75">
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.main_title }} {{ component.front_section_lang[0].data.main_title }}
</h4> </h4>
<div <div class="w-full h-full flex flex-col items-stretch gap-4 xl:flex-row space-25-55 xl:!space-y-0">
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.front_section_lang[0].data.main_description }}</p>
<div <p>{{ component.front_section_lang[0].data.section_title }}</p>
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> <ul>
<li <li class="" v-for="(item, index) in component.front_section_lang[0].data
class="" .section_items" :key="index">
v-for="(item, index) in component.section_lang_data
.section_items"
:key="index"
>
<span>{{ index + 1 }}. </span>{{ item }} <span>{{ index + 1 }}. </span>{{ item }}
</li> </li>
</ul> </ul>
</div> </div>
<div <div class="w-full xl:max-w-[690px] h-[200px] sm:h-[390px] block rounded-2xl" :style="{
class="w-full xl:max-w-[690px] h-[200px] sm:h-[390px] block rounded-2xl" backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
</div> </div>
</div> </div>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div <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">
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">
>
<h4
class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark"
>
20 {{ $t("years") }} 20 {{ $t("years") }}
</h4> </h4>
<img <img class="dark:hidden"
class="dark:hidden" :src="`/api/public/file/${component.img[2]}_l.webp`"
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=640x0')`" alt="" />
alt="" <img class="hidden dark:block"
/> :src="`/api/public/file/${component.img[3]}_l.webp`"
<img alt="" />
class="hidden dark:block"
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[3]}?thumb=640x0')`"
alt=""
/>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col gap-4 xl:flex-row space-25-55"> <div class="flex flex-col gap-4 xl:flex-row space-25-55">
<div class="flex flex-col space-25-55 xl:justify-between"> <div class="flex flex-col space-25-55 xl:justify-between">
<p>{{ component.section_lang_data.info_description }}</p> <p>{{ component.front_section_lang[0].data.info_description }}</p>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.info_title }} {{ component.front_section_lang[0].data.info_title }}
</h4> </h4>
<div <div v-html="component.front_section_lang[0].data.info_description_second" class=""></div>
v-html="component.section_lang_data.info_description_second"
class=""
></div>
</div> </div>
<div <div class="w-full xl:max-w-[690px] h-[170px] sm:h-[360px] block rounded-2xl" :style="{
class="w-full xl:max-w-[690px] h-[170px] sm:h-[360px] block rounded-2xl" backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }" />
/>
</div> </div>
</UiContainer> </UiContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
main_title: string; is_no_lang: boolean
main_description: string; page_name: string
section_title: string; front_section_lang: {
section_items: []; data: {
main_title: string
main_description: string
section_title: string
section_items: string[]
info_title: string
info_description: string
info_description_second: string
}
id_front_section: number
id_lang: number
}[]
}
}>();
info_description: string;
info_title: string;
info_description_second: string;
};
};
</script> </script>

47
components/section/InvestmentWhy.vue
View File

@ -2,42 +2,45 @@
<UiContainer> <UiContainer>
<div class="space-25-55-75 max-w-[1000px] mx-auto"> <div class="space-25-55-75 max-w-[1000px] mx-auto">
<h1 class="h2-bold-bounded"> <h1 class="h2-bold-bounded">
<span <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
v-for="(item, index) in component.section_lang_data.title"
:key="index"
:class="[
item.highlight item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
'inline', 'inline',
]" ]">
>
{{ item.text }} {{ item.text }}
<span v-if="index !== component.section_lang_data.title.length - 1"> <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
</span> </span>
</span> </span>
</h1> </h1>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.description }} {{ component.front_section_lang[0].data.description }}
</h4> </h4>
</div> </div>
</UiContainer> </UiContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: [ is_no_lang: boolean
{ page_name: string
text: string; front_section_lang: {
highlight: boolean; data: {
title: {
text: string
highlight: boolean
}[]
description: string
} }
]; id_front_section: number
description: string; id_lang: number
}; }[]
}; }
}>();
</script> </script>

69
components/section/InvestmentZone.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<UiContainer class="space-25-75"> <UiContainer class="space-25-75">
<h2 class="h2-bold-bounded"> <h2 class="h2-bold-bounded">
<span v-for="(item, index) in component.section_lang_data.main_title" :key="index" :class="[ <span v-for="(item, index) in component.front_section_lang[0].data.main_title" :key="index" :class="[
item.highlight item.highlight
? 'text-accent-green-light dark:text-accent-green-dark' ? 'text-accent-green-light dark:text-accent-green-dark'
: '', : '',
'inline', 'inline',
]"> ]">
{{ item.text }} {{ item.text }}
<span v-if="index !== component.section_lang_data.main_title.length - 1"> <span v-if="index !== component.front_section_lang[0].data.main_title.length - 1">
</span> </span>
</span> </span>
</h2> </h2>
<div class="space-25-55-75"> <div class="space-25-55-75">
<p>{{ component.section_lang_data.main_description }}</p> <p>{{ component.front_section_lang[0].data.main_description }}</p>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.section_title }} {{ component.front_section_lang[0].data.section_title }}
</h4> </h4>
</div> </div>
@ -59,21 +59,21 @@
<div class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55"> <div class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55">
<div class="flex flex-col space-y-[55px] sm:justify-between"> <div class="flex flex-col space-y-[55px] sm:justify-between">
<div class="space-25-55"> <div class="space-25-55">
<p>{{ component.section_lang_data.section_description }}</p> <p>{{ component.front_section_lang[0].data.section_description }}</p>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.info_title }} {{ component.front_section_lang[0].data.info_title }}
</h4> </h4>
<p>{{ component.section_lang_data.info_description }}</p> <p>{{ component.front_section_lang[0].data.info_description }}</p>
</div> </div>
<h4 class="h4-uppercase-bold-inter"> <h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.cta_title }} {{ component.front_section_lang[0].data.cta_title }}
</h4> </h4>
</div> </div>
<!-- calculator --> <!-- calculator -->
<div class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"> <div class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block">
<h2 class="h2-bold-bounded text-center mb-10 sm:mb-20"> <h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
{{ component.section_lang_data.calculator_title }} {{ component.front_section_lang[0].data.calculator_title }}
</h2> </h2>
<div class="mb-14 flex flex-col gap-8 sm:gap-14"> <div class="mb-14 flex flex-col gap-8 sm:gap-14">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
@ -106,7 +106,7 @@
</h2> </h2>
</div> </div>
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{ <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
component.section_lang_data.button component.front_section_lang[0].data.button
}}</UiButtonArrow> }}</UiButtonArrow>
</div> </div>
</div> </div>
@ -115,28 +115,35 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
main_title: [ is_no_lang: boolean
{ page_name: string
text: string; front_section_lang: {
highlight: boolean; data: {
main_title: {
text: string
highlight: boolean
}[]
main_description: string
section_title: string
section_description: string
info_title: string
info_description: string
cta_title: string
calculator_title: string
button: string
} }
]; id_front_section: number
main_description: string; id_lang: number
section_title: string; }[]
section_description: string; }
info_title: string; }>();
info_description: string;
cta_title: string;
calculator_title: string;
button: string;
};
};
const store = useStore(); const store = useStore();
const menuStore = useMenuStore(); const menuStore = useMenuStore();

31
components/section/MainBlocks.vue
View File

@ -4,7 +4,7 @@
> >
<div <div
class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0" class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
v-for="(item, index) in component.section_lang_data" v-for="(item, index) in component.front_section_lang[0].data"
:key="index" :key="index"
> >
<!-- xl --> <!-- xl -->
@ -26,7 +26,7 @@
<div <div
class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative" class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
:style="{ :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index]}?thumb=640x0')`, backgroundImage: `url('/api/public/file/${component.img[index]}_l.webp')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }"
@ -66,17 +66,22 @@
<script lang="ts" setup> <script lang="ts" setup>
type Component = { type Component = {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: [ component_name: string
{ is_no_lang: boolean
title: string; page_name: string
description: string; front_section_lang: {
sub_title: string; data: {
} title: string
]; description: string
}; sub_title: string
}[]
id_front_section: number
id_lang: number
}[]
}
defineProps<{ defineProps<{
component: Component; component: Component;

33
components/section/MainHero.vue
View File

@ -2,12 +2,12 @@
<UiContainer> <UiContainer>
<div class="space-y-[30px] sm:space-y-[53px]"> <div class="space-y-[30px] sm:space-y-[53px]">
<h1 class="h1"> <h1 class="h1">
{{ component.section_lang_data.title }} {{ component.front_section_lang[0].data.title }}
</h1> </h1>
<div <div
class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block" class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
:style="{ :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', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }"
@ -16,11 +16,11 @@
class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center" class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
> >
<h3 class="h4-uppercase-bold-inter sm:min-w-[45%]"> <h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
{{ component.section_lang_data.title_second }} {{ component.front_section_lang[0].data.title_second }}
</h3> </h3>
<div class="flex w-full items-start justify-center sm:justify-end"> <div class="flex w-full items-start justify-center sm:justify-end">
<UiButtonArrow :arrow="true" type="fill">{{ <UiButtonArrow :arrow="true" type="fill">{{
component.section_lang_data.button component.front_section_lang[0].data.button
}}</UiButtonArrow> }}</UiButtonArrow>
</div> </div>
</div> </div>
@ -29,15 +29,22 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ component: Component }>(); defineProps<{ component: Component }>();
type Component = { type Component = {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
title: string; is_no_lang: boolean
title_second: string; page_name: string
button: string; front_section_lang: {
}; data: {
title: string
button: string
title_second: string
}
id_front_section: number
id_lang: number
}[]
}; };
</script> </script>

22
components/section/MainProducts.vue
View File

@ -43,19 +43,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from "vue";
defineProps<{ component: Component }>(); defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: [ component_name: string
{ is_no_lang: boolean
title: string; page_name: string
description: string;
sub_title: string;
} }
]; }>();
};
const menuStore = useMenuStore() const menuStore = useMenuStore()
const itemCount = ref(4); const itemCount = ref(4);

2
composables/useMyFetch.ts
View File

@ -1,7 +1,7 @@
import { ofetch } from "ofetch"; import { ofetch } from "ofetch";
export interface RequestOptions<T> extends RequestInit { export interface RequestOptions<T> extends RequestInit {
onErrorOccured?: (error: Error, statusCode: number) => Promise<void>; onErrorOccured?: (error: Error, statusCode: number) => void;
onSuccess?: (data: T, statusCode: number) => void; onSuccess?: (data: T, statusCode: number) => void;
onStart?: () => void; onStart?: () => void;
} }

7
pages/[id]/[slug].vue
View File

@ -10,7 +10,7 @@
</template> </template>
<script setup> <script setup>
import { useStore } from "@/stores/store"; // import { useStore } from "@/stores/store";
const route = useRoute(); const route = useRoute();
const store = useStore(); const store = useStore();
const menuStore = useMenuStore(); const menuStore = useMenuStore();
@ -20,7 +20,8 @@ onMounted(() => {
menuStore.openMenu = false; menuStore.openMenu = false;
}); });
useHead(menuStore.headMeta); // useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id)
const componentsList = await store.getComponents(route.params.id);
</script> </script>

4
pages/index.vue
View File

@ -16,7 +16,7 @@ const menuStore = useMenuStore();
const route = useRoute(); const route = useRoute();
route.params.id = menuStore.defaultMenu.id_page; route.params.id = menuStore.defaultMenu.id;
route.params.slug = menuStore.defaultMenu.link_rewrite; route.params.slug = menuStore.defaultMenu.link_rewrite;
const store = useStore(); const store = useStore();
@ -26,6 +26,6 @@ onMounted(() => {
menuStore.openMenu = false; menuStore.openMenu = false;
}); });
useHead(menuStore.headMeta); // useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id); const componentsList = await store.getComponents(route.params.id);
</script> </script>

22
stores/frontSection.ts Normal file
View File

@ -0,0 +1,22 @@
export interface FrontPageSection {
id_front_page: number
id_position: number
id_section: number
front_section: FrontSection
}
export interface FrontSection {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: FrontSectionLang[]
}
export interface FrontSectionLang {
data: unknown
id_front_section: number
id_lang: number
}

91
stores/menuStore.ts
View File

@ -4,32 +4,39 @@ import type {
Currencies, Currencies,
Currency, Currency,
FooterListResponse, FooterListResponse,
FrontMenu,
GenericResponse, GenericResponse,
GenericResponseItems, GenericResponseItems,
MenuListResponse,
PBFooterItem, PBFooterItem,
PBMenuItem, UIFrontMenu,
UIMenuItem, UIMenuItem,
} from "~/types"; } from "~/types";
import { useStore } from "./store"; import { useStore } from "./store";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useMyFetch } from "#imports"; import { useMyFetch } from "#imports";
function buildTreeRecursive( // function buildTreeRecursive(
data: (PBMenuItem | UIMenuItem)[], // data: (PBMenuItem | UIMenuItem)[],
parentId: string // parentId: string
): UIMenuItem[] { // ): UIMenuItem[] {
const children = data.filter( // const children = data.filter(
(item): item is UIMenuItem => // (item): item is UIMenuItem =>
item.id_parent === parentId && !item.is_default // item.id_parent === parentId && !item.is_default
); // );
return children.map((item) => ({ // return children.map((item) => ({
...item, // ...item,
children: buildTreeRecursive(data, item.id), // children: buildTreeRecursive(data, item.id),
})); // }));
// }
function buildTreeRecursive(data: (FrontMenu | UIFrontMenu)[], parentId: number): UIFrontMenu[] {
const children = data.filter((item): item is UIFrontMenu => item.id_parent === parentId && !item.is_default);
return children.map((item) => ({ ...item, children: buildTreeRecursive(data, item.id) }));
} }
export const useMenuStore = defineStore("menuStore", () => { export const useMenuStore = defineStore("menuStore", () => {
const pb = usePB(); const pb = usePB();
const store = useStore(); const store = useStore();
@ -41,8 +48,11 @@ export const useMenuStore = defineStore("menuStore", () => {
const openDropDown = ref(false); const openDropDown = ref(false);
const defaultMenu = ref(); const defaultMenu = ref();
const menu = ref<UIMenuItem[]>([]); // const menu = ref<UIMenuItem[]>([]);
const menuItems = ref<MenuListResponse>(); // const menuItems = ref<MenuListResponse>();
const menu = ref<UIFrontMenu[]>([]);
const menuItems = ref<FrontMenu[]>();
const footerItems = ref<FooterListResponse>(); const footerItems = ref<FooterListResponse>();
const countryList = ref<Country[]>(); const countryList = ref<Country[]>();
@ -55,23 +65,44 @@ export const useMenuStore = defineStore("menuStore", () => {
const loadMenu = async () => { const loadMenu = async () => {
try { try {
menuItems.value = (await pb // menuItems.value = (await pb
.collection("menu_view") // .collection("menu_view")
.getList<PBMenuItem>(1, 50, { // .getList<PBMenuItem>(1, 50, {
filter: `id_lang="${$i18n.locale.value}"&&active=true`, // filter: `id_lang="${$i18n.locale.value}"&&active=true`,
sort: "position_id", // sort: "position_id",
})) as MenuListResponse; // })) as MenuListResponse;
const root = menuItems.value.items.find((item) => item.is_root); const { data } = await useMyFetch<GenericResponse<FrontMenu[]>>(`/api/public/front/menu`, {
defaultMenu.value = menuItems.value.items.find((item) => item.is_default); onErrorOccured: (err, status) => {
console.log(err, status);
},
// onSuccess(data) {
// console.log(data.data, "data");
// },
})
const root = data.find((item) => item.is_root) as UIFrontMenu;
defaultMenu.value = data.find((item) => item.is_default);
// console.log(menuNew, "data");
if (root) { if (root) {
menu.value = buildTreeRecursive(menuItems.value.items, root.id); menu.value = buildTreeRecursive(data, root.id);
store.currentPageID = menu.value[0]?.id_page || "";
} else { } else {
console.warn("Root menu item not found"); console.warn("Root menu item not found");
menu.value = []; menu.value = [];
} }
// const root = menuItems.value.items.find((item) => item.is_root);
// defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
// if (root) {
// menu.value = buildTreeRecursive(menuItems.value.items, root.id);
// store.currentPageID = menu.value[0]?.id_page || "";
// } else {
// console.warn("Root menu item not found");
// menu.value = [];
// }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -91,7 +122,7 @@ export const useMenuStore = defineStore("menuStore", () => {
const getCountryList = async () => { const getCountryList = async () => {
try { try {
const {data} = await useMyFetch<GenericResponse<Country[]>>( const { data } = await useMyFetch<GenericResponse<Country[]>>(
`/api/public/country/list`, `/api/public/country/list`,
{ {
headers: { headers: {
@ -116,7 +147,7 @@ export const useMenuStore = defineStore("menuStore", () => {
const getCurrencies = async () => { const getCurrencies = async () => {
try { try {
const {data} = await useMyFetch<GenericResponseItems<Currency[]>>( const { data } = await useMyFetch<GenericResponseItems<Currency[]>>(
`/api/public/currencies`, `/api/public/currencies`,
{ {
headers: { headers: {
@ -140,10 +171,10 @@ export const useMenuStore = defineStore("menuStore", () => {
} }
} }
const navigateToItem = (item?: UIMenuItem) => { const navigateToItem = (item?: UIFrontMenu) => {
if (item) { if (item) {
router.push({ router.push({
params: { slug: item.link_rewrite, id: item.id_page }, params: { slug: item.front_menu_lang[0].link_rewrite, id: item.id },
name: `id-slug___${$i18n.locale.value}`, name: `id-slug___${$i18n.locale.value}`,
}); });
openDropDown.value = false; openDropDown.value = false;

61
stores/store.ts
View File

@ -1,17 +1,16 @@
import { useMyFetch } from "#imports"; import { useMyFetch } from "#imports";
import { usePB } from "~/composables/usePB"; // import { usePB } from "~/composables/usePB";
import type { import type {
componentsListType, componentsListType,
GenericResponse, GenericResponse,
PBPageItem,
PlanPrediction, PlanPrediction,
} from "~/types"; } from "~/types";
// import { useI18n } from "vue-i18n"; // import { useI18n } from "vue-i18n";
export const useStore = defineStore("store", () => { export const useStore = defineStore("store", () => {
const currentPageID = ref(""); const currentPageID = ref("");
const pb = usePB(); // const pb = usePB();
const { $i18n } = useNuxtApp(); // const { $i18n } = useNuxtApp();
// calculator // calculator
const monthlySavings = ref(137); const monthlySavings = ref(137);
@ -23,17 +22,41 @@ export const useStore = defineStore("store", () => {
const email = ref(); const email = ref();
const password = ref(); const password = ref();
const components = ref({} as PBPageItem[]); const components = ref({} as FrontPageSection[]);
// const getSections = async (id: string) => {
// pb.cancelRequest("menu_view");
// components.value = (
// await pb.collection<PBPageItem>("page_view").getList(1, 50, {
// filter: `id="${id}"&&(section_lang_id_lang="${
// $i18n.locale.value
// }"||section_is_no_lang=${true})`,
// sort: "page_section_id_position",
// })
// ).items as PBPageItem[];
// };
const getSections = async (id: string) => { const getSections = async (id: string) => {
pb.cancelRequest("menu_view"); // if(!id){
components.value = ( // id = useMenuStore().defaultMenu.id
await pb.collection<PBPageItem>("page_view").getList(1, 50, { // }
filter: `id="${id}"&&(section_lang_id_lang="${ // console.log(useMenuStore().defaultMenu);
$i18n.locale.value
}"||section_is_no_lang=${true})`, const {data} = await useMyFetch<GenericResponse<FrontPageSection[]>>(
sort: "page_section_id_position", `/api/public/front/sections/${id}`
}) )
).items as PBPageItem[]; // console.log(data, id, "data");
components.value = data
// return data
// pb.cancelRequest("menu_view");
// components.value = (
// await pb.collection<PBPageItem>("page_view").getList(1, 50, {
// filter: `id="${id}"&&(section_lang_id_lang="${
// $i18n.locale.value
// }"||section_is_no_lang=${true})`,
// sort: "page_section_id_position",
// })
// ).items as PBPageItem[];
}; };
async function getComponents(): Promise<componentsListType[]> { async function getComponents(): Promise<componentsListType[]> {
@ -48,8 +71,8 @@ export const useStore = defineStore("store", () => {
const componentsList = [] as componentsListType[]; const componentsList = [] as componentsListType[];
for (const child of children) { for (const child of children) {
const componentName = child.component_name; const componentName = child.front_section.component_name;
const pageName = child.page_name; // const pageName = child.front_section.page_name;
if (!componentName) continue; if (!componentName) continue;
try { try {
@ -58,12 +81,12 @@ export const useStore = defineStore("store", () => {
).default; ).default;
const nonReactiveComponent = markRaw(componentInstance); const nonReactiveComponent = markRaw(componentInstance);
componentsList.push({ componentsList.push({
name: componentName, name: componentName,
component: child, component: child.front_section,
componentInstance: nonReactiveComponent, componentInstance: nonReactiveComponent,
data: child.section_lang_data, // data: child.front_section.front_section_lang[0].data || {} as unknown,
// data: {}
}); });
} catch (error) { } catch (error) {
console.error(`Failed to load component ${componentName}`, error); console.error(`Failed to load component ${componentName}`, error);

26
types/frontMenu.ts Normal file
View File

@ -0,0 +1,26 @@
export interface FrontMenu {
id: number
id_parent: number
active: boolean
position_id: number
id_front_page: number
is_default: boolean
is_root: boolean
url: string
front_menu_lang: FrontMenuLang[]
}
export interface FrontMenuLang {
name: string
id_lang: number
id_menu: number
link_title: string
meta_title: string
meta_description: string
link_rewrite: string
}
export interface UIFrontMenu extends FrontMenu {
children?: UIFrontMenu[];
}

53
types/index.ts
View File

@ -52,31 +52,31 @@ export interface PBFooterItem {
}>; }>;
} }
export interface PBPageItem { // export interface PBPageItem {
collectionId: string; // collectionId: string;
collectionName: string; // collectionName: string;
component_name: string; // component_name: string;
id: string; // id: string;
image_collection: string; // image_collection: string;
page_created: string; // page_created: string;
page_id: string; // page_id: string;
page_name: string; // page_name: string;
page_section_id_position: number; // page_section_id_position: number;
page_updated: string; // page_updated: string;
section_id: string; // section_id: string;
section_img: string[]; // section_img: string[];
section_lang_created: string; // section_lang_created: string;
section_lang_data: SectionLangData; // section_lang_data: SectionLangData;
section_lang_id_lang: string; // section_lang_id_lang: string;
section_name: string; // section_name: string;
} // }
export interface SectionLangData { // export interface SectionLangData {
title: string; // title: string;
description: string; // description: string;
button: string; // button: string;
button_call: string; // button_call: string;
} // }
export interface UIMenuItem extends PBMenuItem { export interface UIMenuItem extends PBMenuItem {
children?: UIMenuItem[]; children?: UIMenuItem[];
@ -92,9 +92,9 @@ export interface FooterListResponse extends ListResponse {
export type componentsListType = { export type componentsListType = {
name: string; name: string;
component: PBPageItem; component: FrontSection;
componentInstance: DefineComponent; componentInstance: DefineComponent;
data: SectionLangData; // data: unknown;
}; };
// menuStore // menuStore
@ -212,3 +212,4 @@ export type {
PeriodToFirstPiece, PeriodToFirstPiece,
} from "./planPrediction"; } from "./planPrediction";
export type { Product } from "./product"; export type { Product } from "./product";
export type { FrontMenu, FrontMenuLang, UIFrontMenu } from "./frontMenu";