Files
MVE/views/home/inicio.php

524 lines
16 KiB
PHP

<?php
require_once __DIR__ . '/../../config/database.php';
$conn = getConnection();
// Cabeceras de seguridad
header("X-Frame-Options: DENY");
header("X-Content-Type-Options: nosniff");
header("X-XSS-Protection: 1; mode=block");
header("Referrer-Policy: no-referrer");
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com;");
$sql = "SELECT TOP 1 * FROM configuracion_sistema";
$stmt = sqlsrv_prepare($conn, $sql);
if (!$stmt || !sqlsrv_execute($stmt)) {
die("Error al ejecutar la consulta de configuración.");
}
$config = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
// Variables con valores por defecto - Branding más sutil
$nombre = $config['nombre_plataforma'] ?? 'Sistema de Gestión de Importaciones';
$siglas = $config['siglas'] ?? 'AduanaSoft';
$logo = $config['logo_url'] ?? 'assets/img/logo_aduanasoft.png';
$color1 = explode(',', $config['colores_primarios'] ?? '#0f172a,#334155')[0]; // Negro suave
$color2 = explode(',', $config['colores_primarios'] ?? '#0f172a,#334155')[1]; // Gris slate
$mantenimiento = $config['modo_mantenimiento'] ?? 0;
$mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encuentra en mantenimiento temporal. Por favor, vuelve más tarde.';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title><?= htmlspecialchars($siglas) ?> | Gestión de Importaciones</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plataforma integral para la gestión de importaciones, trámites aduaneros y control de mercancías">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Iconos -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: <?= $color1 ?>;
--secondary: <?= $color2 ?>;
--accent: #10b981;
--warning: #f59e0b;
--surface: #ffffff;
--background: #f8fafc;
--text: #1e293b;
--text-muted: #64748b;
--border: #e2e8f0;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--background);
font-family: 'Poppins', sans-serif;
color: var(--text);
line-height: 1.7;
margin: 0;
font-weight: 400;
}
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-brand {
font-weight: 600;
font-size: 1.25rem;
color: var(--primary) !important;
}
.nav-link {
color: var(--text-muted) !important;
font-weight: 500;
padding: 0.5rem 1rem !important;
border-radius: 8px;
transition: all 0.2s ease;
}
.nav-link:hover, .nav-link.active {
color: var(--primary) !important;
background-color: #f1f5f9;
}
.hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
min-height: 90vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"><circle cx="30" cy="30" r="1"/></g></svg>') repeat;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-20px, -20px) rotate(180deg); }
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: 1.5rem;
color: white;
line-height: 1.2;
}
.hero .lead {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 3rem;
max-width: 600px;
}
.btn-modern {
padding: 12px 28px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary-modern {
background: white;
color: var(--primary);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-primary-modern:hover {
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.btn-outline-modern {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-outline-modern:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
border-color: white;
}
.stats {
background: var(--surface);
margin-top: -4rem;
position: relative;
z-index: 3;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 3rem 0;
}
.stat-item {
text-align: center;
padding: 1rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
display: block;
line-height: 1;
}
.stat-label {
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
margin-top: 0.5rem;
}
.section-modern {
padding: 5rem 0;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text);
margin-bottom: 1rem;
text-align: center;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
text-align: center;
max-width: 600px;
margin: 0 auto 4rem;
}
.feature-card {
background: var(--surface);
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
border: 1px solid var(--border);
transition: all 0.3s ease;
height: 100%;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border-color: var(--accent);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--accent), #059669);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 1.5rem;
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.feature-description {
color: var(--text-muted);
line-height: 1.6;
}
.cta-section {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
text-align: center;
padding: 5rem 0;
}
footer {
background: var(--text);
color: #94a3b8;
padding: 2.5rem 0 1.5rem;
text-align: center;
}
.footer-brand {
font-size: 1.25rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
}
.footer-text {
font-size: 0.9rem;
line-height: 1.5;
}
@media (max-width: 768px) {
.hero {
min-height: 70vh;
text-align: center;
}
.stats {
margin-top: -2rem;
padding: 2rem 0;
}
.btn-modern {
width: 100%;
justify-content: center;
margin-bottom: 1rem;
}
.section-modern {
padding: 3rem 0;
}
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-shipping-fast me-2"></i><?= htmlspecialchars($siglas) ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="/IMPORTADORES/">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/IMPORTADORES/registro">Registro</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/IMPORTADORES/login">Iniciar Sesión</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- MANTENIMIENTO -->
<?php if ($mantenimiento): ?>
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;">
<i class="fas fa-tools fa-4x mb-4" style="color: var(--accent);"></i>
<h2 style="color: var(--text); margin-bottom: 1rem;">Sistema en Mantenimiento</h2>
<p style="color: var(--text-muted); max-width: 500px;"><?= htmlspecialchars($mensajeMantenimiento) ?></p>
</div>
<?php endif; ?>
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="hero-content">
<h1>Manifestación de Valor <span style="color: #10b981;">Electrónica</span></h1>
<p class="lead">
Simplifica tus trámites de MVE con nuestra plataforma especializada.
Desde la solicitud hasta la respuesta del SAT, gestiona todo digitalmente.
</p>
<div class="d-flex flex-column flex-md-row gap-3">
<a href="/IMPORTADORES/registro" class="btn-modern btn-primary-modern">
<i class="fas fa-rocket"></i>
Comenzar Gratis
</a>
<a href="#features" class="btn-modern btn-outline-modern">
<i class="fas fa-play"></i>
Ver Demo
</a>
</div>
</div>
</div>
<div class="col-lg-6 d-none d-lg-block text-center">
<i class="fas fa-chart-line" style="font-size: 15rem; color: rgba(255,255,255,0.1);"></i>
</div>
</div>
</div>
</section>
<!-- STATS -->
<div class="container">
<div class="stats">
<div class="row">
<div class="col-6 col-md-3">
<div class="stat-item">
<span class="stat-number">1,200+</span>
<div class="stat-label">Importadores</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="stat-item">
<span class="stat-number">25K+</span>
<div class="stat-label">MVE Procesadas</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="stat-item">
<span class="stat-number">98%</span>
<div class="stat-label">Satisfacción</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="stat-item">
<span class="stat-number">24/7</span>
<div class="stat-label">Soporte</div>
</div>
</div>
</div>
</div>
</div>
<!-- FEATURES -->
<section class="section-modern" id="features">
<div class="container">
<h2 class="section-title">MVE Digital Completa</h2>
<p class="section-subtitle">
Herramientas especializadas para gestionar eficientemente tu Manifestación de Valor Electrónica
</p>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-file-contract"></i>
</div>
<h5 class="feature-title">Solicitud MVE Automática</h5>
<p class="feature-description">
Genera automáticamente tu Manifestación de Valor Electrónica con base en los datos del pedimento y facturas.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-clock"></i>
</div>
<h5 class="feature-title">Seguimiento en Tiempo Real</h5>
<p class="feature-description">
Monitorea el estatus de tus MVE desde el envío hasta la respuesta del SAT con notificaciones automáticas.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-file-signature"></i>
</div>
<h5 class="feature-title">Firma Digital Integrada</h5>
<p class="feature-description">
Firma electrónicamente tus MVE con validación biométrica y cumplimiento normativo SAT.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-database"></i>
</div>
<h5 class="feature-title">Historial Completo</h5>
<p class="feature-description">
Mantén un registro detallado de todas tus MVE con expediente digital y documentación respaldatoria.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-calculator"></i>
</div>
<h5 class="feature-title">Validación Automática</h5>
<p class="feature-description">
Valida automáticamente precios, cantidades y valores con base de datos actualizada del SAT.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h5 class="feature-title">Cumplimiento Normativo</h5>
<p class="feature-description">
Garantiza el cumplimiento total con las disposiciones del SAT para MVE según la normatividad vigente.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container">
<h2 class="section-title" style="margin-bottom: 1rem;">¿Listo para digitalizar tus MVE?</h2>
<p class="section-subtitle" style="margin-bottom: 3rem;">
Únete a más de 1,200 importadores que ya gestionan sus Manifestaciones de Valor Electrónica digitalmente
</p>
<a href="/IMPORTADORES/registro" class="btn-modern btn-primary-modern">
<i class="fas fa-arrow-right"></i>
Comenzar Ahora
</a>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-brand"><?= htmlspecialchars($siglas) ?></div>
<div class="footer-text">
&copy; <?= date('Y') ?> Sistema de Gestión de Importaciones<br>
Optimizando el comercio internacional
</div>
</div>
</footer>
</body>
</html>