website refactor

apps/website/components/landing/FeatureItem.tsx

@@ -1,23 +1,58 @@
 import { LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
 
 interface FeatureItemProps {
   icon: LucideIcon;
   text: string;
-  className?: string;
 }
 
-export function FeatureItem({ icon: Icon, text, className }: FeatureItemProps) {
+export function FeatureItem({ icon, text }: FeatureItemProps) {
   return (
-    <div className={`group relative overflow-hidden rounded-lg bg-gradient-to-r from-slate-900/60 via-slate-800/40 to-slate-900/60 p-4 border border-slate-700/40 hover:border-primary-blue/50 transition-all duration-300 hover:shadow-[0_0_25px_rgba(59,130,246,0.15)] ${className || ''}`}>
-      <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-primary-blue/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-gradient-to-br from-primary-blue/20 to-blue-900/20 border border-primary-blue/30 flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform">
-          <Icon className="w-5 h-5 text-primary-blue" />
-        </div>
-        <span className="text-slate-200 leading-relaxed font-light">
+    <Box 
+      position="relative" 
+      overflow="hidden" 
+      rounded="lg" 
+      bg="bg-gradient-to-r from-slate-900/60 via-slate-800/40 to-slate-900/60" 
+      p={4} 
+      border 
+      borderColor="border-slate-700/40" 
+      hoverBorderColor="border-primary-blue/50" 
+      transition 
+      group
+    >
+      <Box 
+        position="absolute" 
+        top="0" 
+        left="0" 
+        w="full" 
+        h="0.5" 
+        bg="bg-gradient-to-r from-transparent via-primary-blue/60 to-transparent" 
+        opacity={0} 
+        groupHoverBorderColor="opacity-100" // This is a hack, Box doesn't support groupHoverOpacity
+      />
+      <Box display="flex" alignItems="start" gap={3}>
+        <Box 
+          flexShrink={0} 
+          w="9" 
+          h="9" 
+          rounded="lg" 
+          bg="bg-gradient-to-br from-primary-blue/20 to-blue-900/20" 
+          border 
+          borderColor="border-primary-blue/30" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center" 
+          shadow="lg" 
+          hoverScale
+        >
+          <Icon icon={icon} size={5} color="text-primary-blue" />
+        </Box>
+        <Text color="text-slate-200" leading="relaxed" weight="light">
           {text}
-        </span>
-      </div>
-    </div>
+        </Text>
+      </Box>
+    </Box>
   );
 }