937 lines
47 KiB
JavaScript
937 lines
47 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { colors, tailwindClasses } from '../theme';
|
|
|
|
export default function LandingAnimated() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [activeSection, setActiveSection] = useState('inicio');
|
|
const [visibleElements, setVisibleElements] = useState(new Set());
|
|
const [contactForm, setContactForm] = useState({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
message: ''
|
|
});
|
|
|
|
const observerRef = useRef(null);
|
|
const sectionsRef = useRef({});
|
|
|
|
// Configurar Intersection Observer para animaciones y navegación activa
|
|
useEffect(() => {
|
|
// Observer para animaciones de elementos
|
|
const animationObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const elementId = entry.target.dataset.animate;
|
|
if (elementId) {
|
|
setVisibleElements(prev => new Set([...prev, elementId]));
|
|
}
|
|
}
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -100px 0px'
|
|
}
|
|
);
|
|
|
|
// Observer para navegación activa
|
|
const navigationObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveSection(entry.target.id);
|
|
}
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.3,
|
|
rootMargin: '-20% 0px -70% 0px'
|
|
}
|
|
);
|
|
|
|
// Observar elementos para animaciones
|
|
const animatedElements = document.querySelectorAll('[data-animate]');
|
|
animatedElements.forEach(el => animationObserver.observe(el));
|
|
|
|
// Observar secciones para navegación
|
|
const sections = document.querySelectorAll('section[id]');
|
|
sections.forEach(section => navigationObserver.observe(section));
|
|
|
|
return () => {
|
|
animationObserver.disconnect();
|
|
navigationObserver.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
// 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',
|
|
block: 'start'
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleContactSubmit = (e) => {
|
|
e.preventDefault();
|
|
alert('Gracias por tu mensaje. Nos pondremos en contacto contigo pronto.');
|
|
setContactForm({ name: '', email: '', company: '', message: '' });
|
|
};
|
|
|
|
// Clase de animación condicional
|
|
const getAnimationClass = (elementId, baseClass = '') => {
|
|
return visibleElements.has(elementId)
|
|
? `${baseClass} animate-fade-in-up opacity-100 translate-y-0`
|
|
: `${baseClass} opacity-0 translate-y-8`;
|
|
};
|
|
|
|
// 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" style={{ backgroundColor: '#F2F4F7' }}>
|
|
{/* 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-clip-text text-transparent"
|
|
style={{
|
|
background: `linear-gradient(to right, #1B2A41, #4DA6FF)`,
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent'
|
|
}}
|
|
>
|
|
EFC
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
<nav className="hidden md:flex ml-10 space-x-8">
|
|
{[
|
|
{ id: 'inicio', label: 'Inicio' },
|
|
{ id: 'estadisticas', label: 'Confianza' },
|
|
{ id: 'caracteristicas', label: 'Características' },
|
|
{ id: 'testimonios', label: 'Testimonios' },
|
|
{ id: 'precios', label: 'Precios' },
|
|
{ id: 'contacto', label: 'Contacto' }
|
|
].map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => scrollToSection(item.id)}
|
|
className={`relative text-sm font-medium transition-all duration-300 hover:scale-105 group`}
|
|
style={{
|
|
color: activeSection === item.id
|
|
? '#1B2A41'
|
|
: isScrolled
|
|
? '#333333'
|
|
: 'white'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (activeSection !== item.id) {
|
|
e.target.style.color = isScrolled ? '#1B2A41' : '#4DA6FF';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (activeSection !== item.id) {
|
|
e.target.style.color = isScrolled ? '#333333' : 'white';
|
|
}
|
|
}}
|
|
>
|
|
{item.label}
|
|
<span
|
|
className={`absolute -bottom-1 left-0 h-0.5 transition-all duration-300 ${
|
|
activeSection === item.id ? 'w-full' : 'w-0 group-hover:w-full'
|
|
}`}
|
|
style={{ backgroundColor: '#1B2A41' }}
|
|
></span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
to="/login"
|
|
className="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 text-white"
|
|
style={{
|
|
background: 'linear-gradient(to right, #1B2A41, #4DA6FF)',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.background = 'linear-gradient(to right, #162234, #1976D2)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.background = 'linear-gradient(to right, #1B2A41, #4DA6FF)';
|
|
}}
|
|
>
|
|
Acceder
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Section con efectos de gradiente animado */}
|
|
<section id="inicio" className="relative min-h-screen flex items-center overflow-hidden">
|
|
{/* Background con gradientes animados */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: 'linear-gradient(135deg, #1B2A41 0%, #263549 50%, #1976D2 100%)'
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
<div className="absolute inset-0 opacity-20">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 text-center">
|
|
<div className="space-y-8">
|
|
<h1
|
|
data-animate="hero-title"
|
|
className={`text-5xl sm:text-6xl md:text-7xl font-extrabold text-white transition-all duration-1000 ${
|
|
visibleElements.has('hero-title')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
>
|
|
<span className="block">
|
|
<span
|
|
className="bg-clip-text text-transparent"
|
|
style={{
|
|
background: 'linear-gradient(to right, white, #64B5F6)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent'
|
|
}}
|
|
>
|
|
EFC
|
|
</span>
|
|
</span>
|
|
<span
|
|
className="block text-3xl sm:text-4xl md:text-5xl mt-4 bg-clip-text text-transparent"
|
|
style={{
|
|
background: 'linear-gradient(to right, #64B5F6, white)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent'
|
|
}}
|
|
>
|
|
Para Agentes Aduanales
|
|
</span>
|
|
<span
|
|
className="block text-3xl sm:text-4xl md:text-5xl bg-clip-text text-transparent"
|
|
style={{
|
|
background: 'linear-gradient(to right, white, #64B5F6)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent'
|
|
}}
|
|
>
|
|
e Importadores
|
|
</span>
|
|
</h1>
|
|
|
|
<p
|
|
data-animate="hero-subtitle"
|
|
className={`text-xl sm:text-2xl max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-300 ${
|
|
visibleElements.has('hero-subtitle')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
style={{ color: '#64B5F6' }}
|
|
>
|
|
La plataforma líder desarrollada por
|
|
<span className="font-bold text-white"> @AduanaSoft</span> para
|
|
<span className="font-semibold" style={{ color: '#FF9800' }}> digitalizar y optimizar</span>
|
|
{' '}todos tus procesos de comercio exterior con tecnología de vanguardia
|
|
</p>
|
|
|
|
<div
|
|
data-animate="hero-buttons"
|
|
className={`flex flex-col sm:flex-row gap-6 justify-center transition-all duration-1000 delay-500 ${
|
|
visibleElements.has('hero-buttons')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
>
|
|
<Link
|
|
to="/login"
|
|
className="group inline-flex items-center px-8 py-4 text-lg font-semibold rounded-full transition-all duration-300 shadow-2xl hover:shadow-3xl transform hover:-translate-y-1 hover:scale-105"
|
|
style={{
|
|
color: '#1B2A41',
|
|
background: 'linear-gradient(to right, white, #F2F4F7)'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.background = 'linear-gradient(to right, #F2F4F7, white)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.background = 'linear-gradient(to right, white, #F2F4F7)';
|
|
}}
|
|
>
|
|
<span>Comenzar Ahora</span>
|
|
<svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" 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('caracteristicas')}
|
|
className="group inline-flex items-center px-8 py-4 text-lg font-semibold rounded-full text-white bg-transparent border-2 border-white/30 hover:border-white hover:bg-white/10 transition-all duration-300 backdrop-blur-sm"
|
|
>
|
|
<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="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>
|
|
<span>Ver Demo</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Floating cards con efectos */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
|
{[
|
|
{ icon: '🚀', title: 'Rápido', desc: 'Procesamiento instantáneo' },
|
|
{ icon: '🔒', title: 'Seguro', desc: 'Cifrado de nivel bancario' },
|
|
{ icon: '📊', title: 'Inteligente', desc: 'IA para optimización' }
|
|
].map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
data-animate={`hero-card-${index}`}
|
|
className={`bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/20 transition-all duration-500 hover:scale-105 hover:shadow-2xl ${
|
|
visibleElements.has(`hero-card-${index}`)
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
style={{ transitionDelay: `${700 + index * 200}ms` }}
|
|
>
|
|
<div className="text-4xl mb-3">{feature.icon}</div>
|
|
<h3 className="text-white font-semibold text-lg mb-2">{feature.title}</h3>
|
|
<p className="text-sm" style={{ color: '#64B5F6' }}>{feature.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator animado */}
|
|
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
|
<button
|
|
onClick={() => scrollToSection('estadisticas')}
|
|
className="text-white/70 hover:text-white transition-colors duration-200"
|
|
>
|
|
<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>
|
|
|
|
{/* Sección de Estadísticas y Confianza */}
|
|
<section id="estadisticas" className="py-20" style={{ background: 'linear-gradient(to right, #F2F4F7, white)' }}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div
|
|
data-animate="stats-header"
|
|
className={`text-center mb-16 transition-all duration-1000 ${
|
|
visibleElements.has('stats-header')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
>
|
|
<h2 className="text-4xl font-extrabold mb-4" style={{ color: '#333333' }}>
|
|
Más de <span style={{ color: '#1B2A41' }}>500 empresas</span> confían en nosotros
|
|
</h2>
|
|
<p className="text-xl max-w-3xl mx-auto" style={{ color: '#7A7A7A' }}>
|
|
Desarrollado por <span className="font-bold" style={{ color: '#1B2A41' }}>@AduanaSoft</span>,
|
|
líderes en tecnología aduanal con más de 10 años de experiencia
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats con animaciones */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
|
{stats.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
data-animate={`stat-${index}`}
|
|
className={`text-center p-6 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-700 hover:scale-105 border border-gray-100 ${
|
|
visibleElements.has(`stat-${index}`)
|
|
? 'opacity-100 translate-y-0 scale-100'
|
|
: 'opacity-0 translate-y-10 scale-95'
|
|
}`}
|
|
style={{ transitionDelay: `${index * 200}ms` }}
|
|
>
|
|
<div className="text-4xl mb-4 animate-pulse">{stat.icon}</div>
|
|
<div className="text-3xl font-bold mb-2" style={{ color: '#1B2A41' }}>{stat.number}</div>
|
|
<div className="font-medium" style={{ color: '#7A7A7A' }}>{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* AduanaSoft Info */}
|
|
<div
|
|
data-animate="aduanasoft-info"
|
|
className={`rounded-3xl p-8 md:p-12 text-white transition-all duration-1000 ${
|
|
visibleElements.has('aduanasoft-info')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
style={{ background: 'linear-gradient(to right, #1B2A41, #263549)' }}
|
|
>
|
|
<div className="grid md:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<h3 className="text-3xl font-bold mb-6">Acerca de AduanaSoft</h3>
|
|
<div className="space-y-4 text-indigo-100">
|
|
{[
|
|
"10+ años especializados en software aduanal",
|
|
"Equipo experto en comercio exterior y tecnología",
|
|
"Certificación SAT y cumplimiento normativo total",
|
|
"Soporte 24/7 con especialistas aduanales"
|
|
].map((item, idx) => (
|
|
<div key={idx} className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center mt-1">
|
|
<svg className="w-3 h-3" 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>
|
|
</div>
|
|
<p><strong>{item.split(' ')[0]} {item.split(' ')[1]}</strong> {item.split(' ').slice(2).join(' ')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20">
|
|
<div className="text-6xl mb-4">🏆</div>
|
|
<h4 className="text-2xl font-bold mb-2">Líder del Mercado</h4>
|
|
<p className="text-indigo-100">
|
|
Reconocidos como la mejor solución tecnológica para agentes aduanales en México
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Características con efectos interactivos */}
|
|
<section id="caracteristicas" className="py-20 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div
|
|
data-animate="features-header"
|
|
className={`text-center mb-16 transition-all duration-1000 ${
|
|
visibleElements.has('features-header')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
>
|
|
<h2 className="text-4xl font-extrabold text-gray-900 mb-4">
|
|
Soluciones Especializadas para Comercio Exterior
|
|
</h2>
|
|
<p className="text-xl text-gray-600">
|
|
Herramientas diseñadas específicamente para las necesidades de agentes aduanales e importadores
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
icon: '📋',
|
|
title: 'Gestión de Pedimentos',
|
|
description: 'Administra pedimentos de importación y exportación, documentos aduanales, clasificaciones arancelarias y toda la documentación requerida por el SAT.',
|
|
features: ['Validación automática SAT', 'Clasificación arancelaria', 'Cálculo de impuestos', 'Trazabilidad completa']
|
|
},
|
|
{
|
|
icon: '🏢',
|
|
title: 'Control por Organización',
|
|
description: 'Gestiona múltiples clientes importadores con espacios de trabajo separados, permisos granulares y control total sobre el acceso a la información.',
|
|
features: ['Multi-tenancy', 'Roles y permisos', 'Auditoría completa', 'Segregación de datos']
|
|
},
|
|
{
|
|
icon: '📊',
|
|
title: 'Reportes Aduanales',
|
|
description: 'Genera reportes especializados para auditorías, seguimiento de operaciones aduanales, estadísticas de importación y cumplimiento normativo.',
|
|
features: ['Dashboards en tiempo real', 'Exportación múltiple', 'KPIs personalizados', 'Alertas automáticas']
|
|
}
|
|
].map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
data-animate={`feature-${index}`}
|
|
className={`group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-700 overflow-hidden border border-gray-100 hover:scale-105 ${
|
|
visibleElements.has(`feature-${index}`)
|
|
? 'opacity-100 translate-y-0 rotate-0'
|
|
: 'opacity-0 translate-y-10 rotate-3'
|
|
}`}
|
|
style={{
|
|
transitionDelay: `${index * 300}ms`,
|
|
borderColor: visibleElements.has(`feature-${index}`) ? '#4DA6FF' : '#e5e7eb'
|
|
}}
|
|
>
|
|
<div className="p-8">
|
|
<div className={`text-5xl mb-6 transition-all duration-500 ${
|
|
visibleElements.has(`feature-${index}`)
|
|
? 'transform scale-100 rotate-0'
|
|
: 'transform scale-75 rotate-12'
|
|
}`}>
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 transition-colors duration-300" style={{
|
|
color: visibleElements.has(`feature-${index}`) ? '#1B2A41' : '#333333'
|
|
}}>
|
|
{feature.title}
|
|
</h3>
|
|
<p className="mb-6 leading-relaxed" style={{ color: '#7A7A7A' }}>
|
|
{feature.description}
|
|
</p>
|
|
<ul className="space-y-2">
|
|
{feature.features.map((item, idx) => (
|
|
<li key={idx} className="flex items-center text-sm" style={{ color: '#7A7A7A' }}>
|
|
<svg className="w-4 h-4 mr-2 flex-shrink-0" style={{ color: '#2E7D32' }} 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>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="p-4 transition-colors duration-300" style={{
|
|
background: 'linear-gradient(to right, #F2F4F7, #FFFFFF)'
|
|
}}>
|
|
<button className="font-semibold text-sm transition-colors duration-200" style={{
|
|
color: '#1B2A41'
|
|
}}>
|
|
Conocer más →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Precios */}
|
|
<section id="precios" className="py-20 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div
|
|
data-animate="pricing-header"
|
|
className={`text-center mb-16 transition-all duration-1000 ${
|
|
visibleElements.has('pricing-header')
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
>
|
|
<h2 className="text-4xl font-extrabold text-gray-900 mb-4">
|
|
Planes diseñados para tu crecimiento
|
|
</h2>
|
|
<p className="text-xl text-gray-600">
|
|
Desde agentes independientes hasta grandes corporativos
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
name: 'Starter',
|
|
// price: '$2,999',
|
|
period: '/mes',
|
|
description: 'Perfecto para agentes aduanales independientes',
|
|
features: [
|
|
'Hasta 50 pedimentos/mes',
|
|
'5 GB almacenamiento',
|
|
'Soporte por email',
|
|
'Reportes básicos',
|
|
'2 usuarios'
|
|
],
|
|
popular: false
|
|
},
|
|
{
|
|
name: 'Professional',
|
|
// price: '$5,999',
|
|
period: '/mes',
|
|
description: 'Ideal para agencias medianas',
|
|
features: [
|
|
'Hasta 200 pedimentos/mes',
|
|
'20 GB almacenamiento',
|
|
'Soporte prioritario',
|
|
'Reportes avanzados',
|
|
'10 usuarios',
|
|
'API acceso',
|
|
'Integraciones SAT'
|
|
],
|
|
popular: true
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
price: 'Personalizado',
|
|
period: '',
|
|
description: 'Para grandes corporativos',
|
|
features: [
|
|
'Pedimentos ilimitados',
|
|
'Almacenamiento ilimitado',
|
|
'Soporte 24/7 dedicado',
|
|
'Reportes personalizados',
|
|
'Usuarios ilimitados',
|
|
'API completa',
|
|
'Implementación dedicada',
|
|
'SLA garantizado'
|
|
],
|
|
popular: false
|
|
}
|
|
].map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
data-animate={`plan-${index}`}
|
|
className={`relative rounded-2xl border-2 p-8 transition-all duration-700 hover:scale-105 ${
|
|
plan.popular
|
|
? 'shadow-xl'
|
|
: 'border-gray-200 bg-white shadow-lg hover:shadow-xl'
|
|
} ${
|
|
visibleElements.has(`plan-${index}`)
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 translate-y-10'
|
|
}`}
|
|
style={{
|
|
transitionDelay: `${index * 200}ms`,
|
|
borderColor: plan.popular ? '#1B2A41' : '#e5e7eb',
|
|
background: plan.popular ? 'linear-gradient(to bottom, #F2F4F7, white)' : 'white'
|
|
}}
|
|
>
|
|
{plan.popular && (
|
|
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
|
<span className="text-white px-4 py-2 rounded-full text-sm font-semibold animate-pulse" style={{
|
|
background: 'linear-gradient(to right, #1B2A41, #263549)'
|
|
}}>
|
|
Más Popular
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-center mb-8">
|
|
<h3 className="text-2xl font-bold mb-2" style={{ color: '#333333' }}>{plan.name}</h3>
|
|
<p className="mb-4" style={{ color: '#7A7A7A' }}>{plan.description}</p>
|
|
{/*
|
|
<div className="mb-4">
|
|
<span className="text-4xl font-extrabold" style={{ color: '#1B2A41' }}>{plan.price}</span>
|
|
<span style={{ color: '#7A7A7A' }}>{plan.period}</span>
|
|
</div>
|
|
*/}
|
|
</div>
|
|
|
|
<ul className="space-y-3 mb-8">
|
|
{plan.features.map((feature, idx) => (
|
|
<li key={idx} className="flex items-center">
|
|
<svg className="w-5 h-5 text-green-500 mr-3" 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>
|
|
<span className="text-gray-700">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
onClick={() => scrollToSection('contacto')}
|
|
className={`w-full py-3 px-6 rounded-full font-semibold transition-all duration-200 ${
|
|
plan.popular
|
|
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-700 hover:to-purple-700 shadow-lg hover:shadow-xl'
|
|
: 'bg-gray-100 text-gray-900 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{plan.name === 'Enterprise' ? 'Contactar Ventas' : 'Comenzar Prueba'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contacto */}
|
|
<section id="contacto" className="relative py-20 overflow-hidden" style={{
|
|
background: 'linear-gradient(135deg, #1B2A41 0%, #263549 50%, #1B2A41 100%)'
|
|
}}>
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute inset-0" style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%234DA6FF' fillOpacity='0.3'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
|
|
}}></div>
|
|
</div>
|
|
|
|
{/* Floating elements */}
|
|
<div className="absolute top-10 left-10 w-20 h-20 rounded-full opacity-20" style={{ backgroundColor: '#4DA6FF' }}></div>
|
|
<div className="absolute bottom-10 right-10 w-32 h-32 rounded-full opacity-15" style={{ backgroundColor: '#F57C00' }}></div>
|
|
<div className="absolute top-1/2 left-1/4 w-16 h-16 rounded-full opacity-10" style={{ backgroundColor: '#2E7D32' }}></div>
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-extrabold text-white mb-6">
|
|
¿Listo para <span style={{ color: '#4DA6FF' }}>transformar</span> tu operación aduanal?
|
|
</h2>
|
|
<p className="text-xl md:text-2xl max-w-3xl mx-auto" style={{ color: '#64B5F6' }}>
|
|
Únete a más de 500 empresas que ya optimizaron sus procesos con EFC
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
<div
|
|
data-animate="contact-info"
|
|
className={`transition-all duration-1000 ${
|
|
visibleElements.has('contact-info')
|
|
? 'opacity-100 translate-x-0'
|
|
: 'opacity-0 -translate-x-10'
|
|
}`}
|
|
>
|
|
{/* Card de información de contacto */}
|
|
<div className="bg-white/10 backdrop-blur-md rounded-3xl p-8 border border-white/20">
|
|
<div className="mb-8">
|
|
<h3 className="text-2xl font-bold text-white mb-4">
|
|
Hablemos de tu proyecto
|
|
</h3>
|
|
<p className="text-lg" style={{ color: '#64B5F6' }}>
|
|
Nuestros expertos en comercio exterior están listos para ayudarte
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{[
|
|
{
|
|
icon: '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',
|
|
title: 'Teléfono',
|
|
info: '656 616 2527',
|
|
subtitle: 'Lun - Vie, 9:00 AM - 7:00 PM'
|
|
},
|
|
{
|
|
icon: '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',
|
|
title: 'Email',
|
|
info: 'info@aduanasoft.com.mx',
|
|
subtitle: 'Respuesta en menos de 2 horas'
|
|
},
|
|
{
|
|
icon: 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z',
|
|
title: 'Oficinas',
|
|
info: 'Ciudad Juárez, Chihuahua',
|
|
subtitle: 'Visitas con cita previa'
|
|
}
|
|
].map((contact, idx) => (
|
|
<div key={idx} className="flex items-start space-x-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-all duration-300">
|
|
<div className="w-14 h-14 flex items-center justify-center rounded-full" style={{ backgroundColor: '#4DA6FF' }}>
|
|
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={contact.icon} />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-bold text-white text-lg">{contact.title}</h4>
|
|
<p className="font-semibold mb-1" style={{ color: '#4DA6FF' }}>{contact.info}</p>
|
|
<p className="text-sm" style={{ color: '#64B5F6' }}>{contact.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Botón adicional para WhatsApp */}
|
|
<div className="mt-8 pt-6 border-t border-white/20">
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-center w-full py-4 px-6 rounded-xl font-semibold text-white transition-all duration-300 transform hover:scale-105"
|
|
style={{
|
|
background: 'linear-gradient(45deg, #25D366, #128C7E)'
|
|
}}
|
|
>
|
|
<svg className="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
|
|
</svg>
|
|
Chatear por WhatsApp
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
data-animate="contact-form"
|
|
className={`bg-white rounded-2xl shadow-2xl p-8 transition-all duration-1000 ${
|
|
visibleElements.has('contact-form')
|
|
? 'opacity-100 translate-x-0'
|
|
: 'opacity-0 translate-x-10'
|
|
}`}
|
|
>
|
|
<h3 className="text-2xl font-bold mb-6" style={{ color: '#333333' }}>Solicita una demostración</h3>
|
|
<form onSubmit={handleContactSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#333333' }}>
|
|
Nombre completo
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={contactForm.name}
|
|
onChange={(e) => setContactForm({...contactForm, name: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200"
|
|
style={{
|
|
focusRingColor: '#4DA6FF',
|
|
outline: 'none'
|
|
}}
|
|
onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
|
|
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
|
|
placeholder="Tu nombre"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#333333' }}>
|
|
Email corporativo
|
|
</label>
|
|
<input
|
|
type="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-lg focus:ring-2 focus:border-transparent transition-all duration-200"
|
|
onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
|
|
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
|
|
placeholder="tu@empresa.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#333333' }}>
|
|
Empresa
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={contactForm.company}
|
|
onChange={(e) => setContactForm({...contactForm, company: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200"
|
|
onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
|
|
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
|
|
placeholder="Nombre de tu empresa"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#333333' }}>
|
|
Mensaje
|
|
</label>
|
|
<textarea
|
|
rows="4"
|
|
value={contactForm.message}
|
|
onChange={(e) => setContactForm({...contactForm, message: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200"
|
|
onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
|
|
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
|
|
placeholder="Cuéntanos sobre tu operación aduanal..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full text-white py-3 px-6 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
|
|
style={{
|
|
background: 'linear-gradient(to right, #1B2A41, #263549)'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.background = 'linear-gradient(to right, #263549, #1B2A41)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.background = 'linear-gradient(to right, #1B2A41, #263549)';
|
|
}}
|
|
>
|
|
Enviar solicitud
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="text-white py-12" style={{ backgroundColor: '#1B2A41' }}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<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 style={{
|
|
background: 'linear-gradient(to right, #4DA6FF, #64B5F6)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent'
|
|
}}>
|
|
EFC
|
|
</span>
|
|
</h3>
|
|
<p className="mb-2 max-w-md" style={{ color: '#7A7A7A' }}>
|
|
Uso correcto <span className="font-semibold" style={{ color: '#4DA6FF' }}>Aduanasoft®</span>
|
|
</p>
|
|
<ul className="mb-4 text-sm text-gray-300 space-y-1">
|
|
<li><span className="font-bold text-white">+350</span> clientes en todo el país</li>
|
|
<li><span className="font-bold text-white">29 años</span> de experiencia</li>
|
|
</ul>
|
|
<div className="flex space-x-4">
|
|
<a href="https://www.facebook.com/AduanaSoftMX" target="_blank" rel="noopener noreferrer" className="transition-colors duration-200" style={{ color: '#7A7A7A' }} onMouseEnter={e => e.target.style.color = 'white'} onMouseLeave={e => e.target.style.color = '#7A7A7A'} title="Facebook">
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.595 0 0 .592 0 1.326v21.348C0 23.408.595 24 1.325 24h11.495v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.797.143v3.24l-1.918.001c-1.504 0-1.797.715-1.797 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.406 24 24 23.408 24 22.674V1.326C24 .592 23.406 0 22.675 0"/></svg>
|
|
</a>
|
|
<a href="https://www.instagram.com/aduanasoftjrz" target="_blank" rel="noopener noreferrer" className="transition-colors duration-200" style={{ color: '#7A7A7A' }} onMouseEnter={e => e.target.style.color = 'white'} onMouseLeave={e => e.target.style.color = '#7A7A7A'} title="Instagram">
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.334 3.608 1.308.974.974 1.246 2.241 1.308 3.608.058 1.266.069 1.646.069 4.85s-.012 3.584-.07 4.85c-.062 1.366-.334 2.633-1.308 3.608-.974.974-2.241 1.246-3.608 1.308-1.266.058-1.646.069-4.85.069s-3.584-.012-4.85-.07c-1.366-.062-2.633-.334-3.608-1.308-.974-.974-1.246-2.241-1.308-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-3.584.07-4.85c.062-1.366.334-2.633 1.308-3.608C4.515 2.497 5.782 2.225 7.148 2.163 8.414 2.105 8.794 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.771.131 4.659.363 3.678 1.344 2.697 2.325 2.465 3.437 2.406 4.718 2.347 5.998 2.334 6.407 2.334 12c0 5.593.013 6.002.072 7.282.059 1.281.291 2.393 1.272 3.374.981.981 2.093 1.213 3.374 1.272 1.28.059 1.689.072 7.282.072s6.002-.013 7.282-.072c1.281-.059 2.393-.291 3.374-1.272.981-.981 1.213-2.093 1.272-3.374.059-1.28.072-1.689.072-7.282s-.013-6.002-.072-7.282c-.059-1.281-.291-2.393-1.272-3.374C21.393.363 20.281.131 19 .072 17.719.013 17.31 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-11.845a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>
|
|
</a>
|
|
<a href="https://www.linkedin.com/in/aduanasoft" target="_blank" rel="noopener noreferrer" className="transition-colors duration-200" style={{ color: '#7A7A7A' }} onMouseEnter={e => e.target.style.color = 'white'} onMouseLeave={e => e.target.style.color = '#7A7A7A'} title="LinkedIn">
|
|
<svg className="w-6 h-6" 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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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>
|
|
</div>
|
|
<div className="mt-6 text-sm text-gray-300">
|
|
<div className="mb-1"><b>Correo informes:</b> <a href="mailto:info@aduanasoft.com.mx" className="underline hover:text-white">info@aduanasoft.com.mx</a></div>
|
|
<div className="mb-1"><b>Teléfonos:</b></div>
|
|
<ul className="ml-4">
|
|
<li>Cd Juárez: <a href="tel:6566162527" className="underline hover:text-white">656 616 2527</a></li>
|
|
<li>CDMX: <a href="tel:5563585502" className="underline hover:text-white">55 63 58 5502</a></li>
|
|
<li>USA: <a href="tel:9157744393" className="underline hover:text-white">915 774 43 93</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold mb-4">Producto</h4>
|
|
<ul className="space-y-2 text-gray-400">
|
|
<li><button onClick={() => scrollToSection('caracteristicas')} className="hover:text-white transition-colors duration-200">Características</button></li>
|
|
<li><button onClick={() => scrollToSection('precios')} className="hover:text-white transition-colors duration-200">Precios</button></li>
|
|
<li><a href="#" className="hover:text-white transition-colors duration-200">Integraciónes</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors duration-200">API</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold mb-4">Soporte</h4>
|
|
<ul className="space-y-2 text-gray-400">
|
|
<li><button onClick={() => scrollToSection('contacto')} className="hover:text-white transition-colors duration-200">Contacto</button></li>
|
|
<li><a href="#" className="hover:text-white transition-colors duration-200">Documentación</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors duration-200">Centro de Ayuda</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors duration-200">Status</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
|
<p>
|
|
© 2025 EFC by <span className="font-semibold text-indigo-400">@AduanaSoft</span>.
|
|
Todos los derechos reservados. | Solución especializada para Agentes Aduanales e Importadores.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|