@lastbrain/ai-ui-react 1.0.41 → 1.0.43

package/src/components/LBConnectButton.tsx

@@ -7,6 +7,7 @@
 
 import React from "react";
 import { useLB } from "../context/LBAuthProvider";
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
 
 interface LBConnectButtonProps {
   /** Texte du bouton */
@@ -78,14 +79,14 @@ interface LBAuthModalProps {
 }
 
 function LBAuthModal({ onClose }: LBAuthModalProps) {
-  const { login, fetchApiKeys, selectApiKey, status } = useLB();
+  const { login, fetchApiKeys, selectApiKey } = useLB();
   const [step, setStep] = React.useState<"login" | "select-key">("login");
   const [email, setEmail] = React.useState("");
   const [password, setPassword] = React.useState("");
   const [error, setError] = React.useState("");
   const [loading, setLoading] = React.useState(false);
   const [accessToken, setAccessToken] = React.useState("");
-  const [apiKeys, setApiKeys] = React.useState<any[]>([]);
+  const [apiKeys, setApiKeys] = React.useState<LBApiKey[]>([]);
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -94,21 +95,14 @@ function LBAuthModal({ onClose }: LBAuthModalProps) {
 
     try {
       const result = await login(email, password);
-      setAccessToken(result.accessToken);
-
-      // Récupérer les clés API
-      const keys = await fetchApiKeys(result.accessToken);
-      setApiKeys(keys);
-
-      if (keys.length === 0) {
-        setError(
-          "Aucune clé API active trouvée. Créez-en une dans votre dashboard LastBrain."
-        );
+      if (!result.success) {
+        setError(result.error || "Échec de la connexion");
         return;
       }
 
-      // Passer à l'étape de sélection
-      setStep("select-key");
+      // Note: avec le nouveau système, login gère automatiquement
+      // la récupération et sélection de clé. Ce modal n'est plus nécessaire.
+      onClose(true);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Échec de la connexion");
     } finally {
@@ -131,24 +125,32 @@ function LBAuthModal({ onClose }: LBAuthModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 bg-gradient-to-br from-slate-900/95 via-purple-900/95 to-slate-900/95 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gradient-to-br dark:from-slate-800 dark:to-slate-900 rounded-2xl shadow-2xl max-w-md w-full border border-slate-200 dark:border-slate-700 overflow-hidden">
+    <div className="fixed inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-in fade-in duration-200">
+      <div className="bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl rounded-3xl shadow-2xl max-w-md w-full border border-slate-200/50 dark:border-slate-700/50 overflow-hidden animate-in zoom-in-95 duration-200">
         {/* Header avec gradient */}
-        <div className="bg-gradient-to-r from-violet-500 to-purple-600 p-6 text-white">
-          <div className="flex justify-between items-center">
-            <div>
-              <h2 className="text-2xl font-bold flex items-center gap-2">
-                {step === "login" ? "🔐 Connexion" : "🔑 Sélection clé API"}
-              </h2>
-              <p className="text-violet-100 text-sm mt-1">
+        <div className="relative bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 dark:from-violet-500 dark:via-purple-500 dark:to-fuchsia-500 px-6 py-8 text-white overflow-hidden">
+          {/* Pattern background */}
+          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE0YzAtMTEuMDUgOC45NS0yMCAyMC0yMHMyMCA4Ljk1IDIwIDIwLTguOTUgMjAtMjAgMjAtMjAtOC45NS0yMC0yMHoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30"></div>
+
+          <div className="relative flex justify-between items-start">
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <div className="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
+                  {step === "login" ? "🔐" : "🔑"}
+                </div>
+                <h2 className="text-2xl font-bold tracking-tight">
+                  {step === "login" ? "Connexion" : "Sélection clé"}
+                </h2>
+              </div>
+              <p className="text-white/90 text-sm font-medium mt-1 ml-13">
                 {step === "login"
                   ? "Accédez à vos outils IA"
-                  : "Créez une session sécurisée 72h"}
+                  : "Session sécurisée 72h"}
               </p>
             </div>
             <button
               onClick={() => onClose(false)}
-              className="text-white/80 hover:text-white hover:bg-white/20 rounded-lg p-2 transition-colors"
+              className="text-white/80 hover:text-white hover:bg-white/20 rounded-lg p-2 transition-all duration-200 backdrop-blur-sm"
             >
               <svg
                 className="w-5 h-5"
@@ -159,7 +161,7 @@ function LBAuthModal({ onClose }: LBAuthModalProps) {
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  strokeWidth={2}
+                  strokeWidth={2.5}
                   d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
@@ -167,43 +169,49 @@ function LBAuthModal({ onClose }: LBAuthModalProps) {
           </div>
         </div>
 
-        <div className="p-6">
+        <div className="p-8">
           {step === "login" ? (
-            <form onSubmit={handleLogin} className="space-y-4">
-              <div>
-                <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">
-                  📧 Email
+            <form onSubmit={handleLogin} className="space-y-5">
+              <div className="space-y-2">
+                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2 tracking-wide">
+                  📧 Adresse email
                 </label>
                 <input
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-4 py-3 border-2 border-slate-200 dark:border-slate-600 rounded-lg dark:bg-slate-800 dark:text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900 transition-all outline-none"
+                  className="w-full px-4 py-3.5 text-base border-2 border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:border-violet-500 dark:focus:border-violet-400 focus:ring-4 focus:ring-violet-100 dark:focus:ring-violet-900/30 transition-all outline-none font-medium tracking-wide"
                   placeholder="votre@email.com"
                   required
                   autoFocus
+                  autoComplete="email"
+                  style={{ letterSpacing: "0.01em" }}
                 />
               </div>
 
-              <div>
-                <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">
+              <div className="space-y-2">
+                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2 tracking-wide">
                   🔒 Mot de passe
                 </label>
                 <input
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="w-full px-4 py-3 border-2 border-slate-200 dark:border-slate-600 rounded-lg dark:bg-slate-800 dark:text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900 transition-all outline-none"
+                  className="w-full px-4 py-3.5 text-base border-2 border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:border-violet-500 dark:focus:border-violet-400 focus:ring-4 focus:ring-violet-100 dark:focus:ring-violet-900/30 transition-all outline-none font-medium tracking-wide"
                   placeholder="••••••••"
                   required
+                  autoComplete="current-password"
+                  style={{ letterSpacing: "0.15em" }}
                 />
               </div>
 
               {error && (
-                <div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded">
-                  <div className="flex items-start gap-2">
-                    <span className="text-red-500 text-xl">⚠️</span>
-                    <p className="text-red-700 dark:text-red-400 text-sm font-medium">
+                <div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 dark:border-red-400 px-4 py-3.5 rounded-lg animate-in slide-in-from-top-2 duration-200">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-500 dark:text-red-400 text-xl flex-shrink-0 mt-0.5">
+                      ⚠️
+                    </span>
+                    <p className="text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed">
                       {error}
                     </p>
                   </div>
@@ -213,10 +221,10 @@ function LBAuthModal({ onClose }: LBAuthModalProps) {
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full px-6 py-3 bg-gradient-to-r from-violet-500 to-purple-600 text-white font-semibold rounded-lg hover:from-violet-600 hover:to-purple-700 disabled:from-slate-400 disabled:to-slate-500 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+                className="w-full mt-6 px-6 py-4 bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 disabled:from-slate-400 disabled:to-slate-500 text-white font-bold text-base rounded-xl disabled:cursor-not-allowed transition-all duration-200 shadow-lg shadow-violet-500/30 hover:shadow-xl hover:shadow-violet-500/40 disabled:shadow-none transform hover:translate-y-[-2px] active:translate-y-0 disabled:translate-y-0 tracking-wide"
               >
                 {loading ? (
-                  <span className="flex items-center justify-center gap-2">
+                  <span className="flex items-center justify-center gap-3">
                     <svg
                       className="animate-spin h-5 w-5"
                       xmlns="http://www.w3.org/2000/svg"
@@ -237,33 +245,35 @@ function LBAuthModal({ onClose }: LBAuthModalProps) {
                         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                       ></path>
                     </svg>
-                    Connexion en cours...
+                    <span className="font-semibold">Connexion en cours...</span>
                   </span>
                 ) : (
-                  "🚀 Se connecter"
+                  <span className="flex items-center justify-center gap-2">
+                    🚀 <span>Se connecter</span>
+                  </span>
                 )}
               </button>
 
-              <div className="relative my-6">
+              <div className="relative my-8">
                 <div className="absolute inset-0 flex items-center">
                   <div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
                 </div>
                 <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-white dark:bg-slate-800 text-slate-500">
+                  <span className="px-4 bg-white dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
                     ou
                   </span>
                 </div>
               </div>
 
-              <div className="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-900/20 dark:to-purple-900/20 rounded-lg p-4 border border-violet-200 dark:border-violet-800">
-                <p className="text-sm text-slate-700 dark:text-slate-300 text-center">
+              <div className="bg-gradient-to-br from-violet-50 to-purple-50 dark:from-violet-900/20 dark:to-purple-900/20 rounded-xl p-5 border border-violet-200 dark:border-violet-800/50 backdrop-blur-sm">
+                <p className="text-sm text-slate-700 dark:text-slate-300 text-center font-medium mb-3">
                   Pas encore de compte ?
                 </p>
                 <a
-                  href="https://lastbrain.io/signup"
+                  href="https://prompt.lastbrain.io/signup"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="block mt-2 text-center text-violet-600 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 font-semibold text-sm hover:underline"
+                  className="block text-center px-4 py-3 bg-white dark:bg-slate-800 text-violet-600 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 font-bold text-sm rounded-lg hover:shadow-md transition-all duration-200 border-2 border-violet-200 dark:border-violet-700"
                 >
                   ✨ Créer un compte gratuitement
                 </a>

package/src/components/LBSigninModal.tsx

@@ -0,0 +1,399 @@
+"use client";
+
+import { useState } from "react";
+import { useLB } from "../context/LBAuthProvider";
+
+export interface LBSigninModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
+  // Vérifier si LBProvider est disponible
+  let login:
+    | ((
+        email: string,
+        password: string
+      ) => Promise<{ success: boolean; error?: string }>)
+    | undefined;
+
+  try {
+    const lbContext = useLB();
+    login = lbContext.login;
+  } catch {
+    // LBProvider n'est pas disponible, ne pas rendre le modal
+    return null;
+  }
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  if (!isOpen || !login) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const result = await login(email, password);
+      if (result.success) {
+        onClose();
+      } else {
+        setError(result.error || "Échec de la connexion");
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Une erreur s'est produite"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999,
+        padding: "16px",
+      }}
+      onClick={onClose}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        style={{
+          backgroundColor: "var(--ai-bg-primary, #1f2937)",
+          borderRadius: "12px",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+          maxWidth: "420px",
+          width: "100%",
+          border: "1px solid var(--ai-border-primary, #374151)",
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "85vh",
+          overflow: "hidden",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          style={{
+            padding: "20px 24px",
+            borderBottom: "1px solid var(--ai-border-primary, #374151)",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            background: "var(--ai-bg-secondary, #111827)",
+          }}
+        >
+          <h2
+            style={{
+              margin: 0,
+              fontSize: "18px",
+              fontWeight: 600,
+              color: "var(--ai-text-primary, #f9fafb)",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+            }}
+          >
+            🔐 Connexion LastBrain
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "var(--ai-text-secondary, #9ca3af)",
+              cursor: "pointer",
+              fontSize: "24px",
+              lineHeight: 1,
+              padding: "4px 8px",
+              borderRadius: "6px",
+              transition: "all 0.2s ease",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background =
+                "var(--ai-bg-tertiary, #374151)";
+              e.currentTarget.style.color = "var(--ai-text-primary, #f9fafb)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "transparent";
+              e.currentTarget.style.color = "var(--ai-text-secondary, #9ca3af)";
+            }}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <div
+          style={{
+            padding: "24px",
+            overflow: "auto",
+            flex: 1,
+          }}
+        >
+          <form
+            onSubmit={handleSubmit}
+            style={{ display: "flex", flexDirection: "column", gap: "16px" }}
+          >
+            <div>
+              <label
+                style={{
+                  display: "block",
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "var(--ai-text-secondary, #9ca3af)",
+                  marginBottom: "8px",
+                  letterSpacing: "0.02em",
+                }}
+              >
+                📧 Email
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoFocus
+                autoComplete="email"
+                placeholder="votre@email.com"
+                style={{
+                  width: "100%",
+                  padding: "10px 12px",
+                  fontSize: "14px",
+                  border: "1px solid var(--ai-border-primary, #374151)",
+                  borderRadius: "8px",
+                  background: "var(--ai-bg-secondary, #111827)",
+                  color: "var(--ai-text-primary, #f9fafb)",
+                  outline: "none",
+                  transition: "all 0.2s ease",
+                  letterSpacing: "0.01em",
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = "#8b5cf6";
+                  e.currentTarget.style.boxShadow =
+                    "0 0 0 3px rgba(139, 92, 246, 0.1)";
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor =
+                    "var(--ai-border-primary, #374151)";
+                  e.currentTarget.style.boxShadow = "none";
+                }}
+              />
+            </div>
+
+            <div>
+              <label
+                style={{
+                  display: "block",
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "var(--ai-text-secondary, #9ca3af)",
+                  marginBottom: "8px",
+                  letterSpacing: "0.02em",
+                }}
+              >
+                🔒 Mot de passe
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                autoComplete="current-password"
+                placeholder="••••••••"
+                style={{
+                  width: "100%",
+                  padding: "10px 12px",
+                  fontSize: "14px",
+                  border: "1px solid var(--ai-border-primary, #374151)",
+                  borderRadius: "8px",
+                  background: "var(--ai-bg-secondary, #111827)",
+                  color: "var(--ai-text-primary, #f9fafb)",
+                  outline: "none",
+                  transition: "all 0.2s ease",
+                  letterSpacing: "0.15em",
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = "#8b5cf6";
+                  e.currentTarget.style.boxShadow =
+                    "0 0 0 3px rgba(139, 92, 246, 0.1)";
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor =
+                    "var(--ai-border-primary, #374151)";
+                  e.currentTarget.style.boxShadow = "none";
+                }}
+              />
+            </div>
+
+            {error && (
+              <div
+                style={{
+                  padding: "12px",
+                  background: "rgba(239, 68, 68, 0.1)",
+                  border: "1px solid rgba(239, 68, 68, 0.3)",
+                  borderRadius: "8px",
+                  color: "#ef4444",
+                  fontSize: "13px",
+                  display: "flex",
+                  alignItems: "start",
+                  gap: "8px",
+                }}
+              >
+                <span style={{ fontSize: "16px", flexShrink: 0 }}>⚠️</span>
+                <span style={{ flex: 1, lineHeight: "1.5" }}>{error}</span>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              style={{
+                width: "100%",
+                padding: "12px",
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#ffffff",
+                background: loading
+                  ? "var(--ai-bg-tertiary, #374151)"
+                  : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
+                border: "none",
+                borderRadius: "8px",
+                cursor: loading ? "not-allowed" : "pointer",
+                transition: "all 0.2s ease",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px",
+                letterSpacing: "0.02em",
+                opacity: loading ? 0.6 : 1,
+              }}
+              onMouseEnter={(e) => {
+                if (!loading) {
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow =
+                    "0 10px 20px rgba(139, 92, 246, 0.3)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = "translateY(0)";
+                e.currentTarget.style.boxShadow = "none";
+              }}
+            >
+              {loading ? (
+                <>
+                  <svg
+                    style={{
+                      animation: "spin 1s linear infinite",
+                      width: "16px",
+                      height: "16px",
+                    }}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                      opacity="0.25"
+                    />
+                    <path
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                      fill="currentColor"
+                      opacity="0.75"
+                    />
+                  </svg>
+                  Connexion en cours...
+                </>
+              ) : (
+                <>
+                  <span>🚀</span>
+                  Se connecter
+                </>
+              )}
+            </button>
+
+            <div
+              style={{
+                marginTop: "8px",
+                padding: "16px",
+                background: "rgba(139, 92, 246, 0.05)",
+                border: "1px solid rgba(139, 92, 246, 0.2)",
+                borderRadius: "8px",
+                textAlign: "center",
+              }}
+            >
+              <p
+                style={{
+                  margin: "0 0 12px 0",
+                  fontSize: "13px",
+                  color: "var(--ai-text-secondary, #9ca3af)",
+                }}
+              >
+                Pas encore de compte ?
+              </p>
+              <a
+                href="https://lastbrain.io/signup"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: "inline-block",
+                  padding: "8px 16px",
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "#8b5cf6",
+                  textDecoration: "none",
+                  border: "1px solid rgba(139, 92, 246, 0.3)",
+                  borderRadius: "6px",
+                  transition: "all 0.2s ease",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "rgba(139, 92, 246, 0.1)";
+                  e.currentTarget.style.borderColor = "#8b5cf6";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "transparent";
+                  e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.3)";
+                }}
+              >
+                ✨ Créer un compte gratuitement
+              </a>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <style>
+        {`
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </div>
+  );
+}