ladder-web

🪜 LADDER Landing

Landing profesional para agencia digital especializada en desarrollo móvil, automatizaciones con IA y digitalización de administraciones públicas.

🎯 Características

Astro 7 — SSG, componentes .astro, astro:i18n nativo (build-time, sin localStorage)
Tailwind CSS v4 — vía @tailwindcss/vite, build-time (no CDN)
TypeScript — Revealing Module pattern en src/scripts/
SEO optimizado — Meta tags, structured data, Open Graph
100% accesible — Semántica HTML5, ARIA labels
Responsive — Optimizado para móvil, tablet y desktop

📁 Estructura del Proyecto

ladder-web/
├── src/
│   ├── pages/                      # Rutas Astro — ES sin prefijo, EN bajo /en/
│   │   ├── index.astro
│   │   ├── nosotros.astro, contacto.astro, faq.astro, ...
│   │   ├── servicios/*.astro       # 6 páginas de servicio
│   │   ├── admin/*.astro           # login, dashboard, access-denied, reset_password
│   │   └── en/                     # espejo EN de todo lo anterior
│   ├── layouts/                    # BaseLayout, AuthLayout
│   ├── components/                 # Header, Footer, AdminHeader, AdminFooter
│   ├── scripts/                    # Client scripts TS (Revealing Module, window.X)
│   ├── i18n/                       # useTranslations + 22 namespaces × es/en
│   └── styles/global.css
│
├── doc/                             # Documentación operativa (español)
├── docs/adr/                        # Architectural Decision Records
├── supabase/                        # Schema DB — TEMPORAL, en migración a ladder-api (ver ADR-G019)
├── .claude/                         # Contexto Claude Code (arquitectura, convenciones, estado)
├── astro.config.mjs                 # i18n (es/en, prefixDefaultLocale: false), @tailwindcss/vite
├── vitest.config.js                 # Tests unitarios (independiente del build)
├── package.json
└── netlify.toml                     # Deploy config

🚀 Stack Tecnológico

Frontend

Astro 7 — SSG, componentes .astro, routing i18n nativo
Tailwind CSS v4 — @tailwindcss/vite, procesado en build
TypeScript — src/scripts/**, Revealing Module tipado

Backend

Supabase (PostgreSQL + Auth + RLS) — backend actual (forms, analytics, admin auth). Temporal: en migración completa a ladder-api propio (Hono + Prisma), ver ADR-G019 y worlds/ladder-api/CLAUDE.md.

Herramientas de Desarrollo

ESLint / Stylelint / HTMLHint — linting
Prettier — formateo de código
Vitest — tests unitarios
Playwright — tests visuales (config lista, specs pendientes)

Deploy

Netlify — hosting con build automático, dist/ como output

🛠️ Instalación

git clone https://github.com/Ledder-Dev/ladder-web.git
cd ladder-web

pnpm install   # pnpm-lock.yaml es la lockfile del proyecto, no usar npm install

pnpm run dev

La aplicación estará disponible en http://localhost:4321

📝 Scripts Disponibles

# Desarrollo
npm run dev              # Astro dev server (puerto 4321)
npm run build            # astro build → dist/
npm run preview          # astro preview

# Linting
npm run lint             # htmlhint + stylelint + eslint
npm run lint:fix         # Auto-fix CSS y JS

# Formateo
npm run format            # Prettier
npm run format:check      # Verificar formato

# Validación
npm run validate           # Lint + format check
npm run check:links        # Verificar enlaces rotos
npm run check:a11y         # Verificar accesibilidad
npm run pre-commit          # validate + check:links (antes de cada commit)

# Tests
npm run test               # vitest run
npm run test:visual        # Playwright (config lista, specs pendientes)

# Deploy
npm run deploy:vercel      # Legado — deploy real vía Netlify (netlify.toml), no usar este script

🌐 i18n

Routing build-time vía astro:i18n: / = español (default), /en/* = inglés. Ningún toggle en cliente ni localStorage — cambiar idioma es navegar a la página espejo. Texto vía {t('namespace.key')}, nunca hardcodeado. Detalle → .claude/BUSINESS_LOGIC.md.

🎨 Convenciones de Código

Nunca usar: React / Vue / Angular · jQuery · Bootstrap · SASS
HTML: elementos semánticos, alt en imágenes, labels en inputs, ARIA labels
CSS: Tailwind-first, BEM para clases custom
JS/TS: Revealing Module pattern, const/let, async/await, try/catch en funciones async

Detalle completo → .claude/CONVENTIONS.md

🎨 Design System (Tailwind v4, `@theme` en `src/styles/global.css`)

Token	Hex	Uso
`brand-blood`	`#900000`	CTA primario, acentos
`brand-deep-red`	`#660000`	Estados hover
`background-dark`	`#0a0a0a`	Fondo de página
`surface-dark`	`#121212`	Superficies elevadas
`card-dark`	`#1a1a1a`	Fondos de tarjetas

Tipografía: Plus Jakarta Sans — clase font-display en <body>.

🌐 SEO

Meta tags únicos por página, Open Graph, Twitter Card
Structured data (JSON-LD) por página
Sitemap generado en build

♿ Accesibilidad

Contraste WCAG AA, navegación por teclado, screen reader compatible, ARIA labels

🚀 Deploy

Netlify (actual)

Conectar repositorio en Netlify
Build command: npm run build · Output directory: dist
Configuración completa en netlify.toml
Deploy automático en cada push a master

📖 Documentación

Arquitectura — estructura del proyecto
Convenciones — guía de estilo
Base de datos — schema Supabase, TEMPORAL
Lógica de negocio — auth, i18n, analytics, forms
Estado actual
ADRs — decisiones arquitectónicas

🤝 Contribuir

Crear rama feature (git checkout -b feature/nueva-funcionalidad)
Commit con mensaje descriptivo (git commit -m 'feat: añadir nueva funcionalidad')
Push a la rama y abrir Pull Request

Tipos de commits

feat · fix · style · refactor · docs · perf · test

👥 Equipo

LADDER Agency — Especialistas en digitalización estratégica

Hecho con ❤️ por LADDER Agency