website refactor

apps/website/components/home/HomeFeatureSection.tsx

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