feat(app): PWA + opengraph

public/manifest.json

@@ -0,0 +1,32 @@
+{
+  "theme_color": "#F5F5F5",
+  "background_color": "#111",
+  "display": "fullscreen",
+  "scope": "/",
+  "start_url": "https://fast-flicks.com",
+  "name": "Fast⎵Flicks",
+  "short_name": "FastFlicks",
+  "description": "Enhance your 10-finger typing speed across multiple languages with our minimalistic typing test app. Compete on the leaderboard and boost your typing skills.",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/app/layout.tsx

@@ -29,6 +29,17 @@ const comfortaa = Comfortaa({ subsets: ['latin'], weight: '400', preload: true }
 
 export const metadata: Metadata = {
   title: 'Fast⎵Flicks',
+  openGraph: {
+    type: 'website',
+    title: 'Fast⎵Flicks',
+    description: 'Practice and improve your 10 fingers typing speed!',
+    url: 'https://fast-flicks.com',
+  },
+  manifest: '/manifest.json',
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#111' },
+    { media: '(prefers-color-scheme: light)', color: '#F5F5F5' },
+  ],
   description:
     'Enhance your 10-finger typing speed across multiple languages with our minimalistic typing test app. Compete on the leaderboard and boost your typing skills.',
   icons: {