98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
'use client';
|
|
import { motion } from 'framer-motion';
|
|
import { Icon } from '@iconify/react';
|
|
import type { ThemeProps } from '@/app/(landing)/types/ui';
|
|
import { Button } from '@/app/(landing)/components/Button';
|
|
import { SystemMap } from './SystemMap';
|
|
import { useContact } from '@/app/(landing)/contexts/ContactContext';
|
|
|
|
const ease = [0.22, 1, 0.36, 1] as const;
|
|
|
|
function RevealLine({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
|
|
return (
|
|
<motion.span
|
|
className="block"
|
|
initial={{ opacity: 0, y: 18 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.75, delay, ease }}
|
|
>
|
|
{children}
|
|
</motion.span>
|
|
);
|
|
}
|
|
|
|
export const Hero = ({ isNavyBg }: ThemeProps) => {
|
|
const { open: openContact } = useContact();
|
|
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)';
|
|
|
|
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"
|
|
>
|
|
<div
|
|
className="pointer-events-none absolute inset-0 bg-grid-lines"
|
|
style={{ color: gridLine }}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<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">
|
|
<div>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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 className="rounded-md" variant="primary" onClick={openContact}>
|
|
Hablemos de tu proyecto <Icon icon="ph:arrow-right" width={16} />
|
|
</Button>
|
|
<button
|
|
onClick={() => document.getElementById('machinery')?.scrollIntoView({ behavior: 'smooth' })}
|
|
className="group flex items-center gap-2 text-sm font-semibold transition"
|
|
style={{ color: sub }}
|
|
>
|
|
Explorar la maquinaria
|
|
<Icon icon="ph:arrow-right" width={14} className="transition-transform group-hover:translate-x-0.5" />
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<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>
|
|
);
|
|
};
|