nipponboardspt 2.0.0

package/src/routes/README.md

@@ -0,0 +1,21 @@
+# Routes
+
+TanStack Start uses **file-based routing**. Every `.tsx` file in this directory
+defines a route. Do **not** create `src/pages/`, `src/routes/_app/index.tsx`, or
+`app/layout.tsx` — those are Next.js / Remix conventions. The only root layout
+is `src/routes/__root.tsx`.
+
+## Conventions
+
+| File | URL |
+| --- | --- |
+| `index.tsx` | `/` |
+| `about.tsx` | `/about` |
+| `users/index.tsx` | `/users` |
+| `users/$id.tsx` | `/users/:id` (dynamic — bare `$`, no curly braces) |
+| `posts/{-$category}.tsx` | `/posts/:category?` (optional segment) |
+| `files/$.tsx` | `/files/*` (splat — read via `_splat` param, never `*`) |
+| `_layout.tsx` | layout route (renders children via `<Outlet />`) |
+| `__root.tsx` | app shell — wraps every page; preserve `<Outlet />` |
+
+`routeTree.gen.ts` is auto-generated. Don't edit it by hand.

package/src/routes/__root.tsx

@@ -0,0 +1,123 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  Outlet,
+  Link,
+  createRootRouteWithContext,
+  useRouter,
+  HeadContent,
+  Scripts,
+} from "@tanstack/react-router";
+import { useEffect, type ReactNode } from "react";
+
+import appCss from "../styles.css?url";
+import { reportLovableError } from "../lib/lovable-error-reporting";
+
+function NotFoundComponent() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="max-w-md text-center">
+        <h1 className="text-7xl font-bold text-foreground">404</h1>
+        <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          The page you're looking for doesn't exist or has been moved.
+        </p>
+        <div className="mt-6">
+          <Link
+            to="/"
+            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            Go home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
+  console.error(error);
+  const router = useRouter();
+  useEffect(() => {
+    reportLovableError(error, { boundary: "tanstack_root_error_component" });
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="max-w-md text-center">
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">
+          This page didn't load
+        </h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Something went wrong on our end. You can try refreshing or head back home.
+        </p>
+        <div className="mt-6 flex flex-wrap justify-center gap-2">
+          <button
+            onClick={() => {
+              router.invalidate();
+              reset();
+            }}
+            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            Try again
+          </button>
+          <a
+            href="/"
+            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
+          >
+            Go home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "Nippon Boards" },
+      { name: "description", content: "Laboratório de eletrónica e micro-soldadura." },
+      { name: "author", content: "Nippon Boards" },
+      { property: "og:type", content: "website" },
+      { name: "twitter:card", content: "summary_large_image" },
+    ],
+    links: [
+      {
+        rel: "stylesheet",
+        href: appCss,
+      },
+      { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
+    ],
+  }),
+  shellComponent: RootShell,
+  component: RootComponent,
+  notFoundComponent: NotFoundComponent,
+  errorComponent: ErrorComponent,
+});
+
+function RootShell({ children }: { children: ReactNode }) {
+  return (
+    <html lang="pt-PT">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+function RootComponent() {
+  const { queryClient } = Route.useRouteContext();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* Required: nested routes render here. Removing <Outlet /> breaks all child routes. */}
+      <Outlet />
+    </QueryClientProvider>
+  );
+}

package/src/routes/index.tsx

@@ -0,0 +1,314 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  ArrowDown,
+  ArrowRight,
+  Box,
+  Check,
+  CheckCircle2,
+  ChevronDown,
+  CircuitBoard,
+  Cpu,
+  Gamepad2,
+  Headphones,
+  Instagram,
+  Mail,
+  Menu,
+  MessageCircle,
+  Microscope,
+  Paperclip,
+  Power,
+  ShieldCheck,
+  Smartphone,
+  Upload,
+  Wrench,
+  X,
+  Zap,
+} from "lucide-react";
+import { useState, type FormEvent } from "react";
+import { Button } from "../components/Button";
+import heroImage from "../assets/nippon-hero-lab.jpg";
+import ecuImage from "../assets/nippon-ecu-bench.jpg";
+import solderImage from "../assets/nippon-microsolder.jpg";
+
+export const Route = createFileRoute("/")({
+  head: () => ({
+    meta: [
+      { title: "Nippon Boards | Reparação Eletrónica e Micro-soldadura" },
+      {
+        name: "description",
+        content:
+          "Diagnóstico e reparação de placas eletrónicas ao nível do componente: automóvel, consolas, áudio, equipamentos premium e PCB rework.",
+      },
+      { property: "og:title", content: "Nippon Boards | Reparação ao nível do componente" },
+      {
+        property: "og:description",
+        content: "Laboratório de eletrónica especializado em diagnóstico, micro-soldadura e reconstrução de placas PCB.",
+      },
+      { property: "og:type", content: "website" },
+      { name: "twitter:card", content: "summary_large_image" },
+    ],
+  }),
+  component: Index,
+});
+
+const CONTACT = {
+  email: "orcamentos@nipponboards.pt",
+  phone: "+351 910 174 286",
+  whatsapp:
+    "https://wa.me/351910174286?text=" +
+    encodeURIComponent("Olá Nippon Boards, gostaria de pedir um diagnóstico para o meu equipamento."),
+  instagram: "https://www.instagram.com/nipponboards.pt",
+};
+
+const specialties = [
+  {
+    icon: Cpu,
+    number: "01",
+    title: "Eletrónica Automóvel & Clássicos",
+    description: "ECUs, quadrantes, módulos de conforto e rádios vintage. Diagnóstico rigoroso sem substituições desnecessárias.",
+  },
+  {
+    icon: Gamepad2,
+    number: "02",
+    title: "Consolas & Portáteis",
+    description: "Nintendo Switch, PlayStation e Xbox. Portas HDMI e USB-C, circuitos de potência e falhas de arranque.",
+  },
+  {
+    icon: Power,
+    number: "03",
+    title: "Equipamentos Premium & Fontes",
+    description: "Módulos de controlo, ferramentas a bateria e fontes industriais que justificam uma reparação especializada.",
+  },
+  {
+    icon: Headphones,
+    number: "04",
+    title: "Áudio Vintage & Hi-Fi",
+    description: "Amplificadores e auto-rádios clássicos. Restauro de condensadores e recuperação fiel do circuito original.",
+  },
+  {
+    icon: CircuitBoard,
+    number: "05",
+    title: "Reconstrução de Placas",
+    description: "Pistas rompidas, corrosão por líquidos, pads arrancados e substituição de componentes BGA.",
+  },
+];
+
+const process = [
+  { icon: MessageCircle, title: "Contacto & Triagem", text: "Descreva o equipamento e o sintoma por formulário ou WhatsApp." },
+  { icon: Box, title: "Envio da Peça", text: "Envie apenas o módulo por transportadora ou CTT Expresso." },
+  { icon: Microscope, title: "Diagnóstico & Orçamento", text: "Analisamos o circuito em bancada e confirmamos a intervenção." },
+  { icon: Check, title: "Reparação & Teste", text: "Reparamos, testamos e devolvemos a peça devidamente protegida." },
+];
+
+const faqs = [
+  ["Que equipamentos aceitam?", "Analisamos placas eletrónicas de várias áreas, desde automóvel e áudio a consolas, ferramentas e módulos de controlo. Envie fotografias para confirmarmos a viabilidade."],
+  ["O orçamento é gratuito?", "A triagem inicial é gratuita. Se o equipamento exigir diagnóstico técnico em bancada, as condições são sempre comunicadas antes do envio."],
+  ["Posso enviar o equipamento completo?", "Preferimos receber apenas a placa ou módulo eletrónico. Não realizamos desmontagem nem montagem de componentes no veículo."],
+  ["Quanto tempo demora a reparação?", "O prazo depende da complexidade da avaria e da disponibilidade de componentes. Receberá uma estimativa depois do diagnóstico."],
+];
+
+function Brand({ light = false }: { light?: boolean }) {
+  return (
+    <a href="#inicio" className={`brand ${light ? "brand-light" : ""}`} aria-label="Nippon Boards — início">
+      NIPP<span className="brand-disc" aria-hidden="true" />N <small>boards</small>
+    </a>
+  );
+}
+
+function Index() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [fileNames, setFileNames] = useState<string[]>([]);
+  const [mailto, setMailto] = useState(`mailto:${CONTACT.email}`);
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!event.currentTarget.checkValidity()) {
+      event.currentTarget.reportValidity();
+      return;
+    }
+    const data = new FormData(event.currentTarget);
+    const value = (key: string) => String(data.get(key) ?? "");
+    const body = [
+      `Nome: ${value("name")}`,
+      `Telefone / WhatsApp: ${value("phone")}`,
+      `E-mail: ${value("email")}`,
+      `Categoria: ${value("category")}`,
+      `Marca e modelo: ${value("model")}`,
+      `Já foi intervencionado: ${value("intervention") === "sim" ? "Sim" : "Não"}`,
+      "",
+      "Sintoma / problema:",
+      value("problem"),
+      "",
+      fileNames.length ? `Fotografias a anexar: ${fileNames.join(", ")}` : "Sem fotografias anexadas.",
+    ].join("\n");
+    setMailto(
+      `mailto:${CONTACT.email}?subject=${encodeURIComponent(`Pedido de diagnóstico — ${value("model") || "equipamento"}`)}&body=${encodeURIComponent(body)}`,
+    );
+    setSubmitted(true);
+  }
+
+  return (
+    <main className="overflow-hidden bg-background text-foreground">
+      <header className="fixed inset-x-0 top-0 z-50 border-b border-hero-foreground/10 bg-hero/95 backdrop-blur-md">
+        <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-5 lg:px-8">
+          <Brand light />
+          <nav className="hidden items-center gap-8 lg:flex" aria-label="Navegação principal">
+            <a className="nav-link" href="#especialidades">Especialidades</a>
+            <a className="nav-link" href="#processo">Como funciona</a>
+            <a className="nav-link" href="#galeria">Galeria</a>
+            <a className="nav-link" href="#faq">FAQ</a>
+          </nav>
+          <div className="hidden lg:block">
+            <Button asChild><a href="#diagnostico">Pedir diagnóstico <ArrowRight size={16} /></a></Button>
+          </div>
+          <Button variant="outline" className="size-11 min-h-11 shrink-0 px-0 text-hero-foreground lg:hidden" onClick={() => setMenuOpen(!menuOpen)} aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}>
+            {menuOpen ? <X size={20} /> : <Menu size={20} />}
+          </Button>
+        </div>
+        {menuOpen && (
+          <nav className="border-t border-hero-foreground/10 bg-hero px-5 py-5 lg:hidden" aria-label="Navegação móvel">
+            {[["Especialidades", "#especialidades"], ["Como funciona", "#processo"], ["Galeria", "#galeria"], ["FAQ", "#faq"], ["Pedir diagnóstico", "#diagnostico"]].map(([label, href]) => (
+              <a key={href} href={href} onClick={() => setMenuOpen(false)} className="block border-b border-hero-foreground/10 py-3 text-sm font-semibold uppercase text-hero-foreground">{label}</a>
+            ))}
+          </nav>
+        )}
+      </header>
+
+      <section id="inicio" className="hero-section relative flex min-h-[92vh] items-end pt-20">
+        <img src={heroImage} alt="Placa eletrónica complexa sob microscópio numa bancada técnica" width={1600} height={1000} className="absolute inset-0 size-full object-cover object-center" />
+        <div className="hero-overlay absolute inset-0" />
+        <div className="relative mx-auto w-full max-w-7xl px-5 pb-16 pt-24 lg:px-8 lg:pb-20">
+          <div className="max-w-4xl">
+            <div className="mb-7 flex items-center gap-3 text-xs font-bold uppercase text-primary-bright">
+              <span className="h-px w-10 bg-primary" /> Laboratório de Eletrónica & Micro-soldadura
+            </div>
+            <h1 className="max-w-4xl text-balance font-display text-4xl font-semibold leading-[1.06] text-hero-foreground sm:text-6xl lg:text-7xl">
+              Reparação eletrónica ao nível do <span className="text-primary-bright">componente.</span>
+            </h1>
+            <p className="mt-6 max-w-2xl text-balance text-lg leading-8 text-hero-muted sm:text-xl">
+              Recuperamos onde outros recomendam substituir. Diagnóstico em bancada, micro-soldadura e reconstrução de placas — do automóvel clássico à tecnologia premium.
+            </p>
+            <div className="mt-9 flex flex-col gap-3 sm:flex-row">
+              <Button asChild className="sm:min-w-56"><a href="#diagnostico">Pedir orçamento gratuito <ArrowRight size={17} /></a></Button>
+              <Button asChild variant="outline" className="sm:min-w-48"><a href={CONTACT.whatsapp} target="_blank" rel="noopener noreferrer"><MessageCircle size={17} /> Falar no WhatsApp</a></Button>
+            </div>
+          </div>
+          <div className="mt-16 flex flex-wrap gap-x-8 gap-y-3 border-t border-hero-foreground/15 pt-5 text-xs font-semibold uppercase text-hero-muted">
+            <span className="flex items-center gap-2"><ShieldCheck size={16} className="text-primary-bright" /> Diagnóstico técnico</span>
+            <span className="flex items-center gap-2"><Microscope size={16} className="text-primary-bright" /> Intervenção microscópica</span>
+            <span className="flex items-center gap-2"><Zap size={16} className="text-primary-bright" /> Testes em bancada</span>
+          </div>
+        </div>
+        <a href="#especialidades" aria-label="Ver especialidades" className="absolute bottom-8 right-8 hidden size-12 items-center justify-center border border-hero-foreground/25 text-hero-foreground lg:flex"><ArrowDown size={18} /></a>
+      </section>
+
+      <section id="especialidades" className="section-light py-20 lg:py-28">
+        <div className="mx-auto max-w-7xl px-5 lg:px-8">
+          <div className="grid gap-8 border-b border-border pb-12 lg:grid-cols-[1fr_1.1fr] lg:items-end">
+            <div><p className="eyebrow">Especialidades</p><h2 className="section-title">Uma bancada.<br />Múltiplos desafios.</h2></div>
+            <p className="max-w-xl text-lg leading-8 text-muted-foreground lg:justify-self-end">Quando uma placa falha, procuramos a causa — não apenas o componente óbvio. Cada reparação começa com medição, método e experiência.</p>
+          </div>
+          <div className="mt-10 grid gap-px overflow-hidden border border-border bg-border md:grid-cols-2 lg:grid-cols-3">
+            {specialties.map(({ icon: Icon, number, title, description }, index) => (
+              <article key={title} className={`specialty-card bg-background p-7 lg:p-8 ${index === 4 ? "lg:col-span-2" : ""}`}>
+                <div className="flex items-start justify-between"><Icon size={30} strokeWidth={1.5} className="text-primary" /><span className="font-mono text-xs text-muted-foreground">{number}</span></div>
+                <h3 className="mt-12 max-w-sm font-display text-xl font-semibold">{title}</h3>
+                <p className="mt-3 max-w-xl leading-7 text-muted-foreground">{description}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="processo" className="bg-hero py-20 text-hero-foreground lg:py-28">
+        <div className="mx-auto max-w-7xl px-5 lg:px-8">
+          <div className="max-w-2xl"><p className="eyebrow">Como funciona o envio</p><h2 className="section-title text-hero-foreground">Da primeira mensagem<br />ao teste final.</h2></div>
+          <div className="relative mt-14 grid gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-6">
+            <div className="absolute left-0 right-0 top-7 hidden h-px bg-hero-foreground/15 lg:block" />
+            {process.map(({ icon: Icon, title, text }, index) => (
+              <article key={title} className="relative">
+                <div className="relative z-10 flex size-14 items-center justify-center border border-primary/60 bg-hero text-primary-bright"><Icon size={23} strokeWidth={1.5} /></div>
+                <p className="mt-7 font-mono text-xs text-primary-bright">0{index + 1}</p>
+                <h3 className="mt-3 font-display text-xl font-semibold">{title}</h3>
+                <p className="mt-3 max-w-xs leading-7 text-hero-muted">{text}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="galeria" className="section-light py-20 lg:py-28">
+        <div className="mx-auto max-w-7xl px-5 lg:px-8">
+          <div className="flex flex-col justify-between gap-6 sm:flex-row sm:items-end"><div><p className="eyebrow">Na bancada</p><h2 className="section-title">Precisão à vista.</h2></div><p className="max-w-md text-sm leading-6 text-muted-foreground">Imagens ilustrativas do ambiente e do tipo de intervenção. Serão substituídas por fotografias reais da oficina.</p></div>
+          <div className="mt-12 grid gap-5 lg:grid-cols-[1.2fr_.8fr]">
+            <figure className="group overflow-hidden bg-foreground"><img src={solderImage} alt="Imagem ilustrativa: micro-soldadura de precisão numa placa" width={1200} height={900} loading="lazy" className="aspect-[4/3] size-full object-cover transition-transform duration-700 group-hover:scale-[1.02]" /><figcaption className="flex items-center justify-between px-5 py-4 text-sm text-background"><span>Micro-soldadura sob microscópio</span><span className="font-mono text-xs opacity-60">PCB / 01</span></figcaption></figure>
+            <figure className="group overflow-hidden bg-foreground"><img src={ecuImage} alt="Imagem ilustrativa: ECU automóvel aberta numa bancada" width={1200} height={900} loading="lazy" className="aspect-[4/3] size-full object-cover transition-transform duration-700 group-hover:scale-[1.02] lg:aspect-auto lg:h-[calc(100%-52px)]" /><figcaption className="flex items-center justify-between px-5 py-4 text-sm text-background"><span>Diagnóstico de ECU automóvel</span><span className="font-mono text-xs opacity-60">AUTO / 02</span></figcaption></figure>
+          </div>
+        </div>
+      </section>
+
+      <section id="diagnostico" className="bg-surface py-20 lg:py-28">
+        <div className="mx-auto grid max-w-7xl gap-14 px-5 lg:grid-cols-[.72fr_1.28fr] lg:px-8">
+          <div>
+            <p className="eyebrow">Pedido de diagnóstico</p>
+            <h2 className="section-title">Conte-nos o que se passa.</h2>
+            <p className="mt-6 max-w-md text-lg leading-8 text-muted-foreground">Quanto mais informação e fotografias enviar, mais precisa será a nossa triagem inicial.</p>
+            <div className="mt-10 space-y-5 border-t border-border pt-8 text-sm text-muted-foreground">
+              <p className="flex gap-3"><CheckCircle2 size={19} className="shrink-0 text-primary" /> Resposta com indicação dos próximos passos</p>
+              <p className="flex gap-3"><CheckCircle2 size={19} className="shrink-0 text-primary" /> Aceitamos envios de todo o país</p>
+              <p className="flex gap-3"><CheckCircle2 size={19} className="shrink-0 text-primary" /> Os seus dados são usados apenas para este pedido</p>
+            </div>
+            <div className="mt-8 space-y-3 border-t border-border pt-8 text-sm">
+              <a href={`mailto:${CONTACT.email}`} className="flex items-center gap-3 font-semibold text-foreground transition-colors hover:text-primary"><Mail size={17} className="text-primary" /> {CONTACT.email}</a>
+              <a href={CONTACT.whatsapp} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 font-semibold text-foreground transition-colors hover:text-primary"><MessageCircle size={17} className="text-primary" /> {CONTACT.phone}</a>
+            </div>
+          </div>
+          {submitted ? (
+            <div className="flex min-h-96 flex-col items-start justify-center border border-border bg-background p-8 lg:p-12" role="status">
+              <div className="flex size-14 items-center justify-center bg-primary text-primary-foreground"><Check size={26} /></div>
+              <h3 className="mt-7 font-display text-3xl font-semibold">Pedido pronto a enviar.</h3>
+              <p className="mt-4 max-w-lg leading-7 text-muted-foreground">Abra o pedido no seu programa de e-mail para o enviar para <a className="font-semibold text-primary" href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a>. Se escolher fotografias, anexe-as antes de enviar.</p>
+              <div className="mt-7 flex flex-col gap-3 sm:flex-row">
+                <Button asChild><a href={mailto}>Enviar por e-mail <ArrowRight size={17} /></a></Button>
+                <Button variant="dark" onClick={() => setSubmitted(false)}>Fazer novo pedido</Button>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="grid gap-5 border border-border bg-background p-6 shadow-form sm:grid-cols-2 lg:p-9">
+              <label className="field"><span>Nome completo *</span><input required maxLength={100} name="name" autoComplete="name" placeholder="O seu nome" /></label>
+              <label className="field"><span>Telefone / WhatsApp *</span><input required maxLength={20} name="phone" type="tel" autoComplete="tel" placeholder="+351 9xx xxx xxx" /></label>
+              <label className="field sm:col-span-2"><span>E-mail *</span><input required maxLength={255} name="email" type="email" autoComplete="email" placeholder="nome@email.pt" /></label>
+              <label className="field"><span>Categoria *</span><span className="select-wrap"><select required name="category" defaultValue=""><option value="" disabled>Selecione</option><option>Automóvel</option><option>Consola</option><option>Eletrodoméstico</option><option>Áudio</option><option>Outro</option></select><ChevronDown size={17} /></span></label>
+              <label className="field"><span>Marca e modelo exato *</span><input required maxLength={120} name="model" placeholder="Ex.: Nintendo Switch OLED" /></label>
+              <label className="field sm:col-span-2"><span>Sintoma / problema *</span><textarea required maxLength={1500} name="problem" rows={5} placeholder="Descreva o comportamento, quando começou e o que já tentou…" /></label>
+              <fieldset className="sm:col-span-2"><legend className="field-label">Já foi intervencionado por outra pessoa? *</legend><div className="mt-3 flex gap-6"><label className="radio"><input required type="radio" name="intervention" value="sim" /> <span>Sim</span></label><label className="radio"><input required type="radio" name="intervention" value="nao" /> <span>Não</span></label></div></fieldset>
+              <label className="field sm:col-span-2"><span>Fotografias da placa / defeito</span><span className="upload-box"><Upload size={22} className="text-primary" /><strong>Escolher até 3 imagens</strong><small>JPG, PNG ou WEBP · máximo 8 MB por imagem</small><input className="hidden" type="file" name="photos" accept="image/jpeg,image/png,image/webp" multiple onChange={(event) => { const files = Array.from(event.target.files ?? []).slice(0, 3); if ((event.target.files?.length ?? 0) > 3) event.target.value = ""; setFileNames(files.map((file) => file.name)); }} /></span>{fileNames.length > 0 && <span className="mt-2 flex items-center gap-2 text-xs text-muted-foreground"><Paperclip size={14} /> {fileNames.join(", ")}</span>}</label>
+              <div className="sm:col-span-2"><Button type="submit" className="w-full sm:w-auto">Enviar pedido de diagnóstico <ArrowRight size={17} /></Button></div>
+            </form>
+          )}
+        </div>
+      </section>
+
+      <section id="faq" className="section-light py-20 lg:py-28">
+        <div className="mx-auto grid max-w-7xl gap-12 px-5 lg:grid-cols-[.7fr_1.3fr] lg:px-8">
+          <div><p className="eyebrow">FAQ</p><h2 className="section-title">Antes de enviar.</h2></div>
+          <div className="border-t border-border">
+            {faqs.map(([question, answer]) => <details key={question} className="faq-item group border-b border-border"><summary><span>{question}</span><span className="faq-plus">+</span></summary><p>{answer}</p></details>)}
+          </div>
+        </div>
+      </section>
+
+      <footer className="bg-hero text-hero-foreground">
+        <div className="mx-auto max-w-7xl px-5 py-14 lg:px-8">
+          <div className="grid gap-12 border-b border-hero-foreground/15 pb-12 md:grid-cols-3">
+            <div><Brand light /><p className="mt-5 max-w-xs text-sm leading-6 text-hero-muted">Diagnóstico e reparação eletrónica ao nível do componente, com método e precisão.</p></div>
+            <div><p className="footer-title">Navegação</p><div className="mt-4 grid gap-3 text-sm text-hero-muted"><a href="#especialidades">Especialidades</a><a href="#processo">Como funciona</a><a href="#galeria">Galeria</a><a href="#faq">Perguntas frequentes</a></div></div>
+            <div><p className="footer-title">Contacto</p><div className="mt-4 grid gap-3 text-sm text-hero-muted"><a href={`mailto:${CONTACT.email}`} className="flex items-center gap-2 transition-colors hover:text-hero-foreground"><Mail size={16} /> {CONTACT.email}</a><a href={CONTACT.whatsapp} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 transition-colors hover:text-hero-foreground"><MessageCircle size={16} /> {CONTACT.phone}</a><a href={CONTACT.instagram} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 transition-colors hover:text-hero-foreground"><Instagram size={16} /> @nipponboards.pt</a></div></div>
+          </div>
+          <div className="flex flex-col gap-6 py-7 text-xs leading-5 text-hero-muted md:flex-row md:items-center md:justify-between"><p>© 2026 Nippon Boards. Todos os direitos reservados.</p><p className="max-w-2xl md:text-right"><strong className="text-hero-foreground">Nota:</strong> Não realizamos montagem/desmontagem de componentes no veículo. Apenas reparação da placa eletrónica.</p></div>
+        </div>
+      </footer>
+    </main>
+  );
+}

package/src/server.ts

@@ -0,0 +1,61 @@
+import "./lib/error-capture";
+
+import { consumeLastCapturedError } from "./lib/error-capture";
+import { renderErrorPage } from "./lib/error-page";
+
+type ServerEntry = {
+  fetch: (request: Request, env: unknown, ctx: unknown) => Promise<Response> | Response;
+};
+
+let serverEntryPromise: Promise<ServerEntry> | undefined;
+
+async function getServerEntry(): Promise<ServerEntry> {
+  if (!serverEntryPromise) {
+    serverEntryPromise = import("@tanstack/react-start/server-entry").then(
+      (m) => (m.default ?? m) as ServerEntry,
+    );
+  }
+  return serverEntryPromise;
+}
+
+// h3 swallows in-handler throws into a normal 500 Response with body
+// {"unhandled":true,"message":"HTTPError"} — try/catch alone never fires for those.
+async function normalizeCatastrophicSsrResponse(response: Response): Promise<Response> {
+  if (response.status < 500) return response;
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) return response;
+
+  const body = await response.clone().text();
+  if (!isH3SwallowedErrorBody(body)) return response;
+
+  console.error(consumeLastCapturedError() ?? new Error(`h3 swallowed SSR error: ${body}`));
+  return new Response(renderErrorPage(), {
+    status: 500,
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+}
+
+function isH3SwallowedErrorBody(body: string): boolean {
+  try {
+    const payload = JSON.parse(body) as { unhandled?: unknown; message?: unknown };
+    return payload.unhandled === true && payload.message === "HTTPError";
+  } catch {
+    return false;
+  }
+}
+
+export default {
+  async fetch(request: Request, env: unknown, ctx: unknown) {
+    try {
+      const handler = await getServerEntry();
+      const response = await handler.fetch(request, env, ctx);
+      return await normalizeCatastrophicSsrResponse(response);
+    } catch (error) {
+      console.error(error);
+      return new Response(renderErrorPage(), {
+        status: 500,
+        headers: { "content-type": "text/html; charset=utf-8" },
+      });
+    }
+  },
+};

package/src/start.ts

@@ -0,0 +1,29 @@
+import { createStart, createCsrfMiddleware, createMiddleware } from "@tanstack/react-start";
+
+import { renderErrorPage } from "./lib/error-page";
+
+const errorMiddleware = createMiddleware().server(async ({ next }) => {
+  try {
+    return await next();
+  } catch (error) {
+    if (error != null && typeof error === "object" && "statusCode" in error) {
+      throw error;
+    }
+    console.error(error);
+    return new Response(renderErrorPage(), {
+      status: 500,
+      headers: { "content-type": "text/html; charset=utf-8" },
+    });
+  }
+});
+
+// Start installs this automatically when src/start.ts is absent; defining the
+// file opts out, so re-add it explicitly to keep server functions protected
+// from cross-site requests.
+const csrfMiddleware = createCsrfMiddleware({
+  filter: (ctx) => ctx.handlerType === "serverFn",
+});
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [errorMiddleware, csrfMiddleware],
+}));