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

login/registration/reset pages

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-13 15:58:43 +02:00
parent 92511dbfb5
commit c7479b1aa6
16 changed files with 443 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
components/CountryCurrencySelector.vue
View File

@ -1,125 +1,112 @@
<template>
<UCollapsible
class="flex flex-col gap-2 relative"
:ui="{
root: 'relative',
content:
'absolute z-50 w-auto ring-0 left-1/2 top-12 transform -translate-x-1/2 p-0 m-0 border-none',
}"
>
<UButton
color="neutral"
variant="subtle"
trailing-icon="i-lucide-chevron-down"
<div class="flex flex-col gap-2 relative" ref="dropdownRef">
<UButton color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down"
class="bg-bg-light dark:bg-bg-dark m-0 ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit text-text-light dark:text-text-dark"
block
@click="isOpen = !isOpen"
>
{{ selectedCountry }}/{{ selectedCurrency }}
block @click="isOpen = !isOpen">
{{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }}
</UButton>
<template #content v-if="isOpen" class="">
<div
class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark"
>
<div class="absolute ring-0 top-12 p-0 m-0 border-none w-48" v-if="isOpen">
<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="flex flex-col items-start gap-1">
<p>{{ $t("lang") }}</p>
<USelect
v-model="selectedCountry"
:items="menuStore.countryList"
class="w-32"
value-key="iso_code"
:ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark border border-button',
leading: 'p-0',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
>
<template #leading="{ modelValue }">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
>
{{ modelValue }}
<p>{{ $t("country") }}</p>
<div
class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
<div class="p-0" @click="openDrop('country')">
<div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
{{ menuStore.selectedCountry }} <span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</template>
</div>
<template
#item="{ item }"
class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
>
<div class="flex items-center gap-2 cursor-pointer w-full">
<p class="text-base text-text-light dark:text-text-dark">
<div v-if="dropCountry"
class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
<div class="overflow-auto h-[200px] w-full">
<p @click="() => {
menuStore.selectedCountry = item.iso_code
dropCountry = false
}"
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
v-for="item in menuStore.countryList">
{{ item?.name }}
</p>
</div>
</template>
</USelect>
</div>
</div>
</div>
<div class="flex flex-col items-start gap-[6px]">
<p>{{ $t("currency") }}</p>
<USelect
v-model="selectedCurrency"
:items="menuStore.currencies"
class="w-32"
value-key="iso_code"
:ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark border border-button',
leading: 'p-0',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
>
<template #leading="{ modelValue }">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
>
{{ modelValue }}
<div
class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
<div class="p-0" @click="openDrop()">
<div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
{{ menuStore.selectedCurrency?.iso_code }}<span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</template>
</div>
<template
#item="{ item }"
class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
>
<div class="flex items-center gap-2 cursor-pointer w-full">
<p class="text-base text-text-light dark:text-text-dark">
<div v-if="dropCurrency"
class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
<div class="overflow-auto w-full">
<p @click="() => {
menuStore.selectedCurrency = item
dropCurrency = false
}"
class="w-full hover:bg-block dark:hover:bg-button pl-1 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
v-for="item in menuStore.currencies">
{{ item?.name }}
</p>
</div>
</template>
</USelect>
</div>
</div>
</div>
</div>
</div>
</template>
</UCollapsible>
</div>
</div>
</template>
<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
const isOpen = ref(false);
const menuStore = useMenuStore();
const selectedCountry = ref();
const selectedCurrency = ref();
const dropdownRef = ref(null);
const dropCountry = ref(false)
const dropCurrency = ref(false)
function openDrop(type?: string) {
if (type === 'country') {
dropCurrency.value = false
dropCountry.value = !dropCountry.value
} else {
dropCountry.value = false
dropCurrency.value = !dropCurrency.value
}
}
watchEffect(() => {
if (
!selectedCountry.value &&
!menuStore.selectedCountry &&
menuStore.countryList &&
menuStore.countryList.length > 0
) {
selectedCountry.value = menuStore.countryList[0].iso_code;
menuStore.selectedCountry = menuStore.countryList[0].iso_code;
}
if (
!selectedCurrency.value &&
!menuStore.selectedCurrency &&
menuStore.currencies &&
menuStore.currencies.length > 0
) {
selectedCurrency.value = menuStore.currencies[0].iso_code;
menuStore.selectedCurrency = menuStore.currencies[0];
}
});
onClickOutside(dropdownRef, () => {
isOpen.value = false
dropCurrency.value = false
dropCountry.value = false
});
</script>

186
components/HeaderBlock.vue
View File

@ -4,26 +4,16 @@
<div class="w-full border-b border-border">
<UiContainer>
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
<ul
class="flex items-center justify-between whitespace-nowrap w-full"
>
<li
v-for="(item, index) in menuStore.menu"
@click="menuStore.navigateToItem(item)"
:key="index"
class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all text-inter"
>
<ul class="flex items-center justify-between whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
0{{ index + 1 }} <br />
{{ item.name }}
</li>
</ul>
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()" />
</ClientOnly>
<div class="w-full flex items-center justify-between">
<div class="flex items-center gap-[30px]">
@ -36,8 +26,7 @@
</div>
<ThemeSwitcher />
<button
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter"
>
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter">
E-shop
</button>
</div>
@ -46,18 +35,12 @@
</div>
<!-- md -->
<div
class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center"
>
<div class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center">
<div class="w-full border-border border-b">
<UiContainer class="h-[116px] flex items-center justify-between">
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()" />
</ClientOnly>
<div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]">
@ -69,51 +52,30 @@
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<i
variant="subtle"
block
class="uil uil-apps text-[33px] cursor-pointer"
@click="open = !open"
></i>
<i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open"></i>
</div>
</UiContainer>
</div>
<UCollapsible
:ui="{ content: 'w-full' }"
v-model:open="open"
class="w-full"
>
<UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div
v-for="(item, index) in menuStore.menu"
@click="
() => {
menuStore.navigateToItem(item);
open = false;
}
"
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div v-for="(item, index) in menuStore.menu" @click="
() => {
menuStore.navigateToItem(item);
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg
class=""
width="20"
height="20"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
fill="currentColor"
/>
fill="currentColor" />
</svg>
</div>
</UiContainer>
@ -123,69 +85,42 @@
</div>
<!-- sm -->
<div
class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden"
>
<div class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden">
<div class="w-full border-border border-b">
<UiContainer class="h-[84px] flex items-center justify-between">
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()" />
</ClientOnly>
<div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
</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>
</UiContainer>
</div>
<UCollapsible
:ui="{ content: 'w-full' }"
v-model:open="open"
class="w-full"
>
<UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div
v-for="(item, index) in menuStore.menu"
@click="
() => {
menuStore.navigateToItem(item);
open = false;
}
"
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div v-for="(item, index) in menuStore.menu" @click="
() => {
menuStore.navigateToItem(item);
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg
class=""
width="20"
height="20"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
fill="currentColor"
/>
fill="currentColor" />
</svg>
</div>
<div class="flex items-center justify-between">
@ -217,60 +152,35 @@
<div class="w-full border-border border-b">
<UiContainer class="h-[84px] flex items-center justify-between">
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()" />
</ClientOnly>
<div class="flex items-center gap-6">
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<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>
</UiContainer>
</div>
<UCollapsible
:ui="{ content: 'w-full' }"
v-model:open="open"
class="w-full"
>
<UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div
v-for="(item, index) in menuStore.menu"
@click="
() => {
menuStore.navigateToItem(item);
open = false;
}
"
:key="index"
class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
>
<div v-for="(item, index) in menuStore.menu" @click="
() => {
menuStore.navigateToItem(item);
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg
class=""
width="20"
height="20"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
fill="currentColor"
/>
fill="currentColor" />
</svg>
</div>
<div class="flex items-center justify-between">
@ -306,6 +216,8 @@ const menuStore = useMenuStore();
const open = ref(false);
const colorMode = useColorMode();
const route = useRoute()
const isDark = computed({
get() {
return colorMode.value === "dark";

16
components/section/business-page/BusinessReasons.vue
View File

@ -73,16 +73,16 @@
<div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
<div class="flex gap-[30px]">
<input :placeholder="$t('first_name')" type="text"
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
<input :placeholder="$t('email')" type="text"
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
</div>
<textarea :placeholder="$t('form_textarea')"
class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
<textarea :placeholder="$t('form_question')"
class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
<div class="w-full flex justify-center sm:justify-start">
<UiButtonArrow type="border">{{
$t("form_button")
$t("submit_form")
}}</UiButtonArrow>
</div>
</div>
@ -92,15 +92,15 @@
</h4>
<div class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
<div>
<p class="text-[#6B6B6B]">{{ $t("phone") }}</p>
<p class="text-gray">{{ $t("phone") }}</p>
<p>+420 608 428 782</p>
</div>
<div>
<p class="text-[#6B6B6B]">{{ $t("email") }}</p>
<p class="text-gray">{{ $t("email") }}</p>
<p>web@yourgold.cz</p>
</div>
<div>
<p class="text-[#6B6B6B]">{{ $t("office_address") }}</p>
<p class="text-gray">{{ $t("office_address") }}</p>
<p>
Floriána Nováka 3 <br />
796 01 Prostějov <br />

24
components/section/contact-page/ContactMain.vue
View File

@ -1,24 +1,24 @@
<template>
<UiContainer class="space-y-[45px]">
<div class="w-[50%] space-y-[25px]">
<div class="xl:w-[70%] space-y-[25px]">
<h1 class="h1">{{ component.section_lang_data.title }}</h1>
<p class="">{{ component.section_lang_data.description }}</p>
<p v-html="component.section_lang_data.description"></p>
</div>
<div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
<div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
<div class="flex gap-[30px]">
<input :placeholder="$t('first_name')" type="text"
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
<input :placeholder="$t('email')" type="text"
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
</div>
<textarea :placeholder="$t('form_textarea')"
class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
<textarea :placeholder="$t('form_question')"
class="border h-[276px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
<div class="w-full flex justify-center sm:justify-start">
<UiButtonArrow type="border">{{
$t("form_button")
}}</UiButtonArrow>
$t("submit_form")
}}</UiButtonArrow>
</div>
</div>
<div class="space-y-[30px] xl:px-[50px] sm:px-10">
@ -26,17 +26,17 @@
{{ $t('contact_info') }}
</h4>
<div
class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[15px] sm:gap-[30px]">
<div>
<p class="text-[#6B6B6B]">{{ $t("phone") }}</p>
<p class="text-gray">{{ $t("phone") }}</p>
<p>+420 608 428 782</p>
</div>
<div>
<p class="text-[#6B6B6B]">{{ $t("email") }}</p>
<p class="text-gray">{{ $t("email") }}</p>
<p>web@yourgold.cz</p>
</div>
<div>
<p class="text-[#6B6B6B]">{{ $t("office_address") }}</p>
<p class="text-gray">{{ $t("office_address") }}</p>
<p>
Floriána Nováka 3 <br />
796 01 Prostějov <br />

65
components/section/investment-page/InvestmentFaq.vue
View File

@ -4,29 +4,22 @@
<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"
<div v-for="(item, index) in component.section_lang_data.faq" :key="index"
@click="active = active === index ? 0 : index"
class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer"
>
class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer">
<h4 class="h4-uppercase-bold-inter">
<span v-if="index + 1 < 10">0</span>{{ index + 1 }}
</h4>
<div
:class="[
'flex justify-between w-full transition-all duration-300 gap-2 sm:gap-10 md:gap-2',
active === index && 'pb-10 border-b border-bg-dark',
]"
>
<div :class="[
'flex justify-between w-full transition-all duration-300 gap-2 sm:gap-10 md:gap-2',
active === index && 'pb-10 border-b border-bg-dark dark:border-bg-light',
]">
<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',
]"
>
<h4 :class="[
'h4-uppercase-bold-inter transition-colors duration-300',
active === index &&
'text-accent-green-light dark:text-accent-green-dark',
]">
{{ item.label }}
</h4>
@ -37,35 +30,21 @@
</transition>
</div>
<svg
class="min-w-5 h-5 dark:text-bg-light"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
:d="
active === index
? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
: 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
"
fill="currentColor"
/>
<svg class="min-w-5 h-5 dark:text-bg-light" viewBox="0 0 20 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path :d="active === index
? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
: 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
" fill="currentColor" />
</svg>
</div>
</div>
</div>
<h4
class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66"
>
<span
v-for="(item, index) in component.section_lang_data.sub_title"
:key="index"
:class="{
'text-accent-green-light dark:text-accent-green-dark':
item.highlight,
}"
>
<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="{
'text-accent-green-light dark:text-accent-green-dark':
item.highlight,
}">
{{ item.text }}
</span>
</h4>

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

@ -1,20 +1,14 @@
<template>
<UiContainer class="space-25-75">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.main_title"
:key="index"
:class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]"
>
<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 v-if="index !== component.section_lang_data.main_title.length - 1">
</span>
</span>
</h2>
@ -28,27 +22,17 @@
<!-- 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-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`"
alt="pics"
class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
/>
<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-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`" 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"
>
<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">
@ -60,26 +44,19 @@
{{ 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>
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 :arrow="true" class="mx-auto" type="fill"
>E-shop</UiButtonArrow
>
<UiButtonArrow :arrow="true" class="mx-auto" type="fill">E-shop</UiButtonArrow>
</div>
<!-- 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 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>
@ -94,9 +71,7 @@
</div>
<!-- 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">
{{ component.section_lang_data.calculator_title }}
</h2>
@ -104,49 +79,30 @@
<div class="flex flex-col gap-4">
<div class="flex justify-between">
<p>{{ $t("monthly_savings") }}</p>
<p
class="text-accent-green-light dark:text-accent-green-dark font-bold"
>
{{ store.monthlySavings }}
<p class="text-accent-green-light dark:text-accent-green-dark font-bold">
{{ store.monthlySavings }} {{ menuStore.selectedCurrency?.sign }}
</p>
</div>
<input
v-model="store.monthlySavings"
type="range"
max="600"
class="w-full accent-button cursor-pointer"
@mouseup="store.getCalculator()"
@touchend="store.getCalculator()"
/>
<input v-model="store.monthlySavings" type="range" max="600" :min="store.minValue"
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:text-accent-green-dark font-bold"
>
<p>{{ $t("storage_period_years") }}</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()"
/>
<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 flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm: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"
>
€ {{ store.totalInvestment }}
<p>{{ $t("expected_savings_value") }}</p>
<h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
{{ menuStore.selectedCurrency?.sign }} {{ store.totalInvestment }}
</h2>
</div>
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
@ -183,6 +139,7 @@ type Component = {
};
const store = useStore();
const menuStore = useMenuStore();
const itemCount = ref(4);
const productStore = useProductStore();

52
components/section/login-page/LoginMain.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<UiContainer class="flex py-20 sm:py-14">
<div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
<div class="space-25-55">
<div class="flex justify-between">
<h2 class="h2-bold-bounded">{{ $t('login') }}</h2>
<button
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
$t('back_to_home') }}</button>
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :placeholder="$t('email')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('password') }}</p>
<input :placeholder="$t('placeholder_password')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
</div>
<p class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer">{{
$t('forgot_password_question')
}}</p>
<div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
<UiButtonArrow type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
</div>
<div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
<p class="cursor-pointer hover:underline transition-all">{{
$t('no_account')
}}</p>
<p class="text-button cursor-pointer hover:text-button-hover">{{
$t('sign_up_now')
}}</p>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {};
};</script>

103
components/section/registration-page/RegistrationMain.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<UiContainer class="flex py-20 sm:py-14">
<div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
<div class="space-25-55">
<div class="flex justify-between">
<h2 class="h2-bold-bounded">{{ $t('sign_up') }}</h2>
<button
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
$t('back_to_home') }}</button>
</div>
<div class="space-y-[30px]">
<p>Obecné informace</p>
<div class="grid grid-cols-2 gap-[30px]">
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('first_name') }}</p>
<input :placeholder="$t('first_name')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('last_name') }}</p>
<input :placeholder="$t('last_name')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :placeholder="$t('email')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('phone') }}</p>
<div class="flex items-center border-2 border-block rounded-lg">
<div
class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
<div class="px-[25px]" @click="dropCountry = !dropCountry">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
{{ menuStore.selectedPhoneCountry.name }} <span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</div>
<div v-if="dropCountry"
class="absolute bg-bg-light rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
<div class="overflow-auto h-[200px] w-full">
<p @click="() => {
menuStore.selectedPhoneCountry = item
dropCountry = false
}" class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
v-for="item in menuStore.countryList">
{{ item.name }}
</p>
</div>
</div>
</div>
{{ menuStore.selectedPhoneCountry.call_prefix }}
<input :placeholder="$t('phone')" type="text"
class="placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
</div>
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :placeholder="$t('email')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('password') }}</p>
<input :placeholder="$t('placeholder_password')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
</div>
</div>
</div>
<div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
<UiButtonArrow type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
</div>
<div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
<p class="cursor-pointer hover:underline transition-all">{{
$t('is_account')
}}</p>
<p class="text-button cursor-pointer hover:text-button-hover">{{
$t('login')
}}</p>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {};
};
const menuStore = useMenuStore()
const dropCountry = ref()
</script>

41
components/section/reset-password-page/ResetPasswordMain.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<UiContainer class="flex py-10 sm:py-14 gap-10">
<div class="hidden xl:block rounded-2xl min-w-[50%] h-[830px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
<div class="space-y-[55px]">
<div class="flex flex-col-reverse sm:flex-row justify-between items-start gap-7 sm:items-center">
<h2 class="h2-bold-bounded">{{ $t('reset_password') }}</h2>
<button
class="whitespace-nowrap h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
$t('back_to_home') }}</button>
</div>
<div class="space-y-[30px]">
<p>{{ component.section_lang_data.reset_password_description }}</p>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :placeholder="$t('email')" type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
</div>
</div>
<div class="pt-[25px] sm:pt-12 flex justify-center w-full">
<UiButtonArrow type="fill" :arrow="true">{{ $t('confirm') }}</UiButtonArrow>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
reset_password_description: string
};
};</script>