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.
97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { type CSSProperties, type ReactNode, useRef } from "react";
|
|
import { useInView } from "@/app/hooks/useInView";
|
|
import { DrawLine } from "./animations/DrawLine";
|
|
import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
interface SectionProps {
|
|
id?: string;
|
|
eyebrow?: string;
|
|
title: string;
|
|
description?: string;
|
|
dark?: boolean;
|
|
aside?: ReactNode;
|
|
children: ReactNode;
|
|
disableChildrenAnimation?: boolean;
|
|
}
|
|
|
|
/** Atraso (s) de cada item do cabeçalho: entram em escada, como a linha que se desenha logo depois. */
|
|
const stagger = (seconds: number) =>
|
|
({ "--reveal-delay": `${seconds}s` }) as CSSProperties;
|
|
|
|
export const Section = ({
|
|
id,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
dark,
|
|
aside,
|
|
children,
|
|
disableChildrenAnimation = false,
|
|
}: SectionProps) => {
|
|
const headerRef = useRef<HTMLDivElement>(null);
|
|
const headerShown = useInView(headerRef);
|
|
const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
|
|
|
|
return (
|
|
<section id={id} className={baseClass}>
|
|
<div className="ds-section-shell">
|
|
<div
|
|
ref={headerRef}
|
|
className="ds-section-header"
|
|
data-shown={headerShown ? "" : undefined}
|
|
>
|
|
<div className="ds-section-meta">
|
|
{eyebrow && (
|
|
<p
|
|
className="ds-eyebrow ds-type"
|
|
style={
|
|
{
|
|
...stagger(0.02),
|
|
"--n": eyebrow.length,
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
{eyebrow}
|
|
</p>
|
|
)}
|
|
|
|
<h2 className="ds-section-title">
|
|
<TextDiffuseReveal text={title} />
|
|
</h2>
|
|
|
|
{description && (
|
|
<p
|
|
className="ds-section-description ds-reveal"
|
|
style={stagger(0.1)}
|
|
>
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
<DrawLine delay={0.16} />
|
|
</div>
|
|
|
|
{/* <div>, não <aside>: dentro de <main> um <aside> vira landmark "complementary" fora do nível do topo
|
|
(axe: landmark-complementary-is-top-level); o conteúdo é um detalhe do cabeçalho, não uma região */}
|
|
{aside && (
|
|
<div className="ds-reveal" style={stagger(0.18)}>
|
|
{aside}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!disableChildrenAnimation ? (
|
|
<Reveal y={40} duration={0.9} delay={0.12}>
|
|
<div>{children}</div>
|
|
</Reveal>
|
|
) : (
|
|
<div>{children}</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|