Assize

Sobre Este Template

Assize es una plantilla para boutiques de apelación, despachos de litigio y cualquier práctica de servicios profesionales cuyo producto es el argumento escrito. Doce plantillas de página cubren áreas de práctica con páginas de detalle, un docket de resultados anclado en estadísticas, fichas de abogados con aside sticky de admisiones, una sección de insights con formato de revista científica y artículos long-form, nosotros, contacto, una página legal de publicidad de abogados y un 404 que no se sale del personaje. La firma es The Redline: el hero es un párrafo de boilerplate de la contraparte que se corrige en vivo mientras haces scroll — los tachados se dibujan, se abre un caret, se compone lenguaje más preciso y las notas al margen se acumulan en un rail persistente. Incluye dos skins diseñados, Record (piedra caliza) y Bench (tinta), verificados en contraste AA en lugar de invertidos automáticamente. Cinco colecciones de contenido tipadas con Zod se referencian entre sí, y toda la animación resuelve a un estado estático legible en touch o reduced motion.

Firma

El hero es un párrafo de boilerplate de la contraparte, y el scroll lo edita delante de ti: los tachados se dibujan de izquierda a derecha sobre las vaguedades, se abre un caret y la frase de reemplazo más precisa se compone en tinta madder mientras las notas al margen se acumulan en un rail de docket. Es un único ScrollTrigger fijado con scrub de 1, animando custom properties de CSS en lugar de estilos inline. La sección cierra elevando el contenido mientras la banda verde sube a tragarse la página — secuenciado para que el texto nunca quede varado en contraste insuficiente.

Características

• 12 plantillas de página — Inicio, Práctica, Área de Práctica, Resultados, Abogados, Ficha de Abogado, Insights, Artículo, Nosotros, Contacto, Avisos Legales, 404
• The Redline — un párrafo hero ligado a scrub de scroll que se tacha sus propias vaguedades, abre un caret y compone en su lugar la frase de reemplazo más precisa
• La animación del redline se impulsa con custom properties de CSS (--strike, --caret, --insert-o) animadas con GSAP, así el pintado lo hace CSS y nada queda estampado inline antes de la hidratación
• Rail de márgenes — cuatro anotaciones estilo docket (¶ 1 a ¶ 4), una de ellas con cita de regla, que aparecen en posiciones fijas del mismo timeline de scroll
• gsap.matchMedia limita el pin solo a desktop con puntero fine — touch, viewports estrechos y reduced motion aterrizan directo en el estado final sin pin-spacer muerto
• Dos skins diseñados — Record (piedra caliza) y Bench (tinta) — conmutables desde el nav y persistidos en localStorage; los roles se rediseñan por skin, no se invierten automáticamente, y ambos están verificados AA
• 5 colecciones de contenido tipadas con Zod y referencias cruzadas — áreas de práctica (5), abogados (4), resultados (8), autores (3), insights (5); los resultados referencian áreas y los insights referencian autores
• Estadísticas con count-up que se disparan correctamente incluso si el elemento ya está en viewport al cargar
• Índice de insights construido como docket de revista — filas editoriales numeradas con masthead de volumen, autor, fecha y tiempo de lectura, sin retícula de cards en ningún punto
• Páginas de área de práctica con banda masthead verde, banda arquitectónica a sangre completa que entra con clip-wipe, medida de lectura estrecha y aside sticky de asuntos representativos
• Layout de insight long-form con capitular (::first-letter) y navegación al artículo anterior/siguiente
• Formulario de contacto con máquina de estados completa — idle, validación por campo, submitting, enviado y error, cada uno con su propia UI diseñada
• Cuadrícula base tipo bloc jurídico con paso de 32px como primitiva de fondo reutilizable, más decals float-line, float-cross y de esquina
• Cabinet Grotesk se sirve como woff2 variable self-hosted mediante el provider local de fuentes de Astro, y Lora vía el provider de Fontsource — sin llamadas a CDN de fuentes
• AVIF en todas las imágenes mediante el pipeline de Astro, con calidad ajustada por formato en la config del image service (avif effort 7, webp effort 6, mozjpeg) — cero requests externos de imagen
• Smooth scroll con Lenis + Astro View Transitions (ClientRouter) con teardown de GSAP ScrollTrigger en cada navegación, TypeScript strict, cero any

Despliegue