website refactor

apps/website/components/feed/FeedLayout.tsx

@@ -2,6 +2,12 @@ import { Card } from '@/ui/Card';
 import { FeedList } from '@/components/feed/FeedList';
 import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
 import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
+import { Section } from '@/ui/Section';
+import { Container } from '@/ui/Container';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
 
 interface FeedItemData {
   id: string;
@@ -41,26 +47,28 @@ export function FeedLayout({
   latestResults
 }: FeedLayoutProps) {
   return (
-    <section className="max-w-7xl mx-auto mt-16 mb-20">
-      <div className="flex flex-col gap-8 lg:grid lg:grid-cols-3">
-        <div className="lg:col-span-2 space-y-4">
-          <div className="flex items-baseline justify-between gap-4">
-            <div>
-              <h2 className="text-2xl font-semibold text-white">Activity</h2>
-              <p className="text-sm text-gray-400">
-                See what your friends and leagues are doing right now.
-              </p>
-            </div>
-          </div>
-          <Card className="bg-iron-gray/80">
-            <FeedList items={feedItems} />
-          </Card>
-        </div>
-        <aside className="space-y-6">
-          <UpcomingRacesSidebar races={upcomingRaces} />
-          <LatestResultsSidebar results={latestResults} />
-        </aside>
-      </div>
-    </section>
+    <Section className="mt-16 mb-20">
+      <Container>
+        <Grid cols={1} lgCols={3} gap={8}>
+          <Stack gap={4} className="lg:col-span-2">
+            <Stack direction="row" align="baseline" justify="between" gap={4}>
+              <Stack>
+                <Heading level={2} weight="semibold" color="text-white">Activity</Heading>
+                <Text size="sm" color="text-gray-400">
+                  See what your friends and leagues are doing right now.
+                </Text>
+              </Stack>
+            </Stack>
+            <Card className="bg-iron-gray/80">
+              <FeedList items={feedItems} />
+            </Card>
+          </Stack>
+          <Stack as="aside" gap={6}>
+            <UpcomingRacesSidebar races={upcomingRaces} />
+            <LatestResultsSidebar results={latestResults} />
+          </Stack>
+        </Grid>
+      </Container>
+    </Section>
   );
-}
+}