From 5e873cad3fb231bbc4d50e4fa4fea8a01cec245c Mon Sep 17 00:00:00 2001
From: Manuel <manuel.ruwe@bluewin.ch>
Date: Sat, 29 Jul 2023 21:58:36 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Improve=20management=20sta?=
 =?UTF-8?q?rt=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/manage/index.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/manage/index.tsx b/src/pages/manage/index.tsx
index 7e1b52238..0de53cc5b 100644
--- a/src/pages/manage/index.tsx
+++ b/src/pages/manage/index.tsx
@@ -12,26 +12,29 @@ import {
 import { IconArrowRight } from '@tabler/icons-react';
 import Image from 'next/image';
 import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 
 const ManagementPage = () => {
   const { classes } = useStyles();
+  const largerThanMd = useScreenLargerThan('md');
   return (
     <MainLayout>
-      <Box className={classes.box} w="100%" h={150} p="xl" mb={50}>
-        <Group position="apart">
+      <Box className={classes.box} w="100%" mih={150} p="xl" mb={50}>
+        <Group position="apart" noWrap>
           <Stack spacing={15}>
             <Title className={classes.boxTitle} order={2}>
               Welcome back, Manicraft1001
             </Title>
-            <Text>
-              Are you ready to organize?
-              <br />
-              You currently have 3 dashboards with 39 apps on them.
-            </Text>
+            <Text>Welcome to Your Application Hub. Organize, Optimize, and Conquer!</Text>
           </Stack>
           <Box bg="blue" w={100} h="100%" pos="relative">
-            <Box pos="absolute" bottom={-100} right={0}>
-              <Image src="/imgs/logo/logo.png" width={200} height={150} alt="" />
+            <Box
+              pos="absolute"
+              bottom={largerThanMd ? -100 : undefined}
+              top={largerThanMd ? undefined : -120}
+              right={largerThanMd ? 0 : -40}
+            >
+              <Image src="/imgs/logo/logo.png" width={largerThanMd ? 200 : 100} height={largerThanMd ? 150 : 60} alt="" />
             </Box>
           </Box>
         </Group>