Documentación | 64bit Studio

1. Filosofía de Arquitectura

Este boilerplate se aleja de los gestores de contenido monolíticos para adoptar un enfoque de Código Puro y Rendimiento Extremo. Utilizamos Astro 6 para la generación de HTML estático ultrarrápido y Vue 3 exclusivamente donde la reactividad del cliente es estrictamente necesaria (Arquitectura de Islas).

Objetivo central: Entregar 0kb de JavaScript innecesario al navegador, garantizando métricas perfectas en Google Lighthouse y una retención de usuarios superior.

2. Inicio Rápido

Para levantar el entorno de desarrollo local, clona el repositorio e instala las dependencias. Recomendamos usar npm para mantener la consistencia con el archivo de bloqueo:

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo (localhost:4321)
npm run dev

3. Estructura del Código Fuente

El repositorio está organizado para separar estrictamente la lógica de presentación de los datos de negocio:

/src/components/astro: Componentes UI estáticos y agnósticos de estado (Hero, Cards, Headers).
/src/components/vue: Componentes interactivos del lado del cliente (Lead Forms).
/src/content: Archivos Markdown procesados y validados por el Content Layer API.
/src/data: Archivos JSON (ej. landing.json) que centralizan el copywriting de la web.
/src/styles/global.css: El cerebro visual del proyecto, impulsado por Tailwind CSS v4.

4. Theming y Sistema de Diseño

Todo el branding visual se controla mediante variables inyectadas en la directiva @theme de Tailwind v4. Para adaptar este producto a la identidad de un nuevo cliente, solo necesitas modificar el archivo centralizado global.css:

        
          @theme {
            --color-primary: #111111; /* Textos principales y fondos oscuros */
            --color-accent: #deff9a;  /* Color de conversión (Botones, highlights) */
            --radius-btn: 0.5rem;     /* Redondeo global de botones e inputs */
            --radius-card: 1rem;      /* Redondeo global de contenedores */
          }

5. Gestión de Contenido Dinámico

Para garantizar que la interfaz gráfica nunca se rompa, el contenido se inyecta desde fuentes externas:

Landing Pages: Edita el archivo /src/data/landing.json. Los componentes de Astro consumen estos datos mediante propiedades fuertemente tipadas.
Publicaciones del Blog: Crea archivos .md en la ruta /src/content/blog/. El esquema definido con Zod validará automáticamente la integridad de los metadatos (títulos, fechas, tags) durante el tiempo de compilación.

6. Despliegue en Producción

El proyecto está configurado para compilación estática (SSG). Al ejecutar el comando de build, el motor generará una carpeta /dist con archivos minificados y assets optimizados.

# Compilar para producción
npm run build