Work on hero page

components/hadith/AutoComplation.vue

@@ -405,7 +405,6 @@ export default {
 <style>
 .hadith-search-root {
   width: 656px;
-
   &::before {
     content: "";
 
@@ -425,6 +424,7 @@ export default {
   }
 
   & > span {
+    z-index:3;
     width: 48px;
     height: 48px;
     justify-content: center;

components/hadith/NavigationMenu.vue

@@ -1,27 +1,67 @@
 <script setup lang="ts">
 const items = ref([
   {
+    label: "حانه",
     icon: "i-lucide-home",
     to: "/hadith",
     descrption: "صفحه اصلی",
+    class: "flex flex-col lg:flex-row justify-center items-center hide-label",
   },
   {
     label: "جستجو",
     icon: "i-lucide-search",
     to: "/hadith/search",
     slot: "search",
+    class: "flex flex-col lg:flex-row justify-center items-center",
   },
   {
     label: "چت بات",
     icon: "i-lucide-message-square-text",
     to: "/hadith/chat-bot",
     slot: "chat-bot",
+    class: "flex flex-col lg:flex-row justify-center items-center",
   },
   {
     label: "کتابخانه",
     icon: "i-lucide-book-open-text",
     to: "/hadith/library",
     slot: "library",
+    class: "flex flex-col lg:flex-row justify-center items-center",
+  },
+
+  {
+    label: "نشان شده ها",
+    icon: "i-lucide-bookmark",
+    to: "/hadith/favorites",
+    class: "flex flex-col lg:hidden justify-center items-center",
+  },
+
+  {
+    label: "دیگر",
+    icon: "i-lucide-menu",
+    class: "flex flex-col lg:hidden justify-center items-center hide-chevron",
+    children: [
+      {
+        label: "در باره ما",
+        icon: "i-lucide-house",
+        to: "/hadith/about-us",
+      },
+      {
+        label: "تماس با ما",
+        icon: "i-lucide-cloud-download",
+        to: "/hadith/contact-us",
+      },
+      {
+        label: "قوانین و مقررات",
+        icon: "i-lucide-smile",
+        to: "/hadith/rules",
+      },
+      {
+        label: "خروج از حساب",
+        icon: "i-lucide-smile",
+        to: "/hadith/logout",
+      },
+    ],
   },
 ]);
 
@@ -59,39 +99,46 @@ const leftItem = ref([
     ],
   },
 ]);
+
+onMounted(() => {
+  if (window?.outerWidth < 576)
+    items.value = items.value.filter((item) => item.to != "/hadith/favorites");
+});
 </script>
 
 <template>
-  <div class="fixed top-2 right-0 left-0">
-    <UContainer class="flex justify-between my-navbar mx-3 xl: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="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: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>
 
-          <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>
+            <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>
   </div>
 </template>
 
@@ -103,7 +150,7 @@ const leftItem = ref([
     height: 68px;
     border-radius: 16px;
     border-width: 0.3px;
-    justify-content: space-between;
+    // justify-content: space-between;
     padding-top: 4px;
     padding-right: 16px;
     padding-bottom: 4px;
@@ -112,6 +159,32 @@ const leftItem = ref([
     background-color: #fff;
     border: 0.3px solid #e0e0e0;
     box-shadow: 0px 4px 15px 0px #0000001a;
+
+    nav > div {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      ul {
+        li {
+          @media screen and (max-width: 991.99px) {
+            flex: 1;
+          }
+
+          .hide-label {
+            .truncate {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .hide-chevron {
+      span:last-child {
+        display: none;
+      }
+    }
   }
 }
 </style>

pages/hadith/index.vue

@@ -1,11 +1,11 @@
 <template>
   <HadithLayout :menu="sidbarMenu">
     <section class="section-one flex flex-col justify-center">
-      <div class="bg-container h-full">
+      <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.svg" />
+          <NuxtImg fit="auto" quality="80" placeholder src="/img/logo.png" />
           <div class="title">
             کاوش با
             <span class="badge-style"> هوش مصنوعی </span>
@@ -19,17 +19,68 @@
     </section>
 
     <section class="section-two">
-      <div class="bg-container h-full">
-        <div class="flex flex-col items-center py-6">
-          <div>قابلیت ها</div>
-          <div>
+      <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
-              width="32"
-              height="32"
               fit="auto"
               quality="80"
               placeholder
-              src="/img/chevron-down.svg"
+              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>
@@ -106,6 +157,17 @@ export default {
     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, [
@@ -177,9 +239,9 @@ export default {
     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%);
+    /* background-attachment: fixed; */
+    /* background-image: url("/img/background.svg"),
+      linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%); */
   }
 
   .text-logo {
@@ -212,7 +274,7 @@ export default {
   .search-box-container {
     padding-top: 1em;
     padding-bottom: 4em; /*64px */
-   }
+  }
 }
 
 .section-two {
@@ -221,5 +283,46 @@ export default {
   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>