feat: PWA support + mobile-responsive layout + QR code to open Atlas on phone

Made-with: Cursor
2026-03-02 20:56:20 -08:00
parent 585343968e
commit 3896eb671c
6 changed files with 181 additions and 9 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -24,8 +24,18 @@ const ibmPlexMono = IBM_Plex_Mono({
 });

 export const metadata: Metadata = {
-  title: "VIBN - AI-Powered Development Platform",
-  description: "Track, manage, and deploy your AI-coded projects with ease",
+  title: "VIBN — Build with Atlas",
+  description: "Chat with Atlas to define your product, then let AI build it.",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "VIBN",
+  },
+  other: {
+    "mobile-web-app-capable": "yes",
+    "msapplication-TileColor": "#1a1a1a",
+  },
 };

 export default function RootLayout({
@@ -35,6 +45,12 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        <meta name="theme-color" content="#1a1a1a" />
+        <link rel="apple-touch-icon" href="/vibn-logo-circle.png" />
+        <link rel="manifest" href="/manifest.json" />
+      </head>
      <body
        className={`${outfit.variable} ${newsreader.variable} ${ibmPlexMono.variable} antialiased`}
      >
@@ -42,6 +58,13 @@ export default function RootLayout({
          {children}
          <Toaster />
        </Providers>
+        <script dangerouslySetInnerHTML={{ __html: `
+          if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+              navigator.serviceWorker.register('/sw.js').catch(() => {});
+            });
+          }
+        `}} />
      </body>
    </html>
  );