landing y Documents
This commit is contained in:
@@ -1,785 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export default function Landing() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState('inicio');
|
||||
const [contactForm, setContactForm] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
company: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
// Efecto de scroll para navbar
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
// Smooth scroll para navegación
|
||||
const scrollToSection = (sectionId) => {
|
||||
const element = document.getElementById(sectionId);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
setActiveSection(sectionId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleContactSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
alert('Gracias por tu mensaje. Nos pondremos en contacto contigo pronto.');
|
||||
setContactForm({ name: '', email: '', company: '', message: '' });
|
||||
};
|
||||
|
||||
// Estadísticas animadas
|
||||
const stats = [
|
||||
{ number: '500+', label: 'Agentes Aduanales', icon: '🏢' },
|
||||
{ number: '15,000+', label: 'Pedimentos Procesados', icon: '📋' },
|
||||
{ number: '99.9%', label: 'Uptime Garantizado', icon: '⚡' },
|
||||
{ number: '24/7', label: 'Soporte Especializado', icon: '🛡️' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Navbar flotante con efectos */}
|
||||
<header className={`fixed top-0 w-full z-50 transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-200'
|
||||
: 'bg-transparent'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center py-4">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-2xl font-bold">
|
||||
<span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
|
||||
EFC
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<nav className="hidden md:flex ml-10 space-x-8">
|
||||
{[
|
||||
{ id: 'inicio', label: 'Inicio' },
|
||||
{ id: 'caracteristicas', label: 'Características' },
|
||||
{ id: 'estadisticas', label: 'Confianza' },
|
||||
{ id: 'testimonios', label: 'Testimonios' },
|
||||
{ id: 'precios', label: 'Precios' },
|
||||
{ id: 'contacto', label: 'Contacto' }
|
||||
].map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
className={`text-sm font-medium transition-all duration-200 hover:scale-105 ${
|
||||
activeSection === item.id
|
||||
? 'text-indigo-600 border-b-2 border-indigo-600'
|
||||
: isScrolled
|
||||
? 'text-gray-700 hover:text-indigo-600'
|
||||
: 'text-white hover:text-indigo-200'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
to="/login"
|
||||
className="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
|
||||
>
|
||||
Acceder
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section con efectos */}
|
||||
<section id="inicio" className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-900 via-blue-800 to-purple-900 overflow-hidden">
|
||||
{/* Efectos de fondo animados */}
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/4 left-1/4 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"></div>
|
||||
<div className="absolute bottom-1/4 left-1/3 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-4000"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold text-white mb-6 leading-tight">
|
||||
<span className="bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent animate-pulse">
|
||||
EFC
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-3xl sm:text-4xl md:text-5xl bg-gradient-to-r from-blue-200 to-purple-200 bg-clip-text text-transparent">
|
||||
Para Agentes Aduanales e Importadores
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xl sm:text-2xl text-blue-100 mb-12 max-w-4xl mx-auto leading-relaxed">
|
||||
La plataforma líder para agentes aduanales e importadores que buscan
|
||||
<span className="font-semibold text-yellow-300"> digitalizar y revolucionar</span>
|
||||
{' '}sus procesos de comercio exterior. Gestiona pedimentos, documentación aduanal
|
||||
y expedientes fiscales con total seguridad y eficiencia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-6 justify-center mb-16">
|
||||
<Link
|
||||
to="/login"
|
||||
className="group inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full text-indigo-900 bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 shadow-2xl hover:shadow-yellow-500/25 transform hover:-translate-y-1 hover:scale-105"
|
||||
>
|
||||
<span className="mr-2">🚀</span>
|
||||
Acceder a la Plataforma
|
||||
<svg className="ml-2 -mr-1 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => scrollToSection('contacto')}
|
||||
className="group inline-flex items-center px-8 py-4 border-2 border-white/30 text-lg font-medium rounded-full text-white bg-white/10 backdrop-blur-md hover:bg-white/20 transition-all duration-300 shadow-xl hover:shadow-white/25"
|
||||
>
|
||||
<svg className="mr-2 w-5 h-5 group-hover:rotate-12 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M19 10a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Solicitar Demo Gratuita
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Estadísticas animadas */}
|
||||
<div id="estadisticas" className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20">
|
||||
{stats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center p-6 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="text-4xl mb-2">{stat.icon}</div>
|
||||
<div className="text-3xl font-bold text-white mb-1">{stat.number}</div>
|
||||
<div className="text-blue-200 text-sm">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<button
|
||||
onClick={() => scrollToSection('caracteristicas')}
|
||||
className="text-white/70 hover:text-white transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="relative bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
{/* Features Section */}
|
||||
<div id="caracteristicas" className="mt-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-extrabold text-gray-900 mb-4">
|
||||
Soluciones Especializadas para Comercio Exterior
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Herramientas diseñadas específicamente para las necesidades de agentes aduanales e importadores
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Feature 1 */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Gestión de Pedimentos
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Administra pedimentos de importación y exportación, documentos aduanales,
|
||||
clasificaciones arancelarias y toda la documentación requerida por el SAT.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Control por Organización
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Gestiona múltiples clientes importadores con espacios de trabajo separados,
|
||||
permisos granulares y control total sobre el acceso a la información.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Reportes Aduanales
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Genera reportes especializados para auditorías, seguimiento de operaciones
|
||||
aduanales, estadísticas de importación y cumplimiento normativo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<div className="mt-20 bg-indigo-50 rounded-2xl p-8 md:p-12">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-extrabold text-gray-900 mb-4">
|
||||
¿Por qué elegir EFC?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Diseñado por expertos en comercio exterior para profesionales del sector
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Cumplimiento</h3>
|
||||
<p className="text-gray-600 text-sm">Cumple con todas las regulaciones del SAT y normativas aduanales mexicanas</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Eficiencia</h3>
|
||||
<p className="text-gray-600 text-sm">Reduce hasta 70% el tiempo en gestión documental y procesos administrativos</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Seguridad</h3>
|
||||
<p className="text-gray-600 text-sm">Cifrado de extremo a extremo y controles de acceso empresariales</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Soporte</h3>
|
||||
<p className="text-gray-600 text-sm">Soporte especializado con conocimiento profundo en comercio exterior</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonios Section */}
|
||||
<div id="testimonios" className="mt-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-extrabold text-gray-900 mb-4">
|
||||
Lo que dicen nuestros clientes
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Agentes aduanales e importadores que ya transformaron su operación con EFC
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-indigo-600 font-semibold">JM</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h4 className="font-semibold text-gray-900">José María González</h4>
|
||||
<p className="text-gray-600 text-sm">Agente Aduanal Patente 1234</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 italic">
|
||||
"EFC ha revolucionado nuestra operación. La gestión de pedimentos es ahora 60% más rápida
|
||||
y tenemos control total sobre todos nuestros clientes importadores."
|
||||
</p>
|
||||
<div className="flex mt-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-indigo-600 font-semibold">LR</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h4 className="font-semibold text-gray-900">Laura Rodríguez</h4>
|
||||
<p className="text-gray-600 text-sm">Directora de Comercio Exterior</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 italic">
|
||||
"Como importador, necesitábamos una solución que nos diera visibilidad completa de nuestros procesos.
|
||||
EFC nos permite colaborar eficientemente con nuestro agente aduanal."
|
||||
</p>
|
||||
<div className="flex mt-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-indigo-600 font-semibold">CT</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h4 className="font-semibold text-gray-900">Carlos Torres</h4>
|
||||
<p className="text-gray-600 text-sm">Agente Aduanal Patente 5678</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 italic">
|
||||
"La seguridad y el cumplimiento normativo de EFC nos dan tranquilidad total.
|
||||
Nuestros clientes valoran mucho la transparencia que ofrecemos ahora."
|
||||
</p>
|
||||
<div className="flex mt-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Precios Section */}
|
||||
<div id="precios" className="mt-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-extrabold text-gray-900 mb-4">
|
||||
Planes diseñados para tu crecimiento
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Desde agencias pequeñas hasta grandes corporaciones
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Plan Básico */}
|
||||
<div className="bg-white rounded-lg shadow-md p-8 border border-gray-200">
|
||||
<div className="text-center">
|
||||
<h3 className="text-2xl font-semibold text-gray-900 mb-2">Básico</h3>
|
||||
<p className="text-gray-600 mb-4">Para agencias pequeñas</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900">$2,999</span>
|
||||
<span className="text-gray-600">/mes</span>
|
||||
</div>
|
||||
<ul className="text-left space-y-3 mb-8">
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Hasta 5 usuarios
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
50GB almacenamiento
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Gestión de pedimentos
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Soporte por email
|
||||
</li>
|
||||
</ul>
|
||||
<button className="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition duration-200">
|
||||
Comenzar prueba gratuita
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Plan Profesional */}
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 border-2 border-indigo-500 relative">
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<span className="bg-indigo-500 text-white px-4 py-1 rounded-full text-sm font-medium">
|
||||
Más Popular
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h3 className="text-2xl font-semibold text-gray-900 mb-2">Profesional</h3>
|
||||
<p className="text-gray-600 mb-4">Para agencias en crecimiento</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900">$5,999</span>
|
||||
<span className="text-gray-600">/mes</span>
|
||||
</div>
|
||||
<ul className="text-left space-y-3 mb-8">
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Hasta 25 usuarios
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
200GB almacenamiento
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Todas las funciones básicas
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Reportes avanzados
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Soporte prioritario
|
||||
</li>
|
||||
</ul>
|
||||
<button className="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition duration-200">
|
||||
Comenzar prueba gratuita
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Plan Empresarial */}
|
||||
<div className="bg-white rounded-lg shadow-md p-8 border border-gray-200">
|
||||
<div className="text-center">
|
||||
<h3 className="text-2xl font-semibold text-gray-900 mb-2">Empresarial</h3>
|
||||
<p className="text-gray-600 mb-4">Para grandes corporaciones</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900">$12,999</span>
|
||||
<span className="text-gray-600">/mes</span>
|
||||
</div>
|
||||
<ul className="text-left space-y-3 mb-8">
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Usuarios ilimitados
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
1TB almacenamiento
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Todas las funciones
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
API personalizada
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Soporte 24/7
|
||||
</li>
|
||||
</ul>
|
||||
<button className="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition duration-200">
|
||||
Contactar ventas
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contacto Section */}
|
||||
<div id="contacto" className="mt-20 bg-white rounded-2xl shadow-lg p-8 md:p-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="text-3xl font-extrabold text-gray-900 mb-6">
|
||||
¿Listo para transformar tu operación?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 mb-8">
|
||||
Nuestro equipo de expertos en comercio exterior está aquí para ayudarte.
|
||||
Contáctanos y descubre cómo EFC puede optimizar tus procesos aduanales.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Teléfono</h3>
|
||||
<p className="text-gray-600">+52 (55) 1234-5678</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Email</h3>
|
||||
<p className="text-gray-600">contacto@efc.com.mx</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Oficina</h3>
|
||||
<p className="text-gray-600">Ciudad de México, México</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form onSubmit={handleContactSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nombre completo *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
required
|
||||
value={contactForm.name}
|
||||
onChange={(e) => setContactForm({...contactForm, name: e.target.value})}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="Tu nombre completo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email corporativo *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
value={contactForm.email}
|
||||
onChange={(e) => setContactForm({...contactForm, email: e.target.value})}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="tu.email@empresa.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Empresa / Agencia Aduanal
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
value={contactForm.company}
|
||||
onChange={(e) => setContactForm({...contactForm, company: e.target.value})}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="Nombre de tu empresa"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Mensaje *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={4}
|
||||
required
|
||||
value={contactForm.message}
|
||||
onChange={(e) => setContactForm({...contactForm, message: e.target.value})}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="Cuéntanos sobre tus necesidades..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-indigo-600 text-white py-3 px-6 rounded-md hover:bg-indigo-700 transition duration-200 font-medium"
|
||||
>
|
||||
Enviar mensaje
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-20 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 md:p-12 text-center text-white">
|
||||
<h2 className="text-3xl font-extrabold mb-4">
|
||||
¿Listo para digitalizar tu operación aduanal?
|
||||
</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Únete a los agentes aduanales e importadores que ya confían en EFC
|
||||
para gestionar sus procesos de comercio exterior de manera eficiente y segura.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
to="/login"
|
||||
className="inline-flex items-center px-8 py-4 border border-white text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 transition duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
|
||||
>
|
||||
Comenzar Ahora
|
||||
<svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</Link>
|
||||
<button className="inline-flex items-center px-8 py-4 border-2 border-white text-lg font-medium rounded-md text-white bg-transparent hover:bg-white hover:text-indigo-600 transition duration-200">
|
||||
<svg className="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
Contactar Ventas
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<div className="mt-20 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 md:p-12 text-center text-white">
|
||||
<h2 className="text-3xl font-extrabold mb-4">
|
||||
¿Listo para digitalizar tu operación aduanal?
|
||||
</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Únete a los agentes aduanales e importadores que ya confían en EFC
|
||||
para gestionar sus procesos de comercio exterior de manera eficiente y segura.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
to="/login"
|
||||
className="inline-flex items-center px-8 py-4 border border-white text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 transition duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
|
||||
>
|
||||
Comenzar Ahora
|
||||
<svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</Link>
|
||||
<a
|
||||
href="#contacto"
|
||||
className="inline-flex items-center px-8 py-4 border-2 border-white text-lg font-medium rounded-md text-white bg-transparent hover:bg-white hover:text-indigo-600 transition duration-200"
|
||||
>
|
||||
<svg className="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
Contactar Ventas
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-white mt-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<h3 className="text-2xl font-bold mb-4">
|
||||
<span className="text-indigo-400">EFC</span>
|
||||
</h3>
|
||||
<p className="text-gray-300 mb-4">
|
||||
La plataforma líder para agentes aduanales e importadores.
|
||||
Digitaliza y optimiza tus procesos de comercio exterior con total seguridad.
|
||||
</p>
|
||||
<p className="text-gray-400 text-sm">
|
||||
Desarrollado con ❤️ por <span className="text-indigo-400 font-semibold">@Aduanasoft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Producto</h4>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">Características</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">Precios</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">Seguridad</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Soporte</h4>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#contacto" className="text-gray-300 hover:text-white transition duration-200">Contacto</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">Documentación</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">Centro de ayuda</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition duration-200">Estado del servicio</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
|
||||
<p className="text-gray-400 text-sm">
|
||||
© 2025 EFC by @Aduanasoft. Todos los derechos reservados.
|
||||
</p>
|
||||
<div className="flex space-x-6 mt-4 md:mt-0">
|
||||
<a href="#" className="text-gray-400 hover:text-white transition duration-200">
|
||||
<span className="sr-only">Twitter</span>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition duration-200">
|
||||
<span className="sr-only">LinkedIn</span>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition duration-200">
|
||||
<span className="sr-only">GitHub</span>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user