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

invest page

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-06 15:50:06 +02:00
parent c7d71ddb21
commit 3d91d7f1bb
16 changed files with 331 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/main.css
View File

@ -16,7 +16,7 @@
--color-text-light: #1a1a1a;
--color-text-dark: #fffefb;
--color-bg-block: #E8E7E0;
--color-block: #E8E7E0;
--color-accent-green-light: #004F3D;
--color-accent-green-dark: #008567;
@ -25,7 +25,6 @@
--color-button: #9a7f62;
--color-button-hover: #b7946d;
--color-button-disabled: #c5c5c5;
--color-button-white: #E8E7E0;
}
@layer utilities {
@ -56,6 +55,10 @@
.space-25-55 {
@apply space-y-[25px] sm:space-y-[55px]
}
.space-25-75 {
@apply space-y-[25px] sm:space-y-[75px]
}
}
.main {

4
components/CountryCurrencySelector.vue
View File

@ -35,7 +35,7 @@
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark border border-button',
leading: 'p-0',
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
>
<template #leading="{ modelValue }">
@ -70,7 +70,7 @@
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark border border-button',
leading: 'p-0',
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
>
<template #leading="{ modelValue }">

20
components/HeaderBlock.vue
View File

@ -11,7 +11,7 @@
v-for="(item, index) in menuStore.menu"
@click="menuStore.navigateToItem(item)"
:key="index"
class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all text-inter"
>
0{{ index + 1 }} <br />
{{ item.name }}
@ -97,7 +97,7 @@
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div class="leading-[70%] text-lg">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
@ -169,7 +169,7 @@
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div class="leading-[70%] text-lg">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
@ -189,19 +189,19 @@
</svg>
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
<p class="leading-[70%] text-inter">
{{ $t("change_language") }}
</p>
<LangSwitcher />
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
<p class="leading-[70%] text-inter">
{{ $t("change_currency_country") }}
</p>
<CountryCurrencySelector />
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
<p class="leading-[70%] text-inter">
{{ $t("change_theme") }}
</p>
<ThemeSwitcher />
@ -254,7 +254,7 @@
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div class="leading-[70%] text-lg">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
@ -274,19 +274,19 @@
</svg>
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
<p class="leading-[70%] text-lg text-inter">
{{ $t("change_language") }}
</p>
<LangSwitcher />
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
<p class="leading-[70%] text-lg text-inter">
{{ $t("change_currency_country") }}
</p>
<CountryCurrencySelector />
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg">
<p class="leading-[70%] text-lg text-inter">
{{ $t("change_theme") }}
</p>
<ThemeSwitcher />

2
components/LangSwitcher.vue
View File

@ -12,7 +12,7 @@
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 pr-6',
group: 'px-[5px] py-[10px]',
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
@update:model-value="setLocale"
>

2
components/MapBlock.vue
View File

@ -290,7 +290,7 @@ onMounted(async () => {
[classItem.split("_").length - 1].toLowerCase();
mapStore.customersList.forEach(
(item) => item === code && (element.style.fill = "var(--color-bg-block)")
(item) => item === code && (element.style.fill = "var(--color-block)")
);
mapStore.partnersList.forEach(

82
components/section/investment-page/InvestmentFaq.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<UiContainer>
<div class="space-25-55">
<h2 class="h2-bold-bounded">{{ component.section_lang_data.title }}</h2>
<div class="flex flex-col gap-10">
<div
v-for="(item, index) in component.section_lang_data.faq"
:key="index"
@click="active = active === index ? null : index"
class="flex gap-60 cursor-pointer"
>
<p>{{ index }}</p>
<div
:class="[
'flex justify-between w-full transition-all duration-300',
active === index && 'pb-10 border-b border-bg-dark',
]"
>
<div class="max-w-[1200px] flex flex-col gap-6">
<h4
:class="[
'h4-uppercase-bold-inter transition-colors duration-300',
active === index &&
'text-accent-green-light dark:text-accent-green-dark',
]"
>
{{ item.label }}
</h4>
<transition name="fade-slide">
<p
v-if="active === index"
class="transition-all duration-300 ease-in-out"
>
{{ item.content }}
</p>
</transition>
</div>
<svg
width="20"
height="20"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
:d="
active === index
? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
: 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
"
fill="#1A1A1A"
/>
</svg>
</div>
</div>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
faq: [
{
label: string;
content: string;
}
];
};
};
const active = ref(0);
</script>

99
components/section/investment-page/InvestmentSave.vue Normal file
View File

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

68
components/section/investment-page/InvestmentZone.vue
View File

@ -1,5 +1,5 @@
<template>
<UiContainer class="space-y-[25px] sm:space-y-[75px]">
<UiContainer class="space-25-75">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.main_title"
@ -37,7 +37,7 @@
<div
v-for="(item, index) in productStore.productList"
:key="index"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
>
<img
:src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
@ -73,9 +73,13 @@
<UiButtonArrow class="mx-auto" type="fill">E-shop</UiButtonArrow>
</div>
<div class="flex items-stretch gap-2">
<div class="flex flex-col justify-between">
<div class="space-y-[55px]">
<!-- calculator-block -->
<div
class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55"
>
<div class="flex flex-col space-y-[55px] sm:justify-between">
<div class="space-25-55">
<p>{{ component.section_lang_data.section_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.info_title }}
@ -86,30 +90,64 @@
{{ component.section_lang_data.cta_title }}
</h4>
</div>
<!-- calculator -->
<div
class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
>
<h2 class="h2-bold-bounded mb-[80px]">
<h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
{{ component.section_lang_data.calculator_title }}
</h2>
<div class="mb-[44px]">
<div class="mb-14 flex flex-col gap-8 sm:gap-14">
<div class="flex flex-col gap-4">
<div class="flex justify-between">
<p>{{ $t("monthly_savings") }}</p>
<p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
<p
class="text-accent-green-light dark:text-accent-green-dark font-bold"
>
{{ store.monthlySavings }}
</p>
</div>
<input
v-model="store.monthlySavings"
type="range"
max="600"
class="w-full accent-button cursor-pointer"
@mouseup="store.getCalculator()"
@touchend="store.getCalculator()"
/>
</div>
<div class="flex flex-col gap-4">
<div class="flex justify-between">
<p>{{ $t("storage_period") }}</p>
<p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
<p
class="text-accent-green-light dark:text-accent-green-dark font-bold"
>
{{ store.storagePeriod }}
</p>
</div>
<input
v-model="store.storagePeriod"
type="range"
max="20"
class="w-full accent-button cursor-pointer"
@mouseup="store.getCalculator()"
@touchend="store.getCalculator()"
/>
</div>
</div>
<div class="flex justify-between items-center">
<div
class="flex flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm:items-center"
>
<div class="">
<p>{{ $t("expected_value") }}</p>
<h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
39 444,87 €
<h2
class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
>
€ {{ store.totalInvestment }}
</h2>
</div>
<UiButtonArrow type="fill">{{
<UiButtonArrow type="fill" class="mx-auto sm:m-0">{{
component.section_lang_data.button
}}</UiButtonArrow>
</div>
@ -142,6 +180,8 @@ type Component = {
};
};
const store = useStore();
const itemCount = ref(4);
const productStore = useProductStore();

2
components/section/main-page/MainBlocks.vue
View File

@ -50,7 +50,7 @@
<p>Partners</p>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
<div class="w-3 h-3 rounded-[2.8px] bg-block"></div>
<p>Customers</p>
</div>
</div>

2
components/section/main-page/MainProducts.vue
View File

@ -10,7 +10,7 @@
<div
v-for="(item, index) in productStore.productList"
:key="index"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
>
<img
:src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"

4
components/ui/ButtonArrow.vue
View File

@ -5,7 +5,7 @@
'h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
type === 'fill'
? 'bg-button text-text-dark group-hover:bg-button-hover'
: 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
]"
>
@ -16,7 +16,7 @@
'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
type === 'fill'
? 'bg-button text-text-dark group-hover:bg-button-hover'
: 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
]"
>
<!-- <UIcon

2
components/ui/Container.vue
View File

@ -1,6 +1,6 @@
<template>
<UContainer
class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]">
class="mx-auto w-full max-w-[360px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
<slot />
</UContainer>
</template>

11
pages/index.vue
View File

@ -1,5 +1,4 @@
<template>
<div>
<KeepAlive>
<component
:is="component.componentInstance"
@ -7,8 +6,8 @@
:key="component.name"
:component="component.component"
/>
</KeepAlive>
</div>
</template>
<script setup>
@ -17,15 +16,15 @@
const route = useRoute();
route.params.id = menuStore.defaultMenu.id_page
route.params.slug = menuStore.defaultMenu.link_rewrite
route.params.id = menuStore.defaultMenu.id_page;
route.params.slug = menuStore.defaultMenu.link_rewrite;
const store = useStore();
await store.getSections(route.params.id);
onMounted(() => {
menuStore.openMenu = false
})
menuStore.openMenu = false;
});
useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id);

3
public/Arrow 4 (1).svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z" fill="#1A1A1A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 633 B

3
public/Arrow 4.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z" fill="#1A1A1A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 639 B

42
stores/store.ts
View File

@ -6,8 +6,11 @@ export const useStore = defineStore("store", () => {
const currentPageID = ref("");
const pb = usePB();
const { $i18n } = useNuxtApp();
const menuStore = useMenuStore()
const colorMode = useColorMode()
// calculator
const monthlySavings = ref(137);
const storagePeriod = ref(10);
const totalInvestment = ref()
const components = ref({} as PBPageItem[]);
const getSections = async (id: string) => {
@ -61,19 +64,38 @@ export const useStore = defineStore("store", () => {
return [];
}
const isDark = computed({
get() {
return colorMode.value === "dark";
async function getCalculator() {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/plan-prediction/easy/calculate?monthly_deposit=${monthlySavings.value}&years=${storagePeriod.value}`,
{
headers: {
"Content-Type": "application/json",
},
set(_isDark) {
colorMode.preference = _isDark ? "dark" : "light";
},
});
}
);
if (!res.ok) {
throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();
totalInvestment.value = data.data.total_investement_value
} catch (error) {
console.error("getList error:", error);
}
}
getCalculator()
return {
currentPageID,
components,
isDark,
totalInvestment,
monthlySavings,
storagePeriod,
getCalculator,
getComponents,
getSections,
};