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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 01:26:30 +01:00
parent 4a2d7d15a5
commit c3b308e960
102 changed files with 2532 additions and 4744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
apps/website/components/mockups/RatingFactorsMockup.tsx
View File

@@ -1,207 +0,0 @@
'use client';
import { motion, useReducedMotion, useMotionValue, useSpring, useTransform } from 'framer-motion';
import { useEffect, useState } from 'react';
export default function RatingFactorsMockup() {
const shouldReduceMotion = useReducedMotion();
const [isHovered, setIsHovered] = useState<number | null>(null);
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
setIsMobile(window.innerWidth < 768);
}, []);
const factors = [
{ name: 'Position', value: 85, color: 'text-primary-blue', bgColor: 'bg-primary-blue' },
{ name: 'Field Strength', value: 72, color: 'text-neon-aqua', bgColor: 'bg-neon-aqua' },
{ name: 'Consistency', value: 68, color: 'text-performance-green', bgColor: 'bg-performance-green' },
{ name: 'Clean Driving', value: 91, color: 'text-warning-amber', bgColor: 'bg-warning-amber' },
{ name: 'Reliability', value: 88, color: 'text-primary-blue', bgColor: 'bg-primary-blue' },
{ name: 'Team Points', value: 79, color: 'text-performance-green', bgColor: 'bg-performance-green' },
];
if (isMobile) {
return (
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-3 overflow-hidden">
<div className="text-center mb-4">
<div className="h-5 w-40 bg-white/10 rounded mx-auto mb-2"></div>
<div className="h-3 w-32 bg-white/5 rounded mx-auto"></div>
</div>
<div className="grid grid-cols-2 gap-3 mb-4">
{factors.slice(0, 4).map((factor) => (
<div key={factor.name} className="w-full">
<div className="flex items-center justify-between mb-2">
<div className="text-xs text-gray-400">{factor.name}</div>
<span className={`text-sm font-semibold font-mono ${factor.color}`}>
{factor.value}
</span>
</div>
<div className="relative h-2.5 bg-charcoal-outline rounded-full overflow-hidden">
<div
className={`absolute inset-y-0 left-0 ${factor.bgColor} rounded-full`}
style={{ width: `${factor.value}%` }}
/>
</div>
</div>
))}
</div>
<div className="flex items-center justify-center bg-iron-gray/50 rounded-lg p-3 border border-charcoal-outline">
<div className="text-center">
<div className="h-2.5 w-20 bg-white/10 rounded mb-2 mx-auto"></div>
<div className="text-3xl font-bold text-primary-blue font-mono">1342</div>
</div>
</div>
</div>
);
}
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.1 }
}
};
const itemVariants = {
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
visible: {
opacity: 1,
y: 0,
transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
}
};
return (
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-3 md:p-4 lg:p-6 overflow-hidden">
<motion.div
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
animate={{ opacity: 1, y: 0 }}
className="text-center mb-3 md:mb-4 lg:mb-6"
>
<div className="h-6 md:h-6 lg:h-7 w-44 md:w-56 bg-white/10 rounded mx-auto mb-2.5 md:mb-3"></div>
<div className="h-4 md:h-4 w-32 md:w-40 bg-white/5 rounded mx-auto"></div>
</motion.div>
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mb-3 md:mb-4 lg:mb-6 max-w-4xl mx-auto"
>
{factors.map((factor, index) => (
<motion.div
key={factor.name}
variants={itemVariants}
className="flex flex-col items-center"
onHoverStart={() => !shouldReduceMotion && setIsHovered(index)}
onHoverEnd={() => setIsHovered(null)}
>
<RatingFactor
value={factor.value}
color={factor.color}
bgColor={factor.bgColor}
name={factor.name}
shouldReduceMotion={shouldReduceMotion ?? false}
isHovered={isHovered === index}
/>
</motion.div>
))}
</motion.div>
<motion.div
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: shouldReduceMotion ? 0 : 0.6 }}
className="flex items-center justify-center gap-3 md:gap-3 bg-iron-gray/50 rounded-lg p-4 md:p-4 lg:p-5 border border-charcoal-outline shadow-[0_4px_24px_rgba(0,0,0,0.4)] backdrop-blur-sm max-w-md mx-auto"
>
<div className="text-center">
<div className="h-3 md:h-3 w-24 md:w-28 bg-white/10 rounded mb-2 md:mb-2 mx-auto"></div>
<div className="h-12 md:h-12 w-24 md:w-24 bg-charcoal-outline rounded flex items-center justify-center border border-primary-blue/30">
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} />
</div>
</div>
</motion.div>
</div>
);
}
function RatingFactor({
value,
color,
bgColor,
name,
shouldReduceMotion,
isHovered
}: {
value: number;
color: string;
bgColor: string;
name: string;
shouldReduceMotion: boolean;
isHovered: boolean;
}) {
const progress = useMotionValue(0);
const smoothProgress = useSpring(progress, { stiffness: 60, damping: 25 });
const width = useTransform(smoothProgress, (v: number) => `${v}%`);
useEffect(() => {
if (shouldReduceMotion) {
progress.set(value);
} else {
const timeout = setTimeout(() => progress.set(value), 200);
return () => clearTimeout(timeout);
}
}, [value, shouldReduceMotion, progress]);
return (
<motion.div
className="w-full"
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
>
<div className="flex items-center justify-between mb-2.5 md:mb-3">
<div className="text-sm md:text-base lg:text-lg font-light text-gray-400 tracking-wide">{name}</div>
<motion.span
className={`text-sm md:text-base font-semibold font-mono ${color}`}
animate={isHovered && !shouldReduceMotion ? { scale: 1.1 } : { scale: 1 }}
>
{value}
</motion.span>
</div>
<div className="relative h-3 md:h-3.5 lg:h-4 bg-charcoal-outline rounded-full overflow-hidden">
<motion.div
className={`absolute inset-y-0 left-0 ${bgColor} rounded-full`}
style={{ width }}
animate={isHovered && !shouldReduceMotion ? {
boxShadow: `0 0 12px currentColor`
} : {}}
/>
</div>
</motion.div>
);
}
function AnimatedRating({ shouldReduceMotion }: { shouldReduceMotion: boolean }) {
const count = useMotionValue(0);
const rounded = useTransform(count, (v: number) => Math.round(v));
const spring = useSpring(count, { stiffness: 50, damping: 25 });
useEffect(() => {
if (shouldReduceMotion) {
count.set(1342);
} else {
const timeout = setTimeout(() => count.set(1342), 800);
return () => clearTimeout(timeout);
}
}, [shouldReduceMotion, count]);
return (
<motion.span className="text-3xl md:text-4xl lg:text-5xl font-bold text-primary-blue font-mono">
{shouldReduceMotion ? 1342 : <motion.span>{rounded}</motion.span>}
</motion.span>
);
}