Evandro Fonseca Junior
fc44a69fb3
/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { textLink } from "./button-styles";
|
|
import HoverPrefetchLink from "./HoverPrefetchLink";
|
|
|
|
export interface FaqEntry {
|
|
question: string;
|
|
/** Resposta vazia = pergunta preparada, que ainda não é exibida. */
|
|
answer: string;
|
|
link?: { href: string; label: string };
|
|
}
|
|
|
|
/**
|
|
* Perguntas frequentes em acordeão, um formato só no site: pergunta na linha, resposta ao abrir, "+" que gira.
|
|
* A home (HomeFaq), as páginas de serviço e a de serviços usam este componente. Só aparecem as perguntas com resposta; sem nenhuma, a seção não existe.
|
|
* Nunca escrever aqui prazo, preço, garantia ou política de pagamento que o dono não tenha dito.
|
|
*/
|
|
export function Faq({
|
|
items,
|
|
id = "faq",
|
|
title = "Perguntas frequentes",
|
|
eyebrow = "Dúvidas comuns",
|
|
}: {
|
|
items?: readonly FaqEntry[];
|
|
/** Âncora da seção; o título leva `${id}-title`. */
|
|
id?: string;
|
|
title?: string;
|
|
eyebrow?: string;
|
|
}) {
|
|
const answered = (items ?? []).filter((item) => item.answer.trim() !== "");
|
|
if (answered.length === 0) return null;
|
|
|
|
return (
|
|
<section id={id} aria-labelledby={`${id}-title`} className="ds-section">
|
|
<div className="ds-section-shell">
|
|
<p className="ds-eyebrow">{eyebrow}</p>
|
|
<h2
|
|
id={`${id}-title`}
|
|
className="ds-section-title max-w-[22ch] text-balance"
|
|
>
|
|
{title}
|
|
</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 ? (
|
|
<HoverPrefetchLink
|
|
href={item.link.href}
|
|
className={`${textLink} mt-sp-2 text-[var(--ink-80)]`}
|
|
>
|
|
{item.link.label}
|
|
</HoverPrefetchLink>
|
|
) : null}
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|