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-20 17:49:54 +01:00
parent 94aaaff704
commit b39b098e6b
18 changed files with 437 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/website/ui/Card.tsx
View File

@@ -32,6 +32,7 @@ export interface CardProps {
group?: boolean | any;
w?: string | any;
justifyContent?: string | any;
fullHeight?: boolean | any;
}
/**
@@ -65,6 +66,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
gap,
py,
backgroundColor,
fullHeight,
}, ref) => {
const variantClasses = {
default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-sm',
@@ -112,6 +114,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
...(alignItems ? { alignItems } : {}),
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
...(border === false ? { border: 'none' } : {}),
...(fullHeight ? { height: '100%' } : {}),
};
return (
@@ -129,7 +132,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
</div>
)}
<div className={typeof padding === 'number' || p !== undefined ? '' : getPaddingClass(padding)}>
<div className={`${typeof padding === 'number' || p !== undefined ? '' : getPaddingClass(padding)} ${fullHeight ? 'h-full flex flex-col' : ''}`}>
{children}
</div>

20
apps/website/ui/Logo.tsx
View File

@@ -24,29 +24,39 @@ export const Logo = ({
variant = 'muted',
border = true,
}: LogoProps) => {
const finalSize = typeof size === 'number' ? `${size}px` : size;
return (
<Surface
variant={variant}
rounded={rounded}
border={border}
style={{
width: size,
height: size,
width: finalSize,
height: finalSize,
minWidth: finalSize,
minHeight: finalSize,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexShrink: 0
flexShrink: 0,
position: 'relative',
backgroundColor: 'var(--ui-color-bg-base)',
}}
>
{src ? (
<Image
src={src}
alt={alt}
style={{ width: '100%', height: '100%', objectFit: 'contain', padding: '10%' }}
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
) : icon ? (
<Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 5 : 4) : 5} intent="low" />
<Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 6 : 4) : 6} intent="low" />
) : null}
</Surface>
);

1
apps/website/ui/Surface.tsx
View File

@@ -87,6 +87,7 @@ export const Surface = forwardRef(<T extends ElementType = 'div'>(
};
const style: React.CSSProperties = {
...(props.style || {}),
...variantStyles[variant],
borderRadius: rounded !== 'none' ? `var(--ui-radius-${String(rounded)})` : undefined,
boxShadow: shadow !== 'none' ? `var(--ui-shadow-${String(shadow)})` : undefined,

115
apps/website/ui/TeamCard.tsx
View File

@@ -1,115 +0,0 @@
import { ChevronRight, Globe, Users, Zap } from 'lucide-react';
import { ReactNode } from 'react';
import { Card } from './Card';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';
import { Badge } from './Badge';
export interface TeamCardProps {
name: string;
leagueName?: string;
logo?: ReactNode;
memberCount: number;
rating?: string;
wins?: string;
races?: string;
region?: string;
isRecruiting?: boolean;
performanceLevel?: string;
onClick?: () => void;
description?: string;
}
export const TeamCard = ({
name,
leagueName,
logo,
memberCount,
rating,
wins,
races,
region = 'EU',
isRecruiting,
performanceLevel,
description,
onClick
}: TeamCardProps) => {
return (
<Card
variant="precision"
padding="none"
onClick={onClick}
transition
>
<div className="p-6 space-y-6">
{/* Header: Logo and Identity */}
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-[var(--ui-color-bg-base)] flex items-center justify-center overflow-hidden border border-[var(--ui-color-border-muted)]">
{logo || <Icon icon={Users} size={5} intent="low" />}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<Heading level={4} weight="bold" truncate uppercase>{name}</Heading>
{isRecruiting && (
<Badge variant="success" size="xs">RECRUITING</Badge>
)}
</div>
<div className="flex items-center gap-2">
{leagueName && <Text size="xs" variant="low" truncate uppercase mono>{leagueName}</Text>}
{performanceLevel && (
<div className="flex items-center gap-1">
<Icon icon={Zap} size={3} intent="telemetry" />
<Text size="xs" variant="telemetry" mono uppercase>{performanceLevel}</Text>
</div>
)}
</div>
</div>
</div>
{/* Technical Stats Grid - Engineered Look */}
{(rating || wins || races) && (
<div className="grid grid-cols-3 gap-px bg-[var(--ui-color-border-muted)] border border-[var(--ui-color-border-muted)]">
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
<Text size="xs" variant="low" uppercase block mb={1} mono>Rating</Text>
<Text size="md" weight="bold" mono variant="primary">{rating || '-'}</Text>
</div>
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
<Text size="xs" variant="low" uppercase block mb={1} mono>Wins</Text>
<Text size="md" weight="bold" mono variant="telemetry">{wins || '-'}</Text>
</div>
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
<Text size="xs" variant="low" uppercase block mb={1} mono>Races</Text>
<Text size="md" weight="bold" mono variant="high">{races || '-'}</Text>
</div>
</div>
)}
{description && (
<Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
{description}
</Text>
)}
{/* Footer: Metadata */}
<div className="flex items-center justify-between pt-4 border-t border-[var(--ui-color-border-muted)]">
<div className="flex items-center gap-4">
<div className="flex items-center gap-1.5">
<Icon icon={Users} size={3} intent="low" />
<Text size="xs" variant="low" mono>{memberCount}</Text>
</div>
<div className="flex items-center gap-1.5">
<Icon icon={Globe} size={3} intent="low" />
<Text size="xs" variant="low" mono>{region}</Text>
</div>
</div>
<div className="flex items-center gap-1 text-[var(--ui-color-intent-primary)]">
<Text size="xs" weight="bold" uppercase mono>Details</Text>
<Icon icon={ChevronRight} size={3} />
</div>
</div>
</div>
</Card>
);
};

57
apps/website/ui/TeamHero.tsx
View File

@@ -1,57 +0,0 @@
import { ReactNode } from 'react';
import { Box } from './Box';
import { Glow } from './Glow';
import { Heading } from './Heading';
import { Text } from './Text';
export interface TeamHeroProps {
title: ReactNode;
description: string;
stats?: ReactNode;
actions?: ReactNode;
sideContent?: ReactNode;
}
export const TeamHero = ({
title,
description,
stats,
actions,
sideContent
}: TeamHeroProps) => {
return (
<Box
position="relative"
bg="var(--ui-color-bg-base)"
paddingY={12}
style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
>
<Glow color="purple" size="xl" opacity={0.05} position="top-right" />
<Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={12} alignItems="start">
<Box flex={1}>
<Heading level={1} size="4xl" weight="bold" marginBottom={4}>
{title}
</Heading>
<Text size="lg" variant="low" block marginBottom={8} leading="relaxed">
{description}
</Text>
{stats && <Box marginBottom={8}>{stats}</Box>}
{actions && (
<Box display="flex" gap={4} flexWrap="wrap">
{actions}
</Box>
)}
</Box>
{sideContent && (
<Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
{sideContent}
</Box>
)}
</Box>
</Box>
);
};

33
apps/website/ui/TeamsHeader.tsx
View File

@@ -1,33 +0,0 @@
import React, { ReactNode } from 'react';
import { Heading } from './Heading';
import { Text } from './Text';
interface TeamsHeaderProps {
title: string;
subtitle?: string;
action?: ReactNode;
}
export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
return (
<div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
<div className="space-y-2">
<div className="flex items-center gap-3">
<div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
<Heading level={1} weight="bold" uppercase>{title}</Heading>
</div>
{subtitle && (
<Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
{subtitle}
</Text>
)}
</div>
{action && (
<div className="flex items-center">
{action}
</div>
)}
</div>
);
}