feat(all-deployment)

2026-08-09 23:08:38 -05:00
1 parent e261394133
commit 4f0020bc10
@@ -0,0 +1,110 @@
+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>
+  );
+};