Inicio de proyecto
This commit is contained in:
+262
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Academia - IDE Consultores</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed-variant": "#005143",
|
||||
"on-background": "#191c1d",
|
||||
"inverse-surface": "#2e3132",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed": "#e3e2e2",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#002019",
|
||||
"tertiary-fixed-dim": "#c7c6c6",
|
||||
"on-primary-container": "#8bb6cb",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4",
|
||||
"secondary": "#006b59",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary-container": "#b0b0b0",
|
||||
"surface-container-low": "#f2f4f5",
|
||||
"inverse-on-surface": "#eff1f2",
|
||||
"on-primary-fixed": "#001f2a",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#1f4c5e",
|
||||
"surface-bright": "#f8fafb",
|
||||
"primary": "#003141",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"secondary-fixed": "#7df8d9",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed-dim": "#5edbbe",
|
||||
"on-tertiary-fixed": "#1a1c1c",
|
||||
"on-surface": "#191c1d",
|
||||
"on-tertiary-fixed-variant": "#464747",
|
||||
"primary-container": "#1a485a",
|
||||
"surface": "#f8fafb",
|
||||
"surface-container": "#eceeef",
|
||||
"tertiary-container": "#424343",
|
||||
"surface-tint": "#396477",
|
||||
"error": "#ba1a1a",
|
||||
"outline-variant": "#c1c7cc",
|
||||
"secondary-container": "#7df8d9",
|
||||
"on-surface-variant": "#41484c",
|
||||
"outline": "#71787c",
|
||||
"primary-fixed-dim": "#a1cde2",
|
||||
"background": "#f8fafb",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary": "#2c2d2d",
|
||||
"inverse-primary": "#a1cde2",
|
||||
"primary-fixed": "#bde9ff",
|
||||
"on-secondary-container": "#00725f",
|
||||
"surface-dim": "#d8dadb"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "24px",
|
||||
"xs": "4px",
|
||||
"base": "4px",
|
||||
"xl": "48px",
|
||||
"md": "16px",
|
||||
"margin": "32px",
|
||||
"sm": "8px",
|
||||
"lg": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Bebas Neue"],
|
||||
"body-md": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"body-lg": ["Inter"],
|
||||
"headline-xl": ["Bebas Neue"],
|
||||
"headline-lg": ["Bebas Neue"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["24px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400" }],
|
||||
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
|
||||
"body-sm": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
||||
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"headline-xl": ["48px", { "lineHeight": "1.1", "letterSpacing": "0.05em", "fontWeight": "400" }],
|
||||
"headline-lg": ["32px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400" }],
|
||||
"label-md": ["12px", { "lineHeight": "1", "fontWeight": "600" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.pattern-overlay {
|
||||
background-image: radial-gradient(#9E9E9E 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
opacity: 0.05;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md min-h-screen flex flex-col relative pt-16">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-surface dark:bg-surface-container-highest fixed top-0 w-full z-50 border-b border-outline-variant/30 dark:border-outline/30">
|
||||
<div class="flex justify-between items-center h-16 px-margin max-w-7xl mx-auto w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="md:hidden text-primary dark:text-primary-fixed-dim hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
<div class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-wider">IDE Consultores</div>
|
||||
</div>
|
||||
<!-- Desktop Nav -->
|
||||
<nav class="hidden md:flex gap-8 items-center">
|
||||
<a class="text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Inicio</a>
|
||||
<a class="text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Servicios</a>
|
||||
<a class="text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Nosotros</a>
|
||||
<a class="text-secondary dark:text-secondary-fixed font-bold hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Academia</a>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-DEFAULT font-label-md text-label-md hover:bg-primary-container transition-colors">CONTACTO</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Mobile Drawer (Hidden by default) -->
|
||||
<aside class="hidden fixed left-0 top-0 h-full w-80 bg-surface dark:bg-surface-container shadow-md z-[60] flex flex-col p-md gap-sm transition-all duration-300 ease-in-out">
|
||||
<div class="font-headline-lg text-headline-lg text-primary mb-6">IDE Consultores</div>
|
||||
<a class="flex items-center gap-3 p-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-all duration-300 ease-in-out font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">home</span> Inicio
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-all duration-300 ease-in-out font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">business_center</span> Servicios
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-all duration-300 ease-in-out font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">groups</span> Nosotros
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary rounded-full transition-all duration-300 ease-in-out font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">school</span> Academia
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-all duration-300 ease-in-out font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">mail</span> Contacto
|
||||
</a>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-grow w-full max-w-7xl mx-auto px-margin md:px-margin py-xl relative">
|
||||
<div class="pattern-overlay absolute inset-0 pointer-events-none"></div>
|
||||
<!-- Hero Section -->
|
||||
<section class="mb-xl relative z-10 text-center py-xl">
|
||||
<h1 class="font-headline-xl text-headline-xl text-primary mb-md">Formación Profesional</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">Capacitación corporativa de alto nivel diseñada para potenciar habilidades estratégicas y operativas en su organización.</p>
|
||||
</section>
|
||||
<!-- Search & Filter Bar -->
|
||||
<section class="mb-xl relative z-10">
|
||||
<div class="bg-surface rounded-DEFAULT border border-outline-variant/30 p-md flex flex-col md:flex-row gap-4 items-center shadow-sm">
|
||||
<div class="relative flex-grow w-full">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 transform -translate-y-1/2 text-outline">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-3 bg-surface-container-lowest border border-outline-variant rounded-DEFAULT focus:border-secondary focus:ring-1 focus:ring-secondary outline-none font-body-md text-body-md transition-colors" placeholder="Buscar programas, cursos o talleres..." type="text"/>
|
||||
</div>
|
||||
<div class="flex gap-4 w-full md:w-auto">
|
||||
<select class="flex-grow md:flex-none bg-surface-container-lowest border border-outline-variant rounded-DEFAULT px-4 py-3 focus:border-secondary focus:ring-1 focus:ring-secondary outline-none font-body-md text-body-md appearance-none">
|
||||
<option>Categoría</option>
|
||||
<option>Liderazgo</option>
|
||||
<option>Finanzas</option>
|
||||
<option>Operaciones</option>
|
||||
</select>
|
||||
<button class="bg-primary text-on-primary px-6 py-3 rounded-DEFAULT font-label-md text-label-md hover:bg-primary-container transition-colors whitespace-nowrap">BUSCAR</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Programs Grid -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter relative z-10 mb-xl">
|
||||
<!-- Card 1 -->
|
||||
<article class="bg-surface rounded-DEFAULT border border-outline-variant/30 border-t-4 border-t-primary overflow-hidden flex flex-col group hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="h-48 bg-surface-container-high relative">
|
||||
<img class="w-full h-full object-cover" data-alt="A modern corporate training room with a digital whiteboard and sleek executive chairs, bathed in bright, neutral daylight. The aesthetic is highly professional, clean, and minimalist, utilizing a color palette of whites, cool grays, and subtle primary blue accents to convey a sense of structured learning and corporate seriousness." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3eECSBiOA8MpdKj3c5S5hiS5JwGNAOfWirmfs6pjXE9pbubwo6380VMDxEJc98u7leVvlpYZRrQlNTFWw0DSERYizu34_kfxw2I0LKfiiQsXxwDwuVpFbZAoTbRJp5pmx5x7TBOY-RCnabINHfIsz20w6hzPUi1rl-cy1RSpCCsTRK7sypelqSFAimV8Q5pXCmS_pxdQsWlWSPjkh_h9gQebXJ7H8Cw8dWQGqbTUjKJ6Omd5qQOXS"/>
|
||||
<div class="absolute top-4 right-4 bg-tertiary px-3 py-1 rounded-DEFAULT font-label-md text-label-md text-on-tertiary">Avanzado</div>
|
||||
</div>
|
||||
<div class="p-lg flex-grow flex flex-col">
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span class="bg-surface-container-highest text-primary font-label-md text-label-md px-2 py-1 rounded-DEFAULT">Liderazgo</span>
|
||||
<span class="bg-surface-container-highest text-primary font-label-md text-label-md px-2 py-1 rounded-DEFAULT">Presencial</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-2">Estrategia Directiva</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-6 flex-grow">Desarrollo de habilidades para la toma de decisiones complejas en entornos de alta incertidumbre empresarial.</p>
|
||||
<div class="pt-4 border-t border-outline-variant/30 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">calendar_month</span>
|
||||
<span class="font-label-md text-label-md">Inicia: 15 Oct</span>
|
||||
</div>
|
||||
<a class="text-secondary font-label-md text-label-md hover:text-secondary-container transition-colors flex items-center gap-1" href="#">VER DETALLES <span class="material-symbols-outlined text-sm">arrow_forward</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Card 2 -->
|
||||
<article class="bg-surface rounded-DEFAULT border border-outline-variant/30 border-t-4 border-t-secondary overflow-hidden flex flex-col group hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="h-48 bg-surface-container-high relative">
|
||||
<img class="w-full h-full object-cover" data-alt="A close-up shot of financial charts and graphs displayed on a sleek tablet resting on a pristine white conference table. The setting is a bright, modern corporate office with a light-mode aesthetic, utilizing clean lines, subtle teal secondary accents, and a serious, data-driven mood." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-WJrgiGavI8aqahWS7gUV59ZcpFQUgO8MPatgRx7GVPgn2b_cbTFv1oGbGOCJ6Urd0xZkCoOdC_lXt_PaPG8ukoRk5u8SpRB0Bl_Of4DkKR-IMvLPM8bP8xLeSIDmF2OycJuTtadKokl6zF6Xe578VWcxiZGdI0SxlE9g3mkFS5pYqd8c6Ok4eXnvKCfiNSQmbpJqxGHCNIrOTnKNm8Gra4dNhDxSCGl7QwBjsFn1FvKysVBVN-sD"/>
|
||||
<div class="absolute top-4 right-4 bg-tertiary px-3 py-1 rounded-DEFAULT font-label-md text-label-md text-on-tertiary">Intermedio</div>
|
||||
</div>
|
||||
<div class="p-lg flex-grow flex flex-col">
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span class="bg-surface-container-highest text-primary font-label-md text-label-md px-2 py-1 rounded-DEFAULT">Finanzas</span>
|
||||
<span class="bg-surface-container-highest text-primary font-label-md text-label-md px-2 py-1 rounded-DEFAULT">Online</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-2">Análisis Financiero</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-6 flex-grow">Herramientas prácticas para la evaluación de proyectos de inversión y optimización de recursos corporativos.</p>
|
||||
<div class="pt-4 border-t border-outline-variant/30 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">calendar_month</span>
|
||||
<span class="font-label-md text-label-md">Inicia: 22 Oct</span>
|
||||
</div>
|
||||
<a class="text-secondary font-label-md text-label-md hover:text-secondary-container transition-colors flex items-center gap-1" href="#">VER DETALLES <span class="material-symbols-outlined text-sm">arrow_forward</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Card 3 -->
|
||||
<article class="bg-surface rounded-DEFAULT border border-outline-variant/30 border-t-4 border-t-primary overflow-hidden flex flex-col group hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="h-48 bg-surface-container-high relative">
|
||||
<img class="w-full h-full object-cover" data-alt="A minimalist workspace showing a laptop, notebook, and a cup of coffee on a light gray desk. The lighting is soft and diffused, creating a calm, focused learning environment. The color palette emphasizes corporate stability with deep blacks, crisp whites, and muted blue tones, reflecting a professional consulting aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXp7yMZt_T_LiaOZR4Sh2O5iPXZegavk-gdooQQT1Vj4q1tk0-hE4Ca9CDRXAGTkemvoKoV-MsE50yafIaA-R4JCyUhlmQi7NxKUBQ_ekItfAe6IZwTr9Rhapm7uX2zDboAEVX9I946XuoBLqtrRf6KXfCdFbd_4iNANXsYrcQxE13eqy4Z9ogb61Dqe-ZrQwYX3IdD6JAkkDzX4tnPxuFlynN1plbqN9s7i_BOV1wpzm4rUCCs6_L"/>
|
||||
<div class="absolute top-4 right-4 bg-tertiary px-3 py-1 rounded-DEFAULT font-label-md text-label-md text-on-tertiary">Básico</div>
|
||||
</div>
|
||||
<div class="p-lg flex-grow flex flex-col">
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span class="bg-surface-container-highest text-primary font-label-md text-label-md px-2 py-1 rounded-DEFAULT">Operaciones</span>
|
||||
<span class="bg-surface-container-highest text-primary font-label-md text-label-md px-2 py-1 rounded-DEFAULT">Híbrido</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-2">Gestión de Procesos</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-6 flex-grow">Fundamentos metodológicos para la mejora continua y la eficiencia operativa en organizaciones de servicios.</p>
|
||||
<div class="pt-4 border-t border-outline-variant/30 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">calendar_month</span>
|
||||
<span class="font-label-md text-label-md">Inicia: 05 Nov</span>
|
||||
</div>
|
||||
<a class="text-secondary font-label-md text-label-md hover:text-secondary-container transition-colors flex items-center gap-1" href="#">VER DETALLES <span class="material-symbols-outlined text-sm">arrow_forward</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-primary dark:bg-primary-container w-full mt-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center py-xl px-margin max-w-7xl mx-auto w-full gap-8">
|
||||
<div class="font-headline-md text-headline-md text-on-primary">IDE Consultores</div>
|
||||
<nav class="flex flex-wrap justify-center gap-6">
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80 font-body-sm text-body-sm" href="#">Servicios</a>
|
||||
<a class="text-secondary-fixed dark:text-secondary-fixed-dim hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80 font-body-sm text-body-sm" href="#">Academia</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80 font-body-sm text-body-sm" href="#">Nosotros</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80 font-body-sm text-body-sm" href="#">Privacidad</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80 font-body-sm text-body-sm" href="#">Contacto</a>
|
||||
</nav>
|
||||
<div class="font-body-sm text-body-sm text-on-primary/80 dark:text-on-primary-container/80">
|
||||
© 2024 IDE Consultores. Todos los derechos reservados.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user