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-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/website/components/onboarding/AvatarStep.tsx
View File

@@ -115,43 +115,50 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
flex={1}
display="flex"
flexDirection="column"
align="center"
justify="center"
padding={6}
alignItems="center"
justifyContent="center"
p={6}
rounded="xl"
border
borderColor={avatarInfo.facePhoto ? 'performance-green' : errors.facePhoto ? 'racing-red' : 'charcoal-outline'}
backgroundColor={avatarInfo.facePhoto ? 'performance-green' : errors.facePhoto ? 'racing-red' : 'transparent'}
opacity={avatarInfo.facePhoto || errors.facePhoto ? 0.1 : 1}
className="border-2 border-dashed cursor-pointer transition-all hover:border-primary-blue hover:bg-primary-blue/5"
borderStyle="dashed"
borderWidth="2px"
borderColor={avatarInfo.facePhoto ? 'border-performance-green' : errors.facePhoto ? 'border-racing-red' : 'border-charcoal-outline'}
bg={avatarInfo.facePhoto ? 'bg-performance-green/10' : errors.facePhoto ? 'bg-racing-red/10' : 'transparent'}
cursor="pointer"
transition
hoverBorderColor="border-primary-blue"
hoverBg="bg-primary-blue/5"
position="relative"
>
<input
<Box
as="input"
ref={fileInputRef}
type="file"
accept="image/*"
onChange={handleFileSelect}
className="hidden"
display="none"
/>
{avatarInfo.isValidating ? (
<Stack align="center" center>
<Icon icon={Loader2} size={10} color="text-primary-blue" className="animate-spin mb-3" />
<Stack alignItems="center" center>
<Icon icon={Loader2} size={10} color="text-primary-blue" animate="spin" mb={3} />
<Text size="sm" color="text-gray-400">Validating photo...</Text>
</Stack>
) : avatarInfo.facePhoto ? (
<Stack align="center" center>
<Box width={24} height={24} rounded="xl" className="overflow-hidden mb-3 ring-2 ring-performance-green">
<Stack alignItems="center" center>
<Box w="24" h="24" rounded="xl" overflow="hidden" mb={3} ring="ring-2 ring-performance-green">
<Image
src={avatarInfo.facePhoto}
alt="Your photo"
width={96}
height={96}
className="w-full h-full object-cover"
objectFit="cover"
fullWidth
fullHeight
/>
</Box>
<Text size="sm" color="text-performance-green" block>
<Stack direction="row" align="center" gap={1}>
<Stack flexDirection="row" alignItems="center" gap={1}>
<Icon icon={Check} size={4} />
Photo uploaded
</Stack>
@@ -159,8 +166,8 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
<Text size="xs" color="text-gray-500" mt={1}>Click to change</Text>
</Stack>
) : (
<Stack align="center" center>
<Icon icon={Upload} size={10} color="text-gray-500" className="mb-3" />
<Stack alignItems="center" center>
<Icon icon={Upload} size={10} color="text-gray-500" mb={3} />
<Text size="sm" color="text-gray-300" weight="medium" block mb={1}>
Drop your photo here or click to upload
</Text>
@@ -172,8 +179,8 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</Box>
{/* Preview area */}
<Stack width={32} align="center" center>
<Surface variant="muted" rounded="xl" border width={24} height={24} display="flex" center className="overflow-hidden">
<Stack w="32" alignItems="center" center>
<Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden">
{(() => {
const selectedAvatarUrl =
avatarInfo.selectedAvatarIndex !== null
@@ -183,7 +190,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
return <Icon icon={User} size={8} color="text-gray-600" />;
}
return (
<Image src={selectedAvatarUrl} alt="Selected avatar" width={96} height={96} className="w-full h-full object-cover" />
<Image src={selectedAvatarUrl} alt="Selected avatar" width={96} height={96} objectFit="cover" fullWidth fullHeight />
);
})()}
</Surface>
@@ -191,34 +198,38 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</Stack>
</Stack>
{errors.facePhoto && (
<Text size="sm" color="text-error-red" block mt={2}>{errors.facePhoto}</Text>
<Text size="sm" color="text-racing-red" block mt={2}>{errors.facePhoto}</Text>
)}
</Box>
{/* Suit Color Selection */}
<Box>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
<Stack direction="row" align="center" gap={2}>
<Stack flexDirection="row" alignItems="center" gap={2}>
<Icon icon={Palette} size={4} />
Racing Suit Color
</Stack>
</Text>
<Stack direction="row" wrap gap={2}>
<Stack flexDirection="row" flexWrap="wrap" gap={2}>
{SUIT_COLORS.map((color) => (
<Button
key={color.value}
type="button"
onClick={() => setAvatarInfo({ ...avatarInfo, suitColor: color.value })}
className={`relative w-10 h-10 rounded-lg transition-all p-0 ${
avatarInfo.suitColor === color.value
? 'ring-2 ring-primary-blue ring-offset-2 ring-offset-iron-gray scale-110'
: 'hover:scale-105'
}`}
style={{ backgroundColor: color.hex }}
rounded="lg"
transition
p={0}
w="10"
h="10"
position="relative"
ring={avatarInfo.suitColor === color.value ? 'ring-2 ring-primary-blue ring-offset-2 ring-offset-iron-gray' : ''}
transform={avatarInfo.suitColor === color.value ? 'scale(1.1)' : ''}
hoverScale={avatarInfo.suitColor !== color.value}
bg={color.hex}
title={color.label}
>
{avatarInfo.suitColor === color.value && (
<Icon icon={Check} size={5} className={
<Icon icon={Check} size={5} color={
['white', 'yellow', 'cyan'].includes(color.value) ? 'text-gray-800' : 'text-white'
} />
)}
@@ -239,7 +250,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
onClick={onGenerateAvatars}
disabled={avatarInfo.isGenerating || avatarInfo.isValidating}
fullWidth
icon={avatarInfo.isGenerating ? <Icon icon={Loader2} size={5} className="animate-spin" /> : <Icon icon={Sparkles} size={5} />}
icon={avatarInfo.isGenerating ? <Icon icon={Loader2} size={5} animate="spin" /> : <Icon icon={Sparkles} size={5} />}
>
{avatarInfo.isGenerating ? 'Generating your avatars...' : (avatarInfo.generatedAvatars.length > 0 ? 'Regenerate Avatars' : 'Generate Racing Avatars')}
</Button>
@@ -258,15 +269,22 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
key={index}
type="button"
onClick={() => setAvatarInfo({ ...avatarInfo, selectedAvatarIndex: index })}
className={`relative aspect-square rounded-xl overflow-hidden border-2 transition-all p-0 ${
avatarInfo.selectedAvatarIndex === index
? 'border-primary-blue ring-2 ring-primary-blue/30 scale-105'
: 'border-charcoal-outline hover:border-gray-500'
}`}
position="relative"
rounded="xl"
overflow="hidden"
border
borderWidth="2px"
transition
p={0}
borderColor={avatarInfo.selectedAvatarIndex === index ? 'border-primary-blue' : 'border-charcoal-outline'}
ring={avatarInfo.selectedAvatarIndex === index ? 'ring-2 ring-primary-blue/30' : ''}
transform={avatarInfo.selectedAvatarIndex === index ? 'scale(1.05)' : ''}
hoverBorderColor={avatarInfo.selectedAvatarIndex !== index ? 'border-gray-500' : ''}
aspectRatio="1/1"
>
<Image src={url} alt={`Avatar option ${index + 1}`} width={200} height={200} className="w-full h-full object-cover" />
<Image src={url} alt={`Avatar option ${index + 1}`} width={200} height={200} objectFit="cover" fullWidth fullHeight />
{avatarInfo.selectedAvatarIndex === index && (
<Box position="absolute" top={2} right={2} width={6} height={6} rounded="full" backgroundColor="primary-blue" display="flex" center>
<Box position="absolute" top={2} right={2} w="6" h="6" rounded="full" bg="bg-primary-blue" display="flex" center>
<Icon icon={Check} size={4} color="text-white" />
</Box>
)}

5
apps/website/components/onboarding/OnboardingCardAccent.tsx
View File

@@ -1,5 +0,0 @@
export function OnboardingCardAccent() {
return (
<div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
);
}

11
apps/website/components/onboarding/OnboardingContainer.tsx
View File

@@ -1,11 +0,0 @@
interface OnboardingContainerProps {
children: React.ReactNode;
}
export function OnboardingContainer({ children }: OnboardingContainerProps) {
return (
<div className="max-w-3xl mx-auto px-4 py-10">
{children}
</div>
);
}

12
apps/website/components/onboarding/OnboardingError.tsx
View File

@@ -1,12 +0,0 @@
interface OnboardingErrorProps {
message: string;
}
export function OnboardingError({ message }: OnboardingErrorProps) {
return (
<div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/30">
<span className="text-red-400 flex-shrink-0 mt-0.5">⚠</span>
<p className="text-sm text-red-400">{message}</p>
</div>
);
}

12
apps/website/components/onboarding/OnboardingForm.tsx
View File

@@ -1,12 +0,0 @@
interface OnboardingFormProps {
children: React.ReactNode;
onSubmit: (e: React.FormEvent) => void | Promise<void>;
}
export function OnboardingForm({ children, onSubmit }: OnboardingFormProps) {
return (
<form onSubmit={onSubmit} className="relative">
{children}
</form>
);
}

17
apps/website/components/onboarding/OnboardingHeader.tsx
View File

@@ -1,17 +0,0 @@
interface OnboardingHeaderProps {
title: string;
subtitle: string;
emoji: string;
}
export function OnboardingHeader({ title, subtitle, emoji }: OnboardingHeaderProps) {
return (
<div className="text-center mb-8">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
<span className="text-2xl">{emoji}</span>
</div>
<h1 className="text-4xl font-bold mb-2">{title}</h1>
<p className="text-gray-400">{subtitle}</p>
</div>
);
}

7
apps/website/components/onboarding/OnboardingHelpText.tsx
View File

@@ -1,7 +0,0 @@
export function OnboardingHelpText() {
return (
<p className="text-center text-xs text-gray-500 mt-6">
Your avatar will be AI-generated based on your photo and chosen suit color
</p>
);
}

58
apps/website/components/onboarding/OnboardingNavigation.tsx
View File

@@ -1,58 +0,0 @@
import Button from '@/ui/Button';
interface OnboardingNavigationProps {
onBack: () => void;
onNext?: () => void;
isLastStep: boolean;
canSubmit: boolean;
loading: boolean;
}
export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
return (
<div className="mt-8 flex items-center justify-between">
<Button
type="button"
variant="secondary"
onClick={onBack}
disabled={loading}
className="flex items-center gap-2"
>
<span>←</span>
Back
</Button>
{!isLastStep ? (
<Button
type="button"
variant="primary"
onClick={onNext}
disabled={loading}
className="flex items-center gap-2"
>
Continue
<span>→</span>
</Button>
) : (
<Button
type="submit"
variant="primary"
disabled={loading || !canSubmit}
className="flex items-center gap-2"
>
{loading ? (
<>
<span className="animate-spin">⟳</span>
Creating Profile...
</>
) : (
<>
<span>✓</span>
Complete Setup
</>
)}
</Button>
)}
</div>
);
}

14
apps/website/components/onboarding/OnboardingWizard.tsx
View File

@@ -1,12 +1,12 @@
'use client';
import { OnboardingCardAccent } from '@/components/onboarding/OnboardingCardAccent';
import { OnboardingContainer } from '@/components/onboarding/OnboardingContainer';
import { OnboardingError } from '@/components/onboarding/OnboardingError';
import { OnboardingForm } from '@/components/onboarding/OnboardingForm';
import { OnboardingHeader } from '@/components/onboarding/OnboardingHeader';
import { OnboardingHelpText } from '@/components/onboarding/OnboardingHelpText';
import { OnboardingNavigation } from '@/components/onboarding/OnboardingNavigation';
import { OnboardingCardAccent } from '@/ui/OnboardingCardAccent';
import { OnboardingContainer } from '@/ui/OnboardingContainer';
import { OnboardingError } from '@/ui/OnboardingError';
import { OnboardingForm } from '@/ui/OnboardingForm';
import { OnboardingHeader } from '@/ui/OnboardingHeader';
import { OnboardingHelpText } from '@/ui/OnboardingHelpText';
import { OnboardingNavigation } from '@/ui/OnboardingNavigation';
import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
import { Card } from '@/ui/Card';
import { StepIndicator } from '@/ui/StepIndicator';

8
apps/website/components/onboarding/PersonalInfoStep.tsx
View File

@@ -130,7 +130,7 @@ export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loadin
Timezone
</Text>
<Box position="relative">
<Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }} zIndex={10}>
<Box position="absolute" left={3} top="50%" transform="translateY(-50%)" zIndex={10}>
<Icon icon={Clock} size={4} color="text-gray-500" />
</Box>
<Select
@@ -143,11 +143,11 @@ export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loadin
{ value: '', label: 'Select timezone' },
...TIMEZONES
]}
className="pl-10"
pl={10}
disabled={loading}
/>
<Box position="absolute" right={3} top="50%" style={{ transform: 'translateY(-50%)' }} pointerEvents="none">
<Icon icon={ChevronRight} size={4} color="text-gray-500" className="rotate-90" />
<Box position="absolute" right={3} top="50%" transform="translateY(-50%)" pointerEvents="none">
<Icon icon={ChevronRight} size={4} color="text-gray-500" transform="rotate(90deg)" />
</Box>
</Box>
</Box>