Inicio de proyecto
This commit is contained in:
+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>
|
||||
Reference in New Issue
Block a user