website refactor

apps/website/components/home/HomeFeatureDescription.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { CardStack } from '@/ui/CardStack';
+import { FeatureList } from '@/ui/FeatureList';
+import { FeatureQuote } from '@/ui/FeatureQuote';
 
 interface HomeFeatureDescriptionProps {
   lead: string;
@@ -12,7 +14,7 @@ interface HomeFeatureDescriptionProps {
 
 /**
  * HomeFeatureDescription - A semantic component for feature descriptions on the home page.
- * Refactored to use semantic HTML and Tailwind.
+ * Refactored to use semantic UI components.
  */
 export function HomeFeatureDescription({
   lead,
@@ -20,40 +22,21 @@ export function HomeFeatureDescription({
   quote,
   accentColor = 'primary',
 }: HomeFeatureDescriptionProps) {
-  const borderColor = {
-    primary: 'primary-accent',
-    aqua: 'telemetry-aqua',
-    amber: 'warning-amber',
-    gray: 'border-gray',
-  }[accentColor];
-
-  const bgColor = {
-    primary: 'primary-accent/5',
-    aqua: 'telemetry-aqua/5',
-    amber: 'warning-amber/5',
-    gray: 'white/5',
-  }[accentColor];
+  const intent = accentColor === 'gray' ? 'low' : accentColor;
 
   return (
-    <Stack gap={6}>
-      <Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
+    <CardStack gap={6}>
+      <Text size="lg" variant="med" leading="relaxed">
         {lead}
       </Text>
-      <Stack as="ul" gap={2}>
-        {items.map((item, index) => (
-          <Stack as="li" key={index} direction="row" align="start" gap={2}>
-            <Text color="text-primary-accent">•</Text>
-            <Text size="sm" color="text-gray-500">{item}</Text>
-          </Stack>
-        ))}
-      </Stack>
+      
+      <FeatureList items={items} intent={intent} />
+      
       {quote && (
-        <Stack borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
-          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
-            {quote}
-          </Text>
-        </Stack>
+        <FeatureQuote intent={intent}>
+          {quote}
+        </FeatureQuote>
       )}
-    </Stack>
+    </CardStack>
   );
 }