devlab/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: landing page inicial para devlab.lat

Browse Source 
- Hero con animación de partículas y efecto typewriter
- Sección de servicios con animación scroll-reveal
- Estadísticas animadas con contadores progresivos
- Galería de proyectos con overlay hover
- Sección de contacto con enlaces
- Footer completo
- Diseño responsive mobile-first
- Soporte prefers-reduced-motion
This commit is contained in:
DevLab Bot
2026-06-11 17:55:13 -04:00
commit 9f708cc983
4 changed files with 1381 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
index.html Normal file
View File

@@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevLab.lat — Laboratorio de Desarrollo</title>
<meta name="description" content="DevLab.lat — Laboratorio de desarrollo web moderno. Creamos experiencias digitales innovadoras con tecnología de punta.">
<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=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="Navegación principal">
<div class="nav-container">
<a href="#" class="logo" aria-label="DevLab.lat inicio">DevLab<span>.lat</span></a>
<button class="hamburger" aria-label="Abrir menú" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" role="menubar">
<li role="none"><a href="#hero" role="menuitem">Inicio</a></li>
<li role="none"><a href="#servicios" role="menuitem">Servicios</a></li>
<li role="none"><a href="#stats" role="menuitem">Estadísticas</a></li>
<li role="none"><a href="#proyectos" role="menuitem">Proyectos</a></li>
<li role="none"><a href="#contacto" role="menuitem">Contacto</a></li>
</ul>
</div>
</nav>
<section id="hero" class="hero">
<canvas id="particles-canvas" aria-hidden="true"></canvas>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1 class="hero-title">DevLab<span>.lat</span></h1>
<p class="typewriter" data-text="Laboratorio de desarrollo web moderno" aria-label="Laboratorio de desarrollo web moderno"></p>
<p class="hero-desc">Creamos experiencias digitales innovadoras con tecnolog&iacute;a de punta.</p>
<div class="hero-actions">
<a href="#servicios" class="btn btn-primary">Descubrir</a>
<a href="#contacto" class="btn btn-secondary">Contactar</a>
</div>
</div>
<div class="scroll-indicator" aria-hidden="true">
<span></span>
</div>
</section>
<section id="servicios" class="section servicios">
<div class="section-header reveal">
<h2>Servicios</h2>
<p class="section-sub">Transformamos ideas en productos digitales</p>
</div>
<div class="services-grid">
<article class="service-card reveal" data-delay="0">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M12 6v12M6 12h12"/><rect x="2" y="2" width="20" height="20" rx="3"/>
</svg>
</div>
<h3>Desarrollo Web</h3>
<p>Aplicaciones web modernas con las mejores tecnolog&iacute;as del ecosistema frontend y backend.</p>
</article>
<article class="service-card reveal" data-delay="100">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<h3>UI/UX Design</h3>
<p>Interfaces intuitivas y experiencias de usuario memorables centradas en las personas.</p>
</article>
<article class="service-card reveal" data-delay="200">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
</div>
<h3>Optimizaci&oacute;n</h3>
<p>Rendimiento, SEO y accesibilidad para que tu producto llegue m&aacute;s lejos y m&aacute;s r&aacute;pido.</p>
</article>
</div>
</section>
<section id="stats" class="section stats">
<div class="section-header reveal">
<h2>En n&uacute;meros</h2>
<p class="section-sub">Nuestra trayectoria en datos</p>
</div>
<div class="stats-grid">
<div class="stat-item reveal" data-delay="0">
<span class="stat-number" data-target="150" data-suffix="+">0</span>
<span class="stat-label">Proyectos entregados</span>
</div>
<div class="stat-item reveal" data-delay="100">
<span class="stat-number" data-target="48" data-suffix="">0</span>
<span class="stat-label">Clientes satisfechos</span>
</div>
<div class="stat-item reveal" data-delay="200">
<span class="stat-number" data-target="12" data-suffix="">0</span>
<span class="stat-label">A&ntilde;os de experiencia</span>
</div>
<div class="stat-item reveal" data-delay="300">
<span class="stat-number" data-target="99" data-suffix="%">0</span>
<span class="stat-label">Satisfacci&oacute;n</span>
</div>
</div>
</section>
<section id="proyectos" class="section proyectos">
<div class="section-header reveal">
<h2>Proyectos</h2>
<p class="section-sub">Algunos de nuestros trabajos recientes</p>
</div>
<div class="proyectos-grid">
<article class="proyecto-card reveal" data-delay="0">
<div class="proyecto-img">
<div class="proyecto-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M3 3h18v18H3zM9 3v18M3 9h18"/>
</svg>
</div>
<div class="proyecto-overlay">
<h3>Nebula Dashboard</h3>
<p>Panel de an&aacute;lisis en tiempo real</p>
</div>
</div>
</article>
<article class="proyecto-card reveal" data-delay="100">
<div class="proyecto-img">
<div class="proyecto-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
</svg>
</div>
<div class="proyecto-overlay">
<h3>Chronos App</h3>
<p>Gesti&oacute;n de tiempo inteligente</p>
</div>
</div>
</article>
<article class="proyecto-card reveal" data-delay="200">
<div class="proyecto-img">
<div class="proyecto-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<div class="proyecto-overlay">
<h3>Void Platform</h3>
<p>Infraestructura cloud escalable</p>
</div>
</div>
</article>
</div>
</section>
<section id="contacto" class="section contacto">
<div class="contacto-content reveal">
<h2>&iquest;Listo para construir algo incre&iacute;ble?</h2>
<p>Trabajemos juntos para llevar tu idea al siguiente nivel.</p>
<div class="contacto-links">
<a href="mailto:hola@devlab.lat" class="btn btn-primary contact-btn" aria-label="Enviar correo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/>
</svg>
hola@devlab.lat
</a>
<a href="https://github.com/devlab" target="_blank" rel="noopener noreferrer" class="btn btn-secondary contact-btn" aria-label="GitHub">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
</svg>
GitHub
</a>
<a href="https://linkedin.com/company/devlab" target="_blank" rel="noopener noreferrer" class="btn btn-secondary contact-btn" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
LinkedIn
</a>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-content">
<div class="footer-brand">
<a href="#" class="logo">DevLab<span>.lat</span></a>
<p>Laboratorio de desarrollo web moderno.</p>
</div>
<div class="footer-links">
<h4>Navegaci&oacute;n</h4>
<ul>
<li><a href="#hero">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#stats">Estad&iacute;sticas</a></li>
<li><a href="#proyectos">Proyectos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
<div class="footer-tech">
<h4>Stack</h4>
<ul>
<li>HTML5 &amp; CSS3</li>
<li>JavaScript ES2024</li>
<li>IntersectionObserver</li>
<li>Canvas API</li>
<li>CSS Container Queries</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 DevLab.lat &mdash; Todos los derechos reservados.</p>
</div>
</footer>
<script src="main.js" defer></script>
</body>
</html>