feat/Landingpage

src/pages/LandingAnimated.jsx

@@ -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 */}
+        {/* Background con imagen */}
-        <div 
+        <div className="absolute inset-0">
-          className="absolute inset-0"
+          {/* Imagen de fondo */}
-          style={{
+          <div 
-            background: 'linear-gradient(135deg, #1B2A41 0%, #263549 50%, #1976D2 100%)'
+            className="absolute inset-0 bg-center bg-no-repeat bg-cover"
-          }}
+            style={{
-        >
+              backgroundImage: 'url("images/empresaria001.webp")', // Cambia esta ruta
-          <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+              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={{
+<section id="contacto" className="relative py-20 overflow-hidden">
-        background: 'linear-gradient(135deg, #1B2A41 0%, #263549 50%, #1B2A41 100%)'
+  {/* Background con imagen */}
-      }}>
+  <div className="absolute inset-0">
-        {/* Background Pattern */}
+    {/* Misma imagen de fondo que la sección inicio */}
-        <div className="absolute inset-0 opacity-10">
+    <div 
-          <div className="absolute inset-0" style={{
+      className="absolute inset-0 bg-center bg-no-repeat bg-cover"
-            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")`
+      style={{
-          }}></div>
+        backgroundImage: 'url("images/sistemagestion002.webp")',
-        </div>
+        backgroundColor: '#1B2A41',
-        
+      }}
-        {/* Floating elements */}
+    >
-        <div className="absolute w-20 h-20 rounded-full top-10 left-10 opacity-20" style={{ backgroundColor: '#4DA6FF' }}></div>
+      {/* Overlay más oscuro para mejor legibilidad en formulario */}
-        <div className="absolute w-32 h-32 rounded-full bottom-10 right-10 opacity-15" style={{ backgroundColor: '#F57C00' }}></div>
+      <div 
-        <div className="absolute w-16 h-16 rounded-full top-1/2 left-1/4 opacity-10" style={{ backgroundColor: '#2E7D32' }}></div>
+        className="absolute inset-0"
-        
+        style={{
-        <div className="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
+          background: 'linear-gradient(to bottom, rgba(27, 42, 65, 0.85), rgba(27, 42, 65, 0.7))',
-          <div className="mb-16 text-center">
+        }}
-            <h2 className="mb-6 text-4xl font-extrabold text-white md:text-5xl">
+      ></div>
-              ¿Listo para <span style={{ color: '#4DA6FF' }}>transformar</span> tu operación aduanal?
+    </div>
-            </h2>
+    
-            <p className="max-w-3xl mx-auto text-xl md:text-2xl" style={{ color: '#64B5F6' }}>
+    {/* Background Pattern */}
-              Únete a más de 500 empresas que ya optimizaron sus procesos con EFC
+    <div className="absolute inset-0 opacity-10">
-            </p>
+      <div className="absolute inset-0" style={{
-          </div>
+        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>