main pages/styles

assets/main.css

@@ -18,10 +18,13 @@
 
   --color-bg-block: #E8E7E0;
 
+  --color-accent-green: #004F3D;
+
   /* button */
   --color-button: #9a7f62;
   --color-button-hover: #b7946d;
   --color-button-disabled: #c5c5c5;
+  --color-button-white: #E8E7E0;
 }
 
 @layer utilities {
@@ -29,12 +32,20 @@
     @apply font-bounded text-[24px] leading-[140%] font-bold uppercase md:text-[48px] xl:text-[64px];
   }
 
-  .h4-uppercase {
+  .h2-bold-bounded {
+    @apply font-bounded text-[24px] leading-[80%] font-bold sm:text-[36px] md:text-[40px];
+  }
+
+  .h4-uppercase-bold-inter {
     @apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
   }
 
   .text-inter {
-    @apply font-inter text-sm sm:text-lg;
+    @apply font-inter text-sm sm:text-lg leading-[150%];
+  }
+
+  .text-bold-24 {
+    @apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
   }
 }
 

components/ButtonArrow.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="group flex cursor-pointer items-center justify-start gap-2">
+  <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
     <button
       :class="[
         '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',
+          : 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
+
       ]"
     >
       <slot />
@@ -15,7 +16,7 @@
         'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
         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',
+          : 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
       ]"
     >
       <!-- <UIcon

components/FooterBlock.vue

@@ -1,13 +1,15 @@
 <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
+        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none 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]"
+          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
         >
-          <h3 class="h4-uppercase">{{ item.title }}</h3>
+          <h3 class="h4-uppercase-bold-inter">{{ 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"

components/HeaderBlock.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- xl -->
-    <div class="w-full border-border border-b">
+    <div class="w-full border-b border-border">
       <UiContainer>
-        <div
+        <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
-          class="hidden h-[120px] w-full items-center justify-between xl:flex"
+          <ul
-        >
+            class="flex items-center justify-between whitespace-nowrap w-full"
-          <ul class="flex items-center gap-20 whitespace-nowrap">
+          >
             <li
               v-for="(item, index) in menuStore.menu"
               @click="menuStore.navigateToItem(item)"
@@ -17,19 +17,27 @@
               {{ item.name }}
             </li>
           </ul>
-          <img class="dark:hidden" src="/logo.png" alt="logo" />
+          <ClientOnly v-if="!colorMode?.forced">
-          <img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
+            <img
-          <div class="flex items-center gap-[30px]">
+              class="cursor-pointer"
-            <i class="uil uil-user text-[35px] cursor-pointer"></i>
+              :src="isDark ? '/logo-dark.png' : '/logo.png'"
-            <i class="uil uil-shopping-cart text-[35px] cursor-pointer"></i>
+              alt="logo"
+              @click="menuStore.navigateToItem()"
+            />
+          </ClientOnly>
+          <div class="w-full flex items-center justify-between">
+            <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 />
+            <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>
-          <ThemeSwitcher />
-          <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>
@@ -40,8 +48,14 @@
     >
       <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" />
+          <ClientOnly v-if="!colorMode?.forced">
-          <img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
+            <img
+              class="cursor-pointer"
+              :src="isDark ? '/logo-dark.png' : '/logo.png'"
+              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>
@@ -65,7 +79,12 @@
             <UiContainer class="flex flex-col gap-[30px]">
               <div
                 v-for="(item, index) in menuStore.menu"
-                @click="menuStore.navigateToItem(item)"
+                @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"
               >
@@ -100,8 +119,14 @@
     >
       <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" />
+          <ClientOnly v-if="!colorMode?.forced">
-          <img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
+            <img
+              class="cursor-pointer"
+              :src="isDark ? '/logo-dark.png' : '/logo.png'"
+              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>
@@ -124,7 +149,12 @@
             <UiContainer class="flex flex-col gap-[30px]">
               <div
                 v-for="(item, index) in menuStore.menu"
-                @click="menuStore.navigateToItem(item)"
+                @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"
               >
@@ -157,8 +187,14 @@
     <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" />
+          <ClientOnly v-if="!colorMode?.forced">
-          <img class="hidden dark:block" src="/logo-dark.png" alt="logo-dark" />
+            <img
+              class="cursor-pointer"
+              :src="isDark ? '/logo-dark.png' : '/logo.png'"
+              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
@@ -180,7 +216,12 @@
             <UiContainer class="flex flex-col gap-[30px]">
               <div
                 v-for="(item, index) in menuStore.menu"
-                @click="menuStore.navigateToItem(item)"
+                @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"
               >
@@ -214,5 +255,16 @@
 import LangSwitcher from "./LangSwitcher.vue";
 
 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>

components/ThemeSwitcher.vue

@@ -1,3 +1,20 @@
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <div class="flex h-8 w-8 cursor-pointer items-center justify-center">
+      <i
+        @click="isDark = !isDark"
+        :class="[
+          'uil text-[32px] cursor-pointer',
+          isDark ? 'uil-moon' : 'uil-sun',
+        ]"
+      ></i>
+    </div>
+    <template #fallback>
+      <div class="size-20" />
+    </template>
+  </ClientOnly>
+</template>
+
 <script setup>
 const colorMode = useColorMode();
 
@@ -10,14 +27,3 @@ const isDark = computed({
   },
 });
 </script>
-
-<template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <div class="flex h-8 w-8 cursor-pointer items-center justify-center">
-        <i  @click="isDark = !isDark" :class="['uil text-[35px] cursor-pointer', isDark ? 'uil-moon' : 'uil-sun']"></i>
-    </div>
-    <template #fallback>
-      <div class="size-20" />
-    </template>
-  </ClientOnly>
-</template>

components/section/main-page/MainBlocks.vue

@@ -0,0 +1,59 @@
+<template>
+  <UiContainer
+    class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px] mb-[55px] sm:mb-[100px]"
+  >
+    <div
+      class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
+      v-for="(item, index) in component.section_lang_data"
+      :key="index"
+    >
+      <!-- xl -->
+      <div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
+        <div class="space-y-[55px]">
+          <h2 class="h2-bold-bounded">{{ item.title }}</h2>
+          <p class="text-inter">{{ item.description }}</p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
+      </div>
+
+      <!-- sm/md -->
+      <div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
+        <h2 class="h2-bold-bounded">{{ item.title }}</h2>
+        <p class="text-inter">{{ item.description }}</p>
+        <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
+      </div>
+
+      <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"
+        :style="{
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index]}?thumb=640x0')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }"
+      >
+        <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>
+        </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;
+  section_img: string;
+  section_lang_data: [
+    {
+      title: string;
+      description: string;
+      sub_title: string;
+    }
+  ];
+};
+</script>

components/section/main-page/MainHero.vue

@@ -1,37 +1,31 @@
 <template>
-  <UContainer
+  <UiContainer>
-    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="space-y-[30px] sm:space-y-[53px] mb-[55px] sm:mb-[100px]">
-  >
+      <h1 class="h1">
-    <div class="">
+        {{ component.section_lang_data.title }}
-      <div class="py-[75px] space-y-[30px] sm:space-y-[53px]">
+      </h1>
-        <h1 class="h1">
+      <div
-          {{ component.section_lang_data.title }}
+        class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
-        </h1>
+        :style="{
-        <div
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
-          class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
+          backgroundSize: 'cover',
-          :style="{
+          backgroundPosition: 'center',
-            backgroundImage: `url('/header-hero-desc.png')`,
+        }"
-          }"
+      />
-        />
+      <div
-        <div
+        class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
-          class="h-[465px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 sm:h-[509px] xl:hidden"
+      >
-          :style="{
+        <h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
-            backgroundImage: `url('/header-hero.png')`,
+          {{ component.section_lang_data.title_second }}
-          }"
+        </h3>
-        />
+        <div class="flex w-full items-start justify-center sm:justify-end">
-        <div
+          <ButtonArrow type="fill">{{
-          class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
+            component.section_lang_data.button
-        >
+          }}</ButtonArrow>
-          <h3 class="h4-uppercase sm:min-w-[45%]">
-            {{ component.section_lang_data.title_second }}
-          </h3>
-          <div class="flex w-full items-start justify-center sm:justify-end">
-            <ButtonArrow type="fill">{{ component.section_lang_data.button }}</ButtonArrow>
-          </div>
         </div>
       </div>
     </div>
-  </UContainer>
+  </UiContainer>
 </template>
 
 <script lang="ts" setup>
@@ -46,4 +40,4 @@ type Component = {
     button: string;
   };
 };
-</script>
+</script>

components/section/main-page/MainProducts.vue

@@ -0,0 +1,82 @@
+<template>
+  <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',
+      ]"
+    >
+      <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"
+      >
+        <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>
+          <div class="flex items-center justify-between">
+            <p class="text-accent-green text-bold-24">€ 4,825.44</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>
+    <div class="flex flex-col gap-6 md:flex-row items-center justify-between">
+      <h3
+        class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
+      >
+        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>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: [
+    {
+      title: string;
+      description: string;
+      sub_title: string;
+    }
+  ];
+};
+
+const itemCount = ref(1);
+
+function updateItemCount() {
+  const width = window.innerWidth;
+  if (width >= 1280) itemCount.value = 5;
+  else if (width >= 768) itemCount.value = 3;
+  else if (width >= 640) itemCount.value = 2;
+  else itemCount.value = 1;
+}
+
+onMounted(() => {
+  updateItemCount();
+  window.addEventListener("resize", updateItemCount);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateItemCount);
+});
+</script>

layouts/default.vue

@@ -3,7 +3,7 @@
     class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden"
   >
     <HeaderBlock />
-    <div class="flex-1">
+    <div class="flex-1 py-[25px] sm:py-[55px] md:py-[75px]">
       <slot />
     </div>
     <FooterBlock />

public/robots.txt

@@ -1,2 +0,0 @@
-User-Agent: *
-Disallow:

stores/menuStore.ts

@@ -45,9 +45,9 @@ export const useMenuStore = defineStore("menuStore", () => {
           filter: `id_lang="${$i18n.locale.value}"&&active=true`,
           sort: "position_id",
         })) as MenuListResponse;
-        
+
-        const root = menuItems.value.items.find((item) => item.is_root);
+      const root = menuItems.value.items.find((item) => item.is_root);
-        defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
+      defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
 
       if (root) {
         menu.value = buildTreeRecursive(menuItems.value.items, root.id);
@@ -102,11 +102,9 @@ export const useMenuStore = defineStore("menuStore", () => {
     let img = "";
     for (const s in store.components) {
       store.components[s].section_img.map((item) => {
-        img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
+        img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${req?.headers.get("x-forwarded-host") || req?.headers.get("host")
-          req?.headers.get("x-forwarded-host") || req?.headers.get("host")
+          }/api/files/${store.components[s].image_collection}/${store.components[s].section_id
-        }/api/files/${store.components[s].image_collection}/${
+          }/${item}?thumb=400x0`;
-          store.components[s].section_id
-        }/${item}?thumb=400x0`;
       });
       if (img.length > 0) return img;
     }

stores/store.ts

@@ -7,6 +7,7 @@ export const useStore = defineStore("store", () => {
   const pb = usePB();
   const { $i18n } = useNuxtApp();
   const menuStore = useMenuStore()
+  const colorMode = useColorMode()
 
   const components = ref({} as PBPageItem[]);
   const getSections = async (id: string) => {
@@ -60,9 +61,19 @@ export const useStore = defineStore("store", () => {
     return [];
   }
 
+  const isDark = computed({
+    get() {
+      return colorMode.value === "dark";
+    },
+    set(_isDark) {
+      colorMode.preference = _isDark ? "dark" : "light";
+    },
+  });
+
   return {
     currentPageID,
     components,
+    isDark,
     getComponents,
     getSections,
   };