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