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

website poc

Browse Source
This commit is contained in:
Marc Mintel
2025-12-02 00:19:49 +01:00
parent 7330ccd82d
commit 747a77cb39
42 changed files with 8772 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
apps/website/components/mockups/LeagueDiscoveryMockup.tsx Normal file
View File

@@ -0,0 +1,171 @@
'use client';
import { motion, useReducedMotion } from 'framer-motion';
import { useState } from 'react';
export default function LeagueDiscoveryMockup() {
const shouldReduceMotion = useReducedMotion();
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
const leagues = [
{
name: 'Championship Series',
carClass: 'GT3',
region: 'EU',
skill: '2.5k iRating',
drivers: 48,
schedule: 'Wed 20:00 CET',
rating: 4.8,
icon: '🏁'
},
{
name: 'Touring Car Challenge',
carClass: 'TCR',
region: 'NA',
skill: 'Open skill',
drivers: 32,
schedule: 'Sat 18:00 EST',
rating: 4.6,
icon: '🏎️'
}
];
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
}
};
const cardVariants = {
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-6 md:p-8 overflow-hidden">
<motion.div
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
animate={{ opacity: 1, y: 0 }}
className="mb-6"
>
<div className="h-6 w-52 bg-white/10 rounded mb-4"></div>
<div className="flex gap-2 flex-wrap">
{['Game', 'Region', 'Skill'].map((filter, i) => (
<motion.div
key={filter}
initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: shouldReduceMotion ? 0 : i * 0.1 }}
className="h-8 px-4 bg-charcoal-outline border border-primary-blue/30 rounded-full flex items-center"
>
<div className="h-2 w-12 bg-white/10 rounded"></div>
</motion.div>
))}
</div>
</motion.div>
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="space-y-4"
>
{leagues.map((league, index) => (
<motion.div
key={league.name}
variants={cardVariants}
onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
onHoverEnd={() => setHoveredIndex(null)}
whileHover={shouldReduceMotion ? {} : {
scale: 1.02,
y: -4,
transition: { duration: 0.2 }
}}
className="bg-iron-gray/80 border border-charcoal-outline rounded-lg p-4 backdrop-blur-sm"
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-3">
<div className="text-2xl">{league.icon}</div>
<div>
<div className="h-4 w-40 bg-white/10 rounded mb-2"></div>
<div className="flex gap-2 text-xs">
<span className="px-2 py-0.5 bg-primary-blue/20 text-primary-blue rounded">
{league.carClass}
</span>
<span className="px-2 py-0.5 bg-neon-aqua/20 text-neon-aqua rounded">
{league.region}
</span>
<span className="px-2 py-0.5 bg-charcoal-outline text-gray-400 rounded">
{league.skill}
</span>
</div>
</div>
</div>
</div>
<div className="flex items-center justify-between text-xs text-gray-400 mb-3">
<div className="flex items-center gap-4">
<div className="flex items-center gap-1">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>{league.drivers} drivers</span>
</div>
<div className="flex items-center gap-1">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{league.schedule}</span>
</div>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-1">
{[...Array(5)].map((_, i) => (
<motion.svg
key={i}
className={`w-4 h-4 ${i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}`}
fill="currentColor"
viewBox="0 0 20 20"
animate={hoveredIndex === index && !shouldReduceMotion ? {
scale: [1, 1.2, 1],
transition: { delay: i * 0.05, duration: 0.3 }
} : {}}
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</motion.svg>
))}
<span className="text-xs text-gray-400 ml-1">{league.rating}</span>
</div>
<div className="flex gap-2">
<motion.button
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
className="px-3 py-1 bg-primary-blue text-white text-xs rounded hover:bg-primary-blue/80 transition-colors"
>
Join
</motion.button>
<motion.button
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
className="px-3 py-1 bg-charcoal-outline text-gray-300 text-xs rounded hover:bg-charcoal-outline/80 transition-colors"
>
View
</motion.button>
</div>
</div>
</motion.div>
))}
</motion.div>
</div>
);
}