website refactor

apps/website/components/onboarding/OnboardingHelpPanel.tsx

@@ -0,0 +1,42 @@
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { HelpCircle } from 'lucide-react';
+
+interface OnboardingHelpPanelProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * OnboardingHelpPanel
+ * 
+ * A semantic panel for providing contextual help or information during onboarding.
+ * Usually placed in the sidebar.
+ */
+export function OnboardingHelpPanel({ title = 'Need Help?', children }: OnboardingHelpPanelProps) {
+  return (
+    <Surface
+      variant="muted"
+      rounded="xl"
+      border
+      padding={6}
+      borderColor="border-charcoal-outline"
+      bg="bg-deep-charcoal/30"
+    >
+      <Stack gap={4}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={HelpCircle} size={4} color="text-primary-blue" />
+          <Text size="sm" weight="bold" color="text-white" uppercase letterSpacing="wider">
+            {title}
+          </Text>
+        </Stack>
+        
+        <Text size="sm" color="text-gray-400">
+          {children}
+        </Text>
+      </Stack>
+    </Surface>
+  );
+}