evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
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="ds-faq-item 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>
|
|
);
|
|
}
|