File: /home/toshikoc/www/leasing.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grupo Toshiko S.A.C. | Infraestructura TI y Data Centers</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); }
/* Estilos del Slider Principal */
.slider-container { position: relative; height: 100vh; min-height: 650px; width: 100%; overflow: hidden; }
.slide {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0; transition: opacity 1s ease-in-out; display: flex; align-items: center;
background-size: cover; background-position: center;
}
.slide.active { opacity: 1; z-index: 10; }
.bg-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.85); z-index: 1; }
.slide-1 { background-image: url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=2000'); }
.slide-2 { background-image: url('https://images.unsplash.com/photo-1597733336794-12d05021d510?q=80&w=2000'); }
.slide-3 { background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000'); }
.slide-content { position: relative; z-index: 20; max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
.animate-text { transform: translateY(30px); opacity: 0; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.active .animate-text { transform: translateY(0); opacity: 1; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.slider-dots {
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
display: flex; gap: 12px; z-index: 30;
}
.dot { width: 35px; height: 3px; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s; }
.dot.active { background: #dc2626; width: 55px; }
.logo-track {
display: flex;
width: max-content;
gap: 100px;
animation: scrollEnterprise 40s linear infinite;
}
.logo-slide {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 140px;
}
.logo-slide img {
height: 48px;
opacity: 0.6;
filter: brightness(0) invert(1);
transition: all 0.4s ease;
}
.logo-slide img:hover {
opacity: 1;
filter: none;
transform: scale(1.1);
}
@keyframes scrollEnterprise {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ESTILOS DEL MENÚ DESPLEGABLE */
.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 -->
<nav class="fixed w-full z-50 bg-tech-dark/90 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">
<!-- ORDEN DEL MENÚ: INICIO, NOSOTROS, SOLUCIONES, LEASING -->
<div class="ml-10 flex items-baseline space-x-8 text-xs font-bold uppercase tracking-widest">
<a href="#inicio" class="hover:text-red-500 transition-colors text-red-500">Inicio</a>
<a href="#nosotros" class="hover:text-red-500 transition-colors">Nosotros</a>
<!-- PESTAÑA SOLUCIONES CON MENÚ DESPLEGABLE -->
<div class="relative dropdown h-20 flex items-center">
<a href="soluciones.php" class="hover:text-red-500 transition-colors flex items-center cursor-default">
Soluciones <i class="fa-solid fa-chevron-down ml-2 text-[10px]"></i>
</a>
<div class="dropdown-content">
<a href="#soluciones" class="dropdown-link">Infraestructura y Datacenter</a>
<a href="#soluciones" class="dropdown-link">Networking y Comunicaciones</a>
<a href="#soluciones" class="dropdown-link">Seguridad Informática</a>
<a href="#soluciones" class="dropdown-link">Almacenamiento (Storage)</a>
<a href="#soluciones" class="dropdown-link">Cableado Estructurado</a>
<a href="#soluciones" class="dropdown-link">Energía y Respaldo</a>
<a href="#soluciones" class="dropdown-link">Servicios Cloud (Nube)</a>
<a href="#soluciones" class="dropdown-link">Licenciamiento Corporativo</a>
</div>
</div>
<a href="leasing.php" class="hover:text-red-500 transition-colors">Leasing</a>
<a href="#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>
<!-- Hero Leasing -->
<header class="relative pt-40 pb-20 overflow-hidden bg-slate-900/50">
<div class="max-w-7xl mx-auto px-4 text-center">
<span class="inline-block py-1 px-3 rounded-full bg-blue-600/20 text-blue-400 text-sm font-bold mb-6 tracking-widest uppercase">Soluciones Financieras TI</span>
<h1 class="text-5xl md:text-6xl font-bold text-white mb-8">
Arrendamiento Operativo <span class="text-blue-500">HP</span>
</h1>
<p class="text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
Modernice su infraestructura tecnológica sin comprometer su capital. Transforme sus proyectos TI de una inversión de capital (CapEx) a un gasto operativo (OpEx).
</p>
</div>
</header>
<!-- Beneficios del Arrendamiento -->
<section class="py-24">
<div class="max-w-7xl mx-auto px-4">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div class="space-y-12">
<div>
<h2 class="text-3xl font-bold text-white mb-6">¿Por qué elegir el Arrendamiento Operativo?</h2>
<p class="text-slate-400">En alianza con <strong>HPE Financial Services</strong>, ofrecemos un modelo que permite a su empresa mantenerse competitiva mediante la actualización constante de hardware.</p>
</div>
<div class="grid gap-8">
<div class="flex items-start">
<div class="w-12 h-12 rounded-lg gradient-blue flex-shrink-0 flex items-center justify-center text-white shadow-lg">
<i class="fa-solid fa-chart-line"></i>
</div>
<div class="ml-6">
<h4 class="text-white font-bold text-lg mb-2">Preservación del Capital</h4>
<p class="text-slate-500">Mantenga sus líneas de crédito bancarias libres para el giro principal de su negocio.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 rounded-lg gradient-blue flex-shrink-0 flex items-center justify-center text-white shadow-lg">
<i class="fa-solid fa-percent"></i>
</div>
<div class="ml-6">
<h4 class="text-white font-bold text-lg mb-2">Beneficios Tributarios</h4>
<p class="text-slate-500">Las cuotas de arrendamiento son 100% deducibles de impuestos como gasto operativo.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 rounded-lg gradient-blue flex-shrink-0 flex items-center justify-center text-white shadow-lg">
<i class="fa-solid fa-rotate"></i>
</div>
<div class="ml-6">
<h4 class="text-white font-bold text-lg mb-2">Evite la Obsolescencia</h4>
<p class="text-slate-500">Renueve sus servidores y laptops cada 36 o 48 meses, manteniendo siempre tecnología de punta.</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="card-glass p-8 rounded-3xl relative z-10 text-slate-200">
<img src="http://googleusercontent.com/image_collection/image_retrieval/14066477942521559011" alt="Asesoría Financiera IT" class="rounded-xl mb-6 w-full">
<h3 class="text-2xl font-bold text-white mb-4">HPE Financial Services</h3>
<p class="text-slate-400 text-sm mb-6 italic">"Asesoramos a nuestros clientes en la estructuración de contratos de arrendamiento a la medida de su flujo de caja."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-950 py-12 border-t border-slate-900">
<div class="max-w-7xl mx-auto px-4 text-center text-slate-500 text-sm">
<p>© <?php echo date("Y"); ?> Grupo Toshiko S.A.C. Todos los derechos reservados.</p>
</div>
</footer>
</body>
</html>