feat(all-deployment)

2026-08-09 23:08:38 -05:00
1 parent e261394133
commit 4f0020bc10
@@ -0,0 +1,151 @@
+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 } },
+};
+
+const articulos = [
+  {
+    categoria: 'ARQUITECTURA',
+    titulo: 'Por qué el software empresarial fracasa antes de llegar a producción',
+    desc: 'La mayoría de los proyectos de software empresarial no fallan en el código, fallan en el diseño. Exploramos las causas estructurales más comunes y cómo evitarlas desde el inicio.',
+    fecha: 'Próximamente',
+    img: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80',
+  },
+  {
+    categoria: 'INTEGRACIONES',
+    titulo: 'ERP vs. sistema a medida: cuándo tiene sentido cada uno',
+    desc: 'La respuesta no es simple. Depende del tamaño de la operación, la madurez del proceso y la capacidad técnica interna. Aquí el marco de decisión que usamos con nuestros clientes.',
+    fecha: 'Próximamente',
+    img: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80',
+  },
+  {
+    categoria: 'DATOS',
+    titulo: 'Instrumentación operacional: medir lo que importa',
+    desc: 'Tener datos no es lo mismo que tener visibilidad. La diferencia está en qué se mide, cómo se almacena y cuándo se activa una alerta. Una guía práctica para equipos de operaciones.',
+    fecha: 'Próximamente',
+    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80',
+  },
+];
+
+export const Blog = () => {
+  useEffect(() => {
+    document.title = 'Blog | 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}>
+            RECURSOS
+          </motion.p>
+          <motion.h1 className="text-display" style={{ color: '#0a0a0a', maxWidth: '16ch' }}
+            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] } } }}>
+            Pensamiento de ingeniería.
+          </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] } } }}>
+            Perspectivas sobre arquitectura de software, sistemas empresariales y decisiones técnicas
+            que impactan la operación real de los negocios.
+          </motion.p>
+        </div>
+      </section>
+
+      {/* Artículos */}
+      <section
+        style={{
+          background: '#f5f5f3',
+          borderBottom: '1px solid #dddbd5',
+          padding: '100px 0',
+          minHeight: '60vh',
+        }}
+        className="px-8 md:px-14"
+      >
+        <div className="mx-auto max-w-7xl">
+          <motion.p className="text-mono-label mb-12"
+            style={{ color: '#e50914', letterSpacing: '0.18em' }}
+            initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp}>
+            PRÓXIMOS ARTÍCULOS
+          </motion.p>
+          <div className="grid gap-6 md:grid-cols-3">
+            {articulos.map((art, i) => (
+              <motion.article key={i}
+                initial="hidden" whileInView="visible" viewport={{ once: true }}
+                variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1] } } }}
+                style={{
+                  background: '#ffffff',
+                  border: '1px solid #dddbd5',
+                  borderRadius: 4,
+                  overflow: 'hidden',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  opacity: 0.82,
+                }}
+              >
+                {/* Thumbnail */}
+                <div style={{ aspectRatio: '16/9', background: '#f0efec', overflow: 'hidden', position: 'relative' }}>
+                  <img
+                    src={art.img}
+                    alt={art.titulo}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+                  />
+                  {/* Categoria badge encima */}
+                  <span
+                    style={{
+                      position: 'absolute', top: 14, left: 14,
+                      background: '#e50914', color: '#fff',
+                      fontFamily: 'monospace', fontSize: 10, letterSpacing: '0.12em',
+                      padding: '3px 8px', borderRadius: 2,
+                    }}
+                  >{art.categoria}</span>
+                </div>
+                {/* Contenido */}
+                <div style={{ padding: '28px 28px 24px', display: 'flex', flexDirection: 'column', gap: 12, flexGrow: 1 }}>
+                  <h2 className="font-display font-bold text-lg leading-snug" style={{ color: '#0a0a0a' }}>
+                    {art.titulo}
+                  </h2>
+                  <p className="text-sm leading-relaxed" style={{ color: '#6a6866', flexGrow: 1 }}>
+                    {art.desc}
+                  </p>
+                  <p className="text-mono-label" style={{ color: '#aaa8a4', letterSpacing: '0.12em', marginTop: 4 }}>
+                    {art.fecha}
+                  </p>
+                </div>
+              </motion.article>
+            ))}
+          </div>
+
+          <motion.div
+            className="mt-20 text-center"
+            initial="hidden" whileInView="visible" viewport={{ once: true }}
+            variants={{ hidden: { opacity: 0 }, visible: { opacity: 1, transition: { duration: 0.6, delay: 0.3 } } }}
+          >
+            <p className="text-sm" style={{ color: '#aaa8a4' }}>
+              El blog está en preparación. Los artículos llegarán pronto.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+    </main>
+  );
+};