website refactor

apps/website/ui/Logo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Image } from './Image';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+export interface LogoProps {
+  src?: string;
+  alt: string;
+  size?: number | string;
+  icon?: LucideIcon;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  variant?: 'default' | 'dark' | 'muted' | 'glass';
+  border?: boolean;
+}
+
+export const Logo = ({
+  src,
+  alt,
+  size = 48,
+  icon,
+  rounded = 'md',
+  variant = 'muted',
+  border = true,
+}: LogoProps) => {
+  return (
+    <Surface
+      variant={variant}
+      rounded={rounded}
+      border={border}
+      style={{ 
+        width: size, 
+        height: size, 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        overflow: 'hidden',
+        flexShrink: 0
+      }}
+    >
+      {src ? (
+        <Image
+          src={src}
+          alt={alt}
+          style={{ width: '100%', height: '100%', objectFit: 'contain', padding: '10%' }}
+        />
+      ) : icon ? (
+        <Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 5 : 4) : 5} intent="low" />
+      ) : null}
+    </Surface>
+  );
+};