sfp_front_nuxt_iguassu_alliance/app/components/FaqSection.vue

<template>
    <section class="w-full bg-[#F6FFE9] py-24">
        <div class="max-w-[1200px] mx-auto flex items-start justify-between gap-16">
            <div class="flex flex-col items-start gap-4">
                <span class="inline-flex items-center justify-center w-[127px] h-[53.05px] rounded-[154.87px] 
                border-[1.55px] border-[var(--color-primary)] 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-5">
                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-[25px] 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-[25px] 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-[25px] 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-[25px] 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-[25px] 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">
</script>