fix: upload page

apps/landing/src/app/admin/apikeys/page.tsx

@@ -6,6 +6,7 @@ import { createProjectApiKey, listApiKeys } from '@/lib/actions/apiKeyActions';
 import KeyDisplay from '@/components/admin/KeyDisplay';
 import AdminFormInput from '@/components/admin/AdminFormInput';
 import AdminButton from '@/components/admin/AdminButton';
+import { Section } from '@/components/shared/Section';
 
 const STORAGE_KEY = 'banatie_master_key';
 
@@ -68,7 +69,7 @@ export default function ApiKeysPage() {
   }
 
   return (
-    <div className="max-w-6xl mx-auto px-6 py-8">
+    <Section>
       {/* Page Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-white mb-2">Project API Keys</h1>
@@ -188,6 +189,6 @@ export default function ApiKeysPage() {
           </div>
         )}
       </div>
-    </div>
+    </Section>
   );
 }

apps/landing/src/app/admin/master/page.tsx

@@ -5,6 +5,7 @@ import { bootstrapMasterKey } from '@/lib/actions/apiKeyActions';
 import KeyDisplay from '@/components/admin/KeyDisplay';
 import AdminFormInput from '@/components/admin/AdminFormInput';
 import AdminButton from '@/components/admin/AdminButton';
+import { NarrowSection } from '@/components/shared/NarrowSection';
 
 const STORAGE_KEY = 'banatie_master_key';
 
@@ -66,7 +67,7 @@ export default function MasterKeyPage() {
   };
 
   return (
-    <div className="max-w-4xl mx-auto px-6 py-8">
+    <NarrowSection>
       {/* Page Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-white mb-2">Master Key Management</h1>
@@ -132,6 +133,6 @@ export default function MasterKeyPage() {
           Save Manual Key
         </AdminButton>
       </div>
-    </div>
+    </NarrowSection>
   );
 }

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

@@ -1,13 +1,12 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
-import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
+import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { Section } from '@/components/shared/Section';
 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 +30,13 @@ type ImagesResponse = {
   message?: string;
 };
 
-type ApiKeyInfo = {
-  organizationSlug?: string;
-  projectSlug?: string;
-};
-
 type DownloadTimeMap = {
   [imageId: string]: number;
 };
 
 export default function GalleryPage() {
-  const [apiKey, setApiKey] = useState('');
-  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);
+  // API Key from context
+  const { apiKey, apiKeyValidated, focus } = useApiKey();
 
   const [images, setImages] = useState<ImageItem[]>([]);
   const [offset, setOffset] = useState(0);
@@ -55,114 +45,13 @@ export default function GalleryPage() {
   const [loadingMore, setLoadingMore] = useState(false);
   const [error, setError] = useState('');
 
-  const [zoomedImageUrl, setZoomedImageUrl] = useState<string | null>(null);
   const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});
 
   useEffect(() => {
-    const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
-    if (storedApiKey) {
-      setApiKey(storedApiKey);
-      validateStoredApiKey(storedApiKey);
+    if (apiKeyValidated) {
+      fetchImages(apiKey, 0);
     }
-  }, []);
-
-  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('');
-  };
+  }, [apiKeyValidated]);
 
   const fetchImages = async (keyToUse: string, fetchOffset: number) => {
     if (fetchOffset === 0) {
@@ -223,16 +112,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">
-      {apiKeyValidated && apiKeyInfo && (
-        <MinimizedApiKey
-          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
-          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
-          apiKey={apiKey}
-          onRevoke={revokeApiKey}
-        />
-      )}
-
+    <Section className="py-12 md:py-16 min-h-screen">
       <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,83 +122,23 @@ export default function GalleryPage() {
         </p>
       </header>
 
+      {/* API Key Required Notice - Only show when not validated */}
       {!apiKeyValidated && (
-        <section
-          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
-          aria-label="API Key Validation"
-        >
-          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
-          <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 className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
+          <div className="flex items-center justify-between flex-wrap gap-4">
+            <div>
+              <h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
+              <p className="text-sm text-gray-400">Enter your API key to browse your images</p>
             </div>
             <button
-              onClick={validateApiKey}
-              disabled={validatingKey}
-              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}
+              onClick={focus}
+              className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
             >
-              {validatingKey ? 'Validating...' : 'Validate'}
+              Enter API Key
             </button>
           </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 && (
         <section aria-label="Image Gallery">
@@ -342,7 +162,6 @@ export default function GalleryPage() {
             <>
               <ImageGrid
                 images={images}
-                onImageZoom={setZoomedImageUrl}
                 onDownloadMeasured={handleDownloadMeasured}
               />
 
@@ -370,8 +189,6 @@ export default function GalleryPage() {
           )}
         </section>
       )}
-
-      <ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
-    </div>
+    </Section>
   );
 }

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
+import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { PageProvider } from '@/contexts/page-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>
+      <PageProvider
+        navItems={navItems}
+        currentPath={pathname}
+        rightSlot={<ApiKeyWidget />}
+      >
+        {children}
+      </PageProvider>
+    </ApiKeyProvider>
+  );
+}

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

@@ -1,14 +1,13 @@
 'use client';
 
-import { useState, useRef, useEffect, KeyboardEvent } from 'react';
-import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
+import { useState, useRef, KeyboardEvent } from 'react';
+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 +50,9 @@ interface GenerationResult {
   } & AdvancedOptionsData;
 }
 
-interface ApiKeyInfo {
-  organizationSlug?: string;
-  projectSlug?: string;
-}
-
 export default function DemoTTIPage() {
-  // API Key State
-  const [apiKey, setApiKey] = useState('');
-  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);
+  // API Key from context
+  const { apiKey, apiKeyValidated, focus } = useApiKey();
 
   // Prompt State
   const [prompt, setPrompt] = useState('');
@@ -80,123 +69,8 @@ export default function DemoTTIPage() {
   // Results State
   const [results, setResults] = useState<GenerationResult[]>([]);
 
-  // Modal State
-  const [zoomedImage, setZoomedImage] = useState<string | null>(null);
-
   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 +254,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">
-      {/* Minimized API Key Badge */}
-      {apiKeyValidated && apiKeyInfo && (
-        <MinimizedApiKey
-          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
-          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
-          apiKey={apiKey}
-          onRevoke={revokeApiKey}
-        />
-      )}
-
+    <Section className="py-12 md:py-16 min-h-screen">
       {/* 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 +265,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
-          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
-          aria-label="API Key Validation"
-        >
-          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
-          <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 className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
+          <div className="flex items-center justify-between flex-wrap gap-4">
+            <div>
+              <h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
+              <p className="text-sm text-gray-400">Enter your API key to use this workbench</p>
             </div>
             <button
-              onClick={validateApiKey}
-              disabled={validatingKey}
-              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"
+              onClick={focus}
+              className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
             >
-              {validatingKey ? 'Validating...' : 'Validate'}
+              Enter API Key
             </button>
           </div>
-
-          {apiKeyError && (
-            <p className="mt-3 text-sm text-red-400" role="alert">
-              {apiKeyError}
-            </p>
-          )}
-        </section>
+        </div>
       )}
 
       {/* Unified Prompt & Generation Card */}
@@ -612,7 +421,6 @@ export default function DemoTTIPage() {
               key={result.id}
               result={result}
               apiKey={apiKey}
-              onZoom={setZoomedImage}
               onCopy={copyToClipboard}
               onDownload={downloadImage}
               onReusePrompt={reusePrompt}
@@ -620,9 +428,6 @@ export default function DemoTTIPage() {
           ))}
         </section>
       )}
-
-      {/* Zoom Modal */}
-      <ImageZoomModal imageUrl={zoomedImage} onClose={() => setZoomedImage(null)} />
-    </div>
+    </Section>
   );
 }

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

@@ -1,16 +1,15 @@
 'use client';
 
-import { useState, useEffect, useRef, DragEvent, ChangeEvent } from 'react';
-import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
+import { useState, useEffect, useRef, useCallback, DragEvent, ChangeEvent } from 'react';
+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';
 import { ImageMetadataBar } from '@/components/shared/ImageMetadataBar';
 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 +45,9 @@ interface UploadHistoryItem {
   downloadMs?: number;
 }
 
-interface ApiKeyInfo {
-  organizationSlug?: string;
-  projectSlug?: string;
-}
-
 export default function DemoUploadPage() {
-  // API Key State
-  const [apiKey, setApiKey] = useState('');
-  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);
+  // API Key from context
+  const { apiKey, apiKeyValidated, focus } = useApiKey();
 
   // Upload State
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -76,24 +65,12 @@ export default function DemoUploadPage() {
   // History State
   const [uploadHistory, setUploadHistory] = useState<UploadHistoryItem[]>([]);
 
-  // Zoom Modal State
-  const [zoomedImageUrl, setZoomedImageUrl] = useState<string | null>(null);
-
   // Copy Feedback State
   const [codeCopied, setCodeCopied] = useState(false);
 
   // 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 +96,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`;
@@ -349,13 +235,17 @@ export default function DemoUploadPage() {
     }
   };
 
-  const handleDownloadMeasured = (itemId: string, downloadMs: number) => {
+  const handleDownloadMeasured = useCallback((itemId: string, downloadMs: number) => {
     setUploadHistory((prev) =>
-      prev.map((item) =>
-        item.id === itemId ? { ...item, downloadMs } : item
-      )
+      prev.map((item) => {
+        // Only update if this item doesn't have downloadMs yet (prevent re-measuring)
+        if (item.id === itemId && item.downloadMs === undefined) {
+          return { ...item, downloadMs };
+        }
+        return item;
+      })
     );
-  };
+  }, []);
 
   const generateUploadCodeExamples = (item: UploadHistoryItem, key: string, baseUrl: string) => {
     const fileName = item.originalName;
@@ -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">
-      {apiKeyValidated && apiKeyInfo && (
-        <MinimizedApiKey
-          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
-          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
-          apiKey={apiKey}
-          onRevoke={revokeApiKey}
-        />
-      )}
-
+    <Section className="py-12 md:py-16 min-h-screen">
       <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
-          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
-          aria-label="API Key Validation"
-        >
-          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
-          <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 className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
+          <div className="flex items-center justify-between flex-wrap gap-4">
+            <div>
+              <h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
+              <p className="text-sm text-gray-400">Enter your API key to use this workbench</p>
             </div>
             <button
-              onClick={validateApiKey}
-              disabled={validatingKey}
-              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"
+              onClick={focus}
+              className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
             >
-              {validatingKey ? 'Validating...' : 'Validate'}
+              Enter API Key
             </button>
           </div>
-
-          {apiKeyError && (
-            <p className="mt-3 text-sm text-red-400" role="alert">
-              {apiKeyError}
-            </p>
-          )}
-        </section>
+        </div>
       )}
 
       <section
@@ -643,7 +470,6 @@ Body (form-data):
                     fileSize={item.size}
                     fileType={item.contentType}
                     timestamp={item.timestamp}
-                    onZoom={setZoomedImageUrl}
                     measureDownloadTime={true}
                     onDownloadMeasured={(downloadMs) => handleDownloadMeasured(item.id, downloadMs)}
                   />
@@ -661,9 +487,6 @@ Body (form-data):
           </div>
         </section>
       )}
-
-      {/* Image Zoom Modal */}
-      <ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
-    </div>
+    </Section>
   );
 }

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

@@ -2,11 +2,11 @@
 
 import { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
-import { SubsectionNav } from '@/components/shared/SubsectionNav';
 import { DocsSidebar } from '@/components/docs/layout/DocsSidebar';
 import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
 import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
 import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { PageProvider } from '@/contexts/page-context';
 
 /**
  * Root Documentation Layout
@@ -47,24 +47,11 @@ export default function DocsRootLayout({ children }: DocsRootLayoutProps) {
 
   return (
     <ApiKeyProvider>
-      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
-        {/* Animated gradient background (matching landing page) */}
-        <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}
+      <PageProvider
+        navItems={navItems}
         currentPath={pathname}
-          ctaText="Join Beta"
-          ctaHref="/signup"
         rightSlot={<ApiKeyWidget />}
-        />
-
-        {/* Three-column Documentation Layout */}
-        <div className="relative z-10">
+      >
         <ThreeColumnLayout
           left={
             <div className="border-r border-white/10 bg-slate-950/50 backdrop-blur-sm sticky top-12 h-[calc(100vh-3rem)] overflow-y-auto">
@@ -73,8 +60,7 @@ export default function DocsRootLayout({ children }: DocsRootLayoutProps) {
           }
           center={children}
         />
-        </div>
-      </div>
+      </PageProvider>
     </ApiKeyProvider>
   );
 }

apps/landing/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import Image from 'next/image';
+import { Footer } from '@/components/shared/Footer';
 import './globals.css';
 
 const inter = Inter({
@@ -101,39 +102,7 @@ export default function RootLayout({
           {/* Page content */}
           {children}
 
-          {/* Footer */}
-          <footer className="relative z-10 border-t border-white/10 backdrop-blur-sm">
-            <div className="max-w-7xl mx-auto px-6 pt-12 pb-4">
-              <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-                <div className="h-16 flex items-center">
-                  <Image
-                    src="/banatie-logo-horisontal.png"
-                    alt="Banatie Logo"
-                    width={200}
-                    height={60}
-                    className="h-full w-auto object-contain"
-                  />
-                </div>
-                <div className="flex gap-8 text-sm text-gray-400">
-                  <a href="#" className="hover:text-white transition-colors">
-                    Documentation
-                  </a>
-                  <a href="#" className="hover:text-white transition-colors">
-                    API Reference
-                  </a>
-                  <a href="#" className="hover:text-white transition-colors">
-                    Pricing
-                  </a>
-                  <a href="#" className="hover:text-white transition-colors">
-                    Contact
-                  </a>
-                </div>
-              </div>
-              <div className="mt-8 text-center text-sm text-gray-500">
-                &copy; 2025 Banatie. Built for builders who create.
-              </div>
-            </div>
-          </footer>
+          <Footer />
         </div>
       </body>
     </html>

apps/landing/src/components/demo/ImageZoomModal.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-
-interface ImageZoomModalProps {
-  imageUrl: string | null;
-  onClose: () => void;
-}
-
-export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    if (imageUrl) {
-      document.addEventListener('keydown', handleEscape);
-
-      // Focus trap
-      const previousActiveElement = document.activeElement as HTMLElement;
-      closeButtonRef.current?.focus();
-
-      // Disable body scroll
-      document.body.style.overflow = 'hidden';
-
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-        document.body.style.overflow = '';
-        previousActiveElement?.focus();
-      };
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [imageUrl, onClose]);
-
-  if (!imageUrl) return null;
-
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === modalRef.current) {
-      onClose();
-    }
-  };
-
-  return (
-    <div
-      ref={modalRef}
-      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4 sm:p-6 md:p-8"
-      onClick={handleBackdropClick}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="modal-title"
-    >
-      <div className="absolute top-4 right-4 sm:top-6 sm:right-6 flex items-center gap-3">
-        <span id="modal-title" className="sr-only">Full size image viewer</span>
-        <span className="hidden sm:block text-white/70 text-sm font-medium">Press ESC to close</span>
-        <button
-          ref={closeButtonRef}
-          onClick={onClose}
-          className="w-11 h-11 sm:w-12 sm:h-12 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black/90"
-          aria-label="Close zoomed image"
-        >
-          <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <img
-        src={imageUrl}
-        alt="Full size view"
-        className="max-w-full max-h-full object-contain rounded-lg"
-        onClick={(e) => e.stopPropagation()}
-      />
-    </div>
-  );
-};

apps/landing/src/components/demo/ResultCard.tsx

@@ -5,6 +5,8 @@ import { InspectMode } from './InspectMode';
 import { PromptReuseButton } from './PromptReuseButton';
 import { CompletedTimerBadge } from './GenerationTimer';
 import { CodeExamplesWidget } from './CodeExamplesWidget';
+import { usePageContext } from '@/contexts/page-context';
+import { ExpandedImageView } from '@/components/shared/ExpandedImageView';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
 
@@ -51,7 +53,6 @@ interface GenerationResult {
 interface ResultCardProps {
   result: GenerationResult;
   apiKey: string;
-  onZoom: (url: string) => void;
   onCopy: (text: string) => void;
   onDownload: (url: string, filename: string) => void;
   onReusePrompt: (prompt: string) => void;
@@ -62,11 +63,11 @@ type ViewMode = 'preview' | 'inspect';
 export function ResultCard({
   result,
   apiKey,
-  onZoom,
   onCopy,
   onDownload,
   onReusePrompt,
 }: ResultCardProps) {
+  const { openModal } = usePageContext();
   const [viewMode, setViewMode] = useState<ViewMode>('preview');
 
   // Build enhancement options JSON for code examples
@@ -213,7 +214,7 @@ X-API-Key: ${apiKey}
                 image={result.leftImage}
                 label="Original Prompt"
                 prompt={result.originalPrompt}
-                onZoom={onZoom}
+                openModal={openModal}
                 onDownload={onDownload}
                 onReusePrompt={onReusePrompt}
                 filename="original.png"
@@ -224,7 +225,7 @@ X-API-Key: ${apiKey}
                 image={result.rightImage}
                 label="Enhanced Prompt"
                 prompt={result.enhancedPrompt || result.originalPrompt}
-                onZoom={onZoom}
+                openModal={openModal}
                 onDownload={onDownload}
                 onReusePrompt={onReusePrompt}
                 filename="enhanced.png"
@@ -264,7 +265,7 @@ function ImagePreview({
   image,
   label,
   prompt,
-  onZoom,
+  openModal,
   onDownload,
   onReusePrompt,
   filename,
@@ -273,7 +274,7 @@ function ImagePreview({
   image: GenerationResult['leftImage'];
   label: string;
   prompt: string;
-  onZoom: (url: string) => void;
+  openModal: (content: React.ReactNode) => void;
   onDownload: (url: string, filename: string) => void;
   onReusePrompt: (prompt: string) => void;
   filename: string;
@@ -282,6 +283,12 @@ function ImagePreview({
   const [promptExpanded, setPromptExpanded] = useState(false);
   const [urlCopied, setUrlCopied] = useState(false);
 
+  const handleImageClick = () => {
+    if (image?.url) {
+      openModal(<ExpandedImageView imageUrl={image.url} alt={label} />);
+    }
+  };
+
   const copyImageUrl = () => {
     if (image?.url) {
       navigator.clipboard.writeText(image.url);
@@ -318,7 +325,7 @@ function ImagePreview({
                 src={image.url}
                 alt={label}
                 className="h-96 w-auto object-contain rounded-lg border border-slate-700"
-                onClick={() => onZoom(image.url)}
+                onClick={handleImageClick}
               />
               <button
                 onClick={(e) => {

apps/landing/src/components/demo/gallery/GalleryImageCard.tsx

@@ -5,6 +5,8 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
 import { useImageDownloadTime } from '@/components/shared/ImageCard/useImageDownloadTime';
 import { ImageMetadataBar } from '@/components/shared/ImageMetadataBar';
 import { calculateAspectRatio } from '@/utils/imageUtils';
+import { usePageContext } from '@/contexts/page-context';
+import { ExpandedImageView } from '@/components/shared/ExpandedImageView';
 
 type GalleryImageCardProps = {
   imageUrl: string;
@@ -12,7 +14,6 @@ type GalleryImageCardProps = {
   size: number;
   contentType: string;
   lastModified: string;
-  onZoom: (url: string) => void;
   onDownloadMeasured: (imageId: string, downloadMs: number) => void;
 };
 
@@ -22,9 +23,9 @@ export const GalleryImageCard = ({
   size,
   contentType,
   lastModified,
-  onZoom,
   onDownloadMeasured,
 }: GalleryImageCardProps) => {
+  const { openModal } = usePageContext();
   const [isVisible, setIsVisible] = useState(false);
   const [imageDimensions, setImageDimensions] = useState<{
     width: number;
@@ -57,10 +58,14 @@ export const GalleryImageCard = ({
     img.src = imageUrl;
   }, [isVisible, imageUrl]);
 
+  const handleImageClick = () => {
+    openModal(<ExpandedImageView imageUrl={imageUrl} alt={filename} />);
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      onZoom(imageUrl);
+      handleImageClick();
     }
   };
 
@@ -81,7 +86,7 @@ export const GalleryImageCard = ({
     >
       <div
         className="aspect-video bg-slate-800 rounded-lg mb-3 overflow-hidden cursor-pointer group relative focus:outline-none focus:ring-2 focus:ring-amber-500"
-        onClick={() => onZoom(imageUrl)}
+        onClick={handleImageClick}
         role="button"
         tabIndex={0}
         aria-label={`View full size image: ${filename}`}

apps/landing/src/components/demo/gallery/ImageGrid.tsx

@@ -12,11 +12,10 @@ type ImageItem = {
 
 type ImageGridProps = {
   images: ImageItem[];
-  onImageZoom: (url: string) => void;
   onDownloadMeasured: (imageId: string, downloadMs: number) => void;
 };
 
-export const ImageGrid = ({ images, onImageZoom, onDownloadMeasured }: ImageGridProps) => {
+export const ImageGrid = ({ images, onDownloadMeasured }: ImageGridProps) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
       {images.map((image) => (
@@ -27,7 +26,6 @@ export const ImageGrid = ({ images, onImageZoom, onDownloadMeasured }: ImageGrid
           size={image.size}
           contentType={image.contentType}
           lastModified={image.lastModified}
-          onZoom={onImageZoom}
           onDownloadMeasured={onDownloadMeasured}
         />
       ))}

apps/landing/src/components/shared/AnimatedBackground.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export const AnimatedBackground = () => {
+  return (
+    <div className="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+      <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse" />
+      <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>
+  );
+};

apps/landing/src/components/shared/CompactFooter.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import Image from 'next/image';
+import { footerLinks, footerCopyright } from '@/config/footer';
+
+export const CompactFooter = () => {
+  return (
+    <footer
+      className="border-t border-white/10 bg-slate-950/80 backdrop-blur-sm"
+      role="contentinfo"
+    >
+      <div className="hidden md:flex items-center justify-between h-16 px-6 max-w-7xl mx-auto">
+        <div className="flex-shrink-0">
+          <Image
+            src="/logo-square.png"
+            alt="Banatie"
+            width={32}
+            height={32}
+            className="opacity-80"
+          />
+        </div>
+
+        <nav aria-label="Footer navigation" className="flex items-center gap-6">
+          {footerLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="text-sm text-gray-400 hover:text-white transition-colors min-h-[44px] flex items-center"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        <p className="text-xs text-gray-500 flex-shrink-0">
+          {footerCopyright}
+        </p>
+      </div>
+
+      <div className="md:hidden px-6 py-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <Image
+            src="/logo-square.png"
+            alt="Banatie"
+            width={28}
+            height={28}
+            className="opacity-80"
+          />
+          <p className="text-xs text-gray-500">
+            © 2025 Banatie
+          </p>
+        </div>
+
+        <nav
+          aria-label="Footer navigation"
+          className="grid grid-cols-2 gap-x-4 gap-y-3"
+        >
+          {footerLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="text-sm text-gray-400 hover:text-white transition-colors min-h-[44px] flex items-center"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      </div>
+    </footer>
+  );
+};

apps/landing/src/components/shared/EXPANDED_IMAGE_VIEW.md

@@ -0,0 +1,157 @@
+# ExpandedImageView Component
+
+Displays full-size images in modal overlays with loading, error, and success states.
+
+## Features
+
+- **Loading State:** Purple spinner with descriptive text
+- **Error State:** Clear error message with retry button
+- **Success State:** Smooth fade-in transition
+- **Optional Metadata:** Display filename, dimensions, and file size
+- **Responsive Padding:** Adapts to mobile, tablet, and desktop
+- **Accessibility:** ARIA live regions, semantic roles, keyboard support
+
+## Props
+
+```typescript
+interface ExpandedImageViewProps {
+  imageUrl: string;           // Required: Image URL to display
+  alt?: string;               // Optional: Alt text (default: 'Full size view')
+  metadata?: {                // Optional: Image metadata
+    filename?: string;        // e.g., 'sunset_1024x768.png'
+    size?: string;            // e.g., '2.4 MB'
+    dimensions?: string;      // e.g., '1024 × 768'
+  };
+  showMetadata?: boolean;     // Optional: Show metadata bar (default: false)
+}
+```
+
+## Usage Examples
+
+### Basic Usage
+```tsx
+import { ExpandedImageView } from '@/components/shared/ExpandedImageView';
+
+export default function ImageModal({ imageUrl }: { imageUrl: string }) {
+  return (
+    <div className="fixed inset-0 bg-black/90 z-50">
+      <ExpandedImageView
+        imageUrl={imageUrl}
+        alt="Generated landscape image"
+      />
+    </div>
+  );
+}
+```
+
+### With Metadata
+```tsx
+import { ExpandedImageView } from '@/components/shared/ExpandedImageView';
+
+export default function ImageGalleryModal({ image }: { image: Image }) {
+  return (
+    <div className="fixed inset-0 bg-black/90 z-50">
+      <ExpandedImageView
+        imageUrl={image.url}
+        alt={image.prompt}
+        showMetadata
+        metadata={{
+          filename: image.filename,
+          dimensions: `${image.width} × ${image.height}`,
+          size: formatFileSize(image.sizeBytes)
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### In Page Provider System
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { ExpandedImageView } from '@/components/shared/ExpandedImageView';
+import { CompactFooter } from '@/components/shared/CompactFooter';
+
+export default function ImageViewerPage() {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  return (
+    <>
+      {/* Gallery */}
+      <div className="grid grid-cols-3 gap-4 p-6">
+        {images.map((img) => (
+          <img
+            key={img.id}
+            src={img.thumbnail}
+            onClick={() => setSelectedImage(img.fullUrl)}
+            className="cursor-pointer hover:opacity-80"
+          />
+        ))}
+      </div>
+
+      {/* Overlay */}
+      {selectedImage && (
+        <div
+          className="fixed inset-0 bg-black/90 z-50 flex flex-col"
+          onClick={() => setSelectedImage(null)}
+        >
+          <nav className="h-16 border-b border-white/10">
+            <button onClick={() => setSelectedImage(null)}>Close</button>
+          </nav>
+
+          <main className="flex-1 overflow-auto">
+            <ExpandedImageView
+              imageUrl={selectedImage}
+              alt="Expanded gallery image"
+              showMetadata
+            />
+          </main>
+
+          <CompactFooter />
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+## Accessibility Features
+
+### ARIA Roles
+- **Loading State:** `role="status"` with `aria-live="polite"`
+- **Error State:** `role="alert"` with `aria-live="assertive"`
+- **Icon Elements:** `aria-hidden="true"` (decorative only)
+
+### Keyboard Support
+- Retry button is keyboard accessible (Enter/Space)
+- Image click event stops propagation (prevents modal close)
+- Integrates with modal close handlers (Escape key)
+
+### Visual Design
+- **Loading:** Purple spinner (`border-purple-600`) matches Banatie design
+- **Error:** Red color scheme (`red-900/20`, `red-700/50`, `red-400`)
+- **Image:** Shadow (`shadow-2xl`) and rounded corners (`rounded-lg`)
+- **Metadata:** Subtle bar with Banatie card styling
+
+## Layout Constraints
+
+- **Max Image Height:** `calc(100vh - 12rem)` reserves space for nav/footer
+- **Object Fit:** `object-contain` maintains aspect ratio
+- **Responsive Padding:** `p-4 sm:p-6 md:p-8`
+- **Metadata Wrapping:** Flexbox with `flex-wrap` for mobile
+
+## Performance
+
+- **Lazy State Management:** Only renders visible state (loading/error/success)
+- **Event Handlers:** Optimized with direct callbacks
+- **Image Loading:** Native browser lazy loading via `onLoad`/`onError`
+- **Transition:** CSS-only fade animation (no JavaScript)
+
+## Error Handling
+
+- **Network Failures:** Catches `onerror` events
+- **User Retry:** Resets state and triggers re-render
+- **Clear Messaging:** Friendly error text with actionable button
+- **Visual Feedback:** Icon and color coding for quick recognition

apps/landing/src/components/shared/ExpandedImageView.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState } from 'react';
+
+interface ExpandedImageViewProps {
+  imageUrl: string;
+  alt?: string;
+  metadata?: {
+    filename?: string;
+    size?: string;
+    dimensions?: string;
+  };
+  showMetadata?: boolean;
+}
+
+export const ExpandedImageView = ({
+  imageUrl,
+  alt = 'Full size view',
+  metadata,
+  showMetadata = false
+}: ExpandedImageViewProps) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const handleLoad = () => setLoading(false);
+  const handleError = () => {
+    setLoading(false);
+    setError(true);
+  };
+
+  const handleRetry = () => {
+    setError(false);
+    setLoading(true);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-4 sm:p-6 md:p-8">
+      {loading && !error && (
+        <div
+          className="absolute inset-0 flex items-center justify-center"
+          role="status"
+          aria-live="polite"
+        >
+          <div className="flex flex-col items-center gap-4">
+            <div
+              className="w-16 h-16 border-4 border-purple-600 border-t-transparent rounded-full animate-spin"
+              aria-hidden="true"
+            ></div>
+            <p className="text-gray-400 text-sm">Loading image...</p>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div
+          className="flex flex-col items-center gap-4 max-w-md text-center"
+          role="alert"
+          aria-live="assertive"
+        >
+          <div className="w-16 h-16 rounded-full bg-red-900/20 border border-red-700/50 flex items-center justify-center">
+            <svg
+              className="w-8 h-8 text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
+            </svg>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-2">Failed to Load Image</h3>
+            <p className="text-gray-400 text-sm mb-4">
+              The image could not be loaded. Please check your connection and try again.
+            </p>
+            <button
+              onClick={handleRetry}
+              className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!error && (
+        <div className="relative max-w-full max-h-full flex items-center justify-center">
+          <img
+            src={imageUrl}
+            alt={alt}
+            onLoad={handleLoad}
+            onError={handleError}
+            className={`max-w-full max-h-[calc(100vh-12rem)] object-contain rounded-lg shadow-2xl transition-opacity duration-300 ${
+              loading ? 'opacity-0' : 'opacity-100'
+            }`}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
+
+      {showMetadata && metadata && !loading && !error && (
+        <div className="mt-4 px-4 py-3 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg">
+          <div className="flex flex-wrap items-center gap-4 text-xs text-gray-400">
+            {metadata.filename && (
+              <span className="font-medium text-gray-300">{metadata.filename}</span>
+            )}
+            {metadata.dimensions && (
+              <span>{metadata.dimensions}</span>
+            )}
+            {metadata.size && (
+              <span>{metadata.size}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

apps/landing/src/components/shared/FOOTER_COMPONENTS.md

@@ -0,0 +1,68 @@
+# Footer Components
+
+This directory contains two footer implementations for different contexts:
+
+## Footer.tsx (Standard)
+**Use Case:** Full page layouts (homepage, documentation, etc.)
+- Larger horizontal logo (200px)
+- Expanded vertical spacing (pt-12 pb-4)
+- Center-aligned copyright at bottom
+- Full visual prominence
+
+## CompactFooter.tsx (Compact)
+**Use Case:** Modal overlays, page provider system
+- Small square logo (32px desktop, 28px mobile)
+- Minimal height (h-16 on desktop)
+- Single-row horizontal layout (desktop)
+- 2-column grid layout (mobile)
+- Touch-optimized (min-h-[44px] on all links)
+
+## Usage Examples
+
+### Standard Footer
+```tsx
+import { Footer } from '@/components/shared/Footer';
+
+export default function HomePage() {
+  return (
+    <div>
+      <main>{/* Page content */}</main>
+      <Footer />
+    </div>
+  );
+}
+```
+
+### Compact Footer
+```tsx
+import { CompactFooter } from '@/components/shared/CompactFooter';
+
+export default function ModalLayout() {
+  return (
+    <div className="fixed inset-0 bg-black/90">
+      <main className="h-[calc(100vh-4rem)]">{/* Modal content */}</main>
+      <CompactFooter />
+    </div>
+  );
+}
+```
+
+## Accessibility Features
+
+Both components include:
+- Semantic `<footer>` with `role="contentinfo"`
+- `<nav>` with `aria-label="Footer navigation"`
+- WCAG 2.1 AA compliant touch targets (44px minimum)
+- Proper color contrast ratios (4.5:1+)
+- Keyboard navigation support
+- Descriptive alt text on logos
+
+## Responsive Breakpoints
+
+### CompactFooter
+- **Base (< 768px):** Vertical stack with 2-column link grid
+- **md (>= 768px):** Horizontal single-row layout
+
+### Footer
+- **Base (< 768px):** Vertical stack with centered copyright
+- **md (>= 768px):** Horizontal layout with spaced sections

apps/landing/src/components/shared/Footer.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import Image from 'next/image';
+import { footerLinks, footerCopyright } from '@/config/footer';
+
+export const Footer = () => {
+  return (
+    <footer className="relative z-10 border-t border-white/10 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-6 pt-12 pb-4">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-6">
+          <div className="h-16 flex items-center">
+            <Image
+              src="/banatie-logo-horisontal.png"
+              alt="Banatie Logo"
+              width={200}
+              height={60}
+              className="h-full w-auto object-contain"
+            />
+          </div>
+          <div className="flex gap-8 text-sm text-gray-400">
+            {footerLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className="hover:text-white transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
+        <div className="mt-8 text-center text-sm text-gray-500">{footerCopyright}</div>
+      </div>
+    </footer>
+  );
+};

apps/landing/src/components/shared/ImageCard/index.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { ImageMetadataBar } from '../ImageMetadataBar';
 import { useImageDownloadTime } from './useImageDownloadTime';
+import { usePageContext } from '@/contexts/page-context';
+import { ExpandedImageView } from '../ExpandedImageView';
 
 export interface ImageCardProps {
   imageUrl: string;
@@ -11,7 +13,6 @@ export interface ImageCardProps {
   height?: number;
   fileSize: number;
   fileType: string;
-  onZoom: (url: string) => void;
   timestamp?: Date;
   className?: string;
   measureDownloadTime?: boolean;
@@ -25,26 +26,34 @@ export const ImageCard = ({
   height,
   fileSize,
   fileType,
-  onZoom,
   timestamp,
   className = '',
   measureDownloadTime = false,
   onDownloadMeasured,
 }: ImageCardProps) => {
+  const { openModal } = usePageContext();
   const { downloadTime, isLoading } = useImageDownloadTime(
     measureDownloadTime ? imageUrl : null
   );
 
+  // Track if we've already called onDownloadMeasured to prevent duplicate calls
+  const hasCalledCallback = useRef(false);
+
   useEffect(() => {
-    if (downloadTime !== null && onDownloadMeasured) {
+    if (downloadTime !== null && onDownloadMeasured && !hasCalledCallback.current) {
       onDownloadMeasured(downloadTime);
+      hasCalledCallback.current = true;
     }
   }, [downloadTime, onDownloadMeasured]);
 
+  const handleImageClick = () => {
+    openModal(<ExpandedImageView imageUrl={imageUrl} alt={filename} />);
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      onZoom(imageUrl);
+      handleImageClick();
     }
   };
 
@@ -63,7 +72,7 @@ export const ImageCard = ({
     >
       <div
         className="aspect-video bg-slate-800 rounded-lg mb-3 overflow-hidden cursor-pointer group relative"
-        onClick={() => onZoom(imageUrl)}
+        onClick={handleImageClick}
         role="button"
         tabIndex={0}
         aria-label="View full size image"

apps/landing/src/components/shared/NarrowSection.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface NarrowSectionProps {
+  children: ReactNode;
+  className?: string;
+  bgClassName?: string;
+}
+
+export const NarrowSection = ({ children, className = '', bgClassName = '' }: NarrowSectionProps) => {
+  return (
+    <div className={bgClassName}>
+      <div className={`max-w-4xl mx-auto px-6 py-8 ${className}`}>
+        {children}
+      </div>
+    </div>
+  );
+};

apps/landing/src/components/shared/Section.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface SectionProps {
+  children: ReactNode;
+  className?: string;
+  bgClassName?: string;
+}
+
+export const Section = ({ children, className = '', bgClassName = '' }: SectionProps) => {
+  return (
+    <div className={bgClassName}>
+      <div className={`max-w-7xl mx-auto px-6 py-8 ${className}`}>
+        {children}
+      </div>
+    </div>
+  );
+};

apps/landing/src/components/shared/SubsectionNav.tsx

@@ -108,7 +108,7 @@ export const SubsectionNav = ({ items, currentPath, leftSlot, rightSlot }: Subse
 
       {/* Right Slot - Absolutely Positioned */}
       {rightSlot && (
-        <div className="absolute top-0 right-0 h-12 flex items-center pr-0 hidden xl:flex">
+        <div className="absolute top-0 right-0 h-12 flex items-center pr-0 hidden xl:flex overflow-visible">
           {rightSlot}
         </div>
       )}

apps/landing/src/config/footer.ts

@@ -0,0 +1,8 @@
+export const footerLinks = [
+  { label: 'Documentation', href: '#' },
+  { label: 'API Reference', href: '#' },
+  { label: 'Pricing', href: '#' },
+  { label: 'Contact', href: '#' },
+];
+
+export const footerCopyright = '© 2025 Banatie. Built for builders who create.';

apps/landing/src/contexts/page-context.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { SubsectionNav } from '@/components/shared/SubsectionNav';
+import { CompactFooter } from '@/components/shared/CompactFooter';
+import { AnimatedBackground } from '@/components/shared/AnimatedBackground';
+
+type NavItem = {
+  label: string;
+  href: string;
+};
+
+type PageContextValue = {
+  isOpen: boolean;
+  openModal: (content: ReactNode) => void;
+  closeModal: () => void;
+};
+
+type PageProviderProps = {
+  navItems: NavItem[];
+  currentPath: string;
+  rightSlot?: ReactNode;
+  children: ReactNode;
+};
+
+const PageContext = createContext<PageContextValue | null>(null);
+
+export const usePageContext = () => {
+  const context = useContext(PageContext);
+  if (!context) {
+    throw new Error('usePageContext must be used within PageProvider');
+  }
+  return context;
+};
+
+export const PageProvider = ({ navItems, currentPath, rightSlot, children }: PageProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [modalContent, setModalContent] = useState<ReactNode | null>(null);
+  const pathname = usePathname();
+
+  const openModal = (content: ReactNode) => {
+    setIsOpen(true);
+    setModalContent(content);
+  };
+
+  const closeModal = () => {
+    setIsOpen(false);
+    setModalContent(null);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = '';
+      };
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      closeModal();
+    }
+  }, [pathname]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        closeModal();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      const modalElement = document.querySelector('[data-modal-overlay]');
+      if (!modalElement) return;
+
+      const focusableElements = modalElement.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0] as HTMLElement;
+      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleTab);
+    return () => document.removeEventListener('keydown', handleTab);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      const closeButton = document.querySelector(
+        '[data-modal-overlay] button[aria-label="Close fullscreen view"]',
+      ) as HTMLElement;
+      if (closeButton) {
+        closeButton.focus();
+      }
+    }
+  }, [isOpen]);
+
+  const contextValue = { isOpen, openModal, closeModal };
+
+  return (
+    <PageContext.Provider value={contextValue}>
+      <div aria-hidden={isOpen}>
+        <AnimatedBackground />
+        <SubsectionNav items={navItems} currentPath={currentPath} rightSlot={rightSlot} />
+        <div className="relative z-10">{children}</div>
+      </div>
+
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-50 flex flex-col bg-black/90 backdrop-blur-sm transition-opacity duration-300"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+          data-modal-overlay
+        >
+          <h2 id="modal-title" className="sr-only">
+            Fullscreen Viewer
+          </h2>
+
+          <div className="relative overflow-hidden">
+            <SubsectionNav
+              items={navItems}
+              currentPath={currentPath}
+              rightSlot={
+                <div className="flex items-center gap-3 pr-6">
+                  <span className="hidden sm:block text-white/70 text-sm font-medium">
+                    Press ESC to close
+                  </span>
+                  <button
+                    onClick={closeModal}
+                    className="w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black/90"
+                    aria-label="Close fullscreen view"
+                  >
+                    <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              }
+            />
+          </div>
+
+          <main className="flex-1 min-h-0 overflow-auto" role="main" aria-label="Modal content">
+            {modalContent}
+          </main>
+
+          <CompactFooter />
+        </div>
+      )}
+    </PageContext.Provider>
+  );
+};