move login to common ui

libs/auth/src/lib/components/AuthShell.tsx

@@ -0,0 +1,162 @@
+import type { ReactNode } from 'react';
+import {
+  Box,
+  Center,
+  Flex,
+  Group,
+  Stack,
+  Text,
+  Title,
+  rem,
+  useMantineTheme,
+  type BoxProps,
+} from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+import { useAuthConfig } from '../AuthConfig';
+
+export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number }) {
+  const { logoUrl } = useAuthConfig();
+  return (
+    <Box
+      component="img"
+      src={logoUrl}
+      alt="EMA"
+      w={size}
+      h={size}
+      style={{ display: 'block', objectFit: 'contain', flexShrink: 0 }}
+      {...boxProps}
+    />
+  );
+}
+
+const FEATURES = [
+  'Submit applications online, 24/7',
+  'Real-time status tracking & alerts',
+  'Available in English & አማርኛ',
+];
+
+interface AuthShellProps {
+  children: ReactNode;
+  brandTitle?: string;
+  brandSubtitle?: string;
+}
+
+export function AuthShell({
+  children,
+  brandTitle = 'Maritime licensing, made simple.',
+  brandSubtitle = 'Apply for vessel and seafarer licenses, upload documents, and track every application in one secure portal.',
+}: AuthShellProps) {
+  const theme = useMantineTheme();
+  const { logoUrl } = useAuthConfig();
+  const heroGradient = theme.other.heroGradient as string;
+
+  return (
+    <Flex
+      mih="100vh"
+      align="center"
+      justify="center"
+      style={{ background: '#f7f8fa' }}
+      p="md"
+    >
+      <Box
+        mx="auto"
+        maw={1280}
+        w="100%"
+        bg="white"
+        p={12}
+        style={{
+          borderRadius: rem(16),
+          boxShadow: '0 20px 60px rgba(0,0,0,0.15)',
+          overflow: 'hidden',
+        }}
+      >
+        <Flex direction={{ base: 'column', lg: 'row' }}>
+          <Box
+            w={{ base: '100%', lg: '50%' }}
+            px={48}
+            py={48}
+            style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
+          >
+            {children}
+          </Box>
+
+          <Box
+            visibleFrom="lg"
+            w="50%"
+            p="lg"
+            pos="relative"
+            style={{ background: heroGradient, overflow: 'hidden' }}
+          >
+            <Box
+              pos="absolute"
+              top={-80}
+              right={-40}
+              w={240}
+              h={240}
+              style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
+            />
+            <Box
+              pos="absolute"
+              bottom={-80}
+              left={-60}
+              w={220}
+              h={220}
+              style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
+            />
+
+            <Stack
+              gap="lg"
+              pos="relative"
+              style={{ zIndex: 1 }}
+              h="100%"
+              justify="center"
+            >
+              <Center>
+                <Box
+                  component="img"
+                  src={logoUrl}
+                  alt="EMA Portal"
+                  style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
+                />
+              </Center>
+
+              <Stack gap={6}>
+                <Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
+                  {brandTitle}
+                </Title>
+                <Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
+                  {brandSubtitle}
+                </Text>
+              </Stack>
+
+              <Stack gap="sm">
+                {FEATURES.map((feature) => (
+                  <Group key={feature} gap="sm" wrap="nowrap">
+                    <Center
+                      w={22}
+                      h={22}
+                      style={{
+                        borderRadius: '50%',
+                        background: 'rgba(255,255,255,0.2)',
+                        flexShrink: 0,
+                      }}
+                    >
+                      <IconCheck size={12} color="white" stroke={2.4} />
+                    </Center>
+                    <Text c="white" fz="sm" fw={500}>
+                      {feature}
+                    </Text>
+                  </Group>
+                ))}
+              </Stack>
+
+              <Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
+                © 2026 Ethiopian Maritime Authority
+              </Text>
+            </Stack>
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}