website refactor
This commit is contained in:
@@ -1,175 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Surface } from '@/ui/primitives/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;
|
||||
color: string;
|
||||
}
|
||||
|
||||
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 (
|
||||
<Stack position="relative" fullWidth>
|
||||
<Surface variant="muted" rounded="none" border={true} padding={6} bg="panel-gray/40">
|
||||
<Stack direction="row" justify="between" gap={2}>
|
||||
{steps.map((step) => (
|
||||
<Stack key={step.id} align="center" center direction="col">
|
||||
<Stack width="10" height="10" rounded="none" bg="graphite-black" border={true} borderColor="border-gray/50" display="flex" center mb={2}>
|
||||
<Text color={step.color}>
|
||||
<Icon icon={step.icon} size={4} />
|
||||
</Text>
|
||||
</Stack>
|
||||
<Text size="xs" weight="bold" color="text-white" className="uppercase tracking-widest">{step.title}</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Surface>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack position="relative" fullWidth>
|
||||
<Surface variant="muted" rounded="none" border={true} padding={6} overflow="hidden" bg="panel-gray/40">
|
||||
{/* Connection Lines */}
|
||||
<Stack position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
|
||||
<Stack height="0.5" bg="white/5" position="relative">
|
||||
<Stack
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
fullHeight
|
||||
bg="primary-accent"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Steps */}
|
||||
<Stack direction="row" justify="between" gap={2} position="relative">
|
||||
{steps.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<Stack
|
||||
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 }}
|
||||
>
|
||||
<Stack
|
||||
as={motion.div}
|
||||
w={{ base: '10', sm: '12' }}
|
||||
h={{ base: '10', sm: '12' }}
|
||||
rounded="none"
|
||||
border={true}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb={2}
|
||||
transition
|
||||
bg={isActive ? 'primary-accent/10' : isCompleted ? 'success-green/10' : 'graphite-black'}
|
||||
borderColor={isActive ? 'primary-accent' : isCompleted ? 'success-green/50' : 'border-gray/50'}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
opacity: [0.7, 1, 0.7],
|
||||
transition: { duration: 1.5, repeat: Infinity }
|
||||
} : {}}
|
||||
className="relative"
|
||||
>
|
||||
{isActive && (
|
||||
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
)}
|
||||
{isCompleted ? (
|
||||
<Icon icon={CheckCircle2} size={5} color="text-success-green" />
|
||||
) : (
|
||||
<Text color={isActive ? 'text-primary-accent' : 'text-gray-600'}>
|
||||
<Icon icon={StepIcon} size={5} />
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
<Text
|
||||
size="xs"
|
||||
weight="bold"
|
||||
color={isActive ? 'text-white' : 'text-gray-500'}
|
||||
display={{ base: 'none', sm: 'block' }}
|
||||
transition
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
{step.title}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
|
||||
{/* Active Step Preview - Mobile */}
|
||||
<AnimatePresence mode="wait">
|
||||
<Stack
|
||||
as={motion.div}
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
mt={4}
|
||||
pt={4}
|
||||
borderTop={true}
|
||||
borderColor="border-gray/30"
|
||||
display={{ base: 'block', sm: 'none' }}
|
||||
>
|
||||
<Stack textAlign="center">
|
||||
<Text size="xs" color="text-gray-400" block mb={1} font="mono" weight="bold" className="uppercase tracking-widest">
|
||||
STEP {activeStep + 1}: {steps[activeStep]?.title || ''}
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-600" block font="mono">
|
||||
{steps[activeStep]?.description.toUpperCase() || ''}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</AnimatePresence>
|
||||
</Surface>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user