Inicio de proyecto
This commit is contained in:
+275
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>IDE Consultores - Consultoría Profesional</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>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.material-symbols-outlined.filled {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
/* Pattern Overlay */
|
||||
.brand-pattern {
|
||||
background-image: radial-gradient(circle at 2px 2px, rgba(26, 72, 90, 0.05) 2px, transparent 0);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md antialiased selection:bg-secondary-container selection:text-on-secondary-container">
|
||||
<!-- 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 flat no shadows">
|
||||
<div class="flex justify-between items-center h-16 px-margin max-w-7xl mx-auto w-full">
|
||||
<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>
|
||||
<!-- Desktop Nav -->
|
||||
<nav class="hidden md:flex gap-lg items-center">
|
||||
<a class="text-secondary dark:text-secondary-fixed font-bold font-body-md text-body-md hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200" href="#">Inicio</a>
|
||||
<a class="text-on-surface dark:text-on-surface-variant font-body-md text-body-md hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200" href="#">Servicios</a>
|
||||
<a class="text-on-surface dark:text-on-surface-variant font-body-md text-body-md hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200" href="#">Nosotros</a>
|
||||
<a class="text-on-surface dark:text-on-surface-variant font-body-md text-body-md hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200" href="#">Academia</a>
|
||||
</nav>
|
||||
<button class="hidden md:flex items-center justify-center bg-primary text-on-primary font-label-md text-label-md px-lg py-sm rounded hover:bg-primary-container transition-colors active:scale-95 duration-200">
|
||||
CONTACTO
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Mobile Navigation Drawer (Hidden by default, structure provided) -->
|
||||
<aside class="hidden bg-surface dark:bg-surface-container fixed left-0 top-0 h-full w-80 shadow-md transition-all duration-300 ease-in-out z-[60] flex flex-col p-md gap-sm" id="nav-drawer">
|
||||
<div class="font-headline-lg text-headline-lg text-primary mb-xl">IDE Consultores</div>
|
||||
<a class="flex items-center gap-md px-md py-sm bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary rounded-full font-label-md text-label-md hover:bg-surface-container-high dark:hover:bg-surface-container-highest" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
Inicio
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full" href="#">
|
||||
<span class="material-symbols-outlined">business_center</span>
|
||||
Servicios
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full" href="#">
|
||||
<span class="material-symbols-outlined">groups</span>
|
||||
Nosotros
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full" href="#">
|
||||
<span class="material-symbols-outlined">school</span>
|
||||
Academia
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant font-label-md text-label-md hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full" href="#">
|
||||
<span class="material-symbols-outlined">mail</span>
|
||||
Contacto
|
||||
</a>
|
||||
</aside>
|
||||
<main class="pt-16">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-[80vh] flex items-center justify-center brand-pattern px-margin overflow-hidden bg-surface-bright">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-surface-bright z-0"></div>
|
||||
<div class="relative z-10 max-w-7xl mx-auto w-full grid md:grid-cols-12 gap-gutter items-center">
|
||||
<div class="md:col-span-7 flex flex-col gap-lg">
|
||||
<span class="inline-flex items-center px-md py-xs rounded bg-surface-container border border-outline-variant/30 text-primary font-label-md text-label-md w-fit">
|
||||
Consultoría Estratégica
|
||||
</span>
|
||||
<h1 class="font-headline-xl text-headline-xl text-primary">
|
||||
Transformamos <br/>
|
||||
<span class="text-secondary">Visión en Realidad</span> <br/>
|
||||
con Estabilidad y Tenacidad
|
||||
</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
||||
Aportamos soluciones corporativas sólidas y estrategias de progreso para empresas que buscan liderar su sector. Nuestro enfoque combina análisis riguroso con ejecución precisa.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-md mt-sm">
|
||||
<button class="bg-primary text-on-primary font-label-md text-label-md px-xl py-md rounded hover:bg-primary-container transition-colors shadow-[0_8px_24px_rgba(26,72,90,0.1)]">
|
||||
Descubre Nuestros Servicios
|
||||
</button>
|
||||
<button class="bg-surface text-primary border border-primary/20 font-label-md text-label-md px-xl py-md rounded hover:bg-surface-container transition-colors">
|
||||
Conoce Nuestra Historia
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-5 relative mt-xl md:mt-0">
|
||||
<div class="aspect-square bg-surface border border-outline-variant/30 rounded p-sm relative z-10">
|
||||
<img class="w-full h-full object-cover rounded opacity-90 grayscale hover:grayscale-0 transition-all duration-500" data-alt="A highly professional corporate scene showing two consultants analyzing data on a large transparent display in a modern, well-lit office. The lighting is high-key, bright, and optimistic, creating a light-mode aesthetic. The color palette features crisp whites, subtle grays, with strong accents of deep petrol blue and vibrant teal. The mood is serious, forward-thinking, and analytical, conveying stability and progress." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAK3sDkzf4i0MaObf4EOLNuUOn4LQlYL4kup24fROYn1m3T_6sGNG62fmWv7bWfcMeZD9OpWprT2r16eEgk1BYCA_pIn4ahJ9_T5cpM9B_GtVRzt8oWzmn2uOzygFA0vj0vX9XKOXFYQk5LvVAROLyqtYUcLYhjSJCDCCI3144_F3E-cm-SCcb5xDTmycfHgOFQFWYxC5Y2-b7ZFwb6VE9FbYyrhwGTtNtEQRr8gi502-UV64WU_yCZ"/>
|
||||
</div>
|
||||
<!-- Decorative Element -->
|
||||
<div class="absolute -bottom-lg -right-lg w-full h-full bg-secondary/10 rounded z-0 -rotate-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Services Bento Grid -->
|
||||
<section class="py-xl px-margin bg-surface max-w-7xl mx-auto w-full">
|
||||
<div class="flex flex-col gap-sm mb-xl">
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary">Nuestros Servicios</h2>
|
||||
<div class="h-1 w-16 bg-secondary rounded"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
||||
<!-- Service Card 1 -->
|
||||
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant/30 rounded p-lg flex flex-col justify-between hover:border-secondary transition-colors group relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-primary"></div>
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-secondary text-4xl mb-md">analytics</span>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-sm">Consultoría Financiera</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Análisis profundo y estrategias de optimización para asegurar la estabilidad económica y el crecimiento sostenido de su corporación a largo plazo.</p>
|
||||
</div>
|
||||
<button class="mt-lg flex items-center gap-sm text-primary font-label-md text-label-md group-hover:text-secondary transition-colors w-fit">
|
||||
Leer más <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Service Card 2 -->
|
||||
<div class="md:col-span-4 bg-surface-container-lowest border border-outline-variant/30 rounded p-lg flex flex-col justify-between hover:border-secondary transition-colors group relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-secondary"></div>
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-secondary text-4xl mb-md">group_work</span>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-sm">Desarrollo Organizacional</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Estructuramos equipos de alto rendimiento alineados con los objetivos corporativos.</p>
|
||||
</div>
|
||||
<button class="mt-lg flex items-center gap-sm text-primary font-label-md text-label-md group-hover:text-secondary transition-colors w-fit">
|
||||
Leer más <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Service Card 3 -->
|
||||
<div class="md:col-span-4 bg-surface-container-lowest border border-outline-variant/30 rounded p-lg flex flex-col justify-between hover:border-secondary transition-colors group relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-secondary"></div>
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-secondary text-4xl mb-md">gavel</span>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-sm">Asesoría Legal</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Protección jurídica integral y cumplimiento normativo para operaciones seguras.</p>
|
||||
</div>
|
||||
<button class="mt-lg flex items-center gap-sm text-primary font-label-md text-label-md group-hover:text-secondary transition-colors w-fit">
|
||||
Leer más <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Service Card 4 -->
|
||||
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant/30 rounded p-lg flex flex-col justify-between hover:border-secondary transition-colors group relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-primary"></div>
|
||||
<div class="flex flex-col md:flex-row gap-lg">
|
||||
<div class="flex-1">
|
||||
<span class="material-symbols-outlined text-secondary text-4xl mb-md">strategy</span>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-sm">Estrategia de Mercado</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Posicionamiento de marca y análisis competitivo para capturar nuevas oportunidades de negocio con tenacidad y visión de futuro.</p>
|
||||
</div>
|
||||
<div class="w-full md:w-48 h-32 bg-surface-container rounded bg-cover bg-center" data-alt="Abstract representation of market growth and strategy, featuring upward trending graphs made of clean, glowing teal geometric lines over a soft white background. The aesthetic is extremely minimalist, corporate, and modern, using the brand's petrol blue and teal palette." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDzcn78Ti9peoYyhjjWMBAejD8u_eBe6aS82qOv0kI3e_FZlTex8MBvtLZMVe1Z54VVTltb7zFVTnBnB77tE6ySimrNDoH8C96UNAm0Jf2TSZUJAG1hobdVRAc7mTdK6lSVGPQGjC112Qns1zEnvJ3mx5uT1pLashJkMYE1veTTkK3IYLRffay5SMVk9wmDM0fASeiRo_cVt7O4G8vuaA447p8mB2EMZB-E6DabkC68Wq8isawNCx82')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-primary dark:bg-primary-container w-full bottom-0 flat no shadows border-t border-primary-container">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center py-xl px-margin max-w-7xl mx-auto w-full gap-lg">
|
||||
<div class="font-headline-md text-headline-md text-on-primary">
|
||||
IDE Consultores
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-md md:gap-lg">
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 font-body-sm text-body-sm hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80" href="#">Servicios</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 font-body-sm text-body-sm hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80" href="#">Academia</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 font-body-sm text-body-sm hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80" href="#">Nosotros</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 font-body-sm text-body-sm hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80" href="#">Privacidad</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 font-body-sm text-body-sm hover:text-secondary-fixed transition-colors opacity-100 hover:opacity-80" href="#">Contacto</a>
|
||||
</div>
|
||||
<div class="text-on-primary/50 font-body-sm text-body-sm text-center md:text-right">
|
||||
© 2024 IDE Consultores. Todos los derechos reservados.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
+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>
|
||||
+234
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Contacto - 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-bg {
|
||||
background-image: radial-gradient(circle at 10px 10px, rgba(113, 120, 124, 0.05) 2px, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.form-input {
|
||||
@apply w-full rounded border border-outline-variant/30 bg-surface px-md py-sm font-body-md text-on-surface focus:border-secondary focus:outline-none focus:ring-1 focus:ring-secondary transition-colors;
|
||||
}
|
||||
.form-label {
|
||||
@apply mb-sm block font-label-md text-on-surface-variant;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md min-h-screen flex flex-col">
|
||||
<!-- 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 flat no shadows">
|
||||
<div class="flex justify-between items-center h-16 px-margin max-w-7xl mx-auto w-full">
|
||||
<div class="flex items-center gap-md">
|
||||
<button aria-label="menu" class="text-primary dark:text-primary-fixed-dim hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200 lg:hidden">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<a class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-wider" href="#">IDE Consultores</a>
|
||||
</div>
|
||||
<nav class="hidden lg:flex items-center gap-lg">
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Inicio</a>
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Servicios</a>
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Nosotros</a>
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Academia</a>
|
||||
<a class="font-body-md text-body-md text-secondary dark:text-secondary-fixed font-bold hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Contacto</a>
|
||||
</nav>
|
||||
<button class="bg-primary hover:bg-primary-container text-on-primary font-label-md text-label-md px-md py-sm rounded transition-colors hidden md:block">CONTACTO</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-grow pt-[80px] pb-xl px-margin max-w-7xl mx-auto w-full pattern-bg">
|
||||
<div class="mb-xl text-center md:text-left mt-lg">
|
||||
<h1 class="font-headline-xl text-headline-xl text-primary mb-sm">Contacto</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">Estamos aquí para ayudarle a impulsar su negocio. Complete el formulario o utilice nuestros canales directos de comunicación.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
|
||||
<!-- Contact Form Area -->
|
||||
<div class="lg:col-span-7 bg-surface-container-lowest border border-outline-variant/30 rounded-lg p-margin shadow-sm">
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-lg border-t-4 border-primary pt-md">Envíenos un Mensaje</h2>
|
||||
<form action="#" class="space-y-md" method="POST">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
|
||||
<div>
|
||||
<label class="form-label" for="name">Nombre Completo</label>
|
||||
<input class="form-input" id="name" name="name" required="" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">Correo Electrónico</label>
|
||||
<input class="form-input" id="email" name="email" required="" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="subject">Asunto</label>
|
||||
<input class="form-input" id="subject" name="subject" required="" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="message">Mensaje</label>
|
||||
<textarea class="form-input resize-none" id="message" name="message" required="" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="pt-sm">
|
||||
<button class="bg-secondary hover:bg-secondary-container text-on-secondary hover:text-on-secondary-container font-label-md text-label-md px-lg py-md rounded transition-colors w-full md:w-auto" type="submit">Enviar Mensaje</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Contact Info & Map Area -->
|
||||
<div class="lg:col-span-5 flex flex-col gap-gutter">
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-lg p-margin shadow-sm h-full border-t-4 border-secondary">
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-md">Información Directa</h2>
|
||||
<ul class="space-y-lg mt-lg">
|
||||
<li class="flex items-start gap-md border-b border-outline-variant/30 pb-sm">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="location_on">location_on</span>
|
||||
<div>
|
||||
<h3 class="font-label-md text-label-md text-on-surface">Sede Principal</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mt-xs">Av. Empresarial 1234, Torre Norte, Oficina 501. Ciudad Financiera.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-md border-b border-outline-variant/30 pb-sm">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="call">call</span>
|
||||
<div>
|
||||
<h3 class="font-label-md text-label-md text-on-surface">Teléfono</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mt-xs">+1 (555) 123-4567</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-md border-b border-outline-variant/30 pb-sm">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="mail">mail</span>
|
||||
<div>
|
||||
<h3 class="font-label-md text-label-md text-on-surface">Email de Soporte</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mt-xs">contacto@ideconsultores.com</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-xl">
|
||||
<h3 class="font-label-md text-label-md text-on-surface mb-sm">Síganos</h3>
|
||||
<div class="flex gap-md">
|
||||
<a class="bg-surface-container hover:bg-surface-container-high p-sm rounded text-primary transition-colors flex items-center justify-center w-10 h-10" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="link">link</span>
|
||||
</a>
|
||||
<a class="bg-surface-container hover:bg-surface-container-high p-sm rounded text-primary transition-colors flex items-center justify-center w-10 h-10" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
||||
</a>
|
||||
<a class="bg-surface-container hover:bg-surface-container-high p-sm rounded text-primary transition-colors flex items-center justify-center w-10 h-10" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="share">share</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded-lg overflow-hidden h-64 relative">
|
||||
<img class="object-cover w-full h-full" data-alt="A highly detailed overhead map view of a modern financial district. Crisp, clean lines denote streets and geometric building blocks in a modern, light-mode corporate aesthetic. The map utilizes a subtle palette of soft grays, off-whites, and a vibrant primary blue locator pin. The lighting is bright and evenly distributed, suggesting a clear, professional environment." data-location="Ciudad Financiera" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDAJNqM20uVvGjVHtjAnqWDgcvvhr1WxKVesz4bIQl7QJLvuI25hGQ-ZauSYvVNi3xBLLnvVgtSdSmjMBXweqeJ_lUhkmN1KyyvJDWUSbDkRxcfxxLpTyFwOc0Aas2c9TWYtUkcLXZ-7J0ml_UlF2-iFiSIz8UsFRhAkasOSUCqORS-WurdeqVdb1xRVutf-i0ChHEii7XExjfvgRZUDW0kv4M7FBE-dkkvduWwzWterj6ZdVZjgCi3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-primary dark:bg-primary-container text-on-primary dark:text-on-primary-container font-body-sm text-body-sm w-full bottom-0 flat no shadows opacity-100 hover:opacity-80 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">
|
||||
<div class="mb-md md:mb-0 text-center md:text-left">
|
||||
<span class="font-headline-md text-headline-md text-on-primary block mb-sm">IDE Consultores</span>
|
||||
<span class="text-on-primary/80 dark:text-on-primary-container/80">© 2024 IDE Consultores. Todos los derechos reservados.</span>
|
||||
</div>
|
||||
<nav class="flex flex-wrap justify-center gap-md">
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Servicios</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Academia</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Nosotros</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Privacidad</a>
|
||||
<a class="text-secondary-fixed dark:text-secondary-fixed-dim hover:text-secondary-fixed transition-colors" href="#">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
+324
@@ -0,0 +1,324 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Nosotros - 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(circle at 2px 2px, rgba(113, 120, 124, 0.1) 1px, transparent 0);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md antialiased 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-md">
|
||||
<button class="text-primary dark:text-primary-fixed-dim hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200 md:hidden">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">menu</span>
|
||||
</button>
|
||||
<div class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-wider">IDE Consultores</div>
|
||||
</div>
|
||||
<nav class="hidden md:flex gap-lg 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-secondary dark:text-secondary-fixed font-bold hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Nosotros</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="#">Academia</a>
|
||||
</nav>
|
||||
<button class="bg-secondary text-on-secondary px-lg py-sm rounded active:scale-95 duration-200 font-label-md text-label-md uppercase tracking-wider hidden md:block">
|
||||
CONTACTO
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Mobile Navigation Drawer (Hidden by default, structure provided) -->
|
||||
<div class="fixed left-0 top-0 h-full w-80 bg-surface dark:bg-surface-container shadow-md flex flex-col p-md gap-sm transition-all duration-300 ease-in-out -translate-x-full z-[60] md:hidden" id="mobile-drawer">
|
||||
<div class="font-headline-lg text-headline-lg text-primary mb-xl mt-md px-md">IDE Consultores</div>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">home</span> Inicio
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">business_center</span> Servicios
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary rounded-full transition-colors font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">groups</span> Nosotros
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined">school</span> Academia
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md mt-auto mb-xl" href="#">
|
||||
<span class="material-symbols-outlined">mail</span> Contacto
|
||||
</a>
|
||||
</div>
|
||||
<!-- Drawer Overlay -->
|
||||
<div class="fixed inset-0 bg-on-background/50 z-50 hidden opacity-0 transition-opacity duration-300 md:hidden" id="drawer-overlay"></div>
|
||||
<main class="w-full">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-surface-container-lowest py-24 md:py-32 border-b border-outline-variant/30 overflow-hidden">
|
||||
<div class="pattern-overlay absolute inset-0 opacity-40"></div>
|
||||
<div class="max-w-7xl mx-auto px-margin relative z-10 grid grid-cols-1 md:grid-cols-12 gap-gutter items-center">
|
||||
<div class="col-span-1 md:col-span-7 pr-0 md:pr-xl">
|
||||
<h1 class="font-headline-xl text-headline-xl text-primary mb-md">Nuestra Historia</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-xl max-w-2xl">
|
||||
Fundada con la convicción de que el progreso sostenido requiere cimientos sólidos. En IDE Consultores, no solo asesoramos; construimos verdades medibles y estructuras resilientes para el futuro corporativo.
|
||||
</p>
|
||||
<div class="flex gap-md">
|
||||
<span class="bg-surface-container px-md py-xs rounded font-label-md text-label-md text-primary tracking-wider uppercase">Progreso</span>
|
||||
<span class="bg-surface-container px-md py-xs rounded font-label-md text-label-md text-primary tracking-wider uppercase">Seriedad</span>
|
||||
<span class="bg-surface-container px-md py-xs rounded font-label-md text-label-md text-primary tracking-wider uppercase">Verdad</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 md:col-span-5 mt-xl md:mt-0">
|
||||
<div class="relative w-full aspect-[4/5] rounded border-t-4 border-secondary bg-surface-container shadow-sm overflow-hidden">
|
||||
<img class="object-cover w-full h-full" data-alt="A striking architectural detail of a modern corporate headquarters in light mode. The image features clean, strict geometric lines, large glass panels reflecting a clear sky, and structural steel beams. The lighting is high-key and professional, emphasizing stability, transparency, and progress. Deep blues and crisp whites dominate the palette, with subtle hints of teal in the reflections. The mood is serious and institutional." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMovp53tvSbNH-jC0N-9dj1-4jxAbWNsUOXmMM2JEzM347AINcx_RwijRZStEbOu3QgsK-ZksuIDE_oxHoKvgOa9JpuFJMlLDzWmIOwXOptU71CuSP83c46aAaJ1qXv7Z15JC7v8FFIbkrX2B1tob56gyEBd6JWmmRcGwksq2pagxaNg9v69VlsDU5e4cwCi425KQLlW_7bNjjBBo-5DpQJwf7Yk1gPhp6vjBeBwacWBAhBLspgYe-"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Mission & Vision Bento -->
|
||||
<section class="py-24 bg-surface-container-low">
|
||||
<div class="max-w-7xl mx-auto px-margin">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
||||
<!-- Mission Card -->
|
||||
<div class="bg-surface-container-lowest p-xl rounded border border-outline-variant/30 relative overflow-hidden group hover:border-secondary/50 transition-colors duration-300">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-[100px] -z-10 group-hover:bg-secondary/10 transition-colors duration-500"></div>
|
||||
<span class="material-symbols-outlined text-4xl text-secondary mb-md block">visibility</span>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-md">Visión</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">
|
||||
Ser la referencia ineludible en consultoría estratégica, donde la precisión analítica y la integridad profesional definan el estándar de excelencia en cada mercado donde operamos.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Vision Card -->
|
||||
<div class="bg-primary p-xl rounded border border-primary-container relative overflow-hidden shadow-sm">
|
||||
<div class="pattern-overlay absolute inset-0 opacity-10 filter invert"></div>
|
||||
<span class="material-symbols-outlined text-4xl text-secondary-fixed mb-md block relative z-10">rocket_launch</span>
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-primary mb-md relative z-10">Misión</h2>
|
||||
<p class="font-body-md text-body-md text-on-primary/90 relative z-10">
|
||||
Proveer soluciones estructurales definitivas mediante un análisis riguroso y una ejecución impecable, catalizando el crecimiento sostenido de nuestros clientes a través de metodologías probadas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Values List -->
|
||||
<section class="py-24 bg-surface-container-lowest border-y border-outline-variant/30">
|
||||
<div class="max-w-3xl mx-auto px-margin text-center mb-xl">
|
||||
<h2 class="font-headline-xl text-headline-xl text-primary mb-sm">Nuestros Pilares</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">La base inquebrantable de nuestra práctica profesional.</p>
|
||||
</div>
|
||||
<div class="max-w-4xl mx-auto px-margin">
|
||||
<div class="flex flex-col">
|
||||
<!-- Value 1 -->
|
||||
<div class="py-md border-b border-outline-variant/30 flex flex-col md:flex-row gap-lg items-start md:items-center">
|
||||
<div class="flex-shrink-0 w-16 h-16 bg-surface-container rounded flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">trending_up</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Progreso</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Impulsamos el avance continuo, midiendo el éxito a través de resultados tangibles y mejoras operativas sostenibles.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Value 2 -->
|
||||
<div class="py-md border-b border-outline-variant/30 flex flex-col md:flex-row gap-lg items-start md:items-center">
|
||||
<div class="flex-shrink-0 w-16 h-16 bg-surface-container rounded flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">gavel</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Seriedad</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Abordamos cada desafío con el máximo rigor institucional, respetando los compromisos y operando bajo los más altos estándares éticos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Value 3 -->
|
||||
<div class="py-md border-b border-outline-variant/30 flex flex-col md:flex-row gap-lg items-start md:items-center">
|
||||
<div class="flex-shrink-0 w-16 h-16 bg-surface-container rounded flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">fact_check</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Verdad</h3>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Basamos nuestras recomendaciones en datos empíricos y análisis objetivo. La transparencia total es innegociable en nuestra relación con el cliente.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Leadership Section -->
|
||||
<section class="py-24 bg-surface-container-low">
|
||||
<div class="max-w-7xl mx-auto px-margin">
|
||||
<div class="mb-xl">
|
||||
<h2 class="font-headline-xl text-headline-xl text-primary">Liderazgo</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl mt-sm">Un equipo directivo forjado en la experiencia, comprometido con la excelencia consultiva.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
<!-- Leader 1 -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded overflow-hidden">
|
||||
<div class="aspect-square bg-surface-container w-full relative">
|
||||
<img class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional, high-end corporate headshot of a mature male executive in a well-lit modern office environment. Light mode aesthetic with clean white backgrounds and deep blue corporate accents. He wears a sharp navy suit and projects authority, stability, and intelligence. The lighting is soft but definitive, casting minimal shadows." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYKu4_SAJdySoM6vXLjHnpe3idn2HDgNXbmpZTa4-swLmFpXpdOMah_KL3fkmV4Ok-wZma3VLGTDkj90iTw140iuJxnS6R56WV9FpCH0AlWZZ7ZPoeR17O7kx-KQLVR6Gu1VpLiDpvXaAIlF7wyPTM6XgN-bNCyxLdf1UfmctqYm_AhR2iHnd8ekP7npxaKRbbPpA3i6G7yvs9zG3B_hcy5rsaOzkBMrisMAI3pZnGtg8ns3hrSPtz"/>
|
||||
</div>
|
||||
<div class="p-lg">
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Carlos Mendoza</h3>
|
||||
<p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-sm">Socio Fundador</p>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">20+ años de experiencia en reestructuración corporativa y estrategia a largo plazo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Leader 2 -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded overflow-hidden">
|
||||
<div class="aspect-square bg-surface-container w-full relative">
|
||||
<img class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional, high-end corporate headshot of a confident female senior consultant in a minimalist office setting. Light mode aesthetic with generous white space and sharp focus. She wears a tailored charcoal blazer. The lighting emphasizes professionalism and approachability while maintaining a serious, institutional mood. Subtle teal accents in the blurred background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2oKk175Q1AoFrOUDLqPLS4wzulVYLuOUDEMDxvdlEPYvW_mVpbTmPAnOiwLWaw6veY7L8pdiQpuXd1tz8BloYTt9pEgep5WtWidx0j5Cy3U1gmMBdv-siAUtd304kbtnSNDGQ8AkeQ4YfD2HI4xmMk4nPs2e83q0yPSeXJz6bA-kqN9a9qjtBeqZz7gcYzQ17vSqLwzdw-MLM4rxbnRLoFgq8O0EdWBSxW-OKrz78_enWcZYKHV9I"/>
|
||||
</div>
|
||||
<div class="p-lg">
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Elena Ríos</h3>
|
||||
<p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-sm">Directora de Operaciones</p>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Especialista en optimización de procesos y despliegue de metodologías ágiles en entornos rígidos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Leader 3 -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded overflow-hidden">
|
||||
<div class="aspect-square bg-surface-container w-full relative">
|
||||
<img class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional corporate headshot of an analytical male financial director in a modern, light-filled boardroom. Light mode aesthetic, sharp focus, clean lines. He wears formal business attire. The mood conveys precision, truth, and analytical rigor. High-key lighting with a very subtle, diffused shadow for depth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2_XKeV9xMWT2iBcf64hvioKfv-Nx-lfr4IXaCanjWsU2VUvRn8abp0t7x4rrHXXood3T6QWy0EYBatywGZ__WuyvURoTAWEg6aOQzsBFj-d3iJMRF8nlQiTIDcg2fia4C3Xdg5V1iu0gcqA8Fh9lJwZgfFwv4qqLSJqwnFhAr1_pwOJBfhRERNQGh402L5dzF62MzsUwJuvPc2n0S2gLRA9bjdXvDWVJhCnTm8K8W7-DublmwFjkv"/>
|
||||
</div>
|
||||
<div class="p-lg">
|
||||
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Roberto Silva</h3>
|
||||
<p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-sm">Analista Principal</p>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Arquitecto de modelos financieros predictivos y análisis de riesgo cuantitativo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-primary dark:bg-primary-container w-full bottom-0">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center py-xl px-margin max-w-7xl mx-auto w-full gap-lg md:gap-0">
|
||||
<div class="font-headline-md text-headline-md text-on-primary">IDE Consultores</div>
|
||||
<nav class="flex flex-wrap justify-center gap-lg">
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Servicios</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Academia</a>
|
||||
<a class="text-secondary-fixed dark:text-secondary-fixed-dim hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Nosotros</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Privacidad</a>
|
||||
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Contacto</a>
|
||||
</nav>
|
||||
<div class="font-body-sm text-body-sm text-on-primary/60">
|
||||
© 2024 IDE Consultores. Todos los derechos reservados.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Simple Drawer Logic
|
||||
const menuBtn = document.querySelector('header button');
|
||||
const drawer = document.getElementById('mobile-drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
|
||||
function toggleDrawer() {
|
||||
const isClosed = drawer.classList.contains('-translate-x-full');
|
||||
if (isClosed) {
|
||||
drawer.classList.remove('-translate-x-full');
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => overlay.classList.remove('opacity-0'), 10);
|
||||
} else {
|
||||
drawer.classList.add('-translate-x-full');
|
||||
overlay.classList.add('opacity-0');
|
||||
setTimeout(() => overlay.classList.add('hidden'), 300);
|
||||
}
|
||||
}
|
||||
|
||||
menuBtn.addEventListener('click', toggleDrawer);
|
||||
overlay.addEventListener('click', toggleDrawer);
|
||||
</script>
|
||||
</body></html>
|
||||
+241
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Servicios - IDE Consultores</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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=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"/>
|
||||
<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-bg {
|
||||
background-image: radial-gradient(circle, #71787c 1px, transparent 1px), linear-gradient(45deg, transparent 49%, #71787c 49%, #71787c 51%, transparent 51%);
|
||||
background-size: 20px 20px, 40px 40px;
|
||||
background-position: 0 0, 0 0;
|
||||
opacity: 0.05;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased selection:bg-secondary-container selection:text-on-secondary-container">
|
||||
<!-- 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 flat no shadows">
|
||||
<div class="flex justify-between items-center h-16 px-margin max-w-7xl mx-auto w-full">
|
||||
<div class="flex items-center gap-md">
|
||||
<button class="text-primary dark:text-primary-fixed-dim hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200 lg:hidden">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<a class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-wider uppercase" href="#">IDE Consultores</a>
|
||||
</div>
|
||||
<nav class="hidden lg:flex items-center gap-lg">
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Inicio</a>
|
||||
<a class="font-body-md text-body-md text-secondary dark:text-secondary-fixed font-bold hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Servicios</a>
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Nosotros</a>
|
||||
<a class="font-body-md text-body-md text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors" href="#">Academia</a>
|
||||
</nav>
|
||||
<button class="font-label-md text-label-md bg-primary text-on-primary px-lg py-sm rounded hover:bg-primary-fixed-variant transition-colors active:scale-95 duration-200">
|
||||
CONTACTO
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="pt-[100px] pb-xl px-margin max-w-7xl mx-auto min-h-screen relative">
|
||||
<div class="absolute inset-0 pattern-bg pointer-events-none"></div>
|
||||
<div class="relative z-10 mb-xl">
|
||||
<h1 class="font-headline-xl text-headline-xl text-primary mb-sm uppercase">Nuestros Servicios</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-3xl">
|
||||
Soluciones estratégicas diseñadas para impulsar el crecimiento, la estabilidad y la tenacidad de su organización en un entorno empresarial exigente.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
|
||||
<!-- Service Card 1 -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded flex flex-col h-full border-t-[4px] border-t-primary hover:shadow-[0_8px_24px_rgba(26,72,90,0.1)] transition-shadow duration-300">
|
||||
<div class="p-lg flex-grow">
|
||||
<div class="w-12 h-12 bg-surface-container flex items-center justify-center rounded-full mb-md text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="query_stats">query_stats</span>
|
||||
</div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-sm uppercase">Consultoría Estratégica</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-md">
|
||||
Alineamos la visión de su empresa con tácticas ejecutables. Análisis de mercado, optimización de recursos y planificación a largo plazo para asegurar la competitividad.
|
||||
</p>
|
||||
<ul class="flex flex-col gap-sm mb-lg">
|
||||
<li class="flex items-start gap-sm border-b border-outline-variant/30 pb-sm last:border-0 last:pb-0">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Análisis FODA Avanzado</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-sm border-b border-outline-variant/30 pb-sm last:border-0 last:pb-0">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Modelos de Negocio Disruptivos</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-lg pt-0 mt-auto flex gap-md">
|
||||
<button class="flex-1 font-label-md text-label-md bg-secondary text-on-secondary py-sm rounded hover:bg-secondary-container hover:text-on-secondary-container transition-colors">Cotizar</button>
|
||||
<button class="flex-1 font-label-md text-label-md border border-outline text-primary py-sm rounded hover:bg-surface-container transition-colors">Más Info</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service Card 2 -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded flex flex-col h-full border-t-[4px] border-t-secondary hover:shadow-[0_8px_24px_rgba(26,72,90,0.1)] transition-shadow duration-300">
|
||||
<div class="p-lg flex-grow">
|
||||
<div class="w-12 h-12 bg-surface-container flex items-center justify-center rounded-full mb-md text-secondary">
|
||||
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
|
||||
</div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-sm uppercase">Asesoría Financiera</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-md">
|
||||
Gestión rigurosa del capital para maximizar el ROI. Reestructuración de deudas, evaluación de inversiones y control presupuestario integral.
|
||||
</p>
|
||||
<ul class="flex flex-col gap-sm mb-lg">
|
||||
<li class="flex items-start gap-sm border-b border-outline-variant/30 pb-sm last:border-0 last:pb-0">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Auditoría Interna</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-sm border-b border-outline-variant/30 pb-sm last:border-0 last:pb-0">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Proyección de Flujo de Caja</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-lg pt-0 mt-auto flex gap-md">
|
||||
<button class="flex-1 font-label-md text-label-md bg-secondary text-on-secondary py-sm rounded hover:bg-secondary-container hover:text-on-secondary-container transition-colors">Cotizar</button>
|
||||
<button class="flex-1 font-label-md text-label-md border border-outline text-primary py-sm rounded hover:bg-surface-container transition-colors">Más Info</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service Card 3 -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded flex flex-col h-full border-t-[4px] border-t-primary hover:shadow-[0_8px_24px_rgba(26,72,90,0.1)] transition-shadow duration-300">
|
||||
<div class="p-lg flex-grow">
|
||||
<div class="w-12 h-12 bg-surface-container flex items-center justify-center rounded-full mb-md text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="engineering">engineering</span>
|
||||
</div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-primary mb-sm uppercase">Optimización Operativa</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-md">
|
||||
Reingeniería de procesos para alcanzar la máxima eficiencia. Implementación de metodologías ágiles y sistemas de calidad institucional.
|
||||
</p>
|
||||
<ul class="flex flex-col gap-sm mb-lg">
|
||||
<li class="flex items-start gap-sm border-b border-outline-variant/30 pb-sm last:border-0 last:pb-0">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Certificaciones ISO</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-sm border-b border-outline-variant/30 pb-sm last:border-0 last:pb-0">
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface">Reducción de Mermas (Lean)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-lg pt-0 mt-auto flex gap-md">
|
||||
<button class="flex-1 font-label-md text-label-md bg-secondary text-on-secondary py-sm rounded hover:bg-secondary-container hover:text-on-secondary-container transition-colors">Cotizar</button>
|
||||
<button class="flex-1 font-label-md text-label-md border border-outline text-primary py-sm rounded hover:bg-surface-container transition-colors">Más Info</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-primary dark:bg-primary-container w-full bottom-0 flat no shadows opacity-100 hover:opacity-80">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center py-xl px-margin max-w-7xl mx-auto w-full gap-lg md:gap-0">
|
||||
<div class="font-headline-md text-headline-md text-on-primary uppercase">
|
||||
IDE Consultores
|
||||
</div>
|
||||
<nav class="flex flex-wrap justify-center gap-md md:gap-lg">
|
||||
<a class="font-body-sm text-body-sm text-secondary-fixed dark:text-secondary-fixed-dim hover:text-secondary-fixed transition-colors" href="#">Servicios</a>
|
||||
<a class="font-body-sm text-body-sm text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Academia</a>
|
||||
<a class="font-body-sm text-body-sm text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Nosotros</a>
|
||||
<a class="font-body-sm text-body-sm text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Privacidad</a>
|
||||
<a class="font-body-sm text-body-sm text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors" href="#">Contacto</a>
|
||||
</nav>
|
||||
<div class="font-body-sm text-body-sm text-on-primary/80 dark:text-on-primary-container/80 text-center md:text-right">
|
||||
© 2024 IDE Consultores. Todos los derechos reservados.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user