Initial commit: Portal Brief Inteligente CDC

2026-05-06 17:55:54 -04:00
commit f1284fc405
20 changed files with 6868 additions and 0 deletions
@@ -0,0 +1,68 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { Chrome, ShieldCheck, Sparkles } from 'lucide-react';
+
+interface LoginScreenProps {
+  onLogin: () => void;
+  isLoading: boolean;
+  error?: string;
+}
+
+export const LoginScreen: React.FC<LoginScreenProps> = ({ onLogin, isLoading, error }) => {
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#060816] px-4 text-zinc-100">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute left-[-10%] top-[-15%] h-[34rem] w-[34rem] rounded-full bg-indigo-600/18 blur-3xl" />
+        <div className="absolute right-[-8%] top-[8%] h-[30rem] w-[30rem] rounded-full bg-cyan-400/12 blur-3xl" />
+        <div className="absolute bottom-[-18%] left-[20%] h-[28rem] w-[28rem] rounded-full bg-fuchsia-500/10 blur-3xl" />
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:42px_42px] opacity-[0.06]" />
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 18, scale: 0.98 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        className="relative w-full max-w-xl rounded-[32px] border border-white/10 bg-white/5 p-8 shadow-[0_30px_80px_rgba(0,0,0,0.35)] backdrop-blur-xl"
+      >
+        <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-indigo-400/25 bg-indigo-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-indigo-200">
+          <Sparkles className="h-3.5 w-3.5" />
+          Acceso corporativo
+        </div>
+
+        <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
+          Portal Brief CDC
+        </h1>
+
+        <p className="mt-4 text-sm leading-7 text-zinc-300 sm:text-base">
+          Inicia sesión con tu cuenta corporativa de Google para acceder al portal.
+        </p>
+
+        <div className="mt-6 rounded-2xl border border-white/10 bg-black/20 p-4">
+          <div className="flex items-start gap-3">
+            <ShieldCheck className="mt-0.5 h-5 w-5 text-indigo-300" />
+            <div>
+              <p className="text-sm font-semibold text-white">Acceso restringido</p>
+              <p className="mt-1 text-sm leading-6 text-zinc-400">
+                Solo usuarios autorizados de la empresa podrán continuar.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mt-4 rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-200">
+            {error}
+          </div>
+        )}
+
+        <button
+          onClick={onLogin}
+          disabled={isLoading}
+          className="mt-6 inline-flex w-full items-center justify-center gap-3 rounded-2xl bg-[linear-gradient(135deg,#6366f1_0%,#2563eb_50%,#06b6d4_100%)] px-5 py-4 text-sm font-semibold text-white shadow-[0_18px_40px_rgba(79,70,229,0.38)] transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <Chrome className="h-4 w-4" />
+          {isLoading ? 'Abriendo Google...' : 'Continuar con Google'}
+        </button>
+      </motion.div>
+    </div>
+  );
+};