mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/website/components/auth/AuthCard.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
interface AuthCardProps {
@@ -17,31 +18,31 @@ interface AuthCardProps {
*/
export function AuthCard({ children, title, description }: AuthCardProps) {
return (
<Box bg="surface-charcoal" border borderColor="outline-steel" rounded="lg" shadow="card" position="relative" overflow="hidden">
<Card bg="surface-charcoal" borderColor="outline-steel" rounded="lg" position="relative" overflow="hidden">
{/* Subtle top accent line */}
<Box
<Stack
position="absolute"
top="0"
left="0"
w="full"
h="1px"
bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)"
/>
>{null}</Stack>
<Box p={{ base: 6, md: 8 }}>
<Box as="header" mb={8} textAlign="center">
<Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block>
<Stack p={{ base: 6, md: 8 }}>
<Stack as="header" mb={8} align="center">
<Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block textAlign="center">
{title}
</Text>
{description && (
<Text size="sm" color="text-med" block>
<Text size="sm" color="text-med" block textAlign="center">
{description}
</Text>
)}
</Box>
</Stack>
{children}
</Box>
</Box>
</Stack>
</Card>
);
}

7
apps/website/components/auth/AuthFooterLinks.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
interface AuthFooterLinksProps {
@@ -15,10 +14,10 @@ interface AuthFooterLinksProps {
*/
export function AuthFooterLinks({ children }: AuthFooterLinksProps) {
return (
<Box as="footer" mt={8} pt={6} borderTop borderStyle="solid" borderColor="outline-steel">
<Stack gap={3} align="center" textAlign="center">
<Stack as="footer" mt={8} pt={6} borderTop borderStyle="solid" borderColor="outline-steel">
<Stack gap={3} align="center">
{children}
</Stack>
</Box>
</Stack>
);
}

9
apps/website/components/auth/AuthForm.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
interface AuthFormProps {
@@ -16,10 +15,8 @@ interface AuthFormProps {
*/
export function AuthForm({ children, onSubmit }: AuthFormProps) {
return (
<Box as="form" onSubmit={onSubmit} noValidate>
<Stack gap={6}>
{children}
</Stack>
</Box>
<Stack as="form" {...({ onSubmit, noValidate: true } as any)} gap={6}>
{children}
</Stack>
);
}

6
apps/website/components/auth/AuthProviderButtons.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Grid } from '@/ui/Grid';
interface AuthProviderButtonsProps {
children: React.ReactNode;
@@ -14,8 +14,8 @@ interface AuthProviderButtonsProps {
*/
export function AuthProviderButtons({ children }: AuthProviderButtonsProps) {
return (
<Box display="grid" gridCols={1} gap={3} mb={6}>
<Grid cols={1} gap={3} mb={6}>
{children}
</Box>
</Grid>
);
}

18
apps/website/components/auth/AuthShell.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
interface AuthShellProps {
children: React.ReactNode;
@@ -15,9 +15,9 @@ interface AuthShellProps {
*/
export function AuthShell({ children }: AuthShellProps) {
return (
<Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" p={4} bg="base-black" position="relative" overflow="hidden">
<Stack as="main" minHeight="screen" align="center" justify="center" p={4} bg="base-black" position="relative" overflow="hidden">
{/* Subtle background glow - top right */}
<Box
<Stack
position="absolute"
top="-10%"
right="-10%"
@@ -28,9 +28,9 @@ export function AuthShell({ children }: AuthShellProps) {
blur="xl"
pointerEvents="none"
aria-hidden="true"
/>
>{null}</Stack>
{/* Subtle background glow - bottom left */}
<Box
<Stack
position="absolute"
bottom="-10%"
left="-10%"
@@ -41,11 +41,11 @@ export function AuthShell({ children }: AuthShellProps) {
blur="xl"
pointerEvents="none"
aria-hidden="true"
/>
>{null}</Stack>
<Box w="full" maxWidth="400px" position="relative" zIndex={10} animate="fade-in">
<Stack w="full" maxWidth="400px" position="relative" zIndex={10} {...({ animate: "fade-in" } as any)}>
{children}
</Box>
</Box>
</Stack>
</Stack>
);
}

51
apps/website/components/auth/UserRolesPreview.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Car, Trophy, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
@@ -35,46 +34,47 @@ interface UserRolesPreviewProps {
export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
if (variant === 'compact') {
return (
<Box mt={8} display={{ base: 'block', lg: 'none' }}>
<Stack mt={8} display={{ base: 'block', lg: 'none' }}>
<Text align="center" size="xs" color="text-gray-500" mb={4} block>
One account for all roles
</Text>
<Stack direction="row" justify="center" gap={6}>
{USER_ROLES.map((role) => (
<Stack key={role.title} direction="col" align="center">
<Box
width="8"
height="8"
<Stack
w="8"
h="8"
rounded="lg"
bg={`bg-${role.color}/20`}
display="flex"
alignItems="center"
justifyContent="center"
align="center"
justify="center"
mb={1}
>
<Text color={`text-${role.color}`}>
<Icon icon={role.icon} size={4} />
</Text>
</Box>
</Stack>
<Text size="xs" color="text-gray-500">{role.title}</Text>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}
return (
<Stack direction="col" gap={3} mb={8}>
{USER_ROLES.map((role, index) => (
<Box
<Stack
as={motion.div}
key={role.title}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
display="flex"
alignItems="center"
{...({
initial: { opacity: 0, x: -20 },
animate: { opacity: 1, x: 0 },
transition: { delay: index * 0.1 }
} as any)}
direction="row"
align="center"
gap={4}
p={4}
rounded="xl"
@@ -82,24 +82,23 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
border
borderColor="border-charcoal-outline"
>
<Box
width="10"
height="10"
<Stack
w="10"
h="10"
rounded="lg"
bg={`bg-${role.color}/20`}
display="flex"
alignItems="center"
justifyContent="center"
align="center"
justify="center"
>
<Text color={`text-${role.color}`}>
<Icon icon={role.icon} size={5} />
</Text>
</Box>
<Box>
</Stack>
<Stack>
<Heading level={4}>{role.title}</Heading>
<Text size="sm" color="text-gray-500">{role.description}</Text>
</Box>
</Box>
</Stack>
</Stack>
))}
</Stack>
);