feat: implement frontend login functionality with form handling and error management

apps/frontend/app/routes/home.tsx

@@ -1,13 +1,73 @@
-import { Text } from '@radix-ui/themes';
+import { Box, Button, Card, Flex, Grid, Heading, Text } from '@radix-ui/themes';
 import type { Route } from './+types/home';
-import { useContext } from 'react';
-import { useApi } from '../providers/ApiProvider';
-import { useQuery } from '@tanstack/react-query';
+import TablePlaceholder from '../components/home/TablePlaceholder';
+import { useLayout } from '../providers/LayoutProvider';
 
+// eslint-disable-next-line no-empty-pattern
 export function meta({}: Route.MetaArgs) {
-  return [{ title: 'YANPM' }, { name: 'description', content: 'Welcome to Yet Another Nginx Proxy Manager!' }];
+  return [{ title: 'Proxy Host Demo | YANPM' }, { name: 'description', content: 'Demo of the unified navigation paradigm.' }];
 }
 
-export default function Home() {
-  return <Text>Welcome to Yet Another Nginx Proxy Manager!</Text>;
+export default function ProxyHostDemo() {
+  const { activeTab } = useLayout();
+  return (
+    <Box>
+      <Heading size="7" mb="1">
+        {activeTab}
+      </Heading>
+      <Text color="gray" mb="4" as="p">
+        This is the {activeTab.toLowerCase()} page demo.
+      </Text>
+
+      <Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="4">
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Status Overview
+            </Text>
+            <Text size="2" color="gray">
+              Everything is running smoothly in your {activeTab.toLowerCase()} section.
+            </Text>
+            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
+              View Details
+            </Button>
+          </Flex>
+        </Card>
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Recent Activity
+            </Text>
+            <Text size="2" color="gray">
+              No recent changes detected in the last 24 hours.
+            </Text>
+            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
+              Refresh
+            </Button>
+          </Flex>
+        </Card>
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Quick Actions
+            </Text>
+            <Text size="2" color="gray">
+              Common tasks related to {activeTab.toLowerCase()} are available here.
+            </Text>
+            <Button variant="solid" size="1" style={{ width: 'fit-content' }} mt="1">
+              Get Started
+            </Button>
+          </Flex>
+        </Card>
+      </Grid>
+
+      {activeTab === 'Proxy Hosts' && (
+        <Box mt="6">
+          <Card variant="surface">
+            <TablePlaceholder />
+          </Card>
+        </Box>
+      )}
+    </Box>
+  );
 }