update the logo

apps/portal/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="apple-touch-icon" href="/brand/logo-mark.svg" />
+    <link rel="apple-touch-icon" href="/ema-logo.png" />
     <title>EMA Portal</title>
     <script>
       // Apply the saved Mantine color scheme before paint to avoid a flash.

apps/portal/public/brand/logo-mark-white.svg

@@ -1,12 +0,0 @@
-<!-- EMA logo — white/mono version for dark backgrounds (auth brand panel).
-     Same faceted "A" + "ema" wordmark, rendered in white with subtle facet
-     shading so the folds still read. -->
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ema">
-  <polygon points="24,4 8,33 16,33"  fill="#ffffff" fill-opacity="0.95" />
-  <polygon points="24,4 16,33 24,33" fill="#ffffff" fill-opacity="0.78" />
-  <polygon points="24,4 24,33 32,33" fill="#ffffff" fill-opacity="0.55" />
-  <polygon points="24,4 32,33 40,33" fill="#ffffff" fill-opacity="0.88" />
-  <text x="24" y="46" text-anchor="middle"
-        font-family="Inter, 'Segoe UI', Arial, sans-serif"
-        font-size="13" font-weight="700" letter-spacing="-0.5" fill="#ffffff">ema</text>
-</svg>

apps/portal/public/brand/logo-mark.svg

@@ -1,14 +0,0 @@
-<!-- EMA logo — colour version (faceted "A" peak + "ema" wordmark).
-     Hand-built vector approximation of the brand mark; tweak the facet points
-     or colours below to fine-tune. Replace this file to swap in official art. -->
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ema">
-  <!-- faceted A / peak -->
-  <polygon points="24,4 8,33 16,33"  fill="#8db0ee" />
-  <polygon points="24,4 16,33 24,33" fill="#4b7fe5" />
-  <polygon points="24,4 24,33 32,33" fill="#1c2c4a" />
-  <polygon points="24,4 32,33 40,33" fill="#3160b7" />
-  <!-- wordmark -->
-  <text x="24" y="46" text-anchor="middle"
-        font-family="Inter, 'Segoe UI', Arial, sans-serif"
-        font-size="13" font-weight="700" letter-spacing="-0.5" fill="#3160b7">ema</text>
-</svg>

apps/portal/src/app/components/Logo.tsx

@@ -7,10 +7,8 @@ import { Box, type BoxProps } from '@mantine/core';
  * path here.
  */
 const LOGO = {
-  /** Full-colour mark, for light surfaces (portal header, mobile auth header). */
-  color: '/brand/logo-mark.svg',
-  /** White/mono mark, for dark surfaces (the auth brand panel). */
-  white: '/brand/logo-mark-white.svg',
+  color: '/ema-logo.png',
+  white: '/brand/ema-white.png',
 } as const;
 
 export type LogoVariant = keyof typeof LOGO;

apps/portal/src/app/features/auth/components/AuthShell.tsx

@@ -82,24 +82,22 @@ export function AuthShell({
 
         <Flex
           direction="column"
-          justify="space-between"
           h="100%"
           pos="relative"
           style={{ zIndex: 1 }}
         >
-          <Group gap="sm" wrap="nowrap">
-            <BrandMark variant="white" size={46} />
-            <div>
-              <Text c="white" fw={700} fz="lg" lh={1.1}>
-                EMA Portal
-              </Text>
-              <Text fz="xs" lh={1.2} style={{ color: 'rgba(255,255,255,0.75)' }}>
-                Ethiopian Maritime Authority
-              </Text>
-            </div>
-          </Group>
+          <Box style={{ flex: 1 }} />
 
           <Stack gap="xl" maw={400}>
+            <Center>
+              <Box
+                component="img"
+                src="/brand/ema-white.png"
+                alt="EMA Portal"
+                style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
+              />
+            </Center>
+
             <Stack gap="sm">
               <Title order={1} c="white" fz={rem(36)} lh={1.15} fw={700}>
                 {brandTitle}
@@ -131,6 +129,8 @@ export function AuthShell({
             </Stack>
           </Stack>
 
+          <Box style={{ flex: 1 }} />
+
           <Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
             © 2026 Ethiopian Maritime Authority
           </Text>
@@ -140,12 +140,14 @@ export function AuthShell({
       {/* ---- Form panel ----------------------------------------------- */}
       <Center flex={1} p="xl">
         <Box w="100%" maw={420}>
-          <Group hiddenFrom="md" gap="sm" mb="xl">
-            <BrandMark size={40} />
-            <Text fw={700} fz="lg">
-              EMA Portal
-            </Text>
-          </Group>
+          <Center hiddenFrom="md" mb="xl">
+            <Box
+              component="img"
+              src="/ema-logo.png"
+              alt="EMA Portal"
+              style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
+            />
+          </Center>
           {children}
         </Box>
       </Center>