website refactor

apps/website/ui/FeatureQuote.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+
+interface FeatureQuoteProps {
+  children: string;
+  intent?: 'primary' | 'aqua' | 'amber' | 'low';
+}
+
+/**
+ * FeatureQuote - A semantic quote component for features.
+ */
+export function FeatureQuote({ children, intent = 'primary' }: FeatureQuoteProps) {
+  const borderColor = {
+    primary: 'var(--ui-color-intent-primary)',
+    aqua: 'var(--ui-color-intent-telemetry)',
+    amber: 'var(--ui-color-intent-warning)',
+    low: 'var(--ui-color-border-default)',
+  }[intent];
+
+  const bgColor = {
+    primary: 'rgba(25, 140, 255, 0.05)',
+    aqua: 'rgba(78, 212, 224, 0.05)',
+    amber: 'rgba(255, 190, 77, 0.05)',
+    low: 'rgba(255, 255, 255, 0.02)',
+  }[intent];
+
+  return (
+    <Box 
+      borderLeft 
+      borderStyle="solid" 
+      borderWidth="2px" 
+      borderColor={borderColor} 
+      paddingLeft={4} 
+      paddingY={2} 
+      bg={bgColor}
+    >
+      <Text 
+        variant="low" 
+        font="mono" 
+        size="xs" 
+        uppercase 
+        letterSpacing="widest" 
+        leading="relaxed"
+      >
+        {children}
+      </Text>
+    </Box>
+  );
+}