website refactor

apps/website/ui/FeatureItem.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import { Panel } from './Panel';
+import { Stack } from './Stack';
+import { Heading } from './Heading';
+import { Text } from './Text';
+import { LucideIcon } from 'lucide-react';
+import { IconContainer } from './IconContainer';
+
+interface FeatureItemProps {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}
+
+/**
+ * FeatureItem - A semantic UI component for a single feature/pillar.
+ * Allowed to use Stack primitive.
+ */
+export function FeatureItem({ title, description, icon: Icon }: FeatureItemProps) {
+  return (
+    <Panel variant="default" padding="lg">
+      <Stack direction="col" gap={6}>
+        <IconContainer>
+          <Icon className="w-5 h-5 text-[var(--ui-color-intent-primary)]" />
+        </IconContainer>
+        <Stack direction="col" gap={4}>
+          <Heading level={3} weight="bold" uppercase>
+            {title}
+          </Heading>
+          <Text size="md" variant="med" leading="relaxed" block>
+            {description}
+          </Text>
+        </Stack>
+      </Stack>
+    </Panel>
+  );
+}