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-19 18:01:30 +01:00
parent 6154d54435
commit 61b5cf3b64
120 changed files with 2226 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/website/components/mockups/ProtestWorkflowMockup.tsx
View File

@@ -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' }}