feat: switch to sections

apps/landing/src/app/demo/gallery/page.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
+import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { Section } from '@/components/shared/Section';
 import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
 import { ImageGrid } from '@/components/demo/gallery/ImageGrid';
 import { EmptyGalleryState } from '@/components/demo/gallery/EmptyGalleryState';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
-const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
 const IMAGES_PER_PAGE = 30;
 
 type ImageItem = {
@@ -31,22 +31,13 @@ type ImagesResponse = {
   message?: string;
 };
 
-type ApiKeyInfo = {
-  organizationSlug?: string;
-  projectSlug?: string;
-};
-
 type DownloadTimeMap = {
   [imageId: string]: number;
 };
 
 export default function GalleryPage() {
-  const [apiKey, setApiKey] = useState('');
+  // API Key from context
-  const [apiKeyVisible, setApiKeyVisible] = useState(false);
+  const { apiKey, apiKeyValidated, focus } = useApiKey();
-  const [apiKeyValidated, setApiKeyValidated] = useState(false);
-  const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
-  const [apiKeyError, setApiKeyError] = useState('');
-  const [validatingKey, setValidatingKey] = useState(false);
 
   const [images, setImages] = useState<ImageItem[]>([]);
   const [offset, setOffset] = useState(0);
@@ -59,110 +50,10 @@ export default function GalleryPage() {
   const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});
 
   useEffect(() => {
-    const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+    if (apiKeyValidated) {
-    if (storedApiKey) {
+      fetchImages(apiKey, 0);
-      setApiKey(storedApiKey);
-      validateStoredApiKey(storedApiKey);
     }
-  }, []);
+  }, [apiKeyValidated]);
-
-  const validateStoredApiKey = async (keyToValidate: string) => {
-    setValidatingKey(true);
-    setApiKeyError('');
-
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/info`, {
-        headers: {
-          'X-API-Key': keyToValidate,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiKeyValidated(true);
-        if (data.keyInfo) {
-          setApiKeyInfo({
-            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
-            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
-          });
-        } else {
-          setApiKeyInfo({
-            organizationSlug: 'Unknown',
-            projectSlug: 'Unknown',
-          });
-        }
-        await fetchImages(keyToValidate, 0);
-      } else {
-        localStorage.removeItem(API_KEY_STORAGE_KEY);
-        setApiKeyError('Stored API key is invalid or expired');
-        setApiKeyValidated(false);
-      }
-    } catch (error) {
-      setApiKeyError('Failed to validate stored API key');
-      setApiKeyValidated(false);
-    } finally {
-      setValidatingKey(false);
-    }
-  };
-
-  const validateApiKey = async () => {
-    if (!apiKey.trim()) {
-      setApiKeyError('Please enter an API key');
-      return;
-    }
-
-    setValidatingKey(true);
-    setApiKeyError('');
-
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/info`, {
-        headers: {
-          'X-API-Key': apiKey,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiKeyValidated(true);
-        localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
-
-        if (data.keyInfo) {
-          setApiKeyInfo({
-            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
-            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
-          });
-        } else {
-          setApiKeyInfo({
-            organizationSlug: 'Unknown',
-            projectSlug: 'Unknown',
-          });
-        }
-
-        await fetchImages(apiKey, 0);
-      } else {
-        const error = await response.json();
-        setApiKeyError(error.message || 'Invalid API key');
-        setApiKeyValidated(false);
-      }
-    } catch (error) {
-      setApiKeyError('Failed to validate API key. Please check your connection.');
-      setApiKeyValidated(false);
-    } finally {
-      setValidatingKey(false);
-    }
-  };
-
-  const revokeApiKey = () => {
-    localStorage.removeItem(API_KEY_STORAGE_KEY);
-    setApiKey('');
-    setApiKeyValidated(false);
-    setApiKeyInfo(null);
-    setApiKeyError('');
-    setImages([]);
-    setOffset(0);
-    setHasMore(false);
-    setError('');
-  };
 
   const fetchImages = async (keyToUse: string, fetchOffset: number) => {
     if (fetchOffset === 0) {
@@ -223,16 +114,7 @@ export default function GalleryPage() {
   }, []);
 
   return (
-    <div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
+    <Section className="py-12 md:py-16 min-h-screen">
-      {apiKeyValidated && apiKeyInfo && (
-        <MinimizedApiKey
-          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
-          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
-          apiKey={apiKey}
-          onRevoke={revokeApiKey}
-        />
-      )}
-
       <header className="mb-8 md:mb-12">
         <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
           Image Gallery
@@ -242,82 +124,22 @@ export default function GalleryPage() {
         </p>
       </header>
 
+      {/* API Key Required Notice - Only show when not validated */}
       {!apiKeyValidated && (
-        <section
+        <div className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
-          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
+          <div className="flex items-center justify-between flex-wrap gap-4">
-          aria-label="API Key Validation"
+            <div>
-        >
+              <h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
-          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
+              <p className="text-sm text-gray-400">Enter your API key to browse your images</p>
-          <div className="flex gap-3">
-            <div className="flex-1 relative">
-              <input
-                type={apiKeyVisible ? 'text' : 'password'}
-                value={apiKey}
-                onChange={(e) => setApiKey(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    validateApiKey();
-                  }
-                }}
-                placeholder="Enter your API key"
-                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
-                aria-label="API key input"
-              />
-              <button
-                type="button"
-                onClick={() => setApiKeyVisible(!apiKeyVisible)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 rounded"
-                aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
-              >
-                {apiKeyVisible ? (
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                    />
-                  </svg>
-                ) : (
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                    />
-                  </svg>
-                )}
-              </button>
             </div>
             <button
-              onClick={validateApiKey}
+              onClick={focus}
-              disabled={validatingKey}
+              className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
-              className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
-              aria-busy={validatingKey}
             >
-              {validatingKey ? 'Validating...' : 'Validate'}
+              Enter API Key
             </button>
           </div>
-
+        </div>
-          {apiKeyError && (
-            <div className="mt-3 p-3 bg-red-900/20 border border-red-700/50 rounded-lg" role="alert" aria-live="assertive">
-              <p className="text-sm text-red-400 font-medium mb-1">{apiKeyError}</p>
-              <p className="text-xs text-red-300/80">
-                {apiKeyError.includes('Invalid')
-                  ? 'Please check your API key and try again. You can create a new key in the admin dashboard.'
-                  : 'Please check your internet connection and try again.'}
-              </p>
-            </div>
-          )}
-        </section>
       )}
 
       {apiKeyValidated && (
@@ -372,6 +194,6 @@ export default function GalleryPage() {
       )}
 
       <ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
-    </div>
+    </Section>
   );
 }

apps/landing/src/app/demo/layout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { SubsectionNav } from '@/components/shared/SubsectionNav';
+import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
+import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
+
+interface DemoLayoutProps {
+  children: ReactNode;
+}
+
+const navItems = [
+  { label: 'Text to Image', href: '/demo/tti' },
+  { label: 'Upload', href: '/demo/upload' },
+  { label: 'Gallery', href: '/demo/gallery' },
+];
+
+export default function DemoLayout({ children }: DemoLayoutProps) {
+  const pathname = usePathname();
+
+  return (
+    <ApiKeyProvider>
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
+        {/* Animated gradient background */}
+        <div className="fixed inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
+          <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
+        </div>
+
+        {/* Subsection Navigation */}
+        <SubsectionNav items={navItems} currentPath={pathname} rightSlot={<ApiKeyWidget />} />
+
+        {/* Page Content */}
+        <div className="relative z-10">{children}</div>
+      </div>
+    </ApiKeyProvider>
+  );
+}

apps/landing/src/app/demo/tti/page.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useRef, useEffect, KeyboardEvent } from 'react';
+import { useState, useRef, KeyboardEvent } from 'react';
-import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
+import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { Section } from '@/components/shared/Section';
 import { GenerationTimer } from '@/components/demo/GenerationTimer';
 import { ResultCard } from '@/components/demo/ResultCard';
 import { AdvancedOptionsModal, AdvancedOptionsData } from '@/components/demo/AdvancedOptionsModal';
 import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
-const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
 
 // Generate random 6-character uppercase ID for pairing images
 function generatePairId(): string {
@@ -51,19 +51,9 @@ interface GenerationResult {
   } & AdvancedOptionsData;
 }
 
-interface ApiKeyInfo {
-  organizationSlug?: string;
-  projectSlug?: string;
-}
-
 export default function DemoTTIPage() {
-  // API Key State
+  // API Key from context
-  const [apiKey, setApiKey] = useState('');
+  const { apiKey, apiKeyValidated, focus } = useApiKey();
-  const [apiKeyVisible, setApiKeyVisible] = useState(false);
-  const [apiKeyValidated, setApiKeyValidated] = useState(false);
-  const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
-  const [apiKeyError, setApiKeyError] = useState('');
-  const [validatingKey, setValidatingKey] = useState(false);
 
   // Prompt State
   const [prompt, setPrompt] = useState('');
@@ -85,118 +75,6 @@ export default function DemoTTIPage() {
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  // Load API key from localStorage on mount
-  useEffect(() => {
-    const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
-    if (storedApiKey) {
-      setApiKey(storedApiKey);
-      // Auto-validate the stored key
-      validateStoredApiKey(storedApiKey);
-    }
-  }, []);
-
-  // Validate stored API key (without user interaction)
-  const validateStoredApiKey = async (keyToValidate: string) => {
-    setValidatingKey(true);
-    setApiKeyError('');
-
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/info`, {
-        headers: {
-          'X-API-Key': keyToValidate,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiKeyValidated(true);
-        if (data.keyInfo) {
-          setApiKeyInfo({
-            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
-            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
-          });
-        } else {
-          setApiKeyInfo({
-            organizationSlug: 'Unknown',
-            projectSlug: 'Unknown',
-          });
-        }
-      } else {
-        // Stored key is invalid, clear it
-        localStorage.removeItem(API_KEY_STORAGE_KEY);
-        setApiKeyError('Stored API key is invalid or expired');
-        setApiKeyValidated(false);
-      }
-    } catch (error) {
-      setApiKeyError('Failed to validate stored API key');
-      setApiKeyValidated(false);
-    } finally {
-      setValidatingKey(false);
-    }
-  };
-
-  // Validate API Key
-  const validateApiKey = async () => {
-    if (!apiKey.trim()) {
-      setApiKeyError('Please enter an API key');
-      return;
-    }
-
-    setValidatingKey(true);
-    setApiKeyError('');
-
-    try {
-      // Test API key with a minimal request to /api/info or similar
-      const response = await fetch(`${API_BASE_URL}/api/info`, {
-        headers: {
-          'X-API-Key': apiKey,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiKeyValidated(true);
-
-        // Save to localStorage on successful validation
-        localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
-
-        // Extract org/project info from API response
-        if (data.keyInfo) {
-          setApiKeyInfo({
-            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
-            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
-          });
-        } else {
-          setApiKeyInfo({
-            organizationSlug: 'Unknown',
-            projectSlug: 'Unknown',
-          });
-        }
-      } else {
-        const error = await response.json();
-        setApiKeyError(error.message || 'Invalid API key');
-        setApiKeyValidated(false);
-      }
-    } catch (error) {
-      setApiKeyError('Failed to validate API key. Please check your connection.');
-      setApiKeyValidated(false);
-    } finally {
-      setValidatingKey(false);
-    }
-  };
-
-  // Revoke API Key
-  const revokeApiKey = () => {
-    // Clear localStorage
-    localStorage.removeItem(API_KEY_STORAGE_KEY);
-
-    // Clear state
-    setApiKey('');
-    setApiKeyValidated(false);
-    setApiKeyInfo(null);
-    setApiKeyError('');
-  };
-
   // Generate Images
   const generateImages = async () => {
     if (!prompt.trim()) {
@@ -380,17 +258,7 @@ export default function DemoTTIPage() {
   };
 
   return (
-    <div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
+    <Section className="py-12 md:py-16 min-h-screen">
-      {/* Minimized API Key Badge */}
-      {apiKeyValidated && apiKeyInfo && (
-        <MinimizedApiKey
-          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
-          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
-          apiKey={apiKey}
-          onRevoke={revokeApiKey}
-        />
-      )}
-
       {/* Page Header */}
       <header className="mb-8 md:mb-12">
         <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
@@ -401,77 +269,22 @@ export default function DemoTTIPage() {
         </p>
       </header>
 
-      {/* API Key Section - Only show when not validated */}
+      {/* API Key Required Notice - Only show when not validated */}
       {!apiKeyValidated && (
-        <section
+        <div className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
-          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
+          <div className="flex items-center justify-between flex-wrap gap-4">
-          aria-label="API Key Validation"
+            <div>
-        >
+              <h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
-          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
+              <p className="text-sm text-gray-400">Enter your API key to use this workbench</p>
-          <div className="flex gap-3">
-            <div className="flex-1 relative">
-              <input
-                type={apiKeyVisible ? 'text' : 'password'}
-                value={apiKey}
-                onChange={(e) => setApiKey(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    validateApiKey();
-                  }
-                }}
-                placeholder="Enter your API key"
-                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
-                aria-label="API key input"
-              />
-              <button
-                type="button"
-                onClick={() => setApiKeyVisible(!apiKeyVisible)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
-                aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
-              >
-                {apiKeyVisible ? (
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                    />
-                  </svg>
-                ) : (
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                    />
-                  </svg>
-                )}
-              </button>
             </div>
             <button
-              onClick={validateApiKey}
+              onClick={focus}
-              disabled={validatingKey}
+              className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
-              className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-amber-500"
             >
-              {validatingKey ? 'Validating...' : 'Validate'}
+              Enter API Key
             </button>
           </div>
-
+        </div>
-          {apiKeyError && (
-            <p className="mt-3 text-sm text-red-400" role="alert">
-              {apiKeyError}
-            </p>
-          )}
-        </section>
       )}
 
       {/* Unified Prompt & Generation Card */}
@@ -623,6 +436,6 @@ export default function DemoTTIPage() {
 
       {/* Zoom Modal */}
       <ImageZoomModal imageUrl={zoomedImage} onClose={() => setZoomedImage(null)} />
-    </div>
+    </Section>
   );
 }

apps/landing/src/app/demo/upload/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useEffect, useRef, DragEvent, ChangeEvent } from 'react';
-import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
+import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { Section } from '@/components/shared/Section';
 import { CodeExamplesWidget } from '@/components/demo/CodeExamplesWidget';
 import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
 import { SelectedFileCodePreview } from '@/components/demo/SelectedFileCodePreview';
@@ -10,7 +11,6 @@ import { ImageCard } from '@/components/shared/ImageCard';
 import { calculateAspectRatio } from '@/utils/imageUtils';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
-const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
 const UPLOAD_HISTORY_KEY = 'banatie_upload_history';
 
 const ALLOWED_FILE_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
@@ -46,19 +46,9 @@ interface UploadHistoryItem {
   downloadMs?: number;
 }
 
-interface ApiKeyInfo {
-  organizationSlug?: string;
-  projectSlug?: string;
-}
-
 export default function DemoUploadPage() {
-  // API Key State
+  // API Key from context
-  const [apiKey, setApiKey] = useState('');
+  const { apiKey, apiKeyValidated, focus } = useApiKey();
-  const [apiKeyVisible, setApiKeyVisible] = useState(false);
-  const [apiKeyValidated, setApiKeyValidated] = useState(false);
-  const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
-  const [apiKeyError, setApiKeyError] = useState('');
-  const [validatingKey, setValidatingKey] = useState(false);
 
   // Upload State
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -85,15 +75,6 @@ export default function DemoUploadPage() {
   // Refs
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Load API key from localStorage on mount
-  useEffect(() => {
-    const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
-    if (storedApiKey) {
-      setApiKey(storedApiKey);
-      validateStoredApiKey(storedApiKey);
-    }
-  }, []);
-
   // Load upload history from sessionStorage
   useEffect(() => {
     const storedHistory = sessionStorage.getItem(UPLOAD_HISTORY_KEY);
@@ -119,97 +100,6 @@ export default function DemoUploadPage() {
     }
   }, [uploadHistory]);
 
-  const validateStoredApiKey = async (keyToValidate: string) => {
-    setValidatingKey(true);
-    setApiKeyError('');
-
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/info`, {
-        headers: {
-          'X-API-Key': keyToValidate,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiKeyValidated(true);
-        if (data.keyInfo) {
-          setApiKeyInfo({
-            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
-            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
-          });
-        } else {
-          setApiKeyInfo({
-            organizationSlug: 'Unknown',
-            projectSlug: 'Unknown',
-          });
-        }
-      } else {
-        localStorage.removeItem(API_KEY_STORAGE_KEY);
-        setApiKeyError('Stored API key is invalid or expired');
-        setApiKeyValidated(false);
-      }
-    } catch (error) {
-      setApiKeyError('Failed to validate stored API key');
-      setApiKeyValidated(false);
-    } finally {
-      setValidatingKey(false);
-    }
-  };
-
-  const validateApiKey = async () => {
-    if (!apiKey.trim()) {
-      setApiKeyError('Please enter an API key');
-      return;
-    }
-
-    setValidatingKey(true);
-    setApiKeyError('');
-
-    try {
-      const response = await fetch(`${API_BASE_URL}/api/info`, {
-        headers: {
-          'X-API-Key': apiKey,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiKeyValidated(true);
-        localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
-
-        if (data.keyInfo) {
-          setApiKeyInfo({
-            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
-            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
-          });
-        } else {
-          setApiKeyInfo({
-            organizationSlug: 'Unknown',
-            projectSlug: 'Unknown',
-          });
-        }
-      } else {
-        const error = await response.json();
-        setApiKeyError(error.message || 'Invalid API key');
-        setApiKeyValidated(false);
-      }
-    } catch (error) {
-      setApiKeyError('Failed to validate API key. Please check your connection.');
-      setApiKeyValidated(false);
-    } finally {
-      setValidatingKey(false);
-    }
-  };
-
-  const revokeApiKey = () => {
-    localStorage.removeItem(API_KEY_STORAGE_KEY);
-    setApiKey('');
-    setApiKeyValidated(false);
-    setApiKeyInfo(null);
-    setApiKeyError('');
-  };
-
   const validateFile = (file: File): string | null => {
     if (!ALLOWED_FILE_TYPES.includes(file.type)) {
       return `Invalid file type. Allowed: PNG, JPEG, JPG, WebP`;
@@ -407,16 +297,7 @@ Body (form-data):
   };
 
   return (
-    <div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
+    <Section className="py-12 md:py-16 min-h-screen">
-      {apiKeyValidated && apiKeyInfo && (
-        <MinimizedApiKey
-          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
-          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
-          apiKey={apiKey}
-          onRevoke={revokeApiKey}
-        />
-      )}
-
       <header className="mb-8 md:mb-12">
         <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
           File Upload Workbench
@@ -426,76 +307,22 @@ Body (form-data):
         </p>
       </header>
 
+      {/* API Key Required Notice - Only show when not validated */}
       {!apiKeyValidated && (
-        <section
+        <div className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
-          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
+          <div className="flex items-center justify-between flex-wrap gap-4">
-          aria-label="API Key Validation"
+            <div>
-        >
+              <h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
-          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
+              <p className="text-sm text-gray-400">Enter your API key to use this workbench</p>
-          <div className="flex gap-3">
-            <div className="flex-1 relative">
-              <input
-                type={apiKeyVisible ? 'text' : 'password'}
-                value={apiKey}
-                onChange={(e) => setApiKey(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    validateApiKey();
-                  }
-                }}
-                placeholder="Enter your API key"
-                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
-                aria-label="API key input"
-              />
-              <button
-                type="button"
-                onClick={() => setApiKeyVisible(!apiKeyVisible)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
-                aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
-              >
-                {apiKeyVisible ? (
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                    />
-                  </svg>
-                ) : (
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                    />
-                  </svg>
-                )}
-              </button>
             </div>
             <button
-              onClick={validateApiKey}
+              onClick={focus}
-              disabled={validatingKey}
+              className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
-              className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-amber-500"
             >
-              {validatingKey ? 'Validating...' : 'Validate'}
+              Enter API Key
             </button>
           </div>
-
+        </div>
-          {apiKeyError && (
-            <p className="mt-3 text-sm text-red-400" role="alert">
-              {apiKeyError}
-            </p>
-          )}
-        </section>
       )}
 
       <section
@@ -664,6 +491,6 @@ Body (form-data):
 
       {/* Image Zoom Modal */}
       <ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
-    </div>
+    </Section>
   );
 }