feat(web): new Sentinel icon

README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src="docs/assets/sentinel-icon.png" width="128" height="128" alt="Sentinel icon"></p>
+
 # Sentinel — Discord logging & audit log bot
 
 [![CI](https://github.com/haxurus/Sentinel/actions/workflows/ci.yml/badge.svg)](https://github.com/haxurus/Sentinel/actions/workflows/ci.yml)

apps/web/app/_components/Brand.tsx

@@ -1,14 +1,8 @@
 import type { ReactNode } from 'react';
 
-/** Sentinel mark: a watchtower aperture — an eye inside a shield-like frame. */
+/** The Sentinel icon: a watchful eye on a shield, above a log entry. */
 export function BrandMark({ size = 28 }: { size?: number }) {
-  return (
-    <svg className="brand-mark" width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
-      <path d="M16 2.5 4.5 7v8.2c0 6.9 4.7 12.3 11.5 14.3 6.8-2 11.5-7.4 11.5-14.3V7L16 2.5Z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
-      <path d="M8.6 15.6c2-3.3 4.5-5 7.4-5s5.4 1.7 7.4 5c-2 3.3-4.5 5-7.4 5s-5.4-1.7-7.4-5Z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
-      <circle cx="16" cy="15.6" r="2.4" fill="var(--accent)" />
-    </svg>
-  );
+  return <img className="brand-mark" src="/sentinel-icon.png" width={size} height={size} alt="" aria-hidden="true" decoding="async" />;
 }
 
 export function Brand({ href, label = 'Sentinel - Home' }: { href: string; label?: string }) {

apps/web/app/_components/PublicHome.tsx

@@ -219,6 +219,7 @@ export default function PublicHome({ locale }: { locale: Locale }) {
           '@type': 'SoftwareApplication',
           name: 'Sentinel',
           url: `${SITE_URL}/${locale}`,
+          image: `${SITE_URL}/sentinel-icon.png`,
           description: c.hero.text,
           applicationCategory: 'UtilitiesApplication',
           applicationSubCategory: locale === 'it' ? 'Bot Discord per log e moderazione' : 'Discord logging and moderation bot',

apps/web/app/_components/SocialImage.tsx

@@ -1,4 +1,5 @@
 import { ImageResponse } from 'next/og';
+import { BRAND_ICON_DATA_URI } from './brand-icon';
 
 export const socialImageSize = { width: 1200, height: 630 };
 
@@ -8,11 +9,7 @@ export function socialImage({ kicker, title, subtitle, tags }: { kicker: string;
     (
       <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '64px 72px', background: 'linear-gradient(135deg, #0e0b16 0%, #1b1527 60%, #2c233d 100%)', color: '#f2edf8', fontFamily: 'sans-serif' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
-          <svg width="64" height="64" viewBox="0 0 32 32">
-            <path d="M16 2.5 4.5 7v8.2c0 6.9 4.7 12.3 11.5 14.3 6.8-2 11.5-7.4 11.5-14.3V7L16 2.5Z" fill="none" stroke="#f2edf8" strokeWidth="1.8" strokeLinejoin="round" />
-            <path d="M8.6 15.6c2-3.3 4.5-5 7.4-5s5.4 1.7 7.4 5c-2 3.3-4.5 5-7.4 5s-5.4-1.7-7.4-5Z" fill="none" stroke="#f2edf8" strokeWidth="1.8" strokeLinejoin="round" />
-            <circle cx="16" cy="15.6" r="2.4" fill="#a78bfa" />
-          </svg>
+          <img src={BRAND_ICON_DATA_URI} width={72} height={72} style={{ borderRadius: 16 }} alt="" />
           <span style={{ fontSize: 40, fontWeight: 700 }}>Sentinel</span>
           <span style={{ marginLeft: 12, padding: '6px 16px', border: '2px solid rgba(167,139,250,.5)', borderRadius: 999, color: '#c4b5fd', fontSize: 24 }}>{kicker}</span>
         </div>

apps/web/app/globals.css

@@ -176,7 +176,7 @@ select {
 }
 .site-nav { min-height: 64px; display: flex; align-items: center; gap: 32px; }
 .brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
-.brand-mark { color: var(--text); }
+.brand-mark { display: block; border-radius: 22%; }
 .site-nav-links { display: flex; align-items: center; gap: 4px; }
 .site-nav-links a { padding: 8px 11px; white-space: nowrap; border-radius: var(--radius-sm); color: var(--muted); font-size: .86rem; transition: color .15s ease, background .15s ease; }
 .site-nav-links a:hover { color: var(--text); background: var(--surface-2); }