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

header/footer/styles

Browse Source
This commit is contained in:
Arina Yakovenko
2025-05-30 15:57:39 +02:00
parent 837eea76a5
commit 9246f80857
15 changed files with 419 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ButtonArrow.vue
View File

@ -2,7 +2,7 @@
<div class="group flex cursor-pointer items-center justify-start gap-2">
<button
:class="[
'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] text-lg transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
'text-inter 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 group-hover:border-button-hover group-hover:text-button-hover border',

32
components/FooterBlock.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="border-t border-border pt-[75px]">
<UiContainer class="flex flex-col gap-24">
<div class="grid sm:grid-cols-2 sm:gap-[75px] xl:gap-0 xl:grid-flow-col auto-cols-max justify-between">
<div
v-for="(item, index) in menuStore.footerItems?.items[0].data"
:key="index"
class="flex flex-col gap-7 max-w-[280px]"
>
<h3 class="h4-uppercase">{{ item.title }}</h3>
<div
class="text-inter cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
v-for="(el, indexEl) in item.items"
:key="indexEl"
>
{{ el }}
</div>
</div>
</div>
<img
class="w-[70%] sm:w-[50%] xl:w-[30%]"
src="/public/logo-footer.svg"
alt="logo-footer"
/>
</UiContainer>
</div>
</template>
<script lang="ts" setup>
const menuStore = useMenuStore();
</script>

259
components/HeaderBlock.vue
View File

@ -1,67 +1,218 @@
<template>
<div class="border-border border-b">
<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]"
>
<div class="hidden h-[120px] w-full items-center justify-between xl:flex">
<ul class="flex items-center gap-20 whitespace-nowrap">
<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"
>
0{{ index + 1 }} <br />
{{ item.name }}
</li>
</ul>
<img class="dark:hidden" src="/logo.png" alt="Frame" />
<img class="hidden dark:block" src="/logo-dark.png" alt="Frame" />
<div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[35px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
</div>
<ThemeSwitcher />
<LangSwitcher />
<button
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
<div>
<!-- xl -->
<div class="w-full border-border border-b">
<UiContainer>
<div
class="hidden h-[120px] w-full items-center justify-between xl:flex"
>
E-shop
</button>
</div>
<div
class="hidden h-[116px] w-full items-center justify-between md:flex xl:hidden"
>
<img src="/logo.png" alt="Frame" />
<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>
<ul class="flex items-center gap-20 whitespace-nowrap">
<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"
>
0{{ index + 1 }} <br />
{{ item.name }}
</li>
</ul>
<img class="dark:hidden" src="/logo.png" alt="logo" />
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
<div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[35px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
</div>
<ThemeSwitcher />
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
<LangSwitcher />
<button
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
>
E-shop
</button>
</div>
</UiContainer>
</div>
<!-- md -->
<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">
<img class="dark:hidden" src="/logo.png" alt="logo" />
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
<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>
<ThemeSwitcher />
<i
variant="subtle"
block
class="uil uil-apps text-[35px] cursor-pointer"
@click="open = !open"
></i>
</div>
</UiContainer>
</div>
<div
class="hidden h-[84px] w-full items-center justify-between sm:flex md:hidden"
<UCollapsible
:ui="{ content: 'w-full' }"
v-model:open="open"
class="w-full"
>
<img src="/logo.png" alt="Frame" />
<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>
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
</div>
<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)"
: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="text-inter leading-[70%] text-lg">
<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"
>
<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"
/>
</svg>
</div>
</UiContainer>
</div>
</template>
</UCollapsible>
</div>
<!-- sm -->
<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">
<img class="dark:hidden" src="/logo.png" alt="logo" />
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
<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>
<i
variant="subtle"
block
class="uil uil-apps text-[35px] cursor-pointer"
@click="open = !open"
></i>
</div>
</UiContainer>
</div>
<div class="flex h-[84px] w-full items-center justify-between sm:hidden">
<img src="/logo.png" alt="Frame" />
<div class="flex items-center gap-6">
<i class="uil uil-user text-[35px] cursor-pointer"></i>
<i class="uil uil-apps text-[35px] cursor-pointer"></i>
</div>
<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)"
: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="text-inter leading-[70%] text-lg">
<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"
>
<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"
/>
</svg>
</div>
</UiContainer>
</div>
</template>
</UCollapsible>
</div>
<!-- smallest one -->
<div class="w-full items-center justify-between flex flex-col sm:hidden">
<div class="w-full border-border border-b">
<UiContainer class="h-[84px] flex items-center justify-between">
<img class="dark:hidden" src="/logo.png" alt="logo" />
<img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
<div class="flex items-center gap-6">
<i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
<i
variant="subtle"
block
class="uil uil-apps text-[35px] cursor-pointer"
@click="open = !open"
></i>
</div>
</UiContainer>
</div>
</UContainer>
<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)"
: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="text-inter leading-[70%] text-lg">
<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"
>
<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"
/>
</svg>
</div>
</UiContainer>
</div>
</template>
</UCollapsible>
</div>
</div>
</template>
<script lang="ts" setup>
import LangSwitcher from './langSwitcher.vue';
import LangSwitcher from "./LangSwitcher.vue";
const menuStore = useMenuStore()
const menuStore = useMenuStore();
const open = ref(false);
</script>

52
components/LangSwitcher.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<USelect
v-model="selectedLocaleCode"
:items="locales"
value-key="code"
:searchable="false"
:ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
trailing: 'hidden',
viewport: 'ring-0',
content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0',
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',
}"
@update:model-value="setLocale"
>
<template #leading="{ modelValue }">
<div class="flex items-center gap-2 text-xl font-medium">
{{ locales.find((item) => item.code === modelValue)?.name }}
</div>
</template>
<template #item="{ item }">
<div class="flex items-center gap-2 cursor-pointer w-full">
<UIcon
:name="item.icon as string"
class="size-5 rounded-full border border-button/40"
/>
<p class="text-xl font-medium">{{ item.name }}</p>
</div>
</template>
</USelect>
</template>
<script setup lang="ts">
import { useI18n } from "#imports";
const { locale, locales, setLocale } = useI18n();
const selectedLocaleCode = ref(locale.value);
const selectedIcon = ref(
locales.value.find((item) => item.code === locale.value)?.icon
);
watch(selectedLocaleCode, async (newCode) => {
if (newCode !== locale.value) {
await setLocale(newCode);
}
});
</script>

41
components/langSwitcher.vue
View File

@ -1,41 +0,0 @@
<template>
<USelectMenu
v-model="selectedLocale"
:items="locales"
label-key="name"
:search-input="{ icon: 'i-lucide-search' }"
placeholder="Select country"
class="w-48 bg-block-light dark:bg-block-dark border-border-light dark:border-border-dark"
@update:model-value="setLocaleManually($event)"
>
<template #leading="{ modelValue, ui }">
<span v-if="modelValue" class="size-5 text-center">
<UIcon
:name="(modelValue?.icon as string) || 'i-lucide-earth'"
:class="[ui.leadingIcon(), 'border border-border-light dark:border-border-dark rounded-full']"
/>
</span>
</template>
<template #item-leading="{ item }">
<span class="size-5 text-center">
<!-- {{ item.name }} -->
<UIcon :name="item.icon as string" class="size-5 text-accent" />
</span>
</template>
</USelectMenu>
</template>
<script setup lang="ts">
import type { LocaleObject } from "@nuxtjs/i18n";
const { setLocale, locales, locale } = useI18n();
const selectedLocale = ref(
locales.value.find((item) => item.code === locale.value)
);
function setLocaleManually(newLocale: LocaleObject) {
locale.value = newLocale.code;
locales.value.find((item) => item.code === locale.value);
setLocale(newLocale.code);
}
</script>

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

@ -3,7 +3,7 @@
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]"
>
<div class="">
<div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
<div class="py-[75px] space-y-[30px] sm:space-y-[53px]">
<h1 class="h1">
{{ component.section_lang_data.title }}
</h1>

8
components/ui/Container.vue Normal file
View File

@ -0,0 +1,8 @@
<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]">
<slot />
</UContainer>
</template>
<script lang="ts" setup></script>