website refactor

apps/website/ui/Container.tsx

@@ -1,14 +1,15 @@
 import React, { ReactNode, HTMLAttributes } from 'react';
-import { Box } from './Box';
+import { Box, BoxProps } from './Box';
 
 type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 
-interface ContainerProps extends HTMLAttributes<HTMLElement> {
+interface ContainerProps extends BoxProps<'div'> {
   children: ReactNode;
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
   padding?: boolean;
   className?: string;
   py?: Spacing;
+  pb?: Spacing;
 }
 
 export function Container({ 
@@ -17,6 +18,7 @@ export function Container({
   padding = true,
   className = '',
   py,
+  pb,
   ...props 
 }: ContainerProps) {
   const sizeClasses = {
@@ -39,6 +41,7 @@ export function Container({
     sizeClasses[size],
     padding ? 'px-4 sm:px-6 lg:px-8' : '',
     py !== undefined ? `py-${spacingMap[py]}` : '',
+    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
     className
   ].filter(Boolean).join(' ');