website refactor

apps/website/ui/Podium.tsx

@@ -0,0 +1,70 @@
+
+
+import { Trophy } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface PodiumProps {
+  title: string;
+  children: ReactNode;
+}
+
+export function Podium({ title, children }: PodiumProps) {
+  return (
+    <Box bg="bg-iron-gray/50" rounded="2xl" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} p={8} mb={10}>
+      <Box display="flex" justifyContent="center" mb={8}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={Trophy} size={6} color="var(--warning-amber)" />
+          <Heading level={2}>{title}</Heading>
+        </Stack>
+      </Box>
+
+      <Stack direction="row" align="end" justify="center" gap={8}>
+        {children}
+      </Stack>
+    </Box>
+  );
+}
+
+interface PodiumItemProps {
+  position: number;
+  height: string;
+  cardContent: ReactNode;
+  bgColor: string;
+  positionColor: string;
+}
+
+export function PodiumItem({
+  position,
+  height,
+  cardContent,
+  bgColor,
+  positionColor,
+}: PodiumItemProps) {
+  return (
+    <Stack align="center">
+      {cardContent}
+
+      {/* Podium stand */}
+      <Box
+        bg={bgColor}
+        h={height}
+        border
+        style={{ borderColor: 'rgba(38, 38, 38, 0.8)', borderTopLeftRadius: '0.5rem', borderTopRightRadius: '0.5rem' }}
+        w="28"
+        display="flex"
+        p={3}
+      >
+        <Box display="flex" center fullWidth>
+          <Text size="3xl" weight="bold" color={positionColor as any}>
+            {position}
+          </Text>
+        </Box>
+      </Box>
+    </Stack>
+  );
+}