website refactor

apps/website/ui/PlaceholderImage.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+import { User } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+
+export interface PlaceholderImageProps {
+  size?: number;
+  className?: string;
+}
+
+export function PlaceholderImage({ size = 48, className = '' }: PlaceholderImageProps) {
+  return (
+    <Box
+      className={`rounded-full bg-charcoal-outline flex items-center justify-center ${className}`}
+      style={{ width: size, height: size }}
+    >
+      <Icon icon={User} size={6} color="#9ca3af" />
+    </Box>
+  );
+}