Refactor BSC Score to Astro, TypeScript, and modular architecture

src/components/ui/Card.tsx

@@ -0,0 +1,34 @@
+import { h } from 'preact';
+import styles from './Card.module.css';
+
+interface CardProps {
+  children: any;
+  variant?: 'default' | 'elevated' | 'outlined';
+  padding?: 'none' | 'small' | 'medium' | 'large';
+  className?: string;
+  onClick?: () => void;
+}
+
+export function Card({ 
+  children, 
+  variant = 'default', 
+  padding = 'medium',
+  className = '',
+  onClick 
+}: CardProps) {
+  const classNames = [
+    styles.card,
+    styles[variant],
+    styles[`padding-${padding}`],
+    onClick && styles.clickable,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const Component = onClick ? 'button' : 'div';
+
+  return (
+    <Component className={classNames} onClick={onClick}>
+      {children}
+    </Component>
+  );
+}