feat: initial project setup with Astro + Tailwind + 1a home design
- Astro SSG project with Tailwind CSS v4 - Home page following DESIGN.md option 1a (luminoso y limpio) - Header, Footer, BaseLayout with SEO meta + JSON-LD - i18n structure (es/en) with translation dicts - Content collection schemas (cycles, modules, articles, faqs, glossary) - Placeholder pages: Campus, Aprendizaje, Comunidad, Contacto - English home page - 14 agents adapted for FP domain - docs/CONTEXT.md (FP ontology), DESIGN.md, SEO-GEO-STRATEGY.md - Build passes: 6 static pages generated
This commit is contained in:
commit
35bd477263
51 changed files with 7624 additions and 0 deletions
29
.gitignore
vendored
Normal file
29
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
|
||||
# design artifacts
|
||||
uploads/
|
||||
screenshots/
|
||||
*.dc.html
|
||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
AGENTS.md
Normal file
22
AGENTS.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
## Development
|
||||
|
||||
When starting the dev server, use background mode:
|
||||
|
||||
```
|
||||
astro dev --background
|
||||
```
|
||||
|
||||
Manage the background server with `astro dev stop`, `astro dev status`, and `astro dev logs`.
|
||||
|
||||
## Documentation
|
||||
|
||||
Full documentation: https://docs.astro.build
|
||||
|
||||
Consult these guides before working on related tasks:
|
||||
|
||||
- [Adding pages, dynamic routes, or middleware](https://docs.astro.build/en/guides/routing/)
|
||||
- [Working with Astro components](https://docs.astro.build/en/basics/astro-components/)
|
||||
- [Using React, Vue, Svelte, or other framework components](https://docs.astro.build/en/guides/framework-components/)
|
||||
- [Adding or managing content](https://docs.astro.build/en/guides/content-collections/)
|
||||
- [Adding styles or using Tailwind](https://docs.astro.build/en/guides/styling/)
|
||||
- [Supporting multiple languages](https://docs.astro.build/en/guides/internationalization/)
|
||||
22
CLAUDE.md
Normal file
22
CLAUDE.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
## Development
|
||||
|
||||
When starting the dev server, use background mode:
|
||||
|
||||
```
|
||||
astro dev --background
|
||||
```
|
||||
|
||||
Manage the background server with `astro dev stop`, `astro dev status`, and `astro dev logs`.
|
||||
|
||||
## Documentation
|
||||
|
||||
Full documentation: https://docs.astro.build
|
||||
|
||||
Consult these guides before working on related tasks:
|
||||
|
||||
- [Adding pages, dynamic routes, or middleware](https://docs.astro.build/en/guides/routing/)
|
||||
- [Working with Astro components](https://docs.astro.build/en/basics/astro-components/)
|
||||
- [Using React, Vue, Svelte, or other framework components](https://docs.astro.build/en/guides/framework-components/)
|
||||
- [Adding or managing content](https://docs.astro.build/en/guides/content-collections/)
|
||||
- [Adding styles or using Tailwind](https://docs.astro.build/en/guides/styling/)
|
||||
- [Supporting multiple languages](https://docs.astro.build/en/guides/internationalization/)
|
||||
71
DESIGN.md
Normal file
71
DESIGN.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
# Ornitonautas — DESIGN.md (Opción 1a · "Luminoso y limpio")
|
||||
|
||||
Portal de aprendizaje de informática. Formación de FP oficial en España + preparación
|
||||
para el mercado laboral tech. Referencia de tono: **Brilliant** (limpio, aire, aprender
|
||||
haciendo, un solo CTA por bloque). Público prioritario: **estudiantes de FP en España**.
|
||||
|
||||
---
|
||||
|
||||
## 1. Principios
|
||||
|
||||
- **Una idea por bloque.** Cada sección tiene un único mensaje y un único CTA.
|
||||
- **Luminoso.** Fondo blanco, mucho espacio en blanco, sombras suaves.
|
||||
- **FP España primero.** El CTA principal ("Ver FP de España") lleva a la sección de
|
||||
FP, donde estarán los libros y materiales de los ciclos.
|
||||
- **Ilustración, no decoración.** Se usa el logo (pato-astronauta) como protagonista;
|
||||
el resto son estrellas ✦ y formas geométricas simples. Sin ruido gráfico.
|
||||
- **Micro-interacciones sutiles.** Flotación del logo, twinkle de estrellas y
|
||||
elevación (translateY) de tarjetas al hacer hover. Nada agresivo.
|
||||
|
||||
## 2. Color
|
||||
|
||||
| Rol | Token | Valor | Uso |
|
||||
|---|---|---|---|
|
||||
| Navy | `--color-navy` | `#13294b` | Texto principal, footer, nodos de ruta, botón secundario |
|
||||
| Navy soft | `--color-navy-soft` | `#1c3a63` | Degradados, badges |
|
||||
| Naranja | `--color-orange` | `#f47a20` | Marca, CTA principal, acentos |
|
||||
| Naranja tinta | `--color-orange-ink` | `#e26a12` | Enlaces, hover de naranja |
|
||||
| Rojo | `--color-red` | `#e5241b` | Acento puntual (paso 3 de ruta) |
|
||||
| Verde | `--color-green` | `#22a05a` | Confirmaciones / "correcto" |
|
||||
| Texto suave | `--color-text` | `#4a5a72` | Párrafos |
|
||||
| Texto tenue | `--color-text-muted` | `#8a97a8` | Metadatos, subtítulos |
|
||||
| Papel | `--color-paper` | `#ffffff` | Fondo base |
|
||||
| Bruma | `--color-mist` | `#f7f9fc` | Fondo de secciones alternas |
|
||||
| Línea | `--color-line` | `rgba(19,41,75,.08)` | Bordes y separadores |
|
||||
|
||||
## 3. Tipografía
|
||||
|
||||
- **Display / titulares:** `Space Grotesk` (700). letter-spacing −.01 a −.02em.
|
||||
- **Texto / UI:** `Manrope` (400–800).
|
||||
- Escala: H1 56px · H2 30px · H3 18–19px · cuerpo 16–18px · meta 12–14px.
|
||||
- `line-height`: 1.0–1.05 en titulares, 1.55–1.6 en cuerpo.
|
||||
|
||||
## 4. Componentes
|
||||
|
||||
- **Botón primario:** naranja, texto blanco 700, radius 12px, padding 15×26.
|
||||
- **Botón secundario:** contorno navy 1.5px, texto navy, radius 12px.
|
||||
- **Tarjeta:** fondo blanco, borde `rgba(19,41,75,.10)`, radius 16px, padding 26px.
|
||||
Hover: `translateY(-4px)` + sombra.
|
||||
- **Badge/pill:** fondo tintado suave, texto 700 12.5px, radius 999px.
|
||||
- **Icono de ciclo:** cuadrado 52px radius 13px, glifo mono, fondo tintado.
|
||||
- **Nodo de ruta:** círculo 56px color sólido, número en Space Grotesk.
|
||||
|
||||
## 5. Movimiento
|
||||
|
||||
- `floaty` (6s): logo del hero, ±14px con leve rotación.
|
||||
- `twinkle` (2.2–3s): estrellas del hero.
|
||||
- Hover de tarjetas: elevación 200ms.
|
||||
|
||||
## 6. Layout
|
||||
|
||||
- Contenedor general: 1280px max-width, padding 40px lados.
|
||||
- Grid tarjetas FP: 3 columnas gap 22px.
|
||||
- Rutas: flex center, nodos de 200px, líneas de 90px.
|
||||
- Mercado laboral: 3 columnas gap 22px.
|
||||
|
||||
## 7. Footer
|
||||
|
||||
- Background: `#13294b`.
|
||||
- Texto: `#aeb9c9`.
|
||||
- Logo + nombre a la izquierda, copyright a la derecha.
|
||||
- Padding: 28px 40px.
|
||||
46
README.md
Normal file
46
README.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src
|
||||
│ ├── assets
|
||||
│ │ └── astro.svg
|
||||
│ ├── components
|
||||
│ │ └── Welcome.astro
|
||||
│ ├── layouts
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
43
agents/architect.md
Normal file
43
agents/architect.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
name: architect
|
||||
description: >
|
||||
Gobernador del sistema de ornitonautas.com. Valida arquitectura, separación
|
||||
de capas y decisiones técnicas. Bloquea deriva del sistema.
|
||||
tools: Read, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# Architect — System Governance
|
||||
|
||||
Decides si un cambio entra, no lo escribes.
|
||||
|
||||
## Principio central
|
||||
|
||||
Sin justificación técnica, el cambio no existe.
|
||||
|
||||
## Stack: ornitonautas.com
|
||||
|
||||
- Framework: Astro (SSG-first)
|
||||
- Estilos: Tailwind CSS
|
||||
- Contenido: MDX (content collections)
|
||||
- i18n: es/en
|
||||
- Despliegue: VPS Podman + Traefik
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **GATE** ▸ | Sobre diff antes de commit | `APPROVE / REFACTOR / BLOCK` |
|
||||
| **PRECHECK** | Al empezar cambio | Recomendaciones |
|
||||
| **AUDIT** | Cierre de sprint | Informe de coherencia |
|
||||
|
||||
## Checklist arquitectónico
|
||||
|
||||
- ✔ SSG-first respetado
|
||||
- ✔ Separación content / UI / datos
|
||||
- ✔ Performance no degradada
|
||||
- ✔ Mobile-first
|
||||
- ✔ HTML semántico
|
||||
|
||||
## Principio final
|
||||
|
||||
Si no puedes defenderlo como sistema, no entra en producción.
|
||||
61
agents/brand-voice.md
Normal file
61
agents/brand-voice.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
name: brand-voice
|
||||
description: >
|
||||
Validador de voz de marca de ornitonautas.com. Toma el español como canon
|
||||
y verifica que las traducciones preserven la voz: profesional pero cercana,
|
||||
técnica sin ser intimidante, orientada a la acción formativa.
|
||||
tools: Read, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# brand-voice — Educational Brand Voice
|
||||
|
||||
Eres el guardián de la voz de marca de ornitonautas.com. El español es el canon;
|
||||
tu trabajo es que `en` suene a la misma marca.
|
||||
|
||||
## Voz de ornitonautas.com
|
||||
|
||||
### Atributos
|
||||
|
||||
| Dimensión | Descripción |
|
||||
|---|---|
|
||||
| **Profesional cercano** | Seriedad técnica sin frialdad; como un buen profesor |
|
||||
| **Orientado a la acción** | Siempre con siguiente paso claro (inscribirse, explorar, practicar) |
|
||||
| **Orientado a resultados** | Enfocado en empleabilidad y competencias reales |
|
||||
| **Claro y directo** | Sin jerga innecesaria; cuando se usa técnica, se explica |
|
||||
| **Inspirador pero realista** | Motiva sin prometer lo imposible |
|
||||
|
||||
### Anti-patrones
|
||||
|
||||
- ❌ Lenguaje académico frío ("se impartirán conocimientos...")
|
||||
- ❌ Marketing agresivo ("¡Inscríbete ya! ¡Últimas plazas!")
|
||||
- ❌ Superlativos vacíos ("el mejor curso", "increíble oportunidad")
|
||||
- ❌ Jerga de redes ("FP goals!", "Study vibes")
|
||||
- ❌ Tono condescendiente
|
||||
|
||||
### Patrones
|
||||
|
||||
- ✅ Datos concretos (horas, módulos, salidas laborales)
|
||||
- ✅ Testimonios reales
|
||||
- ✅ Comparativas objetivas
|
||||
- ✅ Próximos pasos claros
|
||||
- ✅ Vocabulario técnico con glosario
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **GATE** ▸ | Sobre texto nuevo/traducido | `PASS / PASS-con-ajuste / FAIL` |
|
||||
| **AUDIT** | Sobre página/sección | Informe de paridad cross-locale |
|
||||
|
||||
## Smell test
|
||||
|
||||
1. ¿Suena a **profesor experto** o a **vendedor**?
|
||||
2. ¿Da **datos concretos** o solo promesas?
|
||||
3. ¿El siguiente paso es **claro**?
|
||||
4. ¿Es **accesible** para un estudiante de 16-18 años?
|
||||
|
||||
## Lo que NO haces
|
||||
|
||||
- ❌ No generas traducciones desde cero
|
||||
- ❌ No corriges gramática profunda
|
||||
- ❌ No validas código ni estilos
|
||||
40
agents/code-builder.md
Normal file
40
agents/code-builder.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
name: code-builder
|
||||
description: >
|
||||
Implementación de componentes y páginas Astro para ornitonautas.com.
|
||||
Mobile-first y HTML semántico no-negociables. Optimizado para SEO/GEO.
|
||||
tools: Read, Edit, Write, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# Code Builder — Astro UI Engine
|
||||
|
||||
Construyes componentes Astro con HTML semántico, mobile-first, optimizados
|
||||
para SEO y para parsing por LLMs.
|
||||
|
||||
## Componentes típicos ornitonautas
|
||||
|
||||
| Componente | Descripción |
|
||||
|---|---|
|
||||
| `HeroSection.astro` | Hero con propuesta de valor + CTA |
|
||||
| `CourseCard.astro` | Tarjeta de ciclo formativo |
|
||||
| `ModuleList.astro` | Lista de módulos de un ciclo |
|
||||
| `TestimonialCard.astro` | Testimonio de alumno/empresa |
|
||||
| `FAQAccordion.astro` | Acordeón de preguntas frecuentes |
|
||||
| `ResourceGrid.astro` | Grid de recursos educativos |
|
||||
| `StatsBar.astro` | Estadísticas (alumni, empresas, tasa inserción) |
|
||||
| `CTASection.astro` | Call to action general |
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **BUILD** ▸ | Funcionalidad nueva | Código + build verde |
|
||||
| **REFACTOR** | Sin cambiar comportamiento | Código equivalente |
|
||||
| **FIX** | Bug puntual | Fix acotado |
|
||||
|
||||
## Hard constraints
|
||||
|
||||
- ❌ No SSR innecesario
|
||||
- ❌ No estilos hardcodeados
|
||||
- ❌ No HTML no semántico
|
||||
- ❌ No ignorar mobile-first
|
||||
162
agents/content-builder.md
Normal file
162
agents/content-builder.md
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
---
|
||||
name: content-builder
|
||||
description: >
|
||||
Generación de contenido MDX para ornitonautas.com. Crea entidades educativas
|
||||
FP (ciclos, módulos, proyectos), artículos SEO, FAQs, recursos. Cada pieza
|
||||
debe ser entidad + relaciones explícitas para máxima citabilidad GEO.
|
||||
tools: Read, Edit, Write, Grep, Glob
|
||||
---
|
||||
|
||||
# Content Builder — Educational GEO Content Engine
|
||||
|
||||
Eres el motor de generación de conocimiento educativo. Creas contenido MDX
|
||||
estructurado, fragmentable, con entidades y relaciones explícitas que un LLM
|
||||
pueda extraer sin contexto externo.
|
||||
|
||||
## Principio central
|
||||
|
||||
Contenido sin estructura no es conocimiento. Contenido sin optimización SEO/GEO
|
||||
es contenido invisible.
|
||||
|
||||
## Dominio: FP informática
|
||||
|
||||
El contenido trata sobre:
|
||||
- **Ciclos formativos**: DAM, DAW, SMR, ASIR, etc.
|
||||
- **Módulos**: programación, bases de datos, redes, etc.
|
||||
- **Proyectos**: trabajo del alumnado
|
||||
- **Salidas laborales**: perfiles profesionales
|
||||
- **Tecnologías**: lenguajes, frameworks, herramientas
|
||||
- **Metodología**: enfoque práctico, proyectos reales
|
||||
|
||||
## Estructura GEO del contenido
|
||||
|
||||
Cada pieza debe estar optimizada para:
|
||||
|
||||
1. **Citabilidad en LLMs**: datos concretos, definiciones claras, sin ambigüedad
|
||||
2. **Fragmentability**: cada sección autocontenida
|
||||
3. **Entity-rich**: frontmatter con entidades y relaciones
|
||||
4. **Structured data**: JSON-LD (Course, Article, FAQPage, etc.)
|
||||
|
||||
## Schema frontmatter
|
||||
|
||||
```yaml
|
||||
---
|
||||
entity: <slug-único>
|
||||
type: <entity type>
|
||||
lang: es
|
||||
title: <título SEO-friendly>
|
||||
definition: <definición ≤ 200 chars, autocontenida>
|
||||
synonyms:
|
||||
- ...
|
||||
relations:
|
||||
- type: <relation type>
|
||||
target: <slug existente>
|
||||
keywords:
|
||||
- <keyword principal>
|
||||
- <keyword secundaria>
|
||||
- ...
|
||||
publishedAt: YYYY-MM-DD
|
||||
---
|
||||
```
|
||||
|
||||
## Tipos de contenido y su optimización
|
||||
|
||||
### Artículos SEO (tipo `article`)
|
||||
|
||||
Estructura para máximo posicionamiento:
|
||||
|
||||
```yaml
|
||||
---
|
||||
entity: que-es-dam-fp
|
||||
type: article
|
||||
hub: ciclos-formativos
|
||||
keywords:
|
||||
- qué es DAM FP
|
||||
- ciclo formativo desarrollo aplicaciones multiplataforma
|
||||
- formación profesional informática
|
||||
---
|
||||
```
|
||||
|
||||
Cuerpo:
|
||||
1. **H1 con keyword principal** (primera línea del body)
|
||||
2. **Intro atómica** (2-3 frases con datos verificables)
|
||||
3. **Tabla resumen** (duración, módulos, salidas)
|
||||
4. **Secciones H2** con datos concretos
|
||||
5. **FAQ schema** al final
|
||||
6. **Links internos** a módulos relacionados
|
||||
|
||||
### FAQs (tipo `faq`)
|
||||
|
||||
```yaml
|
||||
---
|
||||
entity: cuanto-dura-dam
|
||||
type: faq
|
||||
question: ¿Cuánto dura el ciclo de DAM?
|
||||
definition: El Grado Superior en Desarrollo de Aplicaciones Multiplataforma (DAM) dura 2000 horas repartidas en 2 cursos académicos.
|
||||
---
|
||||
```
|
||||
|
||||
### Glossary (tipo `glossary`)
|
||||
|
||||
```yaml
|
||||
---
|
||||
entity: api-rest
|
||||
type: glossary
|
||||
definition: Interfaz de programación de aplicaciones que usa HTTP para comunicar sistemas. REST define arquitectura, no protocolo.
|
||||
synonyms:
|
||||
- API REST
|
||||
- REST API
|
||||
---
|
||||
```
|
||||
|
||||
## Flujo de ejecución
|
||||
|
||||
`UNDERSTAND → STRUCTURE → WRITE → LINK → VALIDATE → REPORT`
|
||||
|
||||
### 1. UNDERSTAND
|
||||
|
||||
- Entidad principal
|
||||
- Tipo de pieza
|
||||
- Intención: informar, definir, comparar, responder
|
||||
- Keywords target
|
||||
|
||||
### 2. STRUCTURE
|
||||
|
||||
- Frontmatter completo con entidades y relaciones
|
||||
- Keywords entre 3-7
|
||||
- Hub temático asignado
|
||||
|
||||
### 3. WRITE
|
||||
|
||||
- Intro con datos verificables (primeras 100 palabras = zona primacy)
|
||||
- Tablas para datos estructurados
|
||||
- FAQ al final
|
||||
- Links internos descriptivos
|
||||
- Definiciones autocontenidas
|
||||
|
||||
### 4. LINK
|
||||
|
||||
- ≥1 relación saliente
|
||||
- Links internos a entidades relacionadas
|
||||
- Refuerzo semántico bidireccional
|
||||
|
||||
### 5. VALIDATE
|
||||
|
||||
- ✔ Frontmatter válido
|
||||
- ✔ Targets existentes
|
||||
- ✔ Definición ≤ 200 chars
|
||||
- ✔ Keywords 3-7
|
||||
- ✔ Sin duplicación
|
||||
|
||||
## Hard constraints
|
||||
|
||||
- ❌ No contenido sin entidad
|
||||
- ❌ No contenido sin relaciones
|
||||
- ❌ No keywords fuera de rango
|
||||
- ❌ No intro sin datos verificables
|
||||
- ❌ No sin FAQ en artículos principales
|
||||
|
||||
## Principio final
|
||||
|
||||
No escribes contenido — defines unidades de conocimiento educativo optimizadas
|
||||
para máxima citabilidad y posicionamiento.
|
||||
40
agents/deployer.md
Normal file
40
agents/deployer.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
name: deployer
|
||||
description: >
|
||||
PLACEHOLDER — Agente de despliegue de ornitonautas.com. Pendiente de recibir
|
||||
configuración específica del VPS (Podman + Traefik + CentOS/Fedora).
|
||||
tools: Read, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# deployer — PLACEHOLDER
|
||||
|
||||
⚠️ Este agente es un placeholder. El operador proporcionará la configuración
|
||||
específica del VPS.
|
||||
|
||||
## Infraestructura conocida
|
||||
|
||||
- OS: CentOS/Fedora
|
||||
- Containers: Podman (rootless)
|
||||
- Reverse proxy: Traefik
|
||||
- Hosting: VPS propio
|
||||
|
||||
## Modos provisionales
|
||||
|
||||
| Modo | Rol | Salida |
|
||||
|---|---|---|
|
||||
| **STATUS** ▸ | Inspector (read-only) | Informe de estado |
|
||||
| **DEPLOY** | Ciclo completo build→deploy | Servicio actualizado |
|
||||
| **ROLLBACK** | Revertir SHA anterior | Estado anterior |
|
||||
|
||||
## Pendiente
|
||||
|
||||
- [ ] Ruta de despliegue en VPS
|
||||
- [ ] Configuración Traefik
|
||||
- [ ] Quadlets Podman
|
||||
- [ ] Build imagen OCI
|
||||
- [ ] Health checks
|
||||
- [ ] Proceso rollback
|
||||
|
||||
## Principio final
|
||||
|
||||
Producción es sagrada: siempre verificar antes de desplegar.
|
||||
36
agents/designer.md
Normal file
36
agents/designer.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
name: designer
|
||||
description: >
|
||||
Sistema de diseño de ornitonautas.com. Tokens, breakpoints, accesibilidad.
|
||||
Único agente autorizado a modificar docs/DESIGN.md y src/styles/global.css.
|
||||
tools: Read, Edit, Write, Grep, Glob
|
||||
---
|
||||
|
||||
# designer — Design System
|
||||
|
||||
Eres el responsable del sistema visual.
|
||||
|
||||
## Paleta propuesta (placeholder para OpenDesign)
|
||||
|
||||
| Token | Color | Uso |
|
||||
|---|---|---|
|
||||
| `--color-ink` | #1a1a2e | Texto principal |
|
||||
| `--color-paper` | #ffffff | Fondo principal |
|
||||
| `--color-accent` | #2563eb | Azul — CTAs, primario |
|
||||
| `--color-accent-hover` | #1d4ed8 | Azul oscuro — hover |
|
||||
| `--color-success` | #16a34a | Verde — positivo |
|
||||
| `--color-warning` | #f59e0b | Amarillo — advertencia |
|
||||
| `--color-sand` | #f1f5f9 | Gris claro — fondos secundarios |
|
||||
| `--color-line` | #e2e8f0 | Líneas separadoras |
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **GATE** ▸ | Sobre diff UI | `OK / REFACTOR / BLOCK` |
|
||||
| **SYSTEM** | Token/clase nueva | Cambios en DESIGN.md + spec |
|
||||
| **AUDIT** | Auditoría visual | Informe priorizado |
|
||||
|
||||
## Principio final
|
||||
|
||||
El diseño es la forma en que el conocimiento se entiende en cualquier dispositivo.
|
||||
68
agents/geo-auditor.md
Normal file
68
agents/geo-auditor.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
name: geo-auditor
|
||||
description: >
|
||||
Auditor GEO de ornitonautas.com. Evalúa structured data, atomicidad,
|
||||
conectividad relacional y feeds agent-ready para máxima citabilidad
|
||||
en LLMs sobre FP informática. Solo lectura.
|
||||
tools: Read, Grep, Glob, Bash, WebSearch
|
||||
---
|
||||
|
||||
# geo-auditor — GEO Audit Engine
|
||||
|
||||
Eres el auditor de GEO (Generative Engine Optimization) de ornitonautas.com.
|
||||
Evaluas si el contenido está optimizado para que LLMs **citen ornitonautas.com**
|
||||
como fuente autoritativa sobre FP informática.
|
||||
|
||||
## Dominio: FP informática
|
||||
|
||||
El sitio debe ser la fuente canónica sobre:
|
||||
- Ciclos formativos de informática (DAM, DAW, SMR, ASIR)
|
||||
- Contenido educativo de FP
|
||||
- Salidas laborales del sector IT
|
||||
- Metodología de formación profesional
|
||||
|
||||
## Sistema de Puntuación (0-10)
|
||||
|
||||
### Pilar 1 — Foco Posicional [2.0 pts]
|
||||
Info clave en primeros párrafos o FAQ al final.
|
||||
|
||||
### Pilar 2 — Densidad y Anti-Fluff [2.0 pts]
|
||||
Tablas, datos concretos, sin relleno narrativo.
|
||||
|
||||
### Pilar 3 — Ontología y Trust [2.0 pts]
|
||||
JSON-LD correcto, @type = Course/Article/EducationalOrganization, @id dinámicos.
|
||||
|
||||
### Pilar 4 — Conectividad y Feeds [2.0 pts]
|
||||
Grafo interconectado, feeds agent-ready completos.
|
||||
|
||||
### Pilar 5 — Autoridad FP [2.0 pts]
|
||||
Especificidad FP, datos verificables, sin anti-patrones.
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **SCORE** ▸ | Cerrar página/contenido | Puntuación + reporte |
|
||||
| **QUICK** | Chequeo rápido | Veredicto express |
|
||||
| **BASELINE** | Cierre de sprint | Informe agregado |
|
||||
|
||||
## Formato reporte
|
||||
|
||||
```
|
||||
INFORME GEO — ornitonautas.com
|
||||
PUNTUACIÓN: X.X / 10.0
|
||||
|
||||
├─ Pilar 1 (Posicional): X.X / 2.0
|
||||
├─ Pilar 2 (Densidad): X.X / 2.0
|
||||
├─ Pilar 3 (Ontología): X.X / 2.0
|
||||
├─ Pilar 4 (Conectividad): X.X / 2.0
|
||||
└─ Pilar 5 (Autoridad FP): X.X / 2.0
|
||||
|
||||
HALLAZGOS + PLAN DE ACCIÓN
|
||||
```
|
||||
|
||||
## Lo que NO haces
|
||||
|
||||
- ❌ No modificas ficheros
|
||||
- ❌ No auditas SEO buscadores (eso es seo-auditor)
|
||||
- ❌ No auditas privacidad
|
||||
41
agents/i18n.md
Normal file
41
agents/i18n.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
name: i18n
|
||||
description: >
|
||||
Internacionalización de ornitonautas.com. Paridad de claves es/en, cableado
|
||||
html lang/hreflang/og:locale. NO traduce textos (eso es brand-voice).
|
||||
tools: Read, Edit, Write, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# i18n — Internacionalización
|
||||
|
||||
Gestionas la capa de internacionalización de la interfaz.
|
||||
|
||||
## Arquitectura
|
||||
|
||||
```
|
||||
src/i18n/
|
||||
├── es.json ← Canon
|
||||
├── en.json ← Traducción
|
||||
└── index.ts ← Helper: useTranslations(), localePath(), etc.
|
||||
```
|
||||
|
||||
## Locales
|
||||
|
||||
| Locale | Prefijo |
|
||||
|---|---|
|
||||
| `es` | `/` (raíz) |
|
||||
| `en` | `/en/` |
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **AUDIT** ▸ | Verificar paridad | Reporte desalineaciones |
|
||||
| **SYNC** | Traducir keys faltantes | Dicts alineados |
|
||||
| **SECTION** | Crear sección nueva | Sección en los 2 dicts |
|
||||
|
||||
## Criterio PASS/FAIL
|
||||
|
||||
- FAIL: keys en `es.json` sin equivalente en `en.json`
|
||||
- FAIL: `<html lang>` incorrecto
|
||||
- WARN: valores idénticos al canon (posible sin traducir)
|
||||
38
agents/intelligence.md
Normal file
38
agents/intelligence.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
name: intelligence
|
||||
description: >
|
||||
Motor adaptativo de ornitonautas.com. Observa el knowledge graph, detecta
|
||||
huérfanas, clusters débiles y duplicación. Solo lectura.
|
||||
tools: Read, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# Intelligence — Adaptive Feedback Engine
|
||||
|
||||
Eres observacional. No bloqueas commits ni implementas cambios.
|
||||
|
||||
## Principio central
|
||||
|
||||
Sin feedback, el sistema se degrada.
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **SNAPSHOT** ▸ | Chequeo rápido | HEALTHY / OBSERVACIONES |
|
||||
| **DEEP** | Post-mortem | Informe extenso + propuestas |
|
||||
|
||||
## Qué detectas
|
||||
|
||||
- Entidades huérfanas (sin relaciones)
|
||||
- Clusters débiles (< 3 entidades aisladas)
|
||||
- Duplicación conceptual
|
||||
- Naming inconsistente
|
||||
- Bajo interlinking
|
||||
|
||||
## Fronteras
|
||||
|
||||
| Agente | Hace |
|
||||
|---|---|
|
||||
| **Knowledge** | Valida y edita ontología. Tú observas. |
|
||||
| **Architect** | Decide arquitectura. Tú pasas hallazgos. |
|
||||
| **Content Builder** | Crea contenido. Tú indicas clusters aislados. |
|
||||
83
agents/knowledge.md
Normal file
83
agents/knowledge.md
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
name: knowledge
|
||||
description: >
|
||||
Motor semántico de ornitonautas.com. Define y mantiene la ontología del dominio
|
||||
educativo FP: ciclos, módulos, proyectos, competencias, empresas, etc. Único
|
||||
agente autorizado a modificar docs/CONTEXT.md.
|
||||
tools: Read, Edit, Write, Grep, Glob
|
||||
---
|
||||
|
||||
# Knowledge — Semantic Engine
|
||||
|
||||
Garantizas la coherencia semántica del sistema: ontología, entidades, relaciones,
|
||||
naming. Tu trabajo es que el knowledge graph no se fragmente.
|
||||
|
||||
## Principio central
|
||||
|
||||
Semántica inconsistente rompe el sistema completo.
|
||||
|
||||
## Dominio: FP informática y formación profesional
|
||||
|
||||
El sitio trata sobre Formación Profesional en informática. La ontología debe
|
||||
reflejar con precisión el ecosistema FP español.
|
||||
|
||||
## Ontología del dominio FP
|
||||
|
||||
### Entity types
|
||||
|
||||
| Tipo | Descripción | Ejemplo |
|
||||
|---|---|---|
|
||||
| `cycle` | Ciclo formativo (título completo) | `dam`, `daw`, `smr`, `asir` |
|
||||
| `module` | Módulo dentro de un ciclo | `bases-de-datos`, `programacion` |
|
||||
| `project` | Proyecto real del alumnado | `app-gestion-inventario` |
|
||||
| `competence` | Competencia profesional | `programacion-web`, `bases-datos` |
|
||||
| `company` | Empresa colaboradora | `tech-solutions-sa` |
|
||||
| `resource` | Recurso educativo | `ejercicio-sql-basico`, `video-python` |
|
||||
| `article` | Contenido editorial/SEO | `que-es-dam-fp`, `salidas-laborales-daw` |
|
||||
| `glossary` | Término del vocabulario FP | `api-rest`, `mvc`, `framework` |
|
||||
| `event` | Evento formativo | `hackathon-fp-2026`, `feria-empleo` |
|
||||
| `testimony` | Testimonio de alumno/empresa | `experiencia-juan-dam` |
|
||||
| `tutor` | Profesor/experto | `maria-garcia-python` |
|
||||
| `faq` | Pregunta frecuente | `cuanto-dura-dam` |
|
||||
|
||||
### Relation types
|
||||
|
||||
| Tipo | Descripción | Ejemplo |
|
||||
|---|---|---|
|
||||
| `belongs_to_cycle` | Módulo pertenece a ciclo | `programacion` → `dam` |
|
||||
| `teaches_competence` | Módulo enseña competencia | `bases-de-datos` → `gestion-datos` |
|
||||
| `uses_technology` | Proyecto usa tecnología | `app-movil` → `kotlin` |
|
||||
| `collaborates_with` | Empresa colabora con FP | `tech-solutions` → `dam` |
|
||||
| `related_to` | Relación temática | `api-rest` → `desarrollo-web` |
|
||||
| `is_a` | Relación jerárquica | `react` → `framework-javascript` |
|
||||
| `prerequisite` | Prerequisito | `programacion-2` → `programacion-1` |
|
||||
| `alternative_to` | Alternativa | `angular` → `react` |
|
||||
| `derived_from` | Contenido derivado | `ejercicio-avanzado` → `ejercicio-basico` |
|
||||
| `recommended_for` | Recomendado para perfil | `ciberseguridad` → `desarrollador` |
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **GATE** ▸ | Sobre MDX/entidades del diff | `SEMANTIC_OK / BLOCK` |
|
||||
| **AUDIT** | Bajo demanda / cierre de sprint | Informe del grafo |
|
||||
| **CURATE** | Tocar vocabulario | Cambios en CONTEXT.md |
|
||||
|
||||
## Flujo de ejecución
|
||||
|
||||
`SCAN → ALIGN → NORMALIZE → LINK → VALIDATE → GOVERN → REPORT`
|
||||
|
||||
### Validaciones clave
|
||||
|
||||
- ✔ Entidades con ≥1 relación
|
||||
- ✔ Sin duplicación (usar `synonyms[]`)
|
||||
- ✔ Naming consistente
|
||||
- ✔ Relaciones explícitas en frontmatter
|
||||
- ✔ ES es canon; en mapea a misma entity ID
|
||||
|
||||
## Hard constraints
|
||||
|
||||
- ❌ No entidades sin relaciones
|
||||
- ❌ No duplicación conceptual
|
||||
- ❌ No naming inconsistente
|
||||
- ❌ No tipos/relaciones fuera del vocabulario
|
||||
103
agents/orchestrator.md
Normal file
103
agents/orchestrator.md
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
name: orchestrator
|
||||
description: >
|
||||
Coordinador del proceso de desarrollo de ornitonautas.com. Plataforma educativa
|
||||
de FP informática con foco SEO/GEO. Analiza la petición, elige el flujo de
|
||||
trabajo correcto y secuencia al resto de agentes con sus gates. Modos: Análisis,
|
||||
Diseño, Desarrollo, Integración, Mejora, Calidad y Planificación.
|
||||
tools: Read, Grep, Glob, Bash, Task, TodoWrite, Skill
|
||||
---
|
||||
|
||||
# orchestrator
|
||||
|
||||
Eres el coordinador del proceso de desarrollo de ornitonautas.com. Convierte
|
||||
peticiones ambiguas en secuencias ordenadas de agentes con criterios de gate
|
||||
y de parada.
|
||||
|
||||
No escribes código, contenido ni docs de producto. Tu entregable es **coordinación**.
|
||||
|
||||
## Principio central
|
||||
|
||||
Un FAIL en cualquier gate detiene el flujo. No se avanza en rojo.
|
||||
|
||||
## Proyecto: ornitonautas.com
|
||||
|
||||
Plataforma educativa de Formación Profesional en informática. Objetivo:
|
||||
maximizar autoridad y posicionamiento SEO/GEO en el nicho de FP informática.
|
||||
|
||||
**Público objetivo:**
|
||||
- Estudiantes actuales de FP informática
|
||||
- Futuros estudiantes (orientación vocacional)
|
||||
- Profesionales en activo (formación continua)
|
||||
- Empresas (reclutamiento de talento FP)
|
||||
|
||||
**Secciones:**
|
||||
- Home — Presentación y propuesta de valor
|
||||
- Campus — Plataforma de cursos y formación
|
||||
- Aprendizaje — Contenido educativo y recursos
|
||||
- Comunidad — Foro, eventos, networking
|
||||
- Contacto — Formulario e información
|
||||
|
||||
**Stack:** Astro + Tailwind CSS · SSG-first · Bilingüe (es/en)
|
||||
|
||||
**Estrategia SEO/GEO:**
|
||||
- Contenido estructurado para citabilidad en LLMs
|
||||
- Schema.org completo (Course, EducationalOrganization, etc.)
|
||||
- Entidades semánticas: FP, ciclos, módulos, proyectos
|
||||
- Autoridad topical: contenido profundo sobre FP informática
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Flujo | Pregunta | Salida |
|
||||
|---|---|---|---|
|
||||
| **1** ▸ | **Análisis** | «¿Qué hay aquí / qué pasa?» | Diagnóstico + flujo recomendado |
|
||||
| **2** | **Diseño** | «¿Cómo construir esto?» | Plan técnico + spec |
|
||||
| **3** | **Desarrollo** | «Constrúyelo» | Implementado + commit en rama |
|
||||
| **4** | **Integración** | «Llévalo a main/producción» | Rama + despliegue |
|
||||
| **5** | **Mejora** | «Optimiza lo existente» | Mejora verificada |
|
||||
| **6** | **Calidad** | «¿Está todo sano?» | Scorecard |
|
||||
| **7** | **Planificación** | «¿Qué hacemos y en qué orden?» | Plan + backlog |
|
||||
|
||||
### Árbol de decisión
|
||||
|
||||
```
|
||||
¿Es entender/auditar sin cambiar? → Modo 1 Análisis
|
||||
¿Es decidir cómo construir algo? → Modo 2 Diseño
|
||||
¿Es construir algo nuevo? → Modo 3 Desarrollo
|
||||
¿Está hecho y hay que integrar/desplegar? → Modo 4 Integración
|
||||
¿Es optimizar algo existente? → Modo 5 Mejora
|
||||
¿Es chequeo de salud? → Modo 6 Calidad
|
||||
¿Es planificar un sprint/roadmap? → Modo 7 Planificación
|
||||
```
|
||||
|
||||
## Flujo de ejecución
|
||||
|
||||
`CLASIFICA → DECLARA PLAN → INVOCA → VIGILA GATES → PARALELIZA → CONSOLIDA`
|
||||
|
||||
1. **Clasifica** → elige modo.
|
||||
2. **Declara plan** con `TodoWrite`.
|
||||
3. **Invoca** agentes con `Task` en orden.
|
||||
4. **Vigila gates:** FAIL = detén, re-invoca, reintenta.
|
||||
5. **Paraleliza** pasos sin dependencias.
|
||||
6. **Consolida** y reporta.
|
||||
|
||||
## Modo 3 — DESARROLLO (pipeline)
|
||||
|
||||
| Tipo de cambio | Pipeline | Secuencia |
|
||||
|---|---|---|
|
||||
| UI + contenido | **A** | `architect` → `code-builder`/`content-builder` → `designer` → `knowledge` → `quality` → commit |
|
||||
| Solo contenido | **B** | `content-builder` → `knowledge` → `quality` → commit |
|
||||
| Solo código | **C** | `code-builder` → `quality` → commit |
|
||||
|
||||
**Auditores transversales:**
|
||||
- `privacy-auditor` — si toca scripts/forms/3rd-party
|
||||
- `geo-auditor` — al cerrar contenido nuevo
|
||||
- `seo-auditor` — si altera rutas indexables
|
||||
- `i18n` — si toca `src/i18n/`
|
||||
|
||||
## Lo que NO haces
|
||||
|
||||
- ❌ No escribes código ni contenido
|
||||
- ❌ No validas tú mismo (delegas en expertos)
|
||||
- ❌ No haces git commit ni merge
|
||||
- ❌ No despliegas (delegas en deployer)
|
||||
40
agents/privacy-auditor.md
Normal file
40
agents/privacy-auditor.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
name: privacy-auditor
|
||||
description: >
|
||||
Auditor de privacidad de ornitonautas.com. Cero tracking 3rd-party,
|
||||
cero cookies no esenciales, cero dark patterns. Solo lectura.
|
||||
tools: Read, Grep, Glob, Bash
|
||||
---
|
||||
|
||||
# privacy-auditor — Privacy by Design
|
||||
|
||||
El sitio es un portal educativo. Visitas anónimas, sin tracking conductual.
|
||||
|
||||
## Principio central
|
||||
|
||||
Si no es estrictamente necesario, no se carga, no se pide, no se almacena.
|
||||
|
||||
## Prohibido
|
||||
|
||||
- Google Analytics, GTM, GA4
|
||||
- Meta Pixel, session replay
|
||||
- Cookies de terceros
|
||||
- Fingerprinting
|
||||
- Dark patterns
|
||||
|
||||
## Permitido
|
||||
|
||||
- localStorage para preferencias UI
|
||||
- Plausible/Umami (privacy-first, autoalojado)
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Cuándo | Salida |
|
||||
|---|---|---|
|
||||
| **GATE** ▸ | Sobre diff con scripts/forms | `OK / WARN / BLOCK` |
|
||||
| **AUDIT** | Pre-release | Informe completo |
|
||||
|
||||
## Lo que NO haces
|
||||
|
||||
- ❌ No modificas ficheros
|
||||
- ❌ No defines la postura de privacidad
|
||||
42
agents/quality.md
Normal file
42
agents/quality.md
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
name: quality
|
||||
description: >
|
||||
Gate final de ornitonautas.com. Valida estructura, semántica, responsive,
|
||||
legibilidad LLM y build limpio. Bloquea output incorrecto.
|
||||
tools: Read, Bash, Grep, Glob
|
||||
---
|
||||
|
||||
# Quality — Validation Engine
|
||||
|
||||
Gate final. Dices si el contenido funciona para humanos, buscadores y LLMs.
|
||||
|
||||
## Principio central
|
||||
|
||||
Si no lo entiende un LLM, o no es usable en móvil, no pasa.
|
||||
|
||||
## Flujo GATE
|
||||
|
||||
`SCAN → STRUCTURE → SEMANTICS → LINKING → RESPONSIVE → LLM_CHECK → BUILD → DECIDE`
|
||||
|
||||
### Validaciones
|
||||
|
||||
| Dimensión | Check |
|
||||
|---|---|
|
||||
| Estructura | Frontmatter válido, headings jerárquicos |
|
||||
| Semántica | Entidad clara, relaciones explícitas |
|
||||
| Linking | ≥1 enlace interno relevante |
|
||||
| Responsive | Sin overflow 390px, hit targets ≥ 44px |
|
||||
| LLM | Contenido fragmentable, autocontenido |
|
||||
| Build | `astro check` + `build` verdes |
|
||||
|
||||
## Decisión
|
||||
|
||||
| Situación | Acción |
|
||||
|---|---|
|
||||
| FAIL estructural/semántico/responsive | FIX_REQUIRED |
|
||||
| FAIL LLM/build | BLOCK |
|
||||
| Todo OK | APPROVE |
|
||||
|
||||
## Principio final
|
||||
|
||||
No validas código — validas que el conocimiento funcione.
|
||||
83
agents/seo-auditor.md
Normal file
83
agents/seo-auditor.md
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
name: seo-auditor
|
||||
description: >
|
||||
Auditor SEO técnico de ornitonautas.com. Verifica indexación, meta tags,
|
||||
estructura SEO, Core Web Vitals. Foco en keywords de FP informática.
|
||||
Read-only: mide y diagnostica; corrigen code-builder y designer.
|
||||
tools: Read, Grep, Glob, Bash, WebFetch, WebSearch
|
||||
---
|
||||
|
||||
# seo-auditor
|
||||
|
||||
Eres el auditor SEO técnico de ornitonautas.com. Verificas que el sitio está
|
||||
correctamente indexado y optimizado para buscadores.
|
||||
|
||||
## Keywords principales FP informática
|
||||
|
||||
| Categoría | Keywords |
|
||||
|---|---|
|
||||
| **Ciclos** | ciclo formativo informática, FP informática, DAM, DAW, SMR, ASIR |
|
||||
| **Formación** | formación profesional informática, estudiar informática FP |
|
||||
| **Módulos** | módulo programación, bases de datos FP, redes informáticas |
|
||||
| **Salidas** | salidas laborales FP informática, trabajo desarrollador |
|
||||
| **Aprendizaje** | aprender a programar, curso desarrollo web, formación IT |
|
||||
| **Comparativas** | FP vs universidad, qué estudiar informática |
|
||||
|
||||
## Modos
|
||||
|
||||
| Modo | Descripción | Salida |
|
||||
|---|---|---|
|
||||
| **A** ▸ | Página única | Puntuación 0-10 + KPIs |
|
||||
| **B** | Sitio completo | Puntuación global |
|
||||
| **C** | Verificación de indexación | Estado en buscadores |
|
||||
|
||||
## Dimensiones (6 × 10 pts máximo)
|
||||
|
||||
### 1. Crawlability e Indexabilidad [2 pts]
|
||||
- robots.txt válido
|
||||
- sitemap.xml accesible
|
||||
- noindex solo en legales
|
||||
|
||||
### 2. Meta Tags On-Page [2 pts]
|
||||
- `<title>` ≤ 60 chars con keyword
|
||||
- `<meta description>` 80-160 chars
|
||||
- canonical autorreferente
|
||||
- hreflang es/en correcto
|
||||
- Open Graph completo
|
||||
|
||||
### 3. Estructura URLs [1.5 pts]
|
||||
- Slugs descriptivos con keyword
|
||||
- Profundidad ≤ 4 niveles
|
||||
- Breadcrumbs con JSON-LD
|
||||
|
||||
### 4. Señales Contenido SEO [1.5 pts]
|
||||
- H1 único con keyword
|
||||
- Jerarquía headings
|
||||
- Keyword en title + H1 + primeras 100 palabras
|
||||
- Contenido ≥ 300 palabras
|
||||
- Imágenes con alt descriptivo
|
||||
|
||||
### 5. Core Web Vitals [1.5 pts]
|
||||
- LCP < 2.5s
|
||||
- CLS < 0.1
|
||||
- INP < 200ms
|
||||
- Fuentes self-hosted
|
||||
|
||||
### 6. Indexación Real [1.5 pts]
|
||||
- site:ornitonautas.com ≥ resultados
|
||||
- Secciones indexadas
|
||||
- Sin duplicados
|
||||
|
||||
## Criterio PASS/FAIL
|
||||
|
||||
| Condición | Resultado |
|
||||
|---|---|
|
||||
| Puntuación ≥ 7.5 + sin FAIL | PASS |
|
||||
| Puntuación 6.0-7.5 | WARN |
|
||||
| Puntuación < 6.0 o FAIL crítico | FAIL |
|
||||
|
||||
## Lo que NO haces
|
||||
|
||||
- ❌ No modificas ficheros
|
||||
- ❌ No auditas GEO/LLMs (eso es geo-auditor)
|
||||
- ❌ No auditas privacidad
|
||||
20
astro.config.mjs
Normal file
20
astro.config.mjs
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: 'https://ornitonautas.com',
|
||||
|
||||
i18n: {
|
||||
defaultLocale: 'es',
|
||||
locales: ['es', 'en'],
|
||||
routing: {
|
||||
prefixDefaultLocale: false,
|
||||
},
|
||||
},
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
114
docs/CONTEXT.md
Normal file
114
docs/CONTEXT.md
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
# CONTEXT.md — Ontología del dominio Ornitonautas
|
||||
|
||||
## Visión general
|
||||
|
||||
Ornitonautas es una plataforma educativa de Formación Profesional en informática.
|
||||
Su objetivo es maximizar la autoridad y posicionamiento SEO/GEO en el nicho de
|
||||
FP informática en España.
|
||||
|
||||
## Entidades del dominio
|
||||
|
||||
### Ciclos Formativos
|
||||
|
||||
| Entity | Título | Tipo | Descripción |
|
||||
|---|---|---|---|
|
||||
| `dam` | Desarrollo de Aplicaciones Multiplataforma | cycle | Grado Superior - 2000h |
|
||||
| `daw` | Desarrollo de Aplicaciones Web | cycle | Grado Superior - 2000h |
|
||||
| `smr` | Sistemas Microinformáticos y Redes | cycle | Grado Medio - 1400h |
|
||||
| `asir` | Administración de Sistemas Informáticos en Red | cycle | Grado Superior - 2000h |
|
||||
|
||||
### Módulos (ejemplo para DAM)
|
||||
|
||||
| Entity | Ciclo | Descripción |
|
||||
|---|---|---|
|
||||
| `prog-bases-datos` | DAM | Bases de datos |
|
||||
| `prog-implementacion` | DAM | Programación |
|
||||
| `prog-multimedia` | DAM | Desarrollo de interfaces |
|
||||
| `prog-movil` | DAM | Desarrollo de aplicaciones multiplataforma |
|
||||
| `prog-sistemas` | DAM | Sistemas informáticos |
|
||||
| `prog-redes` | DAM | Redes |
|
||||
|
||||
### Competencias Profesionales
|
||||
|
||||
| Entity | Descripción |
|
||||
|---|---|
|
||||
| `prog-web` | Programación web (HTML, CSS, JS, frameworks) |
|
||||
| `prog-backend` | Programación de servidor (Node, Python, Java) |
|
||||
| `prog-movil-dev` | Desarrollo móvil (React Native, Flutter) |
|
||||
| `gestion-bd` | Gestión de bases de datos |
|
||||
| `seguridad-it` | Seguridad informática |
|
||||
| `devops` | DevOps y despliegue |
|
||||
|
||||
### Tecnologías
|
||||
|
||||
| Entity | Categoría |
|
||||
|---|---|
|
||||
| `javascript` | Lenguaje de programación |
|
||||
| `python` | Lenguaje de programación |
|
||||
| `java` | Lenguaje de programación |
|
||||
| `html-css` | Tecnologías web |
|
||||
| `react` | Framework JavaScript |
|
||||
| `angular` | Framework JavaScript |
|
||||
| `nodejs` | Runtime JavaScript |
|
||||
| `sql` | Lenguaje de consultas |
|
||||
| `git` | Control de versiones |
|
||||
| `docker` | Contenedores |
|
||||
|
||||
### Tipos de Contenido
|
||||
|
||||
| Entity Type | Descripción | Ejemplo |
|
||||
|---|---|---|
|
||||
| `cycle` | Ciclo formativo completo | DAM, DAW |
|
||||
| `module` | Módulo dentro de un ciclo | Programación |
|
||||
| `project` | Proyecto real del alumnado | App de gestión |
|
||||
| `competence` | Competencia profesional | Programación web |
|
||||
| `resource` | Recurso educativo | Ejercicio SQL |
|
||||
| `article` | Contenido editorial/SEO | Qué es DAM |
|
||||
| `glossary` | Término del vocabulario FP | API REST |
|
||||
| `faq` | Pregunta frecuente | Cuánto dura DAM |
|
||||
| `company` | Empresa colaboradora | Tech Solutions |
|
||||
| `event` | Evento formativo | Hackathon FP |
|
||||
|
||||
### Tipos de Relación
|
||||
|
||||
| Relation Type | Descripción |
|
||||
|---|---|
|
||||
| `belongs_to_cycle` | Módulo pertenece a ciclo |
|
||||
| `teaches_competence` | Módulo enseña competencia |
|
||||
| `uses_technology` | Proyecto usa tecnología |
|
||||
| `prerequisite` | Prerequisito |
|
||||
| `related_to` | Relación temática |
|
||||
| `is_a` | Relación jerárquica |
|
||||
| `alternative_to` | Alternativa |
|
||||
| `derived_from` | Contenido derivado |
|
||||
| `recommended_for` | Recomendado para perfil |
|
||||
| `collaborates_with` | Empresa colabora con FP |
|
||||
|
||||
## Vocabulario controlado
|
||||
|
||||
### Entity Types válidos
|
||||
|
||||
```
|
||||
cycle, module, project, competence, company, resource, article,
|
||||
glossary, event, testimony, tutor, faq
|
||||
```
|
||||
|
||||
### Relation Types válidos
|
||||
|
||||
```
|
||||
belongs_to_cycle, teaches_competence, uses_technology, related_to,
|
||||
is_a, prerequisite, alternative_to, derived_from, recommended_for,
|
||||
collaborates_with
|
||||
```
|
||||
|
||||
## Naming conventions
|
||||
|
||||
- Slugs: lowercase, sin espacios, con guiones (`que-es-dam`)
|
||||
- Entidades: singular, sin ambigüedad (`module`, no `modules`)
|
||||
- Sinónimos: en `synonyms[]`, no como entidades nuevas
|
||||
|
||||
## Multilingüe
|
||||
|
||||
- ES es el canon ontológico
|
||||
- EN mapea a la misma `entity` ID
|
||||
- Nunca se duplica la ontología por idioma
|
||||
131
docs/DESIGN.md
Normal file
131
docs/DESIGN.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
# DESIGN.md — Sistema Visual de Ornitonautas
|
||||
|
||||
> ⚠️ **Placeholder** — Pendiente de recibir diseño de OpenDesign.
|
||||
> Los tokens y valores aquí son provisionales.
|
||||
|
||||
## Paleta de colores
|
||||
|
||||
### Primarios
|
||||
|
||||
| Token | Valor | Uso |
|
||||
|---|---|---|
|
||||
| `--color-primary` | #2563eb | Azul principal — CTAs, links, elementos activos |
|
||||
| `--color-primary-hover` | #1d4ed8 | Azul oscuro — hover states |
|
||||
| `--color-primary-light` | #dbeafe | Azul claro — fondos sutiles |
|
||||
|
||||
### Neutros
|
||||
|
||||
| Token | Valor | Uso |
|
||||
|---|---|---|
|
||||
| `--color-ink` | #0f172a | Texto principal |
|
||||
| `--color-ink-muted` | #64748b | Texto secundario |
|
||||
| `--color-paper` | #ffffff | Fondo principal |
|
||||
| `--color-surface` | #f8fafc | Fondo secundario |
|
||||
| `--color-border` | #e2e8f0 | Bordes y líneas |
|
||||
|
||||
### Semánticos
|
||||
|
||||
| Token | Valor | Uso |
|
||||
|---|---|---|
|
||||
| `--color-success` | #16a34a | Éxito, completado |
|
||||
| `--color-warning` | #f59e0b | Advertencia |
|
||||
| `--color-error` | #dc2626 | Error, bloquado |
|
||||
|
||||
## Tipografía
|
||||
|
||||
| Elemento | Fuente | Tamaño |
|
||||
|---|---|---|
|
||||
| Display | Inter | clamp(2rem, 5vw, 3.5rem) |
|
||||
| Heading 1 | Inter | clamp(1.75rem, 4vw, 2.5rem) |
|
||||
| Heading 2 | Inter | clamp(1.5rem, 3vw, 2rem) |
|
||||
| Heading 3 | Inter | clamp(1.25rem, 2.5vw, 1.5rem) |
|
||||
| Body | Inter | 1rem (16px) |
|
||||
| Small | Inter | 0.875rem (14px) |
|
||||
| Mono | JetBrains Mono | 0.875rem |
|
||||
|
||||
## Espaciado
|
||||
|
||||
| Token | Valor |
|
||||
|---|---|
|
||||
| `--space-xs` | 0.25rem |
|
||||
| `--space-sm` | 0.5rem |
|
||||
| `--space-md` | 1rem |
|
||||
| `--space-lg` | 1.5rem |
|
||||
| `--space-xl` | 2rem |
|
||||
| `--space-2xl` | 3rem |
|
||||
| `--space-3xl` | 4rem |
|
||||
|
||||
## Bordes y Sombras
|
||||
|
||||
| Token | Valor |
|
||||
|---|---|
|
||||
| `--radius-sm` | 0.375rem |
|
||||
| `--radius-md` | 0.5rem |
|
||||
| `--radius-lg` | 0.75rem |
|
||||
| `--radius-xl` | 1rem |
|
||||
| `--shadow-sm` | 0 1px 2px rgba(0,0,0,0.05) |
|
||||
| `--shadow-md` | 0 4px 6px rgba(0,0,0,0.1) |
|
||||
| `--shadow-lg` | 0 10px 15px rgba(0,0,0,0.1) |
|
||||
|
||||
## Breakpoints
|
||||
|
||||
| Nombre | Ancho |
|
||||
|---|---|
|
||||
| `sm` | 640px |
|
||||
| `md` | 768px |
|
||||
| `lg` | 1024px |
|
||||
| `xl` | 1280px |
|
||||
|
||||
## Layout
|
||||
|
||||
| Elemento | Ancho máximo |
|
||||
|---|---|
|
||||
| Contenedor general | 1280px |
|
||||
| Contenido de prosa | 720px |
|
||||
| Sidebar | 280px |
|
||||
|
||||
## Componentes
|
||||
|
||||
### HeroSection
|
||||
|
||||
- Background: gradiente sutil de primary-light a paper
|
||||
- Título: Display weight bold
|
||||
- Subtítulo: Body, ink-muted
|
||||
- CTA: Botón primary
|
||||
|
||||
### CourseCard
|
||||
|
||||
- Background: paper
|
||||
- Border: border
|
||||
- Shadow: shadow-sm
|
||||
- Hover: shadow-md, primary border-left
|
||||
- Contenido: logo, título, duración, módulos
|
||||
|
||||
### StatsBar
|
||||
|
||||
- Background: primary
|
||||
- Text: white
|
||||
- Layout: 4 columnas (responsive)
|
||||
- Datos: números grandes + label
|
||||
|
||||
### FAQAccordion
|
||||
|
||||
- Border: border
|
||||
- Hover: surface background
|
||||
- Icono: +/- para expandir/colapsar
|
||||
|
||||
## Accesibilidad WCAG 2.2 AA
|
||||
|
||||
- Contraste mínimo: 4.5:1 (texto normal), 3:1 (texto grande)
|
||||
- Focus visible: ring de 2px con primary color
|
||||
- Hit targets: ≥ 44×44px
|
||||
- Alt text obligatorio en imágenes
|
||||
- Skip to content link
|
||||
|
||||
## Mobile-first
|
||||
|
||||
- Diseño base: 390px
|
||||
- Expansión progresiva: sm → md → lg → xl
|
||||
- Tipografía fluida con clamp()
|
||||
- Sin overflow horizontal
|
||||
- Navegación hamburguesa en móvil
|
||||
136
docs/SEO-GEO-STRATEGY.md
Normal file
136
docs/SEO-GEO-STRATEGY.md
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
# Estrategia SEO/GEO — Ornitonautas
|
||||
|
||||
## Objetivo
|
||||
|
||||
Maximizar autoridad y posicionamiento de ornitonautas.com en el nicho de
|
||||
Formación Profesional en informática, tanto en buscadores tradicionales
|
||||
(SEO) como en motores generativos (GEO).
|
||||
|
||||
## Estrategia SEO
|
||||
|
||||
### Keywords principales
|
||||
|
||||
| Categoría | Keywords | Volumen estimado | Competencia |
|
||||
|---|---|---|---|
|
||||
| **Ciclos FP** | ciclo formativo informática | Alto | Media |
|
||||
| | FP informática | Alto | Media |
|
||||
| | DAM FP | Alto | Baja |
|
||||
| | DAW FP | Alto | Baja |
|
||||
| | SMR FP | Medio | Baja |
|
||||
| | ASIR FP | Medio | Baja |
|
||||
| **Formación** | formación profesional informática | Alto | Media |
|
||||
| | estudiar informática FP | Medio | Baja |
|
||||
| | aprender a programar FP | Bajo | Baja |
|
||||
| **Módulos** | módulo programación FP | Medio | Baja |
|
||||
| | bases de datos FP | Medio | Baja |
|
||||
| | desarrollo web FP | Medio | Baja |
|
||||
| **Salidas** | salidas laborales FP informática | Alto | Media |
|
||||
| | trabajo desarrollador FP | Medio | Baja |
|
||||
| | empleo informático FP | Medio | Baja |
|
||||
| **Comparativas** | FP vs universidad informática | Alto | Media |
|
||||
| | qué estudiar informática | Alto | Alta |
|
||||
| | ciclo superior informática | Alto | Media |
|
||||
|
||||
### Estructura de URLs
|
||||
|
||||
```
|
||||
/ → Home
|
||||
/campus/ → Campus (ciclos)
|
||||
/campus/dam/ → DAM
|
||||
/campus/daw/ → DAW
|
||||
/campus/smr/ → SMR
|
||||
/campus/asir/ → ASIR
|
||||
/aprendizaje/ → Aprendizaje
|
||||
/aprendizaje/[articulo]/ → Artículos SEO
|
||||
/comunidad/ → Comunidad
|
||||
/contacto/ → Contacto
|
||||
/glosario/ → Glosario FP
|
||||
/glosario/[termino]/ → Término del glosario
|
||||
```
|
||||
|
||||
### Meta tags por página
|
||||
|
||||
| Página | Title (≤60) | Description (80-160) |
|
||||
|---|---|---|
|
||||
| Home | Ornitonautas - FP Informática | Formación Profesional en informática con proyectos reales y conexión directa con el mercado laboral. |
|
||||
| DAM | Ciclo DAM - Desarrollo de Aplicaciones Multiplataforma | Conoce el ciclo de DAM: programación, bases de datos, interfaces. 2000 horas de formación práctica. |
|
||||
| DAW | Ciclo DAW - Desarrollo de Aplicaciones Web | Estudia DAW: HTML, CSS, JavaScript, frameworks. Desarrollo web profesional en 2 cursos. |
|
||||
|
||||
### Schema.org
|
||||
|
||||
| Página | @type | Propiedades clave |
|
||||
|---|---|---|
|
||||
| Home | EducationalOrganization | name, description, url, sameAs |
|
||||
| Ciclos | Course | name, description, provider, educationalCredentialAwarded |
|
||||
| Artículos | Article | headline, author, datePublished, dateModified |
|
||||
| FAQs | FAQPage | mainEntity (Question/Answer) |
|
||||
| Glosario | DefinedTerm | name, description, inDefinedTermSet |
|
||||
|
||||
## Estrategia GEO
|
||||
|
||||
### Pilares de citabilidad
|
||||
|
||||
1. **Datos concretos**: horas, módulos, salidas laborales — no narrativa vaga
|
||||
2. **Definiciones autocontenidas**: cada pieza se entiende sola
|
||||
3. **Entidades ricas**: frontmatter con entity, type, relations, keywords
|
||||
4. **Feeds agent-ready**: llms.txt, sitemap-ai.xml
|
||||
5. **Autoridad topical**: contenido profundo sobre cada ciclo/módulo
|
||||
|
||||
### Contenido optimizado para LLMs
|
||||
|
||||
Cada artículo debe:
|
||||
- Empezar con definición concreta (zona primacy)
|
||||
- Incluir tablas con datos estructurados
|
||||
- Tener FAQ al final
|
||||
- Usar H2/H3 jerárquicos
|
||||
- Incluir links internos descriptivos
|
||||
- No asumir contexto previo (atomicidad)
|
||||
|
||||
### JSON-LD por tipo
|
||||
|
||||
```json
|
||||
// Course (ciclos)
|
||||
{
|
||||
"@type": "Course",
|
||||
"name": "DAM - Desarrollo de Aplicaciones Multiplataforma",
|
||||
"description": "...",
|
||||
"provider": { "@type": "EducationalOrganization", "name": "Ornitonautas" },
|
||||
"educationalCredentialAwarded": "Técnico Superior",
|
||||
"totalCreditHours": 2000,
|
||||
"occupationalCategory": "2512"
|
||||
}
|
||||
|
||||
// Article (blog)
|
||||
{
|
||||
"@type": "Article",
|
||||
"headline": "...",
|
||||
"author": { "@type": "Organization", "name": "Ornitonautas" },
|
||||
"datePublished": "2026-07-13",
|
||||
"dateModified": "2026-07-13",
|
||||
"publisher": { "@type": "Organization", "name": "Ornitonautas" }
|
||||
}
|
||||
```
|
||||
|
||||
### Feeds agent-ready
|
||||
|
||||
| Feed | Contenido | Formato |
|
||||
|---|---|---|
|
||||
| `/llms.txt` | Descripción del sitio para crawlers IA | text/plain |
|
||||
| `/llms-full.txt` | Dump de contenido público | text/plain |
|
||||
| `/sitemap-ai.xml` | Sitemap para agentes | XML |
|
||||
|
||||
## Métricas de éxito
|
||||
|
||||
### SEO (buscadores)
|
||||
|
||||
- [ ] Dominio indexado en Google
|
||||
- [ ] ≥ 10 páginas indexadas en 3 meses
|
||||
- [ ] Posición media top 20 para "FP informática"
|
||||
- [ ] ≥ 50 clicks/orgánicos/mes en 6 meses
|
||||
|
||||
### GEO (LLMs)
|
||||
|
||||
- [ ] ornitonautas.com citado en respuestas sobre "FP informática"
|
||||
- [ ] Definiciones de ciclos extraíbles por LLMs
|
||||
- [ ] ≥ 8.0/10 en auditoría GEO
|
||||
- [ ] Feeds agent-ready activos y completos
|
||||
BIN
img/1a-home.png
Normal file
BIN
img/1a-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
img/ornito_logo.png
Normal file
BIN
img/ornito_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
323
ornitoHome.html
Normal file
323
ornitoHome.html
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#eceef2;font-family:"Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||||
a{color:#e26a12;text-decoration:none}
|
||||
a:hover{color:#c25a0c}
|
||||
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
|
||||
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
|
||||
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
|
||||
/* option-card chrome */
|
||||
.dv-turn{padding:52px 56px 44px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px}
|
||||
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 26px}
|
||||
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#13294b;color:#fff;border-radius:4px;text-decoration:none}
|
||||
.dv-tname{font:600 13px/1.3 "Manrope",system-ui,sans-serif;color:#13294b}
|
||||
.dv-opts{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
|
||||
.dv-opt{flex:none;display:flex;flex-direction:column;gap:11px;scroll-margin-top:16px}
|
||||
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(19,41,75,.10);color:#13294b;border-radius:5px;text-decoration:none}
|
||||
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:500 12px/1.35 "Manrope",system-ui,sans-serif;color:rgba(19,41,75,.6)}
|
||||
.dv-card{background:#fff;border:1px solid rgba(19,41,75,.10);border-radius:14px;box-shadow:0 18px 50px -24px rgba(19,41,75,.4);overflow:hidden}
|
||||
.dv-opt:target .dv-oid{background:#f47a20;color:#fff}
|
||||
.dv-next{margin:26px 0 0;font:13px/1.6 "Manrope",system-ui,sans-serif;color:rgba(19,41,75,.6)}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<section class="dv-turn" id="t1">
|
||||
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Tres direcciones de home · claras, luminosas, enfocadas a FP España</span></div>
|
||||
<div class="dv-opts">
|
||||
|
||||
<!-- ============ OPTION 1a ============ -->
|
||||
<div class="dv-opt" id="1a">
|
||||
<div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Luminoso y limpio · una idea por bloque (Brilliant-like)</div>
|
||||
<div class="dv-card" style="width:1180px;font-family:'Manrope',sans-serif;color:#13294b">
|
||||
<!-- header -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid rgba(19,41,75,.08)">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<img src="uploads/ornito_logo.png" alt="Ornitonautas" style="width:42px;height:42px;object-fit:contain">
|
||||
<div><div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em">Ornitonautas</div><div style="font-size:11px;color:#8a97a8;letter-spacing:.02em">Aprende. Practica. Despega.</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600">
|
||||
<span style="color:#f47a20">FP España</span><span style="color:#4a5a72">Rutas</span><span style="color:#4a5a72">Recursos</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:14px">
|
||||
<span style="font-size:14px;font-weight:600;color:#4a5a72">Iniciar sesión</span>
|
||||
<span style="background:#f47a20;color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px">Explorar FP</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- hero -->
|
||||
<div style="display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:72px 40px 64px;background:radial-gradient(120% 120% at 85% 10%,#f4f7fc 0%,#fff 60%)">
|
||||
<div>
|
||||
<div style="display:inline-flex;align-items:center;gap:8px;background:#eef3fb;color:#1c3a63;font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:999px;margin-bottom:22px">🚀 Formación oficial de FP · España</div>
|
||||
<h1 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:56px;line-height:1.03;letter-spacing:-.02em;margin:0 0 20px">Aprende informática.<br>Despega tu <span style="color:#f47a20">futuro</span>.</h1>
|
||||
<p style="font-size:18px;line-height:1.6;color:#4a5a72;max-width:440px;margin:0 0 32px">Libros y materiales para los ciclos de FP en España, con práctica real y un ritmo que se adapta a ti.</p>
|
||||
<div style="display:flex;align-items:center;gap:16px">
|
||||
<span style="display:inline-flex;align-items:center;gap:8px;background:#f47a20;color:#fff;font-weight:700;font-size:16px;padding:15px 26px;border-radius:12px">Ver FP de España →</span>
|
||||
<span style="font-size:15px;font-weight:600;color:#4a5a72">Grado Medio y Superior</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:relative;display:flex;justify-content:center;align-items:center;min-height:340px">
|
||||
<div style="position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#eef3fb,transparent 70%)"></div>
|
||||
<span style="position:absolute;top:30px;right:70px;color:#f47a20;font-size:22px;animation:twinkle 3s ease-in-out infinite">✦</span>
|
||||
<span style="position:absolute;bottom:50px;left:60px;color:#1c3a63;font-size:15px;animation:twinkle 2.4s ease-in-out .6s infinite">✦</span>
|
||||
<img src="uploads/ornito_logo.png" alt="" style="width:300px;height:300px;object-fit:contain;position:relative;animation:floaty 6s ease-in-out infinite">
|
||||
</div>
|
||||
</div>
|
||||
<!-- FP oficial -->
|
||||
<div style="padding:64px 40px;border-top:1px solid rgba(19,41,75,.07)">
|
||||
<div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px">
|
||||
<div>
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;margin:0 0 8px">FP oficial en España</h2>
|
||||
<p style="margin:0;font-size:16px;color:#4a5a72">Elige tu ciclo y estudia con nuestros libros y prácticas.</p>
|
||||
</div>
|
||||
<span style="font-weight:700;font-size:14.5px;color:#e26a12">Ver todos los ciclos →</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:22px">
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s" style-hover="transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(19,41,75,.35)">
|
||||
<div style="width:52px;height:52px;border-radius:13px;background:#eef3fb;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#1c3a63;margin-bottom:18px"></></div>
|
||||
<div style="font-size:12px;font-weight:700;color:#f47a20;letter-spacing:.03em;margin-bottom:6px">GRADO SUPERIOR</div>
|
||||
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px">Desarrollo de Aplicaciones Web</h3>
|
||||
<p style="margin:0 0 16px;font-size:14.5px;color:#4a5a72;line-height:1.55">Aplicaciones web completas, seguras y escalables.</p>
|
||||
<div style="font-size:13px;font-weight:600;color:#8a97a8">DAW · 2000h</div>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s" style-hover="transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(19,41,75,.35)">
|
||||
<div style="width:52px;height:52px;border-radius:13px;background:#fdeee2;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#e26a12;margin-bottom:18px">◉</div>
|
||||
<div style="font-size:12px;font-weight:700;color:#f47a20;letter-spacing:.03em;margin-bottom:6px">GRADO SUPERIOR</div>
|
||||
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px">Administración de Sistemas en Red</h3>
|
||||
<p style="margin:0 0 16px;font-size:14.5px;color:#4a5a72;line-height:1.55">Servidores, redes y sistemas en entornos reales.</p>
|
||||
<div style="font-size:13px;font-weight:600;color:#8a97a8">ASIR · 2000h</div>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s" style-hover="transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(19,41,75,.35)">
|
||||
<div style="width:52px;height:52px;border-radius:13px;background:#e9f5ee;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#22a05a;margin-bottom:18px">▤</div>
|
||||
<div style="font-size:12px;font-weight:700;color:#f47a20;letter-spacing:.03em;margin-bottom:6px">GRADO SUPERIOR</div>
|
||||
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px">Desarrollo de Aplicaciones Multiplataforma</h3>
|
||||
<p style="margin:0 0 16px;font-size:14.5px;color:#4a5a72;line-height:1.55">Apps de escritorio y móvil multiplataforma.</p>
|
||||
<div style="font-size:13px;font-weight:600;color:#8a97a8">DAM · 2000h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rutas -->
|
||||
<div style="padding:64px 40px;background:#f7f9fc;border-top:1px solid rgba(19,41,75,.07)">
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;margin:0 0 8px;text-align:center">Rutas de aprendizaje</h2>
|
||||
<p style="margin:0 auto 36px;font-size:16px;color:#4a5a72;text-align:center;max-width:520px">Un camino paso a paso, del primer concepto al proyecto final.</p>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:0">
|
||||
<div style="text-align:center;width:200px"><div style="width:56px;height:56px;border-radius:50%;background:#13294b;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0 auto 14px">1</div><div style="font-weight:700;font-size:15px">Fundamentos</div><div style="font-size:13px;color:#8a97a8">Lógica y programación</div></div>
|
||||
<div style="flex:1;height:2px;background:linear-gradient(90deg,#13294b,#f47a20);max-width:90px"></div>
|
||||
<div style="text-align:center;width:200px"><div style="width:56px;height:56px;border-radius:50%;background:#f47a20;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0 auto 14px">2</div><div style="font-weight:700;font-size:15px">Especialización</div><div style="font-size:13px;color:#8a97a8">Web, sistemas o datos</div></div>
|
||||
<div style="flex:1;height:2px;background:linear-gradient(90deg,#f47a20,#e5241b);max-width:90px"></div>
|
||||
<div style="text-align:center;width:200px"><div style="width:56px;height:56px;border-radius:50%;background:#e5241b;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0 auto 14px">3</div><div style="font-weight:700;font-size:15px">Proyecto real</div><div style="font-size:13px;color:#8a97a8">Portfolio para empleo</div></div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:36px"><span style="display:inline-block;border:1.5px solid #13294b;color:#13294b;font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px">Ver rutas completas →</span></div>
|
||||
</div>
|
||||
<!-- Mercado laboral -->
|
||||
<div style="padding:64px 40px;border-top:1px solid rgba(19,41,75,.07)">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px">
|
||||
<div style="text-align:center;padding:0 12px"><div style="font-size:34px;margin-bottom:12px">🎯</div><h3 style="font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px">Habilidades que piden</h3><p style="margin:0;font-size:14.5px;color:#4a5a72;line-height:1.55">Aprende lo que las empresas buscan hoy.</p></div>
|
||||
<div style="text-align:center;padding:0 12px"><div style="font-size:34px;margin-bottom:12px">💼</div><h3 style="font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px">Portfolio profesional</h3><p style="margin:0;font-size:14.5px;color:#4a5a72;line-height:1.55">Construye proyectos que se enseñan.</p></div>
|
||||
<div style="text-align:center;padding:0 12px"><div style="font-size:34px;margin-bottom:12px">🤝</div><h3 style="font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px">Preparado para empleo</h3><p style="margin:0;font-size:14.5px;color:#4a5a72;line-height:1.55">Del aula al primer trabajo tech.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<div style="padding:28px 40px;background:#13294b;color:#aeb9c9;display:flex;align-items:center;justify-content:space-between;font-size:13px">
|
||||
<div style="display:flex;align-items:center;gap:10px"><img src="uploads/ornito_logo.png" style="width:26px;height:26px;object-fit:contain"><span style="color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700">Ornitonautas</span></div>
|
||||
<span>© 2026 · Formación FP · España</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ OPTION 1b ============ -->
|
||||
<div class="dv-opt" id="1b">
|
||||
<div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a>Aprende haciendo · mini-reto interactivo en el hero</div>
|
||||
<div class="dv-card" style="width:1180px;font-family:'Manrope',sans-serif;color:#13294b">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid rgba(19,41,75,.08)">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<img src="uploads/ornito_logo.png" alt="Ornitonautas" style="width:42px;height:42px;object-fit:contain">
|
||||
<div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em">Ornitonautas</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600">
|
||||
<span style="color:#f47a20">FP España</span><span style="color:#4a5a72">Rutas</span><span style="color:#4a5a72">Recursos</span>
|
||||
</div>
|
||||
<span style="background:#f47a20;color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px">Explorar FP</span>
|
||||
</div>
|
||||
<!-- hero with quiz -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 40px;background:#f7f9fc">
|
||||
<div>
|
||||
<h1 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:50px;line-height:1.05;letter-spacing:-.02em;margin:0 0 18px">No memorices.<br>Aprende <span style="color:#f47a20">haciendo</span>.</h1>
|
||||
<p style="font-size:18px;line-height:1.6;color:#4a5a72;max-width:420px;margin:0 0 30px">Cada tema de FP empieza con un reto. Pruebas, te equivocas y entiendes. Así se queda.</p>
|
||||
<span style="display:inline-flex;align-items:center;gap:8px;background:#f47a20;color:#fff;font-weight:700;font-size:16px;padding:15px 26px;border-radius:12px">Empezar por FP España →</span>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:20px;padding:30px;box-shadow:0 24px 60px -30px rgba(19,41,75,.5)">
|
||||
<div style="display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#8a97a8;letter-spacing:.04em;margin-bottom:16px">RETO · FUNDAMENTOS ①</div>
|
||||
<div style="font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;line-height:1.35;margin-bottom:20px">¿Qué es Python?</div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<sc-for list="{{ quizOptions }}" as="opt" hint-placeholder-count="3">
|
||||
<div onClick="{{ opt.onClick }}" style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:600;background:{{ opt.bg }};border:{{ opt.border }};color:{{ opt.color }};transition:all .18s">
|
||||
<span>{{ opt.label }}</span><span style="font-weight:800">{{ opt.mark }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="min-height:22px;margin-top:16px;font-size:14px;font-weight:600;color:#22a05a">{{ feedback }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FP list rows (books) -->
|
||||
<div style="padding:64px 40px">
|
||||
<div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px">
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;margin:0">Libros de FP oficial</h2>
|
||||
<span style="font-weight:700;font-size:14.5px;color:#e26a12">Ver catálogo →</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:14px">
|
||||
<div style="display:flex;align-items:center;gap:20px;border:1px solid rgba(19,41,75,.1);border-radius:14px;padding:20px 24px;transition:border-color .2s" style-hover="border-color:#f47a20">
|
||||
<div style="width:46px;height:60px;border-radius:5px;background:linear-gradient(135deg,#13294b,#1c3a63);flex:none"></div>
|
||||
<div style="flex:1"><div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px">Desarrollo de Aplicaciones Web (DAW)</div><div style="font-size:13.5px;color:#8a97a8">Grado Superior · 2000h · Libro + prácticas</div></div>
|
||||
<span style="font-size:20px;color:#c4ccd8">→</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:20px;border:1px solid rgba(19,41,75,.1);border-radius:14px;padding:20px 24px;transition:border-color .2s" style-hover="border-color:#f47a20">
|
||||
<div style="width:46px;height:60px;border-radius:5px;background:linear-gradient(135deg,#f47a20,#e26a12);flex:none"></div>
|
||||
<div style="flex:1"><div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px">Administración de Sistemas en Red (ASIR)</div><div style="font-size:13.5px;color:#8a97a8">Grado Superior · 2000h · Libro + prácticas</div></div>
|
||||
<span style="font-size:20px;color:#c4ccd8">→</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:20px;border:1px solid rgba(19,41,75,.1);border-radius:14px;padding:20px 24px;transition:border-color .2s" style-hover="border-color:#f47a20">
|
||||
<div style="width:46px;height:60px;border-radius:5px;background:linear-gradient(135deg,#22a05a,#178048);flex:none"></div>
|
||||
<div style="flex:1"><div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px">Desarrollo de Apps Multiplataforma (DAM)</div><div style="font-size:13.5px;color:#8a97a8">Grado Superior · 2000h · Libro + prácticas</div></div>
|
||||
<span style="font-size:20px;color:#c4ccd8">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mercado laboral band -->
|
||||
<div style="padding:56px 40px;background:#13294b;color:#fff">
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin:0 0 28px;text-align:center">Del aula al mercado laboral</h2>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px">
|
||||
<div style="text-align:center"><div style="font-size:30px;margin-bottom:10px">🎯</div><div style="font-weight:700;font-size:16px;margin-bottom:6px">Habilidades reales</div><div style="font-size:14px;color:#aeb9c9;line-height:1.5">Lo que piden las empresas hoy.</div></div>
|
||||
<div style="text-align:center"><div style="font-size:30px;margin-bottom:10px">💼</div><div style="font-weight:700;font-size:16px;margin-bottom:6px">Portfolio</div><div style="font-size:14px;color:#aeb9c9;line-height:1.5">Proyectos que puedes enseñar.</div></div>
|
||||
<div style="text-align:center"><div style="font-size:30px;margin-bottom:10px">🤝</div><div style="font-weight:700;font-size:16px;margin-bottom:6px">Listo para empleo</div><div style="font-size:14px;color:#aeb9c9;line-height:1.5">Preparado para tu primer trabajo.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:28px 40px;background:#0f2038;color:#aeb9c9;display:flex;align-items:center;justify-content:space-between;font-size:13px">
|
||||
<div style="display:flex;align-items:center;gap:10px"><img src="uploads/ornito_logo.png" style="width:26px;height:26px;object-fit:contain"><span style="color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700">Ornitonautas</span></div>
|
||||
<span>© 2026 · Formación FP · España</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ OPTION 1c ============ -->
|
||||
<div class="dv-opt" id="1c">
|
||||
<div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a>Editorial espacial · hero navy y tipografía grande (opción más atrevida)</div>
|
||||
<div class="dv-card" style="width:1180px;font-family:'Manrope',sans-serif;color:#13294b">
|
||||
<!-- navy hero -->
|
||||
<div style="background:radial-gradient(130% 100% at 80% 0%,#1c3a63 0%,#13294b 55%,#0f2038 100%);color:#fff;position:relative;overflow:hidden">
|
||||
<span style="position:absolute;top:70px;left:120px;color:#fff;font-size:14px;opacity:.7;animation:twinkle 3s ease-in-out infinite">✦</span>
|
||||
<span style="position:absolute;top:180px;right:280px;color:#f47a20;font-size:20px;animation:twinkle 2.6s ease-in-out .5s infinite">✦</span>
|
||||
<span style="position:absolute;bottom:90px;left:280px;color:#fff;font-size:11px;opacity:.6;animation:twinkle 2.2s ease-in-out .9s infinite">✦</span>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:22px 40px">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<img src="uploads/ornito_logo.png" alt="Ornitonautas" style="width:40px;height:40px;object-fit:contain">
|
||||
<div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px">Ornitonautas</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:600;color:#cdd6e4">
|
||||
<span style="color:#fff">FP España</span><span>Rutas</span><span>Recursos</span>
|
||||
</div>
|
||||
<span style="border:1.5px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:10px">Iniciar sesión</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:70px 40px 80px">
|
||||
<div>
|
||||
<div style="display:inline-flex;align-items:center;gap:8px;background:rgba(244,122,32,.18);color:#f9a463;font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:999px;margin-bottom:24px">FP OFICIAL · ESPAÑA</div>
|
||||
<h1 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:66px;line-height:.98;letter-spacing:-.03em;margin:0 0 22px">Tu FP,<br>a la <span style="color:#f47a20">velocidad</span><br>de la luz.</h1>
|
||||
<p style="font-size:18px;line-height:1.6;color:#cdd6e4;max-width:420px;margin:0 0 34px">Libros y materiales para los ciclos de informática. Todo lo que necesitas para aprobar y trabajar.</p>
|
||||
<span style="display:inline-flex;align-items:center;gap:8px;background:#f47a20;color:#fff;font-weight:700;font-size:16px;padding:16px 28px;border-radius:12px">Explorar FP de España →</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:center"><img src="uploads/ornito_logo.png" alt="" style="width:290px;height:290px;object-fit:contain;animation:floaty 7s ease-in-out infinite"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FP shelf -->
|
||||
<div style="padding:66px 40px">
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;letter-spacing:-.01em;margin:0 0 6px">Ciclos de informática</h2>
|
||||
<p style="margin:0 0 32px;font-size:16px;color:#4a5a72">Grado Medio y Superior. Libro oficial + prácticas guiadas.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px">
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s" style-hover="transform:translateY(-6px)">
|
||||
<div style="height:120px;background:linear-gradient(135deg,#13294b,#1c3a63);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px">DAW</div>
|
||||
<div style="padding:18px"><div style="font-weight:700;font-size:15px;margin-bottom:4px">Aplicaciones Web</div><div style="font-size:12.5px;color:#8a97a8">Grado Superior</div></div>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s" style-hover="transform:translateY(-6px)">
|
||||
<div style="height:120px;background:linear-gradient(135deg,#f47a20,#e26a12);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px">ASIR</div>
|
||||
<div style="padding:18px"><div style="font-weight:700;font-size:15px;margin-bottom:4px">Sistemas en Red</div><div style="font-size:12.5px;color:#8a97a8">Grado Superior</div></div>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s" style-hover="transform:translateY(-6px)">
|
||||
<div style="height:120px;background:linear-gradient(135deg,#22a05a,#178048);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px">DAM</div>
|
||||
<div style="padding:18px"><div style="font-weight:700;font-size:15px;margin-bottom:4px">Multiplataforma</div><div style="font-size:12.5px;color:#8a97a8">Grado Superior</div></div>
|
||||
</div>
|
||||
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px" style-hover="transform:translateY(-6px)">
|
||||
<div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:#f47a20;margin-bottom:6px">+8</div><div style="font-weight:700;font-size:14px">Más ciclos FP</div><div style="font-size:12.5px;color:#e26a12;font-weight:600;margin-top:4px">Ver todos →</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- rutas + mercado combined light -->
|
||||
<div style="padding:66px 40px;background:#f7f9fc;display:grid;grid-template-columns:1fr 1fr;gap:40px">
|
||||
<div>
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin:0 0 18px">Rutas de aprendizaje</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:12px;padding:16px 18px"><div style="width:38px;height:38px;border-radius:10px;background:#eef3fb;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1c3a63">1</div><div><div style="font-weight:700;font-size:15px">Fundamentos</div><div style="font-size:13px;color:#8a97a8">Lógica y programación</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:12px;padding:16px 18px"><div style="width:38px;height:38px;border-radius:10px;background:#fdeee2;display:flex;align-items:center;justify-content:center;font-weight:700;color:#e26a12">2</div><div><div style="font-weight:700;font-size:15px">Especialización</div><div style="font-size:13px;color:#8a97a8">Web, sistemas o datos</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:12px;padding:16px 18px"><div style="width:38px;height:38px;border-radius:10px;background:#fde9e8;display:flex;align-items:center;justify-content:center;font-weight:700;color:#e5241b">3</div><div><div style="font-weight:700;font-size:15px">Proyecto real</div><div style="font-size:13px;color:#8a97a8">Portfolio para empleo</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin:0 0 18px">Preparado para el mercado</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:14px;font-size:15px;color:#4a5a72">
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Habilidades que piden las empresas</div>
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Portfolio con proyectos reales</div>
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Certificaciones que suman</div>
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Del aula a tu primer empleo tech</div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-top:24px;background:#13294b;color:#fff;font-weight:700;font-size:15px;padding:13px 24px;border-radius:12px">Ver preparación laboral →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:28px 40px;background:#13294b;color:#aeb9c9;display:flex;align-items:center;justify-content:space-between;font-size:13px">
|
||||
<div style="display:flex;align-items:center;gap:10px"><img src="uploads/ornito_logo.png" style="width:26px;height:26px;object-fit:contain"><span style="color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700">Ornitonautas</span></div>
|
||||
<span>© 2026 · Formación FP · España</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="dv-next">Prueba a pedir: "desarrolla <a class="dv-oid" href="#1a">1a</a> a pantalla completa" · "combina el reto de <a class="dv-oid" href="#1b">1b</a> con el hero de <a class="dv-oid" href="#1a">1a</a>" · "menos espacial, más sobrio en <a class="dv-oid" href="#1c">1c</a>" · "añade sección de comunidad"</p>
|
||||
</section>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
state = { picked: null };
|
||||
pick(i){ this.setState({ picked: i }); }
|
||||
renderVals(){
|
||||
const opts = [
|
||||
{ label: 'Un lenguaje de programación', ok: true },
|
||||
{ label: 'Un sistema operativo', ok: false },
|
||||
{ label: 'Una base de datos', ok: false },
|
||||
];
|
||||
const picked = this.state.picked;
|
||||
const quizOptions = opts.map((o, i) => {
|
||||
let bg = '#fff', border = '1px solid rgba(19,41,75,.14)', color = '#13294b', mark = '';
|
||||
if (picked !== null) {
|
||||
if (o.ok) { bg = 'rgba(34,160,90,.10)'; border = '1px solid #22a05a'; mark = '✓'; }
|
||||
else if (i === picked) { bg = 'rgba(229,36,27,.06)'; border = '1px solid #e5241b'; color = '#8a97a8'; mark = '✕'; }
|
||||
else { color = '#a6b0be'; }
|
||||
}
|
||||
return { label: o.label, bg, border, color, mark, onClick: () => this.pick(i) };
|
||||
});
|
||||
const feedback = picked === null ? '' : (opts[picked].ok ? '¡Correcto! Así se aprende: probando.' : 'Casi. La respuesta correcta está en verde.');
|
||||
return { quizOptions, feedback };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
4573
package-lock.json
generated
Normal file
4573
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "ornitonautas",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"astro": "^7.0.7",
|
||||
"tailwindcss": "^4.3.2"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
1
src/assets/astro.svg
Normal file
1
src/assets/astro.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
1
src/assets/background.svg
Normal file
1
src/assets/background.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
10
src/components/Footer.astro
Normal file
10
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
---
|
||||
|
||||
<footer class="px-10 py-7 bg-navy text-text-muted flex items-center justify-between text-[13px]">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<img src="/ornito_logo.png" class="w-[26px] h-[26px] object-contain" alt="" />
|
||||
<span class="text-white font-heading font-bold">Ornitonautas</span>
|
||||
</div>
|
||||
<span>© 2026 · Formación FP · España</span>
|
||||
</footer>
|
||||
57
src/components/Header.astro
Normal file
57
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
interface Props {
|
||||
lang: 'es' | 'en';
|
||||
}
|
||||
|
||||
const { lang } = Astro.props;
|
||||
const currentPath = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<header class="flex items-center justify-between px-10 py-5 border-b border-line">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/ornito_logo.png" alt="Ornitonautas" class="w-[42px] h-[42px] object-contain" />
|
||||
<div>
|
||||
<div class="font-heading font-bold text-[19px] tracking-tight">Ornitonautas</div>
|
||||
<div class="text-[11px] text-text-muted tracking-wide">Aprende. Practica. Despega.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="hidden md:flex items-center gap-8 text-[14.5px] font-semibold">
|
||||
<a href="/campus/" class={`transition-colors hover:text-orange ${currentPath.includes('/campus') ? 'text-orange' : 'text-text'}`}>FP España</a>
|
||||
<a href="/aprendizaje/" class={`transition-colors hover:text-orange ${currentPath.includes('/aprendizaje') ? 'text-orange' : 'text-text'}`}>Rutas</a>
|
||||
<a href="/comunidad/" class={`transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Recursos</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center gap-3.5">
|
||||
<a href="/contacto/" class="hidden sm:inline text-sm font-semibold text-text hover:text-orange transition-colors">Iniciar sesión</a>
|
||||
<a href="/campus/" class="bg-orange text-white font-bold text-sm py-[11px] px-5 rounded-[10px] hover:bg-orange-ink transition-colors">
|
||||
Explorar FP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="md:hidden p-2 text-text hover:text-orange"
|
||||
aria-label="Abrir menú"
|
||||
id="mobile-menu-button"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="md:hidden hidden px-10 py-4 border-b border-line" id="mobile-menu">
|
||||
<nav class="flex flex-col gap-2 text-sm font-semibold">
|
||||
<a href="/campus/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">FP España</a>
|
||||
<a href="/aprendizaje/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas</a>
|
||||
<a href="/comunidad/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a>
|
||||
<a href="/contacto/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const button = document.getElementById('mobile-menu-button');
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
button?.addEventListener('click', () => menu?.classList.toggle('hidden'));
|
||||
</script>
|
||||
210
src/components/Welcome.astro
Normal file
210
src/components/Welcome.astro
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
---
|
||||
import astroLogo from '../assets/astro.svg';
|
||||
import background from '../assets/background.svg';
|
||||
---
|
||||
|
||||
<div id="container">
|
||||
<img id="background" src={background.src} alt="" fetchpriority="high" />
|
||||
<main>
|
||||
<section id="hero">
|
||||
<a href="https://astro.build"
|
||||
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
|
||||
>
|
||||
<h1>
|
||||
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
|
||||
</h1>
|
||||
<section id="links">
|
||||
<a class="button" href="https://docs.astro.build">Read our docs</a>
|
||||
<a href="https://astro.build/chat"
|
||||
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<a href="https://astro.build/blog/astro-6-beta/" id="news" class="box">
|
||||
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
|
||||
fill="#111827"></path></svg
|
||||
>
|
||||
<h2>What's New in Astro 6.0?</h2>
|
||||
<p>
|
||||
Redesigned dev server, fonts, live collections, built-in CSP support, and more! Click to
|
||||
explore Astro 6.0's new features.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
#container {
|
||||
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
#links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
color: rgb(78, 80, 86);
|
||||
}
|
||||
|
||||
#links a svg {
|
||||
height: 1em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#links a.button {
|
||||
color: white;
|
||||
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#links a.button:hover {
|
||||
color: rgb(230, 230, 230);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family:
|
||||
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
|
||||
monospace;
|
||||
font-weight: normal;
|
||||
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 1em;
|
||||
font-weight: normal;
|
||||
color: #111827;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4b5563;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.006em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background:
|
||||
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
|
||||
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
#news {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
max-width: 300px;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
#news:hover {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 368px) {
|
||||
#news {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: block;
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
#links {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#links a.button {
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
#news {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
bottom: 2.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/content.config.ts
Normal file
76
src/content.config.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const cycles = defineCollection({
|
||||
type: 'data',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
duration: z.string(),
|
||||
hours: z.number(),
|
||||
level: z.enum(['grado-superior', 'grado-medio']),
|
||||
slug: z.string(),
|
||||
modules: z.array(z.string()),
|
||||
competences: z.array(z.string()),
|
||||
keywords: z.array(z.string()),
|
||||
icon: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
const modules = defineCollection({
|
||||
type: 'data',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
cycle: z.string(),
|
||||
hours: z.number(),
|
||||
slug: z.string(),
|
||||
competences: z.array(z.string()),
|
||||
technologies: z.array(z.string()),
|
||||
keywords: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
const articles = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
date: z.date(),
|
||||
updated: z.date().optional(),
|
||||
author: z.string().default('Ornitonautas'),
|
||||
keywords: z.array(z.string()),
|
||||
category: z.enum(['guia', 'tutorial', 'noticia', 'recurso']),
|
||||
readingTime: z.number(),
|
||||
relatedCycles: z.array(z.string()).optional(),
|
||||
relatedModules: z.array(z.string()).optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
const faqs = defineCollection({
|
||||
type: 'data',
|
||||
schema: z.object({
|
||||
question: z.string(),
|
||||
answer: z.string(),
|
||||
category: z.enum(['general', 'ciclos', 'admisión', 'empleo', 'metodología']),
|
||||
keywords: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
const glossary = defineCollection({
|
||||
type: 'data',
|
||||
schema: z.object({
|
||||
term: z.string(),
|
||||
definition: z.string(),
|
||||
category: z.enum(['programación', 'bases-datos', 'redes', 'desarrollo-web', 'general']),
|
||||
relatedTerms: z.array(z.string()).optional(),
|
||||
keywords: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
cycles,
|
||||
modules,
|
||||
articles,
|
||||
faqs,
|
||||
glossary,
|
||||
};
|
||||
74
src/i18n/en.json
Normal file
74
src/i18n/en.json
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"meta": {
|
||||
"siteName": "Ornitonautas",
|
||||
"tagline": "Vocational Training in Computer Science"
|
||||
},
|
||||
"nav": {
|
||||
"home": "Home",
|
||||
"campus": "Campus",
|
||||
"aprendizaje": "Learning",
|
||||
"comunidad": "Community",
|
||||
"contacto": "Contact",
|
||||
"openMenu": "Open menu",
|
||||
"closeMenu": "Close menu"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Vocational Training in Computer Science",
|
||||
"subtitle": "Prepare your future with quality education, real projects, and direct connection to the job market.",
|
||||
"cta": "Explore programs",
|
||||
"ctaSecondary": "Learn more"
|
||||
},
|
||||
"home": {
|
||||
"stats": {
|
||||
"students": "Students trained",
|
||||
"companies": "Partner companies",
|
||||
"insertion": "Employment rate",
|
||||
"modules": "Available modules"
|
||||
},
|
||||
"featuredCycles": "Featured programs",
|
||||
"whyUs": "Why Ornitonautas?",
|
||||
"testimonials": "What our students say"
|
||||
},
|
||||
"campus": {
|
||||
"title": "Campus",
|
||||
"subtitle": "Access our vocational training programs and educational resources",
|
||||
"enroll": "Enroll now",
|
||||
"info": "More information"
|
||||
},
|
||||
"aprendizaje": {
|
||||
"title": "Learning",
|
||||
"subtitle": "Resources, guides and content for your IT education",
|
||||
"resources": "Available resources",
|
||||
"guides": "Study guides"
|
||||
},
|
||||
"comunidad": {
|
||||
"title": "Community",
|
||||
"subtitle": "Connect with other students, professionals and companies in the sector",
|
||||
"events": "Upcoming events",
|
||||
"forum": "Discussion forum"
|
||||
},
|
||||
"contacto": {
|
||||
"title": "Contact",
|
||||
"subtitle": "Have questions? We're here to help",
|
||||
"name": "Name",
|
||||
"email": "Email",
|
||||
"subject": "Subject",
|
||||
"message": "Message",
|
||||
"send": "Send message",
|
||||
"success": "Message sent successfully",
|
||||
"error": "Error sending message"
|
||||
},
|
||||
"footer": {
|
||||
"heading": "Ornitonautas",
|
||||
"description": "Quality Vocational Training in Computer Science.",
|
||||
"rights": "All rights reserved.",
|
||||
"privacy": "Privacy policy",
|
||||
"legal": "Legal notice",
|
||||
"cookies": "Cookie policy"
|
||||
},
|
||||
"langToggle": {
|
||||
"label": "Language",
|
||||
"es": "Español",
|
||||
"en": "English"
|
||||
}
|
||||
}
|
||||
74
src/i18n/es.json
Normal file
74
src/i18n/es.json
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"meta": {
|
||||
"siteName": "Ornitonautas",
|
||||
"tagline": "Formación Profesional en Informática"
|
||||
},
|
||||
"nav": {
|
||||
"home": "Inicio",
|
||||
"campus": "Campus",
|
||||
"aprendizaje": "Aprendizaje",
|
||||
"comunidad": "Comunidad",
|
||||
"contacto": "Contacto",
|
||||
"openMenu": "Abrir menú",
|
||||
"closeMenu": "Cerrar menú"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Formación Profesional en Informática",
|
||||
"subtitle": "Prepara tu futuro con formación de calidad, proyectos reales y conexión directa con el mercado laboral.",
|
||||
"cta": "Explorar ciclos",
|
||||
"ctaSecondary": "Conocer más"
|
||||
},
|
||||
"home": {
|
||||
"stats": {
|
||||
"students": "Alumnos formados",
|
||||
"companies": "Empresas colaboradoras",
|
||||
"insertion": "Tasa de inserción",
|
||||
"modules": "Módulos disponibles"
|
||||
},
|
||||
"featuredCycles": "Ciclos destacados",
|
||||
"whyUs": "¿Por qué Ornitonautas?",
|
||||
"testimonials": "Lo que dicen nuestros alumnos"
|
||||
},
|
||||
"campus": {
|
||||
"title": "Campus",
|
||||
"subtitle": "Accede a nuestros ciclos formativos y recursos de formación",
|
||||
"enroll": "Matricularme",
|
||||
"info": "Más información"
|
||||
},
|
||||
"aprendizaje": {
|
||||
"title": "Aprendizaje",
|
||||
"subtitle": "Recursos, guías y contenidos para tu formación en informática",
|
||||
"resources": "Recursos disponibles",
|
||||
"guides": "Guías de estudio"
|
||||
},
|
||||
"comunidad": {
|
||||
"title": "Comunidad",
|
||||
"subtitle": "Conecta con otros estudiantes, profesionales y empresas del sector",
|
||||
"events": "Próximos eventos",
|
||||
"forum": "Foro de discusión"
|
||||
},
|
||||
"contacto": {
|
||||
"title": "Contacto",
|
||||
"subtitle": "¿Tienes preguntas? Estamos aquí para ayudarte",
|
||||
"name": "Nombre",
|
||||
"email": "Email",
|
||||
"subject": "Asunto",
|
||||
"message": "Mensaje",
|
||||
"send": "Enviar mensaje",
|
||||
"success": "Mensaje enviado correctamente",
|
||||
"error": "Error al enviar el mensaje"
|
||||
},
|
||||
"footer": {
|
||||
"heading": "Ornitonautas",
|
||||
"description": "Formación Profesional en Informática de calidad.",
|
||||
"rights": "Todos los derechos reservados.",
|
||||
"privacy": "Política de privacidad",
|
||||
"legal": "Aviso legal",
|
||||
"cookies": "Política de cookies"
|
||||
},
|
||||
"langToggle": {
|
||||
"label": "Idioma",
|
||||
"es": "Español",
|
||||
"en": "English"
|
||||
}
|
||||
}
|
||||
47
src/i18n/index.ts
Normal file
47
src/i18n/index.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import es from './es.json';
|
||||
import en from './en.json';
|
||||
|
||||
export const locales = ['es', 'en'] as const;
|
||||
export type Locale = (typeof locales)[number];
|
||||
export const defaultLocale: Locale = 'es';
|
||||
|
||||
const dictionaries = { es, en } as const;
|
||||
|
||||
export function useTranslations(locale: Locale) {
|
||||
return function t(key: string): string {
|
||||
const keys = key.split('.');
|
||||
let value: any = dictionaries[locale];
|
||||
|
||||
for (const k of keys) {
|
||||
if (value === undefined) return key;
|
||||
value = value[k];
|
||||
}
|
||||
|
||||
return typeof value === 'string' ? value : key;
|
||||
};
|
||||
}
|
||||
|
||||
export function getLocaleFromUrl(pathname: string): Locale {
|
||||
const segments = pathname.split('/');
|
||||
const firstSegment = segments[1];
|
||||
|
||||
if (locales.includes(firstSegment as Locale)) {
|
||||
return firstSegment as Locale;
|
||||
}
|
||||
|
||||
return defaultLocale;
|
||||
}
|
||||
|
||||
export function localePath(path: string, locale: Locale): string {
|
||||
if (locale === defaultLocale) {
|
||||
return path;
|
||||
}
|
||||
return `/${locale}${path}`;
|
||||
}
|
||||
|
||||
export function alternatesFor(path: string) {
|
||||
return locales.map((locale) => ({
|
||||
locale,
|
||||
href: localePath(path, locale),
|
||||
}));
|
||||
}
|
||||
86
src/layouts/BaseLayout.astro
Normal file
86
src/layouts/BaseLayout.astro
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
canonical?: string;
|
||||
ogImage?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = 'Formación Profesional en Informática con proyectos reales y conexión directa con el mercado laboral.',
|
||||
canonical = 'https://ornitonautas.com',
|
||||
ogImage = '/og-default.png',
|
||||
} = Astro.props;
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
const lang = currentPath.startsWith('/en') ? 'en' : 'es';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- SEO -->
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonical} />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={ogImage} />
|
||||
<meta property="og:locale" content={lang === 'es' ? 'es_ES' : 'en_US'} />
|
||||
<meta property="og:site_name" content="Ornitonautas" />
|
||||
|
||||
<!-- Hreflang -->
|
||||
<link rel="alternate" hreflang="es" href="https://ornitonautas.com/" />
|
||||
<link rel="alternate" hreflang="en" href="https://ornitonautas.com/en/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://ornitonautas.com/" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/ornito_logo.png" />
|
||||
</head>
|
||||
<body class="bg-paper text-navy antialiased">
|
||||
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-orange text-white px-4 py-2 rounded-lg z-50 font-bold">
|
||||
Saltar al contenido principal
|
||||
</a>
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- JSON-LD -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "Ornitonautas",
|
||||
"description": description,
|
||||
"url": canonical,
|
||||
"sameAs": [],
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressCountry": "ES"
|
||||
},
|
||||
"areaServed": {
|
||||
"@type": "Country",
|
||||
"name": "España"
|
||||
},
|
||||
"knowsAbout": [
|
||||
"Formación Profesional",
|
||||
"Informática",
|
||||
"Desarrollo de Aplicaciones",
|
||||
"Desarrollo Web",
|
||||
"Sistemas Informáticos"
|
||||
]
|
||||
})} />
|
||||
</body>
|
||||
</html>
|
||||
23
src/layouts/Layout.astro
Normal file
23
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
37
src/pages/aprendizaje/index.astro
Normal file
37
src/pages/aprendizaje/index.astro
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
const lang = 'es' as const;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Aprendizaje - Ornitonautas"
|
||||
description="Recursos de aprendizaje para Formación Profesional en informática. Artículos, tutoriales y guías prácticas."
|
||||
>
|
||||
<Header lang={lang} />
|
||||
|
||||
<main id="main-content">
|
||||
<section class="py-16 bg-gradient-to-br from-blue-50 to-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold text-slate-900 mb-4">Aprendizaje</h1>
|
||||
<p class="text-lg text-slate-600 max-w-3xl">
|
||||
Recursos, artículos y guías para ayudarte a aprender programación, bases de datos, redes y desarrollo de aplicaciones.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-slate-600">
|
||||
Próximamente encontrarás aquí artículos sobre programación, tutoriales paso a paso y recursos para tu formación en informática.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer lang={lang} />
|
||||
</BaseLayout>
|
||||
77
src/pages/campus/index.astro
Normal file
77
src/pages/campus/index.astro
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
const lang = 'es' as const;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Campus - Ornitonautas"
|
||||
description="Explora los ciclos formativos de informática: DAM, DAW, SMR, ASIR. Módulos, competencias y salidas profesionales."
|
||||
>
|
||||
<Header lang={lang} />
|
||||
|
||||
<main id="main-content">
|
||||
<section class="py-16 bg-gradient-to-br from-blue-50 to-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold text-slate-900 mb-4">Campus</h1>
|
||||
<p class="text-lg text-slate-600 max-w-3xl">
|
||||
Explora los ciclos formativos de informática. Cada ciclo incluye módulos, competencias profesionales y salidas laborales.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<a href="/campus/dam/" class="block p-8 bg-slate-50 rounded-xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all">
|
||||
<div class="text-sm font-medium text-blue-600 mb-3">Grado Superior</div>
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-3">DAM</h2>
|
||||
<p class="text-slate-600 mb-4">Desarrollo de Aplicaciones Multiplataforma. Aprende a crear aplicaciones para móvil, escritorio y web.</p>
|
||||
<div class="flex gap-4 text-sm text-slate-500">
|
||||
<span>2000 horas</span>
|
||||
<span>·</span>
|
||||
<span>2 cursos</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/campus/daw/" class="block p-8 bg-slate-50 rounded-xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all">
|
||||
<div class="text-sm font-medium text-blue-600 mb-3">Grado Superior</div>
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-3">DAW</h2>
|
||||
<p class="text-slate-600 mb-4">Desarrollo de Aplicaciones Web. Crea sitios y aplicaciones web modernas con las últimas tecnologías.</p>
|
||||
<div class="flex gap-4 text-sm text-slate-500">
|
||||
<span>2000 horas</span>
|
||||
<span>·</span>
|
||||
<span>2 cursos</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/campus/smr/" class="block p-8 bg-slate-50 rounded-xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all">
|
||||
<div class="text-sm font-medium text-blue-600 mb-3">Grado Medio</div>
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-3">SMR</h2>
|
||||
<p class="text-slate-600 mb-4">Sistemas Microinformáticos y Redes. Monta, configura y gestiona sistemas informáticos y redes.</p>
|
||||
<div class="flex gap-4 text-sm text-slate-500">
|
||||
<span>1400 horas</span>
|
||||
<span>·</span>
|
||||
<span>2 cursos</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/campus/asir/" class="block p-8 bg-slate-50 rounded-xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all">
|
||||
<div class="text-sm font-medium text-blue-600 mb-3">Grado Superior</div>
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-3">ASIR</h2>
|
||||
<p class="text-slate-600 mb-4">Administración de Sistemas Informáticos en Red. Gestiona servidores, redes y seguridad empresarial.</p>
|
||||
<div class="flex gap-4 text-sm text-slate-500">
|
||||
<span>2000 horas</span>
|
||||
<span>·</span>
|
||||
<span>2 cursos</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer lang={lang} />
|
||||
</BaseLayout>
|
||||
37
src/pages/comunidad/index.astro
Normal file
37
src/pages/comunidad/index.astro
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
const lang = 'es' as const;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Comunidad - Ornitonautas"
|
||||
description="Comunidad de estudiantes y profesionales de FP informática. Conecta, comparte y aprende con otros ornitonautas."
|
||||
>
|
||||
<Header lang={lang} />
|
||||
|
||||
<main id="main-content">
|
||||
<section class="py-16 bg-gradient-to-br from-blue-50 to-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold text-slate-900 mb-4">Comunidad</h1>
|
||||
<p class="text-lg text-slate-600 max-w-3xl">
|
||||
Conecta con otros estudiantes y profesionales de FP informática. Comparte experiencias, resuelve dudas y crece profesionalmente.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-slate-600">
|
||||
Próximamente encontrarás aquí historias de éxito, testimonios de estudiantes y oportunidades de networking con empresas del sector.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer lang={lang} />
|
||||
</BaseLayout>
|
||||
72
src/pages/contacto/index.astro
Normal file
72
src/pages/contacto/index.astro
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
const lang = 'es' as const;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Contacto - Ornitonautas"
|
||||
description="Contacta con Ornitonautas. Estamos aquí para resolver tus dudas sobre Formación Profesional en informática."
|
||||
>
|
||||
<Header lang={lang} />
|
||||
|
||||
<main id="main-content">
|
||||
<section class="py-16 bg-gradient-to-br from-blue-50 to-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold text-slate-900 mb-4">Contacto</h1>
|
||||
<p class="text-lg text-slate-600 max-w-3xl">
|
||||
¿Tienes preguntas sobre FP informática? Estamos aquí para ayudarte.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-xl">
|
||||
<form class="space-y-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-slate-700 mb-1">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-slate-700 mb-1">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium text-slate-700 mb-1">Mensaje</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows="5"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors resize-y"
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Enviar Mensaje
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer lang={lang} />
|
||||
</BaseLayout>
|
||||
130
src/pages/en/index.astro
Normal file
130
src/pages/en/index.astro
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Ornitonautas - FP Informática | Vocational Training"
|
||||
description="Vocational Training in Computer Science with real projects and direct connection to the job market. DAM, DAW, SMR, ASIR cycles."
|
||||
>
|
||||
<Header lang="en" />
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="grid grid-cols-[1.05fr_0.95fr] gap-10 items-center px-10 py-[72px] bg-[radial-gradient(120%_120%_at_85%_10%,#f4f7fc_0%,#fff_60%)]">
|
||||
<div>
|
||||
<span class="inline-flex items-center gap-2 bg-[#eef3fb] text-navy-soft font-bold text-[12.5px] py-[7px] px-[13px] rounded-full mb-[22px]">
|
||||
🚀 Official FP Training · Spain
|
||||
</span>
|
||||
<h1 class="font-heading font-bold text-[56px] leading-[1.03] tracking-tight mb-5">
|
||||
Learn computing.<br />Launch your <span class="text-orange">future</span>.
|
||||
</h1>
|
||||
<p class="text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
|
||||
Books and materials for FP cycles in Spain, with real practice and a pace that adapts to you.
|
||||
</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/en/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base py-[15px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
|
||||
Explore FP in Spain →
|
||||
</a>
|
||||
<span class="text-[15px] font-semibold text-text">Higher & Medium Level</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex justify-center items-center min-h-[340px]">
|
||||
<div class="absolute w-[340px] h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
|
||||
<span class="absolute top-[30px] right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
|
||||
<span class="absolute bottom-[50px] left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span>
|
||||
<img src="/ornito_logo.png" alt="" class="w-[300px] h-[300px] object-contain relative animate-floaty" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Official FP in Spain -->
|
||||
<section class="px-10 py-16 border-t border-line">
|
||||
<div class="flex items-end justify-between mb-7">
|
||||
<div>
|
||||
<h2 class="font-heading font-bold text-[30px] tracking-tight mb-2">Official FP in Spain</h2>
|
||||
<p class="text-base text-text m-0">Choose your cycle and study with our books and exercises.</p>
|
||||
</div>
|
||||
<a href="/en/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">View all cycles →</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
|
||||
<a href="/en/campus/daw/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
|
||||
<div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg"></></div>
|
||||
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
|
||||
<h3 class="font-heading text-[19px] mb-2">Web Application Development</h3>
|
||||
<p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Complete, secure and scalable web applications.</p>
|
||||
<div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
|
||||
</a>
|
||||
<a href="/en/campus/asir/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
|
||||
<div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg">◉</div>
|
||||
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
|
||||
<h3 class="font-heading text-[19px] mb-2">Networked Computer Systems Admin</h3>
|
||||
<p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Servers, networks and real-world systems.</p>
|
||||
<div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
|
||||
</a>
|
||||
<a href="/en/campus/dam/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
|
||||
<div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg">▤</div>
|
||||
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
|
||||
<h3 class="font-heading text-[19px] mb-2">Multiplatform Application Development</h3>
|
||||
<p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Desktop and mobile multiplatform apps.</p>
|
||||
<div class="text-[13px] font-semibold text-text-muted">DAM · 2000h</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Learning paths -->
|
||||
<section class="px-16 py-16 bg-mist border-t border-line">
|
||||
<h2 class="font-heading font-bold text-[30px] tracking-tight m-0 mb-2 text-center">Learning Paths</h2>
|
||||
<p class="m-0 mx-auto mb-9 text-base text-text text-center max-w-[520px]">A step-by-step journey, from the first concept to the final project.</p>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="text-center w-[200px]">
|
||||
<div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">1</div>
|
||||
<div class="font-bold text-[15px]">Foundations</div>
|
||||
<div class="text-[13px] text-text-muted">Logic & programming</div>
|
||||
</div>
|
||||
<div class="flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div>
|
||||
<div class="text-center w-[200px]">
|
||||
<div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">2</div>
|
||||
<div class="font-bold text-[15px]">Specialization</div>
|
||||
<div class="text-[13px] text-text-muted">Web, systems or data</div>
|
||||
</div>
|
||||
<div class="flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div>
|
||||
<div class="text-center w-[200px]">
|
||||
<div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">3</div>
|
||||
<div class="font-bold text-[15px]">Real Project</div>
|
||||
<div class="text-[13px] text-text-muted">Portfolio for employment</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-9">
|
||||
<a href="/en/aprendizaje/" class="inline-block border-[1.5px] border-navy text-navy font-bold text-[15px] py-[13px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
|
||||
View full paths →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Job market -->
|
||||
<section class="px-10 py-16 border-t border-line">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
|
||||
<div class="text-center px-3">
|
||||
<div class="text-[34px] mb-3">🎯</div>
|
||||
<h3 class="font-heading text-[18px] mb-2">Skills employers want</h3>
|
||||
<p class="m-0 text-[14.5px] text-text leading-relaxed">Learn what companies are looking for today.</p>
|
||||
</div>
|
||||
<div class="text-center px-3">
|
||||
<div class="text-[34px] mb-3">💼</div>
|
||||
<h3 class="font-heading text-[18px] mb-2">Professional Portfolio</h3>
|
||||
<p class="m-0 text-[14.5px] text-text leading-relaxed">Build projects you can show off.</p>
|
||||
</div>
|
||||
<div class="text-center px-3">
|
||||
<div class="text-[34px] mb-3">🤝</div>
|
||||
<h3 class="font-heading text-[18px] mb-2">Ready for employment</h3>
|
||||
<p class="m-0 text-[14.5px] text-text leading-relaxed">From classroom to your first tech job.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
133
src/pages/index.astro
Normal file
133
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Ornitonautas - FP Informática | Aprende. Practica. Despega."
|
||||
description="Formación Profesional en Informática con proyectos reales y conexión directa con el mercado laboral. Ciclos DAM, DAW, SMR, ASIR."
|
||||
>
|
||||
<Header lang="es" />
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="grid grid-cols-[1.05fr_0.95fr] gap-10 items-center px-10 py-[72px] bg-[radial-gradient(120%_120%_at_85%_10%,#f4f7fc_0%,#fff_60%)]">
|
||||
<div>
|
||||
<span class="inline-flex items-center gap-2 bg-[#eef3fb] text-navy-soft font-bold text-[12.5px] py-[7px] px-[13px] rounded-full mb-[22px]">
|
||||
🚀 Formación oficial de FP · España
|
||||
</span>
|
||||
<h1 class="font-heading font-bold text-[56px] leading-[1.03] tracking-tight mb-5">
|
||||
Aprende informática.<br />Despega tu <span class="text-orange">futuro</span>.
|
||||
</h1>
|
||||
<p class="text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
|
||||
Libros y materiales para los ciclos de FP en España, con práctica real y un ritmo que se adapta a ti.
|
||||
</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base py-[15px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
|
||||
Ver FP de España →
|
||||
</a>
|
||||
<span class="text-[15px] font-semibold text-text">Grado Medio y Superior</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex justify-center items-center min-h-[340px]">
|
||||
<div class="absolute w-[340px] h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
|
||||
<span class="absolute top-[30px] right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
|
||||
<span class="absolute bottom-[50px] left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span>
|
||||
<img src="/ornito_logo.png" alt="" class="w-[300px] h-[300px] object-contain relative animate-floaty" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FP oficial en España -->
|
||||
<section class="px-10 py-16 border-t border-line">
|
||||
<div class="flex items-end justify-between mb-7">
|
||||
<div>
|
||||
<h2 class="font-heading font-bold text-[30px] tracking-tight mb-2">FP oficial en España</h2>
|
||||
<p class="text-base text-text m-0">Elige tu ciclo y estudia con nuestros libros y prácticas.</p>
|
||||
</div>
|
||||
<a href="/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">Ver todos los ciclos →</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
|
||||
<!-- DAW -->
|
||||
<a href="/campus/daw/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
|
||||
<div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg"></></div>
|
||||
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
|
||||
<h3 class="font-heading text-[19px] mb-2">Desarrollo de Aplicaciones Web</h3>
|
||||
<p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Aplicaciones web completas, seguras y escalables.</p>
|
||||
<div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
|
||||
</a>
|
||||
<!-- ASIR -->
|
||||
<a href="/campus/asir/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
|
||||
<div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg">◉</div>
|
||||
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
|
||||
<h3 class="font-heading text-[19px] mb-2">Administración de Sistemas en Red</h3>
|
||||
<p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Servidores, redes y sistemas en entornos reales.</p>
|
||||
<div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
|
||||
</a>
|
||||
<!-- DAM -->
|
||||
<a href="/campus/dam/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
|
||||
<div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg">▤</div>
|
||||
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
|
||||
<h3 class="font-heading text-[19px] mb-2">Desarrollo de Aplicaciones Multiplataforma</h3>
|
||||
<p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Apps de escritorio y móvil multiplataforma.</p>
|
||||
<div class="text-[13px] font-semibold text-text-muted">DAM · 2000h</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Rutas de aprendizaje -->
|
||||
<section class="px-16 py-16 bg-mist border-t border-line">
|
||||
<h2 class="font-heading font-bold text-[30px] tracking-tight m-0 mb-2 text-center">Rutas de aprendizaje</h2>
|
||||
<p class="m-0 mx-auto mb-9 text-base text-text text-center max-w-[520px]">Un camino paso a paso, del primer concepto al proyecto final.</p>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="text-center w-[200px]">
|
||||
<div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">1</div>
|
||||
<div class="font-bold text-[15px]">Fundamentos</div>
|
||||
<div class="text-[13px] text-text-muted">Lógica y programación</div>
|
||||
</div>
|
||||
<div class="flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div>
|
||||
<div class="text-center w-[200px]">
|
||||
<div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">2</div>
|
||||
<div class="font-bold text-[15px]">Especialización</div>
|
||||
<div class="text-[13px] text-text-muted">Web, sistemas o datos</div>
|
||||
</div>
|
||||
<div class="flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div>
|
||||
<div class="text-center w-[200px]">
|
||||
<div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">3</div>
|
||||
<div class="font-bold text-[15px]">Proyecto real</div>
|
||||
<div class="text-[13px] text-text-muted">Portfolio para empleo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-9">
|
||||
<a href="/aprendizaje/" class="inline-block border-[1.5px] border-navy text-navy font-bold text-[15px] py-[13px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
|
||||
Ver rutas completas →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mercado laboral -->
|
||||
<section class="px-10 py-16 border-t border-line">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
|
||||
<div class="text-center px-3">
|
||||
<div class="text-[34px] mb-3">🎯</div>
|
||||
<h3 class="font-heading text-[18px] mb-2">Habilidades que piden</h3>
|
||||
<p class="m-0 text-[14.5px] text-text leading-relaxed">Aprende lo que las empresas buscan hoy.</p>
|
||||
</div>
|
||||
<div class="text-center px-3">
|
||||
<div class="text-[34px] mb-3">💼</div>
|
||||
<h3 class="font-heading text-[18px] mb-2">Portfolio profesional</h3>
|
||||
<p class="m-0 text-[14.5px] text-text leading-relaxed">Construye proyectos que se enseñan.</p>
|
||||
</div>
|
||||
<div class="text-center px-3">
|
||||
<div class="text-[34px] mb-3">🤝</div>
|
||||
<h3 class="font-heading text-[18px] mb-2">Preparado para empleo</h3>
|
||||
<p class="m-0 text-[14.5px] text-text leading-relaxed">Del aula al primer trabajo tech.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
64
src/styles/global.css
Normal file
64
src/styles/global.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-navy: #13294b;
|
||||
--color-navy-soft: #1c3a63;
|
||||
--color-orange: #f47a20;
|
||||
--color-orange-ink: #e26a12;
|
||||
--color-red: #e5241b;
|
||||
--color-green: #22a05a;
|
||||
--color-text: #4a5a72;
|
||||
--color-text-muted: #8a97a8;
|
||||
--color-paper: #ffffff;
|
||||
--color-mist: #f7f9fc;
|
||||
--color-line: rgba(19, 41, 75, 0.08);
|
||||
|
||||
--font-heading: "Space Grotesk", system-ui, sans-serif;
|
||||
--font-body: "Manrope", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-orange);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@keyframes floaty {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-14px) rotate(-1.5deg); }
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.35; transform: scale(0.8); }
|
||||
50% { opacity: 1; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes rise-in {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
.animate-floaty {
|
||||
animation: floaty 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-twinkle-delay {
|
||||
animation: twinkle 2.4s ease-in-out 0.6s infinite;
|
||||
}
|
||||
|
||||
.animate-rise-in {
|
||||
animation: rise-in 0.6s ease-out both;
|
||||
}
|
||||
5
tsconfig.json
Normal file
5
tsconfig.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue