Improve the demo feature of the project

frontend/src/components/demo/DemoErrorScreen.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Button, Card, CardBody } from '../ui';
+import { PublicLayout } from '../layout';
+import { AlertCircle, RefreshCw, Home, HelpCircle } from 'lucide-react';
+
+interface Props {
+  error: string;
+  details?: Array<{ service: string; error_message: string }>;
+  onRetry: () => void;
+  isRetrying?: boolean;
+}
+
+export const DemoErrorScreen: React.FC<Props> = ({
+  error,
+  details,
+  onRetry,
+  isRetrying = false,
+}) => {
+  return (
+    <PublicLayout
+      variant="centered"
+      headerProps={{
+        showThemeToggle: true,
+        showAuthButtons: false,
+      }}
+    >
+      <div className="max-w-2xl mx-auto p-8">
+        <Card className="shadow-xl">
+          <CardBody className="p-8 text-center">
+            <div className="flex justify-center mb-4">
+              <AlertCircle className="w-20 h-20 text-[var(--color-error)]" />
+            </div>
+
+            <h1 className="text-3xl font-bold text-[var(--color-error)] mb-3">
+              Error en la Configuración del Demo
+            </h1>
+
+            <p className="text-[var(--text-secondary)] mb-6 text-lg">
+              {error}
+            </p>
+
+            {details && details.length > 0 && (
+              <div className="mb-6 p-4 bg-[var(--color-error)]/10 border border-[var(--color-error)] rounded-lg text-left">
+                <h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
+                  Detalles del error:
+                </h3>
+                <ul className="space-y-2">
+                  {details.map((detail, idx) => (
+                    <li key={idx} className="text-sm">
+                      <span className="font-medium text-[var(--text-primary)]">
+                        {detail.service}:
+                      </span>{' '}
+                      <span className="text-[var(--text-secondary)]">
+                        {detail.error_message}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-3 max-w-md mx-auto mt-6">
+              <Button
+                onClick={onRetry}
+                disabled={isRetrying}
+                variant="primary"
+                size="lg"
+                className="w-full"
+              >
+                <RefreshCw className={`w-5 h-5 mr-2 ${isRetrying ? 'animate-spin' : ''}`} />
+                {isRetrying ? 'Reintentando...' : 'Reintentar Configuración'}
+              </Button>
+
+              <Button
+                onClick={() => window.location.href = '/demo'}
+                variant="secondary"
+                size="lg"
+                className="w-full"
+              >
+                <Home className="w-5 h-5 mr-2" />
+                Volver a la Página Demo
+              </Button>
+
+              <Button
+                onClick={() => window.location.href = '/contact'}
+                variant="ghost"
+                size="lg"
+                className="w-full"
+              >
+                <HelpCircle className="w-5 h-5 mr-2" />
+                Contactar Soporte
+              </Button>
+            </div>
+
+            <div className="mt-6">
+              <p className="text-xs text-[var(--text-tertiary)]">
+                Si el problema persiste, por favor contacta a nuestro equipo de soporte.
+              </p>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </PublicLayout>
+  );
+};