website refactor

apps/website/components/home/HomeFeatureDescription.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+
+interface HomeFeatureDescriptionProps {
+  lead: string;
+  items: string[];
+  quote?: string;
+  accentColor?: 'primary' | 'aqua' | 'amber' | 'gray';
+}
+
+/**
+ * HomeFeatureDescription - A semantic component for feature descriptions on the home page.
+ * Refactored to use semantic HTML and Tailwind.
+ */
+export function HomeFeatureDescription({
+  lead,
+  items,
+  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];
+
+  return (
+    <Stack gap={6}>
+      <Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
+        {lead}
+      </Text>
+      <Box as="ul" display="flex" flexDirection="col" gap={2}>
+        {items.map((item, index) => (
+          <Box as="li" key={index} display="flex" alignItems="start" gap={2}>
+            <Text color="text-primary-accent">•</Text>
+            <Text size="sm" color="text-gray-500">{item}</Text>
+          </Box>
+        ))}
+      </Box>
+      {quote && (
+        <Box 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>
+        </Box>
+      )}
+    </Stack>
+  );
+}