website refactor
This commit is contained in:
@@ -11,7 +11,6 @@ import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionM
|
||||
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
|
||||
import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
|
||||
import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
|
||||
import { MockupStack } from '@/ui/MockupStack';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Box } from '@/ui/Box';
|
||||
@@ -65,7 +64,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
description={
|
||||
<Stack gap={4}>
|
||||
<Text>
|
||||
Your races, your seasons, your progress — finally in one place.
|
||||
Your races, your seasons, your progress — finally in one place.
|
||||
</Text>
|
||||
<Stack gap={3}>
|
||||
<FeatureItem text="Lifetime stats and season history across all your leagues" />
|
||||
@@ -93,7 +92,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
Every race you run stays with you.
|
||||
</Text>
|
||||
<Stack gap={3}>
|
||||
<ResultItem text="Your stats, your team, your story — all connected" color="#ef4444" />
|
||||
<ResultItem text="Your stats, your team, your story — all connected" color="#ef4444" />
|
||||
<ResultItem text="One race result updates your profile, team points, rating, and season history" color="#ef4444" />
|
||||
<ResultItem text="No more fragmented data across spreadsheets and forums" color="#ef4444" />
|
||||
</Stack>
|
||||
@@ -102,7 +101,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
</Text>
|
||||
</Stack>
|
||||
}
|
||||
mockup={<MockupStack index={1}><RaceHistoryMockup /></MockupStack>}
|
||||
mockup={<RaceHistoryMockup />}
|
||||
layout="text-right"
|
||||
/>
|
||||
|
||||
@@ -112,7 +111,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
description={
|
||||
<Stack gap={4}>
|
||||
<Text size="sm">
|
||||
Setting up league races used to mean clicking through iRacing's wizard 20 times.
|
||||
Setting up league races used to mean clicking through iRacing's wizard 20 times.
|
||||
</Text>
|
||||
<Stack gap={3}>
|
||||
<StepItem step={1} text="Our companion app syncs with your league schedule" />
|
||||
@@ -135,10 +134,10 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
description={
|
||||
<Stack gap={4}>
|
||||
<Text size="sm">
|
||||
Right now, we're focused on making iRacing league racing better.
|
||||
Right now, we're focused on making iRacing league racing better.
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
But sims come and go. Your leagues, your teams, your rating — those stay.
|
||||
But sims come and go. Your leagues, your teams, your rating — those stay.
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
GridPilot is built to outlast any single platform.
|
||||
@@ -168,7 +167,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading level={3} style={{ fontSize: '0.875rem' }}>Featured leagues</Heading>
|
||||
<Heading level={3} fontSize="sm">Featured leagues</Heading>
|
||||
<Link href={routes.public.leagues}>
|
||||
<Button variant="secondary" size="sm">
|
||||
View all
|
||||
@@ -179,12 +178,12 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
{viewData.topLeagues.slice(0, 4).map((league) => (
|
||||
<Box key={league.id}>
|
||||
<Stack direction="row" align="start" gap={3}>
|
||||
<Surface variant="muted" rounded="md" border padding={1} style={{ width: '2.5rem', height: '2.5rem', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderColor: 'rgba(59, 130, 246, 0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Surface variant="muted" rounded="md" border padding={1} w="2.5rem" h="2.5rem" bg="bg-blue-500/10" borderColor="border-blue-500/30" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="xs" weight="bold" color="text-primary-blue">
|
||||
{league.name.split(' ').map((word) => word[0]).join('').slice(0, 3).toUpperCase()}
|
||||
</Text>
|
||||
</Surface>
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Box flex={1} minWidth="0">
|
||||
<Text color="text-white" block truncate>{league.name}</Text>
|
||||
<Text size="xs" color="text-gray-400" block mt={1} truncate>{league.description}</Text>
|
||||
</Box>
|
||||
@@ -199,7 +198,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading level={3} style={{ fontSize: '0.875rem' }}>Teams on the grid</Heading>
|
||||
<Heading level={3} fontSize="sm">Teams on the grid</Heading>
|
||||
<Link href={routes.public.teams}>
|
||||
<Button variant="secondary" size="sm">
|
||||
Browse teams
|
||||
@@ -210,16 +209,18 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
{viewData.teams.slice(0, 4).map(team => (
|
||||
<Box key={team.id}>
|
||||
<Stack direction="row" align="start" gap={3}>
|
||||
<Surface variant="muted" rounded="md" border padding={1} style={{ width: '2.5rem', height: '2.5rem', overflow: 'hidden', backgroundColor: '#262626' }}>
|
||||
<Surface variant="muted" rounded="md" border padding={1} w="2.5rem" h="2.5rem" overflow="hidden" bg="bg-neutral-800">
|
||||
<Image
|
||||
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
width={40}
|
||||
height={40}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
objectFit="cover"
|
||||
fullWidth
|
||||
fullHeight
|
||||
/>
|
||||
</Surface>
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Box flex={1} minWidth="0">
|
||||
<Text color="text-white" block truncate>{team.name}</Text>
|
||||
<Text size="xs" color="text-gray-400" block mt={1} truncate>{team.description}</Text>
|
||||
</Box>
|
||||
@@ -234,7 +235,7 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading level={3} style={{ fontSize: '0.875rem' }}>Upcoming races</Heading>
|
||||
<Heading level={3} fontSize="sm">Upcoming races</Heading>
|
||||
<Link href={routes.public.races}>
|
||||
<Button variant="secondary" size="sm">
|
||||
View schedule
|
||||
@@ -250,11 +251,11 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
{viewData.upcomingRaces.map(race => (
|
||||
<Box key={race.id}>
|
||||
<Stack direction="row" align="start" justify="between" gap={3}>
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Box flex={1} minWidth="0">
|
||||
<Text color="text-white" block truncate>{race.track}</Text>
|
||||
<Text size="xs" color="text-gray-400" block mt={1} truncate>{race.car}</Text>
|
||||
</Box>
|
||||
<Text size="xs" color="text-gray-500" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Text size="xs" color="text-gray-500">
|
||||
{race.formattedDate}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user