website refactor

apps/website/components/feed/RecentActivity.tsx

@@ -6,6 +6,8 @@ import { ActiveDriverCard } from '@/ui/ActiveDriverCard';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { SectionHeader } from '@/ui/SectionHeader';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { Grid } from '@/ui/Grid';
 import { Activity } from 'lucide-react';
 import React from 'react';
 
@@ -25,7 +27,7 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
   const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
 
   return (
-    <div style={{ marginBottom: '2.5rem' }}>
+    <Box marginBottom={10}>
       <SectionHeader
         title="Active Drivers"
         description="Currently competing in leagues"
@@ -33,7 +35,7 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
         actions={<Icon icon={Activity} size={5} intent="success" />}
       />
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gap: '0.75rem' }}>
+      <Grid cols={{ base: 2, sm: 3, md: 4, lg: 6 }} gap={3}>
         {activeDrivers.map((driver) => {
           return (
             <ActiveDriverCard
@@ -46,7 +48,7 @@ export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps)
             />
           );
         })}
-      </div>
-    </div>
+      </Grid>
+    </Box>
   );
 }