website refactor

apps/website/app/profile/liveries/page.tsx

@@ -1,13 +1,4 @@
-import Link from 'next/link';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/Grid';
-import { routes } from '@/lib/routing/RouteConfig';
-import { LiveryCard } from '@/ui/LiveryCard';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
+import { ProfileLiveriesTemplate } from '@/templates/ProfileLiveriesTemplate';
 
 export default async function ProfileLiveriesPage() {
   const mockLiveries = [
@@ -29,29 +20,5 @@ export default async function ProfileLiveriesPage() {
     }
   ];
 
-  return (
-    <Container size="lg" py={8}>
-      <Stack direction="row" align="center" justify="between" mb={8}>
-        <Box>
-          <Heading level={1}>My Liveries</Heading>
-          <Text color="text-gray-400" mt={1} block>Manage your custom car liveries</Text>
-        </Box>
-        <Link href={routes.protected.profileLiveryUpload}>
-          <Button variant="primary">Upload livery</Button>
-        </Link>
-      </Stack>
-
-      <Grid cols={3} gap={6}>
-        {mockLiveries.map((livery) => (
-          <LiveryCard key={livery.id} livery={livery} />
-        ))}
-      </Grid>
-
-      <Box mt={12}>
-        <Link href={routes.protected.profile}>
-          <Button variant="secondary">Back to profile</Button>
-        </Link>
-      </Box>
-    </Container>
-  );
+  return <ProfileLiveriesTemplate viewData={{ liveries: mockLiveries }} />;
 }