website refactor

apps/website/components/mockups/MockupStack.tsx

@@ -1,7 +1,8 @@
 
-
 import { motion, useReducedMotion } from 'framer-motion';
 import { ReactNode, useEffect, useState } from 'react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
 
 interface MockupStackProps {
   children: ReactNode;
@@ -28,9 +29,13 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
   // On mobile or before mount, render without animations
   if (!isMounted || isMobile) {
     return (
-      <div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
-        <div
-          className="absolute rounded-none bg-panel-gray/80 border border-border-gray/50"
+      <Box position="relative" fullWidth fullHeight maxWidth="85vw" marginX="auto" marginY={{ base: 4, sm: 0 }} style={{ perspective: '1200px', transform: 'scale(var(--mockup-scale, 1))' }}>
+        <Surface
+          variant="muted"
+          position="absolute"
+          rounded="none"
+          border
+          borderColor="var(--ui-color-border-low)"
           style={{
             rotate: `${rotation1}deg`,
             zIndex: 1,
@@ -43,8 +48,12 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
           }}
         />
         
-        <div
-          className="absolute rounded-none bg-panel-gray/90 border border-border-gray/50"
+        <Surface
+          variant="muted"
+          position="absolute"
+          rounded="none"
+          border
+          borderColor="var(--ui-color-border-low)"
           style={{
             rotate: `${rotation2}deg`,
             zIndex: 2,
@@ -57,24 +66,34 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
           }}
         />
 
-        <div
-          className="relative z-10 w-full h-full rounded-none overflow-hidden border border-border-gray/30"
+        <Box
+          position="relative"
+          zIndex={10}
+          fullWidth
+          fullHeight
+          rounded="none"
+          overflow="hidden"
+          border
+          borderColor="var(--ui-color-border-low)"
           style={{
             boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
           }}
         >
           {children}
-        </div>
-      </div>
+        </Box>
+      </Box>
     );
   }
 
   // Desktop: render with animations
   return (
-    <div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
+    <Box position="relative" fullWidth fullHeight maxWidth="85vw" marginX="auto" marginY={{ base: 4, sm: 0 }} style={{ perspective: '1200px', transform: 'scale(var(--mockup-scale, 1))' }}>
       <motion.div
-        className="absolute rounded-none bg-panel-gray/80 border border-border-gray/50"
         style={{
+          position: 'absolute',
+          borderRadius: '0',
+          backgroundColor: 'rgba(20, 22, 25, 0.8)',
+          border: '1px solid rgba(35, 39, 43, 0.5)',
           rotate: `${rotation1}deg`,
           zIndex: 1,
           top: '-8px',
@@ -89,8 +108,11 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
       />
       
       <motion.div
-        className="absolute rounded-none bg-panel-gray/90 border border-border-gray/50"
         style={{
+          position: 'absolute',
+          borderRadius: '0',
+          backgroundColor: 'rgba(20, 22, 25, 0.9)',
+          border: '1px solid rgba(35, 39, 43, 0.5)',
           rotate: `${rotation2}deg`,
           zIndex: 2,
           top: '-4px',
@@ -105,8 +127,14 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
       />
 
       <motion.div
-        className="relative z-10 w-full h-full rounded-none overflow-hidden border border-border-gray/30"
         style={{
+          position: 'relative',
+          zIndex: 10,
+          width: '100%',
+          height: '100%',
+          borderRadius: '0',
+          overflow: 'hidden',
+          border: '1px solid rgba(35, 39, 43, 0.3)',
           boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
         }}
         whileHover={
@@ -129,7 +157,12 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
         transition={{ duration: 0.4, delay: 0.2 }}
       >
         <motion.div
-          className="absolute inset-0 pointer-events-none rounded-none"
+          style={{
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            borderRadius: '0',
+          }}
           whileHover={
             shouldReduceMotion
               ? {}
@@ -141,6 +174,6 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
         />
         {children}
       </motion.div>
-    </div>
+    </Box>
   );
-}
+}

apps/website/components/mockups/ProtestWorkflowMockup.tsx

@@ -35,18 +35,9 @@ export function ProtestWorkflowMockup() {
     },
   ];
 
-  const getStatusStyles = (status: string) => {
-    switch (status) {
-      case 'pending': return 'bg-panel-gray border-gray-700 text-gray-600';
-      case 'active': return 'bg-warning-amber/10 border-warning-amber text-warning-amber';
-      case 'resolved': return 'bg-success-green/10 border-success-green text-success-green';
-      default: return 'bg-panel-gray border-gray-700 text-gray-600';
-    }
-  };
-
   if (isMobile) {
     return (
-      <Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" overflow="hidden" p={3} display="flex" flexDirection="col" justifyContent="center" gap={4}>
+      <Box position="relative" fullWidth fullHeight bg="var(--ui-color-bg-base)" rounded="none" overflow="hidden" p={3} display="flex" flexDirection="col" justifyContent="center" gap={4}>
         <Box display="flex" alignItems="center" justifyContent="center" gap={3}>
           {steps.map((step, i) => (
             <Box key={step.name} display="flex" alignItems="center">
@@ -61,17 +52,19 @@ export function ProtestWorkflowMockup() {
                   mb={1}
                   border
                   borderWidth="1px"
-                  className={getStatusStyles(step.status)}
+                  bg={step.status === 'pending' ? 'var(--ui-color-bg-surface)' : step.status === 'active' ? 'rgba(255, 190, 77, 0.1)' : 'rgba(16, 185, 129, 0.1)'}
+                  borderColor={step.status === 'pending' ? 'var(--ui-color-border-default)' : step.status === 'active' ? 'var(--ui-color-intent-warning)' : 'var(--ui-color-intent-success)'}
+                  color={step.status === 'pending' ? 'var(--ui-color-text-low)' : step.status === 'active' ? 'var(--ui-color-intent-warning)' : 'var(--ui-color-intent-success)'}
                 >
                   <Box as="svg" w="5" h="5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
                   </Box>
                 </Box>
-                <Text size="xs" color="text-white" weight="bold" textAlign="center" className="uppercase tracking-widest">{step.name}</Text>
+                <Text size="xs" color="text-white" weight="bold" textAlign="center" uppercase letterSpacing="widest">{step.name}</Text>
               </Box>
               {i < steps.length - 1 && (
                 <Box as="svg" w="4" h="4" mx={1} viewBox="0 0 24 24" fill="none">
-                  <path d="M5 12h14m-7-7l7 7-7 7" stroke="#198CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M5 12h14m-7-7l7 7-7 7" stroke="var(--ui-color-intent-primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 </Box>
               )}
             </Box>
@@ -83,7 +76,7 @@ export function ProtestWorkflowMockup() {
             position="absolute"
             insetY="0"
             left="0"
-            bg="primary-accent"
+            bg="var(--ui-color-intent-primary)"
             style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
           />
         </Box>
@@ -104,7 +97,7 @@ export function ProtestWorkflowMockup() {
   };
 
   return (
-    <Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" overflow="hidden" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} display="flex" flexDirection="col" justifyContent="center" gap={{ base: 2, sm: 4, md: 6, lg: 8 }}>
+    <Box position="relative" fullWidth fullHeight bg="var(--ui-color-bg-base)" rounded="none" overflow="hidden" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} display="flex" flexDirection="col" justifyContent="center" gap={{ base: 2, sm: 4, md: 6, lg: 8 }}>
       <Box display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems="center" justifyContent="center" gap={{ base: 2, sm: 3, md: 4 }}>
         {steps.map((step, i) => (
           <Box key={step.name} display="flex" alignItems="center" flexShrink={0}>
@@ -131,10 +124,12 @@ export function ProtestWorkflowMockup() {
                     mb={{ base: 1, sm: 1.5, md: 2 }}
                     border
                     borderWidth="1px"
-                    className={getStatusStyles(step.status)}
+                    bg={step.status === 'pending' ? 'var(--ui-color-bg-surface)' : step.status === 'active' ? 'rgba(255, 190, 77, 0.1)' : 'rgba(16, 185, 129, 0.1)'}
+                    borderColor={step.status === 'pending' ? 'var(--ui-color-border-default)' : step.status === 'active' ? 'var(--ui-color-intent-warning)' : 'var(--ui-color-intent-success)'}
+                    color={step.status === 'pending' ? 'var(--ui-color-text-low)' : step.status === 'active' ? 'var(--ui-color-intent-warning)' : 'var(--ui-color-intent-success)'}
                     whileHover={shouldReduceMotion ? {} : {
                       scale: 1.05,
-                      borderColor: '#198CFF',
+                      borderColor: 'var(--ui-color-intent-primary)',
                       transition: { duration: 0.2 }
                     }}
                   >
@@ -142,7 +137,7 @@ export function ProtestWorkflowMockup() {
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
                     </Box>
                     {step.status === 'active' && (
-                      <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="warning-amber" />
+                      <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="var(--ui-color-intent-warning)" />
                     )}
                   </Box>
                   <Text 
@@ -151,7 +146,8 @@ export function ProtestWorkflowMockup() {
                     color="text-white" 
                     weight="bold" 
                     textAlign="center" 
-                    className="uppercase tracking-widest"
+                    uppercase
+                    letterSpacing="widest"
                   >
                     {step.name}
                   </Text>
@@ -159,13 +155,13 @@ export function ProtestWorkflowMockup() {
 
                 {i < steps.length - 1 && (
                   <Box 
-                    className="hidden md:block" 
+                    display={{ base: 'none', md: 'block' }} 
                     position="relative" 
                     ml={2}
                     mr={2}
                   >
                     <Box as="svg" w={{ base: 3, sm: 4, md: 5 }} h={{ base: 3, sm: 4, md: 5 }} viewBox="0 0 24 24" fill="none">
-                      <path d="M5 12h14m-7-7l7 7-7 7" stroke="#198CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity={0.5} />
+                      <path d="M5 12h14m-7-7l7 7-7 7" stroke="var(--ui-color-intent-primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity={0.5} />
                     </Box>
                   </Box>
                 )}
@@ -189,7 +185,7 @@ export function ProtestWorkflowMockup() {
           position="absolute"
           insetY="0"
           left="0"
-          bg="primary-accent"
+          bg="var(--ui-color-intent-primary)"
           initial={{ width: '0%' }}
           animate={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
           transition={{ duration: 0.5, ease: 'easeOut' }}

apps/website/components/mockups/WorkflowMockup.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { CheckCircle2, LucideIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export interface WorkflowStep {
+  id: number;
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  intent: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
+}
+
+interface WorkflowMockupProps {
+  steps: WorkflowStep[];
+}
+
+export function WorkflowMockup({ steps }: WorkflowMockupProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const [isMounted, setIsMounted] = useState(false);
+  const [activeStep, setActiveStep] = useState(0);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+    
+    const interval = setInterval(() => {
+      setActiveStep((prev) => (prev + 1) % steps.length);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [isMounted, steps.length]);
+
+  if (!isMounted) {
+    return (
+      <Box position="relative" fullWidth>
+        <Surface variant="muted" rounded="none" padding={6}>
+          <Box display="flex" justifyContent="between" gap={2}>
+            {steps.map((step) => (
+              <Box key={step.id} display="flex" alignItems="center" justifyContent="center" flexDirection="col">
+                <Box width="10" height="10" rounded="none" bg="var(--ui-color-bg-base)" style={{ border: '1px solid var(--ui-color-border-default)' }} display="flex" alignItems="center" justifyContent="center" mb={2}>
+                  <Text variant={step.intent}>
+                    <Icon icon={step.icon} size={4} />
+                  </Text>
+                </Box>
+                <Text size="xs" weight="bold" variant="high" uppercase>{step.title}</Text>
+              </Box>
+            ))}
+          </Box>
+        </Surface>
+      </Box>
+    );
+  }
+
+  return (
+    <Box position="relative" fullWidth>
+      <Surface variant="muted" rounded="none" padding={6} overflow="hidden">
+        {/* Connection Lines */}
+        <Box position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
+          <Box height="0.5" bg="rgba(255,255,255,0.05)" position="relative">
+            <Box
+              as={motion.div}
+              position="absolute"
+              fullHeight
+              bg="var(--ui-color-intent-primary)"
+              initial={{ width: '0%' }}
+              animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
+              transition={{ duration: 0.5, ease: 'easeInOut' }}
+            />
+          </Box>
+        </Box>
+
+        {/* Steps */}
+        <Box display="flex" justifyContent="between" gap={2} position="relative">
+          {steps.map((step, index) => {
+            const isActive = index === activeStep;
+            const isCompleted = index < activeStep;
+            const StepIcon = step.icon;
+
+            return (
+              <Box
+                as={motion.div}
+                key={step.id}
+                display="flex"
+                flexDirection="col"
+                alignItems="center"
+                justifyContent="center"
+                cursor="pointer"
+                flexGrow={1}
+                onClick={() => setActiveStep(index)}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Box
+                  as={motion.div}
+                  w={{ base: '10', sm: '12' }}
+                  h={{ base: '10', sm: '12' }}
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  mb={2}
+                  transition
+                  style={{ 
+                    backgroundColor: isActive ? 'rgba(25, 140, 255, 0.1)' : isCompleted ? 'rgba(16, 185, 129, 0.1)' : 'var(--ui-color-bg-base)',
+                    opacity: isActive ? 1 : isCompleted ? 0.8 : 0.5,
+                    border: `1px solid ${isActive ? 'var(--ui-color-intent-primary)' : isCompleted ? 'var(--ui-color-intent-success)' : 'var(--ui-color-border-default)'}`
+                  }}
+                  animate={isActive && !shouldReduceMotion ? {
+                    opacity: [0.7, 1, 0.7],
+                    transition: { duration: 1.5, repeat: Infinity }
+                  } : {}}
+                  className="relative"
+                >
+                  {isActive && (
+                    <Box position="absolute" top="-1px" left="-1px" w="2" h="2" style={{ borderTop: '1px solid var(--ui-color-intent-primary)', borderLeft: '1px solid var(--ui-color-intent-primary)' }} />
+                  )}
+                  {isCompleted ? (
+                    <Icon icon={CheckCircle2} size={5} intent="success" />
+                  ) : (
+                    <Text variant={isActive ? 'primary' : 'low'}>
+                      <Icon icon={StepIcon} size={5} />
+                    </Text>
+                  )}
+                </Box>
+                <Text 
+                  size="xs" 
+                  weight="bold" 
+                  variant={isActive ? 'high' : 'low'}
+                  display={{ base: 'none', sm: 'block' }}
+                  uppercase
+                >
+                  {step.title}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {/* Active Step Preview - Mobile */}
+        <AnimatePresence mode="wait">
+          <Box
+            as={motion.div}
+            key={activeStep}
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -5 }}
+            transition={{ duration: 0.2 }}
+            marginTop={4}
+            paddingTop={4}
+            style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
+            display={{ base: 'block', sm: 'none' }}
+          >
+            <Box textAlign="center">
+              <Text size="xs" variant="med" block marginBottom={1} font="mono" weight="bold" uppercase>
+                STEP {activeStep + 1}: {steps[activeStep]?.title || ''}
+              </Text>
+              <Text size="xs" variant="low" block font="mono" uppercase>
+                {steps[activeStep]?.description || ''}
+              </Text>
+            </Box>
+          </Box>
+        </AnimatePresence>
+      </Surface>
+    </Box>
+  );
+}