sfp_front_nuxt_iguassu_alliance/app/components/FaqSection.vue

<template>
    <section class="w-full bg-[#F6FFE9] py-18">
        <div class="max-w-[1200px] mx-auto flex justify-between gap-30">
            <div class="flex flex-col gap-4 itens-center">
                <span class="inline-flex items-center justify-center max-w-[127px] h-[53.05px] rounded-full
                border-[1.55px] border-[#8DC63F] bg-[var(--color-primary)] text-white text-2xl font-bold">
                FAQ</span>
                <p style="font-family: var(--font-inter)"   class="font-semibold text-[88px] leading-[106px] tracking-[-0.03em]">
                    Perguntas <br>Frequentes
                </p>
            </div>
            <div class="flex flex-col items-end gap-4">
                <div class="min-w-[677px] bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-7 flex items-center justify-between">
                    <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
                        A Kyon substitui todos os sistemas que uso hoje?
                    </p>
                    <span class="text-white text-[26.34px] leading-none">+</span>
                </div>

                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-7 flex items-center justify-between">
                    <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
                        Como funciona o Prontuário unificado?
                    </p>
                    <span class="text-white text-[26.34px] leading-none">+</span>
                </div>

                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-7 flex items-center justify-between">
                    <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
                        O agente de IA realmente atende pacientes no WhatsApp?
                    </p>
                    <span class="text-white text-[26.34px] leading-none">+</span>
                </div>

                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-7 flex items-center justify-between">
                    <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
                        A telemedicina é integrada ou preciso de outra plataforma?
                    </p>

                    <span class="text-white text-[26.34px] leading-none">+</span>
                </div>

                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-7 flex items-center justify-between">
                    <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
                        Como funciona a auditoria LGPD?
                    </p>
                    <span class="text-white text-[26.34px] leading-none">+</span>
                </div>
            </div>
        </div>
        
    </section>
    
</template>

<script setup lang="ts">
import { ref } from 'vue'

    const openIndex = ref<number | null>(null)
    function toggleIsOpen(indexClicked: number) {
        openIndex.value = openIndex.value === indexClicked ? null  : indexClicked
    }
</script>