cambios

2026-10-06 02:00:11 -05:00
1 parent 794a659369
commit 5f99b65611
@@ -0,0 +1,97 @@
+'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>
+  );
+};