feat(brand): official WeVisto logo + linked badge on user-facing pages

- frontend/public/logo.svg: Camogli photo with We[V]isto knockout wordmark (yellow V accent), embedded base64 so the SVG is self-contained - brand/: raw source (15.7MB Camogli original) + 900x900 crop used in the SVG, plus a short README documenting both - Login, register, setup index/configure, help: linked logo badge above the page heading - Email template: logo bumped to 64x64 (was 30 tall — wordmark unreadable) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-14 22:33:28 -04:00
parent 2637eb19cd
commit e7e9202a11
11 changed files with 61 additions and 26 deletions
@@ -0,0 +1,8 @@
+# Brand source assets
+
+| File | Purpose |
+|------|---------|
+| `IMG_2524.jpg` | Raw full-quality original (Camogli harbour, 5712×4284). The hero photo behind the WeVisto wordmark. Use this for any marketing, social, or print work. |
+| `IMG_2524-square900.jpg` | 900×900 centred crop (vbias 0.42) — the exact image embedded as base64 in `frontend/public/logo.svg`. Regenerate the logo from this if you ever tweak the wordmark. |
+
+The composed logo SVG lives at `frontend/public/logo.svg` (Vite copies it to `public/build/logo.svg` at build time).
@@ -5,8 +5,8 @@
  <div style="max-width:480px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e8d9c4">
    <div style="padding:1.5rem">
      <img src="{{ absolute_url('/build/logo.svg') }}" alt="WeVisto"
-           width="120" height="30"
-           style="display:block;height:30px;width:auto;margin-bottom:.75rem">
+           width="64" height="64"
+           style="display:block;width:64px;height:64px;border-radius:10px;margin-bottom:.75rem">

      <h1 style="font-size:1.25rem;font-weight:700;color:#3a2e22;margin-bottom:.5rem">{{ sharer.email }} shared a photo with you</h1>
      <p style="color:#8a7060;font-size:.875rem;margin-bottom:1.25rem">Add it to your frame or decline — it's up to you.</p>
@@ -81,11 +81,14 @@
            color: #8a7060;
            font-size: .85rem;
        }
+        .logo-badge { display: block; width: 72px; height: 72px; margin-bottom: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
+        .logo-badge img { display: block; width: 100%; height: 100%; }
    </style>
 </head>
 <body>
 <div class="wrap">

+    <a href="/" class="logo-badge" aria-label="WeVisto"><img src="/build/logo.svg" alt=""></a>
    <h1>WeVisto setup help</h1>
    <p class="lede">Trouble joining your frame to the network, or stuck on a screen? Start here.</p>

@@ -66,10 +66,13 @@
        .btn:hover { opacity: 0.9; }
        .register-link { display: block; text-align: center; margin-top: 1rem; font-size: 0.875rem; color: #8a7060; }
        .register-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
+        .logo-badge { display: block; width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
+        .logo-badge img { display: block; width: 100%; height: 100%; }
    </style>
 </head>
 <body>
 <div class="card">
+    <a href="/" class="logo-badge" aria-label="WeVisto"><img src="/build/logo.svg" alt=""></a>
    <h1>Sign in</h1>

    <form method="post" novalidate>
@@ -68,10 +68,13 @@
        .btn:hover { opacity: 0.9; }
        .login-link { display: block; text-align: center; margin-top: 1rem; font-size: 0.875rem; color: #8a7060; }
        .login-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
+        .logo-badge { display: block; width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
+        .logo-badge img { display: block; width: 100%; height: 100%; }
    </style>
 </head>
 <body>
 <div class="card">
+    <a href="/" class="logo-badge" aria-label="WeVisto"><img src="/build/logo.svg" alt=""></a>
    <h1>Create account</h1>

    {{ form_start(form, {attr: {novalidate: 'novalidate', id: 'reg-form'}}) }}
@@ -33,10 +33,13 @@
        .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
               margin-top: 1.5rem; background: #c97c3a; color: #fff; border: none; border-radius: 9999px;
               font-size: 1rem; font-weight: 700; cursor: pointer; }
+        .logo-badge { display: block; width: 80px; height: 80px; margin: 0 auto 1rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
+        .logo-badge img { display: block; width: 100%; height: 100%; }
    </style>
 </head>
 <body>
 <div class="card">
+    <a href="/" class="logo-badge" aria-label="WeVisto"><img src="/build/logo.svg" alt=""></a>
    <h1>Name your frame</h1>
    <p class="subtitle">You can always change these settings later.</p>

@@ -34,10 +34,13 @@
               font-size: .875rem; line-height: 1.35; cursor: pointer; }
        .claim-check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto;
               margin-top: 2px; accent-color: #c97c3a; cursor: pointer; }
+        .logo-badge { display: block; width: 80px; height: 80px; margin: 0 auto 1rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
+        .logo-badge img { display: block; width: 100%; height: 100%; }
    </style>
 </head>
 <body>
 <div class="card">
+    <a href="/" class="logo-badge" aria-label="WeVisto"><img src="/build/logo.svg" alt=""></a>
    <h1>Link this frame</h1>
    <p class="subtitle">Create an account, or sign in if you already have one. The frame will link to whichever account you use here.</p>