Untitled
plain_text
6 days ago
2.2 kB
2
Indexable
Never
<script setup> const { t } = useI18n({ useScope: "local" }); const stateBanner = useState("banner", () => true); const handleBanner = () => { stateBanner.value = false; }; </script> <template> <div class="contents"> <div v-show="stateBanner" class="w-full bg-black flex items-center justify-between gap-6 px-5 md:px-[50px] xl:px-[56px] py-[10px] md:py-[18px]"> <div class="w-[34px] h-[34px] hidden md:block"></div> <div class="flex sm:block md:block xl:block items-center gap-[10px]"> <p class="pb-4 sm:pb-0 md:pb-0 xl:pb-0 text-[14px] xl:text-[17px] text-white font-medium leading-8 tracking-[-0.3px]"> {{ t("banner.title") }} </p> <a :title="t('banner.button.title')" class="flex items-center !text-[#FD9E75] hover:!text-[#FF4D00] hover:gap-1 cursor-pointer group" href="https://platform.botika.online/gpt"> <span class="min-w-[60px] !uppercase font-bold group-hover:underline group-hover:decoration-solid"> {{ t("banner.button.text") }} </span> <Icon name="material-symbols:arrow-forward-rounded" size="20" class="transition-transform group-hover:-rotate-45" /> </a> </div> <span class="w-[34px] aspect-square flex justify-end items-center"> <Icon name="ic:round-close" size="20" class="text-[#FD9E75] hover:!text-[#FF4D00] cursor-pointer" @click="handleBanner" /> </span> </div> </div> </template> <i18n lang="yaml"> # english translate en: # banner section banner: title: "Don't miss our latest Chatbot builder with GPT technology:" button: text: "Try Now" title: "Create your chatbot using GPT" # indonesia translate id: # banner section banner: title: "Jangan lewatkan pembuat Chatbot terbaru kami dengan teknologi GPT" button: text: "Coba Sekarang" title: "Buat chatbot anda menggunakan GPT" </i18n>