Evandro Fonseca Junior
f8545cd442
Três ofertas (site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema existente) com miniatura e formulário com o tipo escolhido; botão principal do hero abre o WhatsApp; moldura da SEV no hero do celular; menu fecha ao navegar, Esc, foco preso incluindo a barra de cookies e espaço para ela; CinematicHome como componente de servidor com ilha cliente; /ia com H1 de oferta e cartão do que você recebe; botão flutuante em aside com transform; AVIF antes de WebP; copy sem repetir contato direto.
98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
import Link from "next/link";
|
|
import { textLink } from "./button-styles";
|
|
|
|
export interface FaqItem {
|
|
question: string;
|
|
/** Resposta vazia = pergunta preparada, que ainda não é exibida. */
|
|
answer: string;
|
|
link?: { href: string; label: string };
|
|
}
|
|
|
|
/**
|
|
* Perguntas da home. As cinco primeiras só dizem o que o site já sustenta (contato, rodapé, /ia) ou o que o dono
|
|
* já autorizou ("Quanto custa?": escopo, valor e prazo por escrito depois da primeira conversa, sem número nenhum).
|
|
* As três últimas estão preparadas, sem resposta: o dono as responde depois e elas passam a aparecer.
|
|
* Nunca escrever aqui prazo, preço, garantia ou política de pagamento que ele não tenha dito.
|
|
*/
|
|
export const FAQ_ITEMS: FaqItem[] = [
|
|
{
|
|
question: "Como começa um projeto?",
|
|
answer:
|
|
"Com uma conversa para entender o problema, sem precisar chegar com a solução definida. Depois dela, você recebe o escopo e a proposta por escrito.",
|
|
},
|
|
{
|
|
question: "Quanto custa?",
|
|
answer:
|
|
"Depois da primeira conversa você recebe escopo, valor e prazo por escrito, antes de qualquer compromisso.",
|
|
},
|
|
{
|
|
question: "Você atende fora de Santa Catarina?",
|
|
answer:
|
|
"Sim. Minha base é em Garuva, SC, e o atendimento é remoto, para empresas de todo o Brasil.",
|
|
},
|
|
{
|
|
question:
|
|
"Dá para continuar um sistema que já existe ou que foi feito com IA?",
|
|
answer:
|
|
"Sim. Antes de propor qualquer coisa, avalio o que pode ser aproveitado, quais riscos precisam de correção e o que falta para atender usuários em produção. Nem todo problema exige começar de novo.",
|
|
link: { href: "/ia", label: "Ver a revisão de app feito com IA" },
|
|
},
|
|
{
|
|
question: "O que preciso ter para começar?",
|
|
answer:
|
|
"Basta contar o que você quer resolver e, se houver, o prazo que tem em mente. Se já existe um sistema, uma planilha ou um protótipo, mostrar ajuda, mas não é obrigatório.",
|
|
},
|
|
{ question: "O código e os acessos ficam comigo?", answer: "" },
|
|
{ question: "Em nome de quem ficam domínio e hospedagem?", answer: "" },
|
|
{ question: "Como funciona o pagamento?", answer: "" },
|
|
];
|
|
|
|
/** Perguntas frequentes da home, antes do contato. Só aparecem as que têm resposta; sem nenhuma, a seção não existe. */
|
|
export default function HomeFaq({ items = FAQ_ITEMS }: { items?: FaqItem[] }) {
|
|
const answered = items.filter((item) => item.answer.trim() !== "");
|
|
if (answered.length === 0) return null;
|
|
|
|
return (
|
|
<section id="faq" aria-labelledby="faq-title" className="ds-section">
|
|
<div className="ds-section-shell">
|
|
<p className="ds-eyebrow">Dúvidas comuns</p>
|
|
<h2
|
|
id="faq-title"
|
|
className="ds-section-title max-w-[22ch] text-balance"
|
|
>
|
|
Perguntas frequentes
|
|
</h2>
|
|
<div className="mt-sp-8 max-w-[860px]">
|
|
{answered.map((item) => (
|
|
<details
|
|
key={item.question}
|
|
className="group border-t border-[var(--border)] last:border-b"
|
|
>
|
|
<summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-sp-4 py-sp-4 font-display text-[17px] font-semibold leading-snug text-[var(--ink)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ink)] [&::-webkit-details-marker]:hidden">
|
|
{item.question}
|
|
<span
|
|
aria-hidden="true"
|
|
className="shrink-0 font-mono text-xl leading-none text-[var(--meta)] transition-transform group-open:rotate-45 motion-reduce:transition-none"
|
|
>
|
|
+
|
|
</span>
|
|
</summary>
|
|
<div className="pb-sp-5">
|
|
<p className="ds-copy max-w-[65ch]">{item.answer}</p>
|
|
{item.link ? (
|
|
<Link
|
|
href={item.link.href}
|
|
className={`${textLink} mt-sp-2 text-[var(--ink-80)]`}
|
|
>
|
|
{item.link.label}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|