feat: centralize frontend branding

frontend/src/static/components/LandingSiteMenu.vue

@@ -5,10 +5,10 @@
                 class="site-brand"
                 to="/"
             >
-                <span class="site-brand-mark">S</span>
+                <BrandMark class="site-brand-mark" />
                 <span class="site-brand-heading">
                     <span class="site-brand-text-wrap">
-                        <span class="site-brand-text">Socialize</span>
+                        <span class="site-brand-text">{{ branding.productName }}</span>
                         <span
                             class="site-brand-stage-badge"
                             :aria-label="t('nav.brandStageLabel')"
@@ -136,6 +136,8 @@
     import { useI18n } from 'vue-i18n';
     import { useAuthStore } from '@/features/auth/stores/authStore.js';
     import { productFeatureItems } from '@/static/productFeatures.js';
+    import { branding } from '@/branding/branding.js';
+    import BrandMark from '@/components/branding/BrandMark.vue';
 
     const allowedLocales = ['en', 'fr'];
     const localeStorageKey = 'user-locale';
@@ -273,13 +275,11 @@
 
     .site-brand {
         @apply flex min-w-0 items-start gap-3 no-underline;
-        color: #172033;
+        color: var(--h-primary);
     }
 
     .site-brand-mark {
-        @apply flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-2xl text-base font-black;
-        background: var(--socialize-brand-gradient);
-        color: #fffaf2;
+        @apply h-10 w-10 flex-shrink-0 rounded-2xl;
     }
 
     .site-brand-heading {