website refactor

apps/website/ui/VerticalBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface VerticalBarProps {
+  intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
+  height?: string | number;
+}
+
+/**
+ * VerticalBar - A semantic decorative bar.
+ */
+export function VerticalBar({ intent = 'primary', height = '2rem' }: VerticalBarProps) {
+  const intentClasses = {
+    primary: 'bg-[var(--ui-color-intent-primary)]',
+    secondary: 'bg-[var(--ui-color-intent-secondary)]',
+    success: 'bg-[var(--ui-color-intent-success)]',
+    warning: 'bg-[var(--ui-color-intent-warning)]',
+    critical: 'bg-[var(--ui-color-intent-critical)]',
+  };
+
+  return (
+    <div 
+      className={`w-1 ${intentClasses[intent]}`} 
+      style={{ height: typeof height === 'number' ? `${height * 0.25}rem` : height }} 
+    />
+  );
+}