File: /home/toshikoc/www/contacto.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacto | Grupo Toshiko S.A.C.</title>
<!-- ÍCONO DE LA PESTAÑA -->
<link rel="icon" type="image/png" href="img/favicon.png">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Urbanist -->
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Iconos: FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
body { font-family: 'Urbanist', sans-serif; scroll-behavior: smooth; background-color: #0f172a; color: #cbd5e1; }
.bg-tech-dark { background-color: #0f172a; }
.gradient-red { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
/* Glassmorphism Cards */
.card-glass {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Estilos del Navegador */
nav { background-color: rgba(15, 23, 42, 0.95); border-bottom: 1px solid rgba(255,255,255,0.05); }
/* Dropdown Estilo Toshiko */
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #1e293b;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 100;
border-radius: 4px;
padding: 10px 0;
border: 1px solid rgba(255,255,255,0.05);
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-link {
display: block;
padding: 12px 20px;
color: #cbd5e1;
text-decoration: none;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.dropdown-link:hover {
background-color: rgba(220, 38, 38, 0.1);
color: #ef4444;
border-left: 3px solid #dc2626;
}
/* Banner de Contacto Estilo Toshiko */
.hero-contact {
background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000');
background-size: cover;
background-position: center;
padding: 160px 0 100px 0;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Formulario Estilo Dark Modern */
.form-input {
width: 100%;
background-color: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 14px 16px;
border-radius: 8px;
outline: none;
color: white;
transition: all 0.3s;
font-size: 14px;
}
.form-input:focus { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); }
.label-form {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
color: #94a3b8;
}
.label-form span { color: #dc2626; }
/* Logo personalizado */
.logo-box-red { background-color: #dc2626; padding: 4px 12px; transform: skewX(-10deg); }
.logo-box-black { background-color: #000000; padding: 4px 12px; transform: skewX(-10deg); margin-left: -5px; }
.logo-text-main { transform: skewX(10deg); display: inline-block; font-style: italic; }
</style>
</head>
<body>
<!-- Navegación -->
<nav class="fixed w-full z-50 backdrop-blur-md transition-all">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- LOGO CORPORATIVO -->
<div class="flex-shrink-0 flex flex-col">
<a href="index.php" class="flex items-center">
<div class="logo-box-red"><span class="text-white font-bold text-xl logo-text-main">Grupo</span></div>
<div class="logo-box-black"><span class="text-white font-bold text-xl logo-text-main">Toshiko</span></div>
<span class="text-white ml-2 text-xl font-light">@</span>
</a>
<div class="text-[10px] text-white tracking-[0.3em] font-light mt-1 border-t border-white/20 pt-1">
SOLUCIONES INFORMÁTICAS
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-center space-x-8 text-xs font-bold uppercase tracking-widest">
<a href="index.php" class="text-white hover:text-red-500 transition-colors">Inicio</a>
<a href="index.php#nosotros" class="text-white hover:text-red-500 transition-colors">Nosotros</a>
<div class="relative dropdown h-20 flex items-center">
<a href="soluciones.php" class="text-white hover:text-red-500 transition-colors flex items-center">
Soluciones <i class="fa-solid fa-chevron-down ml-2 text-[10px]"></i>
</a>
<div class="dropdown-content">
<a href="soluciones.php" class="dropdown-link">Infraestructura y Datacenter</a>
<a href="soluciones.php" class="dropdown-link">Networking y Comunicaciones</a>
<a href="soluciones.php" class="dropdown-link">Seguridad Informática</a>
<a href="soluciones.php" class="dropdown-link">Almacenamiento (Storage)</a>
<a href="soluciones.php" class="dropdown-link">Cableado Estructurado</a>
<a href="soluciones.php" class="dropdown-link">Energía y Respaldo</a>
<a href="soluciones.php" class="dropdown-link">Servicios Cloud (Nube)</a>
<a href="soluciones.php" class="dropdown-link">Licenciamiento Corporativo</a>
</div>
</div>
<a href="leasing.php" class="text-white hover:text-red-500 transition-colors">Leasing</a>
<a href="contacto.php" class="text-red-500 transition-colors">Contacto</a>
<a href="index.php#contacto" class="gradient-red text-white px-8 py-2 rounded-full font-bold hover:opacity-90 transition-all uppercase text-[10px] tracking-[0.2em]">Cotizar</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section (ESTILO CORPORATIVO) -->
<header class="hero-contact">
<div class="max-w-7xl mx-auto px-4">
<span class="text-red-600 font-bold tracking-[0.4em] uppercase text-xs mb-4 block">Atención Personalizada</span>
<h1 class="text-white text-4xl md:text-6xl font-bold mb-6 tracking-tighter">Estamos en <span class="text-red-600">CONTACTO</span></h1>
<p class="text-slate-400 text-lg font-light mb-8 max-w-2xl mx-auto">Nuestros asesores en tecnología están siempre en contacto contigo para asesorarte sobre nuestros servicios.</p>
<p class="text-red-500 text-xs font-bold italic tracking-widest uppercase bg-red-600/10 inline-block px-4 py-2 rounded-full">¿Listo para transformar tu empresa con tecnología? Contáctanos ahora.</p>
</div>
</header>
<!-- Contenido Principal (Estructura de Referencia con Estilo Toshiko) -->
<main class="py-24">
<div class="max-w-7xl mx-auto px-4 grid lg:grid-cols-2 gap-20">
<!-- Columna Izquierda: Datos con Acentos Rojos -->
<div>
<h2 class="text-2xl font-bold text-white mb-10 pb-4 border-b-2 border-red-600 inline-block tracking-tight">Nuestros datos de contacto:</h2>
<div class="space-y-12">
<div class="flex items-start group">
<div class="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center mr-6 border border-red-600/20 group-hover:bg-red-600 transition-all">
<i class="fa-solid fa-location-dot text-red-600 group-hover:text-white transition-colors"></i>
</div>
<div>
<h3 class="text-red-600 text-xs font-bold uppercase tracking-widest mb-2 italic">Nuestra dirección:</h3>
<p class="text-white font-bold text-lg mb-1">Calle Coral 113 - Pueblo Libre 15084</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-xs">Será un gusto atenderte personalmente en nuestra oficina y resolver todas tus inquietudes.</p>
</div>
</div>
<div class="flex items-start group">
<div class="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center mr-6 border border-red-600/20 group-hover:bg-red-600 transition-all">
<i class="fa-solid fa-phone text-red-600 group-hover:text-white transition-colors"></i>
</div>
<div>
<h3 class="text-red-600 text-xs font-bold uppercase tracking-widest mb-2 italic">Nuestros teléfonos:</h3>
<p class="text-white font-bold text-lg mb-1">+511 220 6221</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-xs">Estamos disponibles a oírte y responder por teléfono cualquier inquietud que puedas tener.</p>
</div>
</div>
<div class="flex items-start group">
<div class="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center mr-6 border border-red-600/20 group-hover:bg-red-600 transition-all">
<i class="fa-solid fa-envelope text-red-600 group-hover:text-white transition-colors"></i>
</div>
<div>
<h3 class="text-red-600 text-xs font-bold uppercase tracking-widest mb-2 italic">Nuestro correo electrónico:</h3>
<p class="text-white font-bold text-lg mb-1">ventas@toshiko.com.pe</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-xs">Si prefieres puedes escribirnos un correo electrónico e inmediatamente te responderemos.</p>
</div>
</div>
</div>
<!-- Imagen decorativa con filtro de marca -->
<div class="mt-16 rounded-2xl overflow-hidden border border-white/5 relative group">
<div class="absolute inset-0 bg-red-600/10 group-hover:bg-transparent transition-all z-10"></div>
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=1000" alt="Consultoría TI Toshiko" class="w-full h-56 object-cover grayscale group-hover:grayscale-0 transition-all duration-700">
</div>
</div>
<!-- Columna Derecha: Formulario Glassmorphism -->
<div class="card-glass p-10 rounded-3xl shadow-2xl relative">
<div class="absolute -top-4 -right-4 w-20 h-20 bg-red-600/5 blur-3xl"></div>
<h2 class="text-2xl font-bold text-white mb-10 pb-4 border-b-2 border-red-600 inline-block tracking-tight">Formulario de contacto:</h2>
<form id="contactForm" class="space-y-6">
<div class="grid grid-cols-2 gap-6">
<div>
<label class="label-form">Nombres <span>*</span></label>
<input type="text" placeholder="Ej. Juan" class="form-input">
</div>
<div>
<label class="label-form">Apellidos <span>*</span></label>
<input type="text" placeholder="Ej. Pérez" class="form-input">
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div>
<label class="label-form">Teléfono <span>*</span></label>
<input type="text" placeholder="999 999 999" class="form-input">
</div>
<div>
<label class="label-form">Correo electrónico <span>*</span></label>
<input type="email" placeholder="usuario@empresa.com" class="form-input">
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div>
<label class="label-form">RUC <span>*</span></label>
<input type="text" placeholder="Número de RUC" class="form-input">
</div>
<div>
<label class="label-form">Servicio de Interés <span>*</span></label>
<select class="form-input appearance-none">
<option value="" class="bg-slate-900">- Seleccionar -</option>
<option value="datacenter" class="bg-slate-900">Infraestructura y Datacenter</option>
<option value="networking" class="bg-slate-900">Networking y Comunicaciones</option>
<option value="seguridad" class="bg-slate-900">Seguridad Informática</option>
<option value="leasing" class="bg-slate-900">Leasing / Arrendamiento</option>
</select>
</div>
</div>
<div>
<label class="label-form">Mensaje / Consulta</label>
<textarea rows="4" placeholder="Cuéntenos sobre los requerimientos de su empresa..." class="form-input"></textarea>
</div>
<div class="pt-6">
<button type="button" class="gradient-red text-white font-bold py-4 px-12 rounded-xl hover:scale-105 transition-all uppercase text-xs tracking-[0.2em] shadow-xl shadow-red-600/20 w-full md:w-auto">
Enviar Solicitud
</button>
</div>
</form>
</div>
</div>
</main>
<!-- Sección del Mapa (Pantalla Completa) -->
<section class="w-full h-[500px] border-t border-white/5 relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.4429986389!2d-77.0739!3d-12.0817!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTLCsDA0JzU0LjEiUyA3N8KwMDQnMjYuMCJX!5e0!3m2!1ses!2spe!4v1700000000000!5m2!1ses!2spe"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</section>
<!-- Footer Corporativo -->
<footer class="bg-slate-950 py-16 text-center border-t border-white/5">
<div class="max-w-7xl mx-auto px-4">
<p class="text-slate-500 text-[10px] uppercase tracking-[0.5em]">
© <?php echo date("Y"); ?> Grupo Toshiko S.A.C. Todos los derechos reservados.
</p>
</div>
</footer>
</body>
</html>