fix: WCAG 2.2 AA audit — contrast, a11y, touch targets, responsive
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:
parent
92956daa2a
commit
f7a853dded
5 changed files with 125 additions and 92 deletions
|
|
@ -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]">
|
||||
<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>
|
||||
</div>
|
||||
<span>© 2026 · Formación FP · España</span>
|
||||
<nav aria-label="Enlaces legales" class="flex items-center gap-4">
|
||||
<span>© 2026 · Formación FP · España</span>
|
||||
</nav>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<a href="/" class="flex items-center gap-3 no-underline">
|
||||
<img src="/ornito_logo.png" alt="Ornitonautas" class="w-[42px] h-[42px] object-contain" />
|
||||
<a href="/" class="flex items-center gap-3 no-underline min-h-[44px]">
|
||||
<img src="/ornito_logo.png" alt="Ornitonautas — Aprende. Practica. Despega." class="w-[42px] h-[42px] object-contain" />
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<nav 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="/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 profesionales</a>
|
||||
<a href="/recursos/" class={`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="/sobre-nosotros/" class={`transition-colors hover:text-orange ${currentPath.includes('/sobre-nosotros') ? 'text-orange' : 'text-text'}`}>Sobre nosotros</a>
|
||||
<nav aria-label="Navegación principal" class="hidden lg:flex items-center gap-7 text-[14px] font-semibold">
|
||||
<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={`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={`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={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/recursos') ? 'text-orange' : 'text-text'}`}>Recursos</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={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/sobre-nosotros') ? 'text-orange' : 'text-text'}`}>Sobre nosotros</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">
|
||||
<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="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
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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-expanded="false"
|
||||
aria-controls="mobile-menu"
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="lg:hidden hidden px-4 sm:px-6 py-4 border-b border-line" id="mobile-menu">
|
||||
<nav class="flex flex-col gap-2 text-sm font-semibold">
|
||||
<a href="/formacion/" class="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="/aprendizaje/" class="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="/comunidad/" class="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="/contacto/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
|
||||
<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-1 text-sm font-semibold">
|
||||
<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="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="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas profesionales</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="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Comunidad</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="min-h-[44px] flex items-center 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'));
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -13,58 +13,58 @@ import Footer from '../../components/Footer.astro';
|
|||
<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%)]">
|
||||
<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>
|
||||
<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">
|
||||
<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>.
|
||||
</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.
|
||||
</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">
|
||||
<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 min-h-[44px] py-[13px] 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 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>
|
||||
<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" aria-hidden="true">✦</span>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- Official FP in Spain -->
|
||||
<section class="px-10 py-16 border-t border-line">
|
||||
<div class="flex items-end justify-between mb-7">
|
||||
<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 flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7">
|
||||
<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>
|
||||
</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 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>
|
||||
<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" aria-hidden="true"></></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>
|
||||
<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" aria-hidden="true">◉</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>
|
||||
<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" aria-hidden="true">▤</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>
|
||||
|
|
@ -74,50 +74,51 @@ import Footer from '../../components/Footer.astro';
|
|||
</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>
|
||||
<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 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>
|
||||
<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="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="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="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="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="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="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="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="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">
|
||||
<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 →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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="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>
|
||||
<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>
|
||||
<div class="text-[34px] mb-3" aria-hidden="true">💼</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>
|
||||
<div class="text-[34px] mb-3" aria-hidden="true">🤝</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>
|
||||
|
|
|
|||
|
|
@ -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]">
|
||||
🚀 Formación oficial de FP · España
|
||||
</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>.
|
||||
</h1>
|
||||
<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.
|
||||
</p>
|
||||
<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 →
|
||||
</a>
|
||||
<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 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>
|
||||
<span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
|
||||
<span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span>
|
||||
<img src="/ornito_logo.png" alt="" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
|
||||
<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" aria-hidden="true">✦</span>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</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 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">
|
||||
<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>
|
||||
<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" aria-hidden="true"></></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>
|
||||
<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">
|
||||
<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>
|
||||
<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" aria-hidden="true">◉</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>
|
||||
<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">
|
||||
<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>
|
||||
<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" aria-hidden="true">▤</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>
|
||||
|
|
@ -74,50 +74,51 @@ import Footer from '../components/Footer.astro';
|
|||
</section>
|
||||
|
||||
<!-- Rutas de aprendizaje -->
|
||||
<section class="px-4 sm:px-6 lg:px-16 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>
|
||||
<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 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>
|
||||
<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="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="text-[13px] text-text-muted">Lógica y programación</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="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="text-[13px] text-text-muted">Web, sistemas o datos</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="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="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">
|
||||
<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 →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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="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>
|
||||
<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>
|
||||
<div class="text-[34px] mb-3" aria-hidden="true">💼</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>
|
||||
<div class="text-[34px] mb-3" aria-hidden="true">🤝</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>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,17 @@
|
|||
|
||||
@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-navy-soft: #1a3459;
|
||||
--color-orange: #d46a18;
|
||||
--color-orange-bright: #f47a20;
|
||||
--color-orange-ink: #a85210;
|
||||
--color-red: #c42018;
|
||||
--color-green: #1a8a48;
|
||||
--color-text: #3d4d63;
|
||||
--color-text-muted: #5a6a80;
|
||||
--color-paper: #ffffff;
|
||||
--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-body: "Manrope", system-ui, sans-serif;
|
||||
|
|
@ -21,6 +22,18 @@ html {
|
|||
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 {
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue