website landing page
This commit is contained in:
@@ -1,130 +1,204 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function RaceHistoryMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
|
||||
}
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth < 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 },
|
||||
visible: { opacity: 1, scale: 1 }
|
||||
};
|
||||
|
||||
const raceCardVariants = {
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
|
||||
visible: { opacity: 1, x: 0 }
|
||||
};
|
||||
// Simple, elegant mobile version - just the core story
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite to-iron-gray rounded-lg p-4 overflow-hidden flex items-center justify-center">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
visible: { transition: { staggerChildren: 0.12 } }
|
||||
}}
|
||||
className="space-y-4 w-full max-w-xs"
|
||||
>
|
||||
{/* Race result - clean and simple */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="bg-iron-gray/60 rounded-xl p-4 border-2 border-primary-blue/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-14 w-14 bg-primary-blue/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-2xl font-bold text-primary-blue">P3</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-base font-semibold text-white">Watkins Glen</div>
|
||||
<div className="text-xs text-white/60">GT3 Sprint</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
const profileSectionVariants = {
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { delay: shouldReduceMotion ? 0 : 0.2 }
|
||||
}
|
||||
};
|
||||
{/* Simple arrow */}
|
||||
<motion.div variants={itemVariants} className="flex justify-center">
|
||||
<div className="text-primary-blue text-2xl">↓</div>
|
||||
</motion.div>
|
||||
|
||||
const connectionLineVariants = {
|
||||
hidden: { scaleX: 0, opacity: 0 },
|
||||
visible: {
|
||||
scaleX: 1,
|
||||
opacity: 0.3,
|
||||
transition: { duration: 0.6 }
|
||||
}
|
||||
};
|
||||
{/* Updates - minimal */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="bg-iron-gray/40 rounded-xl p-3 border border-charcoal-outline space-y-2">
|
||||
<div className="text-xs text-white/70 text-center mb-2">Profile Updated</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1 bg-deep-graphite/50 rounded py-2 text-center border border-primary-blue/30">
|
||||
<div className="text-xs text-primary-blue font-semibold">Stats ↑</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-deep-graphite/50 rounded py-2 text-center border border-performance-green/30">
|
||||
<div className="text-xs text-performance-green font-semibold">+12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Desktop version - richer with more updates
|
||||
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">
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-1.5 sm:p-3 md:p-5 lg:p-8 overflow-hidden">
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="relative w-full max-w-4xl"
|
||||
variants={{
|
||||
visible: { transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 } }
|
||||
}}
|
||||
className="space-y-2 sm:space-y-3 md:space-y-4 lg:space-y-5"
|
||||
>
|
||||
<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>
|
||||
{/* Race Result Card - Enhanced */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="bg-iron-gray rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 border-2 border-primary-blue/40">
|
||||
<div className="flex items-center gap-2 sm:gap-3 md:gap-4">
|
||||
<div className="relative h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 lg:h-20 lg:w-20 bg-charcoal-outline rounded-lg border-2 border-primary-blue/30 overflow-hidden flex-shrink-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/20 to-performance-green/20"></div>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold">P3</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 className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1 sm:gap-1.5 md:gap-2 mb-1">
|
||||
<div className="text-sm sm:text-base md:text-lg">🏁</div>
|
||||
<div className="text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-white truncate">Watkins Glen</div>
|
||||
</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 className="text-xs sm:text-sm md:text-base text-white/60 mb-1">GT3 Sprint Race</div>
|
||||
<div className="flex items-center gap-2 sm:gap-3 md:gap-4 text-[10px] sm:text-xs md:text-sm text-white/50">
|
||||
<span>24 drivers</span>
|
||||
<span>•</span>
|
||||
<span>45 min</span>
|
||||
<span>•</span>
|
||||
<span>Just finished</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.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' }}
|
||||
{/* Connection Flow with Animation */}
|
||||
<motion.div variants={itemVariants} className="flex justify-center">
|
||||
<motion.div
|
||||
className="flex flex-col items-center gap-1"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
y: [0, 5, 0]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<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>
|
||||
<div className="text-primary-blue text-2xl sm:text-3xl md:text-4xl">↓</div>
|
||||
<div className="text-[10px] sm:text-xs text-primary-blue/70">Auto-sync</div>
|
||||
</motion.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>
|
||||
{/* Profile Updates Grid - More detailed */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="bg-iron-gray/80 rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 border border-charcoal-outline">
|
||||
<div className="text-xs sm:text-sm md:text-base font-semibold text-white/80 text-center mb-2 sm:mb-3 md:mb-4">
|
||||
Profile Updates
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 sm:gap-3 md:gap-4">
|
||||
{/* Career Stats Update */}
|
||||
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-primary-blue/30">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Career Stats</span>
|
||||
<motion.span
|
||||
className="text-[10px] sm:text-xs md:text-sm text-performance-green font-semibold"
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
>
|
||||
↑
|
||||
</motion.span>
|
||||
</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 className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
Wins: 24 → 25
|
||||
</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>
|
||||
{/* Rating Update */}
|
||||
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-performance-green/30">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Rating</span>
|
||||
<motion.span
|
||||
className="text-[10px] sm:text-xs md:text-sm text-performance-green font-semibold font-mono"
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
>
|
||||
+12
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
1342 → 1354
|
||||
</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>
|
||||
{/* Season Points Update */}
|
||||
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-warning-amber/30">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Season</span>
|
||||
<motion.span
|
||||
className="text-[10px] sm:text-xs md:text-sm text-warning-amber font-semibold font-mono"
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.7 }}
|
||||
>
|
||||
+18
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
248 → 266 pts
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Points Update */}
|
||||
<div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-neon-aqua/30">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[10px] sm:text-xs md:text-sm text-white/70">Team</span>
|
||||
<motion.span
|
||||
className="text-[10px] sm:text-xs md:text-sm text-neon-aqua font-semibold font-mono"
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
>
|
||||
+18
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
|
||||
Contributing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user