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

website landing page

Browse Source
This commit is contained in:
Marc Mintel
2025-12-02 19:44:18 +01:00
parent fd3b4171aa
commit 895318ac40
33 changed files with 2226 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,11 @@ 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' },
@@ -16,6 +21,43 @@ export default function RatingFactorsMockup() {
{ 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: {
@@ -34,21 +76,21 @@ export default function RatingFactorsMockup() {
};
return (
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden">
<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-6"
className="text-center mb-3 md:mb-4 lg:mb-6"
>
<div className="h-7 w-56 bg-white/10 rounded mx-auto mb-3"></div>
<div className="h-4 w-40 bg-white/5 rounded mx-auto"></div>
<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-3 gap-4 mb-6 max-w-4xl mx-auto"
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
@@ -74,11 +116,11 @@ export default function RatingFactorsMockup() {
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 bg-iron-gray/50 rounded-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"
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 w-28 bg-white/10 rounded mb-2 mx-auto"></div>
<div className="h-12 w-24 bg-charcoal-outline rounded flex items-center justify-center border border-primary-blue/30">
<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>
@@ -121,16 +163,16 @@ function RatingFactor({
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
>
<div className="flex items-center justify-between mb-2">
<div className="text-xs font-light text-gray-400 tracking-wide">{name}</div>
<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 font-semibold font-mono ${color}`}
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-2 bg-charcoal-outline rounded-full overflow-hidden">
<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 }}
@@ -158,7 +200,7 @@ function AnimatedRating({ shouldReduceMotion }: { shouldReduceMotion: boolean })
}, [shouldReduceMotion, count]);
return (
<motion.span className="text-3xl font-bold text-primary-blue font-mono">
<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>
);