website refactor

apps/website/components/home/HomeFeatureSection.tsx

@@ -3,8 +3,8 @@
 import React from 'react';
 import { Panel } from '@/ui/Panel';
 import { Glow } from '@/ui/Glow';
-import { Stack } from '@/ui/primitives/Stack';
-import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Section } from '@/ui/Section';
@@ -19,7 +19,6 @@ interface HomeFeatureSectionProps {
 
 /**
  * HomeFeatureSection - A semantic section highlighting a feature.
- * Refactored to use semantic HTML and Tailwind.
  */
 export function HomeFeatureSection({
   heading,
@@ -28,18 +27,6 @@ export function HomeFeatureSection({
   layout,
   accentColor = 'primary',
 }: HomeFeatureSectionProps) {
-  const accentBorderColor = {
-    primary: 'border-primary-accent/40',
-    aqua: 'border-telemetry-aqua/40',
-    amber: 'border-warning-amber/40',
-  }[accentColor];
-
-  const accentBgColor = {
-    primary: 'primary-accent',
-    aqua: 'telemetry-aqua',
-    amber: 'warning-amber',
-  }[accentColor];
-
   const glowColor = ({
     primary: 'primary',
     aqua: 'aqua',
@@ -47,7 +34,7 @@ export function HomeFeatureSection({
   }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
 
   return (
-    <Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
+    <Section variant="dark" padding="lg">
       <Glow 
         color={glowColor} 
         size="lg" 
@@ -56,31 +43,25 @@ export function HomeFeatureSection({
       />
       
       <Container>
-        <Grid cols={1} lgCols={2} gap={12} alignItems="center">
+        <Grid cols={{ base: 1, lg: 2 }} gap={12}>
           {/* Text Content */}
-          <Stack gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
+          <Stack gap={8}>
             <Stack gap={4}>
-              <Stack w="12" h="1" bg={accentBgColor}>{null}</Stack>
-              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
+              <Heading level={2} weight="bold">
                 {heading}
               </Heading>
             </Stack>
-            <Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
+            <Stack>
               {description}
             </Stack>
           </Stack>
 
           {/* Mockup Panel */}
-          <Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
-            <Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
-              <Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
-                {mockup}
-              </Stack>
-              {/* Decorative corner accents */}
-              <Stack position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
-              <Stack position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
-            </Panel>
-          </Stack>
+          <Panel variant="dark">
+            <Stack align="center" justify="center">
+              {mockup}
+            </Stack>
+          </Panel>
         </Grid>
       </Container>
     </Section>