login/registration/reset pages
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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();
|
||||
|
||||
Reference in New Issue
Block a user