241 lines
15 KiB
HTML
241 lines
15 KiB
HTML
<!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> |