haditha_ui/pages/hadith/search.vue

<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,
  },
});

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>

<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;

    background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
  }
}

.search-box-container {
  padding-top: 1em;
  padding-bottom: 4em; /*64px */
}
</style>