no dudes en visitar este enlace
[https://arcana-architecture.netlify.app/

La mayoría de las webs de estudios de arquitectura empiezan igual: una foto de portada a sangre, un titular en tipografía serif y una cuadrícula de miniaturas de proyectos. Está bien. Pero también es completamente olvidable. ARCANA empieza de otra manera: con una ficha técnica de proyecto, coordenadas y dimensiones que van pasando como en una auténtica mesa de dibujo, y una secuencia de scroll en la que un plano dibujado a mano se va resolviendo poco a poco en una fotografía del edificio terminado. Es el tipo de primera impresión que hace que el visitante deje de desplazarse un segundo y mire de verdad. Todo lo que viene después de esa apertura está pensado para mantener esa sensación, en lugar de volver al terreno de las plantillas genéricas.

La plantilla se entrega como un sitio completo de siete páginas en Next.js. La página de inicio incluye la interacción de scroll insignia Blueprint → Reality, un índice editorial de proyectos, estudios de materiales, la filosofía del estudio, trabajos seleccionados y un adelanto del diario. El índice de proyectos presenta el trabajo del estudio como una lista editorial densa en lugar de una cuadrícula de tarjetas genérica. Cada página de detalle de proyecto es un caso de estudio completo: datos del proyecto, declaración de concepto y un visor interactivo de dibujos de planta / alzado / sección / detalle que permite a los visitantes pasar de un dibujo técnico a otro como haría un arquitecto al colgarlos en la pared, además de los materiales utilizados y la fotografía. La página del estudio cubre la presentación de la práctica y un archivo horizontal de objetos del estudio, la página de enfoque recorre la metodología de cinco etapas (Observar, Definir, Dibujar, Probar, Construir), el diario recoge notas del estudio sobre material y proceso, y el contacto es un formulario de consulta totalmente validado con estados correctos de carga, éxito y error.

Nada de esto requiere tocar un backend. Cada pieza de contenido (proyectos, entradas del diario, materiales, textos del estudio, etiquetas de navegación) vive en archivos TypeScript simples y legibles dentro de data/, así que renombrar un proyecto, cambiar un material o reescribir la biografía del estudio es editar texto, no reconstruir. Las imágenes se obtienen mediante un pequeño ayudante generador de URL para que puedas apuntar cualquier entrada a tu propia fotografía o a un archivo alojado en public/ en cuestión de segundos. Los colores están centralizados como propiedades personalizadas de CSS, las fuentes se cambian en un solo archivo y la navegación es un único array: el tipo de estructura que hace accesible la personalización incluso si no dominas React.

Bajo el capó: Next.js 16 (App Router) + TypeScript, Tailwind CSS 4, Framer Motion para la interfaz y las transiciones de página, GSAP + ScrollTrigger para la secuencia de scroll insignia, Lenis para el desplazamiento suave y React Hook Form + Zod para la validación del formulario de contacto. Toda la experiencia respeta prefers-reduced-motion (GSAP/Lenis se omiten por completo y las transiciones de Framer se reducen), está construida pensando en la accesibilidad (texto alternativo real, estados :focus-visible, marcado semántico) y está optimizada para obtener buenos Core Web Vitals y metadatos SEO limpios desde el primer momento. Lo que obtienes: el código fuente completo, siete páginas totalmente construidas, todos los componentes y animaciones, fuentes alojadas por ti, una guía escrita para el cliente que cubre cada elemento editable y una configuración de despliegue en Netlify con un clic (que también se despliega sin problemas en Vercel o en cualquier host de Next.js). Sobre qué construyes: una plantilla estática sin backend; consulta los Detalles adicionales más abajo para saber exactamente qué no está incluido.