fernando/ornitoweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: WCAG 2.2 AA audit — contrast, a11y, touch targets, responsive

Browse source 
Color contrast (all now ≥4.5:1):
- text-muted: #8a97a8 → #5a6a80
- orange-ink: #e26a12 → #a85210
- orange CTA bg: #f47a20 → #d46a18 (white text passes)
- navy-soft: #1c3a63 → #1a3459
- line: 8% → 10% opacity

Screen reader:
- Mobile menu: aria-expanded, aria-controls, dynamic aria-label
- Escape key closes mobile menu, returns focus
- Footer wrapped in <nav aria-label>
- All decorative icons/emojis marked aria-hidden
- Hero logo gets descriptive alt text
- Sections get aria-labelledby with sr-only headings

Touch targets (all ≥44px):
- Hamburger button: min-w/h-[44px]
- All nav links: min-h-[44px] with flex items-center
- CTA buttons: min-h-[44px]
- Footer links: min-h-[44px]

Responsive:
- English page now uses fluid px-4/6/10 padding
- H1: clamp(2rem, 6vw, 56px) — minimum 32px on mobile
- Rutas section padding consistent with rest

Motion:
- prefers-reduced-motion: disables floaty, twinkle, rise-in animations
- scroll-behavior: auto when reduced motion
This commit is contained in:
Fernando 2026-07-13 13:04:49 +02:00
parent 92956daa2a
commit f7a853dded
5 changed files with 125 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Footer.astro
View file

@ -3,8 +3,10 @@
<footer class="px-4 sm:px-6 lg:px-10 py-6 lg:py-7 bg-navy text-text-muted flex flex-col sm:flex-row items-center justify-between gap-4 text-[13px]"> <footer class="px-4 sm:px-6 lg:px-10 py-6 lg:py-7 bg-navy text-text-muted flex flex-col sm:flex-row items-center justify-between gap-4 text-[13px]">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<img src="/ornito_logo.png" class="w-[26px] h-[26px] object-contain" alt="" /> <img src="/ornito_logo.png" class="w-[26px] h-[26px] object-contain" alt="Ornitonautas" />
<span class="text-white font-heading font-bold">Ornitonautas</span> <span class="text-white font-heading font-bold">Ornitonautas</span>
</div> </div>
<nav aria-label="Enlaces legales" class="flex items-center gap-4">
<span>&copy; 2026 &middot; Formaci&oacute;n FP &middot; Espa&ntilde;a</span> <span>&copy; 2026 &middot; Formaci&oacute;n FP &middot; Espa&ntilde;a</span>
</nav>
</footer> </footer>

62
src/components/Header.astro
View file

@ -8,56 +8,72 @@ const currentPath = Astro.url.pathname;
--- ---
<header class="flex items-center justify-between px-4 sm:px-6 lg:px-10 py-4 lg:py-5 border-b border-line"> <header class="flex items-center justify-between px-4 sm:px-6 lg:px-10 py-4 lg:py-5 border-b border-line">
<a href="/" class="flex items-center gap-3 no-underline"> <a href="/" class="flex items-center gap-3 no-underline min-h-[44px]">
<img src="/ornito_logo.png" alt="Ornitonautas" class="w-[42px] h-[42px] object-contain" /> <img src="/ornito_logo.png" alt="Ornitonautas — Aprende. Practica. Despega." class="w-[42px] h-[42px] object-contain" />
<div> <div>
<div class="font-heading font-bold text-[19px] tracking-tight text-navy">Ornitonautas</div> <div class="font-heading font-bold text-[19px] tracking-tight text-navy">Ornitonautas</div>
<div class="text-[11px] text-text-muted tracking-wide">Aprende. Practica. Despega.</div> <div class="text-[11px] text-text-muted tracking-wide">Aprende. Practica. Despega.</div>
</div> </div>
</a> </a>
<nav class="hidden lg:flex items-center gap-7 text-[14px] font-semibold"> <nav aria-label="Navegación principal" class="hidden lg:flex items-center gap-7 text-[14px] font-semibold">
<a href="/formacion/" class={`transition-colors hover:text-orange ${currentPath.includes('/formacion') ? 'text-orange' : 'text-text'}`}>Formación</a> <a href="/formacion/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/formacion') ? 'text-orange' : 'text-text'}`}>Formación</a>
<a href="/campus/" class={`transition-colors hover:text-orange ${currentPath.includes('/campus') ? 'text-orange' : 'text-text'}`}>FP España</a> <a href="/campus/" class={`min-h-[44px] flex items-center 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 profesionales</a> <a href="/aprendizaje/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/aprendizaje') ? 'text-orange' : 'text-text'}`}>Rutas profesionales</a>
<a href="/recursos/" class={`transition-colors hover:text-orange ${currentPath.includes('/recursos') ? 'text-orange' : 'text-text'}`}>Recursos</a> <a href="/recursos/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/recursos') ? 'text-orange' : 'text-text'}`}>Recursos</a>
<a href="/comunidad/" class={`transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Comunidad</a> <a href="/comunidad/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Comunidad</a>
<a href="/sobre-nosotros/" class={`transition-colors hover:text-orange ${currentPath.includes('/sobre-nosotros') ? 'text-orange' : 'text-text'}`}>Sobre nosotros</a> <a href="/sobre-nosotros/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/sobre-nosotros') ? 'text-orange' : 'text-text'}`}>Sobre nosotros</a>
</nav> </nav>
<div class="flex items-center gap-3.5"> <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="/contacto/" class="hidden sm:inline-flex items-center min-h-[44px] 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"> <a href="/campus/" class="inline-flex items-center min-h-[44px] bg-orange text-white font-bold text-sm px-5 rounded-[10px] hover:bg-orange-ink transition-colors">
Explorar FP Explorar FP
</a> </a>
</div> </div>
<button <button
type="button" type="button"
class="lg:hidden p-2 text-text hover:text-orange" class="lg:hidden min-w-[44px] min-h-[44px] flex items-center justify-center text-text hover:text-orange"
aria-label="Abrir menú" aria-label="Abrir menú"
aria-expanded="false"
aria-controls="mobile-menu"
id="mobile-menu-button" id="mobile-menu-button"
> >
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
</button> </button>
</header> </header>
<div class="lg:hidden hidden px-4 sm:px-6 py-4 border-b border-line" id="mobile-menu"> <div class="lg:hidden hidden px-4 sm:px-6 py-4 border-b border-line" id="mobile-menu" role="dialog" aria-label="Menú de navegación">
<nav class="flex flex-col gap-2 text-sm font-semibold"> <nav class="flex flex-col gap-1 text-sm font-semibold">
<a href="/formacion/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Formación</a> <a href="/formacion/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Formación</a>
<a href="/campus/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">FP España</a> <a href="/campus/" class="min-h-[44px] flex items-center 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 profesionales</a> <a href="/aprendizaje/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas profesionales</a>
<a href="/recursos/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a> <a href="/recursos/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a>
<a href="/comunidad/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Comunidad</a> <a href="/comunidad/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Comunidad</a>
<a href="/sobre-nosotros/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Sobre nosotros</a> <a href="/sobre-nosotros/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Sobre nosotros</a>
<a href="/contacto/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a> <a href="/contacto/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
</nav> </nav>
</div> </div>
<script> <script>
const button = document.getElementById('mobile-menu-button'); const button = document.getElementById('mobile-menu-button');
const menu = document.getElementById('mobile-menu'); const menu = document.getElementById('mobile-menu');
button?.addEventListener('click', () => menu?.classList.toggle('hidden'));
function toggleMenu() {
const isOpen = menu?.classList.toggle('hidden');
button?.setAttribute('aria-expanded', String(!isOpen));
button?.setAttribute('aria-label', isOpen ? 'Abrir menú' : 'Cerrar menú');
}
button?.addEventListener('click', toggleMenu);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !menu?.classList.contains('hidden')) {
toggleMenu();
button?.focus();
}
});
</script> </script>

67
src/pages/en/index.astro
View file

@ -13,58 +13,58 @@ import Footer from '../../components/Footer.astro';
<main id="main-content"> <main id="main-content">
<!-- Hero --> <!-- 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%)]"> <section class="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-10 items-center px-4 sm:px-6 lg:px-10 py-12 lg:py-[72px] bg-[radial-gradient(120%_120%_at_85%_10%,#f4f7fc_0%,#fff_60%)]">
<div> <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]"> <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 🚀 Official FP Training · Spain
</span> </span>
<h1 class="font-heading font-bold text-[56px] leading-[1.03] tracking-tight mb-5"> <h1 class="font-heading font-bold text-[clamp(2rem,6vw,56px)] leading-[1.03] tracking-tight mb-5">
Learn computing.<br />Launch your <span class="text-orange">future</span>. Learn computing.<br />Launch your <span class="text-orange">future</span>.
</h1> </h1>
<p class="text-[18px] leading-[1.6] text-text max-w-[440px] mb-8"> <p class="text-base lg: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. Books and materials for FP cycles in Spain, with real practice and a pace that adapts to you.
</p> </p>
<div class="flex items-center gap-4"> <div class="flex flex-col sm:flex-row items-start sm: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"> <a href="/en/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base min-h-[44px] py-[13px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
Explore FP in Spain → Explore FP in Spain →
</a> </a>
<span class="text-[15px] font-semibold text-text">Higher & Medium Level</span> <span class="text-[15px] font-semibold text-text">Higher & Medium Level</span>
</div> </div>
</div> </div>
<div class="relative flex justify-center items-center min-h-[340px]"> <div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]">
<div class="absolute w-[340px] h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div> <div class="absolute w-[200px] h-[200px] lg:w-[340px] lg: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 top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle" aria-hidden="true">✦</span>
<span class="absolute bottom-[50px] left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span> <span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay" aria-hidden="true">✦</span>
<img src="/ornito_logo.png" alt="" class="w-[300px] h-[300px] object-contain relative animate-floaty" /> <img src="/ornito_logo.png" alt="Ornitonautas — mascot" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
</div> </div>
</section> </section>
<!-- Official FP in Spain --> <!-- Official FP in Spain -->
<section class="px-10 py-16 border-t border-line"> <section aria-labelledby="fp-title-en" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
<div class="flex items-end justify-between mb-7"> <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7">
<div> <div>
<h2 class="font-heading font-bold text-[30px] tracking-tight mb-2">Official FP in Spain</h2> <h2 id="fp-title-en" class="font-heading font-bold text-[clamp(1.5rem,3vw,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> <p class="text-base text-text m-0">Choose your cycle and study with our books and exercises.</p>
</div> </div>
<a href="/en/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">View all cycles →</a> <a href="/en/campus/" class="inline-flex items-center min-h-[44px] font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">View all cycles →</a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]"> <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"> <a href="/en/campus/daw/" class="group block border border-line rounded-2xl p-5 lg: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">&lt;/&gt;</div> <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" aria-hidden="true">&lt;/&gt;</div>
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</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> <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> <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> <div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
</a> </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"> <a href="/en/campus/asir/" class="group block border border-line rounded-2xl p-5 lg: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="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg" aria-hidden="true">◉</div>
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</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> <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> <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> <div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
</a> </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"> <a href="/en/campus/dam/" class="group block border border-line rounded-2xl p-5 lg: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="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg" aria-hidden="true">▤</div>
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</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> <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> <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Desktop and mobile multiplatform apps.</p>
@ -74,50 +74,51 @@ import Footer from '../../components/Footer.astro';
</section> </section>
<!-- Learning paths --> <!-- Learning paths -->
<section class="px-16 py-16 bg-mist border-t border-line"> <section aria-labelledby="rutas-title-en" class="px-4 sm:px-6 lg:px-10 py-12 lg: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> <h2 id="rutas-title-en" class="font-heading font-bold text-[clamp(1.5rem,3vw,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> <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="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-0">
<div class="text-center w-[200px]"> <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="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">1</div>
<div class="font-bold text-[15px]">Foundations</div> <div class="font-bold text-[15px]">Foundations</div>
<div class="text-[13px] text-text-muted">Logic & programming</div> <div class="text-[13px] text-text-muted">Logic & programming</div>
</div> </div>
<div class="flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div> <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]" aria-hidden="true"></div>
<div class="text-center w-[200px]"> <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="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">2</div>
<div class="font-bold text-[15px]">Specialization</div> <div class="font-bold text-[15px]">Specialization</div>
<div class="text-[13px] text-text-muted">Web, systems or data</div> <div class="text-[13px] text-text-muted">Web, systems or data</div>
</div> </div>
<div class="flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div> <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]" aria-hidden="true"></div>
<div class="text-center w-[200px]"> <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="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">3</div>
<div class="font-bold text-[15px]">Real Project</div> <div class="font-bold text-[15px]">Real Project</div>
<div class="text-[13px] text-text-muted">Portfolio for employment</div> <div class="text-[13px] text-text-muted">Portfolio for employment</div>
</div> </div>
</div> </div>
<div class="text-center mt-9"> <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"> <a href="/en/aprendizaje/" class="inline-flex items-center min-h-[44px] border-[1.5px] border-navy text-navy font-bold text-[15px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
View full paths → View full paths →
</a> </a>
</div> </div>
</section> </section>
<!-- Job market --> <!-- Job market -->
<section class="px-10 py-16 border-t border-line"> <section aria-labelledby="mercado-title-en" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
<h2 id="mercado-title-en" class="sr-only">Ready for the job market</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]"> <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
<div class="text-center px-3"> <div class="text-center px-3">
<div class="text-[34px] mb-3">🎯</div> <div class="text-[34px] mb-3" aria-hidden="true">🎯</div>
<h3 class="font-heading text-[18px] mb-2">Skills employers want</h3> <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> <p class="m-0 text-[14.5px] text-text leading-relaxed">Learn what companies are looking for today.</p>
</div> </div>
<div class="text-center px-3"> <div class="text-center px-3">
<div class="text-[34px] mb-3">💼</div> <div class="text-[34px] mb-3" aria-hidden="true">💼</div>
<h3 class="font-heading text-[18px] mb-2">Professional Portfolio</h3> <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> <p class="m-0 text-[14.5px] text-text leading-relaxed">Build projects you can show off.</p>
</div> </div>
<div class="text-center px-3"> <div class="text-center px-3">
<div class="text-[34px] mb-3">🤝</div> <div class="text-[34px] mb-3" aria-hidden="true">🤝</div>
<h3 class="font-heading text-[18px] mb-2">Ready for employment</h3> <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> <p class="m-0 text-[14.5px] text-text leading-relaxed">From classroom to your first tech job.</p>
</div> </div>

53
src/pages/index.astro
View file

@ -18,14 +18,14 @@ import Footer from '../components/Footer.astro';
<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]"> <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 🚀 Formación oficial de FP · España
</span> </span>
<h1 class="font-heading font-bold text-[clamp(2rem,5vw,56px)] leading-[1.03] tracking-tight mb-5"> <h1 class="font-heading font-bold text-[clamp(2rem,6vw,56px)] leading-[1.03] tracking-tight mb-5">
Aprende informática.<br />Despega tu <span class="text-orange">futuro</span>. Aprende informática.<br />Despega tu <span class="text-orange">futuro</span>.
</h1> </h1>
<p class="text-base lg:text-[18px] leading-[1.6] text-text max-w-[440px] mb-8"> <p class="text-base lg: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. Libros y materiales para los ciclos de FP en España, con práctica real y un ritmo que se adapta a ti.
</p> </p>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4"> <div class="flex flex-col sm:flex-row items-start sm: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"> <a href="/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base min-h-[44px] py-[13px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
Ver FP de España → Ver FP de España →
</a> </a>
<span class="text-[15px] font-semibold text-text">Grado Medio y Superior</span> <span class="text-[15px] font-semibold text-text">Grado Medio y Superior</span>
@ -33,38 +33,38 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]"> <div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]">
<div class="absolute w-[200px] h-[200px] lg:w-[340px] lg:h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div> <div class="absolute w-[200px] h-[200px] lg:w-[340px] lg:h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
<span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle">✦</span> <span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle" aria-hidden="true">✦</span>
<span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span> <span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay" aria-hidden="true">✦</span>
<img src="/ornito_logo.png" alt="" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" /> <img src="/ornito_logo.png" alt="Ornitonautas — mascot" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
</div> </div>
</section> </section>
<!-- FP oficial en España --> <!-- FP oficial en España -->
<section class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line"> <section aria-labelledby="fp-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
<div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7"> <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7">
<div> <div>
<h2 class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight mb-2">FP oficial en España</h2> <h2 id="fp-title" class="font-heading font-bold text-[clamp(1.5rem,3vw,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> <p class="text-base text-text m-0">Elige tu ciclo y estudia con nuestros libros y prácticas.</p>
</div> </div>
<a href="/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">Ver todos los ciclos →</a> <a href="/campus/" class="inline-flex items-center min-h-[44px] font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">Ver todos los ciclos →</a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]"> <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
<a href="/campus/daw/" class="block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200"> <a href="/campus/daw/" class="group block border border-line rounded-2xl p-5 lg: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">&lt;/&gt;</div> <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" aria-hidden="true">&lt;/&gt;</div>
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</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> <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> <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> <div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
</a> </a>
<a href="/campus/asir/" class="block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200"> <a href="/campus/asir/" class="group block border border-line rounded-2xl p-5 lg: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="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg" aria-hidden="true">◉</div>
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</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> <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> <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> <div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
</a> </a>
<a href="/campus/dam/" class="block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200"> <a href="/campus/dam/" class="group block border border-line rounded-2xl p-5 lg: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="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg" aria-hidden="true">▤</div>
<div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</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> <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> <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Apps de escritorio y móvil multiplataforma.</p>
@ -74,50 +74,51 @@ import Footer from '../components/Footer.astro';
</section> </section>
<!-- Rutas de aprendizaje --> <!-- Rutas de aprendizaje -->
<section class="px-4 sm:px-6 lg:px-16 py-12 lg:py-16 bg-mist border-t border-line"> <section aria-labelledby="rutas-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 bg-mist border-t border-line">
<h2 class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight m-0 mb-2 text-center">Rutas de aprendizaje</h2> <h2 id="rutas-title" class="font-heading font-bold text-[clamp(1.5rem,3vw,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> <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 flex-col sm:flex-row items-center justify-center gap-6 sm:gap-0"> <div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-0">
<div class="text-center w-[200px]"> <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="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">1</div>
<div class="font-bold text-[15px]">Fundamentos</div> <div class="font-bold text-[15px]">Fundamentos</div>
<div class="text-[13px] text-text-muted">Lógica y programación</div> <div class="text-[13px] text-text-muted">Lógica y programación</div>
</div> </div>
<div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div> <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]" aria-hidden="true"></div>
<div class="text-center w-[200px]"> <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="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">2</div>
<div class="font-bold text-[15px]">Especialización</div> <div class="font-bold text-[15px]">Especialización</div>
<div class="text-[13px] text-text-muted">Web, sistemas o datos</div> <div class="text-[13px] text-text-muted">Web, sistemas o datos</div>
</div> </div>
<div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div> <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]" aria-hidden="true"></div>
<div class="text-center w-[200px]"> <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="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">3</div>
<div class="font-bold text-[15px]">Proyecto real</div> <div class="font-bold text-[15px]">Proyecto real</div>
<div class="text-[13px] text-text-muted">Portfolio para empleo</div> <div class="text-[13px] text-text-muted">Portfolio para empleo</div>
</div> </div>
</div> </div>
<div class="text-center mt-9"> <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"> <a href="/aprendizaje/" class="inline-flex items-center min-h-[44px] border-[1.5px] border-navy text-navy font-bold text-[15px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
Ver rutas completas → Ver rutas completas →
</a> </a>
</div> </div>
</section> </section>
<!-- Mercado laboral --> <!-- Mercado laboral -->
<section class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line"> <section aria-labelledby="mercado-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
<h2 id="mercado-title" class="sr-only">Preparado para el mercado laboral</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]"> <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
<div class="text-center px-3"> <div class="text-center px-3">
<div class="text-[34px] mb-3">🎯</div> <div class="text-[34px] mb-3" aria-hidden="true">🎯</div>
<h3 class="font-heading text-[18px] mb-2">Habilidades que piden</h3> <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> <p class="m-0 text-[14.5px] text-text leading-relaxed">Aprende lo que las empresas buscan hoy.</p>
</div> </div>
<div class="text-center px-3"> <div class="text-center px-3">
<div class="text-[34px] mb-3">💼</div> <div class="text-[34px] mb-3" aria-hidden="true">💼</div>
<h3 class="font-heading text-[18px] mb-2">Portfolio profesional</h3> <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> <p class="m-0 text-[14.5px] text-text leading-relaxed">Construye proyectos que se enseñan.</p>
</div> </div>
<div class="text-center px-3"> <div class="text-center px-3">
<div class="text-[34px] mb-3">🤝</div> <div class="text-[34px] mb-3" aria-hidden="true">🤝</div>
<h3 class="font-heading text-[18px] mb-2">Preparado para empleo</h3> <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> <p class="m-0 text-[14.5px] text-text leading-relaxed">Del aula al primer trabajo tech.</p>
</div> </div>

29
src/styles/global.css
View file

@ -2,16 +2,17 @@
@theme { @theme {
--color-navy: #13294b; --color-navy: #13294b;
--color-navy-soft: #1c3a63; --color-navy-soft: #1a3459;
--color-orange: #f47a20; --color-orange: #d46a18;
--color-orange-ink: #e26a12; --color-orange-bright: #f47a20;
--color-red: #e5241b; --color-orange-ink: #a85210;
--color-green: #22a05a; --color-red: #c42018;
--color-text: #4a5a72; --color-green: #1a8a48;
--color-text-muted: #8a97a8; --color-text: #3d4d63;
--color-text-muted: #5a6a80;
--color-paper: #ffffff; --color-paper: #ffffff;
--color-mist: #f7f9fc; --color-mist: #f7f9fc;
--color-line: rgba(19, 41, 75, 0.08); --color-line: rgba(19, 41, 75, 0.10);
--font-heading: "Space Grotesk", system-ui, sans-serif; --font-heading: "Space Grotesk", system-ui, sans-serif;
--font-body: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif;
@ -21,6 +22,18 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.animate-floaty,
.animate-twinkle,
.animate-twinkle-delay,
.animate-rise-in {
animation: none !important;
}
}
body { body {
font-family: var(--font-body); font-family: var(--font-body);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;