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">
<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"
: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 />
{{ item.name }}
{{ item.front_menu_lang[0].name }}
</li>
</ul>
<ClientOnly v-if="!colorMode?.forced">
@ -60,16 +60,12 @@
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div v-for="(item, index) in menuStore.menu" @click="
() => {
menuStore.navigateToItem(item);
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 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']"
@click="() => { menuStore.navigateToItem(item); open = false; }">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
{{ item.front_menu_lang[0].name }}
</div>
<!-- <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">

105
components/section/AboutGoldImpact.vue
View File

@ -3,12 +3,12 @@
<div class="space-25-55-75">
<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">
{{ component.section_lang_data.section_1.title }}
{{ component.front_section_lang[0].data.section_1.title }}
</h2>
</div>
<div class="space-y-[40px] sm:space-55-75">
<div v-for="(item, index) in component.section_lang_data.section_1
.text_blocks" :key="index" class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
<div v-for="(item, index) in component.front_section_lang[0].data.section_1.text_blocks"
:key="index" class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
<div class="flex gap-[200px]">
<h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
<h4 class="hidden xl:block h4-uppercase-bold-inter w-full whitespace-nowrap">
@ -26,10 +26,10 @@
</div>
<div class="space-25-55-75">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_2.title }}
{{ component.front_section_lang[0].data.section_2.title }}
</h2>
<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">
<div>
<h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
@ -40,12 +40,12 @@
<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]">
<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',
backgroundPosition: 'center',
}" />
<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',
backgroundPosition: 'center',
}" />
@ -54,10 +54,10 @@
</div>
<div class="grid space-25-55 xl:grid-cols-2">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_3.title }}
{{ component.front_section_lang[0].data.section_3.title }}
</h2>
<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">
{{ item }}
</p>
@ -66,54 +66,63 @@
<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">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_4.title }}
{{ component.front_section_lang[0].data.section_4.title }}
</h2>
<p>{{ component.section_lang_data.section_4.description }}</p>
<p>{{ component.front_section_lang[0].data.section_4.description }}</p>
</div>
<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',
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>
</UiContainer>
</template>
<script setup lang="ts">
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
section_1: {
title: string;
text_blocks: [
{
block_title: string;
block_text: string;
}
];
};
section_2: {
title: string;
text_blocks: [
{
block_title: string;
block_text: string;
}
];
};
section_3: {
title: string;
text_blocks: [];
};
section_4: {
title: string;
description: string;
description_second: string;
};
};
};
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
section_1: {
title: string;
text_blocks: [
{
block_title: string;
block_text: string;
}
];
};
section_2: {
title: string;
text_blocks: [
{
block_title: string;
block_text: string;
}
];
};
section_3: {
title: string;
text_blocks: [];
};
section_4: {
title: string;
description: string;
description_second: string;
};
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

79
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">
<div>
<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>
<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>
<UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
</div>
<div class="flex gap-[10px] sm:gap-[30px]">
<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',
backgroundPosition: 'center',
}" />
<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',
backgroundPosition: 'center',
}" />
<div class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block"
: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',
}" />
@ -34,37 +34,40 @@
</div>
<div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block"
: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 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">
<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]">
<p v-for="(item, index) in component.section_lang_data.section_2.text_blocks" :key="index">{{ item
}}</p>
<p v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">{{ item
}}</p>
</div>
</div>
<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',
backgroundPosition: 'center',
}" />
</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]">
<h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{ component.section_lang_data.section_3.title }}</h2>
<div v-for="(item, index) in component.section_lang_data.section_3.text_blocks" :key="index"
<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]">
<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">
<p class="md:px-4 xl:p-0">{{ item }}</p>
<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',
backgroundPosition: 'center',
}" />
</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>
</div>
</div>
@ -72,23 +75,31 @@
</template>
<script setup lang="ts">
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
description: string;
button_label: string;
section_2: {
title: string;
text_blocks: []
},
section_3: {
title: string;
text_blocks: []
}
};
};
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string
description: string
section_2: {
title: string
text_blocks: string[]
}
section_3: {
title: string
text_blocks: string[]
}
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

78
components/section/AboutUsDifferent.vue
View File

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

142
components/section/AboutUsHistory.vue
View File

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

88
components/section/AboutUsMain.vue
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>

154
components/section/BusinessMain.vue
View File

@ -2,131 +2,117 @@
<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">
<h1 class="h1 text-center">
<span
v-for="(item, index) in component.section_lang_data.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.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.title.length - 1">
<span v-if="index !== component.front_section_lang[0].data.title.length - 1">
</span>
</span>
</h1>
<div
class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl" :style="{
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<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">
{{ component.section_lang_data.secondary_description }}
{{ component.front_section_lang[0].data.secondary_description }}
</h4>
</div>
</div>
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_1_title }}
{{ component.front_section_lang[0].data.section_1_title }}
</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 class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.section_2_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.section_2_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.title.length - 1">
<span v-if="index !== component.front_section_lang[0].data.title.length - 1">
</span>
</span>
</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 class="space-25-75">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_3_title }}
{{ component.front_section_lang[0].data.section_3_title }}
</h2>
<div
class="grid grid-cols-1 space-25-55 md:space-0 xl:gap-2 md:grid-cols-2"
>
<div 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]">
<p>{{ component.section_lang_data.section_3_description }}</p>
<p>{{ component.front_section_lang[0].data.section_3_description }}</p>
<div class="">
<p
v-for="(item, index) in component.section_lang_data
.section_3_items"
:key="index"
>
<p v-for="(item, index) in component.front_section_lang[0].data
.section_3_items" :key="index">
{{ index + 1 }}.
{{ item }}
</p>
</div>
</div>
<div
class="h-[315px] xl:h-full rounded-2xl"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="h-[315px] xl:h-full rounded-2xl" :style="{
backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2">
<div class="col-start-2 col-end-3 space-25-75 xl:space-0">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_4_title }}
{{ component.front_section_lang[0].data.section_4_title }}
</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>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
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: {
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
}
];
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: [];
section_4_title: string;
section_4_description: string;
};
};
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

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>

35
components/section/ContactMain.vue
View File

@ -1,8 +1,8 @@
<template>
<UiContainer class="space-y-[45px]">
<div class="xl:w-[70%] space-y-[25px]">
<h1 class="h1">{{ component.section_lang_data.title }}</h1>
<p v-html="component.section_lang_data.description"></p>
<h1 class="h1">{{ component.front_section_lang[0].data.title }}</h1>
<p v-html="component.front_section_lang[0].data.description"></p>
</div>
<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%]">
@ -18,7 +18,7 @@
<div class="w-full flex justify-center sm:justify-start">
<UiButtonArrow type="border">{{
$t("submit_form")
}}</UiButtonArrow>
}}</UiButtonArrow>
</div>
</div>
<div class="space-y-[30px] xl:px-[50px] sm:px-10">
@ -50,14 +50,23 @@
</UiContainer>
</template>
<script setup lang="ts">
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
description: string;
};
};
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string;
description: string;
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

41
components/section/FooterBlock.vue
View File

@ -3,7 +3,7 @@
<UiContainer class="flex flex-col gap-24">
<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">
<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]">
<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"
@ -22,24 +22,29 @@
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
children: {
title: string;
value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info';
link?: string;
}[];
}[];
};
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string
children: {
title: string
value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info'
link?: string
}[]
}[]
id_front_section: number
id_lang: number
}[]
}
}>();
const store = useStore();
const open = ref(false);
const menuStore = useMenuStore();
const colorMode = useColorMode();

59
components/section/InvestmentFaq.vue
View File

@ -1,10 +1,10 @@
<template>
<UiContainer>
<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 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"
class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer">
<h4 class="h4-uppercase-bold-inter">
@ -33,15 +33,15 @@
<svg class="min-w-5 h-5 dark:text-bg-light" viewBox="0 0 20 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path :d="active === index
? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
: 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
: 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
" fill="currentColor" />
</svg>
</div>
</div>
</div>
<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':
item.highlight,
}">
@ -53,27 +53,36 @@
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
faq: [
{
label: string;
content: string;
defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string;
faq: [
{
label: string;
content: string;
}
];
sub_title: [
{
text: string;
highlight: boolean;
}
];
}
];
sub_title: [
{
text: string;
highlight: boolean;
}
];
};
};
id_front_section: number
id_lang: number
}[]
}
}>();
const active = ref<number>(0);
</script>

118
components/section/InvestmentMain.vue
View File

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

119
components/section/InvestmentSave.vue
View File

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

55
components/section/InvestmentWhy.vue
View File

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

71
components/section/InvestmentZone.vue
View File

@ -1,22 +1,22 @@
<template>
<UiContainer class="space-25-75">
<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
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]">
{{ 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>
</h2>
<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">
{{ component.section_lang_data.section_title }}
{{ component.front_section_lang[0].data.section_title }}
</h4>
</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 space-y-[55px] sm:justify-between">
<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">
{{ component.section_lang_data.info_title }}
{{ component.front_section_lang[0].data.info_title }}
</h4>
<p>{{ component.section_lang_data.info_description }}</p>
<p>{{ component.front_section_lang[0].data.info_description }}</p>
</div>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.cta_title }}
{{ component.front_section_lang[0].data.cta_title }}
</h4>
</div>
<!-- calculator -->
<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">
{{ component.section_lang_data.calculator_title }}
{{ component.front_section_lang[0].data.calculator_title }}
</h2>
<div class="mb-14 flex flex-col gap-8 sm:gap-14">
<div class="flex flex-col gap-4">
@ -106,8 +106,8 @@
</h2>
</div>
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
component.section_lang_data.button
}}</UiButtonArrow>
component.front_section_lang[0].data.button
}}</UiButtonArrow>
</div>
</div>
</div>
@ -115,28 +115,35 @@
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
main_title: [
{
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: {
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
}
];
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
id_lang: number
}[]
}
}>();
const store = useStore();
const menuStore = useMenuStore();

31
components/section/MainBlocks.vue
View File

@ -4,7 +4,7 @@
>
<div
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"
>
<!-- xl -->
@ -26,7 +26,7 @@
<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"
: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',
backgroundPosition: 'center',
}"
@ -66,17 +66,22 @@
<script lang="ts" setup>
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: [
{
title: string;
description: string;
sub_title: string;
}
];
};
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string
description: string
sub_title: string
}[]
id_front_section: number
id_lang: number
}[]
}
defineProps<{
component: Component;

33
components/section/MainHero.vue
View File

@ -2,12 +2,12 @@
<UiContainer>
<div class="space-y-[30px] sm:space-y-[53px]">
<h1 class="h1">
{{ component.section_lang_data.title }}
{{ component.front_section_lang[0].data.title }}
</h1>
<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"
: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',
}"
@ -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"
>
<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>
<div class="flex w-full items-start justify-center sm:justify-end">
<UiButtonArrow :arrow="true" type="fill">{{
component.section_lang_data.button
component.front_section_lang[0].data.button
}}</UiButtonArrow>
</div>
</div>
@ -29,15 +29,22 @@
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
title_second: string;
button: string;
};
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string
button: string
title_second: string
}
id_front_section: number
id_lang: number
}[]
};
</script>

24
components/section/MainProducts.vue
View File

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

2
composables/useMyFetch.ts
View File

@ -1,7 +1,7 @@
import { ofetch } from "ofetch";
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;
onStart?: () => void;
}

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

@ -10,7 +10,7 @@
</template>
<script setup>
import { useStore } from "@/stores/store";
// import { useStore } from "@/stores/store";
const route = useRoute();
const store = useStore();
const menuStore = useMenuStore();
@ -20,7 +20,8 @@ onMounted(() => {
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>

4
pages/index.vue
View File

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

93
stores/menuStore.ts
View File

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

61
stores/store.ts
View File

@ -1,17 +1,16 @@
import { useMyFetch } from "#imports";
import { usePB } from "~/composables/usePB";
// import { usePB } from "~/composables/usePB";
import type {
componentsListType,
GenericResponse,
PBPageItem,
PlanPrediction,
} from "~/types";
// import { useI18n } from "vue-i18n";
export const useStore = defineStore("store", () => {
const currentPageID = ref("");
const pb = usePB();
const { $i18n } = useNuxtApp();
// const pb = usePB();
// const { $i18n } = useNuxtApp();
// calculator
const monthlySavings = ref(137);
@ -23,17 +22,41 @@ export const useStore = defineStore("store", () => {
const email = 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) => {
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[];
// if(!id){
// id = useMenuStore().defaultMenu.id
// }
// console.log(useMenuStore().defaultMenu);
const {data} = await useMyFetch<GenericResponse<FrontPageSection[]>>(
`/api/public/front/sections/${id}`
)
// 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[]> {
@ -48,8 +71,8 @@ export const useStore = defineStore("store", () => {
const componentsList = [] as componentsListType[];
for (const child of children) {
const componentName = child.component_name;
const pageName = child.page_name;
const componentName = child.front_section.component_name;
// const pageName = child.front_section.page_name;
if (!componentName) continue;
try {
@ -58,12 +81,12 @@ export const useStore = defineStore("store", () => {
).default;
const nonReactiveComponent = markRaw(componentInstance);
componentsList.push({
name: componentName,
component: child,
component: child.front_section,
componentInstance: nonReactiveComponent,
data: child.section_lang_data,
// data: child.front_section.front_section_lang[0].data || {} as unknown,
// data: {}
});
} catch (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 {
collectionId: string;
collectionName: string;
component_name: string;
id: string;
image_collection: string;
page_created: string;
page_id: string;
page_name: string;
page_section_id_position: number;
page_updated: string;
section_id: string;
section_img: string[];
section_lang_created: string;
section_lang_data: SectionLangData;
section_lang_id_lang: string;
section_name: string;
}
// export interface PBPageItem {
// collectionId: string;
// collectionName: string;
// component_name: string;
// id: string;
// image_collection: string;
// page_created: string;
// page_id: string;
// page_name: string;
// page_section_id_position: number;
// page_updated: string;
// section_id: string;
// section_img: string[];
// section_lang_created: string;
// section_lang_data: SectionLangData;
// section_lang_id_lang: string;
// section_name: string;
// }
export interface SectionLangData {
title: string;
description: string;
button: string;
button_call: string;
}
// export interface SectionLangData {
// title: string;
// description: string;
// button: string;
// button_call: string;
// }
export interface UIMenuItem extends PBMenuItem {
children?: UIMenuItem[];
@ -92,9 +92,9 @@ export interface FooterListResponse extends ListResponse {
export type componentsListType = {
name: string;
component: PBPageItem;
component: FrontSection;
componentInstance: DefineComponent;
data: SectionLangData;
// data: unknown;
};
// menuStore
@ -212,3 +212,4 @@ export type {
PeriodToFirstPiece,
} from "./planPrediction";
export type { Product } from "./product";
export type { FrontMenu, FrontMenuLang, UIFrontMenu } from "./frontMenu";