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 01:31:31 +01:00
parent 747a77cb39
commit fd3b4171aa
15 changed files with 939 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
apps/website/components/mockups/CareerProgressionMockup.tsx Normal file
View File

@@ -0,0 +1,104 @@
'use client';
import { motion, useReducedMotion } from 'framer-motion';
export default function CareerProgressionMockup() {
const shouldReduceMotion = useReducedMotion();
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.08 }
}
};
const itemVariants = {
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
visible: { opacity: 1, x: 0 }
};
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">
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="space-y-6"
>
{/* Driver Header */}
<motion.div variants={itemVariants} className="flex items-center gap-4 pb-6 border-b border-charcoal-outline">
<div className="h-16 w-16 bg-charcoal-outline rounded-full border-2 border-primary-blue/30"></div>
<div className="flex-1">
<div className="h-4 w-40 bg-white/10 rounded mb-2"></div>
<div className="flex items-center gap-3">
<div className="h-3 w-24 bg-primary-blue/20 rounded"></div>
<div className="h-3 w-20 bg-performance-green/20 rounded"></div>
</div>
</div>
</motion.div>
{/* Career Stats */}
<motion.div variants={itemVariants}>
<div className="text-sm font-semibold text-white/60 mb-3">Career Overview</div>
<div className="grid grid-cols-3 gap-3">
{[1, 2, 3].map((i) => (
<motion.div
key={i}
className="bg-iron-gray rounded-lg p-3 border border-charcoal-outline"
whileHover={shouldReduceMotion ? {} : {
y: -2,
boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
transition: { duration: 0.15 }
}}
>
<div className="h-6 w-12 bg-primary-blue/30 rounded mb-2 font-mono"></div>
<div className="h-2 w-16 bg-white/5 rounded"></div>
</motion.div>
))}
</div>
</motion.div>
{/* Season Timeline */}
<motion.div variants={itemVariants}>
<div className="text-sm font-semibold text-white/60 mb-3">Season History</div>
<div className="space-y-2">
{[1, 2, 3].map((i) => (
<motion.div
key={i}
className="flex items-center gap-3 bg-iron-gray rounded-lg p-3 border border-charcoal-outline"
whileHover={shouldReduceMotion ? {} : {
x: 4,
boxShadow: '0 2px 12px rgba(25,140,255,0.2)',
transition: { duration: 0.15 }
}}
>
<div className="h-8 w-8 bg-charcoal-outline rounded border border-primary-blue/20"></div>
<div className="flex-1">
<div className="h-2.5 w-32 bg-white/10 rounded mb-1.5"></div>
<div className="h-2 w-24 bg-white/5 rounded"></div>
</div>
<div className="flex gap-2">
<div className="h-6 w-8 bg-performance-green/20 rounded text-center font-mono"></div>
<div className="h-6 w-8 bg-primary-blue/20 rounded text-center font-mono"></div>
</div>
</motion.div>
))}
</div>
</motion.div>
{/* Multi-League Badge */}
<motion.div variants={itemVariants}>
<div className="flex items-center gap-2 bg-charcoal-outline rounded-lg p-3 border border-primary-blue/30">
<div className="flex -space-x-2">
{[1, 2, 3].map((i) => (
<div key={i} className="h-6 w-6 bg-iron-gray rounded-full border-2 border-charcoal-outline"></div>
))}
</div>
<div className="h-2 w-32 bg-white/5 rounded"></div>
</div>
</motion.div>
</motion.div>
</div>
);
}

155
apps/website/components/mockups/CompanionAutomationMockup.tsx Normal file
View File

@@ -0,0 +1,155 @@
'use client';
import { motion, useReducedMotion } from 'framer-motion';
export default function CompanionAutomationMockup() {
const shouldReduceMotion = useReducedMotion();
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 }
}
};
const itemVariants = {
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
visible: { opacity: 1, y: 0 }
};
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">
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="space-y-6"
>
{/* Companion App Header */}
<motion.div variants={itemVariants}>
<div className="flex items-center gap-3 mb-6">
<div className="h-10 w-10 bg-primary-blue/20 rounded-lg border border-primary-blue/40 flex items-center justify-center">
<div className="h-5 w-5 bg-primary-blue/60 rounded"></div>
</div>
<div>
<div className="text-sm font-semibold text-white">GridPilot Companion</div>
<div className="text-xs text-white/50">Session Creator</div>
</div>
</div>
</motion.div>
{/* Configuration Card */}
<motion.div
variants={itemVariants}
className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline"
>
<div className="flex items-center justify-between mb-3">
<div className="text-xs text-white/60">Session Template</div>
<div className="h-5 w-20 bg-performance-green/30 rounded-full flex items-center justify-center">
<div className="text-xs text-performance-green">Ready</div>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="h-2 w-2 bg-primary-blue rounded-full"></div>
<div className="h-2 w-32 bg-white/10 rounded"></div>
</div>
<div className="flex items-center gap-2">
<div className="h-2 w-2 bg-primary-blue rounded-full"></div>
<div className="h-2 w-28 bg-white/10 rounded"></div>
</div>
<div className="flex items-center gap-2">
<div className="h-2 w-2 bg-primary-blue rounded-full"></div>
<div className="h-2 w-36 bg-white/10 rounded"></div>
</div>
</div>
</motion.div>
{/* Browser Automation Visual */}
<motion.div
variants={itemVariants}
className="relative bg-charcoal-outline rounded-lg p-4 border border-primary-blue/30 overflow-hidden"
>
{/* Browser Window Mockup */}
<div className="space-y-3">
<div className="flex items-center gap-2 pb-3 border-b border-white/10">
<div className="h-2 w-2 bg-white/20 rounded-full"></div>
<div className="h-2 w-2 bg-white/20 rounded-full"></div>
<div className="h-2 w-2 bg-white/20 rounded-full"></div>
<div className="flex-1 h-2 bg-white/5 rounded ml-2"></div>
</div>
{/* Automation Steps */}
<div className="space-y-2">
{[1, 2, 3, 4].map((step, index) => (
<motion.div
key={step}
className="flex items-center gap-2"
initial={{ opacity: 0, x: -10 }}
animate={{
opacity: 1,
x: 0,
transition: { delay: shouldReduceMotion ? 0 : 0.5 + (index * 0.15) }
}}
>
<motion.div
className="h-3 w-3 bg-performance-green/40 rounded-full flex items-center justify-center"
animate={shouldReduceMotion ? {} : {
scale: index === 3 ? [1, 1.2, 1] : 1,
opacity: index === 3 ? [0.4, 1, 0.4] : 1
}}
transition={{ duration: 1.5, repeat: Infinity }}
>
<div className="h-1.5 w-1.5 bg-performance-green rounded-full"></div>
</motion.div>
<div className="h-2 w-full bg-white/5 rounded"></div>
</motion.div>
))}
</div>
</div>
{/* Automation Running Indicator */}
<motion.div
className="absolute top-2 right-2 flex items-center gap-2 bg-deep-graphite/80 backdrop-blur-sm px-3 py-1.5 rounded-full border border-primary-blue/30"
animate={shouldReduceMotion ? {} : {
boxShadow: [
'0 0 8px rgba(25,140,255,0.2)',
'0 0 16px rgba(25,140,255,0.4)',
'0 0 8px rgba(25,140,255,0.2)'
]
}}
transition={{ duration: 2, repeat: Infinity }}
>
<motion.div
className="h-2 w-2 bg-primary-blue rounded-full"
animate={shouldReduceMotion ? {} : {
opacity: [1, 0.5, 1]
}}
transition={{ duration: 1.5, repeat: Infinity }}
/>
<div className="text-xs text-primary-blue">Running</div>
</motion.div>
</motion.div>
{/* One-Click Action */}
<motion.div
variants={itemVariants}
className="flex items-center justify-center"
>
<motion.div
className="bg-primary-blue/20 text-primary-blue px-6 py-2.5 rounded-lg border border-primary-blue/40 text-sm font-semibold"
whileHover={shouldReduceMotion ? {} : {
scale: 1.03,
boxShadow: '0 4px 24px rgba(25,140,255,0.3)',
transition: { duration: 0.15 }
}}
>
Create Session
</motion.div>
</motion.div>
</motion.div>
</div>
);
}

131
apps/website/components/mockups/RaceHistoryMockup.tsx Normal file
View File

@@ -0,0 +1,131 @@
'use client';
import { motion, useReducedMotion } from 'framer-motion';
export default function RaceHistoryMockup() {
const shouldReduceMotion = useReducedMotion();
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
}
};
const raceCardVariants = {
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
visible: { opacity: 1, x: 0 }
};
const profileSectionVariants = {
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : 20 },
visible: {
opacity: 1,
x: 0,
transition: { delay: shouldReduceMotion ? 0 : 0.2 }
}
};
const connectionLineVariants = {
hidden: { scaleX: 0, opacity: 0 },
visible: {
scaleX: 1,
opacity: 0.3,
transition: { duration: 0.6 }
}
};
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 flex items-center justify-center">
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
className="relative w-full max-w-4xl"
>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
{/* Left: Race Result Card */}
<motion.div variants={raceCardVariants} className="relative">
<div className="bg-iron-gray rounded-lg p-6 border border-primary-blue/40 shadow-[0_0_24px_rgba(25,140,255,0.2)]">
<div className="flex items-center gap-4 mb-4">
<div className="h-16 w-16 bg-charcoal-outline rounded-lg border border-primary-blue/30 flex items-center justify-center">
<div className="text-white text-2xl font-bold">P3</div>
</div>
<div className="flex-1">
<div className="text-lg font-semibold text-white mb-1">Watkins Glen</div>
<div className="text-sm text-white/50">GT3 Sprint • Race 8</div>
</div>
</div>
<div className="space-y-2 pt-4 border-t border-charcoal-outline">
<div className="flex justify-between text-sm">
<span className="text-white/50">Finish</span>
<span className="text-white font-medium">3rd of 24</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-white/50">Incidents</span>
<span className="text-performance-green font-medium">0x</span>
</div>
</div>
</div>
</motion.div>
{/* Connection Arrow */}
<motion.div
variants={connectionLineVariants}
className="hidden lg:block absolute left-1/2 top-1/2 -translate-y-1/2 w-16 h-0.5 bg-gradient-to-r from-primary-blue to-performance-green origin-left"
style={{ transformOrigin: 'left center' }}
>
<div className="absolute right-0 top-1/2 -translate-y-1/2">
<div className="w-2 h-2 bg-performance-green rotate-45 transform translate-x-1"></div>
</div>
</motion.div>
{/* Right: Unified Profile Preview */}
<motion.div variants={profileSectionVariants} className="relative">
<div className="bg-iron-gray/80 backdrop-blur-sm rounded-lg p-6 border border-charcoal-outline space-y-4">
<div className="text-sm font-semibold text-white/70 mb-3">Updates Your Profile</div>
{/* Stats Section */}
<div className="space-y-2">
<div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-primary-blue/20">
<span className="text-xs text-white/50">Career Stats</span>
<div className="flex items-center gap-2">
<div className="h-1.5 w-16 bg-primary-blue/40 rounded"></div>
<span className="text-xs text-performance-green">↑</span>
</div>
</div>
{/* Team Points */}
<div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-performance-green/20">
<span className="text-xs text-white/50">Team Points</span>
<div className="flex items-center gap-2">
<div className="h-1.5 w-12 bg-performance-green/40 rounded"></div>
<span className="text-xs text-performance-green">+18</span>
</div>
</div>
{/* Rating */}
<div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-subtle-neon-aqua/20">
<span className="text-xs text-white/50">Rating</span>
<div className="flex items-center gap-2">
<div className="h-1.5 w-10 bg-subtle-neon-aqua/40 rounded"></div>
<span className="text-xs text-performance-green">+12</span>
</div>
</div>
{/* Season History */}
<div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-white/10">
<span className="text-xs text-white/50">Season Record</span>
<div className="flex items-center gap-2">
<div className="h-1.5 w-14 bg-white/20 rounded"></div>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</motion.div>
</div>
);
}

89
apps/website/components/mockups/SimPlatformMockup.tsx Normal file
View File

@@ -0,0 +1,89 @@
export default function SimPlatformMockup() {
return (
<div className="relative w-full max-w-3xl mx-auto">
<div className="bg-iron-gray border border-charcoal-outline rounded-lg p-6 shadow-2xl">
<div className="space-y-4">
<div className="flex items-center justify-between pb-4 border-b border-charcoal-outline">
<div className="text-sm font-semibold text-slate-300">Platform Support</div>
<div className="text-xs text-slate-500">Active: 1 | Planned: 3</div>
</div>
<div className="grid grid-cols-2 gap-3">
{/* iRacing - Active */}
<div className="bg-deep-graphite border-2 border-primary-blue rounded-lg p-4 relative overflow-hidden">
<div className="absolute top-2 right-2">
<div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
</div>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded bg-primary-blue/10 flex items-center justify-center">
<span className="text-2xl font-bold text-primary-blue">iR</span>
</div>
<div>
<div className="font-semibold text-white">iRacing</div>
<div className="text-xs text-performance-green">Active</div>
</div>
</div>
<div className="mt-3 text-xs text-slate-400">
Full integration
</div>
</div>
{/* ACC - Future */}
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
<span className="text-2xl font-bold text-slate-600">AC</span>
</div>
<div>
<div className="font-semibold text-slate-500">ACC</div>
<div className="text-xs text-slate-600">Planned</div>
</div>
</div>
<div className="mt-3 text-xs text-slate-600">
Coming later
</div>
</div>
{/* rFactor 2 - Future */}
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
<span className="text-2xl font-bold text-slate-600">rF</span>
</div>
<div>
<div className="font-semibold text-slate-500">rFactor 2</div>
<div className="text-xs text-slate-600">Planned</div>
</div>
</div>
<div className="mt-3 text-xs text-slate-600">
Coming later
</div>
</div>
{/* LMU - Future */}
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
<span className="text-2xl font-bold text-slate-600">LM</span>
</div>
<div>
<div className="font-semibold text-slate-500">Le Mans Ult.</div>
<div className="text-xs text-slate-600">Planned</div>
</div>
</div>
<div className="mt-3 text-xs text-slate-600">
Coming later
</div>
</div>
</div>
<div className="pt-4 border-t border-charcoal-outline">
<div className="text-xs text-slate-500 text-center">
Your identity stays with you across platforms
</div>
</div>
</div>
</div>
</div>
);
}