✨(frontend) add all official logos

Based on Florian and Stéphanie feedbacks, add the 'Marianne' logo,
and a beta tag on our visio's logo.

I've slightly updated the header. Its responsive is broken in certain
situations.

src/frontend/src/layout/Header.tsx

@@ -1,18 +1,98 @@
 import { Link } from 'wouter'
 import { css } from '@/styled-system/css'
-import { Stack } from '@/styled-system/jsx'
+import { HStack, Stack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
-import { Text, Button } from '@/primitives'
+import { Button } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { logoutUrl, useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/navigation/useMatchesRoute'
-import { FeedbackBanner } from '@/components/FeedbackBanner.tsx'
+import { FeedbackBanner } from '@/components/FeedbackBanner'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { terminateAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
 import { terminateSupportSession } from '@/features/support/hooks/useSupport'
 
+import LogoAsset from '@/assets/logo.svg'
+
+const Marianne = () => {
+  return (
+    <div
+      className={css({
+        _before: {
+          content: '""',
+          display: 'block',
+          backgroundImage: 'url(/assets/marianne.svg)',
+          backgroundPosition: '0 -0.046875rem, 0 0, 0 0',
+          backgroundSize: '2.0625rem 0.84375rem, 2.0625rem 0.75rem, 0',
+          height: '0.75rem',
+          marginBottom: '0.1rem',
+          width: '2.0625rem',
+        },
+        _after: {
+          content: '""',
+          display: 'block',
+          backgroundImage: 'url(/assets/devise.svg)',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'contain',
+          width: '2.5rem',
+          height: '1.7857142857142858rem',
+          marginTop: '0.25rem',
+        },
+      })}
+    >
+      <p
+        className={css({
+          letterSpacing: '-.01em',
+          textTransform: 'uppercase',
+          fontWeight: '600',
+          fontFamily: 'Marianne',
+          fontSize: '0.7875rem !important',
+        })}
+      >
+        gouvernement
+      </p>
+    </div>
+  )
+}
+
+const BetaBadge = () => (
+  <span
+    className={css({
+      content: '"Beta"',
+      display: 'block',
+      letterSpacing: '-0.02rem',
+      padding: '0 0.25rem',
+      backgroundColor: '#E8EDFF',
+      color: '#0063CB',
+      fontSize: '12px',
+      fontWeight: 500,
+      margin: '0 0 0.9375rem 0.3125rem',
+      lineHeight: '1rem',
+      borderRadius: '4px',
+      width: 'fit-content',
+      height: 'fit-content',
+      marginTop: { base: '10px', sm: '5px' },
+    })}
+  >
+    Beta
+  </span>
+)
+
+const Logo = () => {
+  const { t } = useTranslation()
+  return (
+    <img
+      src={LogoAsset}
+      alt={t('app')}
+      className={css({
+        maxHeight: { base: '30px', sm: '40px' },
+        marginTop: { base: '10px', sm: '5px' },
+      })}
+    />
+  )
+}
+
 export const Header = () => {
   const { t } = useTranslation()
   const isHome = useMatchesRoute('home')
@@ -24,37 +104,43 @@ export const Header = () => {
       <FeedbackBanner />
       <div
         className={css({
-          paddingY: 1,
+          paddingBottom: 1,
           paddingX: 1,
+          paddingTop: 0.25,
           flexShrink: 0,
         })}
       >
-        <div
-          className={css({
-            display: 'flex',
-            rowGap: 0,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          })}
-        >
+        <HStack gap={0} justify="space-between" alignItems="center">
           <header>
             <Stack gap={2.25} direction="row" align="center">
-              <Text bold variant="h1" margin={false}>
-                <Link
-                  onClick={(event) => {
-                    if (
-                      isRoom &&
-                      !window.confirm(t('leaveRoomPrompt', { ns: 'rooms' }))
-                    ) {
-                      event.preventDefault()
-                    }
-                  }}
-                  to="/"
-                >
-                  {t('app')}
-                </Link>
-              </Text>
+              <Link
+                className={css({
+                  display: 'flex',
+                  flexDirection: { base: 'column', sm: 'row' },
+                  alignItems: 'start',
+                  gap: { base: '0', sm: '2rem' },
+                  padding: { base: '0.5rem', sm: '1rem' },
+                  _hover: {
+                    backgroundColor: 'greyscale.100',
+                    borderRadius: '4px',
+                  },
+                })}
+                onClick={(event) => {
+                  if (
+                    isRoom &&
+                    !window.confirm(t('leaveRoomPrompt', { ns: 'rooms' }))
+                  ) {
+                    event.preventDefault()
+                  }
+                }}
+                to="/"
+              >
+                <Marianne />
+                <HStack gap={0}>
+                  <Logo />
+                  <BetaBadge />
+                </HStack>
+              </Link>
             </Stack>
           </header>
           <nav>
@@ -75,8 +161,8 @@ export const Header = () => {
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         whiteSpace: 'nowrap',
-                        display: 'block',
-                        maxWidth: { base: '80px', xsm: '350px' },
+                        maxWidth: '350px',
+                        display: { base: 'none', xsm: 'block' },
                       })}
                     >
                       {user?.full_name || user?.email}
@@ -98,7 +184,7 @@ export const Header = () => {
               <SettingsButton />
             </Stack>
           </nav>
-        </div>
+        </HStack>
       </div>
     </>
   )