mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/website/components/mockups/WorkflowMockup.tsx
View File

@@ -3,9 +3,8 @@
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { CheckCircle2, LucideIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
@@ -42,32 +41,32 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
if (!isMounted) {
return (
<Box position="relative" fullWidth>
<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">
<Box width="10" height="10" rounded="none" bg="graphite-black" border={true} borderColor="border-gray/50" display="flex" center mb={2}>
<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>
</Box>
</Stack>
<Text size="xs" weight="bold" color="text-white" className="uppercase tracking-widest">{step.title}</Text>
</Stack>
))}
</Stack>
</Surface>
</Box>
</Stack>
);
}
return (
<Box position="relative" fullWidth>
<Stack position="relative" fullWidth>
<Surface variant="muted" rounded="none" border={true} padding={6} overflow="hidden" bg="panel-gray/40">
{/* Connection Lines */}
<Box position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
<Box height="0.5" bg="white/5" position="relative">
<Box
<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
@@ -76,8 +75,8 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
/>
</Box>
</Box>
</Stack>
</Stack>
{/* Steps */}
<Stack direction="row" justify="between" gap={2} position="relative">
@@ -87,7 +86,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
const StepIcon = step.icon;
return (
<Box
<Stack
as={motion.div}
key={step.id}
display="flex"
@@ -100,7 +99,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<Box
<Stack
as={motion.div}
w={{ base: '10', sm: '12' }}
h={{ base: '10', sm: '12' }}
@@ -120,7 +119,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
className="relative"
>
{isActive && (
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
<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" />
@@ -129,7 +128,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
<Icon icon={StepIcon} size={5} />
</Text>
)}
</Box>
</Stack>
<Text
size="xs"
weight="bold"
@@ -140,14 +139,14 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
>
{step.title}
</Text>
</Box>
</Stack>
);
})}
</Stack>
{/* Active Step Preview - Mobile */}
<AnimatePresence mode="wait">
<Box
<Stack
as={motion.div}
key={activeStep}
initial={{ opacity: 0, y: 5 }}
@@ -160,17 +159,17 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
borderColor="border-gray/30"
display={{ base: 'block', sm: 'none' }}
>
<Box textAlign="center">
<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>
</Box>
</Box>
</Stack>
</Stack>
</AnimatePresence>
</Surface>
</Box>
</Stack>
);
}