feat(all-deployment)
This commit is contained in:
Emmanuel Rojas committed
1 parent
e261394133
commit
4f0020bc10
39 files changed
+13182
-513
No files matched your search
@@ -0,0 +1,130 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
const layers = [
|
||||
{
|
||||
id: 'presentation',
|
||||
num: '01',
|
||||
title: 'PRESENTACIÓN',
|
||||
subtitle: 'La interfaz donde opera el usuario',
|
||||
description:
|
||||
'Portales de administración, apps web, paneles de monitoreo y puntos de venta. Construidos para adopción real, no para demos.',
|
||||
tech: ['React', 'Next.js', 'TypeScript', 'Tailwind', 'Mobile Web'],
|
||||
},
|
||||
{
|
||||
id: 'logic',
|
||||
num: '02',
|
||||
title: 'LÓGICA DE NEGOCIO',
|
||||
subtitle: 'Las reglas que gobiernan la operación',
|
||||
description:
|
||||
'Validaciones, cálculos, flujos de aprobación y orquestación de procesos. El código que representa cómo funciona tu negocio.',
|
||||
tech: ['Node.js', 'Python', 'REST APIs', 'GraphQL', 'Microservicios'],
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
num: '03',
|
||||
title: 'DATOS',
|
||||
subtitle: 'Persistencia y acceso a la información',
|
||||
description:
|
||||
'Modelo de datos diseñado para tu operación. Bases relacionales, NoSQL, caché y búsqueda de texto. Una sola fuente de verdad.',
|
||||
tech: ['PostgreSQL', 'MongoDB', 'Redis', 'Elasticsearch', 'Prisma'],
|
||||
},
|
||||
{
|
||||
id: 'infra',
|
||||
num: '04',
|
||||
title: 'INFRAESTRUCTURA',
|
||||
subtitle: 'La base que soporta el sistema',
|
||||
description:
|
||||
'Cloud, contenedores, pipelines de CI/CD y observabilidad. Diseñada para que el sistema esté siempre disponible y sea fácil de operar.',
|
||||
tech: ['AWS', 'Docker', 'GitHub Actions', 'Terraform', 'Monitoring'],
|
||||
},
|
||||
{
|
||||
id: 'integrations',
|
||||
num: '05',
|
||||
title: 'INTEGRACIONES',
|
||||
subtitle: 'Conexión con el ecosistema externo',
|
||||
description:
|
||||
'ERPs, sistemas de pago, servicios de mensajería, proveedores y APIs externas. El sistema habla con todo lo que el negocio necesita.',
|
||||
tech: ['Stripe', 'SAP / Odoo', 'OAuth 2.0', 'Webhooks', 'SMS / Email'],
|
||||
},
|
||||
];
|
||||
|
||||
export const Anatomy = ({ isNavyBg }: ThemeProps) => {
|
||||
const bg = isNavyBg ? '#0d1117' : '#f5f5f3';
|
||||
const text = isNavyBg ? '#eef0f4' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.45)' : '#6a6866';
|
||||
const border = isNavyBg ? 'rgba(255,255,255,0.08)' : '#dddbd5';
|
||||
|
||||
return (
|
||||
<section
|
||||
id="anatomy"
|
||||
aria-labelledby="anatomy-heading"
|
||||
style={{ background: bg, color: text, borderBottom: `1px solid ${border}` }}
|
||||
className="px-8 py-28 md:px-14 transition-colors duration-500"
|
||||
>
|
||||
<motion.div
|
||||
className="mx-auto max-w-7xl"
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: false, amount: 0.1 }}
|
||||
transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="mb-16">
|
||||
<h2
|
||||
id="anatomy-heading"
|
||||
className="text-headline"
|
||||
style={{ maxWidth: '24ch' }}
|
||||
>
|
||||
Todo sistema tiene<br /> las mismas capas.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Layers — always visible */}
|
||||
<div style={{ border: `1px solid ${border}`, borderRadius: 4, overflow: 'hidden' }}>
|
||||
{layers.map((layer, i) => (
|
||||
<motion.div
|
||||
key={layer.id}
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: i * 0.07 }}
|
||||
style={{
|
||||
borderBottom: i < layers.length - 1 ? `1px solid ${border}` : 'none',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '120px 1fr',
|
||||
gap: '0 32px',
|
||||
alignItems: 'start',
|
||||
padding: '32px 32px',
|
||||
}}
|
||||
>
|
||||
{/* Number */}
|
||||
<span
|
||||
className="font-display font-black"
|
||||
style={{ fontSize: 64, lineHeight: 1, color: '#e50914', letterSpacing: '-0.04em' }}
|
||||
>
|
||||
{layer.num}
|
||||
</span>
|
||||
|
||||
{/* Title + description */}
|
||||
<div style={{ paddingTop: 8 }}>
|
||||
<p
|
||||
className="font-display font-black mb-1"
|
||||
style={{ fontSize: 13, letterSpacing: '0.04em', color: text }}
|
||||
>
|
||||
{layer.title}
|
||||
</p>
|
||||
<p className="text-xs mb-3" style={{ color: sub }}>
|
||||
{layer.subtitle}
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed" style={{ color: sub, maxWidth: '60ch' }}>
|
||||
{layer.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import { type ReactNode } from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
children: ReactNode;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
variant?: 'primary' | 'secondary';
|
||||
className?: string;
|
||||
isNavyBg?: boolean;
|
||||
}
|
||||
|
||||
export const Button = ({ children, onClick, href, variant = 'primary', className = '', isNavyBg = false }: ButtonProps) => {
|
||||
const base = 'inline-flex items-center gap-3 px-8 py-4 text-base font-bold transition hover:scale-[1.02] cursor-pointer';
|
||||
|
||||
const styles = {
|
||||
primary: 'bg-brand-red text-white shadow-lg shadow-red-500/20 hover:bg-[#b60014]',
|
||||
secondary: isNavyBg
|
||||
? 'border border-white/15 bg-white/5 text-white hover:bg-white/10'
|
||||
: 'border border-brand-navy/15 text-brand-navy hover:border-brand-blue hover:text-brand-blue',
|
||||
};
|
||||
|
||||
const cls = `${base} ${styles[variant]} ${className}`;
|
||||
|
||||
if (href) {
|
||||
return <a href={href} className={cls}>{children}</a>;
|
||||
}
|
||||
|
||||
return <button onClick={onClick} className={cls}>{children}</button>;
|
||||
};
|
||||
@@ -2,7 +2,7 @@ import { X, Mail } from 'lucide-react';
|
||||
import type { ModalProps } from '../types';
|
||||
|
||||
const supportEmail = '[email protected]';
|
||||
const mailToHref = `mailto:${supportEmail}?subject=${encodeURIComponent('Consulta RyNext')}&body=${encodeURIComponent('Hola RyNext,\n\nQuiero agendar una conversación sobre un proyecto.\n\nGracias.')}`;
|
||||
const mailToHref = `mailto:${supportEmail}?subject=${encodeURIComponent('Consulta Rynext')}&body=${encodeURIComponent('Hola Rynext,\n\nQuiero agendar una conversación sobre un proyecto.\n\nGracias.')}`;
|
||||
|
||||
export const ContactModal = ({ isOpen, onClose, isNavyBg }: ModalProps) => {
|
||||
if (!isOpen) return null;
|
||||
@@ -28,7 +28,7 @@ export const ContactModal = ({ isOpen, onClose, isNavyBg }: ModalProps) => {
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-blue/20 text-brand-blue">
|
||||
<Mail size={24} />
|
||||
</div>
|
||||
<h3 className="mb-2 text-2xl font-bold">Ponte en Contacto</h3>
|
||||
<h3 className="mb-2 text-2xl font-bold">Hablemos de tu proyecto</h3>
|
||||
<p className={`mb-6 text-sm ${isNavyBg ? 'text-slate-300' : 'text-gray-600'}`}>
|
||||
Puedes escribirnos directamente a nuestro correo oficial de atención y tu cliente de correo se abrirá automáticamente.
|
||||
</p>
|
||||
@@ -40,7 +40,7 @@ export const ContactModal = ({ isOpen, onClose, isNavyBg }: ModalProps) => {
|
||||
<a
|
||||
href={mailToHref}
|
||||
className="block font-mono text-base font-medium underline decoration-brand-blue/50 underline-offset-4"
|
||||
aria-label="Enviar correo a soporte de RyNext"
|
||||
aria-label="Enviar correo a soporte de Rynext"
|
||||
>
|
||||
{supportEmail}
|
||||
</a>
|
||||
@@ -55,9 +55,13 @@ export const ContactModal = ({ isOpen, onClose, isNavyBg }: ModalProps) => {
|
||||
</a>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="cursor-pointer rounded-xl border border-brand-navy/15 bg-white px-4 py-3 text-sm font-bold text-brand-navy transition hover:border-brand-blue hover:text-brand-blue"
|
||||
className={`cursor-pointer rounded-xl border px-4 py-3 text-sm font-bold transition hover:border-brand-blue hover:text-brand-blue ${
|
||||
isNavyBg
|
||||
? 'border-white/20 bg-white/5 text-white'
|
||||
: 'border-brand-navy/15 bg-white text-brand-navy'
|
||||
}`}
|
||||
>
|
||||
Entendido
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
export const CookieBanner = ({ isNavyBg }: ThemeProps) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('rynext_cookies')) {
|
||||
const t = setTimeout(() => setVisible(true), 1200);
|
||||
return () => clearTimeout(t);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const accept = () => {
|
||||
localStorage.setItem('rynext_cookies', 'accepted');
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const bg = isNavyBg ? 'rgba(0,16,64,0.97)' : 'rgba(10,10,10,0.97)';
|
||||
const border = isNavyBg ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.08)';
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="Aviso de cookies"
|
||||
className="fixed bottom-6 left-1/2 z-50 w-[calc(100%-3rem)] max-w-xl -translate-x-1/2 px-6 py-4 shadow-2xl"
|
||||
style={{
|
||||
background: bg,
|
||||
border: `1px solid ${border}`,
|
||||
borderRadius: 6,
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'rgba(255,255,255,0.6)', maxWidth: '42ch' }}>
|
||||
Usamos cookies para mejorar tu experiencia en el sitio.
|
||||
Al continuar, aceptas su uso.{' '}
|
||||
<a href="/privacidad" className="underline transition hover:text-white" style={{ color: 'rgba(255,255,255,0.45)' }}>
|
||||
Política de privacidad
|
||||
</a>
|
||||
</p>
|
||||
<button
|
||||
onClick={accept}
|
||||
className="shrink-0 px-5 py-2 text-sm font-bold text-white transition hover:opacity-90"
|
||||
style={{ background: '#e50914', borderRadius: 3, border: 'none', cursor: 'pointer' }}
|
||||
>
|
||||
Aceptar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,28 +1,64 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { Button } from './Button';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
export const CtaBanner = ({ onOpenContact }: ThemeProps & { onOpenContact: () => void }) => {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-[linear-gradient(135deg,#001f5b,#0d2d78_50%,#005596)] px-6 py-24 text-white md:px-12">
|
||||
<div className="absolute -left-10 top-0 h-60 w-60 rounded-full bg-brand-red/20 blur-[120px]" />
|
||||
<div className="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-white/10 blur-[120px]" />
|
||||
<div className="absolute inset-x-0 top-0 h-16 rounded-b-[100%] bg-white/5" />
|
||||
interface CtaBannerProps extends ThemeProps {
|
||||
onOpenContact: () => void;
|
||||
}
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-5xl space-y-8 text-center">
|
||||
<h2 className="text-3xl font-black leading-tight tracking-tight font-display sm:text-6xl">
|
||||
¿Listo para dejar de construir con ruido y empezar con dirección?
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-lg font-normal text-sky-100 sm:text-xl">
|
||||
Agenda una conversación técnica con RyNext para revisar tu proyecto, tu stack y la ruta de evolución ideal.
|
||||
</p>
|
||||
<button
|
||||
onClick={onOpenContact}
|
||||
className="inline-flex cursor-pointer items-center gap-3 rounded-xl bg-white px-9 py-4 text-base font-bold text-brand-navy shadow-xl transition hover:scale-[1.03] hover:bg-gray-100"
|
||||
export const CtaBanner = ({ onOpenContact, isNavyBg }: CtaBannerProps) => {
|
||||
const bg = isNavyBg ? '#001f5b' : '#f9f9f7';
|
||||
const text = isNavyBg ? '#ffffff' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.45)';
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative overflow-hidden px-8 py-32 md:px-14 transition-colors duration-500"
|
||||
style={{ background: bg, color: text, borderBottom: `1px solid ${isNavyBg ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}` }}
|
||||
aria-labelledby="cta-heading"
|
||||
>
|
||||
{/* Subtle grid */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 bg-grid-lines text-white/[0.03]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
|
||||
<div className="relative mx-auto max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="text-center"
|
||||
>
|
||||
<span>Agendar</span>
|
||||
<ArrowRight size={18} />
|
||||
</button>
|
||||
<h2
|
||||
id="cta-heading"
|
||||
className="text-display mb-8"
|
||||
style={{ color: text }}
|
||||
>
|
||||
Construimos el sistema.<br /> Tú operas el negocio.
|
||||
</h2>
|
||||
|
||||
<p className="mx-auto mb-12 max-w-md text-base leading-relaxed" style={{ color: sub }}>
|
||||
Agenda una sesión técnica con nuestro equipo. Analizamos tu operación, identificamos los cuellos de botella y proponemos una ruta concreta de implementación.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-5">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onOpenContact}
|
||||
className={isNavyBg ? 'shadow-xl shadow-red-900/30' : ''}
|
||||
>
|
||||
Hablemos de tu proyecto <ArrowRight size={16} />
|
||||
</Button>
|
||||
<Button variant="secondary" href="mailto:[email protected]" isNavyBg={isNavyBg}>
|
||||
contacto@rynext.com.mx
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,120 @@
|
||||
import { ArrowUp } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import type { ThemeProps } from '../types';
|
||||
import { type Dispatch, type SetStateAction, useState, useEffect } from 'react';
|
||||
|
||||
const WHATSAPP_NUMBER = '521XXXXXXXXXX'; // ← reemplaza con el número real
|
||||
const WHATSAPP_MSG = encodeURIComponent('¿En qué podemos ayudarte?');
|
||||
|
||||
interface FloatingButtonsProps extends ThemeProps {
|
||||
setIsNavyBg: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const FloatingButtons = ({ isNavyBg, setIsNavyBg: _setIsNavyBg }: FloatingButtonsProps) => {
|
||||
const [showTop, setShowTop] = useState(false);
|
||||
const [showBubble, setShowBubble] = useState(false);
|
||||
const toggleBg = isNavyBg ? 'rgba(0,31,91,0.95)' : 'rgba(255,255,255,0.95)';
|
||||
const toggleBorder = isNavyBg ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.12)';
|
||||
const toggleColor = isNavyBg ? '#fbbf24' : '#001f5b';
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setShowTop(window.scrollY > 400);
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
const t = setTimeout(() => setShowBubble(true), 3000);
|
||||
return () => { window.removeEventListener('scroll', onScroll); clearTimeout(t); };
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Scroll to top — izquierda */}
|
||||
{showTop && (
|
||||
<button
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
aria-label="Volver arriba"
|
||||
className="fixed bottom-6 left-6 z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
|
||||
style={{
|
||||
background: toggleBg,
|
||||
border: `1px solid ${toggleBorder}`,
|
||||
backdropFilter: 'blur(8px)',
|
||||
cursor: 'pointer',
|
||||
color: toggleColor,
|
||||
}}
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="fixed bottom-6 right-6 z-50 flex flex-col items-center gap-3"
|
||||
aria-label="Acciones rápidas"
|
||||
>
|
||||
{/* WhatsApp + bubble wrapper */}
|
||||
<div style={{ position: 'relative' }}>
|
||||
<AnimatePresence>
|
||||
{showBubble && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10, scale: 0.92 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 6, scale: 0.95 }}
|
||||
transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 'calc(100% + 10px)',
|
||||
right: 0,
|
||||
filter: 'drop-shadow(0 4px 16px rgba(0,0,0,0.12))',
|
||||
}}>
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
borderRadius: 16,
|
||||
padding: '12px 36px 12px 16px',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
color: '#1a1a2e',
|
||||
whiteSpace: 'nowrap',
|
||||
position: 'relative',
|
||||
}}>
|
||||
¡Hola! ¿En qué podemos ayudarte?
|
||||
<button
|
||||
onClick={() => setShowBubble(false)}
|
||||
aria-label="Cerrar"
|
||||
style={{
|
||||
position: 'absolute', top: 6, right: 8,
|
||||
width: 20, height: 20, cursor: 'pointer', fontSize: 10,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: '#888',
|
||||
}}
|
||||
>✕</button>
|
||||
</div>
|
||||
{/* tail apuntando al botón */}
|
||||
<div style={{
|
||||
width: 14, height: 10,
|
||||
background: '#fff',
|
||||
clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
|
||||
position: 'absolute',
|
||||
bottom: -9,
|
||||
right: 16,
|
||||
}} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* WhatsApp */}
|
||||
<a
|
||||
href={`https://wa.me/${WHATSAPP_NUMBER}?text=${WHATSAPP_MSG}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Contactar por WhatsApp"
|
||||
className="flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
|
||||
style={{ background: '#25D366' }}
|
||||
>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="white" aria-hidden="true">
|
||||
<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-.347z"/>
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12c0 2.122.554 4.112 1.523 5.837L.057 23.882a.5.5 0 0 0 .611.61l6.109-1.457A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.721 9.721 0 0 1-4.965-1.362l-.356-.211-3.687.88.897-3.583-.231-.369A9.718 9.718 0 0 1 2.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+194
-82
@@ -1,95 +1,207 @@
|
||||
import { Mail, MapPin, MessageCircle } from 'lucide-react';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Sistemas', href: '#machinery' },
|
||||
{ label: 'Anatomía', href: '#anatomy' },
|
||||
{ label: 'Proceso', href: '#proceso' },
|
||||
{ label: 'Principios', href: '#principios' },
|
||||
];
|
||||
|
||||
export const Footer = ({ isNavyBg }: ThemeProps) => {
|
||||
const isDark = isNavyBg;
|
||||
const bg = isNavyBg ? '#001040' : '#0a0a0a';
|
||||
const sub = 'rgba(255,255,255,0.45)';
|
||||
const border = 'rgba(255,255,255,0.08)';
|
||||
|
||||
const handleNav = (href: string) => {
|
||||
const el = document.querySelector(href);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
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>
|
||||
<footer
|
||||
style={{ background: bg, borderTop: `1px solid ${border}` }}
|
||||
className="px-8 pt-20 pb-10 md:px-14 transition-colors duration-500"
|
||||
role="contentinfo"
|
||||
>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
{/* Main grid */}
|
||||
<div className="grid gap-14 md:grid-cols-[1.8fr_1fr_1.2fr]">
|
||||
{/* Brand */}
|
||||
<div>
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/Logo_blanco.svg"
|
||||
alt="Rynext logo"
|
||||
className="h-9 w-auto object-contain"
|
||||
/>
|
||||
<img
|
||||
src="/icons/Text_Logo_Blanco.svg"
|
||||
alt="Rynext"
|
||||
style={{
|
||||
width: "130px",
|
||||
height: "18px",
|
||||
objectFit: "cover",
|
||||
objectPosition: "center 52%",
|
||||
display: "block",
|
||||
}}
|
||||
/>
|
||||
</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
|
||||
<p
|
||||
className="text-sm leading-relaxed mb-8"
|
||||
style={{ color: sub, maxWidth: "30ch" }}
|
||||
>
|
||||
Diseñamos y construimos sistemas empresariales a medida,
|
||||
arquitectura real, sin atajos técnicos.
|
||||
</p>
|
||||
{/* Social */}
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href="https://linkedin.com/company/rynext"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Rynext en LinkedIn"
|
||||
className="flex h-9 w-9 items-center justify-center rounded transition-colors"
|
||||
style={{ background: "rgba(255,255,255,0.07)", color: sub }}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLAnchorElement).style.background =
|
||||
"rgba(255,255,255,0.14)";
|
||||
(e.currentTarget as HTMLAnchorElement).style.color = "#fff";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLAnchorElement).style.background =
|
||||
"rgba(255,255,255,0.07)";
|
||||
(e.currentTarget as HTMLAnchorElement).style.color = sub;
|
||||
}}
|
||||
>
|
||||
{/* LinkedIn SVG */}
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
||||
<rect x="2" y="9" width="4" height="12" />
|
||||
<circle cx="4" cy="4" r="2" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>Cancún, Quintana Roo, México</li>
|
||||
<li>Reserva de proyecto en 48h</li>
|
||||
</ul>
|
||||
<a
|
||||
href={`https://wa.me/529981234567?text=${encodeURIComponent('¿En qué podemos ayudarte?')}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Rynext en WhatsApp"
|
||||
className="flex h-9 w-9 items-center justify-center rounded transition-colors"
|
||||
style={{ background: "rgba(255,255,255,0.07)", color: sub }}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLAnchorElement).style.background =
|
||||
"rgba(255,255,255,0.14)";
|
||||
(e.currentTarget as HTMLAnchorElement).style.color = "#fff";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLAnchorElement).style.background =
|
||||
"rgba(255,255,255,0.07)";
|
||||
(e.currentTarget as HTMLAnchorElement).style.color = sub;
|
||||
}}
|
||||
>
|
||||
<MessageCircle size={15} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navegación */}
|
||||
<div>
|
||||
<p
|
||||
className="text-mono-label mb-6"
|
||||
style={{
|
||||
color: "rgba(255,255,255,0.25)",
|
||||
letterSpacing: "0.12em",
|
||||
}}
|
||||
>
|
||||
Navegación
|
||||
</p>
|
||||
<ul className="flex flex-col gap-3.5">
|
||||
{navLinks.map((link) => (
|
||||
<li key={link.href}>
|
||||
<button
|
||||
onClick={() => handleNav(link.href)}
|
||||
className="text-sm font-medium transition-colors"
|
||||
style={{
|
||||
color: sub,
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
padding: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = sub)}
|
||||
>
|
||||
{link.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contacto */}
|
||||
<div>
|
||||
<p
|
||||
className="text-mono-label mb-6"
|
||||
style={{
|
||||
color: "rgba(255,255,255,0.25)",
|
||||
letterSpacing: "0.12em",
|
||||
}}
|
||||
>
|
||||
Contacto
|
||||
</p>
|
||||
<ul className="flex flex-col gap-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin
|
||||
size={14}
|
||||
style={{ color: "#e50914", marginTop: 2, flexShrink: 0 }}
|
||||
/>
|
||||
<span className="text-sm leading-snug" style={{ color: sub }}>
|
||||
Cancún, Quintana Roo
|
||||
<br />
|
||||
México
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail size={14} style={{ color: "#e50914", flexShrink: 0 }} />
|
||||
<a
|
||||
href="mailto:[email protected]"
|
||||
className="text-sm font-medium transition-colors"
|
||||
style={{ color: sub }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = sub)}
|
||||
>
|
||||
contacto@rynext.com.mx
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
<a
|
||||
href="mailto:[email protected]"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold text-white transition hover:opacity-90"
|
||||
style={{ background: "#e50914", borderRadius: 3 }}
|
||||
>
|
||||
Hablemos de tu proyecto
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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.
|
||||
{/* Bottom bar */}
|
||||
<div
|
||||
className="mt-16 border-t pt-8 text-center"
|
||||
style={{ borderColor: border }}
|
||||
>
|
||||
<p className="text-xs" style={{ color: "rgba(255,255,255,0.25)" }}>
|
||||
© {new Date().getFullYear()} Rynext Technologies S.A.S. | Todos los
|
||||
derechos reservados.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
};
|
||||
+94
-93
@@ -1,108 +1,109 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight, CheckCircle2, Shield } from 'lucide-react';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import type { HeroProps } from '../types';
|
||||
import { Button } from './Button';
|
||||
import { SystemMap } from './SystemMap';
|
||||
|
||||
export const Hero = ({ isNavyBg, onOpenContact }: HeroProps) => {
|
||||
const ease = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
function RevealLine({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
|
||||
return (
|
||||
<section className={`section-wave relative flex min-h-screen items-center overflow-hidden px-6 pb-24 pt-36 md:px-12 transition-colors duration-500 ${
|
||||
isNavyBg ? 'bg-[#081b46] text-white' : 'bg-[#f4f9ff] text-brand-black'
|
||||
}`}>
|
||||
<div className={`absolute inset-x-0 top-0 h-44 ${
|
||||
isNavyBg
|
||||
? 'bg-[radial-gradient(circle_at_top_left,rgba(0,119,194,0.24),transparent_34%),radial-gradient(circle_at_top_right,rgba(229,9,20,0.16),transparent_30%)]'
|
||||
: 'bg-[radial-gradient(circle_at_top_left,rgba(0,119,194,0.20),transparent_34%),radial-gradient(circle_at_top_right,rgba(229,9,20,0.10),transparent_30%)]'
|
||||
}`} />
|
||||
<motion.span
|
||||
className="block"
|
||||
initial={{ opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.75, delay, ease }}
|
||||
>
|
||||
{children}
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="space-y-8 lg:col-span-12"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Título uniforme de un solo color */}
|
||||
<h1 className={`text-hero-dacodes max-w-5xl font-display transition-colors duration-500 ${
|
||||
isNavyBg ? 'text-white' : 'text-[#001f5b]'
|
||||
}`}>
|
||||
Diseñamos software
|
||||
<span className="block">
|
||||
que mantiene el negocio en marcha.
|
||||
</span>
|
||||
</h1>
|
||||
export const Hero = ({ onOpenContact, isNavyBg }: HeroProps) => {
|
||||
const bg = isNavyBg ? '#001f5b' : '#ffffff';
|
||||
const text = isNavyBg ? '#ffffff' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.45)';
|
||||
const gridLine = isNavyBg ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.04)';
|
||||
|
||||
<p className={`max-w-2xl text-lg leading-relaxed sm:text-xl ${
|
||||
isNavyBg ? 'text-slate-200' : 'text-gray-700'
|
||||
}`}>
|
||||
RyNext combina arquitectura, producto y operación para lanzar plataformas que se entiendan bien, corran rápido y puedan crecer sin romperse.
|
||||
</p>
|
||||
</div>
|
||||
return (
|
||||
<section
|
||||
className="relative flex min-h-screen flex-col overflow-hidden transition-colors duration-500"
|
||||
style={{ background: bg, color: text, borderBottom: isNavyBg ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.1)' }}
|
||||
aria-label="Rynext Technologies — Hero"
|
||||
>
|
||||
{/* Subtle grid bg */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 bg-grid-lines"
|
||||
style={{ color: gridLine }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 pt-2">
|
||||
|
||||
{/* Main content */}
|
||||
<div className="relative mx-auto grid w-full max-w-7xl flex-1 items-center gap-12 px-8 pb-24 pt-36 md:px-14 lg:grid-cols-[1fr_1fr] lg:gap-20">
|
||||
|
||||
{/* Left column */}
|
||||
<div>
|
||||
{/* Headline */}
|
||||
<h1 className="text-display mb-8" style={{ color: text }}>
|
||||
<RevealLine delay={0.08}>Construimos</RevealLine>
|
||||
<RevealLine delay={0.16}>el sistema</RevealLine>
|
||||
<RevealLine delay={0.24}>
|
||||
<span className="text-brand-red">detrás</span> del
|
||||
</RevealLine>
|
||||
<RevealLine delay={0.32}>negocio.</RevealLine>
|
||||
</h1>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.5, ease }}
|
||||
className="mb-10 max-w-sm text-base leading-relaxed"
|
||||
style={{ color: sub }}
|
||||
>
|
||||
Ingeniería de software empresarial diseñada desde la arquitectura.
|
||||
No herramientas genéricas, sistemas construidos para
|
||||
la operación real de tu negocio.
|
||||
</motion.p>
|
||||
|
||||
{/* CTAs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.65, ease }}
|
||||
className="flex flex-wrap items-center gap-6"
|
||||
>
|
||||
<Button variant="primary" onClick={onOpenContact}>
|
||||
Hablemos de tu proyecto <ArrowRight size={16} />
|
||||
</Button>
|
||||
<button
|
||||
onClick={onOpenContact}
|
||||
className="group inline-flex items-center gap-3 bg-brand-red px-8 py-4 text-base font-bold text-white shadow-lg shadow-red-500/20 transition hover:scale-[1.02] hover:bg-[#b60014]"
|
||||
onClick={() => {
|
||||
document.getElementById('machinery')?.scrollIntoView({ behavior: 'smooth' });
|
||||
}}
|
||||
className="group flex items-center gap-2 text-sm font-semibold transition"
|
||||
style={{ color: sub }}
|
||||
>
|
||||
<span>Agendar</span>
|
||||
<ArrowRight size={18} className="transition group-hover:translate-x-1" />
|
||||
Explorar la maquinaria
|
||||
<ArrowRight
|
||||
size={14}
|
||||
className="transition-transform group-hover:translate-x-0.5"
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
href="#servicios"
|
||||
className={`border px-8 py-4 text-base font-semibold transition hover:scale-[1.02] ${
|
||||
isNavyBg
|
||||
? 'border-white/20 bg-white/5 text-white hover:bg-white/10'
|
||||
: 'border-brand-navy/15 bg-white text-brand-navy hover:border-brand-blue hover:text-brand-blue'
|
||||
}`}
|
||||
>
|
||||
Ver servicios
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 pt-4 lg:grid-cols-3">
|
||||
<div className={`rounded-[18px] border-[1.5px] p-4 ${
|
||||
isNavyBg
|
||||
? 'border-white/15 bg-white/5 shadow-[0_8px_30px_rgba(0,0,0,0.18)]'
|
||||
: 'border-brand-navy/15 bg-white shadow-[0_10px_30px_rgba(0,31,91,0.08)]'
|
||||
}`}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<CheckCircle2 size={16} className="text-brand-blue" />
|
||||
<span className={`text-sm font-semibold ${isNavyBg ? 'text-white' : 'text-brand-navy'}`}>Time to value</span>
|
||||
</div>
|
||||
<p className={`text-sm ${isNavyBg ? 'text-slate-200' : 'text-gray-700'}`}>
|
||||
Entregas visibles desde las primeras semanas con objetivos claros.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`rounded-[18px] border-[1.5px] p-4 ${
|
||||
isNavyBg
|
||||
? 'border-white/15 bg-white/5 shadow-[0_8px_30px_rgba(0,0,0,0.18)]'
|
||||
: 'border-brand-navy/15 bg-white shadow-[0_10px_30px_rgba(0,31,91,0.08)]'
|
||||
}`}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<CheckCircle2 size={16} className="text-brand-red" />
|
||||
<span className={`text-sm font-semibold ${isNavyBg ? 'text-white' : 'text-brand-navy'}`}>Sistemas seguros</span>
|
||||
</div>
|
||||
<p className={`text-sm ${isNavyBg ? 'text-slate-200' : 'text-gray-700'}`}>
|
||||
Infraestructura preparada para escalar con confianza y control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`rounded-[18px] border-[1.5px] p-4 ${
|
||||
isNavyBg
|
||||
? 'border-white/15 bg-white/5 shadow-[0_8px_30px_rgba(0,0,0,0.18)]'
|
||||
: 'border-brand-navy/15 bg-white shadow-[0_10px_30px_rgba(0,31,91,0.08)]'
|
||||
}`}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<Shield size={16} className="text-brand-blue" />
|
||||
<span className={`text-sm font-semibold ${isNavyBg ? 'text-white' : 'text-brand-navy'}`}>Operación estable</span>
|
||||
</div>
|
||||
<p className={`text-sm ${isNavyBg ? 'text-slate-200' : 'text-gray-700'}`}>
|
||||
Alianzas con dirección técnica, roadmap claro y sostenibilidad real.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right column — System Map */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.4, ease }}
|
||||
className="hidden lg:block"
|
||||
>
|
||||
<SystemMap isNavyBg={isNavyBg} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import type { ThemeProps } from '../types';
|
||||
import { machineryData } from '../data/machineryData';
|
||||
|
||||
export const Machinery = ({ isNavyBg }: ThemeProps) => {
|
||||
const [hovered, setHovered] = useState<number | null>(null);
|
||||
|
||||
const bg = isNavyBg ? '#001f5b' : '#ffffff';
|
||||
const text = isNavyBg ? '#ffffff' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.45)' : '#6a6866';
|
||||
const cardBg = isNavyBg ? 'rgba(255,255,255,0.06)' : '#fafaf9';
|
||||
const cardBdr = isNavyBg ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.09)';
|
||||
const numColor = isNavyBg ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)';
|
||||
|
||||
return (
|
||||
<section
|
||||
id="machinery"
|
||||
aria-labelledby="machinery-heading"
|
||||
style={{ background: bg, color: text, borderBottom: `1px solid ${cardBdr}` }}
|
||||
className="px-8 py-28 md:px-14 transition-colors duration-500"
|
||||
>
|
||||
<motion.div
|
||||
className="mx-auto max-w-7xl"
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: false, amount: 0.1 }}
|
||||
transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-16">
|
||||
<h2
|
||||
id="machinery-heading"
|
||||
className="text-headline"
|
||||
style={{ maxWidth: '22ch', color: text }}
|
||||
>
|
||||
Los sistemas que<br className="hidden sm:block" /> mueven la operación.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Cards grid */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{machineryData.map((item, i) => {
|
||||
const isHov = hovered === item.id;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.45, delay: i * 0.07, ease: [0.22, 1, 0.36, 1] }}
|
||||
onMouseEnter={() => setHovered(item.id)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
role="article"
|
||||
aria-label={item.title}
|
||||
style={{
|
||||
background: isHov
|
||||
? isNavyBg ? 'rgba(229,9,20,0.06)' : 'rgba(229,9,20,0.03)'
|
||||
: cardBg,
|
||||
border: `1px solid ${isHov ? 'rgba(229,9,20,0.25)' : cardBdr}`,
|
||||
borderRadius: 6,
|
||||
padding: '28px 28px 32px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'default',
|
||||
transition: 'background 220ms, border-color 220ms, transform 220ms, box-shadow 220ms',
|
||||
transform: isHov ? 'translateY(-2px)' : 'translateY(0)',
|
||||
boxShadow: isHov
|
||||
? '0 8px 28px rgba(0,0,0,0.10)'
|
||||
: '0 1px 3px rgba(0,0,0,0.04)',
|
||||
}}
|
||||
>
|
||||
{/* Faint background number */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -8,
|
||||
right: 12,
|
||||
fontFamily: 'var(--font-display)',
|
||||
fontSize: 96,
|
||||
fontWeight: 900,
|
||||
lineHeight: 1,
|
||||
color: isHov ? 'rgba(229,9,20,0.07)' : numColor,
|
||||
transition: 'color 220ms',
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{item.num}
|
||||
</span>
|
||||
|
||||
{/* Red accent top bar on hover */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 2,
|
||||
background: '#e50914',
|
||||
opacity: isHov ? 1 : 0,
|
||||
transition: 'opacity 220ms',
|
||||
borderRadius: '6px 6px 0 0',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ position: 'relative' }}>
|
||||
<h3
|
||||
className="font-display font-black tracking-tight mb-3"
|
||||
style={{
|
||||
fontSize: 'clamp(1.1rem, 2vw, 1.3rem)',
|
||||
letterSpacing: '-0.02em',
|
||||
color: isHov ? '#e50914' : text,
|
||||
transition: 'color 220ms',
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-sm leading-relaxed"
|
||||
style={{ color: sub, transition: 'color 220ms' }}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
+126
-57
@@ -1,67 +1,136 @@
|
||||
import { Sun, Moon, ArrowRight } from 'lucide-react';
|
||||
import type { NavbarProps } from '../types';
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { Link, useLocation } from "react-router";
|
||||
import type { NavbarProps } from "../types";
|
||||
|
||||
const pageLinks = [
|
||||
{ label: "Sobre Nosotros", href: "/sobre-nosotros" },
|
||||
];
|
||||
|
||||
export const Navbar = ({ onOpenContact }: NavbarProps) => {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 80);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMenuOpen(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
export const Navbar = ({ isNavyBg, setIsNavyBg, onOpenContact }: NavbarProps) => {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 w-full">
|
||||
<div className={`w-full border-b backdrop-blur-md transition-all duration-500 ${
|
||||
isNavyBg
|
||||
? 'border-white/10 bg-[#001f5b]/95 text-white shadow-lg shadow-black/10'
|
||||
: 'border-brand-navy/10 bg-white/95 text-brand-black shadow-sm'
|
||||
}`}>
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 md:px-12">
|
||||
|
||||
{/* Identidad / Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={isNavyBg ? '/icons/Logo_blanco.svg' : '/icons/Logo_negro.svg'}
|
||||
alt="RyNext logo"
|
||||
className="h-10 w-auto object-contain"
|
||||
/>
|
||||
<span className={`font-display text-2xl font-extrabold tracking-tight ${
|
||||
isNavyBg ? 'text-white' : 'text-brand-black'
|
||||
}`}>
|
||||
Ry<span className="text-brand-red">Next</span>
|
||||
</span>
|
||||
</div>
|
||||
<>
|
||||
<motion.header
|
||||
className="fixed top-0 left-0 right-0 z-50"
|
||||
initial={{ y: -72, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
|
||||
role="banner"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: scrolled ? "rgba(255,255,255,0.97)" : "transparent",
|
||||
borderBottom: scrolled ? "1px solid rgba(0,0,0,0.08)" : "1px solid transparent",
|
||||
backdropFilter: scrolled ? "blur(16px)" : "none",
|
||||
WebkitBackdropFilter: scrolled ? "blur(16px)" : "none",
|
||||
transition: "background 200ms, border-color 200ms",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-8 py-4 md:px-14">
|
||||
{/* Logo — siempre modo claro */}
|
||||
<Link to="/" aria-label="Rynext Technologies — inicio" className="flex items-center gap-3">
|
||||
<img src="/icons/Logo_negro.svg" alt="Rynext logo" className="h-9 w-auto object-contain" />
|
||||
<img
|
||||
src="/icons/Text_Logo_Negro.svg"
|
||||
alt="Rynext"
|
||||
style={{ width: "130px", height: "18px", objectFit: "cover", objectPosition: "center 52%", display: "block" }}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Menú y Acciones (Sin 'Stack') */}
|
||||
<div className="flex items-center gap-4 sm:gap-6">
|
||||
<a href="#servicios" className="hidden text-sm font-semibold transition-colors hover:text-brand-red sm:block">
|
||||
Servicios
|
||||
</a>
|
||||
<a href="#metodo" className="hidden text-sm font-semibold transition-colors hover:text-brand-red sm:block">
|
||||
Método
|
||||
</a>
|
||||
<a href="#conveniencia" className="hidden text-sm font-semibold transition-colors hover:text-brand-red sm:block">
|
||||
Conveniencia
|
||||
</a>
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden items-center gap-8 md:flex" aria-label="Navegación principal">
|
||||
{pageLinks.map((link) => {
|
||||
const active = location.pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
to={link.href}
|
||||
className="text-sm font-semibold transition-colors"
|
||||
style={{ color: active ? "#0a0a0a" : "#6a6866", textDecoration: "none" }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = "#0a0a0a")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = active ? "#0a0a0a" : "#6a6866")}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Switch de Fondo */}
|
||||
<button
|
||||
onClick={onOpenContact}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold text-white transition hover:scale-[1.02] hover:opacity-90"
|
||||
style={{ background: "#e50914", border: "none", cursor: "pointer", borderRadius: 3 }}
|
||||
>
|
||||
Hablemos
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsNavyBg((prev) => !prev)}
|
||||
className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-xs font-semibold transition-all ${
|
||||
isNavyBg
|
||||
? 'border-white/20 bg-white/5 text-white hover:bg-white/10'
|
||||
: 'border-brand-navy/10 bg-[#001f5b]/5 text-brand-navy hover:bg-[#001f5b]/10'
|
||||
}`}
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
className="flex items-center justify-center rounded p-2 md:hidden"
|
||||
style={{ color: "#0a0a0a", background: "none", border: "none", cursor: "pointer" }}
|
||||
aria-label={menuOpen ? "Cerrar menú" : "Abrir menú"}
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
{isNavyBg ? <Sun size={15} className="text-amber-400" /> : <Moon size={15} className="text-brand-navy" />}
|
||||
<span className="hidden md:inline">{isNavyBg ? 'Fondo blanco' : 'Fondo azul'}</span>
|
||||
</button>
|
||||
|
||||
{/* Botón CTA */}
|
||||
<button
|
||||
onClick={onOpenContact}
|
||||
className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-brand-red px-5 py-2.5 text-sm font-bold text-white shadow-md shadow-red-500/20 transition hover:scale-[1.02] hover:bg-[#b60014]"
|
||||
>
|
||||
<span>Agendar</span>
|
||||
<ArrowRight size={16} />
|
||||
{menuOpen ? <X size={22} /> : <Menu size={22} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</motion.header>
|
||||
|
||||
{/* Mobile menu */}
|
||||
<AnimatePresence>
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-x-0 top-[65px] z-40 px-8 py-6 md:hidden"
|
||||
style={{ background: "#ffffff", borderBottom: "1px solid #dddbd5" }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Menú de navegación"
|
||||
>
|
||||
<nav className="flex flex-col gap-5">
|
||||
{pageLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
to={link.href}
|
||||
className="text-left text-base font-semibold"
|
||||
style={{ color: location.pathname === link.href ? "#0a0a0a" : "#6a6866", textDecoration: "none" }}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="pt-2">
|
||||
<button
|
||||
onClick={onOpenContact}
|
||||
className="w-full py-3 text-center text-sm font-bold text-white"
|
||||
style={{ background: "#e50914", border: "none", cursor: "pointer", borderRadius: 3 }}
|
||||
>
|
||||
Hablemos
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -1,5 +1,5 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight, Building2, Layers3, ShieldCheck } from 'lucide-react';
|
||||
import { Building2, Layers3, ShieldCheck, X, Check } from 'lucide-react';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
const comparisonRows = [
|
||||
@@ -10,7 +10,7 @@ const comparisonRows = [
|
||||
},
|
||||
{
|
||||
criterion: 'Propiedad y evolución',
|
||||
saas: 'Depende del proveedor y de su roadmap.',
|
||||
saas: 'Depende del proveedor y su roadmap.',
|
||||
ry: 'Roadmap compartido con autonomía técnica real.',
|
||||
},
|
||||
{
|
||||
@@ -21,7 +21,7 @@ const comparisonRows = [
|
||||
{
|
||||
criterion: 'Soporte y continuidad',
|
||||
saas: 'Respuesta general, soporte tipo ticket.',
|
||||
ry: 'Equipo senior con acompañamiento directo y operación.',
|
||||
ry: 'Equipo senior con acompañamiento directo.',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -37,7 +37,7 @@ const proofCards = [
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
title: 'Equipo senior detrás',
|
||||
title: 'Equipo senior',
|
||||
description: 'Product owner, ingeniería y operación trabajando con criterio empresarial.',
|
||||
icon: Building2,
|
||||
},
|
||||
@@ -45,110 +45,110 @@ const proofCards = [
|
||||
|
||||
export const PlatformAdvantage = ({ isNavyBg }: ThemeProps) => {
|
||||
return (
|
||||
<section id="conveniencia" className={`section-wave border-t border-current/10 px-6 py-28 md:px-12 transition-colors duration-500 ${
|
||||
isNavyBg ? 'bg-[#071b49] text-white' : 'bg-[#f7fbff] text-brand-black'
|
||||
}`}>
|
||||
<section
|
||||
id="conveniencia"
|
||||
className={`section-wave px-6 py-28 md:px-12 transition-colors duration-500 ${
|
||||
isNavyBg ? 'bg-[#001749] text-white' : 'bg-slate-50 text-brand-black'
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-14 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<span className={`mb-3 block text-xs font-semibold tracking-[0.08em] ${
|
||||
isNavyBg ? 'text-sky-200' : 'text-brand-blue'
|
||||
<span className={`mb-3 block text-xs font-semibold uppercase tracking-[0.14em] ${
|
||||
isNavyBg ? 'text-sky-400' : 'text-brand-blue'
|
||||
}`}>
|
||||
Conveniencia RyNext
|
||||
Por qué Rynext
|
||||
</span>
|
||||
<h2 className="text-section-title">
|
||||
Detrás de cada plataforma hay un equipo senior, una arquitectura clara y una ruta con sentido.
|
||||
</h2>
|
||||
</div>
|
||||
<p className={`max-w-xl text-base leading-relaxed ${isNavyBg ? 'text-slate-200' : 'text-gray-600'}`}>
|
||||
<p className={`max-w-sm text-base leading-relaxed ${isNavyBg ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
Un sistema no solo se construye para operar: se diseña para sostener negocio, seguridad, adopción y evolución continua.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`overflow-hidden rounded-[22px] border ${isNavyBg ? 'border-white/10 bg-white/5' : 'border-brand-navy/10 bg-white'}`}>
|
||||
<div className={`grid grid-cols-1 border-b text-sm font-semibold md:grid-cols-[1.1fr_0.95fr_0.95fr] ${isNavyBg ? 'border-white/10 text-sky-100' : 'border-brand-navy/10 text-brand-navy'}`}>
|
||||
<div className="px-5 py-4">Criterio</div>
|
||||
<div className="px-5 py-4 border-t md:border-t-0 md:border-l">Licencia SaaS</div>
|
||||
<div className="px-5 py-4 border-t md:border-t-0 md:border-l">RyNext software</div>
|
||||
{/* Comparison table */}
|
||||
<div className={`overflow-hidden rounded-2xl border ${
|
||||
isNavyBg ? 'border-white/8 bg-white/[0.03]' : 'border-gray-200 bg-white'
|
||||
}`}>
|
||||
{/* Table header */}
|
||||
<div className={`grid grid-cols-1 text-xs font-semibold uppercase tracking-[0.1em] md:grid-cols-[1.2fr_1fr_1fr] ${
|
||||
isNavyBg ? 'border-b border-white/8 bg-white/[0.04]' : 'border-b border-gray-100 bg-gray-50'
|
||||
}`}>
|
||||
<div className={`px-6 py-4 ${isNavyBg ? 'text-slate-400' : 'text-gray-400'}`}>Criterio</div>
|
||||
<div className={`border-t px-6 py-4 md:border-t-0 md:border-l ${
|
||||
isNavyBg ? 'border-white/8 text-slate-400' : 'border-gray-100 text-gray-400'
|
||||
}`}>
|
||||
Licencia SaaS
|
||||
</div>
|
||||
<div className={`border-t px-6 py-4 font-bold md:border-t-0 md:border-l ${
|
||||
isNavyBg ? 'border-white/8 text-sky-400' : 'border-gray-100 text-brand-blue'
|
||||
}`}>
|
||||
Rynext software
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
{comparisonRows.map((row, index) => (
|
||||
<div key={row.criterion} className={`grid grid-cols-1 md:grid-cols-[1.1fr_0.95fr_0.95fr] ${isNavyBg ? 'text-slate-200' : 'text-brand-navy/80'}`}>
|
||||
<div className={`px-5 py-4 border-b font-semibold ${isNavyBg ? 'border-white/10 text-white' : 'border-brand-navy/10 text-brand-navy'}`}>
|
||||
<div
|
||||
key={row.criterion}
|
||||
className={`grid grid-cols-1 text-sm md:grid-cols-[1.2fr_1fr_1fr] ${
|
||||
index < comparisonRows.length - 1
|
||||
? isNavyBg ? 'border-b border-white/5' : 'border-b border-gray-100'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className={`px-6 py-5 font-semibold ${isNavyBg ? 'text-white' : 'text-brand-navy'}`}>
|
||||
{row.criterion}
|
||||
</div>
|
||||
<div className={`px-5 py-4 border-b md:border-l ${isNavyBg ? 'border-white/10' : 'border-brand-navy/10'}`}>
|
||||
<div className={`flex items-start gap-2.5 border-t px-6 py-5 md:border-t-0 md:border-l ${
|
||||
isNavyBg ? 'border-white/5 text-slate-400' : 'border-gray-100 text-gray-500'
|
||||
}`}>
|
||||
<X size={13} className="mt-0.5 shrink-0 text-gray-400" />
|
||||
{row.saas}
|
||||
</div>
|
||||
<div className={`px-5 py-4 border-b md:border-l ${isNavyBg ? 'border-white/10' : 'border-brand-navy/10'}`}>
|
||||
<div className={`flex items-start gap-2.5 border-t px-6 py-5 md:border-t-0 md:border-l ${
|
||||
isNavyBg ? 'border-white/5 text-slate-200' : 'border-gray-100 text-brand-navy'
|
||||
}`}>
|
||||
<Check size={13} className={`mt-0.5 shrink-0 ${isNavyBg ? 'text-sky-400' : 'text-brand-blue'}`} />
|
||||
{row.ry}
|
||||
</div>
|
||||
{index === comparisonRows.length - 1 && (
|
||||
<div className={`md:col-span-3 px-5 py-4 text-xs tracking-[0.08em] ${isNavyBg ? 'text-sky-100' : 'text-brand-navy'}`}>
|
||||
Resultado: menos fricción, más control y más valor real.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-4 lg:grid-cols-3">
|
||||
{/* Proof cards */}
|
||||
<div className="mt-6 grid gap-4 lg:grid-cols-3">
|
||||
{proofCards.map((card, index) => {
|
||||
const Icon = card.icon;
|
||||
|
||||
return (
|
||||
<motion.article
|
||||
key={card.title}
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.08 }}
|
||||
className={`rounded-[18px] border p-5 ${isNavyBg
|
||||
? 'border-white/10 bg-white/5 shadow-[0_10px_30px_rgba(0,0,0,0.16)]'
|
||||
: 'border-brand-navy/10 bg-white shadow-[0_10px_30px_rgba(0,31,91,0.08)]'}`}
|
||||
className={`rounded-2xl border p-6 ${
|
||||
isNavyBg
|
||||
? 'border-white/8 bg-white/[0.04]'
|
||||
: 'border-gray-200 bg-white shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className={`rounded-xl p-3 ${isNavyBg ? 'bg-white/10 text-white' : 'bg-brand-blue/10 text-brand-blue'}`}>
|
||||
<Icon size={18} />
|
||||
</div>
|
||||
<span className={`text-[10px] font-semibold tracking-[0.08em] ${isNavyBg ? 'text-sky-200' : 'text-brand-blue'}`}>
|
||||
Capacidad real
|
||||
</span>
|
||||
<div className={`mb-5 inline-flex rounded-xl p-3 ${
|
||||
isNavyBg ? 'bg-brand-blue/15 text-sky-300' : 'bg-brand-blue/8 text-brand-blue'
|
||||
}`}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold font-display">{card.title}</h3>
|
||||
<p className={`text-sm leading-relaxed ${isNavyBg ? 'text-slate-200' : 'text-gray-600'}`}>{card.description}</p>
|
||||
<h3 className="mb-2 font-display text-lg font-bold">{card.title}</h3>
|
||||
<p className={`text-sm leading-relaxed ${isNavyBg ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
{card.description}
|
||||
</p>
|
||||
</motion.article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className={`mt-8 grid gap-4 rounded-[20px] border p-5 lg:grid-cols-[1.1fr_0.9fr] ${isNavyBg ? 'border-white/10 bg-white/5' : 'border-brand-navy/10 bg-white'}`}>
|
||||
<div>
|
||||
<p className={`mb-3 text-[10px] font-semibold tracking-[0.08em] ${isNavyBg ? 'text-sky-200' : 'text-brand-blue'}`}>
|
||||
Visión operativa
|
||||
</p>
|
||||
<h3 className="mb-3 text-2xl font-bold font-display">Una plataforma respaldada por una operación empresarial madura.</h3>
|
||||
<p className={`max-w-2xl text-sm leading-relaxed ${isNavyBg ? 'text-slate-200' : 'text-gray-600'}`}>
|
||||
No entregamos simplemente una solución “bonita”. Dejanos una base técnica diseñada para crecer, sostener usuarios, automatizar procesos y poner a tu negocio en una ruta clara.
|
||||
</p>
|
||||
</div>
|
||||
<div className={`rounded-[18px] border p-4 ${isNavyBg ? 'border-white/10 bg-[#081b46]' : 'border-brand-navy/10 bg-[#001f5b]/5'}`}>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className={`text-[10px] font-semibold tracking-[0.08em] ${isNavyBg ? 'text-sky-200' : 'text-brand-blue'}`}>Resumen ejecutivo</span>
|
||||
<ArrowRight size={16} className={isNavyBg ? 'text-sky-200' : 'text-brand-blue'} />
|
||||
</div>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className={`rounded-xl border px-3 py-2 ${isNavyBg ? 'border-white/10 bg-white/5 text-slate-200' : 'border-brand-navy/10 bg-white text-brand-navy'}`}>
|
||||
<strong className="font-bold">Sin bloqueo del proveedor</strong>
|
||||
<div className="mt-1">Tu roadmap y evolución no dependen de una licencia estándar.</div>
|
||||
</div>
|
||||
<div className={`rounded-xl border px-3 py-2 ${isNavyBg ? 'border-white/10 bg-white/5 text-slate-200' : 'border-brand-navy/10 bg-white text-brand-navy'}`}>
|
||||
<strong className="font-bold">Equipo con criterio</strong>
|
||||
<div className="mt-1">Diseño, ingeniería, integración y soporte en una sola visión.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
const principles = [
|
||||
{
|
||||
title: 'Simple por diseño',
|
||||
description: 'La complejidad existe solo cuando aporta valor real. Todo lo demás se elimina.',
|
||||
},
|
||||
{
|
||||
title: 'Diseñado para fallar',
|
||||
description: 'Los sistemas asumen que algo fallará. La resiliencia es diseñada, no improvisada.',
|
||||
},
|
||||
{
|
||||
title: 'Una sola fuente de verdad',
|
||||
description: 'La información crítica tiene una única fuente confiable. Sin duplicidad de datos.',
|
||||
},
|
||||
{
|
||||
title: 'Automatiza lo repetitivo',
|
||||
description: 'Si una persona lo hace manualmente diez veces, el sistema debe hacerlo.',
|
||||
},
|
||||
{
|
||||
title: 'Construido para cambiar',
|
||||
description: 'El software debe poder evolucionar. La arquitectura anticipa el cambio inevitable.',
|
||||
},
|
||||
];
|
||||
|
||||
export const Principles = ({ isNavyBg }: ThemeProps) => {
|
||||
const bg = isNavyBg ? '#0d1117' : '#f5f5f3';
|
||||
const text = isNavyBg ? '#eef0f4' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)';
|
||||
const gridGap = isNavyBg ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)';
|
||||
|
||||
return (
|
||||
<section
|
||||
id="principios"
|
||||
aria-labelledby="principles-heading"
|
||||
style={{ background: bg, color: text, borderBottom: `1px solid ${gridGap}` }}
|
||||
className="px-8 py-28 md:px-14 transition-colors duration-500"
|
||||
>
|
||||
<motion.div
|
||||
className="mx-auto max-w-7xl"
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: false, amount: 0.1 }}
|
||||
transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-16">
|
||||
<h2
|
||||
id="principles-heading"
|
||||
className="text-headline"
|
||||
style={{ maxWidth: '24ch', color: text }}
|
||||
>
|
||||
Principios, no valores<br className="hidden sm:block" /> corporativos.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Principles — 5 columns */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(5, 1fr)',
|
||||
border: `1px solid ${gridGap}`,
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{principles.map((p, i) => (
|
||||
<motion.div
|
||||
key={p.title}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: i * 0.06 }}
|
||||
style={{
|
||||
padding: '32px 28px 36px',
|
||||
borderRight: i < principles.length - 1 ? `1px solid ${gridGap}` : 'none',
|
||||
borderTop: '3px solid #e50914',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="font-display font-black block mb-5"
|
||||
style={{ fontSize: 56, lineHeight: 1, color: '#e50914', letterSpacing: '-0.04em' }}
|
||||
>
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<h3
|
||||
className="font-display font-black mb-3"
|
||||
style={{ fontSize: 15, letterSpacing: '-0.01em', color: text, lineHeight: 1.25 }}
|
||||
>
|
||||
{p.title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-sm leading-relaxed"
|
||||
style={{ color: sub }}
|
||||
>
|
||||
{p.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,80 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
export const Problem = ({ isNavyBg }: ThemeProps) => {
|
||||
const bg = isNavyBg ? '#0d1117' : '#f5f5f3';
|
||||
const text = isNavyBg ? '#eef0f4' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.4)';
|
||||
const border = isNavyBg ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-labelledby="problem-heading"
|
||||
className="px-8 py-24 md:px-14 transition-colors duration-500"
|
||||
style={{ background: bg, borderBottom: `1px solid ${border}` }}
|
||||
>
|
||||
<motion.div
|
||||
className="mx-auto max-w-7xl"
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: false, amount: 0.15 }}
|
||||
transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
|
||||
<div>
|
||||
|
||||
{/* Headline */}
|
||||
<h2
|
||||
id="problem-heading"
|
||||
className="text-display"
|
||||
style={{ lineHeight: 1.0, letterSpacing: '-0.02em', color: text }}
|
||||
>
|
||||
{['La mayoría', 'de los problemas', 'operativos son'].map((line, i) => (
|
||||
<motion.span
|
||||
key={line}
|
||||
className="block"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: i * 0.07, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
{line}
|
||||
</motion.span>
|
||||
))}
|
||||
<motion.span
|
||||
className="block text-brand-red"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.24, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
problemas de sistema.
|
||||
</motion.span>
|
||||
</h2>
|
||||
|
||||
{/* Descripción */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.45 }}
|
||||
className="mt-12 flex gap-4"
|
||||
style={{ maxWidth: '56ch' }}
|
||||
>
|
||||
<span
|
||||
className="mt-1 shrink-0 block h-full w-px"
|
||||
style={{ background: '#e50914', minHeight: '100%', width: 2, borderRadius: 2, alignSelf: 'stretch', opacity: 0.7 }}
|
||||
/>
|
||||
<p className="text-base leading-relaxed" style={{ color: sub }}>
|
||||
Software que impone sus propias reglas en lugar de adaptarse
|
||||
a la operación. Procesos que permanecen manuales porque nadie
|
||||
los diseñó para escalar. Ambos tienen la misma raíz: ausencia
|
||||
de arquitectura.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
+78
-30
@@ -2,50 +2,98 @@ import { motion } from 'framer-motion';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
const steps = [
|
||||
{ step: '01', title: 'Diagnóstico y mapa de valor', desc: 'Auditamos tu stack actual, objetivos de negocio y fricción operativa para definir una ruta técnica precisa.' },
|
||||
{ step: '02', title: 'Diseño de solución', desc: 'Estructuramos arquitectura, alcance, experiencia y entregables con una visión clara, realista y escalable.' },
|
||||
{ step: '03', title: 'Construcción con control', desc: 'Desarrollamos en sprints con entregables medibles, calidad técnica y coordinación constante con tu equipo.' },
|
||||
{ step: '04', title: 'Entrega y evolución', desc: 'Publicamos en la nube, transferimos conocimiento y dejamos una plataforma lista para crecer con seguridad.' },
|
||||
{
|
||||
num: '01',
|
||||
title: 'ENTENDER',
|
||||
desc: 'Auditamos la operación, el stack y la fricción real antes de proponer nada. Sin suposiciones.',
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: 'MODELAR',
|
||||
desc: 'Diseñamos la arquitectura del sistema: flujos, interfaces, datos y dependencias.',
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: 'CONSTRUIR',
|
||||
desc: 'Desarrollamos en sprints con entregables medibles y revisión técnica constante.',
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
title: 'CONECTAR',
|
||||
desc: 'Integramos el sistema con el ecosistema del negocio: ERPs, pagos, APIs externas.',
|
||||
},
|
||||
{
|
||||
num: '05',
|
||||
title: 'OPERAR',
|
||||
desc: 'Despliegue a producción, monitoreo, soporte y evolución continua del sistema.',
|
||||
},
|
||||
];
|
||||
|
||||
export const Process = ({ isNavyBg }: ThemeProps) => {
|
||||
const bg = isNavyBg ? '#001f5b' : '#ffffff';
|
||||
const text = isNavyBg ? '#ffffff' : '#0a0a0a';
|
||||
const sub = isNavyBg ? 'rgba(255,255,255,0.4)' : '#6a6866';
|
||||
const border = isNavyBg ? 'rgba(255,255,255,0.1)' : '#dddbd5';
|
||||
|
||||
return (
|
||||
<section id="metodo" className={`section-wave border-t border-current/10 px-6 py-28 md:px-12 ${
|
||||
isNavyBg ? 'bg-[#0a2b7a] text-white' : 'bg-[#f7fbff] text-brand-black'
|
||||
}`}>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<section
|
||||
id="proceso"
|
||||
aria-labelledby="process-heading"
|
||||
style={{ background: bg, color: text, borderBottom: `1px solid ${border}` }}
|
||||
className="px-8 py-28 md:px-14 transition-colors duration-500"
|
||||
>
|
||||
<motion.div
|
||||
className="mx-auto max-w-7xl"
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: false, amount: 0.1 }}
|
||||
transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-16">
|
||||
<span className={`mb-3 block text-xs font-semibold tracking-[0.08em] ${
|
||||
isNavyBg ? 'text-sky-200' : 'text-brand-blue'
|
||||
}`}>
|
||||
Método RyNext
|
||||
</span>
|
||||
<h2 className="max-w-3xl text-section-title">
|
||||
Un proceso que mantiene foco, velocidad y resultados concretos.
|
||||
<h2
|
||||
id="process-heading"
|
||||
className="text-headline"
|
||||
style={{ maxWidth: '28ch' }}
|
||||
>
|
||||
De la problemática<br className="hidden sm:block" /> al sistema en producción.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{steps.map((item, index) => (
|
||||
{/* Steps */}
|
||||
<div className="grid gap-0 md:grid-cols-3 lg:grid-cols-5" style={{ border: `1px solid ${border}`, borderRadius: 4, overflow: 'hidden' }}>
|
||||
{steps.map((step, i) => (
|
||||
<motion.div
|
||||
key={item.step}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
key={step.num}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className={`rounded-[16px] border p-6 ${
|
||||
isNavyBg
|
||||
? 'border-white/10 bg-white/5'
|
||||
: 'border-gray-200 bg-white shadow-sm'
|
||||
}`}
|
||||
transition={{ duration: 0.4, delay: i * 0.08 }}
|
||||
style={{
|
||||
padding: '32px 28px',
|
||||
borderRight: i < steps.length - 1 ? `1px solid ${border}` : 'none',
|
||||
}}
|
||||
>
|
||||
<div className={`mb-4 text-4xl font-black ${isNavyBg ? 'text-sky-200' : 'text-brand-blue'}`}>{item.step}</div>
|
||||
<h3 className="mb-3 text-xl font-bold font-display">{item.title}</h3>
|
||||
<p className={`text-sm leading-relaxed ${isNavyBg ? 'text-slate-200' : 'text-gray-600'}`}>{item.desc}</p>
|
||||
<span
|
||||
className="font-display font-black block mb-6"
|
||||
style={{ fontSize: 52, lineHeight: 1, color: '#e50914', letterSpacing: '-0.04em' }}
|
||||
>
|
||||
{step.num}
|
||||
</span>
|
||||
<h3
|
||||
className="font-display font-black mb-3"
|
||||
style={{ fontSize: 13, letterSpacing: '0.04em', color: text }}
|
||||
>
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed" style={{ color: sub }}>
|
||||
{step.desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
};
|
||||
+56
-24
@@ -1,59 +1,91 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import { Check } from 'lucide-react';
|
||||
import type { ThemeProps } from '../types';
|
||||
import { servicesData } from '../data/servicesData';
|
||||
|
||||
export const Services = ({ isNavyBg }: ThemeProps) => {
|
||||
return (
|
||||
<section id="servicios" className={`section-wave border-t border-current/10 px-6 py-28 md:px-12 transition-colors duration-500 ${
|
||||
isNavyBg ? 'bg-[#0a2b7a] text-white' : 'bg-[#f7fbff] text-brand-black'
|
||||
}`}>
|
||||
<section
|
||||
id="servicios"
|
||||
className={`section-wave px-6 py-28 md:px-12 transition-colors duration-500 ${
|
||||
isNavyBg ? 'bg-[#001749] text-white' : 'bg-slate-50 text-brand-black'
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-16 flex flex-col justify-between gap-8 md:flex-row md:items-end">
|
||||
<div>
|
||||
<span className={`mb-3 block text-xs font-semibold tracking-[0.08em] ${
|
||||
isNavyBg ? 'text-sky-200' : 'text-brand-blue'
|
||||
<span className={`mb-3 block text-xs font-semibold uppercase tracking-[0.14em] ${
|
||||
isNavyBg ? 'text-sky-400' : 'text-brand-blue'
|
||||
}`}>
|
||||
Servicios RyNext
|
||||
Servicios
|
||||
</span>
|
||||
<h2 className="max-w-2xl text-section-title">
|
||||
Soluciones que conectan producto, infraestructura y crecimiento.
|
||||
</h2>
|
||||
</div>
|
||||
<p className={`max-w-xl text-base leading-relaxed ${isNavyBg ? 'text-slate-200' : 'text-gray-600'}`}>
|
||||
No trabajamos con plantillas. Diseñamos ecosistemas de tecnología a medida para que tu operación gane velocidad, claridad y control.
|
||||
<p className={`max-w-sm text-base leading-relaxed ${isNavyBg ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
No trabajamos con plantillas. Cada ecosistema tecnológico se diseña para la operación específica del cliente.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
{/* Cards grid */}
|
||||
<div className="grid gap-4 md:grid-cols-12">
|
||||
{servicesData.map((service, index) => {
|
||||
const Icon = service.icon;
|
||||
const accentClass = service.accent === 'blue' ? 'bg-brand-blue' : 'bg-brand-red';
|
||||
const iconBgClass = service.accent === 'blue'
|
||||
? (isNavyBg ? 'bg-brand-blue/15 text-sky-300' : 'bg-brand-blue/10 text-brand-blue')
|
||||
: (isNavyBg ? 'bg-brand-red/15 text-red-300' : 'bg-brand-red/10 text-brand-red');
|
||||
|
||||
return (
|
||||
<motion.article
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.5, delay: index * 0.08 }}
|
||||
className={`group rounded-[16px] border p-6 transition-all duration-300 hover:-translate-y-1 ${
|
||||
className={`group relative overflow-hidden rounded-2xl border p-7 transition-all duration-300 hover:-translate-y-0.5 ${service.gridCols} ${
|
||||
isNavyBg
|
||||
? 'border-white/10 bg-white/5 hover:border-brand-blue/50 hover:bg-white/10'
|
||||
: 'border-gray-200 bg-white hover:border-brand-blue/40 hover:shadow-xl'
|
||||
? 'border-white/8 bg-white/[0.04] hover:border-white/15 hover:bg-white/[0.07]'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-xl hover:shadow-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div className="mb-5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className={`text-sm font-semibold ${isNavyBg ? 'text-sky-200' : 'text-brand-blue'}`}>0{service.id}</span>
|
||||
<div className={`rounded-xl p-3 ${isNavyBg ? 'bg-white/10 text-white' : 'bg-brand-blue/10 text-brand-blue'}`}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
{/* Top accent line */}
|
||||
<div className={`absolute inset-x-0 top-0 h-[2px] ${accentClass} opacity-60`} />
|
||||
|
||||
{/* Header row */}
|
||||
<div className="mb-6 flex items-start justify-between">
|
||||
<div className={`rounded-xl p-3 ${iconBgClass}`}>
|
||||
<Icon size={22} />
|
||||
</div>
|
||||
<ArrowUpRight size={18} className={`opacity-70 transition ${isNavyBg ? 'text-sky-200' : 'text-brand-blue'} group-hover:translate-x-0.5 group-hover:-translate-y-0.5`} />
|
||||
<span className={`font-mono text-xs font-bold ${isNavyBg ? 'text-white/20' : 'text-gray-200'}`}>
|
||||
0{service.id}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="mb-3 text-2xl font-bold font-display">{service.title}</h3>
|
||||
<p className={`max-w-lg text-sm leading-relaxed ${isNavyBg ? 'text-slate-200' : 'text-gray-600'}`}>{service.description}</p>
|
||||
<h3 className="mb-3 font-display text-2xl font-bold">{service.title}</h3>
|
||||
<p className={`mb-6 text-sm leading-relaxed ${isNavyBg ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
{/* Feature list */}
|
||||
<ul className="space-y-2">
|
||||
{service.features.map((f: string) => (
|
||||
<li key={f} className="flex items-center gap-2.5">
|
||||
<Check
|
||||
size={13}
|
||||
className={`shrink-0 ${service.accent === 'blue'
|
||||
? (isNavyBg ? 'text-sky-400' : 'text-brand-blue')
|
||||
: (isNavyBg ? 'text-red-400' : 'text-brand-red')
|
||||
}`}
|
||||
/>
|
||||
<span className={`text-xs font-medium ${isNavyBg ? 'text-slate-300' : 'text-gray-600'}`}>
|
||||
{f}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.article>
|
||||
);
|
||||
})}
|
||||
@@ -61,4 +93,4 @@ export const Services = ({ isNavyBg }: ThemeProps) => {
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -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 (
|
||||
<section
|
||||
id="stack"
|
||||
aria-labelledby="stack-heading"
|
||||
style={{ background: bg, color: text }}
|
||||
className="px-8 py-28 md:px-14 transition-colors duration-500"
|
||||
>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-16 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<span className="h-px w-8 bg-brand-red" />
|
||||
<span className="text-mono-label" style={{ color: '#e50914' }}>Las herramientas son el medio</span>
|
||||
</div>
|
||||
<h2
|
||||
id="stack-heading"
|
||||
className="text-headline"
|
||||
style={{ maxWidth: '26ch' }}
|
||||
>
|
||||
Las herramientas son el medio.<br className="hidden sm:block" /> El sistema es el fin.
|
||||
</h2>
|
||||
</div>
|
||||
<p className="max-w-xs text-sm leading-relaxed" style={{ color: sub }}>
|
||||
Elegimos la tecnología correcta para cada problema. No hay un stack universal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stack groups */}
|
||||
<div
|
||||
style={{ borderTop: `1px solid ${border}` }}
|
||||
>
|
||||
{stackGroups.map((group, i) => (
|
||||
<motion.div
|
||||
key={group.label}
|
||||
initial={{ opacity: 0, x: -8 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: i * 0.06 }}
|
||||
className="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:gap-10"
|
||||
style={{ borderBottom: `1px solid ${border}` }}
|
||||
>
|
||||
<span
|
||||
className="text-mono-label shrink-0"
|
||||
style={{ color: sub, width: 120 }}
|
||||
>
|
||||
{group.label}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{group.items.map(item => (
|
||||
<span
|
||||
key={item}
|
||||
className="text-sm font-medium px-3 py-1 rounded-sm"
|
||||
style={{
|
||||
background: tagBg,
|
||||
border: `1px solid ${border}`,
|
||||
color: text,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footnote */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="mt-10 text-xs leading-relaxed"
|
||||
style={{ color: sub, maxWidth: '60ch' }}
|
||||
>
|
||||
Estas son las herramientas con las que trabajamos actualmente. La elección depende siempre del problema, no de la preferencia.
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -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<string | null>(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 (
|
||||
<div className="w-full" style={{ overflow: 'visible' }}>
|
||||
<svg
|
||||
viewBox="0 0 320 434"
|
||||
width="100%"
|
||||
aria-label="Mapa de sistema interactivo:hover para explorar capas"
|
||||
role="img"
|
||||
style={{ maxWidth: 340, display: 'block', margin: '0 auto', overflow: 'visible' }}
|
||||
onMouseLeave={() => setActive(null)}
|
||||
>
|
||||
<defs>
|
||||
<filter id="bubble-shadow" x="-15%" y="-15%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="3" stdDeviation="4" floodColor="rgba(0,0,0,0.18)" />
|
||||
</filter>
|
||||
</defs>
|
||||
{/* Edges */}
|
||||
{EDGES.map((edge, i) => {
|
||||
const { x1, y1, x2, y2 } = edgeLine(edge);
|
||||
const edgeActive = isEdgeActive(edge, active);
|
||||
return (
|
||||
<line
|
||||
key={i}
|
||||
x1={x1} y1={y1} x2={x2} y2={y2}
|
||||
stroke={edgeActive ? RED : edge.type === 'side' ? connStroke : defStroke}
|
||||
strokeWidth={edgeActive ? 1.5 : 1}
|
||||
strokeDasharray={edge.type === 'side' ? '3 3' : undefined}
|
||||
style={{ transition: 'stroke 200ms, stroke-width 200ms' }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Nodes */}
|
||||
{NODES.map(node => {
|
||||
const isActive = active === node.id;
|
||||
const isConn = isConnected(node.id, active);
|
||||
const isDim = active !== null && !isActive && !isConn;
|
||||
const stroke = isActive ? RED : isConn ? 'rgba(229,9,20,0.5)' : dimStroke;
|
||||
const fillOpacity = isActive ? 0.12 : 0;
|
||||
const textColor = isActive ? RED : isDim
|
||||
? (isNavyBg ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.2)')
|
||||
: (isNavyBg ? 'rgba(255,255,255,0.65)' : 'rgba(0,31,91,0.75)');
|
||||
const { cx } = nodeCenter(node);
|
||||
|
||||
return (
|
||||
<g
|
||||
key={node.id}
|
||||
onMouseEnter={() => setActive(node.id)}
|
||||
onFocus={() => setActive(node.id)}
|
||||
onBlur={() => setActive(null)}
|
||||
style={{ cursor: 'default', outline: 'none' }}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={`${node.label}: ${node.desc}`}
|
||||
>
|
||||
<rect
|
||||
x={node.x} y={node.y}
|
||||
width={node.w} height={node.h}
|
||||
fill={`rgba(229,9,20,${fillOpacity})`}
|
||||
stroke={stroke}
|
||||
strokeWidth={isActive ? 1.5 : 1}
|
||||
rx={2}
|
||||
style={{ transition: 'fill 200ms, stroke 200ms' }}
|
||||
/>
|
||||
<text
|
||||
x={cx}
|
||||
y={node.y + node.h / 2 + 1}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fill={textColor}
|
||||
fontFamily="'SF Mono','Fira Code',Consolas,monospace"
|
||||
fontSize={node.type === 'main' ? 10 : 8}
|
||||
fontWeight={600}
|
||||
letterSpacing={node.type === 'main' ? 1.2 : 0.8}
|
||||
style={{ transition: 'fill 200ms', pointerEvents: 'none' }}
|
||||
>
|
||||
{node.label}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Tooltip burbuja estilo chat */}
|
||||
{activeDesc && (() => {
|
||||
const node = NODES.find(n => n.id === active)!;
|
||||
const TOOLTIP_H = tooltipHeight(activeDesc.desc);
|
||||
const cy = node.y + node.h / 2;
|
||||
|
||||
// nodos izquierda → burbuja a la derecha
|
||||
// nodos derecha → burbuja a la izquierda
|
||||
// nodos centro → burbuja a la derecha
|
||||
const showLeft = node.x > 160; // solo los nodos de la derecha van a la izquierda
|
||||
|
||||
let tx: number, ty: number, tailPoints: string;
|
||||
|
||||
if (showLeft) {
|
||||
tx = node.x - TOOLTIP_W - TAIL_H - 4;
|
||||
ty = Math.min(Math.max(cy - TOOLTIP_H / 2, 4), 430 - TOOLTIP_H);
|
||||
const tailCy = Math.min(Math.max(cy, ty + 16), ty + TOOLTIP_H - 16);
|
||||
tailPoints = `${tx + TOOLTIP_W},${tailCy - TAIL_W / 2} ${tx + TOOLTIP_W},${tailCy + TAIL_W / 2} ${tx + TOOLTIP_W + TAIL_H},${tailCy}`;
|
||||
} else {
|
||||
tx = node.x + node.w + TAIL_H + 4;
|
||||
ty = Math.min(Math.max(cy - TOOLTIP_H / 2, 4), 430 - TOOLTIP_H);
|
||||
const tailCy = Math.min(Math.max(cy, ty + 16), ty + TOOLTIP_H - 16);
|
||||
tailPoints = `${tx},${tailCy - TAIL_W / 2} ${tx},${tailCy + TAIL_W / 2} ${tx - TAIL_H},${tailCy}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<g style={{ pointerEvents: 'none' }}>
|
||||
<g filter="url(#bubble-shadow)">
|
||||
<rect x={tx} y={ty} width={TOOLTIP_W} height={TOOLTIP_H} fill={tooltipBg} rx={12} />
|
||||
<polygon points={tailPoints} fill={tooltipBg} />
|
||||
</g>
|
||||
<foreignObject x={tx} y={ty} width={TOOLTIP_W} height={TOOLTIP_H} style={{ overflow: 'visible' }}>
|
||||
<div style={{ padding: '10px 13px' }}>
|
||||
<p style={{ fontFamily: "'SF Mono',Consolas,monospace", fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: RED, marginBottom: 4, fontWeight: 600 }}>
|
||||
{activeDesc.label}
|
||||
</p>
|
||||
<p style={{ fontSize: 10.5, color: descText, lineHeight: 1.5, margin: 0 }}>
|
||||
{activeDesc.desc}
|
||||
</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
);
|
||||
})()}
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user