File: /home/toshikoc/www/soluciones.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soluciones Especializadas | 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; }
.gradient-red { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
.bg-tech-dark { background-color: #0f172a; }
.card-glass {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s ease;
}
.card-glass:hover {
transform: translateY(-10px);
border-color: rgba(220, 38, 38, 0.5);
background: rgba(30, 41, 59, 0.9);
}
/* Estilos del Dropdown */
.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: 8px;
border: 1px solid rgba(255,255,255,0.05);
padding: 10px 0;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-link {
display: block;
padding: 12px 20px;
color: #cbd5e1;
text-decoration: none;
font-size: 11px;
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;
padding-left: 25px;
}
</style>
</head>
<body class="text-slate-200">
<!-- Navegación (Sincronizada con Index) -->
<nav class="fixed w-full z-50 bg-tech-dark/95 border-b border-slate-800 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">
<div class="flex-shrink-0 flex items-center">
<a href="index.php" class="text-2xl font-bold tracking-tighter text-white">Grupo <span class="text-red-600">Toshiko</span></a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8 text-xs font-bold uppercase tracking-widest">
<a href="index.php" class="hover:text-red-500 transition-colors">Inicio</a>
<a href="index.php#nosotros" class="hover:text-red-500 transition-colors">Nosotros</a>
<div class="relative dropdown h-20 flex items-center">
<a href="soluciones.php" class="text-red-500 flex items-center">
Soluciones <i class="fa-solid fa-chevron-down ml-2 text-[10px]"></i>
</a>
<div class="dropdown-content">
<a href="#datacenter" class="dropdown-link">Infraestructura y Datacenter</a>
<a href="#networking" class="dropdown-link">Networking y Comunicaciones</a>
<a href="#seguridad" class="dropdown-link">Seguridad Informática</a>
<a href="#storage" class="dropdown-link">Almacenamiento (Storage)</a>
<a href="#cableado" class="dropdown-link">Cableado Estructurado</a>
<a href="#energia" class="dropdown-link">Energía y Respaldo</a>
<a href="#cloud" class="dropdown-link">Servicios Cloud (Nube)</a>
<a href="#licencias" class="dropdown-link">Licenciamiento Corporativo</a>
</div>
</div>
<a href="leasing.php" class="hover:text-red-500 transition-colors">Leasing</a>
<a href="index.php#contacto" class="gradient-red text-white px-6 py-2 rounded-full font-semibold hover:opacity-90 transition-all">Cotizar</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Mensaje Inicial / Hero de Soluciones -->
<header class="pt-40 pb-20 bg-slate-900/50 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 text-center relative z-10">
<span class="text-red-600 font-bold tracking-[0.3em] uppercase text-sm mb-4 block">Portafolio Corporativo</span>
<h1 class="text-5xl md:text-7xl font-bold text-white mb-8 tracking-tighter leading-tight">
Soluciones que ponen <br> a su <span class="text-red-600">Disposición.</span>
</h1>
<p class="text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed text-justify md:text-center font-light">
Ofrecemos un portafolio completo de servicios diseñados para cubrir las necesidades tecnológicas de su empresa, respaldados por los principales fabricantes del mundo. Nuestro enfoque se centra en la eficiencia, seguridad y escalabilidad de su infraestructura.
</p>
</div>
<!-- Decoración de fondo -->
<div class="absolute top-0 right-0 w-1/3 h-full bg-red-600/5 blur-[120px]"></div>
</nav>
<!-- Grilla de Soluciones (Basada en la imagen de referencia) -->
<section class="py-24">
<div class="max-w-7xl mx-auto px-4">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 1. Datacenter -->
<div id="datacenter" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 gradient-red rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-red-600/20">
<i class="fa-solid fa-server text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Infraestructura y Datacenter</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Proyectos de renovación del parque informático y Datacenter. Suministro e instalación de Servidores, Equipos de Cómputo y Comunicaciones bajo estándares de alta disponibilidad.
</p>
</div>
<!-- 2. Networking -->
<div id="networking" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-blue-600/20">
<i class="fa-solid fa-network-wired text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Networking y Comunicaciones</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Diseño e Implementación de Redes LAN/WAN/Cloud. Soluciones de Networking de capa 2 y 3, Telefonía IP, CCTV y Wireless de alto rendimiento para entornos empresariales.
</p>
</div>
<!-- 3. Seguridad -->
<div id="seguridad" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-emerald-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-emerald-600/20">
<i class="fa-solid fa-shield-halved text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Seguridad Informática</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Soluciones integrales de Ciberseguridad: Firewalls de nueva generación, protección de endpoints y gestión de amenazas para garantizar la continuidad de sus operaciones.
</p>
</div>
<!-- 4. Storage -->
<div id="storage" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-orange-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-orange-600/20">
<i class="fa-solid fa-database text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Almacenamiento (Storage)</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Soluciones de Almacenamiento All-Flash e Híbrido que garantizan la disponibilidad, protección y recuperación inmediata de su información crítica de negocio.
</p>
</div>
<!-- 5. Cableado -->
<div id="cableado" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-purple-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-purple-600/20">
<i class="fa-solid fa-diagram-project text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Cableado Estructurado</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Instalación de Redes de Cableado UTP y Fibra Óptica certificadas. Diseño de ducterías y canalizaciones bajo los más altos estándares internacionales de calidad.
</p>
</div>
<!-- 6. Energía -->
<div id="energia" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-yellow-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-yellow-600/20">
<i class="fa-solid fa-bolt text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Energía y Respaldo</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Suministro e instalación de Energía Estabilizada y UPS para Datacenters. Aseguramos la máxima protección eléctrica para la integridad de sus equipos tecnológicos.
</p>
</div>
<!-- 7. Cloud -->
<div id="cloud" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-sky-500 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-sky-500/20">
<i class="fa-solid fa-cloud text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Servicios Cloud (Nube)</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Migración y gestión integral de entornos en la nube con Microsoft 365, Azure, AWS y Google Cloud para potenciar la colaboración y productividad remota.
</p>
</div>
<!-- 8. Licencias -->
<div id="licencias" class="card-glass p-8 rounded-3xl h-full flex flex-col">
<div class="w-14 h-14 bg-pink-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-pink-600/20">
<i class="fa-solid fa-key text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Licenciamiento Corporativo</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">
Venta y gestión legal de activos de software: Microsoft, Adobe Creative Cloud, Antivirus (Kaspersky, Sophos, Bitdefender) y AutoCAD.
</p>
</div>
</div>
</div>
</section>
<!-- CTA Final -->
<section class="py-20 bg-slate-900/30 text-center">
<div class="max-w-4xl mx-auto px-4">
<h2 class="text-3xl font-bold text-white mb-6">¿Necesita una solución personalizada?</h2>
<p class="text-slate-400 mb-10">Nuestros ingenieros certificados están listos para analizar su proyecto y ofrecerle la mejor arquitectura técnica.</p>
<a href="index.php#contacto" class="gradient-red text-white px-10 py-4 rounded-full font-bold uppercase tracking-widest text-xs inline-block hover:scale-105 transition-transform">Solicitar Asesoría</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-950 py-12 border-t border-white/5 text-center text-slate-500 text-[10px] uppercase tracking-[0.4em]">
<p>© <?php echo date("Y"); ?> Grupo Toshiko S.A.C. Todos los derechos reservados.</p>
</footer>
</body>
</html>