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.
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import Image from "next/image";
|
|
import "./logo.css";
|
|
|
|
interface LogoProps {
|
|
theme?: "dark" | "light";
|
|
className?: string;
|
|
loading?: "eager" | "lazy";
|
|
}
|
|
|
|
/*
|
|
* O logo em duas partes sobre a caixa do wordmark-<tema>.webp (1600x330): o símbolo em SVG em linha, para os blocos
|
|
* lima poderem se mexer (logo.css), e o texto, que é o mesmo .webp com o símbolo apagado (wordmark-text-<tema>.webp,
|
|
* do mesmo tamanho, para passar pelo mesmo redimensionamento e dar a mesma altura de antes). As coordenadas do SVG
|
|
* são pixels do .webp original, medidas nas bordas das formas; cor e opacidade também vêm dele.
|
|
*/
|
|
const SHAPE_FILL = { dark: "#f4f3ee", light: "#00090b" } as const;
|
|
|
|
// em ordem de encaixe, de baixo para cima
|
|
const BLOCKS = [
|
|
{ x: 130.66, y: 110.25, width: 76.47, height: 86.05 },
|
|
{ x: 204.39, y: 43.9, width: 67.72, height: 69.39 },
|
|
{ x: 287.27, y: 3.28, width: 39.58, height: 40.82 },
|
|
{ x: 312.91, y: 79.72, width: 39.39, height: 39.76 },
|
|
];
|
|
|
|
export function Logo({
|
|
theme = "dark",
|
|
className = "w-48",
|
|
loading = "lazy",
|
|
}: Readonly<LogoProps>) {
|
|
return (
|
|
<span className={`relative block max-w-full ${className}`}>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
viewBox="0 0 360 330"
|
|
preserveAspectRatio="none"
|
|
className="absolute top-0 left-0 h-full w-[22.5%] overflow-visible"
|
|
>
|
|
<path
|
|
fill={SHAPE_FILL[theme]}
|
|
fillOpacity={0.933}
|
|
d="M10.17 223.44H40.23V188.63H74.87V153.98H111.2V222.33H74.93V277.73H139.93V217.4H200.14V291.36H171.59V325.32H10.17Z"
|
|
/>
|
|
<g fill="#ccfa00" opacity={0.98}>
|
|
{BLOCKS.map((block) => (
|
|
<rect key={block.x} className="logo-bloco" {...block} />
|
|
))}
|
|
</g>
|
|
</svg>
|
|
<Image
|
|
src={`/brand/wordmark-text-${theme}.webp`}
|
|
alt="Evandro.dev.br"
|
|
width={1600}
|
|
height={330}
|
|
sizes="240px"
|
|
loading={loading}
|
|
className="block h-auto w-full"
|
|
/>
|
|
</span>
|
|
);
|
|
}
|