|
|
@@ -1,27 +1,27 @@
|
|
|
<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
|
|
|
+ <section class="w-full bg-[#F6FFE9] py-12 md:py-18 md:px-10">
|
|
|
+ <div class="w-full max-w-[1200px] mx-auto flex flex-col md:flex-row md:justify-between items-center md:items-start gap-6 md:gap-20 px-4 sm:px-0">
|
|
|
+ <div class="flex flex-col items-center gap-4 md:items-start text-center md:text-left">
|
|
|
+ <span class="inline-flex items-center justify-center 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 style="font-family: var(--font-inter)" class="font-semibold text-[40px] lg:text-[88px] leading-tight tracking-[-0.03em]">
|
|
|
+ Perguntas <br class="hidden md:block">Frequentes
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div class="flex flex-col items-end gap-4">
|
|
|
+ <div class="flex flex-col items-center md:items-start gap-4 flex-1">
|
|
|
<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">
|
|
|
+ class="w-full lg:max-w-[677px] bg-[#0C0D17] border border-white/10 rounded-3xl px-6 md:px-8 py-5 items-center">
|
|
|
+ <div @click="toggleIsOpen(index)" class="flex items-center justify-between w-full cursor-pointer">
|
|
|
+ <p class="font-inter font-normal text-[21.07px] leading-[24px] md:leading-[31.61px] text-white">
|
|
|
{{ faq.question }}
|
|
|
</p>
|
|
|
- <button class="text-white text-[26.34px] leading-none flex-end">
|
|
|
+ <button class="text-white text-[22px] md:text-[26.34px] leading-none flex-end">
|
|
|
{{ openIndex === index ? '-' : '+' }}
|
|
|
</button>
|
|
|
</div>
|
|
|
- <div v-if="openIndex == index" class="mt-4 text-white/70 text-base">
|
|
|
+ <div v-if="openIndex == index" class="mt-4 text-white/70 text-sm md:text-base">
|
|
|
<p>{{ faq.answer }}</p>
|
|
|
</div>
|
|
|
</div>
|
