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

View File

@ -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">

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,27 +66,31 @@
<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: {
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: [
@ -114,6 +118,11 @@ type Component = {
description: string;
description_second: string;
};
};
};
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

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 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;
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: []
},
section_3: {
title: string;
text_blocks: []
title: string
text_blocks: string[]
}
};
};
section_3: {
title: string
text_blocks: string[]
}
}
id_front_section: number
id_lang: number
}[]
}
}>();
</script>

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="[
<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>

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')`,
<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')`,
<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/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
}" />
<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')`,
<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>

View File

@ -4,42 +4,37 @@
<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')`,
<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">
<p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
{{ 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>
</div>
</p>
@ -47,12 +42,12 @@
</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">
<div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
<br>
</div>
</p>
@ -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>

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="[
<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')`,
<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="[
<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')`,
<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;
id_front_section: number
id_lang: number
}[]
}
];
section_2_description: string;
section_3_title: string;
section_3_description: string;
section_3_items: [];
section_4_title: string;
section_4_description: string;
};
};
}>();
</script>

View File

@ -2,8 +2,7 @@
<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="[
<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'
: '',
@ -12,13 +11,13 @@
{{ 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>

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%]">
@ -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: {
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>

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;
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;
}[];
}[];
};
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();

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">
@ -41,7 +41,7 @@
</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,12 +53,16 @@
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
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: [
{
@ -72,8 +76,13 @@ type Component = {
highlight: boolean;
}
];
};
};
}
id_front_section: number
id_lang: number
}[]
}
}>();
const active = ref<number>(0);
</script>

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="[
<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="{
<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')`,
<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')`,
<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.section_lang_data.description_second }}</p>
}" />
<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;
id_front_section: number
id_lang: number
}[]
}
];
description: string;
description_second: string;
sub_title_second: string;
};
};
}>();
</script>

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')`,
<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')`,
<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>

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="[
<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>

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,7 +106,7 @@
</h2>
</div>
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
component.section_lang_data.button
component.front_section_lang[0].data.button
}}</UiButtonArrow>
</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();

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;

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>

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);

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;
}

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>

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
}

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: {
@ -140,10 +171,10 @@ export const useMenuStore = defineStore("menuStore", () => {
}
}
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;

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[];
}

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";