website refactor

apps/website/components/shared/RangeField.tsx

@@ -130,7 +130,8 @@ export function RangeField({
         <Group justify="between" gap={3}>
           <Text as="label" size="xs" weight="medium" variant="low">{label}</Text>
           <Box display="flex" alignItems="center" gap={2} flex={1} maxWidth="200px">
-            <div
+            <Box
+              as="div"
               ref={sliderRef}
               style={{ 
                 position: 'relative',
@@ -173,7 +174,7 @@ export function RangeField({
                   boxShadow: isDragging ? '0 0 12px rgba(25, 140, 255, 0.5)' : undefined
                 }}
               />
-            </div>
+            </Box>
             <Box flexShrink={0}>
               <Group gap={1}>
                 <Text size="sm" weight="semibold" variant="high" textAlign="right" width="2rem">{clampedValue}</Text>
@@ -202,7 +203,8 @@ export function RangeField({
       )}
  
       {/* Custom slider */}
-      <div
+      <Box
+        as="div"
         ref={sliderRef}
         style={{ 
           position: 'relative',
@@ -265,12 +267,13 @@ export function RangeField({
             boxShadow: isDragging ? '0 0 16px rgba(25, 140, 255, 0.6)' : '0 2px 8px rgba(0,0,0,0.3)'
           }}
         />
-      </div>
+      </Box>
  
       {/* Value input and quick presets */}
       <Group justify="between" align="center" gap={3}>
         <Group gap={2}>
-          <input
+          <Box
+            as="input"
             ref={inputRef}
             type="number"
             min={min}
@@ -301,7 +304,8 @@ export function RangeField({
         {quickPresets.length > 0 && (
           <Group gap={1}>
             {quickPresets.slice(0, 3).map((preset) => (
-              <button
+              <Box
+                as="button"
                 key={preset}
                 type="button"
                 onClick={() => {
@@ -321,7 +325,7 @@ export function RangeField({
                 }}
               >
                 {preset}
-              </button>
+              </Box>
             ))}
           </Group>
         )}

apps/website/components/shared/UIComponents.tsx

@@ -18,6 +18,7 @@ import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { Badge } from '@/ui/Badge';
 
 import { ProgressLine } from '@/ui/ProgressLine';
+import { SharedEmptyState } from './SharedEmptyState';
 
 export { 
   Pagination as SharedPagination,
@@ -38,5 +39,6 @@ export {
   Skeleton as SharedSkeleton,
   LoadingSpinner as SharedLoadingSpinner,
   Badge as SharedBadge,
-  ProgressLine as SharedProgressLine
+  ProgressLine as SharedProgressLine,
+  SharedEmptyState
 };