valeboth · valeboth · Aug 28, 2026 · Aug 28, 2026
diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
diff --git a/public/icons/favicon-16.png b/public/icons/favicon-16.png
diff --git a/public/icons/favicon-32.png b/public/icons/favicon-32.png
diff --git a/public/icons/icon-192.png b/public/icons/icon-192.png
diff --git a/public/icons/icon-256.png b/public/icons/icon-256.png
diff --git a/public/icons/icon-48.png b/public/icons/icon-48.png
diff --git a/public/icons/icon-512.png b/public/icons/icon-512.png
diff --git a/public/icons/maskable-192.png b/public/icons/maskable-192.png
diff --git a/public/icons/maskable-512.png b/public/icons/maskable-512.png
diff --git a/public/index.html b/public/index.html
@@ -4,12 +4,28 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Cinemate — your movie buddy</title>
+    <link rel="icon" href="/logo.svg" type="image/svg+xml" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="theme-color" content="#E23755" />
+    <meta property="og:title" content="Cinemate — swipe. match. watch." />
+    <meta property="og:description" content="Tinder pentru filme și seriale — swipe, match, watch cu partenerul tău." />
+    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
     <main id="app">
       <header class="topbar">
-        <h1 id="app-logo" title="Home">Cinemate</h1>
+        <h1 id="app-logo" title="Home">
+          <img src="/logo.svg" alt="" class="logo-mark" width="26" height="26" />
+          <span class="logo-word">Cinemate</span>
+        </h1>
         <span id="user-badge" class="user-badge hidden"></span>
       </header>
 

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/og-image.png b/public/og-image.png
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,15 @@
+{
+  "name": "Cinemate",
+  "short_name": "Cinemate",
+  "description": "Swipe. Match. Watch. Tinder pentru filme si seriale.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#131318",
+  "theme_color": "#E23755",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icons/maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
+    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}
diff --git a/public/style.css b/public/style.css
@@ -42,10 +42,23 @@ body {
 .topbar h1 {
   margin: 0;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 1.5rem;
   font-weight: 800;
   letter-spacing: 0.02em;
-  background: linear-gradient(90deg, #ff2e63, #ff7aa8);
+}
+.logo-mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  display: block;
+  box-shadow: 0 2px 8px rgba(226, 55, 85, 0.35);
+}
+.logo-word {
+  /* Matches the icon's coral→red gradient so the mark and wordmark read as one. */
+  background: linear-gradient(90deg, #ff8a5b, #e23755);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;