فهرست منبع

✨ feat(IGAL-EST): criar funcao para abrir a resposta

Ester Carvalho 3 روز پیش
والد
کامیت
e748c5ef3b
1فایلهای تغییر یافته به همراه18 افزوده شده و 13 حذف شده
  1. 18 13
      app/components/FaqSection.vue

+ 18 - 13
app/components/FaqSection.vue

@@ -1,37 +1,37 @@
 <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">
+    <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-5">
-                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-[25px] px-8 py-7 flex items-center justify-between">
+            <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-[25px] px-8 py-7 flex items-center justify-between">
+                <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>
 
-                <div class="w-[677px] h-20 bg-[#0C0D17] border border-white/10 rounded-[25px] px-8 py-7 flex items-center justify-between">
+                <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-[25px] px-8 py-7 flex items-center justify-between">
+                <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>
@@ -39,13 +39,12 @@
                     <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">
+                <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>
         
@@ -54,4 +53,10 @@
 </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>