website refactor

apps/website/ui/LoadingSpinner.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from './primitives/Box';
 
 interface LoadingSpinnerProps {
   size?: number;
@@ -7,19 +8,17 @@ interface LoadingSpinnerProps {
 }
 
 export function LoadingSpinner({ size = 8, color = '#3b82f6', className = '' }: LoadingSpinnerProps) {
-  const style: React.CSSProperties = {
-    width: `${size * 0.25}rem`,
-    height: `${size * 0.25}rem`,
-    border: '2px solid transparent',
-    borderTopColor: color,
-    borderLeftColor: color,
-    borderRadius: '9999px',
-  };
-
   return (
-    <div 
+    <Box 
+      w={`${size * 0.25}rem`}
+      h={`${size * 0.25}rem`}
+      rounded="full"
+      borderWidth="2px"
+      borderStyle="solid"
+      borderColor="transparent"
+      borderTopColor={color}
+      borderLeftColor={color}
       className={`animate-spin ${className}`} 
-      style={style}
       role="status"
       aria-label="Loading"
     />