website refactor

apps/website/components/home/HomeFeatureDescription.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+
+interface HomeFeatureDescriptionProps {
+  lead: string;
+  items: string[];
+  quote?: string;
+  accentColor?: 'primary' | 'aqua' | 'amber' | 'gray';
+}
+
+/**
+ * HomeFeatureDescription - A semantic component for feature descriptions on the home page.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeFeatureDescription({
+  lead,
+  items,
+  quote,
+  accentColor = 'primary',
+}: HomeFeatureDescriptionProps) {
+  const borderColor = {
+    primary: 'primary-accent',
+    aqua: 'telemetry-aqua',
+    amber: 'warning-amber',
+    gray: 'border-gray',
+  }[accentColor];
+
+  const bgColor = {
+    primary: 'primary-accent/5',
+    aqua: 'telemetry-aqua/5',
+    amber: 'warning-amber/5',
+    gray: 'white/5',
+  }[accentColor];
+
+  return (
+    <Stack gap={6}>
+      <Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
+        {lead}
+      </Text>
+      <Box as="ul" display="flex" flexDirection="col" gap={2}>
+        {items.map((item, index) => (
+          <Box as="li" key={index} display="flex" alignItems="start" gap={2}>
+            <Text color="text-primary-accent">•</Text>
+            <Text size="sm" color="text-gray-500">{item}</Text>
+          </Box>
+        ))}
+      </Box>
+      {quote && (
+        <Box borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
+          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
+            {quote}
+          </Text>
+        </Box>
+      )}
+    </Stack>
+  );
+}

apps/website/components/home/HomeFeatureSection.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { Panel } from '@/ui/Panel';
+import { Glow } from '@/ui/Glow';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Section } from '@/ui/Section';
+
+interface HomeFeatureSectionProps {
+  heading: string;
+  description: React.ReactNode;
+  mockup: React.ReactNode;
+  layout: 'text-left' | 'text-right';
+  accentColor?: 'primary' | 'aqua' | 'amber';
+}
+
+/**
+ * HomeFeatureSection - A semantic section highlighting a feature.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeFeatureSection({
+  heading,
+  description,
+  mockup,
+  layout,
+  accentColor = 'primary',
+}: HomeFeatureSectionProps) {
+  const accentBorderColor = {
+    primary: 'primary-accent/40',
+    aqua: 'telemetry-aqua/40',
+    amber: 'warning-amber/40',
+  }[accentColor];
+
+  const accentBgColor = {
+    primary: 'primary-accent',
+    aqua: 'telemetry-aqua',
+    amber: 'warning-amber',
+  }[accentColor];
+
+  const glowColor = ({
+    primary: 'primary',
+    aqua: 'aqua',
+    amber: 'amber',
+  }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
+
+  return (
+    <Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
+      <Glow 
+        color={glowColor} 
+        size="lg" 
+        position={layout === 'text-left' ? 'bottom-left' : 'top-right'} 
+        opacity={0.02} 
+      />
+      
+      <Container>
+        <Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 20 }} alignItems="center">
+          {/* Text Content */}
+          <Box display="flex" flexDirection="col" gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
+            <Box display="flex" flexDirection="col" gap={4}>
+              <Box w="12" h="1" bg={accentBgColor} />
+              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
+                {heading}
+              </Heading>
+            </Box>
+            <Box color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
+              {description}
+            </Box>
+          </Box>
+
+          {/* Mockup Panel */}
+          <Box order={{ lg: layout === 'text-right' ? 1 : 2 }}>
+            <Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
+              <Box bg="graphite-black" minHeight="300px" display="flex" alignItems="center" justifyContent="center">
+                {mockup}
+              </Box>
+              {/* Decorative corner accents */}
+              <Box position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4} />
+              <Box position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4} />
+            </Panel>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+}

apps/website/components/home/HomeFooterCTA.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Glow } from '@/ui/Glow';
+import { Icon } from '@/ui/Icon';
+import { DiscordIcon } from '@/ui/icons/DiscordIcon';
+import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Section } from '@/ui/Section';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+
+export function HomeFooterCTA() {
+  const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
+
+  return (
+    <Section variant="dark" py={32} borderBottom borderColor="border-gray/50" overflow="hidden" position="relative">
+      <Glow color="primary" size="xl" position="center" opacity={0.05} />
+      
+      <Container>
+        <Box position="relative" overflow="hidden" bg="panel-gray/40" border borderColor="border-gray" p={{ base: 8, md: 12 }}>
+          {/* Discord brand accent */}
+          <Box position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent" />
+          
+          <Stack align="center" gap={12} center>
+            {/* Header */}
+            <Stack align="center" gap={6}>
+              <Box position="relative" display="flex" alignItems="center" justifyContent="center" w={{ base: 16, md: 20 }} h={{ base: 16, md: 20 }} bg="primary-accent/10" border borderColor="primary-accent/30">
+                <DiscordIcon color="text-primary-accent" size={40} />
+                <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
+                <Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
+              </Box>
+              
+              <Stack gap={4} align="center">
+                <Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
+                  Join the Grid on Discord
+                </Heading>
+                <Box w="16" h="1" bg="primary-accent" />
+              </Stack>
+            </Stack>
+
+            {/* Personal message */}
+            <Box maxWidth="2xl" mx="auto" textAlign="center">
+              <Stack gap={6}>
+                <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
+                  GridPilot is a <Text as="span" color="text-white" weight="bold">solo developer project</Text> built for the community.
+                </Text>
+                <Text size="base" color="text-gray-400" weight="normal" leading="relaxed">
+                  We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
+                </Text>
+              </Stack>
+            </Box>
+
+            {/* Benefits grid */}
+            <Box maxWidth="4xl" mx="auto" fullWidth>
+              <Grid cols={1} mdCols={2} gap={6}>
+                <BenefitItem 
+                  icon={MessageSquare} 
+                  title="Share your pain points" 
+                  description="Tell us what frustrates you about league racing today." 
+                />
+                <BenefitItem 
+                  icon={Lightbulb} 
+                  title="Shape the product" 
+                  description="Your ideas directly influence our roadmap." 
+                />
+                <BenefitItem 
+                  icon={Users} 
+                  title="Connect with racers" 
+                  description="Join a community of like-minded competitive drivers." 
+                />
+                <BenefitItem 
+                  icon={Code} 
+                  title="Early Access" 
+                  description="Test new features before they go public." 
+                />
+              </Grid>
+            </Box>
+
+            {/* CTA Button */}
+            <Stack gap={6} pt={4} align="center">
+              <Button
+                as="a"
+                href={discordUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                variant="primary"
+                size="lg"
+                px={16}
+                py={4}
+                h="auto"
+                icon={<DiscordIcon size={24} />}
+              >
+                Join Discord
+              </Button>
+              
+              <Box border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
+                <Text size="xs" color="text-primary-accent" weight="bold" font="mono" uppercase letterSpacing="widest">
+                  Early Alpha Access Available
+                </Text>
+              </Box>
+            </Stack>
+          </Stack>
+        </Box>
+      </Container>
+    </Section>
+  );
+}
+
+function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
+  return (
+    <Box display="flex" alignItems="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" hoverBorderColor="primary-accent/30" transition group>
+      <Box display="flex" alignItems="center" justifyContent="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" groupHoverBorderColor="primary-accent/30" transition>
+        <Icon icon={icon} size={5} color="text-primary-accent" />
+      </Box>
+      <Stack gap={2}>
+        <Text size="base" weight="bold" color="text-white" letterSpacing="wide">{title}</Text>
+        <Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
+      </Stack>
+    </Box>
+  );
+}

apps/website/components/home/HomeHeader.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Glow } from '@/ui/Glow';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+
+interface HomeHeaderProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  primaryAction: {
+    label: string;
+    href: string;
+  };
+  secondaryAction: {
+    label: string;
+    href: string;
+  };
+}
+
+/**
+ * HomeHeader - Semantic hero section for the landing page.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function HomeHeader({
+  title,
+  subtitle,
+  description,
+  primaryAction,
+  secondaryAction,
+}: HomeHeaderProps) {
+  return (
+    <Box as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
+      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
+      
+      <Container>
+        <Box maxWidth="4xl">
+          <Box display="flex" alignItems="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
+            <Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
+              {subtitle}
+            </Text>
+          </Box>
+          
+          <Heading 
+            level={1} 
+            fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }} 
+            weight="bold" 
+            color="text-white" 
+            letterSpacing="tighter" 
+            lineHeight="0.9" 
+            mb={8}
+          >
+            {title}
+          </Heading>
+          
+          <Box borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
+            <Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
+              {description}
+            </Text>
+          </Box>
+
+          <Box display="flex" flexDirection={{ base: 'col', sm: 'row' }} gap={4}>
+            <Button
+              as="a"
+              href={primaryAction.href}
+              variant="primary"
+              h="14"
+              px={12}
+              fontSize="xs"
+            >
+              {primaryAction.label}
+            </Button>
+            <Button
+              as="a"
+              href={secondaryAction.href}
+              variant="secondary"
+              h="14"
+              px={12}
+              fontSize="xs"
+              bg="transparent"
+              borderColor="border-gray"
+              hoverBorderColor="primary-accent/50"
+            >
+              {secondaryAction.label}
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}

apps/website/components/home/HomeStatsStrip.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { MetricCard } from '@/ui/MetricCard';
+import { Activity, Users, Trophy, Calendar } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+
+/**
+ * HomeStatsStrip - A thin strip showing some status or quick info.
+ * Part of the "Telemetry-workspace" feel.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeStatsStrip() {
+  return (
+    <Box bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
+      <Container>
+        <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={0} borderLeft borderRight borderColor="border-gray/30">
+          <MetricCard 
+            label="Active Drivers" 
+            value="1,284" 
+            icon={Users} 
+            trend={{ value: 12, isPositive: true }}
+            border={false}
+            bg="transparent"
+          />
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Live Sessions" 
+              value="42" 
+              icon={Activity} 
+              color="text-telemetry-aqua"
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Total Races" 
+              value="15,402" 
+              icon={Trophy} 
+              color="text-warning-amber"
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+          <Box borderLeft borderColor="border-gray/30">
+            <MetricCard 
+              label="Next Event" 
+              value="14:00" 
+              icon={Calendar} 
+              border={false}
+              bg="transparent"
+            />
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}

apps/website/components/home/LeagueSummaryPanel.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { LeagueCard } from '@/ui/LeagueCard';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+
+interface League {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface LeagueSummaryPanelProps {
+  leagues: League[];
+}
+
+/**
+ * LeagueSummaryPanel - Semantic section for featured leagues.
+ */
+export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          FEATURED LEAGUES
+        </Heading>
+        <Link 
+          href={routes.public.leagues}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          VIEW ALL →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={4}>
+        {leagues.slice(0, 2).map((league) => (
+          <LeagueCard
+            key={league.id}
+            name={league.name}
+            description={league.description}
+            coverUrl="/images/ff1600.jpeg"
+            slotLabel="Drivers"
+            usedSlots={18}
+            maxSlots={24}
+            fillPercentage={75}
+            hasOpenSlots={true}
+            openSlotsCount={6}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}

apps/website/components/home/QuickLinksPanel.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Plus, Search, Shield, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Text } from '@/ui/Text';
+
+/**
+ * QuickLinksPanel - Semantic quick actions bar.
+ * Replaces HomeQuickActions with a more semantic implementation.
+ */
+export function QuickLinksPanel() {
+  const links = [
+    { label: 'Find League', icon: Search, href: routes.public.leagues },
+    { label: 'Join Team', icon: Users, href: routes.public.teams },
+    { label: 'Create Race', icon: Plus, href: routes.protected.dashboard },
+    { label: 'Rulebooks', icon: Shield, href: '#' },
+  ];
+
+  return (
+    <Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
+      <Container>
+        <Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
+          {links.map((link) => (
+            <Button
+              key={link.label}
+              as="a"
+              href={link.href}
+              variant="secondary"
+              display="flex"
+              alignItems="center"
+              gap={3}
+              px={6}
+              bg="graphite-black"
+              borderColor="border-gray/50"
+              hoverBorderColor="primary-accent/50"
+              transition
+              group
+            >
+              <Icon 
+                icon={link.icon} 
+                size={4} 
+                color="text-gray-500"
+                groupHoverTextColor="primary-accent"
+                transition
+              />
+              <Text size="xs" weight="bold" uppercase letterSpacing="widest">
+                {link.label}
+              </Text>
+            </Button>
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+}

apps/website/components/home/RecentRacesPanel.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { UpcomingRaceItem } from '@/ui/UpcomingRaceItem';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
+
+interface Race {
+  id: string;
+  track: string;
+  car: string;
+  formattedDate: string;
+}
+
+interface RecentRacesPanelProps {
+  races: Race[];
+}
+
+/**
+ * RecentRacesPanel - Semantic section for upcoming/recent races.
+ */
+export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          UPCOMING RACES
+        </Heading>
+        <Link 
+          href={routes.public.races}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          FULL SCHEDULE →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={3}>
+        {races.length === 0 ? (
+          <Box py={12} border borderStyle="dashed" borderColor="border-gray/30" bg="graphite-black/50" display="flex" alignItems="center" justifyContent="center">
+            <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
+              No races scheduled
+            </Text>
+          </Box>
+        ) : (
+          races.slice(0, 3).map((race) => (
+            <UpcomingRaceItem
+              key={race.id}
+              track={race.track}
+              car={race.car}
+              formattedDate={race.formattedDate}
+              formattedTime="20:00 GMT"
+              isMyLeague={false}
+            />
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}

apps/website/components/home/TeamSummaryPanel.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+import { TeamCard } from '@/ui/TeamCard';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+
+interface Team {
+  id: string;
+  name: string;
+  description: string;
+  logoUrl?: string;
+}
+
+interface TeamSummaryPanelProps {
+  teams: Team[];
+}
+
+/**
+ * TeamSummaryPanel - Semantic section for teams.
+ */
+export function TeamSummaryPanel({ teams }: TeamSummaryPanelProps) {
+  return (
+    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
+          TEAMS ON THE GRID
+        </Heading>
+        <Link 
+          href={routes.public.teams}
+          size="xs"
+          weight="bold"
+          letterSpacing="widest"
+          variant="primary"
+          hoverColor="text-white"
+          transition
+        >
+          BROWSE TEAMS →
+        </Link>
+      </Box>
+
+      <Box display="flex" flexDirection="col" gap={4}>
+        {teams.slice(0, 2).map((team) => (
+          <TeamCard
+            key={team.id}
+            name={team.name}
+            description={team.description}
+            logo={team.logoUrl}
+            memberCount={12}
+            isRecruiting={true}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}