Multicorn-AI · rachellerathbone · Mar 17, 2026 · Mar 17, 2026
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { Inter } from 'next/font/google'
 import { LaunchGate } from '@/components/LaunchGate'
 import { ServiceWorkerRegistrar } from '@/components/ServiceWorkerRegistrar'
 import { PwaMetaTags } from '@/components/PwaMetaTags'
+import { InstallBanner } from '@/components/InstallBanner'
 import './globals.css'
 
 const inter = Inter({
@@ -58,6 +59,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
       <body className="min-h-screen font-sans">
         <PwaMetaTags />
         <ServiceWorkerRegistrar />
+        <InstallBanner />
         <LaunchGate>{children}</LaunchGate>
         {/* Domain is encoded in the proxy script URL - no data-domain attribute needed */}
         {process.env.NODE_ENV === 'production' && (

diff --git a/components/InstallBanner.tsx b/components/InstallBanner.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+export function InstallBanner() {
+  const [canInstall, setCanInstall] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+  const installEventRef = useRef<BeforeInstallPromptEvent | null>(null)
+
+  useEffect(() => {
+    const handleBeforeInstall = (e: Event) => {
+      e.preventDefault()
+      installEventRef.current = e as BeforeInstallPromptEvent
+      setCanInstall(true)
+    }
+    const handleInstalled = () => {
+      setCanInstall(false)
+    }
+    window.addEventListener('beforeinstallprompt', handleBeforeInstall)
+    window.addEventListener('appinstalled', handleInstalled)
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstall)
+      window.removeEventListener('appinstalled', handleInstalled)
+      installEventRef.current = null
+      setCanInstall(false)
+    }
+  }, [])
+
+  const handleInstall = async () => {
+    const e = installEventRef.current
+    if (!e) return
+    await e.prompt()
+    const { outcome } = await e.userChoice
+    if (outcome === 'accepted') setCanInstall(false)
+  }
+
+  if (!canInstall || dismissed) return null
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 flex items-center justify-between bg-violet-600 px-4 py-3 text-white">
+      <span>Install Multicorn Learn</span>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={handleInstall}
+          className="rounded bg-white px-3 py-1.5 text-sm font-medium text-violet-600 hover:bg-violet-50"
+        >
+          Install
+        </button>
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          className="rounded p-1 text-white/80 hover:bg-white/20 hover:text-white"
+          aria-label="Dismiss"
+        >
+          X
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/PwaMetaTags.tsx b/components/PwaMetaTags.tsx
@@ -4,13 +4,13 @@ import { useEffect } from 'react'
 
 /**
  * Injects iOS PWA meta tags. Next.js Metadata API does not output
- * apple-mobile-web-app-capable in a way that enables Safari splash screens,
+ * mobile-web-app-capable in a way that enables Safari splash screens,
  * so we inject these on the client.
  */
 export function PwaMetaTags() {
   useEffect(() => {
     const tags: [string, Record<string, string>][] = [
-      ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+      ['meta', { name: 'mobile-web-app-capable', content: 'yes' }],
       ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }],
       ['meta', { name: 'apple-mobile-web-app-title', content: 'Learn' }],
     ]

diff --git a/public/learn/apple-touch-icon.png b/public/learn/apple-touch-icon.png
diff --git a/public/learn/favicon-192x192.png b/public/learn/favicon-192x192.png
diff --git a/public/learn/favicon-512x512.png b/public/learn/favicon-512x512.png