feat(home): seção Sobre com prova por ponto, contato por oferta e hero com a Lavação 047 na tela larga

app/components/contact-subject.ts

@@ -1,35 +1,43 @@
 /**
  * Tipos de projeto do formulário de contato (Contact.tsx) e o jeito de as ofertas da home escolherem um deles.
- * Uma oferta abre o formulário com o tipo já marcado de dois jeitos: o endereço `/?tipo=<tipo>#contact` (vale ao
+ * Uma oferta abre o formulário com o tipo já marcado de dois jeitos: o endereço `/?tipo=<tipo>#contact-form` (vale ao
  * chegar de outra página ou em um link copiado) e o evento CONTACT_KIND_EVENT (vale na própria home, onde o
- * gerenciador de âncoras rola até o formulário sem recarregar a página, e ContactOfferLink deixa o endereço como `/#contact`).
- * O tipo vai na busca, antes do `#`: um `/#contact?tipo=...` faria o fragmento virar "contact?tipo=...",
+ * gerenciador de âncoras rola até o formulário sem recarregar a página, e ContactOfferLink deixa o endereço como `/#contact-form`).
+ * O destino é o cartão do formulário (`#contact-form`), e não a cena inteira (`#contact`): no celular o formulário fica
+ * abaixo do texto e dos contatos diretos, e rolar até o começo da cena parava acima do campo do tipo.
+ * O tipo vai na busca, antes do `#`: um `/#contact-form?tipo=...` faria o fragmento virar "contact-form?tipo=...",
  * que não é o id de nenhum elemento, e a página não rolaria até o formulário.
  */
 
+import { offerLabels } from "@/lib/offer-labels";
+
 /** Primeiro e padrão: quem chega sem saber o que pedir não é empurrado para um tipo. */
 export const DEFAULT_CONTACT_SUBJECT = "Ainda preciso definir";
 
+/**
+ * As três ofertas entram com o nome que têm na home e em /servicos, que vem de `offerLabels` (lib/offer-labels.ts): o
+ * módulo pequeno que o navegador pode importar, ao contrário de lib/site-content.ts, que reúne o texto de todas as páginas.
+ */
 export const CONTACT_SUBJECT_OPTIONS = [
   DEFAULT_CONTACT_SUBJECT,
-  "Site para empresa",
-  "Sistemas web sob medida",
+  offerLabels.site.name,
+  offerLabels.sistema.name,
   "Aplicativos",
   "Integrações e automações",
   "Evolução de um sistema existente",
-  "Revisão ou diagnóstico de sistema",
+  offerLabels.revisao.name,
 ] as const;
 
-/** Tipo que uma oferta pede -> opção do formulário. */
+/** Tipo que uma oferta pede -> opção do formulário (o nome da oferta). */
 export const CONTACT_KINDS = {
-  site: "Site para empresa",
-  sistema: "Sistemas web sob medida",
-  revisao: "Revisão ou diagnóstico de sistema",
+  site: offerLabels.site.name,
+  sistema: offerLabels.sistema.name,
+  revisao: offerLabels.revisao.name,
 } as const satisfies Record<string, (typeof CONTACT_SUBJECT_OPTIONS)[number]>;
 
 export type ContactKind = keyof typeof CONTACT_KINDS;
 
-/** Parâmetro de busca do endereço: `/?tipo=site#contact`. */
+/** Parâmetro de busca do endereço: `/?tipo=site#contact-form`. */
 export const CONTACT_KIND_PARAM = "tipo";
 /** Evento da janela com o tipo escolhido em `detail`. */
 export const CONTACT_KIND_EVENT = "contact:kind";
@@ -41,6 +49,17 @@ export function contactSubjectForKind(kind: string | null | undefined) {
     : undefined;
 }
 
+/** Id do cartão do formulário de contato: o destino das ofertas (o campo do tipo fica a poucos toques do topo dele). */
+export const CONTACT_FORM_ID = "contact-form";
+export const CONTACT_FORM_HASH = `#${CONTACT_FORM_ID}`;
+
 export function contactKindHref(kind: ContactKind) {
-  return `/?${CONTACT_KIND_PARAM}=${kind}#contact`;
+  return `/?${CONTACT_KIND_PARAM}=${kind}${CONTACT_FORM_HASH}`;
+}
+
+/** Oferta cujo nome é a opção do formulário; `undefined` para as outras opções (e para o padrão). */
+export function contactKindForSubject(subject: string | null | undefined) {
+  return (Object.keys(CONTACT_KINDS) as ContactKind[]).find(
+    (kind) => CONTACT_KINDS[kind] === subject,
+  );
 }