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

add map/products

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-03 15:20:55 +02:00
parent 2ffd64da98
commit c9348dc092
17 changed files with 572 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/FooterBlock.vue
View File

@ -20,15 +20,30 @@
</div>
</div>
<img
class="w-[70%] sm:w-[50%] xl:w-[30%]"
src="/public/logo-footer.svg"
alt="logo-footer"
/>
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
:src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
</ClientOnly>
</UiContainer>
</div>
</template>
<script lang="ts" setup>
const menuStore = useMenuStore();
const store = useStore();
const open = ref(false);
const colorMode = useColorMode();
const isDark = computed({
get() {
return colorMode.value === "dark";
},
set(_isDark) {
colorMode.preference = _isDark ? "dark" : "light";
},
});
</script>

53
components/HeaderBlock.vue
View File

@ -20,7 +20,7 @@
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.png' : '/logo.png'"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
@ -51,19 +51,22 @@
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.png' : '/logo.png'"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
</ClientOnly>
<div class="flex items-center gap-6">
<i class="uil uil-user text-[35px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
<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>
<LangSwitcher />
<ThemeSwitcher />
<i
variant="subtle"
block
class="uil uil-apps text-[35px] cursor-pointer"
class="uil uil-apps text-[33px] cursor-pointer"
@click="open = !open"
></i>
</div>
@ -122,18 +125,20 @@
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.png' : '/logo.png'"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
/>
</ClientOnly>
<div class="flex items-center gap-6">
<i class="uil uil-user text-[35px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
<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-[35px] cursor-pointer"
class="uil uil-apps text-[30px] cursor-pointer"
@click="open = !open"
></i>
</div>
@ -177,6 +182,18 @@
/>
</svg>
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
{{ $t("change_language") }}
</p>
<LangSwitcher />
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
{{ $t("change_theme") }}
</p>
<ThemeSwitcher />
</div>
</UiContainer>
</div>
</template>
@ -190,17 +207,17 @@
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.png' : '/logo.png'"
: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-[35px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<i
variant="subtle"
block
class="uil uil-apps text-[35px] cursor-pointer"
class="uil uil-apps text-[30px] cursor-pointer"
@click="open = !open"
></i>
</div>
@ -244,6 +261,18 @@
/>
</svg>
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
{{ $t("change_language") }}
</p>
<LangSwitcher />
</div>
<div class="flex items-center justify-between">
<p class="text-inter leading-[70%] text-lg">
{{ $t("change_theme") }}
</p>
<ThemeSwitcher />
</div>
</UiContainer>
</div>
</template>

47
components/ImageBlock.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<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"
>
<!-- <svg
class=""
viewBox="0 0 870 350"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z"
fill="url(#pattern0_381_6471)"
/>
<defs>
<pattern
id="pattern0_381_6471"
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<use
xlink:href="#image0_381_6471"
transform="matrix(0.000732064 0 0 0.0018197 0 -0.198766)"
/>
</pattern>
<image
id="image0_381_6471"
width="1366"
height="768"
preserveAspectRatio="none"
xlink:href="/block.webp"
/>
</defs>
</svg> -->
<img class="image" src="/block.webp" alt="">
<slot />
</div>
</template>
<script lang="ts" setup></script>
<style>
.image {
clip-path: path("M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z");
}
</style>

297
components/MapBlock.vue Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -34,16 +34,31 @@
<div
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
>
<ButtonArrow>{{ item.title }}</ButtonArrow>
<UiButtonArrow>{{ item.title }}</UiButtonArrow>
</div>
</div>
<UiButtonArrow class="sm:hidden mx-auto">{{ item.title }}</UiButtonArrow>
</div>
<!-- Map block with same layout rules -->
<div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
<h1>Jsme tu pro vás napříč Evropou</h1>
<MapBlock />
<div class="flex items-center gap-4 w-full justify-end">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
<p>Partners</p>
</div>
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
<p>Customers</p>
</div>
</div>
<ButtonArrow class="sm:hidden mx-auto">{{ item.title }}</ButtonArrow>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
@ -56,4 +71,33 @@ type Component = {
}
];
};
interface Partner {
code: string;
country_iso: string;
region_iso: string;
first_name: string;
last_name: string;
job_position: string;
commissioning_entity_name: string;
}
const props = defineProps<{
component: Component;
data: Object;
infoData: Object;
}>();
const countryISOs = ref("");
const isDefault = ref<boolean>(true);
const activeCountry = ref<string>("");
let partnersList = ref([] as Partner[]);
let partnersCountries = ref([] as any[]);
const backToEurope = () => {
isDefault.value = true;
activeCountry.value = "";
partnersList.value = [];
};
</script>

4
components/section/main-page/MainHero.vue
View File

@ -19,9 +19,9 @@
{{ component.section_lang_data.title_second }}
</h3>
<div class="flex w-full items-start justify-center sm:justify-end">
<ButtonArrow type="fill">{{
<UiButtonArrow type="fill">{{
component.section_lang_data.button
}}</ButtonArrow>
}}</UiButtonArrow>
</div>
</div>
</div>

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

@ -2,25 +2,36 @@
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
<div
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-center',
itemCount === 1 ? 'justify-center' : 'justify-between',
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<!-- product -->
<div
v-for="item in itemCount"
:key="item"
class="w-[200px] sm:w-[260px] md:w-[290px] py-[15px] px-[10px] sm:py-5 sm:px-[14px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
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="/pics.png" alt="pics" class="max-w-[150px]" />
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
<h3 class="text-[13px] sm:text-[16px] text-xl font-bold">
50g Zlatý slitek: PAMP Suisse
</h3>
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
Osvobozená sazba DPH PL
</p>
<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 text-bold-24">€ 4,825.44</p>
<p class="text-accent-green 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"
>
@ -39,7 +50,7 @@
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
vás ochrání zítra
</h3>
<ButtonArrow type="fill">E-shop</ButtonArrow>
<UiButtonArrow type="fill">E-shop</UiButtonArrow>
</div>
</UiContainer>
</template>
@ -61,19 +72,27 @@ type Component = {
];
};
const itemCount = ref(1);
const itemCount = ref(4);
const productStore = useProductStore();
function updateItemCount() {
async function updateItemCount() {
const width = window.innerWidth;
if (width >= 1280) itemCount.value = 5;
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;
}
onMounted(() => {
updateItemCount();
watch(itemCount, async() => {
await productStore.getList(itemCount.value);
});
onMounted(async () => {
await updateItemCount();
window.addEventListener("resize", updateItemCount);
await productStore.getList(itemCount.value);
});
onBeforeUnmount(() => {

0
components/ButtonArrow.vue → components/ui/ButtonArrow.vue
View File