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-17 02:32:34 +01:00
parent 6a49448e0a
commit 4d5ce9bfd6
43 changed files with 1642 additions and 2022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
'use client';
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { CheckCircle2, LucideIcon } from 'lucide-react';
@@ -43,16 +43,16 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
if (!isMounted) {
return (
<Box position="relative" fullWidth>
<Surface variant="muted" rounded="2xl" border={true} padding={6}>
<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="lg" bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" display="flex" center mb={2}>
<Box 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>
<Text size="xs" weight="medium" color="text-white">{step.title}</Text>
<Text size="xs" weight="bold" color="text-white" className="uppercase tracking-widest">{step.title}</Text>
</Stack>
))}
</Stack>
@@ -63,15 +63,15 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
return (
<Box position="relative" fullWidth>
<Surface variant="muted" rounded="2xl" border={true} padding={6} overflow="hidden">
<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="bg-charcoal-outline" position="relative">
<Box height="0.5" bg="white/5" position="relative">
<Box
as={motion.div}
position="absolute"
fullHeight
bg="bg-gradient-to-r from-primary-blue to-performance-green"
bg="primary-accent"
initial={{ width: '0%' }}
animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
@@ -104,35 +104,39 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
as={motion.div}
w={{ base: '10', sm: '12' }}
h={{ base: '10', sm: '12' }}
rounded="lg"
rounded="none"
border={true}
display="flex"
alignItems="center"
justifyContent="center"
mb={2}
transition
bg={isActive ? 'bg-primary-blue/20' : isCompleted ? 'bg-performance-green/20' : 'bg-iron-gray'}
borderColor={isActive ? 'border-primary-blue' : isCompleted ? 'border-performance-green/50' : 'border-charcoal-outline'}
shadow={isActive ? 'shadow-[0_0_15px_rgba(25,140,255,0.3)]' : 'none'}
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 ? {
scale: [1, 1.08, 1],
transition: { duration: 1, repeat: Infinity }
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" borderTop borderLeft borderColor="primary-accent" />
)}
{isCompleted ? (
<Icon icon={CheckCircle2} size={5} color="text-performance-green" />
<Icon icon={CheckCircle2} size={5} color="text-success-green" />
) : (
<Text color={isActive ? step.color : 'text-gray-500'}>
<Text color={isActive ? 'text-primary-accent' : 'text-gray-600'}>
<Icon icon={StepIcon} size={5} />
</Text>
)}
</Box>
<Text
size="xs"
weight="medium"
color={isActive ? 'text-white' : 'text-gray-400'}
weight="bold"
color={isActive ? 'text-white' : 'text-gray-500'}
display={{ base: 'none', sm: 'block' }}
transition
className="uppercase tracking-widest"
>
{step.title}
</Text>
@@ -153,15 +157,15 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
mt={4}
pt={4}
borderTop={true}
borderColor="border-charcoal-outline"
borderColor="border-gray/30"
display={{ base: 'block', sm: 'none' }}
>
<Box textAlign="center">
<Text size="xs" color="text-gray-400" block mb={1}>
Step {activeStep + 1}: {steps[activeStep]?.title || ''}
<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-500" block>
{steps[activeStep]?.description || ''}
<Text size="xs" color="text-gray-600" block font="mono">
{steps[activeStep]?.description.toUpperCase() || ''}
</Text>
</Box>
</Box>