website refactor

apps/website/ui/DecorativeBlur.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box } from './Box';
+
+interface DecorativeBlurProps {
+  color?: 'blue' | 'green' | 'purple' | 'yellow' | 'red';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  position?: 'top-right' | 'bottom-left' | 'center';
+  opacity?: number;
+}
+
+export function DecorativeBlur({ 
+  color = 'blue', 
+  size = 'md', 
+  position = 'center',
+  opacity = 10
+}: DecorativeBlurProps) {
+  const colorClasses = {
+    blue: 'bg-primary-blue',
+    green: 'bg-performance-green',
+    purple: 'bg-purple-600',
+    yellow: 'bg-yellow-400',
+    red: 'bg-racing-red'
+  };
+
+  const sizeClasses = {
+    sm: 'w-32 h-32 blur-xl',
+    md: 'w-48 h-48 blur-2xl',
+    lg: 'w-64 h-64 blur-3xl',
+    xl: 'w-96 h-96 blur-[64px]'
+  };
+
+  const positionClasses = {
+    'top-right': 'absolute top-0 right-0',
+    'bottom-left': 'absolute bottom-0 left-0',
+    'center': 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
+  };
+
+  const opacityStyle = { opacity: opacity / 100 };
+
+  return (
+    <Box 
+      className={`${colorClasses[color]} ${sizeClasses[size]} ${positionClasses[position]} rounded-full pointer-events-none`}
+      style={opacityStyle}
+    />
+  );
+}