website refactor

apps/website/components/home/HomeFeatureSection.tsx

@@ -1,13 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Panel } from '@/ui/Panel';
-import { Glow } from '@/ui/Glow';
-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';
+import { FeatureSection } from '@/ui/FeatureSection';
 
 interface HomeFeatureSectionProps {
   heading: string;
@@ -27,43 +21,13 @@ export function HomeFeatureSection({
   layout,
   accentColor = 'primary',
 }: HomeFeatureSectionProps) {
-  const glowColor = ({
-    primary: 'primary',
-    aqua: 'aqua',
-    amber: 'amber',
-  }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
-
   return (
-    <Section variant="dark" padding="lg">
-      <Glow 
-        color={glowColor} 
-        size="lg" 
-        position={layout === 'text-left' ? 'bottom-left' : 'top-right'} 
-        opacity={0.02} 
-      />
-      
-      <Container>
-        <Grid cols={{ base: 1, lg: 2 }} gap={12}>
-          {/* Text Content */}
-          <Stack gap={8}>
-            <Stack gap={4}>
-              <Heading level={2} weight="bold">
-                {heading}
-              </Heading>
-            </Stack>
-            <Stack>
-              {description}
-            </Stack>
-          </Stack>
-
-          {/* Mockup Panel */}
-          <Panel variant="dark">
-            <Stack align="center" justify="center">
-              {mockup}
-            </Stack>
-          </Panel>
-        </Grid>
-      </Container>
-    </Section>
+    <FeatureSection
+      heading={heading}
+      description={description}
+      mockup={mockup}
+      layout={layout}
+      intent={accentColor}
+    />
   );
 }