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>
|
||||
Reference in New Issue
Block a user