|
|
@@ -10,46 +10,24 @@
|
|
|
</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 v-for="(faq, index) in faqs"
|
|
|
+ :key="index"
|
|
|
+ class="min-w-[677px] bg-[#0C0D17] border border-white/10 rounded-3xl px-8 py-5 items-center">
|
|
|
+ <div @click="toggleIsOpen(index)" class="flex items-center justify-between w-full">
|
|
|
+ <p class="font-inter font-normal text-[21.07px] leading-[31.61px] text-white">
|
|
|
+ {{ faq.question }}
|
|
|
+ </p>
|
|
|
+ <button class="text-white text-[26.34px] leading-none flex-end">
|
|
|
+ {{ openIndex === index ? '-' : '+' }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div v-if="openIndex == index" class="mt-4 text-white/70 text-base">
|
|
|
+ <p>{{ faq.answer }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</section>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -59,4 +37,32 @@ import { ref } from 'vue'
|
|
|
function toggleIsOpen(indexClicked: number) {
|
|
|
openIndex.value = openIndex.value === indexClicked ? null : indexClicked
|
|
|
}
|
|
|
+
|
|
|
+ const faqs = [
|
|
|
+ {
|
|
|
+ question: "A Kyon substitui todos os sistemas que uso hoje?",
|
|
|
+ answer:
|
|
|
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ question: "Como funciona o Prontuário unificado?",
|
|
|
+ answer:
|
|
|
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ question: "O agente de IA realmente atende pacientes no WhatsApp?",
|
|
|
+ answer:
|
|
|
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ question: "A telemedicina é integrada ou preciso de outra plataforma?",
|
|
|
+ answer:
|
|
|
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ question: "Como funciona a auditoria LGPD?",
|
|
|
+ answer:
|
|
|
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
|
|
|
+ }
|
|
|
+ ]
|
|
|
</script>
|
