111 lines
4.3 KiB
TypeScript
111 lines
4.3 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const fadeUp = {
|
|
hidden: { opacity: 0, y: 28 },
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as const } },
|
|
};
|
|
|
|
export const Productos = () => {
|
|
useEffect(() => {
|
|
document.title = 'Productos | Rynext Technologies';
|
|
}, []);
|
|
|
|
return (
|
|
<main id="main-content">
|
|
|
|
{/* Hero */}
|
|
<section
|
|
style={{
|
|
background: '#ffffff',
|
|
borderBottom: '1px solid #dddbd5',
|
|
paddingTop: '160px',
|
|
paddingBottom: '100px',
|
|
}}
|
|
className="px-8 md:px-14"
|
|
>
|
|
<div className="mx-auto max-w-7xl">
|
|
<motion.p className="text-mono-label mb-6"
|
|
style={{ color: '#e50914', letterSpacing: '0.18em' }}
|
|
initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp}>
|
|
PRODUCTOS
|
|
</motion.p>
|
|
<motion.h1 className="text-display" style={{ color: '#0a0a0a', maxWidth: '18ch' }}
|
|
initial="hidden" whileInView="visible" viewport={{ once: true }}
|
|
variants={{ hidden: { opacity: 0, y: 32 }, visible: { opacity: 1, y: 0, transition: { duration: 0.7, delay: 0.1, ease: [0.22, 1, 0.36, 1] } } }}>
|
|
Software diseñado para operar.
|
|
</motion.h1>
|
|
<motion.p className="mt-8 text-lg leading-relaxed"
|
|
style={{ color: '#6a6866', maxWidth: '52ch' }}
|
|
initial="hidden" whileInView="visible" viewport={{ once: true }}
|
|
variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] } } }}>
|
|
Módulos y licencias listos para implementar, respaldados por la misma ingeniería
|
|
con la que construimos sistemas a medida.
|
|
</motion.p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Producto — comentado hasta tener contenido real */}
|
|
{/* <section
|
|
style={{
|
|
background: '#f5f5f3',
|
|
borderBottom: '1px solid #dddbd5',
|
|
padding: '100px 0',
|
|
}}
|
|
className="px-8 md:px-14"
|
|
>
|
|
<div className="mx-auto max-w-7xl">
|
|
<motion.div
|
|
initial="hidden" whileInView="visible" viewport={{ once: true }}
|
|
variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } } }}
|
|
style={{
|
|
background: '#ffffff',
|
|
border: '1px solid #dddbd5',
|
|
borderRadius: 4,
|
|
padding: '60px 56px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 32,
|
|
maxWidth: 720,
|
|
}}
|
|
>
|
|
<div style={{
|
|
width: 72, height: 72,
|
|
background: '#f0efec',
|
|
border: '1.5px dashed #c8c5bf',
|
|
borderRadius: 8,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}>
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c8c5bf" strokeWidth="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="text-mono-label mb-2" style={{ color: '#aaa8a4', letterSpacing: '0.14em' }}>NOMBRE DEL PRODUCTO</p>
|
|
<h2 className="text-headline" style={{ color: '#0a0a0a' }}>Tu producto aquí</h2>
|
|
</div>
|
|
<p className="text-base leading-relaxed" style={{ color: '#6a6866', maxWidth: '48ch' }}>
|
|
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.
|
|
</p>
|
|
<div>
|
|
<a
|
|
href="mailto:[email protected]?subject=Solicitud%20de%20demo"
|
|
className="inline-flex items-center gap-2 px-7 py-3.5 text-sm font-bold text-white transition hover:opacity-90"
|
|
style={{ background: '#e50914', borderRadius: 3 }}
|
|
>
|
|
Solicitar demo
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section> */}
|
|
|
|
</main>
|
|
);
|
|
};
|