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

investment page/curency switcher

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-05 15:53:41 +02:00
parent a7c4ff51ca
commit c7d71ddb21
17 changed files with 515 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
components/section/investment-page/InvestmentMain.vue Normal file
View File

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

43
components/section/investment-page/InvestmentWhy.vue Normal file
View File

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

169
components/section/investment-page/InvestmentZone.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<UiContainer class="space-y-[25px] sm:space-y-[75px]">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.main_title"
:key="index"
:class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]"
>
{{ item.text }}
<span
v-if="index !== component.section_lang_data.main_title.length - 1"
>
</span>
</span>
</h2>
<div class="space-25-55-75">
<p>{{ component.section_lang_data.main_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.section_title }}
</h4>
</div>
<!-- products -->
<div class="space-25-55-75 flex flex-col items-center">
<div
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<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"
>
<img
:src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
alt="pics"
class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
/>
<div class="flex flex-col justify-between h-full">
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
<h3
class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
>
{{ item.name }}
</h3>
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
{{ item.tax_name }}
</p>
</div>
<div class="flex items-center justify-between">
<p class="text-accent-green-light text-bold-24">
{{ item.formatted_price }}
</p>
<button
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
>
<i
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
></i>
</button>
</div>
</div>
</div>
</div>
<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]">
<p>{{ component.section_lang_data.section_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.info_title }}
</h4>
<p>{{ component.section_lang_data.info_description }}</p>
</div>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.cta_title }}
</h4>
</div>
<div
class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
>
<h2 class="h2-bold-bounded mb-[80px]">
{{ component.section_lang_data.calculator_title }}
</h2>
<div class="mb-[44px]">
<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>
</div>
<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>
</div>
</div>
<div class="flex justify-between 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>
</div>
<UiButtonArrow type="fill">{{
component.section_lang_data.button
}}</UiButtonArrow>
</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: {
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;
};
};
const itemCount = ref(4);
const productStore = useProductStore();
async function updateItemCount() {
const width = window.innerWidth;
if (width >= 1800) itemCount.value = 5;
else if (width >= 1200) itemCount.value = 4;
else if (width >= 768) itemCount.value = 3;
else if (width >= 640) itemCount.value = 2;
else itemCount.value = 1;
}
watch(itemCount, async () => {
await productStore.getList(itemCount.value);
});
onMounted(async () => {
await updateItemCount();
window.addEventListener("resize", updateItemCount);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updateItemCount);
});
</script>