feat: landing page completa de RyNext con React, Tailwind v4 y Vite

src/components/Footer.tsx

@@ -0,0 +1,95 @@
+import type { ThemeProps } from '../types';
+
+export const Footer = ({ isNavyBg }: ThemeProps) => {
+  const isDark = isNavyBg;
+
+  return (
+    <footer className={`border-t px-6 py-14 md:px-12 transition-colors duration-500 ${
+      isDark
+        ? 'border-white/10 bg-[linear-gradient(135deg,#001f5b,#0a2b78)] text-white'
+        : 'border-brand-navy/10 bg-white text-brand-black'
+    }`}>
+      <div className={`mx-auto grid max-w-7xl gap-8 text-sm md:grid-cols-5 ${isDark ? 'text-white' : 'text-brand-navy'}`}>
+        
+        <div className="md:col-span-2">
+          <div className="mb-4 flex items-center gap-3">
+            <img
+              src={isDark ? '/icons/Logo_blanco.svg' : '/icons/Logo_negro.svg'}
+              alt="RyNext logo"
+              className="h-9 w-auto object-contain"
+            />
+            <div className="flex items-center">
+              <span className={`font-display text-xl font-extrabold tracking-tight ${
+                isDark ? 'text-white' : 'text-brand-black'
+              }`}>
+                Ry<span className="text-brand-red">Next</span>
+              </span>
+              <span className={`ml-2 text-xs font-semibold ${isDark ? 'text-slate-300' : 'text-brand-navy/75'}`}>
+                — Software Studio
+              </span>
+            </div>
+          </div>
+
+          <p className={`max-w-md text-[13px] leading-6 ${isDark ? 'text-slate-200' : 'text-brand-navy/75'}`}>
+            Diseñamos productos y plataformas con foco en velocidad, estabilidad y crecimiento real de negocio.
+          </p>
+
+          <div className="mt-4 grid gap-2 sm:grid-cols-2">
+            <div className={`rounded-xl border px-3 py-2 ${isDark ? 'border-white/10 bg-white/5' : 'border-brand-navy/10 bg-[#001f5b]/5'}`}>
+              <p className="text-[11px] font-semibold tracking-[0.08em] text-sky-500">Operación</p>
+              <p className={`mt-1 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>MX • LATAM • remoto</p>
+            </div>
+            <div className={`rounded-xl border px-3 py-2 ${isDark ? 'border-white/10 bg-white/5' : 'border-brand-navy/10 bg-[#001f5b]/5'}`}>
+              <p className="text-[11px] font-semibold tracking-[0.08em] text-sky-500">Entrega</p>
+              <p className={`mt-1 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>Sprints • roadmap • support</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Columna Servicios */}
+        <div>
+          <p className="mb-3 text-[11px] font-semibold tracking-[0.08em] text-sky-500">Servicios</p>
+          <ul className={`space-y-2 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>
+            <li>Software a medida</li>
+            <li>Plataformas web</li>
+            <li>Integraciones y APIs</li>
+            <li>Arquitectura cloud</li>
+          </ul>
+        </div>
+
+        {/* Columna Contacto */}
+        <div>
+          <p className="mb-3 text-[11px] font-semibold tracking-[0.08em] text-sky-500">Contacto</p>
+          <ul className={`space-y-2 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>
+            <li>
+              <a href="mailto:[email protected]?subject=Consulta%20RyNext" className="underline decoration-current/40 underline-offset-4 transition hover:text-brand-blue">
+                soporte@rynext.com.mx
+              </a>
+            </li>
+            <li>Cancún, Quintana Roo, México</li>
+            <li>Reserva de proyecto en 48h</li>
+          </ul>
+        </div>
+
+        {/* Columna Horario */}
+        <div>
+          <p className="mb-3 text-[11px] font-semibold tracking-[0.08em] text-sky-500">Horario</p>
+          <ul className={`space-y-2 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>
+            <li>Lun–Vie 9:00–18:00</li>
+            <li>Reuniones por agenda</li>
+            <li>Soporte de proyecto</li>
+            <li>Consultoría técnica</li>
+          </ul>
+        </div>
+
+      </div>
+
+      {/* Copyright */}
+      <div className={`mx-auto mt-8 flex max-w-7xl flex-col items-center justify-between gap-4 border-t pt-6 text-[13px] sm:flex-row ${isDark ? 'border-white/10' : 'border-brand-navy/10'}`}>
+        <div className={isDark ? 'text-slate-200' : 'text-brand-navy/80'}>
+          © {new Date().getFullYear()} RyNext. Todos los derechos reservados.
+        </div>
+      </div>
+    </footer>
+  );
+};