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.
91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import {
|
|
primaryButton,
|
|
secondaryButtonDark,
|
|
} from "@/app/components/button-styles";
|
|
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
|
|
import { twitterHandle } from "@/lib/seo";
|
|
import { siteName } from "@/lib/site-content";
|
|
|
|
const title = "Página não encontrada";
|
|
const description = "A página que você procura não existe ou foi movida.";
|
|
|
|
// O Next já escreve <meta name="robots" content="noindex"> em toda página 404; repetir `robots` aqui duplicaria a tag.
|
|
// O layout raiz libera a indexação para o Googlebot, então só essa regra é trocada. A canônica da home também não vale num 404.
|
|
// O cartão de compartilhamento é o do próprio 404 e fica sem `url`: o endereço pedido não existe, e o `og:url` da home
|
|
// (herdado do layout, que é substituído por inteiro quando a página define `openGraph`) apontaria a prévia para outra página.
|
|
export const metadata: Metadata = {
|
|
title,
|
|
description,
|
|
alternates: { canonical: null },
|
|
robots: { googleBot: { index: false, follow: false } },
|
|
openGraph: {
|
|
locale: "pt_BR",
|
|
title,
|
|
description,
|
|
siteName,
|
|
type: "website",
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title,
|
|
description,
|
|
creator: twitterHandle,
|
|
},
|
|
};
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<main className="flex min-h-screen items-center bg-[var(--ink)] px-sp-6 py-sp-16 font-display text-[#f4f2ed] lg:px-sp-12">
|
|
<div className="ds-section-shell grid items-center gap-sp-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,520px)]">
|
|
<div>
|
|
<h1 className="text-[clamp(64px,12vw,96px)] font-semibold leading-none tracking-[-0.04em]">
|
|
404
|
|
</h1>
|
|
<h2 className="mt-sp-4 text-[clamp(22px,3vw,30px)] font-semibold leading-[1.15] tracking-[-0.02em]">
|
|
Página não encontrada
|
|
</h2>
|
|
<p className="mt-sp-4 max-w-[34em] text-[17px] leading-[1.55] text-[rgba(244,242,237,.72)]">
|
|
A página que você está procurando não existe ou foi movida.
|
|
</p>
|
|
<div className="mt-sp-8 flex flex-col gap-sp-3 sm:flex-row">
|
|
<HoverPrefetchLink href="/" className={primaryButton}>
|
|
Voltar ao início
|
|
</HoverPrefetchLink>
|
|
<HoverPrefetchLink href="/cases" className={secondaryButtonDark}>
|
|
Ver os cases
|
|
</HoverPrefetchLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
aria-hidden="true"
|
|
className="order-first mx-auto aspect-[16/10] w-full max-w-[280px] overflow-hidden lg:order-none lg:max-w-none"
|
|
>
|
|
<video
|
|
className="block h-full w-full object-cover motion-reduce:hidden"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="metadata"
|
|
poster="/3d/peca-404.webp"
|
|
>
|
|
<source src="/3d/peca-404.webm" type="video/webm" />
|
|
<source src="/3d/peca-404.mp4" type="video/mp4" />
|
|
</video>
|
|
{/* biome-ignore lint/performance/noImgElement: imagem decorativa e pequena, só para movimento reduzido */}
|
|
<img
|
|
src="/3d/peca-404.webp"
|
|
alt=""
|
|
width={640}
|
|
height={400}
|
|
loading="lazy"
|
|
className="hidden h-full w-full object-cover motion-reduce:block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|