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

Compare commits

base: yakovenko_arina:98a4125804048af00f139090eee1d84d4eebb3f1
Branches Tags
yakovenko_arina:main yakovenko_arina:img_button
...
compare: yakovenko_arina:4fc12ff9bf4725eaf58bbc2eebc2732034e338de
Branches Tags
yakovenko_arina:main yakovenko_arina:img_button

2 Commits
98a4125804 ... 4fc12ff9bf

Author SHA1 Message Date
Arina Yakovenko
4fc12ff9bf translations 2025-06-25 13:53:36 +02:00
Marek Goc
9407253e69 fix data 2025-06-25 12:43:42 +02:00
34 changed files with 1069 additions and 864 deletions
Expand all files Collapse all files

3
assets/icons/cart.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.2724 22.8291C5.2724 23.0552 5.31265 23.2791 5.39086 23.488C5.46907 23.6969 5.5837 23.8867 5.7282 24.0466C5.87271 24.2065 6.04427 24.3333 6.23308 24.4198C6.42189 24.5064 6.62426 24.5509 6.82862 24.5509C7.24136 24.5509 7.63719 24.3695 7.92904 24.0466C8.07355 23.8867 8.18818 23.6969 8.26639 23.488C8.34459 23.2791 8.38485 23.0552 8.38485 22.8291C8.38485 22.3724 8.22089 21.9345 7.92904 21.6116C7.63719 21.2887 7.24136 21.1073 6.82862 21.1073C6.41588 21.1073 6.02005 21.2887 5.7282 21.6116C5.43636 21.9345 5.2724 22.3724 5.2724 22.8291ZM19.2784 22.8291C19.2784 23.0552 19.3187 23.2791 19.3969 23.488C19.4751 23.6969 19.5897 23.8867 19.7342 24.0466C19.8787 24.2065 20.0503 24.3333 20.2391 24.4198C20.4279 24.5064 20.6303 24.5509 20.8346 24.5509C21.2474 24.5509 21.6432 24.3695 21.9351 24.0466C22.0796 23.8867 22.1942 23.6969 22.2724 23.488C22.3506 23.2791 22.3909 23.0552 22.3909 22.8291C22.3909 22.3724 22.2269 21.9345 21.9351 21.6116C21.6432 21.2887 21.2474 21.1073 20.8346 21.1073C20.4219 21.1073 20.0261 21.2887 19.7342 21.6116C19.4424 21.9345 19.2784 22.3724 19.2784 22.8291ZM0.558594 1.30623C0.558594 1.53456 0.640573 1.75353 0.786498 1.91498C0.932422 2.07644 1.13034 2.16714 1.33671 2.16714H2.95362L3.92004 6.74032L5.2724 14.2199C5.2724 14.2819 5.29885 14.3353 5.30508 14.3956L4.51296 18.3386C4.48735 18.4644 4.4877 18.595 4.51399 18.7206C4.54028 18.8463 4.59182 18.9638 4.66479 19.0644C4.73776 19.165 4.83027 19.2461 4.93547 19.3016C5.04066 19.3572 5.15582 19.3859 5.2724 19.3854H22.9262C23.1326 19.3854 23.3305 19.2947 23.4764 19.1333C23.6223 18.9718 23.7043 18.7528 23.7043 18.5245C23.7043 18.2962 23.6223 18.0772 23.4764 17.9158C23.3305 17.7543 23.1326 17.6636 22.9262 17.6636H6.24348L6.59986 15.8901C6.67767 15.9039 6.7477 15.9418 6.82862 15.9418H21.0136C21.8726 15.9418 22.3909 15.7541 22.8048 14.6504L25.3321 6.07225C25.771 4.53466 24.8077 3.88897 23.9471 3.88897H5.2724C5.15101 3.88897 5.04519 3.93546 4.93158 3.96473L4.32777 1.10994C4.28774 0.920801 4.19107 0.752202 4.05348 0.63154C3.91589 0.510878 3.74546 0.445247 3.56989 0.445313H1.33671C1.13034 0.445313 0.932422 0.536016 0.786498 0.697469C0.640573 0.858921 0.558594 1.0779 0.558594 1.30623ZM5.30352 5.6108H23.8304L21.3466 14.046C21.3171 14.1201 21.2922 14.1735 21.2735 14.2096C21.2221 14.2148 21.1412 14.2199 21.0136 14.2199H6.82862V14.0495L6.79905 13.8825L5.30352 5.6108Z" fill="#FFFEFB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

65
components/CartPopup.vue
View File

@ -1,45 +1,66 @@
<template> <template>
<div ref="dropdownRef"> <div ref="dropdownRef">
<i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i> <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<div v-if="openCart" class="max-w-[1067px] w-full absolute top-[130px] z-50 right-20"> <div class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[140px]">
<div <div v-if="openCart" class="xl:w-[55%] md:w-[70%] w-full px-4 md:px-0">
class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full space-y-[55px]"> <div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
<div class="pb-[25px] border-b border-block" v-if="productStore.productList"> class="w-full p-[25px] sm:p-[50px] first:pt-0 bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-full space-y-[55px]">
<div class="flex items-center h-[205px]"> <div>
<div class="w-[205px] h-full flex items-center justify-center"> <!-- product -->
<img :src="`https://www.yourgold.cz/api/public/file/${productStore.productList[0]?.cover_picture_uuid}.webp`" <div v-for="item in productStore.cart.cart_items" class="py-[25px] border-b border-block">
alt="pics" class="w-auto h-full" /> <div class="flex items-center max-h-[205px]">
<div class="min-w-[100px] sm:w-[205px] flex items-center justify-center">
<!-- <img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
alt="pics" class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" /> -->
</div> </div>
<div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]" <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px">
@click="productStore.addToCart(productStore.productList[0])">
<div class="w-full flex items-center justify-between">
<h3 <h3
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark max-w-[250px]"> class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[250px]">
{{ productStore.productList[0]?.name }} {{ item.name }}
</h3> </h3>
<i @click="productStore.deleteCartItem(item.cart_item_id)"
class="uil uil-trash-alt text-2xl cursor-pointer"></i>
</div>
<div class="flex flex-col gap-[10px]"> <div class="flex flex-col gap-[10px]">
<p <p
class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"> class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
{{ productStore.productList[0]?.formatted_price }} {{ item.total_price }}
</p> </p>
<div class="flex items-center gap-4 text-xl"> <div class="flex items-center gap-4 text-xl">
<p class="cursor-pointer">-</p> <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
<div class="w-11 min-h-11 border border-button flex items-center justify-center">{{ @click="productStore.decrementCartItem(item.cart_item_id)"></i>
count }} <div
class="w-11 min-h-11 border border-button flex items-center justify-center rounded-[4px]">
{{ item.quantity }}
</div>
<i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
@click="productStore.incrementCartItem(item.product_id)"></i>
</div> </div>
<p>+</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h4 class="h4-uppercase-bold-inter">Celková částka</h4> <h4 class="h4-uppercase-bold-inter">{{ $t('total_amount') }}</h4>
<p <p
class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"> class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
{{ productStore.productList[0]?.formatted_price }} {{ productStore.cart.total_value }}
</p> </p>
</div> </div>
<UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">Přejít k pokladně</UiButtonArrow> <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">{{ $t('to_checkout') }}
</UiButtonArrow>
</div>
<div v-else
class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-[400px] flex items-center justify-center">
<div
class="border border-block inline-flex items-center justify-center w-[30%] h-[200px] rounded-[8px]">
<h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-xl">
košík je prázdný</h4>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
components/CountryCurrencySelector.vue
View File

@ -6,7 +6,7 @@
{{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }} {{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }}
</UButton> </UButton>
<div class="absolute ring-0 top-12 p-0 m-0 border-none w-48" v-if="isOpen"> <div class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50" v-if="isOpen">
<div class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark"> <div class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark">
<div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark"> <div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
<div class="flex flex-col items-start gap-1"> <div class="flex flex-col items-start gap-1">

32
components/HeaderBlock.vue
View File

@ -6,9 +6,9 @@
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex"> <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
<ul class="flex items-center justify-between whitespace-nowrap w-full"> <ul class="flex items-center justify-between whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index" <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']"> :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
0{{ index + 1 }} <br /> 0{{ index + 1 }} <br />
{{ item.name }} {{ item.front_menu_lang[0].name }}
</li> </li>
</ul> </ul>
<ClientOnly v-if="!colorMode?.forced"> <ClientOnly v-if="!colorMode?.forced">
@ -25,8 +25,12 @@
<CountryCurrencySelector /> <CountryCurrencySelector />
</div> </div>
<ThemeSwitcher /> <ThemeSwitcher />
<button @click="menuStore.navigateToShop" <button @click="menuStore.navigateToShop" :class="[
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter"> 'cursor-pointer transition-all text-inter',
menuStore.menuItems?.find(item => (item.id_page === route.params.id) && (item.page_name === 'shop'))
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
]">
{{ $t('eshop') }} {{ $t('eshop') }}
</button> </button>
</div> </div>
@ -45,7 +49,7 @@
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]"> <div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[31px] cursor-pointer"></i> <i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i> <CartPopup />
</div> </div>
<div class="flex"> <div class="flex">
<LangSwitcher /> <LangSwitcher />
@ -60,16 +64,12 @@
<template #content> <template #content>
<div class="w-full border-border border-b pt-6 pb-8"> <div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]"> <UiContainer class="flex flex-col gap-[30px]">
<div v-for="(item, index) in menuStore.menu" @click=" <div v-for="(item, index) in menuStore.menu" :key="index"
() => { :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']"
menuStore.navigateToItem(item); @click="() => { menuStore.navigateToItem(item); open = false; }">
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter"> <div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span> <span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }} {{ item.front_menu_lang[0].name }}
</div> </div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> --> <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -95,7 +95,7 @@
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]"> <div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[31px] cursor-pointer"></i> <i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i> <CartPopup />
</div> </div>
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i> <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
</div> </div>
@ -156,7 +156,7 @@
@click="menuStore.navigateToItem()" /> @click="menuStore.navigateToItem()" />
</ClientOnly> </ClientOnly>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i> <CartPopup />
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i> <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
</div> </div>
</UiContainer> </UiContainer>
@ -218,7 +218,7 @@ const productStore = useProductStore();
const open = ref(false); const open = ref(false);
const colorMode = useColorMode(); const colorMode = useColorMode();
// productStore.getCart() productStore.getCart()
const route = useRoute() const route = useRoute()
const isDark = computed({ const isDark = computed({

51
components/section/AboutGoldImpact.vue
View File

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

73
components/section/AboutGoldMain.vue
View File

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

66
components/section/AboutUsDifferent.vue
View File

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

126
components/section/AboutUsHistory.vue
View File

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

74
components/section/AboutUsMain.vue
View File

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

128
components/section/BusinessMain.vue
View File

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

101
components/section/BusinessReasons.vue
View File

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

29
components/section/ContactMain.vue
View File

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

39
components/section/FooterBlock.vue
View File

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

31
components/section/InvestmentFaq.vue
View File

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

96
components/section/InvestmentMain.vue
View File

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

113
components/section/InvestmentSave.vue
View File

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

47
components/section/InvestmentWhy.vue
View File

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

69
components/section/InvestmentZone.vue
View File

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

31
components/section/MainBlocks.vue
View File

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

33
components/section/MainHero.vue
View File

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

22
components/section/MainProducts.vue
View File

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

12
components/section/Product.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div <div
class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]"> class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]">
<img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics" <img onerror="this.src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?cs=srgb&dl=pexels-souvenirpixels-414612.jpg&fm=jpg'" :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" /> class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" />
<div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]" <div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]"
@click="productStore.addToCart(props.product)"> @click="productStore.incrementCartItem(props.product?.id)">
<div class="flex flex-col gap-[7px] sm:gap-[15px] w-full"> <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
<h3 class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark"> <h3 class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
{{ props.product?.name }} {{ props.product?.name }}
@ -19,7 +19,7 @@
</p> </p>
<button <button
class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1"> class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
<i class="uil uil-shopping-cart text-[10px] sm:text-[25px] md:text-2xl cursor-pointer"></i> <i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"></i>
</button> </button>
</div> </div>
</div> </div>
@ -27,15 +27,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import imgUrl from "~/utils/imgUrl";
const props = defineProps({ const props = defineProps({
product: Object, product: Object,
}); });
const productStore = useProductStore() const productStore = useProductStore()
// const addToCartAndPreventNavigation = (event: any) => {
// event.preventDefault();
// useCartStore().addToCart(props.product);
// };
</script> </script>

35
components/section/ShopMain.vue
View File

@ -137,13 +137,11 @@
<div class="flex flex-col sm:flex-row gap-[25px]"> <div class="flex flex-col sm:flex-row gap-[25px]">
<div class="flex flex-col justify-between gap-[25px]"> <div class="flex flex-col justify-between gap-[25px]">
<h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold"> <h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold">
{{ component.section_lang_data.title }} {{ component.front_section_lang[0].data.title }}
</h4> </h4>
<p>{{ component.section_lang_data.description }}</p> <p>{{ component.front_section_lang[0].data.description }}</p>
</div> </div>
<img class="max-w-[150px] mx-auto" <img class="max-w-[150px] mx-auto" :src="`/api/public/file/${component.img[0]}_m.webp')`" />
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`"
alt="" />
</div> </div>
</div> </div>
@ -171,16 +169,27 @@ import Product from "./Product.vue";
import type { Feature, GenericResponse, GenericResponseChildren, GenericResponseItems, ProductType } from "~/types"; import type { Feature, GenericResponse, GenericResponseChildren, GenericResponseItems, ProductType } from "~/types";
import CategoryTree from "./CategoryTree.vue"; import CategoryTree from "./CategoryTree.vue";
defineProps<{ component: Component }>(); const props = defineProps<{
type Component = { component: {
image_collection: string; id: number
section_id: string; name: string
section_img: string; img: string[]
section_lang_data: { component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string; title: string;
description: string description: string
}; }
}; id_front_section: number
id_lang: number
}[]
}
}>();
console.log(props.component);
const openCategories = ref(false); const openCategories = ref(false);
const isInfo = ref<boolean>(true); const isInfo = ref<boolean>(true);

2
composables/useMyFetch.ts
View File

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

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

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

4
pages/index.vue
View File

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

19
plugins/i18n.ts
View File

@ -1,5 +1,6 @@
import type { VueI18n } from "vue-i18n"; import type { VueI18n } from "vue-i18n";
import { usePB } from "~/composables/usePB"; import { usePB } from "~/composables/usePB";
import type { GenericResponse } from "~/types";
export default defineNuxtPlugin(async (nuxtApp) => { export default defineNuxtPlugin(async (nuxtApp) => {
const loaded = [] as Array<string>; const loaded = [] as Array<string>;
@ -11,16 +12,16 @@ export default defineNuxtPlugin(async (nuxtApp) => {
if (loaded.includes(newLocale)) return; if (loaded.includes(newLocale)) return;
try { try {
const translation = await pb.collection("translation").getList(1, 1, { // const translation = await pb.collection("translation").getList(1, 1, {
expand: "id_lang", // expand: "id_lang",
filter: `id_lang.iso='${newLocale}'`, // filter: `id_lang.iso='${newLocale}'`,
}); // });
if (translation.totalItems === 1) { const { data } = await useMyFetch<GenericResponse<object>>(
i18n.setLocaleMessage(newLocale, translation.items[0].data); "/api/public/front/translation"
} else { );
i18n.setLocaleMessage(newLocale, {});
} i18n.setLocaleMessage(newLocale, data);
loaded.push(newLocale); loaded.push(newLocale);
} catch (err) { } catch (err) {

1
plugins/initLoad.ts
View File

@ -3,7 +3,6 @@ import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin(async () => { export default defineNuxtPlugin(async () => {
const menuStore = useMenuStore(); const menuStore = useMenuStore();
await menuStore.loadMenu(); await menuStore.loadMenu();
await menuStore.loadFooter();
await menuStore.getCountryList(); await menuStore.getCountryList();
await menuStore.getCurrencies(); await menuStore.getCurrencies();
}); });

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
}

139
stores/menuStore.ts
View File

@ -4,23 +4,38 @@ import type {
Currencies, Currencies,
Currency, Currency,
FooterListResponse, FooterListResponse,
FrontMenu,
GenericResponse, GenericResponse,
GenericResponseItems, GenericResponseItems,
MenuListResponse,
PBFooterItem, PBFooterItem,
PBMenuItem, UIFrontMenu,
UIMenuItem, UIMenuItem,
} from "~/types"; } from "~/types";
import { useStore } from "./store"; import { useStore } from "./store";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useMyFetch } from "#imports"; import { useMyFetch } from "#imports";
// function buildTreeRecursive(
// 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),
// }));
// }
function buildTreeRecursive( function buildTreeRecursive(
data: (PBMenuItem | UIMenuItem)[], data: (FrontMenu | UIFrontMenu)[],
parentId: string parentId: number
): UIMenuItem[] { ): UIFrontMenu[] {
const children = data.filter( const children = data.filter(
(item): item is UIMenuItem => (item): item is UIFrontMenu =>
item.id_parent === parentId && !item.is_default item.id_parent === parentId && !item.is_default
); );
@ -41,8 +56,11 @@ export const useMenuStore = defineStore("menuStore", () => {
const openDropDown = ref(false); const openDropDown = ref(false);
const defaultMenu = ref(); const defaultMenu = ref();
const menu = ref<UIMenuItem[]>([]); // const menu = ref<UIMenuItem[]>([]);
const menuItems = ref<MenuListResponse>(); // const menuItems = ref<MenuListResponse>();
const menu = ref<UIFrontMenu[]>([]);
const menuItems = ref<FrontMenu[]>();
const footerItems = ref<FooterListResponse>(); const footerItems = ref<FooterListResponse>();
const countryList = ref<Country[]>(); const countryList = ref<Country[]>();
@ -55,35 +73,48 @@ export const useMenuStore = defineStore("menuStore", () => {
const loadMenu = async () => { const loadMenu = async () => {
try { try {
menuItems.value = (await pb // menuItems.value = (await pb
.collection("menu_view") // .collection("menu_view")
.getList<PBMenuItem>(1, 50, { // .getList<PBMenuItem>(1, 50, {
filter: `id_lang="${$i18n.locale.value}"&&active=true`, // filter: `id_lang="${$i18n.locale.value}"&&active=true`,
sort: "position_id", // sort: "position_id",
})) as MenuListResponse; // })) as MenuListResponse;
const root = menuItems.value.items.find((item) => item.is_root); const { data } = await useMyFetch<GenericResponse<FrontMenu[]>>(
defaultMenu.value = menuItems.value.items.find((item) => item.is_default); `/api/public/front/menu`,
{
onErrorOccured: (err, status) => {
console.log(err, status);
},
// onSuccess(data) {
// console.log(data.data, "data");
// },
}
);
menuItems.value = data;
const root = data.find((item) => item.is_root) as UIFrontMenu;
defaultMenu.value = data.find((item) => item.is_default);
// console.log(menuNew, "data");
if (root) { if (root) {
menu.value = buildTreeRecursive(menuItems.value.items, root.id); menu.value = buildTreeRecursive(data, root.id);
store.currentPageID = menu.value[0]?.id_page || "";
} else { } else {
console.warn("Root menu item not found"); console.warn("Root menu item not found");
menu.value = []; menu.value = [];
} }
} catch (error) {
console.log(error);
}
};
const loadFooter = async () => { // const root = menuItems.value.items.find((item) => item.is_root);
try { // defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
footerItems.value = (await pb
.collection("footer_view") // if (root) {
.getList<PBFooterItem>(1, 50, { // menu.value = buildTreeRecursive(menuItems.value.items, root.id);
filter: `id_lang="${$i18n.locale.value}"`, // store.currentPageID = menu.value[0]?.id_page || "";
})) as FooterListResponse; // } else {
// console.warn("Root menu item not found");
// menu.value = [];
// }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -91,7 +122,7 @@ export const useMenuStore = defineStore("menuStore", () => {
const getCountryList = async () => { const getCountryList = async () => {
try { try {
const {data} = await useMyFetch<GenericResponse<Country[]>>( const { data } = await useMyFetch<GenericResponse<Country[]>>(
`/api/public/country/list`, `/api/public/country/list`,
{ {
headers: { headers: {
@ -105,24 +136,24 @@ export const useMenuStore = defineStore("menuStore", () => {
// } // }
// const data = await res.json(); // const data = await res.json();
countryList.value = data countryList.value = data;
if (countryList.value) if (countryList.value) selectedPhoneCountry.value = countryList.value[0];
selectedPhoneCountry.value = countryList.value[0]
} catch (error) { } catch (error) {
console.error("getList error:", error); console.error("getList error:", error);
} }
} };
const getCurrencies = async () => { const getCurrencies = async () => {
try { try {
const {data} = await useMyFetch<GenericResponseItems<Currency[]>>( const { data } = await useMyFetch<GenericResponseItems<Currency[]>>(
`/api/public/currencies`, `/api/public/currencies`,
{ {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) }, onErrorOccured: (_, status) => {
throw new Error(`HTTP error: ${status}`);
},
} }
); );
@ -131,28 +162,26 @@ export const useMenuStore = defineStore("menuStore", () => {
// } // }
// const data = await res.json(); // const data = await res.json();
currencies.value = data.items currencies.value = data.items;
// console.log(data.items, "data"); // console.log(data.items, "data");
} catch (error) { } catch (error) {
console.error("getList error:", error); console.error("getList error:", error);
} }
} };
const navigateToItem = (item?: UIMenuItem) => { const navigateToItem = (item?: UIFrontMenu) => {
if (item) { if (item) {
router.push({ router.push({
params: { slug: item.link_rewrite, id: item.id_page }, params: { slug: item.front_menu_lang[0].link_rewrite, id: item.id },
name: `id-slug___${$i18n.locale.value}`, name: `id-slug___${$i18n.locale.value}`,
}); });
openDropDown.value = false; openDropDown.value = false;
} } else {
else {
router.push({ router.push({
params: { params: {
slug: defaultMenu.value.link_rewrite, slug: defaultMenu.value.front_menu_lang[0].link_rewrite,
id: defaultMenu.value.id_page, id: defaultMenu.value.id,
}, },
name: `id-slug___${$i18n.locale.value}`, name: `id-slug___${$i18n.locale.value}`,
}); });
@ -160,7 +189,9 @@ export const useMenuStore = defineStore("menuStore", () => {
}; };
function navigateToShop() { function navigateToShop() {
navigateToItem(menuItems.value?.items.find(item => item.page_name === 'shop')) console.log(menuItems.value);
navigateToItem(menuItems.value?.find((item) => item.id === 5));
} }
// function redirectToPage(link_rewrite: string) { // function redirectToPage(link_rewrite: string) {
@ -187,8 +218,10 @@ export const useMenuStore = defineStore("menuStore", () => {
let img = ""; let img = "";
for (const s in store.components) { for (const s in store.components) {
store.components[s].section_img.map((item) => { store.components[s].section_img.map((item) => {
img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${req?.headers.get("x-forwarded-host") || req?.headers.get("host") img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
}/api/files/${store.components[s].image_collection}/${store.components[s].section_id req?.headers.get("x-forwarded-host") || req?.headers.get("host")
}/api/files/${store.components[s].image_collection}/${
store.components[s].section_id
}/${item}?thumb=400x0`; }/${item}?thumb=400x0`;
}); });
if (img.length > 0) return img; if (img.length > 0) return img;
@ -242,12 +275,11 @@ export const useMenuStore = defineStore("menuStore", () => {
watch($i18n.locale, async () => { watch($i18n.locale, async () => {
await loadMenu(); await loadMenu();
await loadFooter();
}); });
watch(selectedCurrency, () => { watch(selectedCurrency, () => {
store.getCalculator() store.getCalculator();
}) });
return { return {
menu, menu,
menuItems, menuItems,
@ -263,10 +295,9 @@ export const useMenuStore = defineStore("menuStore", () => {
headMeta, headMeta,
navigateToShop, navigateToShop,
loadMenu, loadMenu,
loadFooter,
getCountryList, getCountryList,
navigateToItem, navigateToItem,
// redirectToPage, // redirectToPage,
getCurrencies getCurrencies,
}; };
}); });

62
stores/productStore.ts
View File

@ -1,6 +1,7 @@
import { NuxtErrorBoundary } from "#components"; import { NuxtErrorBoundary } from "#components";
import { useMyFetch } from "#imports"; import { useMyFetch } from "#imports";
import type { import type {
CartItem,
GenericResponse, GenericResponse,
GenericResponseChildren, GenericResponseChildren,
GenericResponseItems, GenericResponseItems,
@ -59,10 +60,10 @@ export const useProductStore = defineStore("productStore", () => {
} }
} }
async function addToCart(product: Product) { async function incrementCartItem(id: number) {
try { try {
const { data } = await useMyFetch<GenericResponse<UserCart>>( await useMyFetch(
`/api/public/user/cart/item/add/${product.id}/1`, `/api/public/user/cart/item/add/${id}/1`,
{ {
method: "PUT", method: "PUT",
headers: { headers: {
@ -73,11 +74,55 @@ export const useProductStore = defineStore("productStore", () => {
}, },
} }
); );
getCart();
} catch (error) { } catch (error) {
console.error("getList error:", error); console.error("getList error:", error);
} }
} }
async function decrementCartItem(id: number) {
try {
await useMyFetch(
`/api/public/user/cart/item/subtract/${id}/1`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
onErrorOccured: (_, status) => {
throw new Error(`HTTP error: ${status}`);
},
}
);
getCart();
} catch (error) {
console.error("removeFromCart error:", error);
}
}
async function deleteCartItem(id: number) {
try {
await useMyFetch(
`/api/public/user/cart/item/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
onErrorOccured: (_, status) => {
throw new Error(`HTTP error: ${status}`);
},
}
);
getCart();
} catch (error) {
console.error("removeFromCart error:", error);
}
}
const cart = ref({} as UserCart); const cart = ref({} as UserCart);
async function getCart() { async function getCart() {
try { try {
@ -93,10 +138,6 @@ export const useProductStore = defineStore("productStore", () => {
} }
); );
// if (!res.ok) {
// throw new Error(`HTTP error: ${res.status}`);
// }
cart.value = data; cart.value = data;
} catch (error) { } catch (error) {
console.error("getList error:", error); console.error("getList error:", error);
@ -106,9 +147,12 @@ export const useProductStore = defineStore("productStore", () => {
return { return {
productList, productList,
modules, modules,
cart,
getList, getList,
getModules, getModules,
addToCart, incrementCartItem,
// getCart, decrementCartItem,
deleteCartItem,
getCart,
}; };
}); });

61
stores/store.ts
View File

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

26
types/frontMenu.ts Normal file
View File

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

66
types/index.ts
View File

@ -52,31 +52,31 @@ export interface PBFooterItem {
}>; }>;
} }
export interface PBPageItem { // export interface PBPageItem {
collectionId: string; // collectionId: string;
collectionName: string; // collectionName: string;
component_name: string; // component_name: string;
id: string; // id: string;
image_collection: string; // image_collection: string;
page_created: string; // page_created: string;
page_id: string; // page_id: string;
page_name: string; // page_name: string;
page_section_id_position: number; // page_section_id_position: number;
page_updated: string; // page_updated: string;
section_id: string; // section_id: string;
section_img: string[]; // section_img: string[];
section_lang_created: string; // section_lang_created: string;
section_lang_data: SectionLangData; // section_lang_data: SectionLangData;
section_lang_id_lang: string; // section_lang_id_lang: string;
section_name: string; // section_name: string;
} // }
export interface SectionLangData { // export interface SectionLangData {
title: string; // title: string;
description: string; // description: string;
button: string; // button: string;
button_call: string; // button_call: string;
} // }
export interface UIMenuItem extends PBMenuItem { export interface UIMenuItem extends PBMenuItem {
children?: UIMenuItem[]; children?: UIMenuItem[];
@ -92,9 +92,9 @@ export interface FooterListResponse extends ListResponse {
export type componentsListType = { export type componentsListType = {
name: string; name: string;
component: PBPageItem; component: FrontSection;
componentInstance: DefineComponent; componentInstance: DefineComponent;
data: SectionLangData; // data: unknown;
}; };
// menuStore // menuStore
@ -181,11 +181,22 @@ export interface Currency {
suffix: boolean; suffix: boolean;
} }
export interface CartItem {
cart_item_id: number;
link_rewrite: string;
name: string;
picture_uuid: string;
product_id: number;
quantity: number;
single_item_price: number;
total_price: number;
}
export interface UserCart { export interface UserCart {
cart_items: CartItem[];
id: number; id: number;
checkout_in_progress: boolean; checkout_in_progress: boolean;
total_value: number;
currency_iso: string; currency_iso: string;
total_value: number;
} }
export interface GenericResponse<Data> { export interface GenericResponse<Data> {
@ -212,3 +223,4 @@ export type {
PeriodToFirstPiece, PeriodToFirstPiece,
} from "./planPrediction"; } from "./planPrediction";
export type { Product } from "./product"; export type { Product } from "./product";
export type { FrontMenu, FrontMenuLang, UIFrontMenu } from "./frontMenu";