EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix/landingpage-ui-adjustment #11

Merged
jcedilloAS merged 4 commits from fix/landingpage-ui-adjustment into main 2025-12-12 22:00:02 +00:00
Conversation 0 Commits 4 Files Changed 6 +72 -41
3 changed files with 72 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 06ec641691 - Show all commits

BIN
public/images/empresaria001.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

BIN
public/images/sistemagestion002.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 MiB

113
src/pages/LandingAnimated.jsx
View File

@@ -13,6 +13,7 @@ export default function LandingAnimated() {
message: ''
});
const currentYear = new Date().getFullYear();
const observerRef = useRef(null);
const sectionsRef = useRef({});
@@ -101,7 +102,7 @@ export default function LandingAnimated() {
// Estadísticas animadas
const stats = [
{ number: '500+', label: 'Agentes Aduanales', icon: '🏢' },
{ number: '350+', label: 'Clientes', icon: '🏢' },
{ number: '15,000+', label: 'Pedimentos Procesados', icon: '📋' },
{ number: '99.9%', label: 'Uptime Garantizado', icon: '⚡' },
{ number: '24/7', label: 'Soporte Especializado', icon: '🛡️' }
@@ -220,14 +221,26 @@ export default function LandingAnimated() {
{/* Hero Section con efectos de gradiente animado */}
<section id="inicio" className="relative flex items-center min-h-screen 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>
{/* Background con imagen */}
<div className="absolute inset-0">
{/* Imagen de fondo */}
<div
className="absolute inset-0 bg-center bg-no-repeat bg-cover"
style={{
backgroundImage: 'url("images/empresaria001.webp")', // Cambia esta ruta
backgroundColor: '#1B2A41', // Color de respaldo
}}
>
{/* Overlay para oscurecer la imagen y mejorar legibilidad */}
<div
className="absolute inset-0"
style={{
background: 'linear-gradient(to bottom, rgba(27, 42, 65, 0.85), rgba(27, 42, 65, 0.7))',
}}
></div>
</div>
{/* Efectos adicionales */}
<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>
@@ -335,7 +348,7 @@ export default function LandingAnimated() {
{[
{ icon: '🚀', title: 'Rápido', desc: 'Procesamiento instantáneo' },
{ icon: '🔒', title: 'Seguro', desc: 'Cifrado de nivel bancario' },
{ icon: '📊', title: 'Inteligente', desc: 'IA para optimización' }
{ icon: '📊', title: 'Inteligente', desc: 'IA para optimización' },
].map((feature, index) => (
<div
key={index}
@@ -381,11 +394,11 @@ export default function LandingAnimated() {
}`}
>
<h2 className="mb-4 text-4xl font-extrabold" style={{ color: '#333333' }}>
Más de <span style={{ color: '#1B2A41' }}>500 empresas</span> confían en nosotros
Más de <span style={{ color: '#1B2A41' }}>350 empresas</span> confían en nosotros
</h2>
<p className="max-w-3xl mx-auto text-xl" 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
líderes en tecnología aduanal con más de 29 años de experiencia
</p>
</div>
@@ -421,10 +434,10 @@ export default function LandingAnimated() {
>
<div className="grid items-center gap-8 md:grid-cols-2">
<div>
<h3 className="mb-6 text-3xl font-bold">Acerca de AduanaSoft</h3>
<h3 className="mb-6 text-3xl font-bold">Acerca de Aduanasoft</h3>
<div className="space-y-4 text-indigo-100">
{[
"10+ años especializados en software aduanal",
"29+ 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"
@@ -685,30 +698,48 @@ export default function LandingAnimated() {
</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 w-20 h-20 rounded-full top-10 left-10 opacity-20" style={{ backgroundColor: '#4DA6FF' }}></div>
<div className="absolute w-32 h-32 rounded-full bottom-10 right-10 opacity-15" style={{ backgroundColor: '#F57C00' }}></div>
<div className="absolute w-16 h-16 rounded-full top-1/2 left-1/4 opacity-10" style={{ backgroundColor: '#2E7D32' }}></div>
<div className="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="mb-16 text-center">
<h2 className="mb-6 text-4xl font-extrabold text-white md:text-5xl">
¿Listo para <span style={{ color: '#4DA6FF' }}>transformar</span> tu operación aduanal?
</h2>
<p className="max-w-3xl mx-auto text-xl md:text-2xl" style={{ color: '#64B5F6' }}>
Únete a más de 500 empresas que ya optimizaron sus procesos con EFC
</p>
</div>
<section id="contacto" className="relative py-20 overflow-hidden">
{/* Background con imagen */}
<div className="absolute inset-0">
{/* Misma imagen de fondo que la sección inicio */}
<div
className="absolute inset-0 bg-center bg-no-repeat bg-cover"
style={{
backgroundImage: 'url("images/sistemagestion002.webp")',
backgroundColor: '#1B2A41',
}}
>
{/* Overlay más oscuro para mejor legibilidad en formulario */}
<div
className="absolute inset-0"
style={{
background: 'linear-gradient(to bottom, rgba(27, 42, 65, 0.85), rgba(27, 42, 65, 0.7))',
}}
></div>
</div>
{/* 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>
</div>
{/* Floating elements */}
{/* <div className="absolute w-20 h-20 rounded-full top-10 left-10 opacity-20" style={{ backgroundColor: '#4DA6FF' }}></div>
<div className="absolute w-32 h-32 rounded-full bottom-10 right-10 opacity-15" style={{ backgroundColor: '#F57C00' }}></div>
<div className="absolute w-16 h-16 rounded-full top-1/2 left-1/4 opacity-10" style={{ backgroundColor: '#2E7D32' }}></div> */}
<div className="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="mb-16 text-center">
<h2 className="mb-6 text-4xl font-extrabold text-white md:text-5xl">
¿Listo para <span style={{ color: '#4DA6FF' }}>transformar</span> tu operación aduanal?
</h2>
<p className="max-w-3xl mx-auto text-xl md:text-2xl" style={{ color: '#64B5F6' }}>
Únete a más de 350 empresas que ya optimizaron sus procesos con EFC
</p>
</div>
<div className="grid items-start grid-cols-1 gap-12 lg:grid-cols-2">
<div
@@ -899,10 +930,10 @@ export default function LandingAnimated() {
{/* <p className="max-w-md mb-2" style={{ color: '#7A7A7A' }}>
Uso correcto <span className="font-semibold" style={{ color: '#4DA6FF' }}>Aduanasoft®</span>
</p> */}
<ul className="mb-4 space-y-1 text-sm text-gray-300">
{/* <ul className="mb-4 space-y-1 text-sm text-gray-300">
<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>
</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>
@@ -948,7 +979,7 @@ export default function LandingAnimated() {
<div className="pt-8 mt-8 text-center text-gray-400 border-t border-gray-800">
<p>
&copy; 2025 EFC by <span className="font-semibold text-indigo-400">Aduanasoft®</span>.
&copy; {currentYear} EFC by <span className="font-semibold text-white">Aduanasoft®</span>.
Todos los derechos reservados. | Solución especializada para Agentes Aduanales e Importadores.
</p>
</div>