chore: heygermany customer project

apps/website/views/localized/app/logout/page.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from '@tanstack/react-router';
+import { Paper, Text, Title, Stack, Loader, Flex } from '@pikku/mantine/core';
+import { useI18n } from '@/context/i18n-provider';
+import { useMutation } from '@tanstack/react-query';
+import { signOut } from '@/lib/auth';
+import { asI18n } from '@pikku/react';
+
+export default function LogoutPage() {
+  const t = useI18n();
+  const navigate = useNavigate();
+  const { lang } = useParams({ strict: false }) as { lang?: string }
+  const logout = useMutation({
+    mutationFn: async () => {
+      await signOut()
+    }
+  })
+
+  useEffect(() => {
+    const performLogout = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 3000))
+      await logout.mutateAsync()
+      navigate({ to: lang ? `/${lang}` : '/', replace: true })
+    }
+
+    void performLogout()
+  }, [lang, navigate])
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      mih="100vh"
+      p="md"
+    >
+      <Paper p="xl" radius="md" shadow="sm" w="100%" maw="400">
+        <Stack align="center" gap="lg">
+          <Title order={2} ta="center">
+            {t('logout.title')}
+          </Title>
+
+          {logout.isPending ? (
+            <>
+              <Loader size="md" />
+              <Text ta="center" c="dimmed">
+                {t('logout.loggingout')}
+              </Text>
+            </>
+          ) : logout.isError ? (
+            <Text ta="center" c="red">
+              {asI18n(`${t('logout.error')}: ${logout.error?.message || 'Unknown error'}`)}
+            </Text>
+          ) : logout.isSuccess ? (
+            <Text ta="center" c="green">
+              {t('logout.success')}
+            </Text>
+          ) : null}
+        </Stack>
+      </Paper>
+    </Flex>
+  );
+}