77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
'use client';
|
|
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>
|
|
<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>
|
|
|
|
<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"
|
|
style={{ background: '#3b82f6', 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>
|
|
);
|
|
};
|