-
-
0{service.id}
-
-
-
+ {/* Top accent line */}
+
+
+ {/* Header row */}
+
+
+
-
+
+ 0{service.id}
+
-
{service.title}
-
{service.description}
+
{service.title}
+
+ {service.description}
+
+
+ {/* Feature list */}
+
+ {service.features.map((f: string) => (
+ -
+
+
+ {f}
+
+
+ ))}
+
);
})}
@@ -61,4 +93,4 @@ export const Services = ({ isNavyBg }: ThemeProps) => {
);
-};
\ No newline at end of file
+};
diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
new file mode 100644
index 0000000..945458d
--- /dev/null
+++ b/src/components/Stack.tsx
@@ -0,0 +1,116 @@
+import { motion } from 'framer-motion';
+import type { ThemeProps } from '../types';
+
+const stackGroups = [
+ {
+ label: 'FRONTEND',
+ items: ['React', 'TypeScript', 'Next.js', 'Tailwind CSS', 'Vite'],
+ },
+ {
+ label: 'BACKEND',
+ items: ['Node.js', 'Python', 'Express', 'FastAPI', 'NestJS'],
+ },
+ {
+ label: 'DATOS',
+ items: ['PostgreSQL', 'MongoDB', 'Redis', 'Prisma', 'Elasticsearch'],
+ },
+ {
+ label: 'CLOUD & OPS',
+ items: ['AWS', 'Docker', 'GitHub Actions', 'Terraform', 'Linux'],
+ },
+ {
+ label: 'INTEGRACIONES',
+ items: ['REST', 'GraphQL', 'Stripe', 'OAuth 2.0', 'Webhooks'],
+ },
+];
+
+export const Stack = ({ isNavyBg }: ThemeProps) => {
+ const bg = isNavyBg ? '#0f1520' : '#f9f9f7';
+ const text = isNavyBg ? '#eef0f4' : '#0a0a0a';
+ const sub = isNavyBg ? 'rgba(255,255,255,0.35)' : '#6a6866';
+ const border = isNavyBg ? 'rgba(255,255,255,0.07)' : '#dddbd5';
+ const tagBg = isNavyBg ? 'rgba(255,255,255,0.04)' : '#f0efec';
+
+ return (
+
+
+
+ {/* Header */}
+
+
+
+
+ Las herramientas son el medio
+
+
+ Las herramientas son el medio.
El sistema es el fin.
+
+
+
+ Elegimos la tecnología correcta para cada problema. No hay un stack universal.
+
+
+
+ {/* Stack groups */}
+
+ {stackGroups.map((group, i) => (
+
+
+ {group.label}
+
+
+ {group.items.map(item => (
+
+ {item}
+
+ ))}
+
+
+ ))}
+
+
+ {/* Footnote */}
+
+ Estas son las herramientas con las que trabajamos actualmente. La elección depende siempre del problema, no de la preferencia.
+
+
+ );
+};
diff --git a/src/components/SystemMap.tsx b/src/components/SystemMap.tsx
new file mode 100644
index 0000000..b221473
--- /dev/null
+++ b/src/components/SystemMap.tsx
@@ -0,0 +1,226 @@
+import { useState } from 'react';
+
+interface Node {
+ id: string;
+ label: string;
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+ type: 'main' | 'side';
+ desc: string;
+}
+
+interface Edge {
+ from: string;
+ to: string;
+ type: 'main' | 'side';
+}
+
+const NODES: Node[] = [
+ { id: 'frontend', label: 'FRONTEND', x: 80, y: 16, w: 160, h: 38, type: 'main', desc: 'Portales, apps y paneles:interfaces donde el usuario opera' },
+ { id: 'api', label: 'API GATEWAY', x: 80, y: 108, w: 160, h: 38, type: 'main', desc: 'Seguridad, ruteo, rate limiting y versionado unificados' },
+ { id: 'logic', label: 'LÓGICA DE NEGOCIO', x: 80, y: 200, w: 160, h: 38, type: 'main', desc: 'Reglas de negocio, validaciones, procesamiento y orquestación' },
+ { id: 'db', label: 'BASE DE DATOS', x: 80, y: 292, w: 160, h: 38, type: 'main', desc: 'Persistencia diseñada para tu modelo:SQL, NoSQL, caché' },
+ { id: 'infra', label: 'INFRAESTRUCTURA', x: 80, y: 384, w: 160, h: 36, type: 'main', desc: 'Nube, contenedores, CI/CD y observabilidad operacional' },
+ { id: 'payments', label: 'PAGOS', x: 8, y: 172, w: 62, h: 28, type: 'side', desc: 'Stripe, Conekta:flujo de cobro integrado' },
+ { id: 'erp', label: 'ERP / CRM', x: 8, y: 222, w: 62, h: 28, type: 'side', desc: 'SAP, Odoo:sincronización bidireccional' },
+ { id: 'auth', label: 'ACCESO', x: 250, y: 84, w: 62, h: 28, type: 'side', desc: 'SSO, JWT, OAuth 2.0:identidad y permisos por rol' },
+ { id: 'external', label: 'EXTERNOS', x: 250, y: 134, w: 62, h: 28, type: 'side', desc: 'APIs de terceros:logística, notificaciones, reportes' },
+];
+
+const EDGES: Edge[] = [
+ { from: 'frontend', to: 'api', type: 'main' },
+ { from: 'api', to: 'logic', type: 'main' },
+ { from: 'logic', to: 'db', type: 'main' },
+ { from: 'db', to: 'infra', type: 'main' },
+ { from: 'payments', to: 'logic', type: 'side' },
+ { from: 'erp', to: 'logic', type: 'side' },
+ { from: 'auth', to: 'api', type: 'side' },
+ { from: 'external', to: 'api', type: 'side' },
+];
+
+function nodeCenter(n: Node) {
+ return { cx: n.x + n.w / 2, cy: n.y + n.h / 2 };
+}
+
+function edgeLine(edge: Edge): { x1: number; y1: number; x2: number; y2: number } {
+ const from = NODES.find(n => n.id === edge.from)!;
+ const to = NODES.find(n => n.id === edge.to)!;
+ const fc = nodeCenter(from);
+ const tc = nodeCenter(to);
+ if (edge.type === 'main') {
+ return { x1: fc.cx, y1: from.y + from.h, x2: tc.cx, y2: to.y };
+ }
+ if (from.x < to.x) {
+ return { x1: from.x + from.w, y1: fc.cy, x2: to.x, y2: tc.cy };
+ }
+ return { x1: from.x, y1: fc.cy, x2: to.x + to.w, y2: tc.cy };
+}
+
+function isConnected(nodeId: string, activeId: string | null) {
+ if (!activeId || nodeId === activeId) return false;
+ return EDGES.some(e =>
+ (e.from === activeId && e.to === nodeId) ||
+ (e.to === activeId && e.from === nodeId),
+ );
+}
+
+function isEdgeActive(edge: Edge, activeId: string | null) {
+ if (!activeId) return false;
+ return edge.from === activeId || edge.to === activeId;
+}
+
+const TOOLTIP_W = 172;
+const TAIL_H = 9;
+const TAIL_W = 14;
+
+function tooltipHeight(desc: string): number {
+ const charsPerLine = Math.floor((TOOLTIP_W - 26) / 6.3); // ~aprox chars por línea a 10.5px
+ const lines = Math.ceil(desc.length / charsPerLine);
+ return 14 + 16 + lines * 17 + 14; // paddingTop + label + líneas + paddingBottom
+}
+
+export function SystemMap({ isNavyBg = true }: { isNavyBg?: boolean }) {
+ const [active, setActive] = useState
(null);
+
+ const RED = '#e50914';
+ const dimStroke = isNavyBg ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.12)';
+ const defStroke = isNavyBg ? 'rgba(255,255,255,0.25)' : 'rgba(0,31,91,0.3)';
+ const connStroke = 'rgba(229,9,20,0.45)';
+ const descText = isNavyBg ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.65)';
+ const tooltipBg = isNavyBg ? '#0a1628' : '#ffffff';
+ const tooltipBorder = isNavyBg ? 'rgba(255,255,255,0.12)' : 'rgba(0,31,91,0.15)';
+ void tooltipBorder;
+ const activeDesc = NODES.find(n => n.id === active);
+
+ return (
+
+
+
+
+ RECURSOS
+
+
+ Pensamiento de ingeniería.
+
+
+ Perspectivas sobre arquitectura de software, sistemas empresariales y decisiones técnicas
+ que impactan la operación real de los negocios.
+
+
+
+
+ {/* Artículos */}
+
+
+
+ PRÓXIMOS ARTÍCULOS
+
+
+ {articulos.map((art, i) => (
+
+ {/* Thumbnail */}
+
+
{ (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+ />
+ {/* Categoria badge encima */}
+
{art.categoria}
+
+
+ {art.titulo}
+
+
+ {art.desc}
+
+
+ {art.fecha}
+
+
+ ))}
+
+
+
+
+ El blog está en preparación. Los artículos llegarán pronto.
+
+
+
+
+ PRODUCTOS
+
+
+ Software diseñado para operar.
+
+
+ Módulos y licencias listos para implementar, respaldados por la misma ingeniería
+ con la que construimos sistemas a medida.
+
+
+
+
+ {/* Producto — comentado hasta tener contenido real */}
+ {/*
+
+
+
+
+
NOMBRE DEL PRODUCTO
+
Tu producto aquí
+
+ Descripción del producto. Qué resuelve, para quién está diseñado y qué lo hace diferente.
+ Agrega aquí los detalles que quieres que el cliente vea antes de solicitar una demo.
+
+
+
+
+ {/* Texto */}
+
+
+ Software 100%{' '}
+
+ Mexicano
+
+ {' '}
+ de clase mundial.
+
+
+ Rynext Technologies nació de una convicción: México tiene el talento para construir
+ software empresarial que compita con cualquier firma en el mundo. No adaptamos
+ herramientas extranjeras diseñamos sistemas propios, con las tecnologías más
+ actuales, para la realidad operativa de los negocios mexicanos.
+
+
+
+ {/* Imagen del equipo */}
+
+ {/* Acento rojo desplazado atrás */}
+
+ {/* Imagen con corte diagonal */}
+ 
+
+
+
+ ¿Por qué Rynext Technologies?
+
+
+ {[
+ { num: '01', titulo: 'Diseño desde la raíz', desc: 'Cada sistema empieza con un análisis profundo de la operación. No adaptamos plantillas, diseñamos desde cero para el contexto específico del negocio.' },
+ { num: '02', titulo: 'Equipo técnico propio', desc: 'Sin intermediarios. El equipo que analiza tu operación es el mismo que diseña la arquitectura y escribe el código.' },
+ { num: '03', titulo: 'Enfoque en producción', desc: 'No entregamos prototipos. Entregamos sistemas listos para operar con carga real, datos reales y usuarios reales.' },
+ ].map((item, i) => (
+
+ {item.num}
+ {item.titulo}
+ {item.desc}
+
+ ))}
+
+
+
+ Los principios que guían cada proyecto.
+
+
+ {valores.map((v, i) => (
+
+
+ {v.num}
+
+ {v.titulo}
+ {v.desc}
+
+ ))}
+
+