INICIO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instituto Superior de Tecnología Automotriz</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)),
url('https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?q=80&w=2000&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-slate-50 text-slate-900">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-slate-900/90 backdrop-blur-md text-white border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center space-x-2">
<i data-lucide="settings" class="w-8 h-8 text-orange-500 animate-spin-slow"></i>
<span class="text-2xl font-bold tracking-tighter">ISTA <span class="text-orange-500">.</span></span>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex space-x-8 items-center font-medium">
<a href="#inicio" class="hover:text-orange-500 transition-colors">Inicio</a>
<a href="#carreras" class="hover:text-orange-500 transition-colors">Carreras</a>
<a href="#infraestructura" class="hover:text-orange-500 transition-colors">Infraestructura</a>
<a href="#admisiones" class="bg-orange-500 hover:bg-orange-600 px-5 py-2 rounded-full transition-all">Admisiones 2024</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="menu-btn" class="p-2"><i data-lucide="menu"></i></button>
</div>
</div>
</div>
<!-- Mobile Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-slate-900 px-4 pt-2 pb-6 space-y-4 border-t border-white/10">
<a href="#inicio" class="block text-lg">Inicio</a>
<a href="#carreras" class="block text-lg">Carreras</a>
<a href="#infraestructura" class="block text-lg">Infraestructura</a>
<a href="#admisiones" class="block text-lg text-orange-500 font-bold">Admisiones 2024</a>
</div>
</nav>
<!-- Hero Section -->
<header id="inicio" class="hero-gradient min-h-screen flex items-center pt-20 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div class="max-w-3xl">
<div class="inline-flex items-center space-x-2 bg-orange-500/20 text-orange-400 px-3 py-1 rounded-full text-sm font-semibold mb-6 border border-orange-500/30">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
<span>Inscripciones Abiertas</span>
</div>
<h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">
Forjando el Futuro de la <span class="text-orange-500">Ingeniería Automotriz</span>
</h1>
<p class="text-xl text-slate-300 mb-10 max-w-xl">
Formamos especialistas capaces de dominar las tecnologías más avanzadas en mecánica de precisión, electrónica y movilidad eléctrica.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition-transform hover:scale-105 shadow-lg shadow-orange-500/25">
Ver Carreras
</button>
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white border border-white/30 px-8 py-4 rounded-lg font-bold text-lg transition-all">
Solicitar Información
</button>
</div>
</div>
</div>
</header>
<!-- Stats Section -->
<section class="py-12 bg-white border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<p class="text-4xl font-bold text-slate-900">+25</p>
<p class="text-slate-500 uppercase tracking-widest text-xs mt-1">Años de Trayectoria</p>
</div>
<div>
<p class="text-4xl font-bold text-slate-900">5k</p>
<p class="text-slate-500 uppercase tracking-widest text-xs mt-1">Egresados</p>
</div>
<div>
<p class="text-4xl font-bold text-slate-900">12</p>
<p class="text-slate-500 uppercase tracking-widest text-xs mt-1">Labs Especializados</p>
</div>
<div>
<p class="text-4xl font-bold text-slate-900">100%</p>
<p class="text-slate-500 uppercase tracking-widest text-xs mt-1">Prácticas Reales</p>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section id="carreras" class="py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Especializaciones Técnicas</h2>
<div class="h-1.5 w-20 bg-orange-500 mx-auto rounded-full"></div>
<p class="mt-6 text-slate-600 max-w-2xl mx-auto">Diseñamos programas académicos alineados con las demandas de la industria global.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Program 1 -->
<div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group">
<div class="w-14 h-14 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-600 group-hover:text-white transition-colors">
<i data-lucide="cpu"></i>
</div>
<h3 class="text-xl font-bold mb-3">Mecatrónica Automotriz</h3>
<p class="text-slate-600 mb-6">Integración de sistemas electrónicos, control computarizado y diagnóstico avanzado de motores.</p>
<ul class="space-y-3 mb-8 text-sm text-slate-500">
<li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-green-500"></i> Sistemas de Gestión de Motor</li>
<li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-green-500"></i> Redes CAN BUS y LIN BUS</li>
</ul>
<a href="#" class="text-orange-600 font-semibold flex items-center hover:translate-x-2 transition-transform">
Ver plan de estudios <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i>
</a>
</div>
<!-- Program 2 -->
<div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group">
<div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">
<i data-lucide="zap"></i>
</div>
<h3 class="text-xl font-bold mb-3">Movilidad Eléctrica</h3>
<p class="text-slate-600 mb-6">Especialización en vehículos híbridos y eléctricos de alta potencia y sistemas de baterías.</p>
<ul class="space-y-3 mb-8 text-sm text-slate-500">
<li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-green-500"></i> Propulsión Eléctrica</li>
<li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-green-500"></i> Seguridad en Alta Tensión</li>
</ul>
<a href="#" class="text-blue-600 font-semibold flex items-center hover:translate-x-2 transition-transform">
Ver plan de estudios <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i>
</a>
</div>
<!-- Program 3 -->
<div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group">
<div class="w-14 h-14 bg-slate-100 text-slate-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-900 group-hover:text-white transition-colors">
<i data-lucide="wrench"></i>
</div>
<h3 class="text-xl font-bold mb-3">Gestión de Talleres</h3>
<p class="text-slate-600 mb-6">Formación en liderazgo, logística de repuestos y administración de servicios de post-venta.</p>
<ul class="space-y-3 mb-8 text-sm text-slate-500">
<li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-green-500"></i> Calidad de Servicio</li>
<li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-green-500"></i> Marketing Automotriz</li>
</ul>
<a href="#" class="text-slate-900 font-semibold flex items-center hover:translate-x-2 transition-transform">
Ver plan de estudios <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Infra Section -->
<section id="infraestructura" class="py-24 bg-slate-900 text-white overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center gap-16">
<div class="lg:w-1/2">
<h2 class="text-4xl font-bold mb-6 leading-tight">Tecnología de Punta para un <span class="text-orange-500">Aprendizaje Real</span></h2>
<p class="text-slate-400 text-lg mb-8">Nuestros talleres están equipados con los mismos escáneres, bancos de prueba y herramientas que utilizan las terminales automotrices líderes.</p>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div class="mt-1 bg-orange-500/20 p-2 rounded-lg text-orange-500">
<i data-lucide="microscope" class="w-6 h-6"></i>
</div>
<div>
<h4 class="text-xl font-bold">Laboratorio de Inyección</h4>
<p class="text-slate-400">Banco de pruebas para inyectores GDI y Common Rail de última generación.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="mt-1 bg-orange-500/20 p-2 rounded-lg text-orange-500">
<i data-lucide="monitor" class="w-6 h-6"></i>
</div>
<div>
<h4 class="text-xl font-bold">Simuladores Digitales</h4>
<p class="text-slate-400">Software de diagnóstico avanzado para análisis de fallas en entornos virtuales.</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 relative">
<div class="grid grid-cols-2 gap-4">
<img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=800" class="rounded-2xl h-64 w-full object-cover shadow-2xl" alt="Taller Automotriz">
<img src="https://images.unsplash.com/photo-1530046339160-ce3e530c7d2f?q=80&w=800" class="rounded-2xl h-64 w-full object-cover mt-12 shadow-2xl" alt="Mecánico trabajando">
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-white border-t border-slate-200 pt-20 pb-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-12 mb-16">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center space-x-2 mb-6">
<i data-lucide="settings" class="w-8 h-8 text-orange-500"></i>
<span class="text-2xl font-bold">ISTA.</span>
</div>
<p class="text-slate-500">Líderes en formación tecnológica automotriz en la región. Innovación y pasión por la mecánica.</p>
</div>
<div>
<h4 class="font-bold mb-6">Navegación</h4>
<ul class="space-y-4 text-slate-500">
<li><a href="#" class="hover:text-orange-500 transition-colors">Admisiones</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Plan de Estudios</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Extensión Universitaria</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Bolsa de Empleo</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-6">Contacto</h4>
<ul class="space-y-4 text-slate-500">
<li class="flex items-center"><i data-lucide="map-pin" class="w-4 h-4 mr-2"></i> Av. de la Tecnología 450, Ciudad</li>
<li class="flex items-center"><i data-lucide="phone" class="w-4 h-4 mr-2"></i> +54 (11) 4567-8900</li>
<li class="flex items-center"><i data-lucide="mail" class="w-4 h-4 mr-2"></i> informes@ista-edu.com</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-6">Newsletter</h4>
<p class="text-slate-500 text-sm mb-4">Recibe noticias sobre tecnología y eventos.</p>
<div class="flex">
<input type="email" placeholder="Tu email" class="bg-slate-100 border-none rounded-l-lg px-4 py-2 w-full focus:ring-2 focus:ring-orange-500 outline-none">
<button class="bg-orange-500 text-white px-4 py-2 rounded-r-lg"><i data-lucide="send" class="w-5 h-5"></i></button>
</div>
</div>
</div>
<div class="border-t border-slate-100 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-slate-400 text-sm">© 2024 Instituto Superior de Tecnología Automotriz. Todos los derechos reservados.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-slate-400 hover:text-orange-500 transition-colors"><i data-lucide="facebook"></i></a>
<a href="#" class="text-slate-400 hover:text-orange-500 transition-colors"><i data-lucide="instagram"></i></a>
<a href="#" class="text-slate-400 hover:text-orange-500 transition-colors"><i data-lucide="linkedin"></i></a>
</div>
</div>
</div>
</footer>
<script>
// Initialize Lucide Icons
lucide.createIcons();
// Mobile Menu Toggle
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scroll for anchors
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
mobileMenu.classList.add('hidden');
});
});
</script>
</body>
</html>