Untitled

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