website refactor

apps/website/ui/StatusDot.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box } from './Box';
+
+interface StatusDotProps {
+  color?: string;
+  pulse?: boolean;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * StatusDot
+ * 
+ * A simple status indicator dot with optional pulse effect.
+ */
+export function StatusDot({ 
+  color = '#4ED4E0', 
+  pulse = false, 
+  size = 2,
+  className = '' 
+}: StatusDotProps) {
+  const sizeClass = `w-${size} h-${size}`;
+  
+  return (
+    <Box position="relative" className={`${sizeClass} ${className}`}>
+      <Box 
+        w="full" 
+        h="full" 
+        rounded="full" 
+        style={{ backgroundColor: color }} 
+      />
+      {pulse && (
+        <Box 
+          position="absolute" 
+          inset={0} 
+          rounded="full" 
+          className="animate-ping" 
+          style={{ backgroundColor: color, opacity: 0.75 }} 
+        />
+      )}
+    </Box>
+  );
+}