website refactor

apps/website/ui/Glow.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box } from './Box';
+
+interface GlowProps {
+  color?: 'primary' | 'aqua' | 'purple' | 'amber';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  opacity?: number;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+  className?: string;
+}
+
+export function Glow({ 
+  color = 'primary', 
+  size = 'md', 
+  opacity = 0.1,
+  position = 'center',
+  className = '' 
+}: GlowProps) {
+  const colorMap = {
+    primary: 'from-primary-accent/20',
+    aqua: 'from-telemetry-aqua/20',
+    purple: 'from-purple-500/20',
+    amber: 'from-warning-amber/20',
+  };
+
+  const sizeMap = {
+    sm: 'w-64 h-64',
+    md: 'w-96 h-96',
+    lg: 'w-[32rem] h-[32rem]',
+    xl: 'w-[48rem] h-[48rem]',
+  };
+
+  const positionMap = {
+    'top-left': '-top-32 -left-32',
+    'top-right': '-top-32 -right-32',
+    'bottom-left': '-bottom-32 -left-32',
+    'bottom-right': '-bottom-32 -right-32',
+    'center': 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+  };
+
+  return (
+    <Box
+      position="absolute"
+      className={`${sizeMap[size]} ${positionMap[position]} bg-radial-gradient ${colorMap[color]} to-transparent blur-[100px] pointer-events-none ${className}`}
+      style={{ opacity }}
+      zIndex={0}
+    />
+  );
+}