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-14 10:51:05 +01:00
parent 4522d41aef
commit 0d89ad027e
291 changed files with 6887 additions and 3685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,25 +86,32 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
};
return (
// eslint-disable-next-line gridpilot-rules/no-raw-html-in-app
<div className="space-y-6">
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div>
<Heading level={2} className="text-xl mb-1 flex items-center gap-2">
<Camera className="w-5 h-5 text-primary-blue" />
Create Your Racing Avatar
</Heading>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-sm text-gray-400">
Upload a photo and we will generate a unique racing avatar for you
</p>
</div>
{/* Photo Upload */}
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<label className="block text-sm font-medium text-gray-300 mb-3">
Upload Your Photo *
</label>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div className="flex gap-6">
{/* Upload Area */}
<div
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div
onClick={() => fileInputRef.current?.click()}
className={`relative flex-1 flex flex-col items-center justify-center p-6 rounded-xl border-2 border-dashed cursor-pointer transition-all ${
avatarInfo.facePhoto
@@ -125,10 +132,12 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
{avatarInfo.isValidating ? (
<>
<Loader2 className="w-10 h-10 text-primary-blue animate-spin mb-3" />
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-sm text-gray-400">Validating photo...</p>
</>
) : avatarInfo.facePhoto ? (
<>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div className="w-24 h-24 rounded-xl overflow-hidden mb-3 ring-2 ring-performance-green">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
@@ -137,18 +146,22 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
className="w-full h-full object-cover"
/>
</div>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-sm text-performance-green flex items-center gap-1">
<Check className="w-4 h-4" />
Photo uploaded
</p>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-xs text-gray-500 mt-1">Click to change</p>
</>
) : (
<>
<Upload className="w-10 h-10 text-gray-500 mb-3" />
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-sm text-gray-300 font-medium mb-1">
Drop your photo here or click to upload
</p>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-xs text-gray-500">
JPEG or PNG, max 5MB
</p>
@@ -157,7 +170,9 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</div>
{/* Preview area */}
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div className="w-32 flex flex-col items-center justify-center">
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div className="w-24 h-24 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center overflow-hidden">
{(() => {
const selectedAvatarUrl =
@@ -175,6 +190,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
);
})()}
</div>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="text-xs text-gray-500 mt-2 text-center">Your avatar</p>
</div>
</div>
@@ -184,11 +200,14 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</div>
{/* Suit Color Selection */}
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<label className="block text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
<Palette className="w-4 h-4" />
Racing Suit Color
</label>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div className="flex flex-wrap gap-2">
{SUIT_COLORS.map((color) => (
<button
@@ -211,6 +230,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
</button>
))}
</div>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<p className="mt-2 text-xs text-gray-500">
Selected: {SUIT_COLORS.find(c => c.value === avatarInfo.suitColor)?.label}
</p>
@@ -244,9 +264,11 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
{/* Generated Avatars */}
{avatarInfo.generatedAvatars.length > 0 && (
<div>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<label className="block text-sm font-medium text-gray-300 mb-3">
Choose Your Avatar *
</label>
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
<div className="grid grid-cols-3 gap-4">
{avatarInfo.generatedAvatars.map((url, index) => (
<button