✨ Improve management landing page

src/components/layout/admin/main-admin.layout.tsx

@@ -1,6 +1,7 @@
 import {
   AppShell,
   Avatar,
+  Box,
   Flex,
   Footer,
   Group,
@@ -15,6 +16,7 @@ import {
   UnstyledButton,
 } from '@mantine/core';
 import {
+  IconAlertTriangle,
   IconBook2,
   IconBrandDiscord,
   IconBrandGithub,
@@ -94,17 +96,46 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
                 </ThemeIcon>
               }
             >
-              <NavLink icon={<IconBook2 size="1rem" />} label="Documentation" />
-              <NavLink icon={<IconBrandGithub size="1rem" />} label="Report an issue / bug" />
-              <NavLink icon={<IconBrandDiscord size="1rem" />} label="Ask a question" />
-              <NavLink icon={<IconGitFork size="1rem" />} label="Contribute" />
+              <NavLink
+                icon={<IconBook2 size="1rem" />}
+                component="a"
+                href="https://homarr.dev/docs/about"
+                label="Documentation"
+              />
+              <NavLink
+                icon={<IconBrandGithub size="1rem" />}
+                component="a"
+                href="https://github.com/ajnart/homarr/issues/new/choose"
+                label="Report an issue / bug"
+              />
+              <NavLink
+                icon={<IconBrandDiscord size="1rem" />}
+                component="a"
+                href="https://discord.com/invite/aCsmEV5RgA"
+                label="Community Discord"
+              />
+              <NavLink
+                icon={<IconGitFork size="1rem" />}
+                component="a"
+                href="https://github.com/ajnart/homarr"
+                label="Contribute"
+              />
             </NavLink>
           </Navbar.Section>
         </Navbar>
       }
       header={
-        <Header height={60} p="sm" pt="xs">
-          <Group spacing="xl" position="apart" noWrap>
+        <Header height={60 + 30} pb="sm" pt={0}>
+          <Box bg="red" h={30} p={3} px={6}>
+            <Flex h="100%" align="center" columnGap={7}>
+              <IconAlertTriangle color="white" size="1rem" />
+              <Text color="white">
+                This is an experimental feature of Homarr. Please report any issues to the official
+                Homarr team.
+              </Text>
+            </Flex>
+          </Box>
+          <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
             <UnstyledButton component={Link} href="/manage">
               <Logo />
             </UnstyledButton>

src/pages/manage/index.tsx

@@ -1,12 +1,117 @@
-import { Title } from "@mantine/core";
-import { MainLayout } from "~/components/layout/admin/main-admin.layout";
+import {
+  Box,
+  Card,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+  createStyles,
+} from '@mantine/core';
+import { IconArrowRight } from '@tabler/icons-react';
+import Image from 'next/image';
+import { MainLayout } from '~/components/layout/admin/main-admin.layout';
 
 const ManagementPage = () => {
+  const { classes } = useStyles();
   return (
     <MainLayout>
-            <Title>Good morning, Manicraft1001</Title>
+      <Box className={classes.box} w="100%" h={150} p="xl" mb={50}>
+        <Group position="apart">
+          <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>
+          </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>
+          </Box>
+        </Group>
+      </Box>
+
+      <Text weight="bold" mb="md">
+        Quick actions
+      </Text>
+      <SimpleGrid
+        cols={3}
+        spacing="xl"
+        breakpoints={[
+          { maxWidth: '62rem', cols: 2, spacing: 'lg' },
+          { maxWidth: '48rem', cols: 1, spacing: 'md' },
+        ]}
+      >
+        <UnstyledButton>
+          <Card className={classes.quickActionCard}>
+            <Group spacing={30} noWrap>
+              <Stack spacing={0}>
+                <Text weight="bold">New dashboard</Text>
+                <Text>Create a new dashboard</Text>
+              </Stack>
+              <IconArrowRight />
+            </Group>
+          </Card>
+        </UnstyledButton>
+        <UnstyledButton>
+          <Card className={classes.quickActionCard}>
+            <Group spacing={30} noWrap>
+              <Stack spacing={0}>
+                <Text weight="bold">Your dasboards</Text>
+                <Text>Show a list of all your dashboards</Text>
+              </Stack>
+              <IconArrowRight />
+            </Group>
+          </Card>
+        </UnstyledButton>
+        <UnstyledButton>
+          <Card className={classes.quickActionCard}>
+            <Group spacing={30} noWrap>
+              <Stack spacing={0}>
+                <Text weight="bold">Invite a new user</Text>
+                <Text>Create and send an invitation for registration</Text>
+              </Stack>
+              <IconArrowRight />
+            </Group>
+          </Card>
+        </UnstyledButton>
+        <UnstyledButton>
+          <Card className={classes.quickActionCard}>
+            <Group spacing={30} noWrap>
+              <Stack spacing={0}>
+                <Text weight="bold">Your preferences</Text>
+                <Text>Adjust language, colors and more</Text>
+              </Stack>
+              <IconArrowRight />
+            </Group>
+          </Card>
+        </UnstyledButton>
+      </SimpleGrid>
     </MainLayout>
-    )
-}
+  );
+};
 
 export default ManagementPage;
+
+const useStyles = createStyles((theme) => ({
+  box: {
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.red[4] : theme.colors.red[1],
+  },
+  boxTitle: {
+    color: theme.colors.red[6],
+  },
+  quickActionCard: {
+    height: "100%",
+    backgroundColor: theme.colors.gray[2],
+    '&:hover': {
+      backgroundColor: theme.colors.gray[3],
+    },
+  },
+}));