pop-up

components/section/FooterBlock.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="border-t border-border pt-[75px]">
+    <UiContainer class="flex flex-col gap-24">
+      <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 component.section_lang_data" :key="index"
+          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
+          <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
+          <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
+            v-for="(el, indexEl) in item.children" :key="indexEl">
+            {{ el.title }}
+          </div>
+        </div>
+      </div>
+
+      <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 props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    title: string;
+    children: {
+      title: string;
+      value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info';
+      link?: string;
+    }[];
+  }[];
+};
+
+
+const store = useStore();
+const open = ref(false);
+const menuStore = useMenuStore();
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  },
+});
+</script>

components/section/Product.vue

@@ -19,7 +19,7 @@
         </p>
         <button
           class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
-          <UButton icon="i-lucide-shopping-cart" variant="ghost" class="sm:text-[25px] md:text-2xl text-bg-light" />
+          <i class="uil uil-shopping-cart text-[10px] sm:text-[25px] md:text-2xl cursor-pointer"></i>
         </button>
       </div>
     </div>