erikghandClaude Opus 5.5
89e54a6e84
Primitivas y contenido del rediseño (escala tipográfica, Revelar, MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero, sección Proceso de ocho etapas, lib/content.ts reestructurado en seis secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran. Encima, lo de esta sesión: - recorrido: creeer vuelve a responder cada situación en vez de repetirla (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos de las seis fotos de México. - contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0). - enlaces: lo externo abre en otra pestaña con noopener y aviso para lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan. - Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al hover lo que no es clicable. - Disciplinas: la frase «No son la promesa — son los medios» gana peso y se agrupa con título e ilustración; sin cortes huérfanos en móvil. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { Container } from '@/components/primitives/Container';
|
|
import { MarcaSeccion } from '@/components/primitives/MarcaSeccion';
|
|
|
|
// The document's grid: a narrow margin column carrying the section number and
|
|
// its mark, and a wide column carrying everything else. That asymmetry is what
|
|
// makes the page read as a document rather than as a stack of landing blocks.
|
|
//
|
|
// Three vertical rhythms rather than one. Every section used to share
|
|
// `py-16 md:py-24`, which made ten sections go past like a metronome; the page
|
|
// needs somewhere to breathe and somewhere to hurry.
|
|
|
|
type Ritmo = 'compacta' | 'normal' | 'momento';
|
|
type Fondo = 'claro' | 'oscuro';
|
|
|
|
const RITMO: Record<Ritmo, string> = {
|
|
compacta: 'py-20 md:py-28',
|
|
normal: 'py-28 md:py-40',
|
|
momento: 'py-36 md:py-56',
|
|
};
|
|
|
|
const FONDO: Record<Fondo, string> = {
|
|
claro: 'bg-white text-azul-profundo',
|
|
oscuro: 'bg-azul-profundo bg-hondo-navy text-white',
|
|
};
|
|
|
|
// Gold on navy is 6,07:1; on white it is 2,76:1 and the mark is a graphic that
|
|
// carries meaning, so it needs 3:1.
|
|
const MARCA: Record<Fondo, string> = {
|
|
claro: 'text-dorado-texto',
|
|
oscuro: 'text-dorado',
|
|
};
|
|
|
|
export function Seccion({
|
|
numero,
|
|
paso,
|
|
ritmo = 'compacta',
|
|
fondo = 'claro',
|
|
id,
|
|
children,
|
|
}: {
|
|
numero: string;
|
|
paso: number;
|
|
ritmo?: Ritmo;
|
|
fondo?: Fondo;
|
|
id?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<section id={id} className={`${FONDO[fondo]}${id ? ' scroll-mt-24' : ''}`}>
|
|
<Container className={RITMO[ritmo]}>
|
|
<div className="grid gap-y-8 md:grid-cols-[7rem_minmax(0,1fr)] md:gap-x-10">
|
|
<div
|
|
aria-hidden="true"
|
|
className="flex items-center gap-4 md:flex-col md:items-start md:gap-5"
|
|
>
|
|
<span className="font-sans font-semibold text-xs tracking-[0.2em] tabular-nums opacity-50">
|
|
{numero}
|
|
</span>
|
|
<MarcaSeccion paso={paso} className={`w-10 shrink-0 ${MARCA[fondo]}`} />
|
|
</div>
|
|
<div className="min-w-0">{children}</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|