auth rework
This commit is contained in:
@@ -1,29 +1,273 @@
|
||||
import Link from 'next/link';
|
||||
'use client';
|
||||
|
||||
interface IracingAuthPageProps {
|
||||
searchParams: Promise<{
|
||||
returnTo?: string;
|
||||
}>;
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
|
||||
import {
|
||||
Gamepad2,
|
||||
Flag,
|
||||
ArrowRight,
|
||||
Shield,
|
||||
Link as LinkIcon,
|
||||
User,
|
||||
Trophy,
|
||||
BarChart3,
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
|
||||
interface ConnectionStep {
|
||||
id: number;
|
||||
icon: typeof Gamepad2;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default async function IracingAuthPage({ searchParams }: IracingAuthPageProps) {
|
||||
const params = await searchParams;
|
||||
const returnTo = params.returnTo ?? '/dashboard';
|
||||
const CONNECTION_STEPS: ConnectionStep[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: Gamepad2,
|
||||
title: 'Connect iRacing',
|
||||
description: 'Authorize GridPilot to access your profile',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: User,
|
||||
title: 'Import Profile',
|
||||
description: 'We fetch your racing stats and history',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: Trophy,
|
||||
title: 'Sync Achievements',
|
||||
description: 'Your licenses, iRating, and results',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: BarChart3,
|
||||
title: 'Ready to Race',
|
||||
description: 'Access full GridPilot features',
|
||||
},
|
||||
];
|
||||
|
||||
const BENEFITS = [
|
||||
'Automatic profile creation with your iRacing data',
|
||||
'Real-time stats sync including iRating and Safety Rating',
|
||||
'Import your racing history and achievements',
|
||||
'No manual data entry required',
|
||||
'Verified driver identity in leagues',
|
||||
];
|
||||
|
||||
export default function IracingAuthPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const returnTo = searchParams.get('returnTo') ?? '/dashboard';
|
||||
const startUrl = `/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`;
|
||||
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted || isHovering) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % CONNECTION_STEPS.length);
|
||||
}, 2500);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted, isHovering]);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex items-center justify-center bg-deep-graphite">
|
||||
<div className="max-w-md w-full px-6 py-8 bg-iron-gray/80 rounded-lg border border-white/10 shadow-xl">
|
||||
<h1 className="text-2xl font-semibold text-white mb-4">Authenticate with iRacing</h1>
|
||||
<p className="text-sm text-gray-300 mb-6">
|
||||
Connect a demo iRacing identity to explore the GridPilot dashboard with seeded data.
|
||||
<main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-2xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center gap-4 mb-6">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30"
|
||||
>
|
||||
<Flag className="w-7 h-7 text-primary-blue" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="flex items-center"
|
||||
>
|
||||
<LinkIcon className="w-6 h-6 text-gray-500" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-red-600/10 border border-orange-500/30"
|
||||
>
|
||||
<Gamepad2 className="w-7 h-7 text-orange-400" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<Heading level={1} className="mb-3">Connect Your iRacing Account</Heading>
|
||||
<p className="text-gray-400 text-lg max-w-md mx-auto">
|
||||
Link your iRacing profile for automatic stats sync and verified driver identity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-primary-blue/5 to-transparent rounded-bl-full" />
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-orange-500/5 to-transparent rounded-tr-full" />
|
||||
|
||||
<div className="relative">
|
||||
{/* Connection Flow Animation */}
|
||||
<div
|
||||
className="bg-iron-gray/50 rounded-xl border border-charcoal-outline p-6 mb-6"
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
>
|
||||
<p className="text-xs text-gray-500 text-center mb-4">Connection Flow</p>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
{CONNECTION_STEPS.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
key={step.id}
|
||||
onClick={() => setActiveStep(index)}
|
||||
className="flex flex-col items-center text-center flex-1 cursor-pointer"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`w-12 h-12 rounded-xl border flex items-center justify-center mb-2 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]'
|
||||
: isCompleted
|
||||
? 'bg-performance-green/20 border-performance-green/50'
|
||||
: 'bg-deep-graphite border-charcoal-outline'
|
||||
}`}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.08, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
} : {}}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-performance-green" />
|
||||
) : (
|
||||
<StepIcon className={`w-5 h-5 ${isActive ? 'text-primary-blue' : 'text-gray-500'}`} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h4 className={`text-xs font-medium transition-colors ${
|
||||
isActive ? 'text-white' : 'text-gray-500'
|
||||
}`}>
|
||||
{step.title}
|
||||
</h4>
|
||||
</motion.button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Step Description */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mt-4 text-center"
|
||||
>
|
||||
<p className="text-sm text-gray-400">
|
||||
{CONNECTION_STEPS[activeStep].description}
|
||||
</p>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Benefits List */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">What you'll get:</h3>
|
||||
<ul className="space-y-2">
|
||||
{BENEFITS.map((benefit, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.4 + index * 0.05 }}
|
||||
className="flex items-start gap-2 text-sm text-gray-400"
|
||||
>
|
||||
<CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0 mt-0.5" />
|
||||
{benefit}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Connect Button */}
|
||||
<Link href={startUrl} className="block">
|
||||
<Button
|
||||
variant="primary"
|
||||
className="w-full flex items-center justify-center gap-3 py-4"
|
||||
>
|
||||
<Gamepad2 className="w-5 h-5" />
|
||||
<span>Connect iRacing Account</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-6 pt-6 border-t border-charcoal-outline">
|
||||
<div className="flex items-center justify-center gap-6 text-xs text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure OAuth connection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
<span>Read-only access</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alternative */}
|
||||
<p className="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have iRacing?{' '}
|
||||
<Link href="/auth/signup" className="text-primary-blue hover:underline">
|
||||
Create account with email
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
GridPilot only requests read access to your iRacing profile.
|
||||
<br />
|
||||
We never access your payment info or modify your account.
|
||||
</p>
|
||||
<Link
|
||||
href={startUrl}
|
||||
className="inline-flex items-center justify-center px-4 py-2 rounded-md bg-primary-blue text-sm font-medium text-white hover:bg-primary-blue/90 transition-colors w-full"
|
||||
>
|
||||
Start iRacing demo login
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState, FormEvent, type ChangeEvent } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
Lock,
|
||||
@@ -13,6 +14,11 @@ import {
|
||||
Flag,
|
||||
ArrowRight,
|
||||
Gamepad2,
|
||||
Car,
|
||||
Users,
|
||||
Trophy,
|
||||
Shield,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
@@ -20,6 +26,7 @@ import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
|
||||
|
||||
interface FormErrors {
|
||||
email?: string;
|
||||
@@ -27,6 +34,27 @@ interface FormErrors {
|
||||
submit?: string;
|
||||
}
|
||||
|
||||
const USER_ROLES = [
|
||||
{
|
||||
icon: Car,
|
||||
title: 'Driver',
|
||||
description: 'Race, track stats, join teams',
|
||||
color: 'primary-blue',
|
||||
},
|
||||
{
|
||||
icon: Trophy,
|
||||
title: 'League Admin',
|
||||
description: 'Organize leagues and events',
|
||||
color: 'performance-green',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Team Manager',
|
||||
description: 'Manage team and drivers',
|
||||
color: 'purple-400',
|
||||
},
|
||||
];
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
@@ -97,8 +125,10 @@ export default function LoginPage() {
|
||||
const handleDemoLogin = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Redirect to iRacing auth start route
|
||||
router.push(`/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`);
|
||||
// Demo: Set cookie to indicate driver mode (works without OAuth)
|
||||
document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
router.push(returnTo);
|
||||
} catch (error) {
|
||||
setErrors({
|
||||
submit: 'Demo login failed. Please try again.',
|
||||
@@ -108,7 +138,7 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
|
||||
<main className="min-h-screen bg-deep-graphite flex">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
@@ -117,148 +147,238 @@ export default function LoginPage() {
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Logo/Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
{/* Left Side - Info Panel (Hidden on mobile) */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative items-center justify-center p-12">
|
||||
<div className="max-w-lg">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30">
|
||||
<Flag className="w-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">GridPilot</span>
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Welcome Back</Heading>
|
||||
<p className="text-gray-400">
|
||||
Sign in to continue to GridPilot
|
||||
|
||||
<Heading level={2} className="text-white mb-4">
|
||||
Your Sim Racing Infrastructure
|
||||
</Heading>
|
||||
|
||||
<p className="text-gray-400 text-lg mb-8">
|
||||
Manage leagues, track performance, join teams, and compete with drivers worldwide. One account, multiple roles.
|
||||
</p>
|
||||
|
||||
{/* Role Cards */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{USER_ROLES.map((role, index) => (
|
||||
<motion.div
|
||||
key={role.title}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline"
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-lg bg-${role.color}/20 flex items-center justify-center`}>
|
||||
<role.icon className={`w-5 h-5 text-${role.color}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-medium">{role.title}</h4>
|
||||
<p className="text-sm text-gray-500">{role.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Workflow Mockup */}
|
||||
<AuthWorkflowMockup />
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-8 flex items-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure login</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Gamepad2 className="w-4 h-4" />
|
||||
<span>iRacing verified</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative space-y-5">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
|
||||
error={!!errors.email}
|
||||
errorMessage={errors.email}
|
||||
placeholder="you@example.com"
|
||||
disabled={loading}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300">
|
||||
Password
|
||||
</label>
|
||||
<Link href="/auth/forgot-password" className="text-xs text-primary-blue hover:underline">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, password: e.target.value })}
|
||||
error={!!errors.password}
|
||||
errorMessage={errors.password}
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{errors.submit && (
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-400">{errors.submit}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Signing in...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-charcoal-outline" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-4 bg-iron-gray text-gray-500">or continue with</span>
|
||||
{/* Right Side - Login Form */}
|
||||
<div className="flex-1 flex items-center justify-center px-4 py-12">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Mobile Logo/Header */}
|
||||
<div className="text-center mb-8 lg:hidden">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Welcome Back</Heading>
|
||||
<p className="text-gray-400">
|
||||
Sign in to continue to GridPilot
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Demo Login */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDemoLogin}
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-deep-graphite border border-charcoal-outline text-gray-300 hover:bg-iron-gray hover:border-primary-blue/30 transition-all disabled:opacity-50"
|
||||
>
|
||||
<Gamepad2 className="w-5 h-5 text-primary-blue" />
|
||||
<span>Demo Login (iRacing)</span>
|
||||
</button>
|
||||
{/* Desktop Header */}
|
||||
<div className="hidden lg:block text-center mb-8">
|
||||
<Heading level={2} className="mb-2">Welcome Back</Heading>
|
||||
<p className="text-gray-400">
|
||||
Sign in to access your racing dashboard
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sign Up Link */}
|
||||
<p className="mt-6 text-center text-sm text-gray-400">
|
||||
Don't have an account?{' '}
|
||||
<Link
|
||||
href={`/auth/signup${returnTo !== '/dashboard' ? `?returnTo=${encodeURIComponent(returnTo)}` : ''}`}
|
||||
className="text-primary-blue hover:underline font-medium"
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative space-y-5">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
|
||||
error={!!errors.email}
|
||||
errorMessage={errors.email}
|
||||
placeholder="you@example.com"
|
||||
disabled={loading}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300">
|
||||
Password
|
||||
</label>
|
||||
<Link href="/auth/forgot-password" className="text-xs text-primary-blue hover:underline">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, password: e.target.value })}
|
||||
error={!!errors.password}
|
||||
errorMessage={errors.password}
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{errors.submit && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
|
||||
>
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-400">{errors.submit}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Signing in...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-charcoal-outline" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-4 bg-iron-gray text-gray-500">or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Demo Login */}
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={handleDemoLogin}
|
||||
disabled={loading}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
whileTap={{ scale: 0.99 }}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-deep-graphite to-iron-gray border border-charcoal-outline text-gray-300 hover:border-primary-blue/30 transition-all disabled:opacity-50 group"
|
||||
>
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
<Gamepad2 className="w-5 h-5 text-primary-blue" />
|
||||
<span>Demo Login (iRacing)</span>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500 group-hover:translate-x-0.5 transition-transform" />
|
||||
</motion.button>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
By signing in, you agree to our{' '}
|
||||
<Link href="/terms" className="text-gray-400 hover:underline">Terms of Service</Link>
|
||||
{' '}and{' '}
|
||||
<Link href="/privacy" className="text-gray-400 hover:underline">Privacy Policy</Link>
|
||||
</p>
|
||||
{/* Sign Up Link */}
|
||||
<p className="mt-6 text-center text-sm text-gray-400">
|
||||
Don't have an account?{' '}
|
||||
<Link
|
||||
href={`/auth/signup${returnTo !== '/dashboard' ? `?returnTo=${encodeURIComponent(returnTo)}` : ''}`}
|
||||
className="text-primary-blue hover:underline font-medium"
|
||||
>
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
By signing in, you agree to our{' '}
|
||||
<Link href="/terms" className="text-gray-400 hover:underline">Terms of Service</Link>
|
||||
{' '}and{' '}
|
||||
<Link href="/privacy" className="text-gray-400 hover:underline">Privacy Policy</Link>
|
||||
</p>
|
||||
|
||||
{/* Mobile Role Info */}
|
||||
<div className="mt-8 lg:hidden">
|
||||
<p className="text-center text-xs text-gray-500 mb-4">One account for all roles</p>
|
||||
<div className="flex justify-center gap-6">
|
||||
{USER_ROLES.map((role) => (
|
||||
<div key={role.title} className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-lg bg-${role.color}/20 flex items-center justify-center mb-1`}>
|
||||
<role.icon className={`w-4 h-4 text-${role.color}`} />
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{role.title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState, useEffect, FormEvent, type ChangeEvent } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
Lock,
|
||||
@@ -16,6 +17,13 @@ import {
|
||||
X,
|
||||
Gamepad2,
|
||||
Loader2,
|
||||
Car,
|
||||
Users,
|
||||
Trophy,
|
||||
Shield,
|
||||
ChevronRight,
|
||||
ArrowRight,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
@@ -23,6 +31,7 @@ import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
|
||||
|
||||
interface FormErrors {
|
||||
displayName?: string;
|
||||
@@ -52,6 +61,36 @@ function checkPasswordStrength(password: string): PasswordStrength {
|
||||
return { score, label: 'Strong', color: 'bg-performance-green' };
|
||||
}
|
||||
|
||||
const USER_ROLES = [
|
||||
{
|
||||
icon: Car,
|
||||
title: 'Driver',
|
||||
description: 'Race, track stats, join teams',
|
||||
color: 'primary-blue',
|
||||
},
|
||||
{
|
||||
icon: Trophy,
|
||||
title: 'League Admin',
|
||||
description: 'Organize leagues and events',
|
||||
color: 'performance-green',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Team Manager',
|
||||
description: 'Manage team and drivers',
|
||||
color: 'purple-400',
|
||||
},
|
||||
];
|
||||
|
||||
const FEATURES = [
|
||||
'Track your racing statistics and progress',
|
||||
'Join or create competitive leagues',
|
||||
'Build or join racing teams',
|
||||
'Connect your iRacing account',
|
||||
'Compete in organized events',
|
||||
'Access detailed performance analytics',
|
||||
];
|
||||
|
||||
export default function SignupPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
@@ -169,8 +208,10 @@ export default function SignupPage() {
|
||||
const handleDemoLogin = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Redirect to iRacing auth start route
|
||||
router.push(`/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`);
|
||||
// Demo: Set cookie to indicate driver mode (works without OAuth)
|
||||
document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
router.push(returnTo === '/onboarding' ? '/dashboard' : returnTo);
|
||||
} catch {
|
||||
setErrors({
|
||||
submit: 'Demo login failed. Please try again.',
|
||||
@@ -189,7 +230,7 @@ export default function SignupPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
|
||||
<main className="min-h-screen bg-deep-graphite flex">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
@@ -198,236 +239,350 @@ export default function SignupPage() {
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Logo/Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
{/* Left Side - Info Panel (Hidden on mobile) */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative items-center justify-center p-12">
|
||||
<div className="max-w-lg">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30">
|
||||
<Flag className="w-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">GridPilot</span>
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Join GridPilot</Heading>
|
||||
<p className="text-gray-400">
|
||||
Create your account and start racing
|
||||
|
||||
<Heading level={2} className="text-white mb-4">
|
||||
Start Your Racing Journey
|
||||
</Heading>
|
||||
|
||||
<p className="text-gray-400 text-lg mb-8">
|
||||
Join thousands of sim racers. One account gives you access to all roles - race as a driver, organize leagues, or manage teams.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative space-y-5">
|
||||
{/* Display Name */}
|
||||
<div>
|
||||
<label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Display Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="displayName"
|
||||
type="text"
|
||||
value={formData.displayName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, displayName: e.target.value })}
|
||||
error={!!errors.displayName}
|
||||
errorMessage={errors.displayName}
|
||||
placeholder="SpeedyRacer42"
|
||||
disabled={loading}
|
||||
className="pl-10"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">This is how other drivers will see you</p>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
|
||||
error={!!errors.email}
|
||||
errorMessage={errors.email}
|
||||
placeholder="you@example.com"
|
||||
disabled={loading}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, password: e.target.value })}
|
||||
error={!!errors.password}
|
||||
errorMessage={errors.password}
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Password Strength */}
|
||||
{formData.password && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${passwordStrength.color}`}
|
||||
style={{ width: `${(passwordStrength.score / 5) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${
|
||||
passwordStrength.score <= 1 ? 'text-red-400' :
|
||||
passwordStrength.score <= 2 ? 'text-warning-amber' :
|
||||
passwordStrength.score <= 3 ? 'text-primary-blue' :
|
||||
'text-performance-green'
|
||||
}`}>
|
||||
{passwordStrength.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1">
|
||||
{passwordRequirements.map((req, index) => (
|
||||
<div key={index} className="flex items-center gap-1.5 text-xs">
|
||||
{req.met ? (
|
||||
<Check className="w-3 h-3 text-performance-green" />
|
||||
) : (
|
||||
<X className="w-3 h-3 text-gray-500" />
|
||||
)}
|
||||
<span className={req.met ? 'text-gray-300' : 'text-gray-500'}>
|
||||
{req.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Role Cards */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{USER_ROLES.map((role, index) => (
|
||||
<motion.div
|
||||
key={role.title}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline"
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-lg bg-${role.color}/20 flex items-center justify-center`}>
|
||||
<role.icon className={`w-5 h-5 text-${role.color}`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, confirmPassword: e.target.value })}
|
||||
error={!!errors.confirmPassword}
|
||||
errorMessage={errors.confirmPassword}
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{formData.confirmPassword && formData.password === formData.confirmPassword && (
|
||||
<p className="mt-1 text-xs text-performance-green flex items-center gap-1">
|
||||
<Check className="w-3 h-3" /> Passwords match
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{errors.submit && (
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-400">{errors.submit}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Creating account...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Create Account
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-charcoal-outline" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-4 bg-iron-gray text-gray-500">or continue with</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-medium">{role.title}</h4>
|
||||
<p className="text-sm text-gray-500">{role.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Demo Login */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDemoLogin}
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-deep-graphite border border-charcoal-outline text-gray-300 hover:bg-iron-gray hover:border-primary-blue/30 transition-all disabled:opacity-50"
|
||||
>
|
||||
<Gamepad2 className="w-5 h-5 text-primary-blue" />
|
||||
<span>Demo Login (iRacing)</span>
|
||||
</button>
|
||||
{/* Features List */}
|
||||
<div className="bg-iron-gray/30 rounded-xl border border-charcoal-outline p-5 mb-8">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Sparkles className="w-4 h-4 text-primary-blue" />
|
||||
<span className="text-sm font-medium text-white">What you'll get</span>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{FEATURES.map((feature, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.3 + index * 0.05 }}
|
||||
className="flex items-center gap-2 text-sm text-gray-400"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-performance-green flex-shrink-0" />
|
||||
{feature}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Login Link */}
|
||||
<p className="mt-6 text-center text-sm text-gray-400">
|
||||
Already have an account?{' '}
|
||||
<Link
|
||||
href={`/auth/login${returnTo !== '/onboarding' ? `?returnTo=${encodeURIComponent(returnTo)}` : ''}`}
|
||||
className="text-primary-blue hover:underline font-medium"
|
||||
{/* Trust Indicators */}
|
||||
<div className="flex items-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure signup</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Gamepad2 className="w-4 h-4" />
|
||||
<span>iRacing integration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Signup Form */}
|
||||
<div className="flex-1 flex items-center justify-center px-4 py-12 overflow-y-auto">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Mobile Logo/Header */}
|
||||
<div className="text-center mb-8 lg:hidden">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Join GridPilot</Heading>
|
||||
<p className="text-gray-400">
|
||||
Create your account and start racing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop Header */}
|
||||
<div className="hidden lg:block text-center mb-8">
|
||||
<Heading level={2} className="mb-2">Create Account</Heading>
|
||||
<p className="text-gray-400">
|
||||
Get started with your free account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative space-y-4">
|
||||
{/* Display Name */}
|
||||
<div>
|
||||
<label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Display Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="displayName"
|
||||
type="text"
|
||||
value={formData.displayName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, displayName: e.target.value })}
|
||||
error={!!errors.displayName}
|
||||
errorMessage={errors.displayName}
|
||||
placeholder="SpeedyRacer42"
|
||||
disabled={loading}
|
||||
className="pl-10"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">This is how other drivers will see you</p>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
|
||||
error={!!errors.email}
|
||||
errorMessage={errors.email}
|
||||
placeholder="you@example.com"
|
||||
disabled={loading}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, password: e.target.value })}
|
||||
error={!!errors.password}
|
||||
errorMessage={errors.password}
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Password Strength */}
|
||||
{formData.password && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
|
||||
<motion.div
|
||||
className={`h-full ${passwordStrength.color}`}
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${(passwordStrength.score / 5) * 100}%` }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${
|
||||
passwordStrength.score <= 1 ? 'text-red-400' :
|
||||
passwordStrength.score <= 2 ? 'text-warning-amber' :
|
||||
passwordStrength.score <= 3 ? 'text-primary-blue' :
|
||||
'text-performance-green'
|
||||
}`}>
|
||||
{passwordStrength.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1">
|
||||
{passwordRequirements.map((req, index) => (
|
||||
<div key={index} className="flex items-center gap-1.5 text-xs">
|
||||
{req.met ? (
|
||||
<Check className="w-3 h-3 text-performance-green" />
|
||||
) : (
|
||||
<X className="w-3 h-3 text-gray-500" />
|
||||
)}
|
||||
<span className={req.met ? 'text-gray-300' : 'text-gray-500'}>
|
||||
{req.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, confirmPassword: e.target.value })}
|
||||
error={!!errors.confirmPassword}
|
||||
errorMessage={errors.confirmPassword}
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{formData.confirmPassword && formData.password === formData.confirmPassword && (
|
||||
<p className="mt-1 text-xs text-performance-green flex items-center gap-1">
|
||||
<Check className="w-3 h-3" /> Passwords match
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
<AnimatePresence>
|
||||
{errors.submit && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
|
||||
>
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-400">{errors.submit}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={loading}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Creating account...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Create Account
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-charcoal-outline" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-4 bg-iron-gray text-gray-500">or sign up with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* iRacing Signup */}
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={handleDemoLogin}
|
||||
disabled={loading}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
whileTap={{ scale: 0.99 }}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-deep-graphite to-iron-gray border border-charcoal-outline text-gray-300 hover:border-primary-blue/30 transition-all disabled:opacity-50 group"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
<Gamepad2 className="w-5 h-5 text-primary-blue" />
|
||||
<span>Demo Login (iRacing)</span>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500 group-hover:translate-x-0.5 transition-transform" />
|
||||
</motion.button>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
By creating an account, you agree to our{' '}
|
||||
<Link href="/terms" className="text-gray-400 hover:underline">Terms of Service</Link>
|
||||
{' '}and{' '}
|
||||
<Link href="/privacy" className="text-gray-400 hover:underline">Privacy Policy</Link>
|
||||
</p>
|
||||
{/* Login Link */}
|
||||
<p className="mt-6 text-center text-sm text-gray-400">
|
||||
Already have an account?{' '}
|
||||
<Link
|
||||
href={`/auth/login${returnTo !== '/onboarding' ? `?returnTo=${encodeURIComponent(returnTo)}` : ''}`}
|
||||
className="text-primary-blue hover:underline font-medium"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
By creating an account, you agree to our{' '}
|
||||
<Link href="/terms" className="text-gray-400 hover:underline">Terms of Service</Link>
|
||||
{' '}and{' '}
|
||||
<Link href="/privacy" className="text-gray-400 hover:underline">Privacy Policy</Link>
|
||||
</p>
|
||||
|
||||
{/* Mobile Role Info */}
|
||||
<div className="mt-8 lg:hidden">
|
||||
<p className="text-center text-xs text-gray-500 mb-4">One account for all roles</p>
|
||||
<div className="flex justify-center gap-6">
|
||||
{USER_ROLES.map((role) => (
|
||||
<div key={role.title} className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-lg bg-${role.color}/20 flex items-center justify-center mb-1`}>
|
||||
<role.icon className={`w-4 h-4 text-${role.color}`} />
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{role.title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -1,40 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import {
|
||||
CreditCard,
|
||||
DollarSign,
|
||||
import StatCard from '@/components/ui/StatCard';
|
||||
import SectionHeader from '@/components/ui/SectionHeader';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import InfoBanner from '@/components/ui/InfoBanner';
|
||||
import PageHeader from '@/components/ui/PageHeader';
|
||||
import { siteConfig } from '@/lib/siteConfig';
|
||||
import {
|
||||
CreditCard,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
Download,
|
||||
Plus,
|
||||
Check,
|
||||
AlertTriangle,
|
||||
FileText,
|
||||
ArrowRight
|
||||
ArrowRight,
|
||||
TrendingUp,
|
||||
Receipt,
|
||||
Building2,
|
||||
Wallet,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
Info,
|
||||
ExternalLink,
|
||||
Percent
|
||||
} from 'lucide-react';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface PaymentMethod {
|
||||
id: string;
|
||||
type: 'card' | 'bank';
|
||||
type: 'card' | 'bank' | 'sepa';
|
||||
last4: string;
|
||||
brand?: string;
|
||||
isDefault: boolean;
|
||||
expiryMonth?: number;
|
||||
expiryYear?: number;
|
||||
bankName?: string;
|
||||
}
|
||||
|
||||
interface Invoice {
|
||||
id: string;
|
||||
invoiceNumber: string;
|
||||
date: Date;
|
||||
dueDate: Date;
|
||||
amount: number;
|
||||
status: 'paid' | 'pending' | 'failed';
|
||||
vatAmount: number;
|
||||
totalAmount: number;
|
||||
status: 'paid' | 'pending' | 'overdue' | 'failed';
|
||||
description: string;
|
||||
sponsorshipType: 'league' | 'team' | 'driver' | 'race' | 'platform';
|
||||
pdfUrl: string;
|
||||
}
|
||||
|
||||
// Mock data
|
||||
interface BillingStats {
|
||||
totalSpent: number;
|
||||
pendingAmount: number;
|
||||
nextPaymentDate: Date;
|
||||
nextPaymentAmount: number;
|
||||
activeSponsorships: number;
|
||||
averageMonthlySpend: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Mock Data
|
||||
// ============================================================================
|
||||
|
||||
const MOCK_PAYMENT_METHODS: PaymentMethod[] = [
|
||||
{
|
||||
id: 'pm-1',
|
||||
@@ -54,49 +92,142 @@ const MOCK_PAYMENT_METHODS: PaymentMethod[] = [
|
||||
expiryMonth: 6,
|
||||
expiryYear: 2026,
|
||||
},
|
||||
{
|
||||
id: 'pm-3',
|
||||
type: 'sepa',
|
||||
last4: '8901',
|
||||
bankName: 'Deutsche Bank',
|
||||
isDefault: false,
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_INVOICES: Invoice[] = [
|
||||
{
|
||||
id: 'inv-1',
|
||||
invoiceNumber: 'GP-2025-001234',
|
||||
date: new Date('2025-11-01'),
|
||||
amount: 1200,
|
||||
dueDate: new Date('2025-11-15'),
|
||||
amount: 1090.91,
|
||||
vatAmount: 207.27,
|
||||
totalAmount: 1298.18,
|
||||
status: 'paid',
|
||||
description: 'GT3 Pro Championship - Main Sponsor (Q4 2025)',
|
||||
description: 'GT3 Pro Championship - Primary Sponsor (Q4 2025)',
|
||||
sponsorshipType: 'league',
|
||||
pdfUrl: '#',
|
||||
},
|
||||
{
|
||||
id: 'inv-2',
|
||||
invoiceNumber: 'GP-2025-001235',
|
||||
date: new Date('2025-10-01'),
|
||||
amount: 400,
|
||||
dueDate: new Date('2025-10-15'),
|
||||
amount: 363.64,
|
||||
vatAmount: 69.09,
|
||||
totalAmount: 432.73,
|
||||
status: 'paid',
|
||||
description: 'Formula Sim Series - Secondary Sponsor (Q4 2025)',
|
||||
description: 'Team Velocity - Gear Sponsor (Q4 2025)',
|
||||
sponsorshipType: 'team',
|
||||
pdfUrl: '#',
|
||||
},
|
||||
{
|
||||
id: 'inv-3',
|
||||
invoiceNumber: 'GP-2025-001236',
|
||||
date: new Date('2025-12-01'),
|
||||
amount: 350,
|
||||
dueDate: new Date('2025-12-15'),
|
||||
amount: 318.18,
|
||||
vatAmount: 60.45,
|
||||
totalAmount: 378.63,
|
||||
status: 'pending',
|
||||
description: 'Alex Thompson - Driver Sponsorship (Dec 2025)',
|
||||
sponsorshipType: 'driver',
|
||||
pdfUrl: '#',
|
||||
},
|
||||
{
|
||||
id: 'inv-4',
|
||||
invoiceNumber: 'GP-2025-001237',
|
||||
date: new Date('2025-11-15'),
|
||||
dueDate: new Date('2025-11-29'),
|
||||
amount: 454.55,
|
||||
vatAmount: 86.36,
|
||||
totalAmount: 540.91,
|
||||
status: 'overdue',
|
||||
description: 'Touring Car Cup - Secondary Sponsor (Q1 2026)',
|
||||
sponsorshipType: 'league',
|
||||
pdfUrl: '#',
|
||||
},
|
||||
];
|
||||
|
||||
function PaymentMethodCard({ method, onSetDefault }: { method: PaymentMethod; onSetDefault: () => void }) {
|
||||
const MOCK_STATS: BillingStats = {
|
||||
totalSpent: 12450,
|
||||
pendingAmount: 919.54,
|
||||
nextPaymentDate: new Date('2025-12-15'),
|
||||
nextPaymentAmount: 378.63,
|
||||
activeSponsorships: 6,
|
||||
averageMonthlySpend: 2075,
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Components
|
||||
// ============================================================================
|
||||
|
||||
function PaymentMethodCard({
|
||||
method,
|
||||
onSetDefault,
|
||||
onRemove
|
||||
}: {
|
||||
method: PaymentMethod;
|
||||
onSetDefault: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const getIcon = () => {
|
||||
if (method.type === 'sepa') return Building2;
|
||||
return CreditCard;
|
||||
};
|
||||
|
||||
const Icon = getIcon();
|
||||
|
||||
const getLabel = () => {
|
||||
if (method.type === 'sepa' && method.bankName) {
|
||||
return `${method.bankName} •••• ${method.last4}`;
|
||||
}
|
||||
return `${method.brand} •••• ${method.last4}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-lg border ${method.isDefault ? 'border-primary-blue/50 bg-primary-blue/5' : 'border-charcoal-outline bg-iron-gray/30'}`}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
||||
className={`p-4 rounded-xl border transition-all ${
|
||||
method.isDefault
|
||||
? 'border-primary-blue/50 bg-gradient-to-r from-primary-blue/10 to-transparent shadow-[0_0_20px_rgba(25,140,255,0.1)]'
|
||||
: 'border-charcoal-outline bg-iron-gray/30 hover:border-charcoal-outline/80'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center">
|
||||
<CreditCard className="w-5 h-5 text-gray-400" />
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
|
||||
method.isDefault ? 'bg-primary-blue/20' : 'bg-iron-gray'
|
||||
}`}>
|
||||
<Icon className={`w-6 h-6 ${method.isDefault ? 'text-primary-blue' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-white">{method.brand} •••• {method.last4}</span>
|
||||
<span className="font-medium text-white">{getLabel()}</span>
|
||||
{method.isDefault && (
|
||||
<span className="px-2 py-0.5 rounded text-xs bg-primary-blue/20 text-primary-blue">Default</span>
|
||||
<span className="px-2 py-0.5 rounded-full text-xs bg-primary-blue/20 text-primary-blue font-medium">
|
||||
Default
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{method.expiryMonth && method.expiryYear && (
|
||||
<span className="text-sm text-gray-500">Expires {method.expiryMonth}/{method.expiryYear}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
Expires {String(method.expiryMonth).padStart(2, '0')}/{method.expiryYear}
|
||||
</span>
|
||||
)}
|
||||
{method.type === 'sepa' && (
|
||||
<span className="text-sm text-gray-500">SEPA Direct Debit</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,58 +237,120 @@ function PaymentMethodCard({ method, onSetDefault }: { method: PaymentMethod; on
|
||||
Set Default
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="secondary" className="text-xs text-gray-400">
|
||||
<Button variant="secondary" onClick={onRemove} className="text-xs text-gray-400 hover:text-racing-red">
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function InvoiceRow({ invoice }: { invoice: Invoice }) {
|
||||
function InvoiceRow({ invoice, index }: { invoice: Invoice; index: number }) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const statusConfig = {
|
||||
paid: { icon: Check, color: 'text-performance-green', bg: 'bg-performance-green/10' },
|
||||
pending: { icon: AlertTriangle, color: 'text-warning-amber', bg: 'bg-warning-amber/10' },
|
||||
failed: { icon: AlertTriangle, color: 'text-racing-red', bg: 'bg-racing-red/10' },
|
||||
paid: {
|
||||
icon: Check,
|
||||
label: 'Paid',
|
||||
color: 'text-performance-green',
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30'
|
||||
},
|
||||
pending: {
|
||||
icon: Clock,
|
||||
label: 'Pending',
|
||||
color: 'text-warning-amber',
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30'
|
||||
},
|
||||
overdue: {
|
||||
icon: AlertTriangle,
|
||||
label: 'Overdue',
|
||||
color: 'text-racing-red',
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30'
|
||||
},
|
||||
failed: {
|
||||
icon: AlertTriangle,
|
||||
label: 'Failed',
|
||||
color: 'text-racing-red',
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30'
|
||||
},
|
||||
};
|
||||
|
||||
const typeLabels = {
|
||||
league: 'League',
|
||||
team: 'Team',
|
||||
driver: 'Driver',
|
||||
race: 'Race',
|
||||
platform: 'Platform',
|
||||
};
|
||||
|
||||
const status = statusConfig[invoice.status];
|
||||
const StatusIcon = status.icon;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/20 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2, delay: shouldReduceMotion ? 0 : index * 0.05 }}
|
||||
className="flex items-center justify-between p-4 border-b border-charcoal-outline/50 last:border-b-0 hover:bg-iron-gray/20 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center">
|
||||
<FileText className="w-5 h-5 text-gray-400" />
|
||||
<Receipt className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white">{invoice.description}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{invoice.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span className="font-medium text-white truncate">{invoice.description}</span>
|
||||
<span className="px-2 py-0.5 rounded text-xs bg-iron-gray text-gray-400 flex-shrink-0">
|
||||
{typeLabels[invoice.sponsorshipType]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-500">
|
||||
<span>{invoice.invoiceNumber}</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
{invoice.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">${invoice.amount.toLocaleString()}</div>
|
||||
<div className={`flex items-center gap-1 text-xs ${status.color}`}>
|
||||
<StatusIcon className="w-3 h-3" />
|
||||
{invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
|
||||
<div className="font-semibold text-white">
|
||||
€{invoice.totalAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
incl. €{invoice.vatAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })} VAT
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
|
||||
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${status.bg} ${status.color} border ${status.border}`}>
|
||||
<StatusIcon className="w-3 h-3" />
|
||||
{status.label}
|
||||
</div>
|
||||
|
||||
<Button variant="secondary" className="text-xs opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Download className="w-3 h-3 mr-1" />
|
||||
PDF
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export default function SponsorBillingPage() {
|
||||
const router = useRouter();
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [paymentMethods, setPaymentMethods] = useState(MOCK_PAYMENT_METHODS);
|
||||
const [showAllInvoices, setShowAllInvoices] = useState(false);
|
||||
|
||||
const handleSetDefault = (methodId: string) => {
|
||||
setPaymentMethods(methods =>
|
||||
@@ -165,103 +358,229 @@ export default function SponsorBillingPage() {
|
||||
);
|
||||
};
|
||||
|
||||
const totalSpent = MOCK_INVOICES.filter(i => i.status === 'paid').reduce((sum, i) => sum + i.amount, 0);
|
||||
const pendingAmount = MOCK_INVOICES.filter(i => i.status === 'pending').reduce((sum, i) => sum + i.amount, 0);
|
||||
const handleRemoveMethod = (methodId: string) => {
|
||||
if (confirm('Remove this payment method?')) {
|
||||
setPaymentMethods(methods => methods.filter(m => m.id !== methodId));
|
||||
}
|
||||
};
|
||||
|
||||
const displayedInvoices = showAllInvoices ? MOCK_INVOICES : MOCK_INVOICES.slice(0, 4);
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: shouldReduceMotion ? 0 : 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 px-4">
|
||||
<motion.div
|
||||
className="max-w-5xl mx-auto py-8 px-4"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<CreditCard className="w-7 h-7 text-warning-amber" />
|
||||
Billing & Payments
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Manage payment methods and view invoices</p>
|
||||
</div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<PageHeader
|
||||
icon={Wallet}
|
||||
title="Billing & Payments"
|
||||
description="Manage payment methods, view invoices, and track your sponsorship spending"
|
||||
iconGradient="from-warning-amber/20 to-warning-amber/5"
|
||||
iconBorder="border-warning-amber/30"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<DollarSign className="w-5 h-5 text-performance-green" />
|
||||
<span className="text-sm text-gray-400">Total Spent</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">${totalSpent.toLocaleString()}</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<AlertTriangle className="w-5 h-5 text-warning-amber" />
|
||||
<span className="text-sm text-gray-400">Pending</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-warning-amber">${pendingAmount.toLocaleString()}</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Calendar className="w-5 h-5 text-primary-blue" />
|
||||
<span className="text-sm text-gray-400">Next Payment</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-white">Dec 15, 2025</div>
|
||||
</Card>
|
||||
</div>
|
||||
{/* Stats Grid */}
|
||||
<motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
<StatCard
|
||||
icon={DollarSign}
|
||||
label="Total Spent"
|
||||
value={`€${MOCK_STATS.totalSpent.toLocaleString('de-DE')}`}
|
||||
subValue="All time"
|
||||
color="text-performance-green"
|
||||
bgColor="bg-performance-green/10"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertTriangle}
|
||||
label="Pending Payments"
|
||||
value={`€${MOCK_STATS.pendingAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })}`}
|
||||
subValue={`${MOCK_INVOICES.filter(i => i.status === 'pending' || i.status === 'overdue').length} invoices`}
|
||||
color="text-warning-amber"
|
||||
bgColor="bg-warning-amber/10"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Calendar}
|
||||
label="Next Payment"
|
||||
value={MOCK_STATS.nextPaymentDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
subValue={`€${MOCK_STATS.nextPaymentAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })}`}
|
||||
color="text-primary-blue"
|
||||
bgColor="bg-primary-blue/10"
|
||||
/>
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="Monthly Average"
|
||||
value={`€${MOCK_STATS.averageMonthlySpend.toLocaleString('de-DE')}`}
|
||||
subValue="Last 6 months"
|
||||
color="text-gray-400"
|
||||
bgColor="bg-iron-gray"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<Card className="mb-8">
|
||||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white">Payment Methods</h2>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Payment Method
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{paymentMethods.map((method) => (
|
||||
<PaymentMethodCard
|
||||
key={method.id}
|
||||
method={method}
|
||||
onSetDefault={() => handleSetDefault(method.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-8 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={CreditCard}
|
||||
title="Payment Methods"
|
||||
action={
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Payment Method
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="p-5 space-y-3">
|
||||
{paymentMethods.map((method) => (
|
||||
<PaymentMethodCard
|
||||
key={method.id}
|
||||
method={method}
|
||||
onSetDefault={() => handleSetDefault(method.id)}
|
||||
onRemove={() => handleRemoveMethod(method.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="px-5 pb-5">
|
||||
<InfoBanner type="info">
|
||||
<p className="mb-1">We support Visa, Mastercard, American Express, and SEPA Direct Debit.</p>
|
||||
<p>All payment information is securely processed and stored by our payment provider.</p>
|
||||
</InfoBanner>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Billing History */}
|
||||
<Card>
|
||||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white">Billing History</h2>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export All
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
{MOCK_INVOICES.map((invoice) => (
|
||||
<InvoiceRow key={invoice.id} invoice={invoice} />
|
||||
))}
|
||||
</div>
|
||||
<div className="p-4 border-t border-charcoal-outline">
|
||||
<Button variant="secondary" className="w-full">
|
||||
View All Invoices
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-8 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={FileText}
|
||||
title="Billing History"
|
||||
color="text-warning-amber"
|
||||
action={
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export All
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
{displayedInvoices.map((invoice, index) => (
|
||||
<InvoiceRow key={invoice.id} invoice={invoice} index={index} />
|
||||
))}
|
||||
</div>
|
||||
{MOCK_INVOICES.length > 4 && (
|
||||
<div className="p-4 border-t border-charcoal-outline">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
onClick={() => setShowAllInvoices(!showAllInvoices)}
|
||||
>
|
||||
{showAllInvoices ? 'Show Less' : `View All ${MOCK_INVOICES.length} Invoices`}
|
||||
<ChevronRight className={`w-4 h-4 ml-2 transition-transform ${showAllInvoices ? 'rotate-90' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Platform Fee Notice */}
|
||||
<div className="mt-6 rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
||||
<h3 className="font-medium text-white mb-2">Platform Fee</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
A 10% platform fee is applied to all sponsorship payments. This fee helps maintain the platform,
|
||||
provide analytics, and ensure quality sponsorship placements.
|
||||
</p>
|
||||
</div>
|
||||
{/* Platform Fee & VAT Information */}
|
||||
<motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Platform Fee */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="p-5 border-b border-charcoal-outline bg-gradient-to-r from-iron-gray/30 to-transparent">
|
||||
<h3 className="font-semibold text-white flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-iron-gray/50">
|
||||
<Percent className="w-4 h-4 text-primary-blue" />
|
||||
</div>
|
||||
Platform Fee
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<div className="text-3xl font-bold text-white mb-2">
|
||||
{siteConfig.fees.platformFeePercent}%
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mb-4">
|
||||
{siteConfig.fees.description}
|
||||
</p>
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<p>• Applied to all sponsorship payments</p>
|
||||
<p>• Covers platform maintenance and analytics</p>
|
||||
<p>• Ensures quality sponsorship placements</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Alpha Notice */}
|
||||
<div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
||||
<p className="text-xs text-gray-400">
|
||||
<strong className="text-warning-amber">Alpha Note:</strong> Payment processing is demonstration-only.
|
||||
Real billing will be available when the payment system is fully implemented.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* VAT Information */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="p-5 border-b border-charcoal-outline bg-gradient-to-r from-iron-gray/30 to-transparent">
|
||||
<h3 className="font-semibold text-white flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-iron-gray/50">
|
||||
<Receipt className="w-4 h-4 text-performance-green" />
|
||||
</div>
|
||||
VAT Information
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<p className="text-sm text-gray-400 mb-4">
|
||||
{siteConfig.vat.notice}
|
||||
</p>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex justify-between items-center py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-500">Standard VAT Rate</span>
|
||||
<span className="text-white font-medium">{siteConfig.vat.standardRate}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">B2B Reverse Charge</span>
|
||||
<span className="text-performance-green font-medium">Available</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-4">
|
||||
Enter your VAT ID in Settings to enable reverse charge for B2B transactions.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Billing Support */}
|
||||
<motion.div variants={itemVariants} className="mt-6">
|
||||
<Card className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 rounded-xl bg-iron-gray">
|
||||
<Info className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-white">Need help with billing?</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Contact our billing support for questions about invoices, payments, or refunds.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
Contact Support
|
||||
<ExternalLink className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,355 +1,652 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import {
|
||||
BarChart3,
|
||||
Eye,
|
||||
Users,
|
||||
Trophy,
|
||||
TrendingUp,
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import InfoBanner from '@/components/ui/InfoBanner';
|
||||
import {
|
||||
BarChart3,
|
||||
Eye,
|
||||
Users,
|
||||
Trophy,
|
||||
TrendingUp,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
Target,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight,
|
||||
ExternalLink,
|
||||
Loader2
|
||||
Loader2,
|
||||
Car,
|
||||
Flag,
|
||||
Megaphone,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Bell,
|
||||
Settings,
|
||||
CreditCard,
|
||||
FileText,
|
||||
RefreshCw
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface SponsorshipMetrics {
|
||||
impressions: number;
|
||||
impressionsChange: number;
|
||||
uniqueViewers: number;
|
||||
viewersChange: number;
|
||||
races: number;
|
||||
drivers: number;
|
||||
exposure: number;
|
||||
exposureChange: number;
|
||||
}
|
||||
|
||||
interface SponsoredLeague {
|
||||
id: string;
|
||||
name: string;
|
||||
tier: 'main' | 'secondary';
|
||||
drivers: number;
|
||||
races: number;
|
||||
impressions: number;
|
||||
status: 'active' | 'upcoming' | 'completed';
|
||||
}
|
||||
|
||||
interface SponsorDashboardData {
|
||||
sponsorId: string;
|
||||
sponsorName: string;
|
||||
metrics: SponsorshipMetrics;
|
||||
sponsoredLeagues: SponsoredLeague[];
|
||||
investment: {
|
||||
activeSponsorships: number;
|
||||
totalInvestment: number;
|
||||
costPerThousandViews: number;
|
||||
};
|
||||
}
|
||||
|
||||
// Static mock data for prototype
|
||||
const MOCK_SPONSOR_DATA = {
|
||||
sponsorId: 'demo-sponsor-1',
|
||||
sponsorName: 'Acme Racing Co.',
|
||||
metrics: {
|
||||
totalImpressions: 127450,
|
||||
impressionsChange: 12.5,
|
||||
uniqueViewers: 34200,
|
||||
viewersChange: 8.3,
|
||||
activeSponsors: 7,
|
||||
totalInvestment: 4850,
|
||||
avgEngagement: 4.2,
|
||||
engagementChange: 0.8,
|
||||
},
|
||||
sponsorships: {
|
||||
leagues: [
|
||||
{ id: 'l1', name: 'GT3 Masters Championship', tier: 'main', drivers: 48, impressions: 45200, status: 'active' },
|
||||
{ id: 'l2', name: 'Endurance Pro Series', tier: 'secondary', drivers: 72, impressions: 38400, status: 'active' },
|
||||
],
|
||||
teams: [
|
||||
{ id: 't1', name: 'Velocity Racing', drivers: 4, impressions: 12300, status: 'active' },
|
||||
{ id: 't2', name: 'Storm Motorsport', drivers: 3, impressions: 8900, status: 'active' },
|
||||
],
|
||||
drivers: [
|
||||
{ id: 'd1', name: 'Max Velocity', team: 'Velocity Racing', impressions: 8200, status: 'active' },
|
||||
{ id: 'd2', name: 'Sarah Storm', team: 'Storm Motorsport', impressions: 6100, status: 'active' },
|
||||
],
|
||||
races: [
|
||||
{ id: 'r1', name: 'Spa 24 Hours', league: 'Endurance Pro', impressions: 15600, date: '2025-12-20', status: 'upcoming' },
|
||||
],
|
||||
platform: [
|
||||
{ id: 'p1', name: 'Homepage Banner', placement: 'Header', impressions: 52000, status: 'active' },
|
||||
],
|
||||
},
|
||||
recentActivity: [
|
||||
{ id: 'a1', type: 'race', message: 'GT3 Masters Championship race completed', time: '2 hours ago', impressions: 1240 },
|
||||
{ id: 'a2', type: 'driver', message: 'Max Velocity finished P1 at Monza', time: '5 hours ago', impressions: 890 },
|
||||
{ id: 'a3', type: 'league', message: 'New driver joined Endurance Pro Series', time: '1 day ago', impressions: null },
|
||||
{ id: 'a4', type: 'team', message: 'Velocity Racing won team championship', time: '2 days ago', impressions: 2100 },
|
||||
],
|
||||
upcomingRenewals: [
|
||||
{ id: 'ren1', name: 'GT3 Masters Championship', type: 'league', renewDate: '2026-01-15', price: 1200 },
|
||||
{ id: 'ren2', name: 'Homepage Banner', type: 'platform', renewDate: '2025-12-31', price: 500 },
|
||||
],
|
||||
};
|
||||
|
||||
// Metric Card Component
|
||||
function MetricCard({
|
||||
title,
|
||||
value,
|
||||
change,
|
||||
icon: Icon,
|
||||
suffix = '',
|
||||
prefix = '',
|
||||
delay = 0,
|
||||
}: {
|
||||
title: string;
|
||||
value: number | string;
|
||||
change?: number;
|
||||
icon: typeof Eye;
|
||||
suffix?: string;
|
||||
prefix?: string;
|
||||
delay?: number;
|
||||
}) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const isPositive = change && change > 0;
|
||||
const isNegative = change && change < 0;
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
|
||||
<Icon className="w-5 h-5 text-primary-blue" />
|
||||
</div>
|
||||
{change !== undefined && (
|
||||
<div className={`flex items-center gap-1 text-sm ${
|
||||
isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
|
||||
}`}>
|
||||
{isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
|
||||
{Math.abs(change)}%
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay }}
|
||||
>
|
||||
<Card className="p-5 h-full">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
|
||||
<Icon className="w-5 h-5 text-primary-blue" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-1">
|
||||
{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">{title}</div>
|
||||
</Card>
|
||||
{change !== undefined && (
|
||||
<div className={`flex items-center gap-1 text-sm font-medium ${
|
||||
isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
|
||||
}`}>
|
||||
{isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
|
||||
{Math.abs(change)}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-1">
|
||||
{prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">{title}</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function LeagueRow({ league }: { league: SponsoredLeague }) {
|
||||
const statusColors = {
|
||||
active: 'bg-performance-green/20 text-performance-green',
|
||||
upcoming: 'bg-warning-amber/20 text-warning-amber',
|
||||
completed: 'bg-gray-500/20 text-gray-400',
|
||||
};
|
||||
// Sponsorship Category Card
|
||||
function SponsorshipCategoryCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
count,
|
||||
impressions,
|
||||
color,
|
||||
href
|
||||
}: {
|
||||
icon: typeof Trophy;
|
||||
title: string;
|
||||
count: number;
|
||||
impressions: number;
|
||||
color: string;
|
||||
href: string;
|
||||
}) {
|
||||
return (
|
||||
<Link href={href}>
|
||||
<Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
|
||||
<Icon className={`w-5 h-5 ${color}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-medium">{title}</p>
|
||||
<p className="text-sm text-gray-500">{count} active</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-white font-semibold">{impressions.toLocaleString()}</p>
|
||||
<p className="text-xs text-gray-500">impressions</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const tierColors = {
|
||||
main: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
|
||||
secondary: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||
// Activity Item
|
||||
function ActivityItem({ activity }: { activity: typeof MOCK_SPONSOR_DATA.recentActivity[0] }) {
|
||||
const typeColors = {
|
||||
race: 'bg-warning-amber',
|
||||
league: 'bg-primary-blue',
|
||||
team: 'bg-purple-400',
|
||||
driver: 'bg-performance-green',
|
||||
platform: 'bg-racing-red',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`px-2 py-1 rounded text-xs font-medium border ${tierColors[league.tier]}`}>
|
||||
{league.tier === 'main' ? 'Main Sponsor' : 'Secondary'}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white">{league.name}</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{league.drivers} drivers • {league.races} races
|
||||
</div>
|
||||
<div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
|
||||
<div className={`w-2 h-2 rounded-full mt-2 ${typeColors[activity.type as keyof typeof typeColors] || 'bg-gray-500'}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{activity.message}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500">{activity.time}</span>
|
||||
{activity.impressions && (
|
||||
<>
|
||||
<span className="text-xs text-gray-600">•</span>
|
||||
<span className="text-xs text-gray-400">{activity.impressions.toLocaleString()} views</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-medium text-white">{league.impressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Renewal Alert
|
||||
function RenewalAlert({ renewal }: { renewal: typeof MOCK_SPONSOR_DATA.upcomingRenewals[0] }) {
|
||||
const typeIcons = {
|
||||
league: Trophy,
|
||||
team: Users,
|
||||
driver: Car,
|
||||
race: Flag,
|
||||
platform: Megaphone,
|
||||
};
|
||||
const Icon = typeIcons[renewal.type as keyof typeof typeIcons] || Trophy;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className="w-4 h-4 text-warning-amber" />
|
||||
<div>
|
||||
<p className="text-sm text-white">{renewal.name}</p>
|
||||
<p className="text-xs text-gray-400">Renews {renewal.renewDate}</p>
|
||||
</div>
|
||||
<div className={`px-2 py-1 rounded text-xs font-medium ${statusColors[league.status]}`}>
|
||||
{league.status}
|
||||
</div>
|
||||
<Link href={`/leagues/${league.id}`}>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
View
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-white">${renewal.price}</p>
|
||||
<Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
|
||||
Renew
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SponsorDashboardPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | 'all'>('30d');
|
||||
const [data, setData] = useState<SponsorDashboardData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Simulate loading
|
||||
useEffect(() => {
|
||||
async function fetchDashboard() {
|
||||
try {
|
||||
const response = await fetch('/api/sponsors/dashboard');
|
||||
if (response.ok) {
|
||||
const dashboardData: SponsorDashboardData = await response.json();
|
||||
setData(dashboardData);
|
||||
} else {
|
||||
setError('Failed to load sponsor dashboard');
|
||||
}
|
||||
} catch {
|
||||
setError('Failed to load sponsor dashboard');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchDashboard();
|
||||
const timer = setTimeout(() => setLoading(false), 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const data = MOCK_SPONSOR_DATA;
|
||||
|
||||
// Calculate category totals
|
||||
const categoryData = {
|
||||
leagues: {
|
||||
count: data.sponsorships.leagues.length,
|
||||
impressions: data.sponsorships.leagues.reduce((sum, l) => sum + l.impressions, 0),
|
||||
},
|
||||
teams: {
|
||||
count: data.sponsorships.teams.length,
|
||||
impressions: data.sponsorships.teams.reduce((sum, t) => sum + t.impressions, 0),
|
||||
},
|
||||
drivers: {
|
||||
count: data.sponsorships.drivers.length,
|
||||
impressions: data.sponsorships.drivers.reduce((sum, d) => sum + d.impressions, 0),
|
||||
},
|
||||
races: {
|
||||
count: data.sponsorships.races.length,
|
||||
impressions: data.sponsorships.races.reduce((sum, r) => sum + r.impressions, 0),
|
||||
},
|
||||
platform: {
|
||||
count: data.sponsorships.platform.length,
|
||||
impressions: data.sponsorships.platform.reduce((sum, p) => sum + p.impressions, 0),
|
||||
},
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-blue" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
<div className="rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
||||
<p className="text-sm text-warning-amber">
|
||||
{error ?? 'No sponsor dashboard data available yet.'}
|
||||
</p>
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-blue mx-auto mb-4" />
|
||||
<p className="text-gray-400">Loading dashboard...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const dashboardData = data;
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Sponsor Dashboard</h1>
|
||||
<p className="text-gray-400">Track your sponsorship performance and exposure</p>
|
||||
<p className="text-gray-400">Welcome back, {data.sponsorName}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(['7d', '30d', '90d', 'all'] as const).map((range) => (
|
||||
<button
|
||||
key={range}
|
||||
onClick={() => setTimeRange(range)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
timeRange === range
|
||||
? 'bg-primary-blue text-white'
|
||||
: 'bg-iron-gray/50 text-gray-400 hover:bg-iron-gray'
|
||||
}`}
|
||||
>
|
||||
{range === 'all' ? 'All Time' : range}
|
||||
</button>
|
||||
))}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Time Range Selector */}
|
||||
<div className="flex items-center bg-iron-gray/50 rounded-lg p-1">
|
||||
{(['7d', '30d', '90d', 'all'] as const).map((range) => (
|
||||
<button
|
||||
key={range}
|
||||
onClick={() => setTimeRange(range)}
|
||||
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
||||
timeRange === range
|
||||
? 'bg-primary-blue text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{range === 'all' ? 'All' : range}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Button variant="secondary" className="hidden sm:flex">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
</Button>
|
||||
<Link href="/sponsor/settings">
|
||||
<Button variant="secondary" className="hidden sm:flex">
|
||||
<Settings className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<MetricCard
|
||||
title="Total Impressions"
|
||||
value={dashboardData.metrics.impressions}
|
||||
change={dashboardData.metrics.impressionsChange}
|
||||
value={data.metrics.totalImpressions}
|
||||
change={data.metrics.impressionsChange}
|
||||
icon={Eye}
|
||||
delay={0}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Unique Viewers"
|
||||
value={dashboardData.metrics.uniqueViewers}
|
||||
change={dashboardData.metrics.viewersChange}
|
||||
value={data.metrics.uniqueViewers}
|
||||
change={data.metrics.viewersChange}
|
||||
icon={Users}
|
||||
delay={0.1}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Exposure Score"
|
||||
value={dashboardData.metrics.exposure}
|
||||
change={dashboardData.metrics.exposureChange}
|
||||
icon={Target}
|
||||
title="Engagement Rate"
|
||||
value={data.metrics.avgEngagement}
|
||||
change={data.metrics.engagementChange}
|
||||
icon={TrendingUp}
|
||||
suffix="%"
|
||||
delay={0.2}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Active Drivers"
|
||||
value={dashboardData.metrics.drivers}
|
||||
icon={Trophy}
|
||||
title="Total Investment"
|
||||
value={data.metrics.totalInvestment}
|
||||
icon={DollarSign}
|
||||
prefix="$"
|
||||
delay={0.3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sponsorship Categories */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">Your Sponsorships</h2>
|
||||
<Link href="/sponsor/campaigns">
|
||||
<Button variant="secondary" className="text-sm">
|
||||
View All
|
||||
<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
|
||||
<SponsorshipCategoryCard
|
||||
icon={Trophy}
|
||||
title="Leagues"
|
||||
count={categoryData.leagues.count}
|
||||
impressions={categoryData.leagues.impressions}
|
||||
color="text-primary-blue"
|
||||
href="/sponsor/campaigns?type=leagues"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Users}
|
||||
title="Teams"
|
||||
count={categoryData.teams.count}
|
||||
impressions={categoryData.teams.impressions}
|
||||
color="text-purple-400"
|
||||
href="/sponsor/campaigns?type=teams"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Car}
|
||||
title="Drivers"
|
||||
count={categoryData.drivers.count}
|
||||
impressions={categoryData.drivers.impressions}
|
||||
color="text-performance-green"
|
||||
href="/sponsor/campaigns?type=drivers"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Flag}
|
||||
title="Races"
|
||||
count={categoryData.races.count}
|
||||
impressions={categoryData.races.impressions}
|
||||
color="text-warning-amber"
|
||||
href="/sponsor/campaigns?type=races"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Megaphone}
|
||||
title="Platform Ads"
|
||||
count={categoryData.platform.count}
|
||||
impressions={categoryData.platform.impressions}
|
||||
color="text-racing-red"
|
||||
href="/sponsor/campaigns?type=platform"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Sponsored Leagues */}
|
||||
<div className="lg:col-span-2">
|
||||
{/* Left Column - Sponsored Entities */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Top Performing Sponsorships */}
|
||||
<Card>
|
||||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white">Sponsored Leagues</h2>
|
||||
<h2 className="text-lg font-semibold text-white">Top Performing</h2>
|
||||
<Link href="/leagues">
|
||||
<Button variant="secondary" className="text-sm">
|
||||
Browse Leagues
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
Find More
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
{dashboardData.sponsoredLeagues.length > 0 ? (
|
||||
dashboardData.sponsoredLeagues.map((league) => (
|
||||
<LeagueRow key={league.id} league={league} />
|
||||
))
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{/* Leagues */}
|
||||
{data.sponsorships.leagues.map((league) => (
|
||||
<div key={league.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
league.tier === 'main'
|
||||
? 'bg-primary-blue/20 text-primary-blue border border-primary-blue/30'
|
||||
: 'bg-purple-500/20 text-purple-400 border border-purple-500/30'
|
||||
}`}>
|
||||
{league.tier === 'main' ? 'Main' : 'Secondary'}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium text-white">{league.name}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{league.drivers} drivers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{league.impressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
</div>
|
||||
<Link href={`/sponsor/leagues/${league.id}`}>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Teams */}
|
||||
{data.sponsorships.teams.map((team) => (
|
||||
<div key={team.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="px-2 py-1 rounded text-xs font-medium bg-purple-500/20 text-purple-400 border border-purple-500/30">
|
||||
Team
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium text-white">{team.name}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{team.drivers} drivers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{team.impressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Drivers */}
|
||||
{data.sponsorships.drivers.slice(0, 2).map((driver) => (
|
||||
<div key={driver.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="px-2 py-1 rounded text-xs font-medium bg-performance-green/20 text-performance-green border border-performance-green/30">
|
||||
Driver
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Car className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium text-white">{driver.name}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{driver.team}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{driver.impressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<Card>
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-warning-amber" />
|
||||
Upcoming Sponsored Events
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{data.sponsorships.races.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{data.sponsorships.races.map((race) => (
|
||||
<div key={race.id} className="flex items-center justify-between p-3 rounded-lg bg-iron-gray/30">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-warning-amber/10 flex items-center justify-center">
|
||||
<Flag className="w-5 h-5 text-warning-amber" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-white">{race.name}</p>
|
||||
<p className="text-sm text-gray-500">{race.league} • {race.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-warning-amber/20 text-warning-amber">
|
||||
{race.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 text-center text-gray-400">
|
||||
<p>No active sponsorships yet.</p>
|
||||
<Link href="/leagues" className="text-primary-blue hover:underline mt-2 inline-block">
|
||||
Browse leagues to sponsor
|
||||
</Link>
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No upcoming sponsored events</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats & Actions */}
|
||||
{/* Right Column - Activity & Quick Actions */}
|
||||
<div className="space-y-6">
|
||||
{/* Investment Summary */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Investment Summary</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Active Sponsorships</span>
|
||||
<span className="font-medium text-white">{dashboardData.investment.activeSponsorships}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Total Investment</span>
|
||||
<span className="font-medium text-white">${dashboardData.investment.totalInvestment.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Cost per 1K Views</span>
|
||||
<span className="font-medium text-performance-green">${dashboardData.investment.costPerThousandViews.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Next Payment</span>
|
||||
<span className="font-medium text-white">Dec 15, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-performance-green mt-2" />
|
||||
<div>
|
||||
<p className="text-sm text-white">GT3 Pro Championship race completed</p>
|
||||
<p className="text-xs text-gray-500">2 hours ago • 1,240 views</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-blue mt-2" />
|
||||
<div>
|
||||
<p className="text-sm text-white">New driver joined Endurance Masters</p>
|
||||
<p className="text-xs text-gray-500">5 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-warning-amber mt-2" />
|
||||
<div>
|
||||
<p className="text-sm text-white">Touring Car Cup season starting soon</p>
|
||||
<p className="text-xs text-gray-500">1 day ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
|
||||
<div className="space-y-2">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
View Detailed Analytics
|
||||
</Button>
|
||||
<Link href="/sponsor/billing" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<DollarSign className="w-4 h-4 mr-2" />
|
||||
Manage Payments
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/leagues" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<Target className="w-4 h-4 mr-2" />
|
||||
Find New Leagues
|
||||
Find Leagues to Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/teams" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Browse Teams
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/drivers" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<Car className="w-4 h-4 mr-2" />
|
||||
Discover Drivers
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/sponsor/billing" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
Manage Billing
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/sponsor/campaigns" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
View Analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alpha Notice */}
|
||||
<div className="mt-8 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
||||
<p className="text-xs text-gray-400">
|
||||
<strong className="text-warning-amber">Alpha Note:</strong> Sponsor analytics data shown here is demonstration-only.
|
||||
Real analytics will be available when the sponsorship system is fully implemented.
|
||||
</p>
|
||||
{/* Renewal Alerts */}
|
||||
{data.upcomingRenewals.length > 0 && (
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Bell className="w-5 h-5 text-warning-amber" />
|
||||
Upcoming Renewals
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{data.upcomingRenewals.map((renewal) => (
|
||||
<RenewalAlert key={renewal.id} renewal={renewal} />
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
|
||||
<div>
|
||||
{data.recentActivity.map((activity) => (
|
||||
<ActivityItem key={activity.id} activity={activity} />
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Investment Summary */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-primary-blue" />
|
||||
Investment Summary
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Active Sponsorships</span>
|
||||
<span className="font-medium text-white">{data.metrics.activeSponsors}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Total Investment</span>
|
||||
<span className="font-medium text-white">${data.metrics.totalInvestment.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Cost per 1K Views</span>
|
||||
<span className="font-medium text-performance-green">
|
||||
${(data.metrics.totalInvestment / data.metrics.totalImpressions * 1000).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Next Invoice</span>
|
||||
<span className="font-medium text-white">Jan 1, 2026</span>
|
||||
</div>
|
||||
<div className="pt-3 border-t border-charcoal-outline">
|
||||
<Link href="/sponsor/billing">
|
||||
<Button variant="secondary" className="w-full text-sm">
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
View Billing Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useParams, useSearchParams } from 'next/navigation';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { siteConfig } from '@/lib/siteConfig';
|
||||
import {
|
||||
Trophy,
|
||||
Users,
|
||||
@@ -14,147 +16,246 @@ import {
|
||||
Download,
|
||||
Image as ImageIcon,
|
||||
ExternalLink,
|
||||
ChevronRight
|
||||
ChevronRight,
|
||||
Star,
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
Flag,
|
||||
Car,
|
||||
BarChart3,
|
||||
ArrowUpRight,
|
||||
Megaphone,
|
||||
CreditCard,
|
||||
FileText
|
||||
} from 'lucide-react';
|
||||
|
||||
interface LeagueDriver {
|
||||
id: string;
|
||||
name: string;
|
||||
country: string;
|
||||
position: number;
|
||||
races: number;
|
||||
impressions: number;
|
||||
}
|
||||
|
||||
// Mock data
|
||||
// Mock data for league detail
|
||||
const MOCK_LEAGUE = {
|
||||
id: 'league-1',
|
||||
name: 'GT3 Pro Championship',
|
||||
tier: 'main' as const,
|
||||
name: 'GT3 Masters Championship',
|
||||
game: 'iRacing',
|
||||
tier: 'premium' as const,
|
||||
season: 'Season 3',
|
||||
drivers: 32,
|
||||
description: 'Premier GT3 racing with top-tier drivers competing across the world\'s most iconic circuits. Weekly broadcasts and an active community make this league a premium sponsorship opportunity.',
|
||||
drivers: 48,
|
||||
races: 12,
|
||||
completedRaces: 8,
|
||||
impressions: 45200,
|
||||
totalImpressions: 45200,
|
||||
avgViewsPerRace: 5650,
|
||||
logoPlacement: 'Primary hood placement + League page banner',
|
||||
status: 'active' as const,
|
||||
engagement: 4.2,
|
||||
rating: 4.8,
|
||||
seasonStatus: 'active' as const,
|
||||
seasonDates: { start: '2025-10-01', end: '2026-02-28' },
|
||||
nextRace: { name: 'Spa-Francorchamps', date: '2025-12-20' },
|
||||
sponsorSlots: {
|
||||
main: {
|
||||
available: true,
|
||||
price: 1200,
|
||||
benefits: [
|
||||
'Primary logo placement on all liveries',
|
||||
'League page header banner',
|
||||
'Race results page branding',
|
||||
'Social media feature posts',
|
||||
'Newsletter sponsor spot',
|
||||
]
|
||||
},
|
||||
secondary: {
|
||||
available: 1,
|
||||
total: 2,
|
||||
price: 400,
|
||||
benefits: [
|
||||
'Secondary logo on liveries',
|
||||
'League page sidebar placement',
|
||||
'Race results mention',
|
||||
'Social media mentions',
|
||||
]
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const MOCK_DRIVERS: LeagueDriver[] = [
|
||||
{ id: 'd1', name: 'Max Verstappen', country: 'NL', position: 1, races: 8, impressions: 4200 },
|
||||
{ id: 'd2', name: 'Lewis Hamilton', country: 'GB', position: 2, races: 8, impressions: 3980 },
|
||||
{ id: 'd3', name: 'Charles Leclerc', country: 'MC', position: 3, races: 8, impressions: 3750 },
|
||||
{ id: 'd4', name: 'Lando Norris', country: 'GB', position: 4, races: 7, impressions: 3420 },
|
||||
{ id: 'd5', name: 'Carlos Sainz', country: 'ES', position: 5, races: 8, impressions: 3100 },
|
||||
const MOCK_DRIVERS = [
|
||||
{ id: 'd1', name: 'Max Verstappen', country: 'NL', position: 1, races: 8, impressions: 4200, team: 'Red Bull Racing' },
|
||||
{ id: 'd2', name: 'Lewis Hamilton', country: 'GB', position: 2, races: 8, impressions: 3980, team: 'Mercedes AMG' },
|
||||
{ id: 'd3', name: 'Charles Leclerc', country: 'MC', position: 3, races: 8, impressions: 3750, team: 'Ferrari' },
|
||||
{ id: 'd4', name: 'Lando Norris', country: 'GB', position: 4, races: 7, impressions: 3420, team: 'McLaren' },
|
||||
{ id: 'd5', name: 'Carlos Sainz', country: 'ES', position: 5, races: 8, impressions: 3100, team: 'Ferrari' },
|
||||
];
|
||||
|
||||
const MOCK_RACES = [
|
||||
{ id: 'r1', name: 'Spa-Francorchamps', date: '2025-12-01', views: 6200, status: 'completed' },
|
||||
{ id: 'r1', name: 'Spa-Francorchamps', date: '2025-12-20', views: 0, status: 'upcoming' },
|
||||
{ id: 'r2', name: 'Monza', date: '2025-12-08', views: 5800, status: 'completed' },
|
||||
{ id: 'r3', name: 'Nürburgring', date: '2025-12-15', views: 0, status: 'upcoming' },
|
||||
{ id: 'r4', name: 'Suzuka', date: '2025-12-22', views: 0, status: 'upcoming' },
|
||||
{ id: 'r3', name: 'Silverstone', date: '2025-11-24', views: 6200, status: 'completed' },
|
||||
{ id: 'r4', name: 'Nürburgring', date: '2025-11-10', views: 5400, status: 'completed' },
|
||||
];
|
||||
|
||||
type TabType = 'overview' | 'drivers' | 'races' | 'sponsor';
|
||||
|
||||
export default function SponsorLeagueDetailPage() {
|
||||
const params = useParams();
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'drivers' | 'races' | 'assets'>('overview');
|
||||
const searchParams = useSearchParams();
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const showSponsorAction = searchParams.get('action') === 'sponsor';
|
||||
const [activeTab, setActiveTab] = useState<TabType>(showSponsorAction ? 'sponsor' : 'overview');
|
||||
const [selectedTier, setSelectedTier] = useState<'main' | 'secondary'>('main');
|
||||
|
||||
const league = MOCK_LEAGUE;
|
||||
const tierConfig = {
|
||||
premium: { color: 'text-yellow-400', bgColor: 'bg-yellow-500/10', border: 'border-yellow-500/30' },
|
||||
standard: { color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', border: 'border-primary-blue/30' },
|
||||
starter: { color: 'text-gray-400', bgColor: 'bg-gray-500/10', border: 'border-gray-500/30' },
|
||||
};
|
||||
|
||||
const config = tierConfig[league.tier];
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
|
||||
<Link href="/sponsor/dashboard" className="hover:text-white">Dashboard</Link>
|
||||
<Link href="/sponsor/dashboard" className="hover:text-white transition-colors">Dashboard</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<Link href="/sponsor/leagues" className="hover:text-white">Leagues</Link>
|
||||
<Link href="/sponsor/leagues" className="hover:text-white transition-colors">Leagues</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-white">{MOCK_LEAGUE.name}</span>
|
||||
<span className="text-white">{league.name}</span>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start justify-between gap-6 mb-8">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-2xl font-bold text-white">{MOCK_LEAGUE.name}</h1>
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-primary-blue/20 text-primary-blue border border-primary-blue/30">
|
||||
Main Sponsor
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium capitalize ${config.bgColor} ${config.color} border ${config.border}`}>
|
||||
⭐ {league.tier}
|
||||
</span>
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium bg-performance-green/10 text-performance-green">
|
||||
Active Season
|
||||
</span>
|
||||
<div className="flex items-center gap-1 px-2 py-1 rounded bg-iron-gray/50">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
||||
<span className="text-sm font-medium text-white">{league.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400">{MOCK_LEAGUE.season} • {MOCK_LEAGUE.completedRaces}/{MOCK_LEAGUE.races} races completed</p>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">{league.name}</h1>
|
||||
<p className="text-gray-400 mb-4">{league.game} • {league.season} • {league.completedRaces}/{league.races} races completed</p>
|
||||
<p className="text-gray-400 max-w-2xl">{league.description}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="secondary">
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View League Page
|
||||
</Button>
|
||||
<Button variant="primary">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download Report
|
||||
</Button>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<Link href={`/leagues/${league.id}`}>
|
||||
<Button variant="secondary">
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View League
|
||||
</Button>
|
||||
</Link>
|
||||
{(league.sponsorSlots.main.available || league.sponsorSlots.secondary.available > 0) && (
|
||||
<Button variant="primary" onClick={() => setActiveTab('sponsor')}>
|
||||
<Megaphone className="w-4 h-4 mr-2" />
|
||||
Become a Sponsor
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
|
||||
<Eye className="w-5 h-5 text-primary-blue" />
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
|
||||
<Eye className="w-5 h-5 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{league.totalImpressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-400">Total Views</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.impressions.toLocaleString()}</div>
|
||||
<div className="text-sm text-gray-400">Total Impressions</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
|
||||
<TrendingUp className="w-5 h-5 text-performance-green" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{league.avgViewsPerRace.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-400">Avg/Race</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
|
||||
<TrendingUp className="w-5 h-5 text-performance-green" />
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10">
|
||||
<Users className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{league.drivers}</div>
|
||||
<div className="text-xs text-gray-400">Drivers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.avgViewsPerRace.toLocaleString()}</div>
|
||||
<div className="text-sm text-gray-400">Avg Views/Race</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
|
||||
<BarChart3 className="w-5 h-5 text-warning-amber" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{league.engagement}%</div>
|
||||
<div className="text-xs text-gray-400">Engagement</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10">
|
||||
<Users className="w-5 h-5 text-purple-400" />
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-racing-red/10">
|
||||
<Calendar className="w-5 h-5 text-racing-red" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{league.races - league.completedRaces}</div>
|
||||
<div className="text-xs text-gray-400">Races Left</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.drivers}</div>
|
||||
<div className="text-sm text-gray-400">Active Drivers</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
|
||||
<Calendar className="w-5 h-5 text-warning-amber" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.races - MOCK_LEAGUE.completedRaces}</div>
|
||||
<div className="text-sm text-gray-400">Races Remaining</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 mb-6 border-b border-charcoal-outline">
|
||||
{(['overview', 'drivers', 'races', 'assets'] as const).map((tab) => (
|
||||
<div className="flex gap-1 mb-6 border-b border-charcoal-outline overflow-x-auto">
|
||||
{(['overview', 'drivers', 'races', 'sponsor'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2 text-sm font-medium capitalize transition-colors border-b-2 -mb-px ${
|
||||
className={`px-4 py-3 text-sm font-medium capitalize transition-colors border-b-2 -mb-px whitespace-nowrap ${
|
||||
activeTab === tab
|
||||
? 'text-primary-blue border-primary-blue'
|
||||
: 'text-gray-400 border-transparent hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
{tab === 'sponsor' ? '🎯 Become a Sponsor' : tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -162,73 +263,122 @@ export default function SponsorLeagueDetailPage() {
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Sponsorship Details</h3>
|
||||
<Card className="p-5">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Trophy className="w-5 h-5 text-primary-blue" />
|
||||
League Information
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Tier</span>
|
||||
<span className="text-white">Main Sponsor</span>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Platform</span>
|
||||
<span className="text-white font-medium">{league.game}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Logo Placement</span>
|
||||
<span className="text-white">{MOCK_LEAGUE.logoPlacement}</span>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Season</span>
|
||||
<span className="text-white font-medium">{league.season}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Season Duration</span>
|
||||
<span className="text-white">Oct 2025 - Feb 2026</span>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Duration</span>
|
||||
<span className="text-white font-medium">Oct 2025 - Feb 2026</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Investment</span>
|
||||
<span className="text-white">$800/season</span>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Drivers</span>
|
||||
<span className="text-white font-medium">{league.drivers}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">Races</span>
|
||||
<span className="text-white font-medium">{league.races}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Performance Metrics</h3>
|
||||
<Card className="p-5">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5 text-performance-green" />
|
||||
Sponsorship Value
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Cost per 1K Impressions</span>
|
||||
<span className="text-performance-green">$17.70</span>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Total Season Views</span>
|
||||
<span className="text-white font-medium">{league.totalImpressions.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Projected Total</span>
|
||||
<span className="text-white font-medium">{Math.round(league.avgViewsPerRace * league.races).toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Main Sponsor CPM</span>
|
||||
<span className="text-performance-green font-medium">
|
||||
${((league.sponsorSlots.main.price / (league.avgViewsPerRace * league.races)) * 1000).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-400">Engagement Rate</span>
|
||||
<span className="text-white">4.2%</span>
|
||||
<span className="text-white font-medium">{league.engagement}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Brand Recall Score</span>
|
||||
<span className="text-white">78/100</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">ROI Estimate</span>
|
||||
<span className="text-performance-green">+24%</span>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">League Rating</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
||||
<span className="text-white font-medium">{league.rating}/5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Next Race */}
|
||||
{league.nextRace && (
|
||||
<Card className="p-5 lg:col-span-2">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Flag className="w-5 h-5 text-warning-amber" />
|
||||
Next Race
|
||||
</h3>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-warning-amber/20 flex items-center justify-center">
|
||||
<Flag className="w-6 h-6 text-warning-amber" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white text-lg">{league.nextRace.name}</p>
|
||||
<p className="text-sm text-gray-400">{league.nextRace.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
View Schedule
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'drivers' && (
|
||||
<Card>
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h3 className="text-lg font-semibold text-white">Drivers Carrying Your Brand</h3>
|
||||
<p className="text-sm text-gray-400">Top performing drivers with your sponsorship</p>
|
||||
<h3 className="text-lg font-semibold text-white">Championship Standings</h3>
|
||||
<p className="text-sm text-gray-400">Top drivers carrying sponsor branding</p>
|
||||
</div>
|
||||
<div className="divide-y divide-charcoal-outline">
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{MOCK_DRIVERS.map((driver) => (
|
||||
<div key={driver.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-8 h-8 rounded-full bg-iron-gray flex items-center justify-center text-sm font-bold text-white">
|
||||
<div className="w-10 h-10 rounded-full bg-iron-gray flex items-center justify-center text-lg font-bold text-white">
|
||||
{driver.position}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white">{driver.name}</div>
|
||||
<div className="text-sm text-gray-400">{driver.country} • {driver.races} races</div>
|
||||
<div className="text-sm text-gray-500">{driver.team} • {driver.country}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-medium text-white">{driver.impressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-right">
|
||||
<div className="font-medium text-white">{driver.races}</div>
|
||||
<div className="text-xs text-gray-500">races</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{driver.impressions.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">views</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -239,9 +389,10 @@ export default function SponsorLeagueDetailPage() {
|
||||
{activeTab === 'races' && (
|
||||
<Card>
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h3 className="text-lg font-semibold text-white">Race Schedule & Performance</h3>
|
||||
<h3 className="text-lg font-semibold text-white">Race Calendar</h3>
|
||||
<p className="text-sm text-gray-400">Season schedule with view statistics</p>
|
||||
</div>
|
||||
<div className="divide-y divide-charcoal-outline">
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{MOCK_RACES.map((race) => (
|
||||
<div key={race.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -250,17 +401,19 @@ export default function SponsorLeagueDetailPage() {
|
||||
}`} />
|
||||
<div>
|
||||
<div className="font-medium text-white">{race.name}</div>
|
||||
<div className="text-sm text-gray-400">{race.date}</div>
|
||||
<div className="text-sm text-gray-500">{race.date}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{race.status === 'completed' ? (
|
||||
<div className="text-right">
|
||||
<div className="font-medium text-white">{race.views.toLocaleString()}</div>
|
||||
<div className="font-semibold text-white">{race.views.toLocaleString()}</div>
|
||||
<div className="text-xs text-gray-500">views</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm text-warning-amber">Upcoming</span>
|
||||
<span className="px-3 py-1 rounded-full text-xs font-medium bg-warning-amber/20 text-warning-amber">
|
||||
Upcoming
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,38 +422,153 @@ export default function SponsorLeagueDetailPage() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'assets' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Your Logo Assets</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="aspect-video bg-iron-gray rounded-lg flex items-center justify-center border border-charcoal-outline">
|
||||
<ImageIcon className="w-12 h-12 text-gray-500" aria-label="Logo placeholder" />
|
||||
{activeTab === 'sponsor' && (
|
||||
<div className="space-y-6">
|
||||
{/* Tier Selection */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Main Sponsor */}
|
||||
<Card
|
||||
className={`p-5 cursor-pointer transition-all ${
|
||||
selectedTier === 'main'
|
||||
? 'border-primary-blue ring-2 ring-primary-blue/20'
|
||||
: 'hover:border-charcoal-outline/80'
|
||||
} ${!league.sponsorSlots.main.available ? 'opacity-60' : ''}`}
|
||||
onClick={() => league.sponsorSlots.main.available && setSelectedTier('main')}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Trophy className="w-5 h-5 text-yellow-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Main Sponsor</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">Primary branding position</p>
|
||||
</div>
|
||||
{league.sponsorSlots.main.available ? (
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-performance-green/20 text-performance-green">
|
||||
Available
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-gray-500/20 text-gray-400">
|
||||
Filled
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" className="flex-1">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download Logo Pack
|
||||
</Button>
|
||||
<Button variant="secondary">
|
||||
Update Logo
|
||||
</Button>
|
||||
|
||||
<div className="text-3xl font-bold text-white mb-4">
|
||||
${league.sponsorSlots.main.price}
|
||||
<span className="text-sm font-normal text-gray-500">/season</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2 mb-4">
|
||||
{league.sponsorSlots.main.benefits.map((benefit, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-gray-300">
|
||||
<CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0" />
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{selectedTier === 'main' && league.sponsorSlots.main.available && (
|
||||
<div className="w-4 h-4 rounded-full bg-primary-blue absolute top-4 right-4 flex items-center justify-center">
|
||||
<CheckCircle2 className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Secondary Sponsor */}
|
||||
<Card
|
||||
className={`p-5 cursor-pointer transition-all ${
|
||||
selectedTier === 'secondary'
|
||||
? 'border-primary-blue ring-2 ring-primary-blue/20'
|
||||
: 'hover:border-charcoal-outline/80'
|
||||
} ${league.sponsorSlots.secondary.available === 0 ? 'opacity-60' : ''}`}
|
||||
onClick={() => league.sponsorSlots.secondary.available > 0 && setSelectedTier('secondary')}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Star className="w-5 h-5 text-purple-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Secondary Sponsor</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">Supporting branding position</p>
|
||||
</div>
|
||||
{league.sponsorSlots.secondary.available > 0 ? (
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-performance-green/20 text-performance-green">
|
||||
{league.sponsorSlots.secondary.available}/{league.sponsorSlots.secondary.total} Available
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-gray-500/20 text-gray-400">
|
||||
Full
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-3xl font-bold text-white mb-4">
|
||||
${league.sponsorSlots.secondary.price}
|
||||
<span className="text-sm font-normal text-gray-500">/season</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2 mb-4">
|
||||
{league.sponsorSlots.secondary.benefits.map((benefit, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-gray-300">
|
||||
<CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0" />
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{selectedTier === 'secondary' && league.sponsorSlots.secondary.available > 0 && (
|
||||
<div className="w-4 h-4 rounded-full bg-primary-blue absolute top-4 right-4 flex items-center justify-center">
|
||||
<CheckCircle2 className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Checkout Summary */}
|
||||
<Card className="p-5">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<CreditCard className="w-5 h-5 text-primary-blue" />
|
||||
Sponsorship Summary
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">Selected Tier</span>
|
||||
<span className="text-white font-medium capitalize">{selectedTier} Sponsor</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">Season Price</span>
|
||||
<span className="text-white font-medium">
|
||||
${selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-gray-400">Platform Fee ({siteConfig.fees.platformFeePercent}%)</span>
|
||||
<span className="text-white font-medium">
|
||||
${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * siteConfig.fees.platformFeePercent / 100).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-t border-charcoal-outline pt-4">
|
||||
<span className="text-white font-semibold">Total (excl. VAT)</span>
|
||||
<span className="text-white font-bold text-xl">
|
||||
${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * (1 + siteConfig.fees.platformFeePercent / 100)).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Livery Preview</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="aspect-video bg-iron-gray rounded-lg flex items-center justify-center border border-charcoal-outline">
|
||||
<Trophy className="w-12 h-12 text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">
|
||||
Your logo appears on the primary hood position for all 32 drivers in this league.
|
||||
</p>
|
||||
<Button variant="secondary" className="w-full">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download Sample Livery
|
||||
<p className="text-xs text-gray-500 mb-4">
|
||||
{siteConfig.vat.notice}
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button variant="primary" className="flex-1">
|
||||
<Megaphone className="w-4 h-4 mr-2" />
|
||||
Request Sponsorship
|
||||
</Button>
|
||||
<Button variant="secondary">
|
||||
<FileText className="w-4 h-4 mr-2" />
|
||||
Download Info Pack
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { siteConfig } from '@/lib/siteConfig';
|
||||
import {
|
||||
Trophy,
|
||||
Users,
|
||||
Eye,
|
||||
Search,
|
||||
Filter,
|
||||
Star,
|
||||
ChevronRight
|
||||
ChevronRight,
|
||||
Filter,
|
||||
Car,
|
||||
Flag,
|
||||
TrendingUp,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Megaphone,
|
||||
ArrowUpDown
|
||||
} from 'lucide-react';
|
||||
|
||||
interface AvailableLeague {
|
||||
@@ -23,6 +33,9 @@ interface AvailableLeague {
|
||||
secondarySlots: { available: number; total: number; price: number };
|
||||
rating: number;
|
||||
tier: 'premium' | 'standard' | 'starter';
|
||||
nextRace?: string;
|
||||
seasonStatus: 'active' | 'upcoming' | 'completed';
|
||||
description: string;
|
||||
}
|
||||
|
||||
const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
||||
@@ -36,6 +49,9 @@ const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
||||
secondarySlots: { available: 1, total: 2, price: 400 },
|
||||
rating: 4.8,
|
||||
tier: 'premium',
|
||||
nextRace: 'Dec 20 - Spa',
|
||||
seasonStatus: 'active',
|
||||
description: 'Premier GT3 racing with top-tier drivers. Weekly broadcasts and active community.',
|
||||
},
|
||||
{
|
||||
id: 'league-2',
|
||||
@@ -47,6 +63,9 @@ const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
||||
secondarySlots: { available: 2, total: 2, price: 500 },
|
||||
rating: 4.9,
|
||||
tier: 'premium',
|
||||
nextRace: 'Jan 5 - Nürburgring 24h',
|
||||
seasonStatus: 'active',
|
||||
description: 'Multi-class endurance racing. High engagement from dedicated endurance fans.',
|
||||
},
|
||||
{
|
||||
id: 'league-3',
|
||||
@@ -58,6 +77,9 @@ const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
||||
secondarySlots: { available: 2, total: 2, price: 300 },
|
||||
rating: 4.5,
|
||||
tier: 'standard',
|
||||
nextRace: 'Dec 22 - Monza',
|
||||
seasonStatus: 'active',
|
||||
description: 'Open-wheel racing excellence. Competitive field with consistent racing.',
|
||||
},
|
||||
{
|
||||
id: 'league-4',
|
||||
@@ -69,6 +91,9 @@ const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
||||
secondarySlots: { available: 2, total: 2, price: 200 },
|
||||
rating: 4.2,
|
||||
tier: 'starter',
|
||||
nextRace: 'Jan 10 - Brands Hatch',
|
||||
seasonStatus: 'upcoming',
|
||||
description: 'Touring car action with close racing. Great for building brand awareness.',
|
||||
},
|
||||
{
|
||||
id: 'league-5',
|
||||
@@ -80,138 +105,299 @@ const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
||||
secondarySlots: { available: 1, total: 2, price: 350 },
|
||||
rating: 4.6,
|
||||
tier: 'standard',
|
||||
nextRace: 'Dec 28 - Sebring',
|
||||
seasonStatus: 'active',
|
||||
description: 'Prototype racing at its finest. Growing community with passionate fans.',
|
||||
},
|
||||
{
|
||||
id: 'league-6',
|
||||
name: 'Rally Championship',
|
||||
game: 'EA WRC',
|
||||
drivers: 28,
|
||||
avgViewsPerRace: 4500,
|
||||
mainSponsorSlot: { available: true, price: 650 },
|
||||
secondarySlots: { available: 2, total: 2, price: 250 },
|
||||
rating: 4.4,
|
||||
tier: 'standard',
|
||||
nextRace: 'Jan 15 - Monte Carlo',
|
||||
seasonStatus: 'upcoming',
|
||||
description: 'Thrilling rally stages. Unique sponsorship exposure in rallying content.',
|
||||
},
|
||||
];
|
||||
|
||||
function LeagueCard({ league }: { league: AvailableLeague }) {
|
||||
const tierColors = {
|
||||
premium: 'bg-gradient-to-r from-yellow-500/20 to-amber-500/20 border-yellow-500/30',
|
||||
standard: 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-500/30',
|
||||
starter: 'bg-gradient-to-r from-gray-500/20 to-slate-500/20 border-gray-500/30',
|
||||
type SortOption = 'rating' | 'drivers' | 'price' | 'views';
|
||||
type TierFilter = 'all' | 'premium' | 'standard' | 'starter';
|
||||
type AvailabilityFilter = 'all' | 'main' | 'secondary';
|
||||
|
||||
function LeagueCard({ league, index }: { league: AvailableLeague; index: number }) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const tierConfig = {
|
||||
premium: {
|
||||
bg: 'bg-gradient-to-br from-yellow-500/10 to-amber-500/5',
|
||||
border: 'border-yellow-500/30',
|
||||
badge: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
icon: '⭐'
|
||||
},
|
||||
standard: {
|
||||
bg: 'bg-gradient-to-br from-primary-blue/10 to-cyan-500/5',
|
||||
border: 'border-primary-blue/30',
|
||||
badge: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
|
||||
icon: '🏆'
|
||||
},
|
||||
starter: {
|
||||
bg: 'bg-gradient-to-br from-gray-500/10 to-slate-500/5',
|
||||
border: 'border-gray-500/30',
|
||||
badge: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
icon: '🚀'
|
||||
},
|
||||
};
|
||||
|
||||
const tierBadgeColors = {
|
||||
premium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
standard: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
starter: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
const statusConfig = {
|
||||
active: { color: 'text-performance-green', bg: 'bg-performance-green/10', label: 'Active Season' },
|
||||
upcoming: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', label: 'Starting Soon' },
|
||||
completed: { color: 'text-gray-400', bg: 'bg-gray-400/10', label: 'Season Ended' },
|
||||
};
|
||||
|
||||
const config = tierConfig[league.tier];
|
||||
const status = statusConfig[league.seasonStatus];
|
||||
const cpm = (league.mainSponsorSlot.price / league.avgViewsPerRace * 1000).toFixed(0);
|
||||
|
||||
return (
|
||||
<Card className={`overflow-hidden border ${tierColors[league.tier]}`}>
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold text-white">{league.name}</h3>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium capitalize border ${tierBadgeColors[league.tier]}`}>
|
||||
{league.tier}
|
||||
</span>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
>
|
||||
<Card className={`overflow-hidden border ${config.border} ${config.bg} hover:border-primary-blue/50 transition-all duration-300 h-full`}>
|
||||
<div className="p-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium capitalize border ${config.badge}`}>
|
||||
{config.icon} {league.tier}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${status.bg} ${status.color}`}>
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-white text-lg">{league.name}</h3>
|
||||
<p className="text-sm text-gray-500">{league.game}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 bg-iron-gray/50 px-2 py-1 rounded">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
||||
<span className="text-sm font-medium text-white">{league.rating}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">{league.game}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
||||
<span className="text-sm text-white">{league.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||
<div className="text-center p-2 bg-iron-gray/50 rounded">
|
||||
<div className="text-lg font-bold text-white">{league.drivers}</div>
|
||||
<div className="text-xs text-gray-500">Drivers</div>
|
||||
</div>
|
||||
<div className="text-center p-2 bg-iron-gray/50 rounded">
|
||||
<div className="text-lg font-bold text-white">{(league.avgViewsPerRace / 1000).toFixed(1)}k</div>
|
||||
<div className="text-xs text-gray-500">Avg Views</div>
|
||||
</div>
|
||||
<div className="text-center p-2 bg-iron-gray/50 rounded">
|
||||
<div className="text-lg font-bold text-white">${(league.mainSponsorSlot.price / league.avgViewsPerRace * 1000).toFixed(0)}</div>
|
||||
<div className="text-xs text-gray-500">CPM</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Description */}
|
||||
<p className="text-sm text-gray-400 mb-4 line-clamp-2">{league.description}</p>
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${league.mainSponsorSlot.available ? 'bg-performance-green' : 'bg-racing-red'}`} />
|
||||
<span className="text-sm text-gray-300">Main Sponsor</span>
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
<div className="text-center p-2 bg-iron-gray/50 rounded-lg">
|
||||
<div className="text-lg font-bold text-white">{league.drivers}</div>
|
||||
<div className="text-xs text-gray-500">Drivers</div>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{league.mainSponsorSlot.available ? (
|
||||
<span className="text-white font-medium">${league.mainSponsorSlot.price}/season</span>
|
||||
) : (
|
||||
<span className="text-gray-500">Taken</span>
|
||||
)}
|
||||
<div className="text-center p-2 bg-iron-gray/50 rounded-lg">
|
||||
<div className="text-lg font-bold text-white">{(league.avgViewsPerRace / 1000).toFixed(1)}k</div>
|
||||
<div className="text-xs text-gray-500">Avg Views</div>
|
||||
</div>
|
||||
<div className="text-center p-2 bg-iron-gray/50 rounded-lg">
|
||||
<div className="text-lg font-bold text-performance-green">${cpm}</div>
|
||||
<div className="text-xs text-gray-500">CPM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${league.secondarySlots.available > 0 ? 'bg-performance-green' : 'bg-racing-red'}`} />
|
||||
<span className="text-sm text-gray-300">Secondary Slots</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{league.secondarySlots.available > 0 ? (
|
||||
<span className="text-white font-medium">{league.secondarySlots.available}/{league.secondarySlots.total} @ ${league.secondarySlots.price}</span>
|
||||
) : (
|
||||
<span className="text-gray-500">Full</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" className="flex-1">
|
||||
View Details
|
||||
</Button>
|
||||
{(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
|
||||
<Button variant="primary" className="flex-1">
|
||||
Sponsor
|
||||
</Button>
|
||||
{/* Next Race */}
|
||||
{league.nextRace && (
|
||||
<div className="flex items-center gap-2 mb-4 text-sm">
|
||||
<Clock className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-gray-400">Next:</span>
|
||||
<span className="text-white">{league.nextRace}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sponsorship Slots */}
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex items-center justify-between p-2.5 bg-iron-gray/30 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${league.mainSponsorSlot.available ? 'bg-performance-green' : 'bg-racing-red'}`} />
|
||||
<span className="text-sm text-gray-300">Main Sponsor</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{league.mainSponsorSlot.available ? (
|
||||
<span className="text-white font-semibold">${league.mainSponsorSlot.price}/season</span>
|
||||
) : (
|
||||
<span className="text-gray-500 flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" /> Filled
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-2.5 bg-iron-gray/30 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${league.secondarySlots.available > 0 ? 'bg-performance-green' : 'bg-racing-red'}`} />
|
||||
<span className="text-sm text-gray-300">Secondary Slots</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{league.secondarySlots.available > 0 ? (
|
||||
<span className="text-white font-semibold">
|
||||
{league.secondarySlots.available}/{league.secondarySlots.total} @ ${league.secondarySlots.price}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-gray-500 flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" /> Full
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Link href={`/sponsor/leagues/${league.id}`} className="flex-1">
|
||||
<Button variant="secondary" className="w-full text-sm">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
{(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
|
||||
<Link href={`/sponsor/leagues/${league.id}?action=sponsor`} className="flex-1">
|
||||
<Button variant="primary" className="w-full text-sm">
|
||||
Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SponsorLeaguesPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [tierFilter, setTierFilter] = useState<'all' | 'premium' | 'standard' | 'starter'>('all');
|
||||
const [availabilityFilter, setAvailabilityFilter] = useState<'all' | 'main' | 'secondary'>('all');
|
||||
const [tierFilter, setTierFilter] = useState<TierFilter>('all');
|
||||
const [availabilityFilter, setAvailabilityFilter] = useState<AvailabilityFilter>('all');
|
||||
const [sortBy, setSortBy] = useState<SortOption>('rating');
|
||||
|
||||
const filteredLeagues = MOCK_AVAILABLE_LEAGUES.filter(league => {
|
||||
if (searchQuery && !league.name.toLowerCase().includes(searchQuery.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
if (tierFilter !== 'all' && league.tier !== tierFilter) {
|
||||
return false;
|
||||
}
|
||||
if (availabilityFilter === 'main' && !league.mainSponsorSlot.available) {
|
||||
return false;
|
||||
}
|
||||
if (availabilityFilter === 'secondary' && league.secondarySlots.available === 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
// Filter and sort leagues
|
||||
const filteredLeagues = MOCK_AVAILABLE_LEAGUES
|
||||
.filter(league => {
|
||||
if (searchQuery && !league.name.toLowerCase().includes(searchQuery.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
if (tierFilter !== 'all' && league.tier !== tierFilter) {
|
||||
return false;
|
||||
}
|
||||
if (availabilityFilter === 'main' && !league.mainSponsorSlot.available) {
|
||||
return false;
|
||||
}
|
||||
if (availabilityFilter === 'secondary' && league.secondarySlots.available === 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'rating': return b.rating - a.rating;
|
||||
case 'drivers': return b.drivers - a.drivers;
|
||||
case 'price': return a.mainSponsorSlot.price - b.mainSponsorSlot.price;
|
||||
case 'views': return b.avgViewsPerRace - a.avgViewsPerRace;
|
||||
default: return 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate summary stats
|
||||
const stats = {
|
||||
total: MOCK_AVAILABLE_LEAGUES.length,
|
||||
mainAvailable: MOCK_AVAILABLE_LEAGUES.filter(l => l.mainSponsorSlot.available).length,
|
||||
secondaryAvailable: MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.secondarySlots.available, 0),
|
||||
totalDrivers: MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.drivers, 0),
|
||||
avgCpm: Math.round(
|
||||
MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + (l.mainSponsorSlot.price / l.avgViewsPerRace * 1000), 0) /
|
||||
MOCK_AVAILABLE_LEAGUES.length
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
|
||||
<a href="/sponsor/dashboard" className="hover:text-white">Dashboard</a>
|
||||
<Link href="/sponsor/dashboard" className="hover:text-white transition-colors">Dashboard</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-white">Browse Leagues</span>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-white mb-2">Find Leagues to Sponsor</h1>
|
||||
<p className="text-gray-400">Discover racing leagues looking for sponsors and grow your brand</p>
|
||||
<h1 className="text-2xl font-bold text-white mb-2 flex items-center gap-3">
|
||||
<Trophy className="w-7 h-7 text-primary-blue" />
|
||||
League Sponsorship Marketplace
|
||||
</h1>
|
||||
<p className="text-gray-400">
|
||||
Discover racing leagues looking for sponsors. All prices shown exclude VAT.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">{stats.total}</div>
|
||||
<div className="text-sm text-gray-400">Leagues</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-performance-green">{stats.mainAvailable}</div>
|
||||
<div className="text-sm text-gray-400">Main Slots</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-primary-blue">{stats.secondaryAvailable}</div>
|
||||
<div className="text-sm text-gray-400">Secondary Slots</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">{stats.totalDrivers}</div>
|
||||
<div className="text-sm text-gray-400">Total Drivers</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-warning-amber">${stats.avgCpm}</div>
|
||||
<div className="text-sm text-gray-400">Avg CPM</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-6">
|
||||
<div className="flex flex-col lg:flex-row gap-4 mb-6">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
@@ -219,79 +405,100 @@ export default function SponsorLeaguesPage() {
|
||||
placeholder="Search leagues..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
|
||||
className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={tierFilter}
|
||||
onChange={(e) => setTierFilter(e.target.value as typeof tierFilter)}
|
||||
className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
||||
>
|
||||
<option value="all">All Tiers</option>
|
||||
<option value="premium">Premium</option>
|
||||
<option value="standard">Standard</option>
|
||||
<option value="starter">Starter</option>
|
||||
</select>
|
||||
<select
|
||||
value={availabilityFilter}
|
||||
onChange={(e) => setAvailabilityFilter(e.target.value as typeof availabilityFilter)}
|
||||
className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
||||
>
|
||||
<option value="all">All Slots</option>
|
||||
<option value="main">Main Available</option>
|
||||
<option value="secondary">Secondary Available</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tier Filter */}
|
||||
<select
|
||||
value={tierFilter}
|
||||
onChange={(e) => setTierFilter(e.target.value as TierFilter)}
|
||||
className="px-4 py-2.5 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
||||
>
|
||||
<option value="all">All Tiers</option>
|
||||
<option value="premium">⭐ Premium</option>
|
||||
<option value="standard">🏆 Standard</option>
|
||||
<option value="starter">🚀 Starter</option>
|
||||
</select>
|
||||
|
||||
{/* Availability Filter */}
|
||||
<select
|
||||
value={availabilityFilter}
|
||||
onChange={(e) => setAvailabilityFilter(e.target.value as AvailabilityFilter)}
|
||||
className="px-4 py-2.5 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
||||
>
|
||||
<option value="all">All Slots</option>
|
||||
<option value="main">Main Available</option>
|
||||
<option value="secondary">Secondary Available</option>
|
||||
</select>
|
||||
|
||||
{/* Sort */}
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortOption)}
|
||||
className="px-4 py-2.5 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
||||
>
|
||||
<option value="rating">Sort by Rating</option>
|
||||
<option value="drivers">Sort by Drivers</option>
|
||||
<option value="views">Sort by Views</option>
|
||||
<option value="price">Sort by Price</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Stats Banner */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">{MOCK_AVAILABLE_LEAGUES.length}</div>
|
||||
<div className="text-sm text-gray-400">Available Leagues</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-performance-green">
|
||||
{MOCK_AVAILABLE_LEAGUES.filter(l => l.mainSponsorSlot.available).length}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Main Slots Open</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-primary-blue">
|
||||
{MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.secondarySlots.available, 0)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Secondary Slots Open</div>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.drivers, 0)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Total Drivers</div>
|
||||
</Card>
|
||||
{/* Results Count */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-sm text-gray-400">
|
||||
Showing {filteredLeagues.length} of {MOCK_AVAILABLE_LEAGUES.length} leagues
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href="/teams">
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Browse Teams
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/drivers">
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Car className="w-4 h-4 mr-2" />
|
||||
Browse Drivers
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* League Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredLeagues.map((league) => (
|
||||
<LeagueCard key={league.id} league={league} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredLeagues.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
{filteredLeagues.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredLeagues.map((league, index) => (
|
||||
<LeagueCard key={league.id} league={league} index={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="text-center py-16">
|
||||
<Trophy className="w-12 h-12 text-gray-500 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-white mb-2">No leagues found</h3>
|
||||
<p className="text-gray-400">Try adjusting your filters to see more results</p>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6">Try adjusting your filters to see more results</p>
|
||||
<Button variant="secondary" onClick={() => {
|
||||
setSearchQuery('');
|
||||
setTierFilter('all');
|
||||
setAvailabilityFilter('all');
|
||||
}}>
|
||||
Clear Filters
|
||||
</Button>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Alpha Notice */}
|
||||
<div className="mt-8 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
||||
<p className="text-xs text-gray-400">
|
||||
<strong className="text-warning-amber">Alpha Note:</strong> League sponsorship marketplace is demonstration-only.
|
||||
Actual sponsorship purchases will be available when the payment system is fully implemented.
|
||||
</p>
|
||||
{/* Platform Fee Notice */}
|
||||
<div className="mt-8 rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Megaphone className="w-5 h-5 text-primary-blue flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-300 font-medium mb-1">Platform Fee</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorship payments. {siteConfig.fees.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,28 +2,63 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import {
|
||||
Settings,
|
||||
Building2,
|
||||
Mail,
|
||||
import Toggle from '@/components/ui/Toggle';
|
||||
import SectionHeader from '@/components/ui/SectionHeader';
|
||||
import FormField from '@/components/ui/FormField';
|
||||
import PageHeader from '@/components/ui/PageHeader';
|
||||
import {
|
||||
Settings,
|
||||
Building2,
|
||||
Mail,
|
||||
Globe,
|
||||
Upload,
|
||||
Save,
|
||||
Bell,
|
||||
Shield,
|
||||
Eye,
|
||||
Trash2
|
||||
Trash2,
|
||||
CheckCircle,
|
||||
User,
|
||||
Phone,
|
||||
MapPin,
|
||||
FileText,
|
||||
Link as LinkIcon,
|
||||
Image as ImageIcon,
|
||||
Lock,
|
||||
Key,
|
||||
Smartphone,
|
||||
AlertCircle
|
||||
} from 'lucide-react';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface SponsorProfile {
|
||||
name: string;
|
||||
email: string;
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
contactEmail: string;
|
||||
contactPhone: string;
|
||||
website: string;
|
||||
description: string;
|
||||
logoUrl: string | null;
|
||||
industry: string;
|
||||
address: {
|
||||
street: string;
|
||||
city: string;
|
||||
country: string;
|
||||
postalCode: string;
|
||||
};
|
||||
taxId: string;
|
||||
socialLinks: {
|
||||
twitter: string;
|
||||
linkedin: string;
|
||||
instagram: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface NotificationSettings {
|
||||
@@ -31,15 +66,42 @@ interface NotificationSettings {
|
||||
emailWeeklyReport: boolean;
|
||||
emailRaceAlerts: boolean;
|
||||
emailPaymentAlerts: boolean;
|
||||
emailNewOpportunities: boolean;
|
||||
emailContractExpiry: boolean;
|
||||
}
|
||||
|
||||
// Mock data
|
||||
interface PrivacySettings {
|
||||
publicProfile: boolean;
|
||||
showStats: boolean;
|
||||
showActiveSponsorships: boolean;
|
||||
allowDirectContact: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Mock Data
|
||||
// ============================================================================
|
||||
|
||||
const MOCK_PROFILE: SponsorProfile = {
|
||||
name: 'Acme Racing Co.',
|
||||
email: 'sponsor@acme-racing.com',
|
||||
companyName: 'Acme Racing Co.',
|
||||
contactName: 'John Smith',
|
||||
contactEmail: 'sponsor@acme-racing.com',
|
||||
contactPhone: '+1 (555) 123-4567',
|
||||
website: 'https://acme-racing.com',
|
||||
description: 'Premium sim racing equipment and accessories for competitive drivers.',
|
||||
description: 'Premium sim racing equipment and accessories for competitive drivers. We specialize in high-performance steering wheels, pedals, and cockpit systems used by professionals worldwide.',
|
||||
logoUrl: null,
|
||||
industry: 'Racing Equipment',
|
||||
address: {
|
||||
street: '123 Racing Boulevard',
|
||||
city: 'Indianapolis',
|
||||
country: 'United States',
|
||||
postalCode: '46222',
|
||||
},
|
||||
taxId: 'US12-3456789',
|
||||
socialLinks: {
|
||||
twitter: '@acmeracing',
|
||||
linkedin: 'acme-racing-co',
|
||||
instagram: '@acmeracing',
|
||||
},
|
||||
};
|
||||
|
||||
const MOCK_NOTIFICATIONS: NotificationSettings = {
|
||||
@@ -47,35 +109,63 @@ const MOCK_NOTIFICATIONS: NotificationSettings = {
|
||||
emailWeeklyReport: true,
|
||||
emailRaceAlerts: false,
|
||||
emailPaymentAlerts: true,
|
||||
emailNewOpportunities: true,
|
||||
emailContractExpiry: true,
|
||||
};
|
||||
|
||||
function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (checked: boolean) => void; label: string }) {
|
||||
const MOCK_PRIVACY: PrivacySettings = {
|
||||
publicProfile: true,
|
||||
showStats: false,
|
||||
showActiveSponsorships: true,
|
||||
allowDirectContact: true,
|
||||
};
|
||||
|
||||
const INDUSTRY_OPTIONS = [
|
||||
'Racing Equipment',
|
||||
'Automotive',
|
||||
'Technology',
|
||||
'Gaming & Esports',
|
||||
'Energy Drinks',
|
||||
'Apparel',
|
||||
'Financial Services',
|
||||
'Other',
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Components
|
||||
// ============================================================================
|
||||
|
||||
function SavedIndicator({ visible }: { visible: boolean }) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-gray-300">{label}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`relative w-11 h-6 rounded-full transition-colors ${checked ? 'bg-primary-blue' : 'bg-iron-gray'}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: visible ? 1 : 0, x: visible ? 0 : 20 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
||||
className="flex items-center gap-2 text-performance-green"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Changes saved</span>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export default function SponsorSettingsPage() {
|
||||
const router = useRouter();
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [profile, setProfile] = useState(MOCK_PROFILE);
|
||||
const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
|
||||
const [privacy, setPrivacy] = useState(MOCK_PRIVACY);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const handleSaveProfile = async () => {
|
||||
setSaving(true);
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
setSaving(false);
|
||||
setSaved(true);
|
||||
@@ -83,251 +173,498 @@ export default function SponsorSettingsPage() {
|
||||
};
|
||||
|
||||
const handleDeleteAccount = () => {
|
||||
if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone.')) {
|
||||
// Clear demo cookies and redirect
|
||||
if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone. All sponsorship data will be permanently removed.')) {
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
document.cookie = 'gridpilot_sponsor_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
router.push('/');
|
||||
}
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: shouldReduceMotion ? 0 : 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto py-8 px-4">
|
||||
<motion.div
|
||||
className="max-w-4xl mx-auto py-8 px-4"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Settings className="w-7 h-7 text-gray-400" />
|
||||
Sponsor Settings
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Manage your sponsor profile and preferences</p>
|
||||
</div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<PageHeader
|
||||
icon={Settings}
|
||||
title="Sponsor Settings"
|
||||
description="Manage your company profile, notifications, and security preferences"
|
||||
action={<SavedIndicator visible={saved} />}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Company Profile */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Building2 className="w-5 h-5 text-primary-blue" />
|
||||
Company Profile
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.name}
|
||||
onChange={(e) => setProfile({ ...profile, name: e.target.value })}
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-gray-500" />
|
||||
Contact Email
|
||||
</div>
|
||||
</label>
|
||||
<Input
|
||||
type="email"
|
||||
value={profile.email}
|
||||
onChange={(e) => setProfile({ ...profile, email: e.target.value })}
|
||||
placeholder="sponsor@company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-gray-500" />
|
||||
Website
|
||||
</div>
|
||||
</label>
|
||||
<Input
|
||||
type="url"
|
||||
value={profile.website}
|
||||
onChange={(e) => setProfile({ ...profile, website: e.target.value })}
|
||||
placeholder="https://company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Company Description</label>
|
||||
<textarea
|
||||
value={profile.description}
|
||||
onChange={(e) => setProfile({ ...profile, description: e.target.value })}
|
||||
placeholder="Tell leagues about your company..."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Upload className="w-4 h-4 text-gray-500" />
|
||||
Company Logo
|
||||
</div>
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center">
|
||||
<Building2 className="w-8 h-8 text-gray-500" />
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/svg+xml"
|
||||
className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Building2}
|
||||
title="Company Profile"
|
||||
description="Your public-facing company information"
|
||||
/>
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Company Basic Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField label="Company Name" icon={Building2} required>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.companyName}
|
||||
onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">PNG, JPEG, or SVG. Max 2MB.</p>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Industry">
|
||||
<select
|
||||
value={profile.industry}
|
||||
onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue"
|
||||
>
|
||||
{INDUSTRY_OPTIONS.map(industry => (
|
||||
<option key={industry} value={industry}>{industry}</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
||||
Contact Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField label="Contact Name" icon={User} required>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.contactName}
|
||||
onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
|
||||
placeholder="Full name"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Contact Email" icon={Mail} required>
|
||||
<Input
|
||||
type="email"
|
||||
value={profile.contactEmail}
|
||||
onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
|
||||
placeholder="sponsor@company.com"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Phone Number" icon={Phone}>
|
||||
<Input
|
||||
type="tel"
|
||||
value={profile.contactPhone}
|
||||
onChange={(e) => setProfile({ ...profile, contactPhone: e.target.value })}
|
||||
placeholder="+1 (555) 123-4567"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Website" icon={Globe}>
|
||||
<Input
|
||||
type="url"
|
||||
value={profile.website}
|
||||
onChange={(e) => setProfile({ ...profile, website: e.target.value })}
|
||||
placeholder="https://company.com"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-charcoal-outline flex items-center justify-between">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSaveProfile}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? (
|
||||
'Saving...'
|
||||
) : saved ? (
|
||||
<>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Saved!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{/* Address */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
||||
Business Address
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="md:col-span-2">
|
||||
<FormField label="Street Address" icon={MapPin}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.street}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, street: e.target.value }
|
||||
})}
|
||||
placeholder="123 Main Street"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<FormField label="City">
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.city}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, city: e.target.value }
|
||||
})}
|
||||
placeholder="City"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Postal Code">
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.postalCode}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, postalCode: e.target.value }
|
||||
})}
|
||||
placeholder="12345"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Country">
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.country}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, country: e.target.value }
|
||||
})}
|
||||
placeholder="Country"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Tax ID / VAT Number" icon={FileText}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.taxId}
|
||||
onChange={(e) => setProfile({ ...profile, taxId: e.target.value })}
|
||||
placeholder="XX12-3456789"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<FormField label="Company Description">
|
||||
<textarea
|
||||
value={profile.description}
|
||||
onChange={(e) => setProfile({ ...profile, description: e.target.value })}
|
||||
placeholder="Tell potential sponsorship partners about your company, products, and what you're looking for in sponsorship opportunities..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
This description appears on your public sponsor profile.
|
||||
</p>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
||||
Social Media
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<FormField label="Twitter / X" icon={LinkIcon}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.socialLinks.twitter}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
socialLinks: { ...profile.socialLinks, twitter: e.target.value }
|
||||
})}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="LinkedIn" icon={LinkIcon}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.socialLinks.linkedin}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
socialLinks: { ...profile.socialLinks, linkedin: e.target.value }
|
||||
})}
|
||||
placeholder="company-name"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Instagram" icon={LinkIcon}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.socialLinks.instagram}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
socialLinks: { ...profile.socialLinks, instagram: e.target.value }
|
||||
})}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logo Upload */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<FormField label="Company Logo" icon={ImageIcon}>
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-24 h-24 rounded-xl bg-gradient-to-br from-iron-gray to-deep-graphite border-2 border-dashed border-charcoal-outline flex items-center justify-center overflow-hidden">
|
||||
{profile.logoUrl ? (
|
||||
<img src={profile.logoUrl} alt="Company logo" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<Building2 className="w-10 h-10 text-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="cursor-pointer">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/svg+xml"
|
||||
className="hidden"
|
||||
/>
|
||||
<div className="px-4 py-2 rounded-lg bg-iron-gray border border-charcoal-outline text-gray-300 hover:bg-charcoal-outline transition-colors flex items-center gap-2">
|
||||
<Upload className="w-4 h-4" />
|
||||
Upload Logo
|
||||
</div>
|
||||
</label>
|
||||
{profile.logoUrl && (
|
||||
<Button variant="secondary" className="text-sm text-gray-400">
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
PNG, JPEG, or SVG. Max 2MB. Recommended size: 400x400px.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="pt-6 border-t border-charcoal-outline flex items-center justify-end gap-4">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSaveProfile}
|
||||
disabled={saving}
|
||||
className="min-w-[160px]"
|
||||
>
|
||||
{saving ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
Saving...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Save className="w-4 h-4" />
|
||||
Save Profile
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Notification Preferences */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Bell className="w-5 h-5 text-warning-amber" />
|
||||
Notifications
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<Toggle
|
||||
checked={notifications.emailNewSponsorships}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
|
||||
label="Email when a sponsorship is approved"
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Bell}
|
||||
title="Email Notifications"
|
||||
description="Control which emails you receive from GridPilot"
|
||||
color="text-warning-amber"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailWeeklyReport}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
|
||||
label="Weekly analytics report"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailRaceAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
|
||||
label="Race day alerts for sponsored leagues"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailPaymentAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
|
||||
label="Payment and invoice notifications"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="p-6">
|
||||
<div className="space-y-1">
|
||||
<Toggle
|
||||
checked={notifications.emailNewSponsorships}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
|
||||
label="Sponsorship Approvals"
|
||||
description="Receive confirmation when your sponsorship requests are approved"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailWeeklyReport}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
|
||||
label="Weekly Analytics Report"
|
||||
description="Get a weekly summary of your sponsorship performance"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailRaceAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
|
||||
label="Race Day Alerts"
|
||||
description="Be notified when sponsored leagues have upcoming races"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailPaymentAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
|
||||
label="Payment & Invoice Notifications"
|
||||
description="Receive invoices and payment confirmations"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailNewOpportunities}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewOpportunities: checked })}
|
||||
label="New Sponsorship Opportunities"
|
||||
description="Get notified about new leagues and drivers seeking sponsors"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailContractExpiry}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailContractExpiry: checked })}
|
||||
label="Contract Expiry Reminders"
|
||||
description="Receive reminders before your sponsorship contracts expire"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Privacy & Visibility */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Eye className="w-5 h-5 text-performance-green" />
|
||||
Privacy & Visibility
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Public Profile</p>
|
||||
<p className="text-sm text-gray-500">Allow leagues to see your sponsor profile</p>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Eye}
|
||||
title="Privacy & Visibility"
|
||||
description="Control how your profile appears to others"
|
||||
color="text-performance-green"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<div className="space-y-1">
|
||||
<Toggle
|
||||
checked={privacy.publicProfile}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, publicProfile: checked })}
|
||||
label="Public Profile"
|
||||
description="Allow leagues, teams, and drivers to view your sponsor profile"
|
||||
/>
|
||||
<Toggle
|
||||
checked={privacy.showStats}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, showStats: checked })}
|
||||
label="Show Sponsorship Statistics"
|
||||
description="Display your total sponsorships and investment amounts"
|
||||
/>
|
||||
<Toggle
|
||||
checked={privacy.showActiveSponsorships}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, showActiveSponsorships: checked })}
|
||||
label="Show Active Sponsorships"
|
||||
description="Let others see which leagues and teams you currently sponsor"
|
||||
/>
|
||||
<Toggle
|
||||
checked={privacy.allowDirectContact}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, allowDirectContact: checked })}
|
||||
label="Allow Direct Contact"
|
||||
description="Enable leagues and teams to send you sponsorship proposals"
|
||||
/>
|
||||
</div>
|
||||
<Toggle checked={true} onChange={() => {}} label="" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Show Sponsorship Stats</p>
|
||||
<p className="text-sm text-gray-500">Display your total sponsorships and investment on profile</p>
|
||||
</div>
|
||||
<Toggle checked={false} onChange={() => {}} label="" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Security */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-primary-blue" />
|
||||
Security
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Change Password</p>
|
||||
<p className="text-sm text-gray-500">Update your account password</p>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Shield}
|
||||
title="Account Security"
|
||||
description="Protect your sponsor account"
|
||||
color="text-primary-blue"
|
||||
/>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-iron-gray">
|
||||
<Key className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Password</p>
|
||||
<p className="text-sm text-gray-500">Last changed 3 months ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
Change Password
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
Change
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Two-Factor Authentication</p>
|
||||
<p className="text-sm text-gray-500">Add an extra layer of security</p>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-iron-gray">
|
||||
<Smartphone className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Two-Factor Authentication</p>
|
||||
<p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
Enable 2FA
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-iron-gray">
|
||||
<Lock className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Active Sessions</p>
|
||||
<p className="text-sm text-gray-500">Manage devices where you're logged in</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
View Sessions
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
Enable
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<Card className="border-racing-red/30">
|
||||
<div className="p-4 border-b border-racing-red/30">
|
||||
<h2 className="text-lg font-semibold text-racing-red flex items-center gap-2">
|
||||
<Trash2 className="w-5 h-5" />
|
||||
Danger Zone
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Delete Sponsor Account</p>
|
||||
<p className="text-sm text-gray-500">Permanently delete your account and all sponsorship data</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleDeleteAccount}
|
||||
className="text-sm text-racing-red border-racing-red/30 hover:bg-racing-red/10"
|
||||
>
|
||||
Delete Account
|
||||
</Button>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="border-racing-red/30 overflow-hidden">
|
||||
<div className="p-5 border-b border-racing-red/30 bg-gradient-to-r from-racing-red/10 to-transparent">
|
||||
<h2 className="text-lg font-semibold text-racing-red flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-racing-red/10">
|
||||
<AlertCircle className="w-5 h-5 text-racing-red" />
|
||||
</div>
|
||||
Danger Zone
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Alpha Notice */}
|
||||
<div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
||||
<p className="text-xs text-gray-400">
|
||||
<strong className="text-warning-amber">Alpha Note:</strong> Settings are demonstration-only and won't persist.
|
||||
Full account management will be available when the system is fully implemented.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-racing-red/10">
|
||||
<Trash2 className="w-5 h-5 text-racing-red" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Delete Sponsor Account</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Permanently delete your account and all associated sponsorship data.
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleDeleteAccount}
|
||||
className="text-racing-red border-racing-red/30 hover:bg-racing-red/10"
|
||||
>
|
||||
Delete Account
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
182
apps/website/components/auth/AuthWorkflowMockup.tsx
Normal file
182
apps/website/components/auth/AuthWorkflowMockup.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
UserPlus,
|
||||
Link as LinkIcon,
|
||||
Settings,
|
||||
Trophy,
|
||||
Car,
|
||||
Users,
|
||||
Shield,
|
||||
CheckCircle2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface WorkflowStep {
|
||||
id: number;
|
||||
icon: typeof UserPlus;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const WORKFLOW_STEPS: WorkflowStep[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: UserPlus,
|
||||
title: 'Create Account',
|
||||
description: 'Sign up with email or connect iRacing',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: LinkIcon,
|
||||
title: 'Link iRacing',
|
||||
description: 'Connect your iRacing profile for stats',
|
||||
color: 'text-purple-400',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: Settings,
|
||||
title: 'Configure Profile',
|
||||
description: 'Set up your racing preferences',
|
||||
color: 'text-warning-amber',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: Trophy,
|
||||
title: 'Join Leagues',
|
||||
description: 'Find and join competitive leagues',
|
||||
color: 'text-performance-green',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: Car,
|
||||
title: 'Start Racing',
|
||||
description: 'Compete and track your progress',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
];
|
||||
|
||||
export default function AuthWorkflowMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % WORKFLOW_STEPS.length);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted]);
|
||||
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-6">
|
||||
<div className="flex justify-between gap-2">
|
||||
{WORKFLOW_STEPS.map((step) => (
|
||||
<div key={step.id} className="flex flex-col items-center text-center flex-1">
|
||||
<div className="w-10 h-10 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center mb-2">
|
||||
<step.icon className={`w-4 h-4 ${step.color}`} />
|
||||
</div>
|
||||
<h4 className="text-xs font-medium text-white">{step.title}</h4>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-4 sm:p-6 overflow-hidden">
|
||||
{/* Connection Lines */}
|
||||
<div className="absolute top-[3.5rem] left-[8%] right-[8%] hidden sm:block">
|
||||
<div className="h-0.5 bg-charcoal-outline relative">
|
||||
<motion.div
|
||||
className="absolute h-full bg-gradient-to-r from-primary-blue to-performance-green"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (WORKFLOW_STEPS.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="flex justify-between gap-2 relative">
|
||||
{WORKFLOW_STEPS.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={step.id}
|
||||
className="flex flex-col items-center text-center cursor-pointer flex-1"
|
||||
onClick={() => setActiveStep(index)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg border flex items-center justify-center mb-2 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]'
|
||||
: isCompleted
|
||||
? 'bg-performance-green/20 border-performance-green/50'
|
||||
: 'bg-iron-gray border-charcoal-outline'
|
||||
}`}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.08, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
} : {}}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-performance-green" />
|
||||
) : (
|
||||
<StepIcon className={`w-4 h-4 sm:w-5 sm:h-5 ${isActive ? step.color : 'text-gray-500'}`} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h4 className={`text-xs font-medium transition-colors hidden sm:block ${
|
||||
isActive ? 'text-white' : 'text-gray-400'
|
||||
}`}>
|
||||
{step.title}
|
||||
</h4>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Step Preview - Mobile */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mt-4 pt-4 border-t border-charcoal-outline sm:hidden"
|
||||
>
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-gray-400 mb-1">
|
||||
Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep].title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{WORKFLOW_STEPS[activeStep].description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
apps/website/components/auth/RoleCard.tsx
Normal file
82
apps/website/components/auth/RoleCard.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface RoleCardProps {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
color: string;
|
||||
selected?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function RoleCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
features,
|
||||
color,
|
||||
selected = false,
|
||||
onClick,
|
||||
}: RoleCardProps) {
|
||||
return (
|
||||
<motion.button
|
||||
onClick={onClick}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`w-full text-left p-4 rounded-xl border transition-all duration-200 ${
|
||||
selected
|
||||
? `border-${color} bg-${color}/10 shadow-[0_0_20px_rgba(25,140,255,0.2)]`
|
||||
: 'border-charcoal-outline bg-iron-gray/50 hover:border-gray-600 hover:bg-iron-gray'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
|
||||
selected ? `bg-${color}/20` : 'bg-deep-graphite'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-5 h-5 ${selected ? `text-${color}` : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3
|
||||
className={`font-semibold transition-colors ${
|
||||
selected ? 'text-white' : 'text-gray-200'
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{description}</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${
|
||||
selected ? 'border-primary-blue bg-primary-blue' : 'border-gray-600'
|
||||
}`}
|
||||
>
|
||||
{selected && (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
className="w-2 h-2 rounded-full bg-white"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
|
||||
<ul className="space-y-1">
|
||||
{features.map((feature, index) => (
|
||||
<li key={index} className="text-xs text-gray-400 flex items-center gap-2">
|
||||
<span
|
||||
className={`w-1 h-1 rounded-full ${selected ? 'bg-primary-blue' : 'bg-gray-600'}`}
|
||||
/>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { LogOut, Settings, Star, Paintbrush, Building2, BarChart3, Megaphone, CreditCard, Handshake } from 'lucide-react';
|
||||
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
|
||||
import { LogOut, Settings, Star, Paintbrush, Building2, BarChart3, Megaphone, CreditCard, Handshake, ChevronDown, TrendingUp, Trophy } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
|
||||
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
||||
@@ -25,11 +26,66 @@ function useSponsorMode(): boolean {
|
||||
return isSponsor;
|
||||
}
|
||||
|
||||
// Sponsor Pill Component - matches the style of DriverSummaryPill
|
||||
function SponsorSummaryPill({
|
||||
onClick,
|
||||
companyName = 'Acme Racing Co.',
|
||||
activeSponsors = 7,
|
||||
impressions = 127,
|
||||
}: {
|
||||
onClick: () => void;
|
||||
companyName?: string;
|
||||
activeSponsors?: number;
|
||||
impressions?: number;
|
||||
}) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
onClick={onClick}
|
||||
className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-performance-green/50 transition-all duration-200"
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.02 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.98 }}
|
||||
>
|
||||
{/* Avatar/Logo */}
|
||||
<div className="relative">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-performance-green" />
|
||||
</div>
|
||||
{/* Active indicator */}
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-performance-green border-2 border-deep-graphite" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="hidden sm:flex flex-col items-start">
|
||||
<span className="text-xs font-semibold text-white truncate max-w-[100px]">
|
||||
{companyName.split(' ')[0]}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-[10px] text-gray-500">
|
||||
<span className="flex items-center gap-0.5">
|
||||
<Trophy className="w-2.5 h-2.5 text-performance-green" />
|
||||
{activeSponsors}
|
||||
</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="flex items-center gap-0.5">
|
||||
<TrendingUp className="w-2.5 h-2.5 text-primary-blue" />
|
||||
{impressions}k
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chevron */}
|
||||
<ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UserPill() {
|
||||
const { session, login } = useAuth();
|
||||
const [driver, setDriver] = useState<DriverDTO | null>(null);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const isSponsorMode = useSponsorMode();
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const user = session?.user as
|
||||
| {
|
||||
@@ -113,75 +169,112 @@ export default function UserPill() {
|
||||
};
|
||||
}, [session, driver, primaryDriverId]);
|
||||
|
||||
// Sponsor mode UI - check BEFORE session check so sponsors without auth still see sponsor UI
|
||||
// Close menu when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (isMenuOpen) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('[data-user-pill]')) {
|
||||
setIsMenuOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, [isMenuOpen]);
|
||||
|
||||
// Sponsor mode UI
|
||||
if (isSponsorMode) {
|
||||
return (
|
||||
<div className="relative inline-flex items-center">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen((open) => !open)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30 hover:bg-performance-green/20 transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-performance-green/20 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-performance-green" />
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-performance-green">Sponsor</span>
|
||||
</button>
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<SponsorSummaryPill onClick={() => setIsMenuOpen((open) => !open)} />
|
||||
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-56 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50">
|
||||
<div className="p-3 border-b border-charcoal-outline">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wide">Demo Sponsor Account</p>
|
||||
<p className="text-sm font-semibold text-white mt-1">Acme Racing Co.</p>
|
||||
</div>
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
<Link
|
||||
href="/sponsor"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4 text-performance-green" />
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sponsor/campaigns"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Megaphone className="h-4 w-4 text-primary-blue" />
|
||||
<span>My Sponsorships</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sponsor/billing"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<CreditCard className="h-4 w-4 text-warning-amber" />
|
||||
<span>Billing</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sponsor/settings"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
window.location.reload();
|
||||
}}
|
||||
className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<span>Exit Sponsor Mode</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-64 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
|
||||
initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 bg-gradient-to-r from-performance-green/10 to-transparent border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 flex items-center justify-center">
|
||||
<Building2 className="w-5 h-5 text-performance-green" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">Acme Racing Co.</p>
|
||||
<p className="text-xs text-gray-500">Sponsor Account</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Quick stats */}
|
||||
<div className="flex items-center gap-4 mt-3 pt-3 border-t border-charcoal-outline/50">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Trophy className="w-3.5 h-3.5 text-performance-green" />
|
||||
<span className="text-xs text-gray-400">7 active</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<TrendingUp className="w-3.5 h-3.5 text-primary-blue" />
|
||||
<span className="text-xs text-gray-400">127k views</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="py-2 text-sm text-gray-200">
|
||||
<Link
|
||||
href="/sponsor"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4 text-performance-green" />
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sponsor/campaigns"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Megaphone className="h-4 w-4 text-primary-blue" />
|
||||
<span>My Sponsorships</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sponsor/billing"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<CreditCard className="h-4 w-4 text-warning-amber" />
|
||||
<span>Billing</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sponsor/settings"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4 text-gray-400" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
window.location.reload();
|
||||
}}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
|
||||
>
|
||||
<span>Exit Sponsor Mode</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -210,7 +303,7 @@ export default function UserPill() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative inline-flex items-center">
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<DriverSummaryPill
|
||||
driver={data.driver}
|
||||
rating={data.rating}
|
||||
@@ -219,61 +312,69 @@ export default function UserPill() {
|
||||
onClick={() => setIsMenuOpen((open) => !open)}
|
||||
/>
|
||||
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50">
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
<Link
|
||||
href="/profile"
|
||||
className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/leagues"
|
||||
className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
Manage leagues
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/liveries"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Paintbrush className="h-4 w-4" />
|
||||
<span>Liveries</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/sponsorship-requests"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Handshake className="h-4 w-4 text-performance-green" />
|
||||
<span>Sponsorship Requests</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/settings"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<form action="/auth/logout" method="POST">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50"
|
||||
initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
<Link
|
||||
href="/profile"
|
||||
className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<span>Logout</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
Profile
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/leagues"
|
||||
className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
Manage leagues
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/liveries"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Paintbrush className="h-4 w-4" />
|
||||
<span>Liveries</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/sponsorship-requests"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Handshake className="h-4 w-4 text-performance-green" />
|
||||
<span>Sponsorship Requests</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/settings"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<form action="/auth/logout" method="POST">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<span>Logout</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
apps/website/components/sponsors/SponsorBenefitCard.tsx
Normal file
97
apps/website/components/sponsors/SponsorBenefitCard.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { ReactNode, useEffect, useState } from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface SponsorBenefitCardProps {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
stats?: {
|
||||
value: string;
|
||||
label: string;
|
||||
};
|
||||
variant?: 'default' | 'highlight';
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export default function SponsorBenefitCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
stats,
|
||||
variant = 'default',
|
||||
delay = 0,
|
||||
}: SponsorBenefitCardProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
const isHighlight = variant === 'highlight';
|
||||
|
||||
const cardContent = (
|
||||
<div
|
||||
className={`
|
||||
relative h-full rounded-xl p-6 transition-all duration-300
|
||||
${isHighlight
|
||||
? 'bg-gradient-to-br from-primary-blue/10 to-primary-blue/5 border border-primary-blue/30'
|
||||
: 'bg-iron-gray/50 border border-charcoal-outline hover:border-charcoal-outline/80'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`
|
||||
w-12 h-12 rounded-xl flex items-center justify-center mb-4
|
||||
${isHighlight
|
||||
? 'bg-primary-blue/20'
|
||||
: 'bg-iron-gray border border-charcoal-outline'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 ${isHighlight ? 'text-primary-blue' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
|
||||
<p className="text-sm text-gray-400 leading-relaxed">{description}</p>
|
||||
|
||||
{/* Stats */}
|
||||
{stats && (
|
||||
<div className="mt-4 pt-4 border-t border-charcoal-outline/50">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className={`text-2xl font-bold ${isHighlight ? 'text-primary-blue' : 'text-white'}`}>
|
||||
{stats.value}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">{stats.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Highlight Glow Effect */}
|
||||
{isHighlight && (
|
||||
<div className="absolute -inset-px rounded-xl bg-gradient-to-br from-primary-blue/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!isMounted || shouldReduceMotion) {
|
||||
return <div className="group">{cardContent}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="group"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay }}
|
||||
whileHover={{ y: -4, transition: { duration: 0.2 } }}
|
||||
>
|
||||
{cardContent}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
144
apps/website/components/sponsors/SponsorHero.tsx
Normal file
144
apps/website/components/sponsors/SponsorHero.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { ReactNode, useEffect, useState } from 'react';
|
||||
import { Building2, TrendingUp, Eye, Users, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface SponsorHeroProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export default function SponsorHero({ title, subtitle, children }: SponsorHeroProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.4, ease: 'easeOut' },
|
||||
},
|
||||
};
|
||||
|
||||
if (!isMounted || shouldReduceMotion) {
|
||||
return (
|
||||
<div className="relative overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-blue/10 via-transparent to-transparent" />
|
||||
|
||||
{/* Grid Pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-5"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(to right, #198CFF 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #198CFF 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '40px 40px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative max-w-5xl mx-auto px-4 py-16 sm:py-24">
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-blue/10 border border-primary-blue/20 mb-6">
|
||||
<Building2 className="w-4 h-4 text-primary-blue" />
|
||||
<span className="text-sm text-primary-blue font-medium">Sponsor Portal</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto mb-10">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="relative overflow-hidden"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-blue/10 via-transparent to-transparent" />
|
||||
|
||||
{/* Animated Grid Pattern */}
|
||||
<motion.div
|
||||
className="absolute inset-0 opacity-5"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(to right, #198CFF 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #198CFF 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '40px 40px',
|
||||
}}
|
||||
animate={{
|
||||
backgroundPosition: ['0px 0px', '40px 40px'],
|
||||
}}
|
||||
transition={{
|
||||
duration: 20,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative max-w-5xl mx-auto px-4 py-16 sm:py-24">
|
||||
<div className="text-center">
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-blue/10 border border-primary-blue/20 mb-6"
|
||||
>
|
||||
<Building2 className="w-4 h-4 text-primary-blue" />
|
||||
<span className="text-sm text-primary-blue font-medium">Sponsor Portal</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
variants={itemVariants}
|
||||
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={itemVariants}
|
||||
className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto mb-10"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
196
apps/website/components/sponsors/SponsorWorkflowMockup.tsx
Normal file
196
apps/website/components/sponsors/SponsorWorkflowMockup.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Search,
|
||||
MousePointer,
|
||||
CreditCard,
|
||||
CheckCircle2,
|
||||
Car,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
Building2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface WorkflowStep {
|
||||
id: number;
|
||||
icon: typeof Search;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const WORKFLOW_STEPS: WorkflowStep[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: Search,
|
||||
title: 'Browse Leagues',
|
||||
description: 'Find leagues that match your target audience',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: MousePointer,
|
||||
title: 'Select Tier',
|
||||
description: 'Choose main or secondary sponsorship slot',
|
||||
color: 'text-purple-400',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: CreditCard,
|
||||
title: 'Complete Payment',
|
||||
description: 'Secure payment with automatic invoicing',
|
||||
color: 'text-warning-amber',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: Car,
|
||||
title: 'Logo Placement',
|
||||
description: 'Your brand on liveries and league pages',
|
||||
color: 'text-performance-green',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: TrendingUp,
|
||||
title: 'Track Results',
|
||||
description: 'Monitor impressions and engagement',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
];
|
||||
|
||||
export default function SponsorWorkflowMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % WORKFLOW_STEPS.length);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted]);
|
||||
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-8">
|
||||
<div className="grid grid-cols-5 gap-4">
|
||||
{WORKFLOW_STEPS.map((step) => (
|
||||
<div key={step.id} className="flex flex-col items-center text-center">
|
||||
<div className="w-14 h-14 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center mb-3">
|
||||
<step.icon className={`w-6 h-6 ${step.color}`} />
|
||||
</div>
|
||||
<h4 className="text-sm font-medium text-white mb-1">{step.title}</h4>
|
||||
<p className="text-xs text-gray-500">{step.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-6 sm:p-8 overflow-hidden">
|
||||
{/* Connection Lines */}
|
||||
<div className="absolute top-[4.5rem] left-[10%] right-[10%] hidden sm:block">
|
||||
<div className="h-0.5 bg-charcoal-outline relative">
|
||||
<motion.div
|
||||
className="absolute h-full bg-gradient-to-r from-primary-blue to-performance-green"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (WORKFLOW_STEPS.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-5 gap-4 relative">
|
||||
{WORKFLOW_STEPS.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={step.id}
|
||||
className="flex flex-col items-center text-center cursor-pointer"
|
||||
onClick={() => setActiveStep(index)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`w-14 h-14 rounded-xl border flex items-center justify-center mb-3 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_20px_rgba(25,140,255,0.3)]'
|
||||
: isCompleted
|
||||
? 'bg-performance-green/20 border-performance-green/50'
|
||||
: 'bg-iron-gray border-charcoal-outline'
|
||||
}`}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.1, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
} : {}}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="w-6 h-6 text-performance-green" />
|
||||
) : (
|
||||
<StepIcon className={`w-6 h-6 ${isActive ? step.color : 'text-gray-500'}`} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h4 className={`text-sm font-medium mb-1 transition-colors ${
|
||||
isActive ? 'text-white' : 'text-gray-400'
|
||||
}`}>
|
||||
{step.title}
|
||||
</h4>
|
||||
<p className={`text-xs transition-colors ${
|
||||
isActive ? 'text-gray-300' : 'text-gray-600'
|
||||
}`}>
|
||||
{step.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Step Preview */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="mt-8 pt-6 border-t border-charcoal-outline"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-lg bg-iron-gray flex items-center justify-center`}>
|
||||
{(() => {
|
||||
const Icon = WORKFLOW_STEPS[activeStep].icon;
|
||||
return <Icon className={`w-4 h-4 ${WORKFLOW_STEPS[activeStep].color}`} />;
|
||||
})()}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-gray-400">
|
||||
Step {activeStep + 1} of {WORKFLOW_STEPS.length}
|
||||
</p>
|
||||
<p className="text-white font-medium">
|
||||
{WORKFLOW_STEPS[activeStep].title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
apps/website/components/ui/FormField.tsx
Normal file
44
apps/website/components/ui/FormField.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface FormFieldProps {
|
||||
label: string;
|
||||
icon?: React.ElementType;
|
||||
children: React.ReactNode;
|
||||
required?: boolean;
|
||||
error?: string;
|
||||
hint?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form field wrapper with label, optional icon, required indicator, and error/hint display.
|
||||
* Used for consistent form field layout throughout the app.
|
||||
*/
|
||||
export default function FormField({
|
||||
label,
|
||||
icon: Icon,
|
||||
children,
|
||||
required = false,
|
||||
error,
|
||||
hint,
|
||||
}: FormFieldProps) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-300">
|
||||
<div className="flex items-center gap-2">
|
||||
{Icon && <Icon className="w-4 h-4 text-gray-500" />}
|
||||
{label}
|
||||
{required && <span className="text-racing-red">*</span>}
|
||||
</div>
|
||||
</label>
|
||||
{children}
|
||||
{error && (
|
||||
<p className="text-xs text-racing-red mt-1">{error}</p>
|
||||
)}
|
||||
{hint && !error && (
|
||||
<p className="text-xs text-gray-500 mt-1">{hint}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
apps/website/components/ui/InfoBanner.tsx
Normal file
71
apps/website/components/ui/InfoBanner.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
|
||||
|
||||
type BannerType = 'info' | 'warning' | 'success' | 'error';
|
||||
|
||||
interface InfoBannerProps {
|
||||
type?: BannerType;
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
icon?: React.ElementType;
|
||||
}
|
||||
|
||||
const bannerConfig: Record<BannerType, {
|
||||
icon: React.ElementType;
|
||||
bg: string;
|
||||
border: string;
|
||||
titleColor: string;
|
||||
}> = {
|
||||
info: {
|
||||
icon: Info,
|
||||
bg: 'bg-iron-gray/30',
|
||||
border: 'border-charcoal-outline/50',
|
||||
titleColor: 'text-gray-300',
|
||||
},
|
||||
warning: {
|
||||
icon: AlertTriangle,
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30',
|
||||
titleColor: 'text-warning-amber',
|
||||
},
|
||||
success: {
|
||||
icon: CheckCircle,
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30',
|
||||
titleColor: 'text-performance-green',
|
||||
},
|
||||
error: {
|
||||
icon: XCircle,
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30',
|
||||
titleColor: 'text-racing-red',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Info banner component for displaying contextual information, warnings, or notices.
|
||||
* Used throughout the app for important messages and helper text.
|
||||
*/
|
||||
export default function InfoBanner({
|
||||
type = 'info',
|
||||
title,
|
||||
children,
|
||||
icon: CustomIcon,
|
||||
}: InfoBannerProps) {
|
||||
const config = bannerConfig[type];
|
||||
const Icon = CustomIcon || config.icon;
|
||||
|
||||
return (
|
||||
<div className={`flex items-start gap-3 p-4 rounded-lg border ${config.bg} ${config.border}`}>
|
||||
<Icon className="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm text-gray-400">
|
||||
{title && (
|
||||
<p className={`font-medium mb-1 ${config.titleColor}`}>{title}</p>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
apps/website/components/ui/PageHeader.tsx
Normal file
44
apps/website/components/ui/PageHeader.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface PageHeaderProps {
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: React.ReactNode;
|
||||
iconGradient?: string;
|
||||
iconBorder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page header component with icon, title, description, and optional action.
|
||||
* Used at the top of pages for consistent page titling.
|
||||
*/
|
||||
export default function PageHeader({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
iconGradient = 'from-iron-gray to-deep-graphite',
|
||||
iconBorder = 'border-charcoal-outline',
|
||||
}: PageHeaderProps) {
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white flex items-center gap-4">
|
||||
<div className={`p-3 rounded-xl bg-gradient-to-br ${iconGradient} border ${iconBorder}`}>
|
||||
<Icon className="w-7 h-7 text-gray-300" />
|
||||
</div>
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="text-gray-400 mt-2 ml-16">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
apps/website/components/ui/SectionHeader.tsx
Normal file
40
apps/website/components/ui/SectionHeader.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface SectionHeaderProps {
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: React.ReactNode;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Section header component with icon, title, optional description and action.
|
||||
* Used at the top of card sections throughout the app.
|
||||
*/
|
||||
export default function SectionHeader({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
color = 'text-primary-blue'
|
||||
}: SectionHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between p-5 border-b border-charcoal-outline bg-gradient-to-r from-iron-gray/30 to-transparent">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg bg-iron-gray/50 ${color}`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p className="text-sm text-gray-500 mt-1 ml-12">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
apps/website/components/ui/StatCard.tsx
Normal file
56
apps/website/components/ui/StatCard.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Card from './Card';
|
||||
|
||||
interface StatCardProps {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
value: string;
|
||||
subValue?: string;
|
||||
color?: string;
|
||||
bgColor?: string;
|
||||
trend?: {
|
||||
value: number;
|
||||
isPositive: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Statistics card component for displaying metrics with icon, label, value, and optional trend.
|
||||
* Used in dashboards and overview sections.
|
||||
*/
|
||||
export default function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
subValue,
|
||||
color = 'text-primary-blue',
|
||||
bgColor = 'bg-primary-blue/10',
|
||||
trend,
|
||||
}: StatCardProps) {
|
||||
return (
|
||||
<Card className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className={`p-2 rounded-lg ${bgColor}`}>
|
||||
<Icon className={`w-4 h-4 ${color}`} />
|
||||
</div>
|
||||
<span className="text-sm text-gray-400">{label}</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">{value}</div>
|
||||
{subValue && (
|
||||
<div className="text-xs text-gray-500 mt-1">{subValue}</div>
|
||||
)}
|
||||
</div>
|
||||
{trend && (
|
||||
<div className={`flex items-center gap-1 text-sm ${trend.isPositive ? 'text-performance-green' : 'text-racing-red'}`}>
|
||||
<span>{trend.isPositive ? '↑' : '↓'}</span>
|
||||
<span>{Math.abs(trend.value)}%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
68
apps/website/components/ui/StatusBadge.tsx
Normal file
68
apps/website/components/ui/StatusBadge.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: StatusType;
|
||||
label: string;
|
||||
icon?: React.ElementType;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
const statusConfig: Record<StatusType, { color: string; bg: string; border: string }> = {
|
||||
success: {
|
||||
color: 'text-performance-green',
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30',
|
||||
},
|
||||
warning: {
|
||||
color: 'text-warning-amber',
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30',
|
||||
},
|
||||
error: {
|
||||
color: 'text-racing-red',
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30',
|
||||
},
|
||||
info: {
|
||||
color: 'text-primary-blue',
|
||||
bg: 'bg-primary-blue/10',
|
||||
border: 'border-primary-blue/30',
|
||||
},
|
||||
neutral: {
|
||||
color: 'text-gray-400',
|
||||
bg: 'bg-iron-gray',
|
||||
border: 'border-charcoal-outline',
|
||||
},
|
||||
pending: {
|
||||
color: 'text-warning-amber',
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Status badge component for displaying status indicators.
|
||||
* Used for showing status of items like invoices, sponsorships, etc.
|
||||
*/
|
||||
export default function StatusBadge({
|
||||
status,
|
||||
label,
|
||||
icon: Icon,
|
||||
size = 'sm',
|
||||
}: StatusBadgeProps) {
|
||||
const config = statusConfig[status];
|
||||
const sizeClasses = size === 'sm'
|
||||
? 'px-2 py-0.5 text-xs'
|
||||
: 'px-3 py-1 text-sm';
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 rounded-full font-medium border ${config.bg} ${config.color} ${config.border} ${sizeClasses}`}>
|
||||
{Icon && <Icon className={size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'} />}
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
76
apps/website/components/ui/Toggle.tsx
Normal file
76
apps/website/components/ui/Toggle.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
|
||||
interface ToggleProps {
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
label: string;
|
||||
description?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle switch component with Framer Motion animation.
|
||||
* Used for boolean settings/preferences.
|
||||
*/
|
||||
export default function Toggle({
|
||||
checked,
|
||||
onChange,
|
||||
label,
|
||||
description,
|
||||
disabled = false,
|
||||
}: ToggleProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<label className={`flex items-start justify-between cursor-pointer py-3 border-b border-charcoal-outline/50 last:border-b-0 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}>
|
||||
<div className="flex-1 pr-4">
|
||||
<span className="text-gray-200 font-medium">{label}</span>
|
||||
{description && (
|
||||
<p className="text-sm text-gray-500 mt-0.5">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
onClick={() => !disabled && onChange(!checked)}
|
||||
disabled={disabled}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-primary-blue/50 ${
|
||||
checked
|
||||
? 'bg-primary-blue'
|
||||
: 'bg-iron-gray'
|
||||
} ${disabled ? 'cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{/* Glow effect when active */}
|
||||
{checked && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-primary-blue"
|
||||
initial={{ boxShadow: '0 0 0px rgba(25, 140, 255, 0)' }}
|
||||
animate={{ boxShadow: '0 0 12px rgba(25, 140, 255, 0.4)' }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Knob */}
|
||||
<motion.span
|
||||
className="absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-md"
|
||||
initial={false}
|
||||
animate={{
|
||||
x: checked ? 24 : 2,
|
||||
scale: 1,
|
||||
}}
|
||||
whileTap={{ scale: disabled ? 1 : 0.9 }}
|
||||
transition={{
|
||||
type: 'spring',
|
||||
stiffness: 500,
|
||||
damping: 30,
|
||||
duration: shouldReduceMotion ? 0 : undefined,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
87
apps/website/lib/siteConfig.ts
Normal file
87
apps/website/lib/siteConfig.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Site-wide configuration for GridPilot website
|
||||
*
|
||||
* IMPORTANT: Update this file with correct information before going live.
|
||||
* This serves as a single source of truth for legal and company information.
|
||||
*/
|
||||
|
||||
export const siteConfig = {
|
||||
// Platform Information
|
||||
platformName: 'GridPilot',
|
||||
platformUrl: process.env.NEXT_PUBLIC_SITE_URL || 'https://gridpilot.com',
|
||||
|
||||
// Contact Information
|
||||
supportEmail: 'support@gridpilot.com',
|
||||
sponsorEmail: 'sponsors@gridpilot.com',
|
||||
|
||||
// Legal & Business Information
|
||||
// TODO: Update these with actual company details before launch
|
||||
legal: {
|
||||
companyName: '', // e.g., 'GridPilot GmbH' - leave empty until confirmed
|
||||
vatId: '', // e.g., 'DE123456789' - leave empty until confirmed
|
||||
registeredCountry: '', // e.g., 'Germany' - leave empty until confirmed
|
||||
registeredAddress: '', // Full registered address - leave empty until confirmed
|
||||
},
|
||||
|
||||
// Platform Fees
|
||||
fees: {
|
||||
platformFeePercent: 10, // 10% platform fee on sponsorships
|
||||
description: 'Platform fee supports maintenance, analytics, and secure payment processing.',
|
||||
},
|
||||
|
||||
// VAT Information
|
||||
vat: {
|
||||
// Note: All prices displayed are exclusive of VAT
|
||||
euReverseChargeApplies: true,
|
||||
nonEuVatExempt: true,
|
||||
notice: 'All prices shown are exclusive of VAT. Applicable taxes will be calculated at checkout.',
|
||||
euBusinessNotice: 'EU businesses with a valid VAT ID may apply reverse charge.',
|
||||
nonEuNotice: 'Non-EU businesses are not charged VAT.',
|
||||
},
|
||||
|
||||
// Sponsorship Types Available
|
||||
sponsorshipTypes: {
|
||||
leagues: {
|
||||
enabled: true,
|
||||
title: 'League Sponsorship',
|
||||
description: 'Sponsor entire racing leagues and get your brand in front of all participants.',
|
||||
},
|
||||
teams: {
|
||||
enabled: true,
|
||||
title: 'Team Sponsorship',
|
||||
description: 'Partner with competitive racing teams for long-term brand association.',
|
||||
},
|
||||
drivers: {
|
||||
enabled: true,
|
||||
title: 'Driver Sponsorship',
|
||||
description: 'Support individual drivers and grow with rising sim racing talent.',
|
||||
},
|
||||
races: {
|
||||
enabled: true,
|
||||
title: 'Race Sponsorship',
|
||||
description: 'Sponsor individual race events for targeted, high-impact exposure.',
|
||||
},
|
||||
platform: {
|
||||
enabled: true,
|
||||
title: 'Platform Advertising',
|
||||
description: 'Reach the entire GridPilot audience with strategic platform placements.',
|
||||
},
|
||||
},
|
||||
|
||||
// Feature Flags for Sponsorship Features
|
||||
features: {
|
||||
// What sponsors can actually get (no broadcast control)
|
||||
liveryPlacement: true,
|
||||
leaguePageBranding: true,
|
||||
racePageBranding: true,
|
||||
profileBadges: true,
|
||||
socialMediaMentions: true,
|
||||
newsletterInclusion: true,
|
||||
homepageAds: true,
|
||||
sidebarAds: true,
|
||||
// We don't control these
|
||||
broadcastOverlays: false, // We don't control broadcast
|
||||
},
|
||||
} as const;
|
||||
|
||||
export type SiteConfig = typeof siteConfig;
|
||||
Reference in New Issue
Block a user