From 1f9ed61d5bafcd14cf354620ee90ae98cbe44636 Mon Sep 17 00:00:00 2001
From: mustafa-rezae <mustafa.rezae01@gmail.com>
Date: Tue, 18 Feb 2025 16:26:13 +0330
Subject: [PATCH] Work on search page

---
 components/hadith/AutoComplation.vue       |  566 ++-------
 components/hadith/NavigationMenu.vue       |  116 +-
 components/hadith/hero-page/SectionOne.vue |   93 ++
 components/hadith/hero-page/SectionTwo.vue |  123 ++
 pages/hadith/index.vue                     |  210 +---
 pages/hadith/search.vue                    | 1293 ++------------------
 6 files changed, 538 insertions(+), 1863 deletions(-)
 create mode 100644 components/hadith/hero-page/SectionOne.vue
 create mode 100644 components/hadith/hero-page/SectionTwo.vue

diff --git a/components/hadith/AutoComplation.vue b/components/hadith/AutoComplation.vue
index 68e5c31..878d852 100644
--- a/components/hadith/AutoComplation.vue
+++ b/components/hadith/AutoComplation.vue
@@ -1,410 +1,122 @@
-<template>
-  <UInput
-    v-model="value"
-    placeholder="هوشمند جستجو کنید..."
-    :ui="{
-      trailing: '',
-
-      root: ['hadith-search-root'],
-      base: ['hadith-search-input'],
-    }"
-    :loading="loading"
-    trailing-icon="i-lucide-search"
-    autocomplete="on"
-    autofocus
-    highlight
-    @blur="onBlur"
-    @change="onChange"
-    @update:modelValue="onUpdateModel"
-  >
-  </UInput>
-</template>
-
-<script>
-import { mapState } from "pinia";
-import searchApi from "../../apis/searchApi.js";
-import { useCommonStore } from "@stores/commonStore";
-
-export default {
-  props: {
-    placeholder: {
-      default: "جستجو در هزاران محتوای قوانین و مقرارت",
-    },
-    contentKey: {
-      default: "qasection",
-    },
-    entityTheme: {
-      default: false,
-    },
-    showAppendSearchButton: {
-      default: true,
-    },
-    showPrepend: {
-      default: false,
-    },
-    showAppend: {
-      default: true,
-    },
-    textSearch: {
-      default: "",
-    },
-    modeInit: {
-      default: 0,
-    },
-    searchDomain: {
-      default() {
-        return [];
-      },
-    },
-    listAutocomplate: {
-      default() {
-        return [];
-      },
-    },
+<script setup lang="ts">
+const props = defineProps({
+  message: {
+    type: String,
   },
-  emits: ["getAutoComplateList"],
-  watch: {
-    modeInit(newVal = 1) {
-      this.mode = newVal;
-    },
-    textSearch(newVal) {
-      this.localTextSearch = newVal;
-    },
+});
+const emit = defineEmits(["response-ready"]);
+
+const users = ref<Sample[]>([
+  {
+    label: "Leanne Graham",
+    value: "1",
+    icon: "i-lucide-clock",
   },
-  beforeMount() {
-    // this.inputPopupState = this.inputPopupState;
+  {
+    label: "Ervin Howell",
+    value: "2",
+    icon: "i-lucide-clock",
   },
-  mounted() {
-    this.localTextSearch = this.textSearch;
-
-    if (window.localStorage.getItem([this.historySearchRecent])) {
-      try {
-        this.historySearch = JSON.parse(
-          window.localStorage.getItem([this.historySearchRecent])
-        );
-      } catch (e) {
-        window.localStorage.removeItem([this.historySearchRecent]);
-      }
-    }
+  {
+    label: "Clementine Bauch",
+    value: "3",
+    icon: "i-lucide-clock",
   },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.handleResize);
-    window.removeEventListener("load", this.handleResize);
-    document.removeEventListener("click", this.handleClickOutside);
-  },
-  data() {
-    return {
-      loading: false,
-      value: "",
-      localListAutocomplate: [],
-      typingTimer: undefined,
-      doneTypingInterval: 800,
-      localTextSearch: "",
-      historySearch: [],
+]);
 
-      inputPopupState: 0,
-      mode: 1,
-      tagLiSelected: null,
-      inputfocused: false,
-      isLastKeyCodeArrow: false,
-      historySearchRecent: "historysearchrecent",
-    };
-  },
-  computed: {
-    ...mapState(useCommonStore, ["domainActiveGetter"]),
-  },
-  methods: {
-    // on input changed
-    onUpdateModel() {
-      console.info("onUpdateModel");
-    },
-    // on input blur
-    onBlur() {
-      // console.info("onblue");
-    },
-    // on button click
-    onChange() {
-      console.info("onChange");
-    },
-    /**
-     *    تنظیم آیتم انتخاب‌ شده و شروع جستجو.
-     * @param {Object} navItem - آیتم انتخاب‌شده.
-     */
-    setDomainField(navItem) {
-      this.$emit("onSetDomainField", navItem);
-      // this.prevSearchStart();
-    },
-    async getAutoComplateList() {
-      this.localListAutocomplate = [];
-      if (this.localTextSearch == "") return;
+export type Sample = { label: string; value: string; icon: string };
 
-      let index_key = this.contentKey;
-      if (!index_key) return;
+const searchTerm = ref("");
+const open = ref(false);
+const value = ref<Sample>();
+const loading = ref(false);
 
-      let url = searchApi.search.autoComplate;
+// fetch history list from backend(ssr)
+// const { data: users, status } = await useFetch(
+//   "https://jsonplaceholder.typicode.com/users",
+//   {
+//     transform: (data: { id: number; name: string }[]) => {
+//       return (
+//         data?.map((user) => ({
+//           label: user.name,
+//           value: String(user.id),
+//           avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
+//         })) || []
+//       );
+//     },
+//     lazy: true,
+//   }
+// );
 
-      url = url.replace("{{appname}}", buildName());
-      url = url.replace("{{index_key}}", index_key);
-      url = url.replace("{{filter}}", "q=" + this.localTextSearch);
+const onBlur = () => {
+  // console.info("onBlue");
+};
+const onChange = () => {
+  // console.info("onChange");
+};
+const onUpdateModel = (newVal) => {
+  // console.info("onUpdateModel", newVal);
+};
+const onSearch = () => {
+  console.info("onSearch");
+};
+const onKeyDown = () => {
+  // console.info("onKeyDown");
+};
+const onKeyUp = () => {
+  // console.info("onKeyUp");
+};
+const onSend = () => {
+  console.info("onSend");
 
-      try {
-        const { $api } = useNuxtApp();
-        const response = await $api(url, {
-          baseURL: repoUrl(),
-        });
-
-        this.localListAutocomplate = response.hits?.hits;
-        this.inputPopupState = 3;
-      } catch (err) {}
-    },
-
-    onKeyDown() {
-      clearTimeout(this.typingTimer);
-      this.typingTimer = undefined;
-    },
-    /**
-     * کنترل تایمر تکمیل خودکار و ارسال کوئری.
-     * تایمر فعلی را پاک می‌کند و یک تایمر جدید با یک تاخیر مشخص تنظیم می‌کند تا کوئری را ارسال کند.
-     */
-    toggleAutocomplete(event) {
-      // برای کلید حرکت پایین درخواست اضافی نرود
-      if (
-        event.keyCode === 40 ||
-        event.keyCode === 38 ||
-        event.keyCode === 13
-      ) {
-        this.isLastKeyCodeArrow = event.keyCode === 40 || event.keyCode === 38;
-        return;
-      }
-
-      this.isLastKeyCodeArrow = false;
-
-      if (!this.inputfocused && this.inputPopupState === 3) {
-        return;
-      }
-
-      if (this.typingTimer) {
-        clearTimeout(this.typingTimer);
-        this.typingTimer = undefined;
-      } else {
-        this.typingTimer = setTimeout(() => {
-          this.getAutoComplateList();
-          this.typingTimer = undefined;
-        }, this.doneTypingInterval);
-      }
-    },
-
-    setInputFocus() {
-      this.inputfocused = true;
-      // this.inputPopupfocused=false
-    },
-    /**
-     * شروع جستجو را کنترل می‌کند.
-     * @event prevSearchStart
-     */
-    prevSearchStart(event) {
-      if (
-        this.isLastKeyCodeArrow &&
-        event.keyCode === 13 &&
-        this.inputPopupState != 0
-      ) {
-        this.selectAutocomplate2();
-        this.isLastKeyCodeArrow = false;
-        return;
-      }
-
-      this.tagLiSelected = null;
-      this.inputPopupState = 0;
-      this.addHistorySearch(this.localTextSearch);
-
-      let tt = myEncodeQuery(this.localTextSearch);
-      this.$emit("onSearchStart", tt);
-      // this.searchStart(tt);
-    },
-    /**
-     *نمایش سابقه جستجو.
-     */
-    showHisory() {
-      setTimeout(() => {
-        if (this.localTextSearch == "") this.inputPopupState = 1;
-        else {
-          this.inputPopupState = 0;
-          this.tagLiSelected = null;
-        }
-      }, 100);
-    },
-    /**
-     * کنترل کلیک‌های خارج از المان.
-     */
-    keyupdiv(event) {
-      // 13:enter
-      // 8:backspace
-      if (this.inputfocused == false) return;
-      if (this.inputPopupState == 0 || this.inputPopupState == 2) return;
-      var el = "";
-      el =
-        this.inputPopupState == 1
-          ? this.$refs["his_ul"]
-          : this.$refs["auto_complate_ul"];
-
-      if (!el || !el.firstChild) return;
-
-      const selectItem = (item) => {
-        this.tagLiSelected = item;
-        this.tagLiSelected?.classList.add("selected");
-        this.tagLiSelected?.focus();
-      };
-
-      // 40: arrow down
-      // 38: arrow up
-      if (this.inputfocused == true && event.keyCode === 40) {
-        if (this.tagLiSelected) {
-          this.tagLiSelected?.classList.remove("selected");
-          const next = this.tagLiSelected?.nextSibling || el.firstChild;
-          selectItem(next);
-        } else {
-          selectItem(el?.firstChild);
-        }
-      } else if (this.inputfocused == true && event.keyCode === 38) {
-        if (this.tagLiSelected) {
-          this.tagLiSelected?.classList.remove("selected");
-          const prev = this.tagLiSelected?.previousSibling || el.lastChild;
-          selectItem(prev);
-        } else {
-          selectItem(el?.lastChild);
-        }
-      }
-      // 46: delete
-      else if (this.inputfocused == true && event.keyCode === 46) {
-        let index = this.tagLiSelected?.getAttribute("data-key");
-
-        this.removeHistorySearch(index);
-      }
-    },
-    onClickOutside() {
-      if (this.inputPopupState == 1 || this.inputPopupState == 3) {
-        this.inputPopupState = 0;
-        this.tagLiSelected = null;
-      }
-    },
-    selectAutocomplate(item) {
-      this.tagLiSelected = null;
-      this.inputPopupState = 0;
-      this.localTextSearch = item;
-
-      this.$emit("onSearchStart", this.localTextSearch);
-      // this.$emit("onSearchStart", {
-      //   textSearch: this.localTextSearch,
-      //   searchItem: item,
-      // });
-    },
-
-    selectHistorySearch(item) {
-      this.localTextSearch = item;
-      this.$emit("onSearchStart", this.localTextSearch);
-    },
-
-    removeHistorySearch(x) {
-      this.tagLiSelected = null;
-      this.historySearch.splice(x, 1);
-      this.saveHistorySearch();
-    },
-    saveHistorySearch() {
-      const parsed = JSON.stringify(this.historySearch);
-      window.localStorage.setItem([this.historySearchRecent], parsed);
-    },
-    getHighlightAutocomplate(item) {
-      if (!item) return "";
-
-      let html = "";
-
-      let key = "title";
-      if (this.contentKey == "qasection" || this.contentKey == "rgsection") {
-        key = "qanon_title";
-        if (item?.highlight[key]) html = item.highlight[key][0];
-        if (!html) {
-          let key1 = key + ".ph";
-          if (item?.highlight[key1]) html = item.highlight[key1][0];
-        }
-
-        if (!html) {
-          let key1 = key + ".fa";
-          if (item?.highlight[key1]) html = item.highlight[key1][0];
-        }
-
-        let key2 = "ts_date";
-        if (item?._source[key2]) {
-          html += `<span style="color: #a7a098;"> - تاریخ: ${item._source[key2]}</span>`;
-        }
-      }
-
-      if (this.contentKey == "sanad") {
-        Object.values(item?.highlight).forEach((element, index) => {
-          html += element[0];
-        });
-      }
-
-      return html;
-    },
-
-    addHistorySearch(newSearch = "") {
-      if (newSearch == "") {
-        return;
-      }
-      var index = this.historySearch.indexOf(newSearch);
-      if (index != -1) {
-        this.historySearch.splice(index, 1);
-      }
-
-      this.historySearch.unshift(newSearch);
-      this.saveHistorySearch();
-    },
-    saveHistorySearch() {
-      const parsed = JSON.stringify(this.historySearch);
-      window.localStorage.setItem([this.historySearchRecent], parsed);
-    },
-
-    selectAutocomplate2(item) {
-      if (!item) {
-        if (this.localListAutocomplate.length) {
-          item = this.localListAutocomplate[this.tagLiSelected?.value];
-        }
-      }
-
-      let key = "title";
-      if (this.contentKey == "qasection" || this.contentKey == "rgsection")
-        key = "qanon_title";
-
-      this.inputfocused = false;
-      this.searchinput?.blur();
-      this.localTextSearch = item?._source[key];
-
-      this.$emit("onSearchStart", this.localTextSearch);
-      // this.$emit("onSearchStart", {
-      //   textSearch: this.localTextSearch,
-      //   searchItem: item,
-      // });
-
-      if (!item) {
-        this.localTextSearch = this.tagLiSelected?.innerText;
-        this.addHistorySearch(this.localTextSearch);
-
-        let tt = myEncodeQuery(this.localTextSearch);
-
-        this.$emit("onSearchStart", tt);
-        // this.$emit("onSearchStart", { textSearch: tt, searchItem: item });
-      }
-
-      this.inputPopupState = 0;
-      this.tagLiSelected = null;
-    },
-  },
+  emit("response-ready", "Hello from Child!");
 };
 </script>
 
+<template>
+  <div class="hadith-search-root">
+    <UInputMenu
+      class="w-full"
+      :items="users || []"
+      v-model="value"
+      v-model:open="open"
+      v-model:search-term="searchTerm"
+      placeholder="هوشمند جستجو کنید..."
+      :ui="{
+        base: ['hadith-search-input'],
+      }"
+      :content="{
+        align: 'start',
+        side: 'bottom',
+        sideOffset: 4,
+      }"
+      :loading="loading"
+      highlight
+      highlightOnHover
+      @focus="open = true"
+      @blur="onBlur"
+      @change="onChange"
+      @update:modelValue="onUpdateModel"
+      @update:searchTerm="onUpdateModel"
+      @keydown="onKeyDown"
+      @keyup="onKeyUp"
+      @keydown.enter="onSend"
+    >
+    </UInputMenu>
+
+    <UButton class="my-trailing-button">
+      <UIcon @click.prevent="onSearch" name="i-lucide-search" />
+    </UButton>
+  </div>
+</template>
+
 <style>
 .hadith-search-root {
-  width: 656px;
+  position: relative;
+  max-width: 656px;
+  width: 100%;
+  margin: 0 1em;
+
   &::before {
     content: "";
 
@@ -416,58 +128,48 @@ export default {
     backdrop-filter: blur(60px);
     background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
     filter: blur(60px);
-    /* transform: rotate(180deg); */
-
     width: 626px;
     height: 68px;
-    z-index: 1;
+    z-index: 0;
+  }
+}
+.my-trailing-button {
+  position: absolute;
+
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+
+  padding: 0;
+  border-radius: 50px;
+  background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
+  left: 12px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    transition: all 0.2s ease-in-out;
+    background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
   }
 
   & > span {
-    z-index:3;
-    width: 48px;
-    height: 48px;
-    justify-content: center;
-    align-items: center;
+    width: 18px;
+    height: 18px;
 
-    padding: 0;
-    /* padding-bottom: 6px; */
-    border-radius: 50px;
-    /* border-bottom-width: 1px; */
-    background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
-    left: 12px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-      transition: all 0.2s ease-in-out;
-      background: linear-gradient(320.71deg, #90ceb3 6.56%, #daf1e8 69.69%);
-    }
-
-    & > span {
-      width: 18px;
-      height: 18px;
-      /* border-width: 1.5px; */
-      /* border: 1.5px solid; */
-
-      /* border-image-source: linear-gradient(
-        102.02deg,
-        #4be8ae 7.38%,
-        #00a762 91.78%
-      ); */
-    }
+    background-image: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
   }
 }
-
 .hadith-search-input {
-  z-index: 2;
+  z-index: 0;
 
   height: 72px;
   justify-content: space-between;
   padding-top: 12px;
-  padding-right: 24px;
+  padding-right: 12px;
   padding-bottom: 12px;
   padding-left: 12px;
   border-radius: 12px;
diff --git a/components/hadith/NavigationMenu.vue b/components/hadith/NavigationMenu.vue
index d029a00..445556a 100644
--- a/components/hadith/NavigationMenu.vue
+++ b/components/hadith/NavigationMenu.vue
@@ -100,45 +100,52 @@ const leftItem = ref([
   },
 ]);
 
+const isMobile = ref(false);
+const rerenderNavigation = ref(1);
+
 onMounted(() => {
-  if (window?.outerWidth < 576)
+  if (window?.outerWidth < 576) {
+    isMobile.value = true;
+    console.info("is less than 576");
+
     items.value = items.value.filter((item) => item.to != "/hadith/favorites");
+    rerenderNavigation.value++;
+  }
 });
 </script>
 
 <template>
-  <div class="fixed bottom-2 lg:top-2 right-0 left-0">
-    <client-only>
-      <UContainer class="flex justify-center my-navbar mx-3 lg:mx-auto">
-        <UNavigationMenu
-          highlight
-          :items="items"
-          class="data-[orientation=horizontal]:border-0 border-(--ui-border) data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
-        />
-        <div class="hidden lg:flex items-center">
-          <template v-for="(item, index) in leftItem">
-            <UDropdownMenu
-              v-if="item.children?.length"
-              :items="item.children"
-              :ui="{
-                content: 'w-48',
-              }"
-            >
-              <UButton icon="i-lucide-menu" color="neutral" variant="outline" />
-            </UDropdownMenu>
+  <div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
+    <UContainer class="flex justify-center my-navbar mx-3 lg:mx-auto">
+      <UNavigationMenu
+        :key="rerenderNavigation"
+        :disableHoverTrigge="isMobile"
+        :items="items"
+        class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
+      />
+      <div class="hidden lg:flex items-center">
+        <template v-for="(item, index) in leftItem">
+          <UDropdownMenu
+            v-if="item.children?.length"
+            :items="item.children"
+            :ui="{
+              content: 'w-48',
+            }"
+          >
+            <UButton icon="i-lucide-menu" color="neutral" variant="outline" />
+          </UDropdownMenu>
 
-            <ULink
-              v-else
-              raw
-              :to="item.to"
-              class="w-full h-full flex justify-center items-center"
-            >
-              <UIcon :name="item.icon" class="size-7" />
-            </ULink>
-          </template>
-        </div>
-      </UContainer>
-    </client-only>
+          <ULink
+            v-else
+            raw
+            :to="item.to"
+            class="w-full h-full flex justify-center items-center"
+          >
+            <UIcon :name="item.icon" class="size-7" />
+          </ULink>
+        </template>
+      </div>
+    </UContainer>
   </div>
 </template>
 
@@ -167,10 +174,55 @@ onMounted(() => {
 
       ul {
         li {
+          padding: 0;
+
           @media screen and (max-width: 991.99px) {
             flex: 1;
           }
 
+          .group {
+            &::before {
+              border-radius: 12px;
+            }
+
+            &:hover {
+              &::before {
+                background-color: color-mix(in oklab, #00a762 50%, transparent);
+                box-shadow: 0px 4px 10px 0px #00745933;
+                border-radius: 12px;
+              }
+            }
+
+            max-width: 112px;
+            height: 48px;
+            gap: 4px;
+            border-radius: 12px;
+            padding-top: 6px;
+            padding-right: 16px;
+            padding-bottom: 6px;
+            padding-left: 16px;
+
+            font-family: IRANSansX;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 21px;
+            letter-spacing: 0%;
+            text-align: center;
+
+            &[data-active=""] {
+              background: linear-gradient(
+                102.02deg,
+                #4be8ae 7.38%,
+                #00a762 91.78%
+              );
+              box-shadow: 0px 4px 10px 0px #00745933;
+
+              * {
+                color: #fff;
+              }
+            }
+          }
+
           .hide-label {
             .truncate {
               display: none;
diff --git a/components/hadith/hero-page/SectionOne.vue b/components/hadith/hero-page/SectionOne.vue
new file mode 100644
index 0000000..1ca812c
--- /dev/null
+++ b/components/hadith/hero-page/SectionOne.vue
@@ -0,0 +1,93 @@
+<template>
+  <section class="section-one flex flex-col justify-center">
+    <div class="bg-container h-full" :style="backgroundImageStyle">
+      <navigation-menu></navigation-menu>
+
+      <div class="text-logo flex justify-center flex-col items-center">
+        <NuxtImg fit="auto" quality="80" placeholder src="/img/logo.png" />
+        <div class="title">
+          کاوش با
+          <span class="badge-style"> هوش مصنوعی </span>
+          در احادیث اسلامی
+        </div>
+      </div>
+    </div>
+    <div class="search-box-container flex justify-center">
+      <auto-complation></auto-complation>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      logo: "",
+    };
+  },
+
+  computed: {
+    backgroundImageStyle() {
+      // Use $img to generate an optimized image URL
+      const optimizedImageUrl = this.$img("/img/background.png", {
+        quality: 80,
+      });
+
+      return {
+        backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
+      };
+    },
+  },
+  components: {
+    NavigationMenu: defineAsyncComponent(() =>
+      import("@hadith/components/hadith/NavigationMenu.vue")
+    ),
+    AutoComplation: defineAsyncComponent(() =>
+      import("@hadith/components/hadith/AutoComplation.vue")
+    ),
+  },
+};
+</script>
+<style scoped>
+.section-one {
+  .bg-container {
+    height: 521px;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    /* background-attachment: fixed; */
+    /* background-image: url("/img/background.svg"),
+        linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%); */
+  }
+
+  .text-logo {
+    padding-top: 10em;
+    position: relative;
+
+    .title {
+      margin-top: 3.5em;
+      font-family: IRANSansX;
+      font-size: 14px;
+      line-height: 21px;
+      letter-spacing: 0%;
+      text-align: center;
+      color: #1b2132;
+    }
+    .badge-style {
+      width: 100;
+      height: 23;
+      border-radius: 40px;
+      padding-right: 8px;
+      padding-bottom: 2px;
+      padding-left: 8px;
+      gap: 10px;
+      color: #fff;
+
+      background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
+    }
+  }
+
+  .search-box-container {
+    padding-top: 1em;
+    padding-bottom: 4em; /*64px */
+  }
+}
+</style>
diff --git a/components/hadith/hero-page/SectionTwo.vue b/components/hadith/hero-page/SectionTwo.vue
new file mode 100644
index 0000000..34324c6
--- /dev/null
+++ b/components/hadith/hero-page/SectionTwo.vue
@@ -0,0 +1,123 @@
+<template>
+  <section class="section-two">
+    <div class="flex flex-col items-center py-6">
+      <div>قابلیت ها</div>
+      <div>
+        <NuxtImg
+          width="32"
+          height="32"
+          fit="auto"
+          quality="80"
+          placeholder
+          src="/img/chevron-down.svg"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col lg:flex-row">
+      <div class="my-card card-one basis-full flex justify-center items-center">
+        <div class="inner-container">
+          <div>
+            <p class="title">جستجوی معنایی</p>
+            <p class="description">ارائه نتایج دقیق و معنادار از میان</p>
+            <p class="description">حجم انبوه متون حدیثی</p>
+          </div>
+
+          <NuxtImg
+            fit="auto"
+            quality="80"
+            placeholder
+            src="/img/card-one.png"
+          />
+        </div>
+      </div>
+      <div class="my-card card-two basis-full flex justify-center items-center">
+        <div class="inner-container">
+          <div class="">
+            <p class="title">جستجوی مترادف‌ها</p>
+            <p class="description">یافتن سریع واژگان مرتبط برای</p>
+            <p class="description">درک بهتر مفاهیم حدیثی</p>
+          </div>
+
+          <NuxtImg
+            fit="auto"
+            quality="80"
+            placeholder
+            src="/img/card-two.png"
+          />
+        </div>
+      </div>
+      <div
+        class="my-card card-three basis-full flex flex-col justify-center items-center"
+      >
+        <div class="inner-container">
+          <div>
+            <p class="title">مشابهت‌یابی حدیث</p>
+            <p class="description">امکان یافتن احادیث یا مفاهیمی</p>
+            <p class="description">با معنای مشابه یک حدیث</p>
+          </div>
+
+          <NuxtImg
+            fit="auto"
+            quality="80"
+            placeholder
+            src="/img/card-three.png"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+export default {};
+</script>
+<style scoped>
+.section-two {
+  font-weight: 200;
+  font-size: 20px;
+  line-height: 30px;
+  letter-spacing: 0%;
+  text-align: center;
+
+  .my-card {
+    background-repeat: no-repeat;
+    background-size: auto;
+    height: 660px;
+
+    .inner-container {
+      max-width: 21.25em;
+      margin: auto;
+    }
+    .title {
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 36px;
+      letter-spacing: 0%;
+      color: #1b2132;
+      text-align: right;
+    }
+
+    .description {
+      font-weight: 300;
+      font-size: 20px;
+      line-height: 30px;
+      letter-spacing: 0%;
+      text-align: right;
+      color: #626b84;
+    }
+
+    &.card-one {
+      background-image: url("/img/card-one-bgi.png"),
+        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
+    }
+    &.card-two {
+      background-image: url("/img/card-two-bgi.png"),
+        linear-gradient(329.16deg, #b9fde0 13.45%, #eefff8 63.57%);
+    }
+    &.card-three {
+      background-image: url("/img/card-three-bgi.png"),
+        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
+    }
+  }
+}
+</style>
diff --git a/pages/hadith/index.vue b/pages/hadith/index.vue
index 9849ef5..f0b3295 100644
--- a/pages/hadith/index.vue
+++ b/pages/hadith/index.vue
@@ -1,101 +1,10 @@
 <template>
-  <HadithLayout :menu="sidbarMenu">
-    <section class="section-one flex flex-col justify-center">
-      <div class="bg-container h-full" :style="backgroundImageStyle">
-        <navigation-menu></navigation-menu>
-
-        <div class="text-logo flex justify-center flex-col items-center">
-          <NuxtImg fit="auto" quality="80" placeholder src="/img/logo.png" />
-          <div class="title">
-            کاوش با
-            <span class="badge-style"> هوش مصنوعی </span>
-            در احادیث اسلامی
-          </div>
-        </div>
-      </div>
-      <div class="search-box-container flex justify-center">
-        <auto-complation></auto-complation>
-      </div>
-    </section>
-
-    <section class="section-two">
-      <div class="flex flex-col items-center py-6">
-        <div>قابلیت ها</div>
-        <div>
-          <NuxtImg
-            width="32"
-            height="32"
-            fit="auto"
-            quality="80"
-            placeholder
-            src="/img/chevron-down.svg"
-          />
-        </div>
-      </div>
-
-      <div class="flex flex-col lg:flex-row">
-        <div class="my-card card-one basis-full flex justify-center items-center">
-          <div class="inner-container">
-            <div>
-              <p class="title">جستجوی معنایی</p>
-              <p class="description">ارائه نتایج دقیق و معنادار از میان</p>
-              <p class="description">حجم انبوه متون حدیثی</p>
-            </div>
-
-            <NuxtImg
-              fit="auto"
-              quality="80"
-              placeholder
-              src="/img/card-one.png"
-            />
-          </div>
-        </div>
-        <div class="my-card card-two basis-full flex justify-center items-center">
-          <div class="inner-container">
-            <div class="">
-              <p class="title">جستجوی مترادف‌ها</p>
-              <p class="description">یافتن سریع واژگان مرتبط برای</p>
-              <p class="description">درک بهتر مفاهیم حدیثی</p>
-            </div>
-
-            <NuxtImg
-              fit="auto"
-              quality="80"
-              placeholder
-              src="/img/card-two.png"
-            />
-          </div>
-        </div>
-        <div
-          class="my-card card-three basis-full flex flex-col justify-center items-center"
-        >
-          <div class="inner-container">
-            <div>
-              <p class="title">مشابهت‌یابی حدیث</p>
-              <p class="description">امکان یافتن احادیث یا مفاهیمی</p>
-              <p class="description">با معنای مشابه یک حدیث</p>
-            </div>
-
-            <NuxtImg
-              fit="auto"
-              quality="80"
-              placeholder
-              src="/img/card-three.png"
-            />
-          </div>
-        </div>
-      </div>
-    </section>
+  <HadithLayout>
+    <section-one></section-one>
+    <section-two></section-two>
   </HadithLayout>
 </template>
 <script>
-import { useStorage } from "@vueuse/core";
-import { mapActions, mapState } from "pinia";
-
-import { useHadithStore } from "@hadith/stores/hadithStore";
-import { useCommonStore } from "~/stores/commonStore";
-import hadithApi from "@hadith/apis/hadithApi.js";
-import navbarMenu from "@hadith/json/hadith/menu.json";
 
 export default {
   name: "hadith",
@@ -115,117 +24,12 @@ export default {
       name: "hadith",
     });
   },
-
-  created() {
-    this.httpService = useNuxtApp()["$http"];
-  },
-
-  async mounted() {
-    let schemaExist = this.searchActiveTabGetter && this.searchSchemaGetter;
-
-    if (!schemaExist) this.getSchemas();
-    else this.setSearchDomain(this.searchActiveTabGetter);
-
-    if (window.outerWidth < 992) {
-      this.$store.commit("TOGGLE_SIDEBAR_MENU");
-      this.showMobileFilterList = true;
-    }
-  },
-
-  data() {
-    return {
-      httpService: {},
-      logo: "",
-      sidbarMenuDefault: navbarMenu,
-    };
-  },
-
-  computed: {
-    // ...mapState(useHadithStore, [
-    //   "domainActiveGetter",
-    //   "searchActiveTabGetter",
-    //   "searchSchemaGetter",
-    //   "searchSynonymTitleGetter",
-    // ]),
-    ...mapState(useCommonStore, [
-      "currentUser",
-      "organNameGetter",
-      "isSidebarCollapsed",
-      "userPermisionGetter",
-    ]),
-
-    sidbarMenu() {
-      return this.sidbarMenuDefault;
-    },
-
-    backgroundImageStyle() {
-      // Use $img to generate an optimized image URL
-      const optimizedImageUrl = this.$img("/img/background.png", {
-        quality: 80,
-      });
-
-      return {
-        backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
-      };
-    },
-  },
-  methods: {
-    ...mapActions(useCommonStore, [
-      "TOGGLE_SIDEBAR_MENU",
-      "sidebarCollapsedSetter",
-    ]),
-
-    // ...mapActions(useHadithStore, [
-    //   "searchActiveTabSetter",
-    //   "searchSchemaSetter",
-    //   "domainActiveSetter",
-    //   "searchSynonymTitleSetter",
-    // ]),
-
-    async getSchemas() {
-      let localStoageSearchSchema = useStorage("searchSchema", undefined).value;
-
-      if (localStoageSearchSchema) {
-        let searchSchema = JSON.parse(localStoageSearchSchema);
-        this.searchSchemaSetter(searchSchema);
-        this.searchActiveTabSetter(searchSchema[0]);
-      } else {
-        const payload = {
-          organ: this.organNameGetter,
-          system: "search",
-          build_state: buildState(),
-        };
-        const url = repoUrl() + hadithApi.schema.list;
-
-        this.httpService
-          .postRequest(url, payload)
-          .then((res) => {
-            this.searchSchemaSetter(res.data.search);
-            this.searchActiveTabSetter(res.data.search[0]);
-            this.fetchingData = false;
-
-            const toast = useToast();
-            toast.add({
-              title: "Success",
-              description: "Your action was completed successfully.",
-              color: "success",
-            });
-          })
-          .catch((err) => {
-            this.fetchingData = false;
-          });
-      }
-    },
-  },
   components: {
-    AutoComplation: defineAsyncComponent(() =>
-      import("@hadith/components/hadith/AutoComplation.vue")
+    SectionOne: defineAsyncComponent(() =>
+      import("@hadith/components/hadith/hero-page/SectionOne.vue")
     ),
-    NavigationMenu: defineAsyncComponent(() =>
-      import("@hadith/components/hadith/NavigationMenu.vue")
-    ),
-    AutoComplation: defineAsyncComponent(() =>
-      import("@hadith/components/hadith/AutoComplation.vue")
+    SectionTwo: defineAsyncComponent(() =>
+      import("@hadith/components/hadith/hero-page/SectionTwo.vue")
     ),
     HadithLayout: defineAsyncComponent(() =>
       import("@hadith/layouts/HadithLayout.vue")
diff --git a/pages/hadith/search.vue b/pages/hadith/search.vue
index 700195a..c1fcd55 100644
--- a/pages/hadith/search.vue
+++ b/pages/hadith/search.vue
@@ -1,1206 +1,107 @@
-<template>
-  <NuxtLayout name="search-layout" :menu="sidbarMenu">
-    <div class="container-fluid">
-      <div class="row border-bottom header-height main-page__content-header">
-        <div
-          class="col-12 order-1 order-lg-1 col-lg-3 d-flex justify-content-start"
-        >
-          <div
-            class="d-flex position-relative align-items-center"
-            v-if="searchChartSchemaGetter?.length"
-          >
-            <button
-              name="button"
-              type="button"
-              class="toggle-mobile-nav dropdown-hamburger d-md-none"
-              @click.prevent="toggleSidebarMenu()"
-            >
-              <span class="sr-only">باز کردن منوی کنار</span>
-              <svg class="s18" data-testid="sidebar-icon">
-                <use href="assets/common/img/icons.svg#sidebar"></use>
-              </svg>
-            </button>
-            <label for="repositories-desktop" class="ms-2 no-wrap">
-              بانک داده
-            </label>
-
-            <USelectMenu
-              v-model="dataBankSelectValue"
-              :options="searchChartSchemaGetter"
-              placeholder="انتخاب فهرست"
-              @update:model-value="onSelectNavigation"
-            >
-            </USelectMenu>
-
-            <!-- 
-            <multiselect
-              :allow-empty="false"
-              :searchable="true"
-              :close-on-select="true"
-              :show-labels="false"
-              label="label"
-              track-by="key"
-              placeholder="انتخاب فهرست"
-              :value="searchChartActiveSchemaGetter"
-              :options="searchChartSchemaGetter"
-              @select="onSelectNavigation"
-              :hide-selected="false"
-              :max-height="200"
-              id="repositories-desktop"
-            >
-            </multiselect> -->
-          </div>
-        </div>
-        <div
-          class="col-12 order-2 order-lg-1 col-lg-7 d-flex align-items-end justify-content-center"
-        >
-          <div class="nav-tabs-container nav-tabs border-bottom-0">
-            <ul class="nav">
-              <li
-                class="nav-item desktop"
-                v-for="(navItem, index) in searchChartActiveSchemaGetter?.items"
-                :key="index"
-              >
-                <button
-                  :title="navItem.label"
-                  type="button"
-                  @click.prevent="updateCategoryList(navItem, index)"
-                  class="btn nav-link"
-                  :class="{
-                    active: searchChartActiveTabGetter?.key == navItem.key,
-                  }"
-                >
-                  {{ navItem.label }}
-                </button>
-              </li>
-              <li
-                class="nav-item mobile tabs-more-btn d-md-none"
-                v-if="searchChartActiveSchemaGetter?.items?.length > 3"
-              >
-                <div class="dropdown">
-                  <button
-                    class="btn"
-                    type="button"
-                    id="dropdownMenuButton"
-                    data-bs-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                  >
-                    <svg class="icon icon-Component-81--1">
-                      <use xlink:href="#icon-Component-81--1"></use>
-                    </svg>
-                  </button>
-                  <div
-                    class="dropdown-menu"
-                    aria-labelledby="dropdownMenuButton"
-                  >
-                    <a
-                      class="dropdown-item"
-                      @click.prevent="updateCategoryList(navItem, index)"
-                      v-for="(
-                        navItem, index
-                      ) in searchChartActiveSchemaGetter?.items"
-                      :key="index"
-                      :class="{
-                        active: searchChartActiveTabGetter?.key == navItem.key,
-                      }"
-                      >{{ navItem.label }}</a
-                    >
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col">
-          <div
-            class="d-flex pt-1 pb-2 justify-content-center custom-filter-container"
-          >
-            <div
-              v-if="searchChartActiveTabGetter?.chartBase"
-              class="d-flex align-items-center"
-            >
-              <label
-                for="choose-filter"
-                class="d-none d-lg-inline label-change no-wrap ms-1"
-                >{{ searchChartActiveTabGetter?.chartBase?.label }}</label
-              >
-              <USelectMenu
-                v-model="schemaFilters"
-                :options="searchChartActiveTabGetter?.chartBase?.items"
-                :placeholder="searchChartActiveTabGetter?.chartBase?.label"
-                @update:model-value="changeFilter"
-              >
-              </USelectMenu>
-
-              <!-- <multiselect
-                :searchable="true"
-                :close-on-select="true"
-                :show-labels="false"
-                label="label"
-                track-by="key"
-                :placeholder="searchChartActiveTabGetter?.chartBase?.label"
-                v-model="schemaFilters"
-                :options="searchChartActiveTabGetter?.chartBase?.items"
-                @select="changeFilter"
-                :hide-selected="false"
-                :max-height="200"
-                openDirection="rtl"
-                id="chart-base"
-              >
-                <label slot="noResult">موردی پیدا نشد.</label>
-              </multiselect> -->
-            </div>
-            <div
-              v-if="searchChartActiveTabGetter?.chartType"
-              class="d-flex align-items-center"
-            >
-              <label
-                for="filter-chart"
-                class="d-none d-lg-inline me-2 label-change no-wrap ms-1"
-                >{{ searchChartActiveTabGetter?.chartType?.label }}:</label
-              >
-              <USelectMenu
-                v-model="pieModel"
-                :options="searchChartActiveTabGetter?.chartBase?.items"
-                :placeholder="searchChartActiveTabGetter?.chartType?.label"
-                @update:model-value="changeChart"
-              >
-              </USelectMenu>
-
-              <!-- <multiselect
-                :allow-empty="false"
-                :searchable="true"
-                :close-on-select="true"
-                :show-labels="false"
-                label="chartName"
-                track-by="chartkey"
-                :placeholder="searchChartActiveTabGetter?.chartType?.label"
-                v-model="pieModel"
-                :options="searchChartActiveTabGetter?.chartType?.items"
-                @select="changeChart"
-                :hide-selected="false"
-                :max-height="200"
-                id="chart-type"
-              >
-              </multiselect> -->
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
-        <div
-          class="col-8 col-lg-3 filter-list-container"
-          :class="{ expanded: showFilter }"
-        >
-          <div class="mobile-mode">
-            <button class="btn" @click.prevnet="showFilter = !showFilter">
-              <svg
-                v-if="showFilter"
-                class="icon icon-chevron-double-right ms-1"
-              >
-                <use xlink:href="#icon-chevron-double-right"></use>
-              </svg>
-              <svg v-else class="icon icon-chevron-double-left">
-                <use xlink:href="#icon-chevron-double-left"></use>
-              </svg>
-              <!-- بستن فیلتر -->
-            </button>
-          </div>
-          <chart-filter-list
-            v-if="showInCharts"
-            :key="componentCounter"
-            :listFilter="listFilter"
-            :activeTabGetter="searchChartActiveSchemaGetter"
-            @hide-panel="showToggleListPanel()"
-            @changeAmplify="onChangeAmplify"
-            @changeType="onChangeType"
-            @changeCode="onChangeCode"
-            @filterUpdate="filterUpdate"
-          ></chart-filter-list>
-        </div>
-        <div class="col">
-          <div v-if="canView">
-            <ChartContent
-              :activeTabGetter="searchChartActiveSchemaGetter"
-              :schemaFilters="schemaFilters"
-              :selectedCategory="schemaFilters?.key"
-              :dataChart="dataChart"
-              :chartComponentName="chartComponentName"
-              class="ChartContent"
-            ></ChartContent>
-          </div>
-          <no-data v-else>
-            <p class="text-center p-3">عدم دسترسی</p>
-          </no-data>
-        </div>
-      </div>
-    </div>
-  </NuxtLayout>
-</template>
-
-<script>
-import { mapState, mapActions } from "pinia";
-import searchApis from "@search/apis/searchApi";
-import chartType from "@search/json/search/json/chart.json";
-
-import sidbarMenuDefault from "@search/json/search/json/menu.json";
-import sidbarMenuMin from "@search/json/search/json/sidbarMenuMin.json";
-
-import tableActions from "@search/json/search/json/listTableContextMenu";
-import { useSearchStore } from "@search/stores/searchStore";
-
-export default {
-  name: "searchChart",
-
-  setup() {
-    useHead({
-      title: import.meta.env.VITE_ENTITY_PAGE_TITLE,
-      meta: [{ name: "description", content: "My page description" }],
-      bodyAttrs: {
-        class: import.meta.env.VITE_SEARCH_PAGE_TITLE,
-      },
-    });
-    definePageMeta({
-      layout: false,
-      name: "searchChart",
-    });
+<script setup>
+definePageMeta({
+  layout: false,
+  name: "hadithSearch",
+});
+useHead({
+  name: "hadithSearch",
+  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
+  meta: [
+    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
+  ],
+  bodyAttrs: {
+    class: import.meta.env.VITE_HADITH_SYSTEM,
   },
-
-  mounted() {
-    let schemaExist =
-      this.searchChartActiveTabGetter && this.searchChartSchemaGetter;
-
-    if (schemaExist) {
-      this.dataBankSelectValue = this.searchChartActiveSchemaGetter;
-      this.schemaFilters = this.searchChartActiveTabGetter?.chartBase?.items[0];
-      this.pieModel = this.searchChartActiveTabGetter?.chartType?.items[0];
-
-      // when component load, setting default chart component to load based on the active tab.
-      this.chartComponentName = this.searchChartActiveTabGetter.componentName;
-
-      this.intiChartData();
-    } else this.getSchemas();
-
-    if (window.outerWidth < 992) {
-      this.$store.commit("TOGGLE_SIDEBAR_MENU");
-    }
-
-    if (this.searchChartActiveTabGetter?.key == "tree-graph") {
-      this.showInCharts = false;
-    } else {
-      this.showInCharts = true;
-    }
-  },
-  data() {
-    return {
-      dataBankSelectValue: {},
-      searchingState: false,
-
-      showFilter: false,
-      listFilter: [],
-      dataChart: [],
-      chartComponentName: chartType[0].componentName,
-      pieModel: undefined,
-      schemaFilters: undefined,
-      listAmplify: [],
-      // addressBarUrl: null,
-
-      viewMode: "table",
-      tableTitle: "  فهرست کدهای تقیح 51 گانه  /  آمار، برنامه و بودجه ",
-      changePageFilter: "",
-
-      lastSearchInListMode: true,
-      showfilterCategory: true,
-      activeListItem: undefined,
-      treeLists: "",
-      filterUrl: "",
-      page: 0,
-      activeTab: "",
-      // activeTab: null,
-      fetchingDataForExport: false,
-      componentCounter: 1,
-      selectedNavigationIndex: undefined,
-      selectedNavigation: undefined,
-      navigationOptions: [],
-      fields: [],
-      statusPag: "",
-      fieldOne: null,
-      fieldTwo: null,
-      fieldThree: null,
-
-      listPanelSorting: undefined,
-      listPanelSorting: undefined,
-
-      tableActions: tableActions,
-      showListPanel: false,
-      showInCharts: true,
-      currentPageName: "list",
-
-      sidbarMenuDefault: sidbarMenuDefault,
-      sidbarMenuMin: sidbarMenuMin,
-
-      canView: true,
-      pagination: {
-        pages: 0,
-        total: 0,
-        page: 1,
-        offset: 0,
-        limit: 10,
-      },
-      fetchingData: false,
-      sorting: {
-        sortby: "id",
-        sortorder: "asc", // asc | desc
-      },
-      colors: [
-        "#5470C6",
-        "#d44646",
-        "#008b8b",
-        "#3BA272",
-        "#FC8452",
-        "#9A60B4",
-        "#EA7CCC",
-        "#F59F00",
-        "#ddc4b0",
-        "#73C0DE",
-        "#b333ad",
-        "#e86c6b",
-        "#39cfed",
-      ],
-      currentIndex: 0,
-    };
-  },
-  computed: {
-    ...mapState(useCommonStore, [
-      "currentUser",
-      "organNameGetter",
-      "isSidebarCollapsed",
-    ]),
-    ...mapState(useSearchStore, [
-      "searchChartSchemaGetter",
-      "searchChartActiveSchemaGetter",
-      "searchChartActiveTabGetter",
-    ]),
-
-    getTableColumns() {
-      let subjectIndex = this.fields.findIndex(
-        (item) => item.name == "subject"
-      );
-      this.subjectItemState = false;
-      this.subjectTitle = "";
-      if (
-        subjectIndex >= -1 &&
-        this.listGetter != undefined &&
-        subjectIndex == this.listGetter.length - 1
-      ) {
-        this.subjectItemState = true;
-        this.subjectTitle = this.listGetter[subjectIndex]?.key;
-        return this.selectedProjectGetter?.table_columns_subject;
-      }
-      return this.selectedProjectGetter?.table_columns;
-    },
-    repoUrl() {
-      return import.meta.env.VITE_REPO + "/";
-    },
-    sidbarMenu() {
-      if (isMajlesBuild()) return this.sidbarMenuMin;
-      else return this.sidbarMenuDefault;
-    },
-  },
-  methods: {
-    ...mapActions(useSearchStore, [
-      "SET_SELECTED_PROJECT",
-      "SET_LIST",
-      
-      "searchChartActiveSchemaSetter",
-      "searchChartSchemaSetter",
-      "searchChartActiveTabSetter",
-    ]),
-    intiChartData() {
-      if (
-        this.searchChartActiveTabGetter?.key == "tree-graph"
-        // ||
-        // this.searchChartActiveTabGetter?.key == "Large-tree-map"
-      ) {
-        this.getListInTree();
-      } else this.getChartData();
-    },
-    async getListInTree() {
-      const payload = {
-        parent: 0,
-        sortby: "id",
-        projectid: this.schemaFilters?.id,
-        listtype: 0,
-        limit: 100,
-        listtype: 0,
-      };
-      let url = searchApis.chart.tree;
-      try {
-        const { $api } = useNuxtApp();
-        const res = await $api(url, {
-          baseURL: import.meta.env.VITE_REPO_BASE_URL,
-          method: "POST",
-          body: payload,
-        });
-
-        this.mainList = res.data;
-        this.dataChart = [
-          {
-            key_filter: this.schemaFilters?.key_filter,
-            projectId: this.schemaFilters?.id,
-            name: this.schemaFilters?.label,
-            children: this.ConvertDataToTree(this.mainList),
-            item: "Root",
-            id: "0",
-            disabled: true,
-            pid: "Root",
-            opened: true,
-            selected: false,
-            text: "Root",
-            label: {
-              backgroundColor: "#ee6666",
-            },
-            itemStyle: {
-              color: "#ee6666",
-            },
-          },
-        ];
-      } catch (err) {}
-    },
-    getNextColor() {
-      // Get the color at the current index
-      const color = this.colors[this.currentIndex];
-
-      // Update the index to the next color
-      this.currentIndex = (this.currentIndex + 1) % this.colors.length;
-
-      return color;
-    },
-    ConvertDataToTree(list) {
-      var finalList = [];
-      list.forEach((element) => {
-        const color = this.getNextColor();
-        finalList.push({
-          value: 0,
-          item: element,
-          value: element.title,
-          name: element.title,
-          text: element.title,
-          id: element.id,
-          pid: element.parent,
-          collapsed: true,
-          children: [],
-          // children: element.children > 0 ? [1] : [],
-          label: {
-            backgroundColor: color,
-          },
-          itemStyle: {
-            color: color,
-          },
-        });
-      });
-      return finalList;
-    },
-    // Basic data for all charts
-    async getChartData() {
-      let key = this.searchChartActiveSchemaGetter?.key;
-      let url = this.makeApiUrl(key);
-
-      // let otherParams = "";
-      // if (this.addressBarUrl) otherParams = this.addressBarUrl;
-      // url = url + otherParams
-
-      try {
-        const { $api } = useNuxtApp();
-        const res = await $api(url);
-
-        this.listFilter = res.aggregations ?? undefined;
-        if (
-          this.chartComponentName == "HiChartPie" ||
-          this.chartComponentName == "HiChartXy"
-        ) {
-          this.preparePieAndLineData(res);
-        } else if (this.chartComponentName == "MyTimeLine") {
-          this.dataChart = res.result;
-        } else this.dataChart = res.data;
-      } catch (err) {
-        this.dataChart = [];
-      }
-    },
-
-    changeChart(e) {
-      if (e.chartName == "دایره ای") {
-        this.chartComponentName = "HiChartPie";
-        this.pieModel = e;
-        this.getChartData();
-      } else if (e.chartName == "میله ای") {
-        this.chartComponentName = "HiChartXy";
-        this.pieModel = e;
-        this.getChartData();
-      }
-    },
-    changeFilter() {
-      this.intiChartData();
-    },
-    // Set url for getChartData()
-    makeApiUrl(type) {
-      if (this.chartComponentName == "MyTimeLine") {
-        let url = repoUrl() + searchApis.chart.timeline;
-
-        url = url.replace("{{appname}}", buildName());
-        url = url.replace("{{index_key}}", type);
-
-        if (this.filterUrl?.length) {
-          url += "/" + this.filterUrl;
-        }
-        return url;
-      } else if (
-        this.chartComponentName == "HiChartPie" ||
-        this.chartComponentName == "HiChartXy"
-      ) {
-        let url = repoUrl() + searchApis.chart.xy;
-        url = url.replace("{{appname}}", buildName());
-        url = url.replace("{{index_key}}", type);
-        if (this.schemaFilters?.key)
-          url = url.replace("{{field_key}}", this.schemaFilters?.key);
-        else url = url.replace("/{{field_key}}", "");
-
-        if (this.filterUrl?.length) {
-          url += "/" + this.filterUrl;
-        }
-
-        return url;
-      } else if (
-        this.chartComponentName == "largeTreeMapChart" ||
-        this.chartComponentName == "HiChartTreegraph"
-      ) {
-        let url = "";
-        let filter = "";
-        if (this.filterUrl?.length) {
-          filter += this.filterUrl;
-        }
-
-        url = searchApis.chart.chartTreeMap;
-        url = url.replace("{{chart_key}}", this.schemaFilters?.key);
-        // url = url.replace("{{chart_key}}", this.schemaFilters?.key_filter);
-        if (filter) url = url.replace("{{filter}}", filter);
-        else url = url.replace("/{{filter}}", "");
-
-        return url;
-      } else {
-        let field_key = this.navigationItem.name;
-        let url = repoUrl() + searchApis.chart.xy;
-        url = url.replace("{{appname}}", buildName());
-        url = url.replace("{{index_key}}", type);
-        url = url.replace("{{field_key}}", field_key);
-
-        // let filter = this.filterUrl;
-        // if (this.textAmplify != undefined && this.textAmplify != "") {
-        //   filter += "&o_am=" + this.textAmplify;
-        // }
-
-        if (this.filterUrl?.length) {
-          url += "/" + this.filterUrl;
-        }
-
-        return url;
-      }
-    },
-    // Set data for charts
-    preparePieAndLineData(res) {
-      // this.dataTreeMap = res.data ?? undefined;
-      this.dataChart = res.aggregations.result.buckets.map((item) => {
-        return {
-          name: item.key,
-          y: item.doc_count,
-        };
-      });
-
-      if (res.aggregations.result.sum_other_doc_count > 0) {
-        this.dataChart.push({
-          name: "-سایر-",
-          y: res.aggregations.result.sum_other_doc_count,
-        });
-      }
-    },
-
-    canSee(keyName) {
-      if (this.currentUser?.user_level > 1) return true;
-      return this.userPermisionGetter.includes(keyName);
-    },
-    onChangeAmplify(data) {
-      this.amplifyIndex = data;
-      this.changeAmplify();
-    },
-    onChangeType(data) {
-      this.searchType = data;
-      this.changeType();
-    },
-    onChangeCode(data) {
-      this.searchCode = data;
-      this.changeCode();
-    },
-    switchViewMode(mode) {
-      this.viewMode = mode;
-    },
-    changeHideFilter(event) {
-      if (event === 0) {
-        this.$refs.axis.classList.remove("hiden");
-        this.$refs.showFilter.classList.toggle("d-none");
-
-        this.showButton = false;
-        this.showFilter = true;
-      } else if (event === 1) {
-        this.$refs.axis.classList.add("hiden");
-        this.$refs.showFilter.classList.toggle("d-none");
-        this.showButton = true;
-        this.showFilter = false;
-      }
-    },
-    updateTitle(list) {
-      this.tableTitle = list.title;
-    },
-    updateCategoryList(navItem, index) {
-      if (navItem.key == "tree-graph") {
-        this.showInCharts = false;
-      } else {
-        this.showInCharts = true;
-      }
-      this.searchChartActiveTabSetter(navItem);
-      this.chartComponentName = navItem.componentName ?? "HiChartPie";
-      this.schemaFilters = navItem?.chartBase?.items[0] ?? undefined;
-      this.pieModel = navItem?.chartType?.items[0] ?? undefined;
-
-      // this.activeTab = navItem;
-      // if (navItem.label == "پایش زمانی") {
-      //   this.chartComponentName = "MyTimeLine";
-      // }
-      // else if (navItem.label == "دسته‌ای")
-      //   this.chartComponentName = "HiChartPie";
-      // else if (navItem.label == "درختی موضوعی")
-      //   this.chartComponentName = "largeTreeMapChart";
-      // else if (navItem.label == "تجمیعی موضوعی")
-      //   this.chartComponentName = "HiChartTreegraph";
-
-      // if (this.chartComponentName == "HiChartTreegraph") this.getListInTree();
-      // else this.getChartData();
-      this.intiChartData();
-    },
-
-    listChanged(tags) {
-      let res = [];
-      tags.split(",").forEach((e) => {
-        let i = e.lastIndexOf("_");
-        if (i != -1) {
-          res.push(e.substring(0, i));
-        }
-      });
-      this.setFilterNavigate(res);
-    },
-    setFilterNavigate(value = []) {
-      this.filterNavigate = value;
-    },
-    filterUpdate: function (filter) {
-      this.filterUrl = filter;
-      this.page = 0;
-
-      this.getChartData();
-
-      // if (this.searchingState) this.getQuery(false, true);
-      // else this.getDefaultByFilter();
-    },
-
-    async getSchemas(item) {
-      try {
-        const { $api } = useNuxtApp();
-        const res = await $api(searchApis.schema.list, {
-          baseURL: repoUrl(),
-          method: "POST",
-          body: {
-            organ: this.organNameGetter,
-            system: "navigateChart",
-            build_state: buildState(),
-          },
-        });
-
-        this.searchChartSchemaSetter(res.data.navigateChart);
-        this.searchChartActiveSchemaSetter(res.data.navigateChart[0]);
-        this.searchChartActiveTabSetter(res.data.navigateChart[0].items[0]);
-
-        this.dataBankSelectValue = this.searchChartActiveSchemaGetter;
-
-        this.getChartData();
-      } catch (err) {}
-    },
-    //mehdi
-    AddToFolder(text) {
-      if (this.selectedProjectGetter.lists.length) {
-        if (text == "positionOne") {
-          let myString = this.selectedProjectGetter.lists[0].items;
-          let myArray1 = myString.split(",");
-          let myArray2 = this.selectedProjectGetter.items;
-          let myArray3 = [];
-          for (let i = 0; i < myArray1.length; i++) {
-            for (let j = 0; j < myArray2.length; j++) {
-              if (myArray1[i] === myArray2[j].name) {
-                myArray3.push(myArray2[j]);
-                break;
-              }
-            }
-          }
-          this.fieldOne = myArray3[0];
-          this.fieldTwo = myArray3[1];
-          this.fieldThree = myArray3[2];
-          setTimeout(() => {
-            this.onComboChanged();
-
-            this.componentCounter++;
-          }, 300);
-        } else if (text == "positionTow") {
-          let myString = this.selectedProjectGetter.lists[1].items;
-          let myArray1 = myString.split(",");
-          let myArray2 = this.selectedProjectGetter.items;
-          let myArray3 = [];
-          for (let i = 0; i < myArray1.length; i++) {
-            for (let j = 0; j < myArray2.length; j++) {
-              if (myArray1[i] === myArray2[j].name) {
-                myArray3.push(myArray2[j]);
-                break;
-              }
-            }
-          }
-          this.fieldOne = myArray3[0];
-          this.fieldTwo = myArray3[1];
-          this.fieldThree = myArray3[2];
-          setTimeout(() => {
-            this.onComboChanged();
-
-            this.componentCounter++;
-          }, 300);
-        } else {
-          let myString = this.selectedProjectGetter.lists[2].items;
-          let myArray1 = myString.split(",");
-          let myArray2 = this.selectedProjectGetter.items;
-          let myArray3 = [];
-          for (let i = 0; i < myArray1.length; i++) {
-            for (let j = 0; j < myArray2.length; j++) {
-              if (myArray1[i] === myArray2[j].name) {
-                myArray3.push(myArray2[j]);
-                break;
-              }
-            }
-          }
-          this.fieldOne = myArray3[0];
-          this.fieldTwo = myArray3[1];
-          this.fieldThree = myArray3[2];
-          setTimeout(() => {
-            this.onComboChanged();
-
-            this.componentCounter++;
-          }, 300);
-        }
-      }
-    },
-
-    openNavigationFilter(item) {
-      // if (item == 1) {
-      //   this.$refs.pags.classList.add("position1");
-      //   this.$refs.pags.classList.remove("position2");
-      // } else {
-      //   this.$refs.pags.classList.add("position2");
-      //   this.$refs.pags.classList.remove("position1");
-      // }
-      // this.$refs.navigationFilter.classList.remove("d-none");
-    },
-    statusPag2($event) {
-      this.statusPag = $event;
-      // if(this.statusPag=3){
-      //   this.showtextpag=false;
-      // }else if (this.statusPag=2){
-      //   this.showtextpag=true;
-      // }
-      switch (this.statusPag) {
-        case (this.statusPag = 2):
-          this.$refs.pags.classList.add("position1");
-          this.$refs.pags.classList.remove("position2");
-          break;
-        case (this.statusPag = 1):
-          this.$refs.pags.classList.add("position2");
-          this.$refs.pags.classList.remove("position1");
-          break;
-      }
-    },
-    isShowPag(event) {
-      // this.$refs.navigationFilter.classList.add("d-none");
-      // this.$refs.navigationFilter.classList.remove("position2");
-    },
-
-    //mehdi
-
-    exportJsonToExcel(evt) {
-      if (evt === "current") {
-        convertJsonToExcelUsingPlugin(
-          this.filterColumns(this.listItem, this.getTableColumns),
-          this.listGetter[this.listGetter.length - 1].key
-        ).finally(() => {
-          this.fetchingDataForExport = false;
-        });
-      } else if (evt === "all") {
-        if (this.pagination.total > 500) {
-          this.mySwalConfirm({
-            title: "خطا!!!",
-            html: "حداکثر تعداد قابل خروجی گرفتن، 500 مورد می باشد.لطفا با مدیریت تماس بگیرید.",
-          }).then((result) => {
-            this.getAllListItemForExport(500)
-              .then((response) => {
-                convertJsonToExcelUsingPlugin(
-                  this.filterColumns(response.hits.hits, this.getTableColumns),
-                  this.listGetter[this.listGetter.length - 1].key
-                )
-                  .then(() => {})
-                  .finally(() => {
-                    this.fetchingDataForExport = false;
-                  });
-              })
-
-              .finally(() => {
-                this.fetchingDataForExport = false;
-              });
-          });
-        } else {
-          this.getAllListItemForExport()
-            .then((response) => {
-              convertJsonToExcelUsingPlugin(
-                this.filterColumns(response.hits.hits, this.getTableColumns),
-                this.listGetter[this.listGetter.length - 1].key
-              )
-                .then(() => {})
-                .finally(() => {
-                  this.fetchingDataForExport = false;
-                });
-            })
-
-            .finally(() => {
-              this.fetchingDataForExport = false;
-            });
-        }
-      }
-    },
-    filterColumns(listItem, columns) {
-      let clonedItems = structuredClone(listItem);
-      let clonedColumns = structuredClone(columns);
-      let filteredItems = [];
-
-      clonedItems.forEach((item, index) => {
-        let filterObject = {};
-
-        clonedColumns.forEach((j) => {
-          filterObject[j.title] = item[j.key];
-        });
-
-        filteredItems[index] = filterObject;
-      });
-      return filteredItems;
-    },
-    async getAllListItemForExport(maxAmount = undefined) {
-      if (this.fetchingDataForExport) return;
-      this.fetchingDataForExport = true;
-
-      let url =
-        repoUrl() +
-        searchApis.navigation.reportItem +
-        `/${this.searchChartActiveSchemaGetter?.index_name}`;
-
-      url += `/${this.sorting.sortby}/${this.sorting.sortorder}`;
-      url += `/0/${maxAmount ?? this.pagination.total}/`;
-
-      if (this.listGetter && this.listGetter.length) {
-        if (this.listGetter.length <= this.fields.length) {
-          for (let i = 0; i < this.listGetter.length; i++) {
-            url += `${this.fields[i].name}=${this.listGetter[i].key}`;
-            if (i != this.listGetter.length - 1) url += "&";
-          }
-        }
-      }
-
-      try {
-        const { $api } = useNuxtApp();
-        const res = await $api(url, {
-          baseURL: repoUrl(),
-          method: "POST",
-          body: {
-            organ: this.organNameGetter,
-            system: "navigateChart",
-            build_state: buildState(),
-          },
-        });
-        return res;
-      } catch (err) {}
-    },
-
-    async updateOrder({ rowItem, newOrder }) {
-      const res = rowItem.subject.filter(
-        (item) => item.title == this.listGetter[this.listGetter.length - 1].key
-      );
-
-      const payload = {
-        id: rowItem.id_store,
-        subject_id: res[0].id,
-        subject_title: res[0].title,
-        subject_order: +newOrder,
-      };
-
-      const url = repoUrl() + searchApis.subject.order;
-
-      try {
-        const { $api } = useNuxtApp();
-        const res = await $api(searchApis.schema.list, {
-          baseURL: repoUrl(),
-          method: "POST",
-          body: payload,
-        });
-
-        this.mySwalToast({
-          title: res.message,
-          html: "",
-        });
-      } catch (err) {}
-    },
-    async getComboList() {
-      if (this.fetchingData) return;
-      this.fetchingData = true;
-
-      let url = repoUrl() + searchApis.navigation.list;
-      url = url.replace("~/entity", this.searchChartActiveSchemaGetter?.key);
-
-      try {
-        const { $api } = useNuxtApp();
-        const res = await $api(url, {
-          baseURL: repoUrl(),
-        });
-
-        this.navigationOptions = res.data;
-
-        this.navigationOptions[0].meta = JSON.parse(
-          this.navigationOptions[0].meta
-        );
-        this.navigationOptions[0].table_columns = JSON.parse(
-          this.navigationOptions[0].table_columns
-        );
-        this.navigationOptions[0].table_columns_subject = JSON.parse(
-          this.navigationOptions[0].table_columns_subject
-        );
-
-        this.SET_SELECTED_PROJECT(this.navigationOptions[0]);
-        this.fetchingData = false;
-      } catch (err) {
-        this.fetchingData = false;
-      }
-    },
-
-    onSelectNavigation(evt) {
-      // this.fieldOne = null;
-      // this.fieldTwo = null;
-      // this.fieldThree = null;
-      // this.SET_LIST([]);
-      // this.listItem = [];
-      // this.fields = [];
-
-      // if (typeof evt?.meta == "string") {
-      //   try {
-      //     evt.meta = JSON.parse(evt.meta);
-      //     evt.table_columns = JSON.parse(evt.table_columns);
-      //     evt.table_columns_subject = JSON.parse(evt.table_columns_subject);
-      //   } catch (e) {}
-      // }
-
-      // this.selectedNavigation = evt;
-      // this.searchChartSchemaSetter();
-      // this.searchChartActiveTabSetter();
-      this.searchChartActiveSchemaSetter(evt);
-
-      this.getChartData();
-
-      // this.$nextTick(() => {
-      // this.componentCounter++;
-      // });
-    },
-    onComboChanged() {
-      this.SET_LIST([]);
-      this.listItem = [];
-      const vm = this;
-      setTimeout(() => {
-        vm.fields = [vm.fieldOne, vm.fieldTwo, vm.fieldThree].filter(
-          (item) => item != null
-        );
-        vm.componentCounter++;
-      }, 300);
-    },
-    toggleSidebarMenu() {
-      this.$store.commit("TOGGLE_SIDEBAR_MENU");
-    },
-    showToggleListPanel() {
-      this.showListPanel = !this.showListPanel;
-    },
-    searchInTable() {},
-
-    getChartListItems() {
-      const payload = {
-        projectid: this.selectedProjectGetter?.id,
-        item_state: this.selectedProjectGetter?.item_state,
-        ...this.sorting,
-        ...this.pagination,
-      };
-
-      const url =
-        this.currentPageName == "list"
-          ? listApis.item.listNotRel
-          : listApis.item.subjectNotRel;
-
-      ApiService.formData(url, payload)
-        .then((res) => {
-          this.listItem = res.data.data;
-          this.pagination = { ...this.pagination, ...res.data.pagination };
-        })
-        .catch((err) => {
-          handleErrors(err);
-
-          // this.mySwalToast({
-          //   title: response.data.message,
-          //   html: "",
-          //   text: "لطفا با پشتیبانی تماس بگیرید.",
-          //   icon: "error",
-          // });
-        });
-    },
-  },
-};
+});
+
+const img = useImage();
+
+const HadithLayout = defineAsyncComponent(() =>
+  import("@hadith/layouts/HadithLayout.vue")
+);
+const NavigationMenu = defineAsyncComponent(() =>
+  import("@hadith/components/hadith/NavigationMenu.vue")
+);
+const AutoComplation = defineAsyncComponent(() =>
+  import("@hadith/components/hadith/AutoComplation.vue")
+);
+
+const backgroundImageStyle = computed(() => {
+  // Use $img to generate an optimized image URL
+  const optimizedImageUrl = img("/img/background.png", {
+    quality: 80,
+  });
+
+  return {
+    backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
+  };
+});
+
+const renderContent = () => {};
 </script>
 
-<style lang="scss">
-.custom-filter-container {
-  @media screen and (min-width: 575px) {
-    background-color: rgba(0, 0, 0, 0.05);
+<template>
+  <HadithLayout>
+    <div class="flex flex-col justify-center">
+      <div class="bg-container h-full" :style="backgroundImageStyle">
+        <navigation-menu></navigation-menu>
+
+        <div class="text-logo">
+          <div class="search-box-container flex justify-center">
+            <auto-complation @responseReady="renderContent"></auto-complation>
+          </div>
+          <div class="flex justify-center flex-col items-center">
+            <NuxtImg fit="auto" quality="80" placeholder src="/img/logo.png" />
+            <div class="title">
+              کاوش با
+              <span class="badge-style"> هوش مصنوعی </span>
+              در احادیث اسلامی
+            </div>
+          </div>
+        </div>
+      </div>
+
+      
+    </div>
+  </HadithLayout>
+</template>
+
+<style scoped>
+.bg-container {
+  height: 100dvh;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.text-logo {
+  padding-top: 4.5em;
+  position: relative;
+
+  .title {
+    margin-top: 3.5em;
+    font-family: IRANSansX;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0%;
+    text-align: center;
+    color: #1b2132;
   }
+  .badge-style {
+    width: 100;
+    height: 23;
+    border-radius: 40px;
+    padding-right: 8px;
+    padding-bottom: 2px;
+    padding-left: 8px;
+    gap: 10px;
+    color: #fff;
 
-  .multiselect {
-    // width: 16em;
-    // border: 2px solid rgb(127, 170, 170) !important;
-    border-radius: 0.5em;
-
-    @media screen and (max-width: 575px) {
-      .multiselect__tags {
-        font-size: 0.8rem;
-      }
-    }
+    background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
   }
 }
-</style>
-<style scoped lang="scss">
-.main-page__content-header {
-  background: linear-gradient(to top, #fcfcfc 0%, #eee 90%);
+
+.search-box-container {
   padding-top: 1em;
-}
-.multiselect {
-  width: 12em;
-  white-space: nowrap;
-}
-.header-height {
-  height: 4em;
-}
-.nav-tabs-container {
-  display: flex;
-  justify-content: center;
-}
-.label-change {
-  width: auto;
-  // min-width: 5em;
-  margin-bottom: 0em;
-}
-
-@media (max-width: 575.98px) {
-  li.desktop:nth-child(n + 3) {
-    display: none;
-  }
-
-  .dropdown-menu {
-    a.dropdown-item:nth-child(-n + 2) {
-      display: none;
-    }
-  }
-  .header-height {
-    height: 6em;
-  }
-}
-@media only screen and (min-width: 576px) and (max-width: 767.98px) {
-  li.desktop:nth-child(n + 4) {
-    display: none;
-  }
-  .dropdown-menu {
-    a.dropdown-item:nth-child(-n + 3) {
-      display: none;
-    }
-  }
-  .header-height {
-    height: 6em;
-  }
-  .filter-list-container {
-    padding-top: 0.5em;
-    position: fixed;
-
-    z-index: 9;
-    width: auto;
-
-    .main-filter {
-      display: none;
-    }
-    .mobile-mode {
-      display: flex;
-      justify-content: flex-end;
-
-      .btn {
-        border-radius: 50%;
-        // font-size: 0.7rem;
-        width: 2.5em;
-        height: 2.5em;
-        box-shadow: 0px 0px 7px 1px #eee;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transform: translateX(1.5em);
-        background-color: #eee;
-
-        &:hover {
-          filter: brightness(0.8);
-        }
-      }
-    }
-
-    &.expanded {
-      top: 0;
-      bottom: 0;
-      background: #fff;
-      justify-content: center;
-      box-shadow: -1px 0px 7px 1px #eee;
-
-      .main-filter {
-        display: block;
-      }
-    }
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991.98px) {
-  .header-height {
-    height: 6em;
-  }
-}
-@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
-}
-@media (min-width: 1200px) {
+  padding-bottom: 4em; /*64px */
 }
 </style>