update
This commit is contained in:
@@ -0,0 +1,328 @@
|
||||
import { Button } from '@/app/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Badge } from '@/app/components/ui/badge';
|
||||
import { Avatar, AvatarFallback } from '@/app/components/ui/avatar';
|
||||
import { Home, Trophy, Users, Calendar, Settings, Plus, TrendingUp, Clock, CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<div className="flex gap-6 min-h-[800px]">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 flex-shrink-0">
|
||||
<Card className="h-full">
|
||||
<CardHeader className="border-b">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
|
||||
<span className="text-lg font-bold text-primary-foreground">T</span>
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">My Padel Center</CardTitle>
|
||||
<CardDescription className="text-xs">Premium Plan</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<nav className="space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-accent text-accent-foreground font-medium"
|
||||
>
|
||||
<Home className="w-5 h-5" />
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
<Trophy className="w-5 h-5" />
|
||||
<span>Tournaments</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
<Users className="w-5 h-5" />
|
||||
<span>Players</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
<Calendar className="w-5 h-5" />
|
||||
<span>Matches</span>
|
||||
</a>
|
||||
<div className="pt-4 border-t mt-4">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
<Settings className="w-5 h-5" />
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="mt-6 p-3 bg-muted rounded-lg space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Courts</span>
|
||||
<span className="font-medium">8</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Players</span>
|
||||
<span className="font-medium">324</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Avatar className="w-8 h-8">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-xs">JD</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium truncate">John Doe</div>
|
||||
<div className="text-xs text-muted-foreground">Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Dashboard</h1>
|
||||
<p className="text-muted-foreground mt-1">Welcome back, John! Here's what's happening today.</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Tournament
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm text-muted-foreground">Active Tournaments</div>
|
||||
<Trophy className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold">12</div>
|
||||
<div className="flex items-center gap-1 mt-2 text-sm text-success">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
<span>+2 this week</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm text-muted-foreground">Matches Today</div>
|
||||
<Calendar className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold">24</div>
|
||||
<div className="flex items-center gap-1 mt-2 text-sm text-muted-foreground">
|
||||
<span>8 completed</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm text-muted-foreground">Total Players</div>
|
||||
<Users className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold">324</div>
|
||||
<div className="flex items-center gap-1 mt-2 text-sm text-success">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
<span>+18 this month</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm text-muted-foreground">Court Usage</div>
|
||||
<TrendingUp className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold">86%</div>
|
||||
<div className="flex items-center gap-1 mt-2 text-sm text-muted-foreground">
|
||||
<span>This week average</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Active Tournaments */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Active Tournaments</CardTitle>
|
||||
<Button variant="ghost" size="sm">View All</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="p-3 border rounded-lg hover:border-primary/50 transition-colors cursor-pointer">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h4 className="font-semibold">Summer Championship 2026</h4>
|
||||
<p className="text-sm text-muted-foreground">Single Elimination</p>
|
||||
</div>
|
||||
<Badge className="bg-primary text-primary-foreground gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-muted-foreground">16 teams</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className="text-muted-foreground">Quarter Finals</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 border rounded-lg hover:border-primary/50 transition-colors cursor-pointer">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h4 className="font-semibold">Weekend Mixed Doubles</h4>
|
||||
<p className="text-sm text-muted-foreground">Round Robin</p>
|
||||
</div>
|
||||
<Badge className="bg-blue-500 text-white hover:bg-blue-600 gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
Scheduled
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-muted-foreground">12 teams</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className="text-muted-foreground">Starts Jan 30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 border rounded-lg hover:border-primary/50 transition-colors cursor-pointer">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h4 className="font-semibold">Beginner's Cup</h4>
|
||||
<p className="text-sm text-muted-foreground">Groups + Knockout</p>
|
||||
</div>
|
||||
<Badge className="bg-primary text-primary-foreground gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-muted-foreground">20 teams</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className="text-muted-foreground">Group Stage</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Activity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-success/10 flex items-center justify-center">
|
||||
<CheckCircle2 className="w-4 h-4 text-success" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium">Match completed</p>
|
||||
<p className="text-sm text-muted-foreground">Team Alpha defeated Team Beta (6-4, 6-3)</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">5 minutes ago</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Trophy className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium">Tournament started</p>
|
||||
<p className="text-sm text-muted-foreground">Summer Championship 2026 is now in progress</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center">
|
||||
<Users className="w-4 h-4 text-blue-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium">New players added</p>
|
||||
<p className="text-sm text-muted-foreground">12 players imported from Playtomic</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Yesterday</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center">
|
||||
<AlertCircle className="w-4 h-4 text-amber-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium">Schedule conflict</p>
|
||||
<p className="text-sm text-muted-foreground">2 matches need court reassignment</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">2 days ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Matches */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Upcoming Matches</CardTitle>
|
||||
<Button variant="ghost" size="sm">View Schedule</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 border rounded-lg hover:border-primary/50 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center min-w-[60px]">
|
||||
<div className="text-xs text-muted-foreground">Court {i}</div>
|
||||
<div className="font-medium">14:00</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-[10px]">A{i}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="font-medium text-sm">Team Alpha {i}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground text-[10px]">B{i}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="font-medium text-sm">Team Beta {i}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Badge variant="outline">Summer Championship</Badge>
|
||||
<p className="text-xs text-muted-foreground mt-1">Quarter Final</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
Start
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
import { Button } from '@/app/components/ui/button';
|
||||
import { Card, CardContent } from '@/app/components/ui/card';
|
||||
import { Trophy, Users, Calendar, Monitor, Zap, Shield } from 'lucide-react';
|
||||
import { ImageWithFallback } from '@/app/components/figma/ImageWithFallback';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="space-y-20">
|
||||
{/* Hero Section */}
|
||||
<section className="relative">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent text-sm">
|
||||
<Zap className="w-4 h-4 text-primary" />
|
||||
<span className="font-medium">Tournament Management Made Simple</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl font-bold leading-tight">
|
||||
Manage your padel tournaments with{' '}
|
||||
<span className="text-primary">tourn.me</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground">
|
||||
The lightweight tool for padel centers to organize tournaments, schedule matches,
|
||||
and communicate with players effortlessly.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Button size="lg" className="text-lg px-8">
|
||||
Start Free Trial
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-lg px-8">
|
||||
Watch Demo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 pt-4">
|
||||
<div>
|
||||
<div className="text-3xl font-bold">500+</div>
|
||||
<div className="text-sm text-muted-foreground">Tournaments</div>
|
||||
</div>
|
||||
<div className="h-12 w-px bg-border"></div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold">50+</div>
|
||||
<div className="text-sm text-muted-foreground">Padel Centers</div>
|
||||
</div>
|
||||
<div className="h-12 w-px bg-border"></div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold">10k+</div>
|
||||
<div className="text-sm text-muted-foreground">Players</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent rounded-2xl -rotate-6"></div>
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1699117686612-ece525e4f91a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYWRlbCUyMHRlbm5pcyUyMGNvdXJ0fGVufDF8fHx8MTc2OTY0NDQyM3ww&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
alt="Padel court"
|
||||
className="relative rounded-2xl shadow-2xl w-full h-[500px] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl font-bold">Everything you need to run tournaments</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
From player management to live displays, we've got all your tournament needs covered
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card className="border-2 hover:border-primary/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Trophy className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Multiple Formats</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Support for Round Robin, Single/Double Elimination, and Groups + Knockout formats
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 hover:border-primary/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Player Management</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Import from Playtomic or add manually. Players shared across all centers
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 hover:border-primary/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Calendar className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Easy Scheduling</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Drag & drop match ordering with optional court assignments
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 hover:border-primary/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Monitor className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Public Display</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Shareable links for TV displays with optional access codes
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 hover:border-primary/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Zap className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Auto Progression</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Winners automatically advance in knockout brackets
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 hover:border-primary/50 transition-colors">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Multi-tenant SaaS</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Secure, isolated data for each padel center
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className="bg-muted/50 -mx-4 px-4 py-16 rounded-2xl">
|
||||
<div className="space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl font-bold">How it works</h2>
|
||||
<p className="text-xl text-muted-foreground">Get started in minutes</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center mx-auto text-2xl font-bold">
|
||||
1
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Create Your Center</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Sign up and set up your padel center profile in seconds
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center mx-auto text-2xl font-bold">
|
||||
2
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Import Players</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Import from Playtomic or add players manually with their skill levels
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-primary text-primary-foreground flex items-center justify-center mx-auto text-2xl font-bold">
|
||||
3
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Run Tournaments</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Create tournaments, schedule matches, and share results on displays
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-secondary text-secondary-foreground rounded-2xl p-12 text-center space-y-6">
|
||||
<h2 className="text-4xl font-bold">Ready to simplify your tournaments?</h2>
|
||||
<p className="text-xl opacity-90 max-w-2xl mx-auto">
|
||||
Join padel centers around the world using tourn.me to manage their tournaments
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 justify-center">
|
||||
<Button size="lg" variant="secondary" className="text-lg px-8 bg-primary hover:bg-primary/90 text-primary-foreground">
|
||||
Get Started Free
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="text-lg px-8 bg-transparent border-secondary-foreground/20 hover:bg-secondary-foreground/10 text-secondary-foreground">
|
||||
Contact Sales
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t pt-12">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<span className="text-lg font-bold text-primary-foreground">T</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold">tourn.me</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Tournament management made simple for padel centers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Product</h4>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li><a href="#" className="hover:text-foreground">Features</a></li>
|
||||
<li><a href="#" className="hover:text-foreground">Pricing</a></li>
|
||||
<li><a href="#" className="hover:text-foreground">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Company</h4>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li><a href="#" className="hover:text-foreground">About</a></li>
|
||||
<li><a href="#" className="hover:text-foreground">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-foreground">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Legal</h4>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li><a href="#" className="hover:text-foreground">Privacy</a></li>
|
||||
<li><a href="#" className="hover:text-foreground">Terms</a></li>
|
||||
<li><a href="#" className="hover:text-foreground">Security</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t mt-12 pt-6 text-center text-sm text-muted-foreground">
|
||||
<p>© 2026 tourn.me. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Button } from '@/app/components/ui/button';
|
||||
import { Input } from '@/app/components/ui/input';
|
||||
import { Label } from '@/app/components/ui/label';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Separator } from '@/app/components/ui/separator';
|
||||
import { Trophy } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<div className="min-h-[600px] flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="space-y-4 text-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center">
|
||||
<Trophy className="w-8 h-8 text-primary-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Welcome back</CardTitle>
|
||||
<CardDescription>Sign in to your tourn.me account</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<form className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@padelcenter.com"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<a href="#" className="text-sm text-primary hover:underline">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full h-11">
|
||||
Sign In
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative">
|
||||
<Separator />
|
||||
<span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
|
||||
OR
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
<span className="text-muted-foreground">Don't have an account? </span>
|
||||
<a href="#" className="text-primary hover:underline font-medium">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Badge } from '@/app/components/ui/badge';
|
||||
import { Avatar, AvatarFallback } from '@/app/components/ui/avatar';
|
||||
import { Trophy, Calendar, Play, CheckCircle2, Clock } from 'lucide-react';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/ui/table';
|
||||
|
||||
export default function PublicTournamentView() {
|
||||
return (
|
||||
<div className="bg-secondary min-h-screen p-8">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="bg-card rounded-2xl p-8 shadow-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-20 h-20 bg-primary rounded-2xl flex items-center justify-center">
|
||||
<Trophy className="w-10 h-10 text-primary-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">Summer Championship 2026</h1>
|
||||
<div className="flex items-center gap-4 text-muted-foreground">
|
||||
<span>Single Elimination</span>
|
||||
<span>•</span>
|
||||
<span>16 Teams</span>
|
||||
<span>•</span>
|
||||
<span>Male / Advanced</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Badge className="bg-primary text-primary-foreground text-lg px-4 py-2">
|
||||
Quarter Finals
|
||||
</Badge>
|
||||
<div className="text-sm text-muted-foreground mt-2">
|
||||
{new Date().toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Matches */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg">
|
||||
<h2 className="text-2xl font-bold mb-6">Live & Upcoming Matches</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Live Match */}
|
||||
<div className="bg-primary/10 border-2 border-primary rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Badge className="bg-primary text-primary-foreground gap-2 text-sm px-3 py-1">
|
||||
<Play className="w-4 h-4" />
|
||||
LIVE - Court 2
|
||||
</Badge>
|
||||
<span className="text-lg font-bold">Quarter Final #2</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Team 1 */}
|
||||
<div className="flex items-center justify-between bg-card rounded-lg p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="w-14 h-14">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-lg">D</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="text-xl font-bold">Team Delta</div>
|
||||
<div className="text-sm text-muted-foreground">P. Brown / L. Garcia</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-3xl font-bold">6</div>
|
||||
<div className="text-sm text-muted-foreground">Set 1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team 2 */}
|
||||
<div className="flex items-center justify-between bg-card rounded-lg p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="w-14 h-14">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground text-lg">G</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="text-xl font-bold">Team Gamma</div>
|
||||
<div className="text-sm text-muted-foreground">R. Wilson / S. Martinez</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-3xl font-bold">5</div>
|
||||
<div className="text-sm text-muted-foreground">Set 1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Completed Match */}
|
||||
<div className="bg-success/10 border border-success/30 rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Badge className="bg-success text-success-foreground gap-2 text-sm px-3 py-1">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
Completed - Court 1
|
||||
</Badge>
|
||||
<span className="text-lg font-bold">Quarter Final #1</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between bg-card rounded-lg p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">A</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="text-lg font-bold">Team Alpha</div>
|
||||
<div className="text-sm text-muted-foreground">J. Doe / M. Smith</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl font-bold">6-4, 6-3</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between bg-card rounded-lg p-4 opacity-60">
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground">B</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="text-lg font-bold">Team Beta</div>
|
||||
<div className="text-sm text-muted-foreground">A. Johnson / K. Lee</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl font-bold">4-6, 3-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Matches */}
|
||||
<div className="bg-card rounded-xl p-6 border">
|
||||
<h3 className="font-bold mb-4 flex items-center gap-2">
|
||||
<Clock className="w-5 h-5 text-muted-foreground" />
|
||||
Next Up
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-muted-foreground">17:00</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className="font-medium">Team Epsilon vs Team Zeta</span>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">Court 1</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-muted-foreground">17:00</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className="font-medium">Team Theta vs Team Iota</span>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">Court 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Bracket & Standings */}
|
||||
<div className="space-y-4">
|
||||
{/* Bracket Preview */}
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg">
|
||||
<h2 className="text-xl font-bold mb-4">Bracket</h2>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">Semi Finals</div>
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 bg-muted rounded-lg text-sm text-center">
|
||||
TBD
|
||||
</div>
|
||||
<div className="p-3 bg-muted rounded-lg text-sm text-center">
|
||||
TBD
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t">
|
||||
<div className="text-xs text-muted-foreground mb-2">Final</div>
|
||||
<div className="p-4 bg-primary/10 rounded-lg text-center">
|
||||
<Trophy className="w-8 h-8 mx-auto mb-2 text-primary" />
|
||||
<div className="text-sm font-medium">Champion</div>
|
||||
<div className="text-xs text-muted-foreground">TBD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Performers */}
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg">
|
||||
<h2 className="text-xl font-bold mb-4">Top Performers</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||||
1
|
||||
</div>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">A</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Team Alpha</div>
|
||||
<div className="text-xs text-muted-foreground">3 wins</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-secondary text-secondary-foreground flex items-center justify-center font-bold">
|
||||
2
|
||||
</div>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground">D</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Team Delta</div>
|
||||
<div className="text-xs text-muted-foreground">3 wins</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-muted text-foreground flex items-center justify-center font-bold">
|
||||
3
|
||||
</div>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback>E</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Team Epsilon</div>
|
||||
<div className="text-xs text-muted-foreground">2 wins</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QR Code / Access Info */}
|
||||
<div className="bg-gradient-to-br from-primary to-primary/80 text-primary-foreground rounded-2xl p-6 shadow-lg">
|
||||
<div className="text-center">
|
||||
<div className="w-32 h-32 bg-white rounded-xl mx-auto mb-4 flex items-center justify-center">
|
||||
<div className="text-6xl">📱</div>
|
||||
</div>
|
||||
<h3 className="font-bold mb-2">Follow Live</h3>
|
||||
<p className="text-sm opacity-90 mb-3">Scan to view on your device</p>
|
||||
<div className="font-mono text-sm opacity-75">tourn.me/summer26</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Bar */}
|
||||
<div className="bg-card rounded-2xl p-4 shadow-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
|
||||
<span className="text-lg font-bold text-primary-foreground">T</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold">My Padel Center</div>
|
||||
<div className="text-xs text-muted-foreground">Powered by tourn.me</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold">4</div>
|
||||
<div className="text-xs text-muted-foreground">Matches Today</div>
|
||||
</div>
|
||||
<div className="h-10 w-px bg-border"></div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold">8</div>
|
||||
<div className="text-xs text-muted-foreground">Teams Left</div>
|
||||
</div>
|
||||
<div className="h-10 w-px bg-border"></div>
|
||||
<div className="text-center">
|
||||
<div className="font-mono font-bold">15:42</div>
|
||||
<div className="text-xs text-muted-foreground">Current Time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
import { Button } from '@/app/components/ui/button';
|
||||
import { Input } from '@/app/components/ui/input';
|
||||
import { Label } from '@/app/components/ui/label';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Separator } from '@/app/components/ui/separator';
|
||||
import { Trophy, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
export default function RegisterPage() {
|
||||
return (
|
||||
<div className="min-h-[600px] flex items-center justify-center py-12">
|
||||
<div className="w-full max-w-5xl grid lg:grid-cols-2 gap-8 items-center">
|
||||
{/* Left side - Benefits */}
|
||||
<div className="space-y-8 hidden lg:block">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl font-bold">Start managing tournaments today</h2>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Join hundreds of padel centers using tourn.me
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<CheckCircle2 className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Multiple tournament formats</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Round Robin, Single/Double Elimination, Groups + Knockout
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<CheckCircle2 className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Import from Playtomic</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sync your player database with one click
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<CheckCircle2 className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Public TV displays</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Share tournament brackets and matches on your screens
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<CheckCircle2 className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Easy match scheduling</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Drag & drop interface for quick organization
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<div>
|
||||
<div className="text-2xl font-bold">500+</div>
|
||||
<div className="text-xs text-muted-foreground">Tournaments</div>
|
||||
</div>
|
||||
<div className="h-12 w-px bg-border"></div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold">50+</div>
|
||||
<div className="text-xs text-muted-foreground">Centers</div>
|
||||
</div>
|
||||
<div className="h-12 w-px bg-border"></div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold">10k+</div>
|
||||
<div className="text-xs text-muted-foreground">Players</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Form */}
|
||||
<Card>
|
||||
<CardHeader className="space-y-4">
|
||||
<div className="flex justify-center lg:justify-start">
|
||||
<div className="w-12 h-12 bg-primary rounded-xl flex items-center justify-center">
|
||||
<Trophy className="w-6 h-6 text-primary-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Create your account</CardTitle>
|
||||
<CardDescription>Start your 14-day free trial. No credit card required.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<form className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">First name</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
placeholder="John"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">Last name</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
placeholder="Doe"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="centerName">Center name</Label>
|
||||
<Input
|
||||
id="centerName"
|
||||
placeholder="My Padel Center"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@padelcenter.com"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
className="h-11"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Must be at least 8 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full h-11">
|
||||
Create Account
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
By signing up, you agree to our{' '}
|
||||
<a href="#" className="text-primary hover:underline">Terms of Service</a>
|
||||
{' '}and{' '}
|
||||
<a href="#" className="text-primary hover:underline">Privacy Policy</a>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div className="relative">
|
||||
<Separator />
|
||||
<span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
|
||||
OR
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
<span className="text-muted-foreground">Already have an account? </span>
|
||||
<a href="#" className="text-primary hover:underline font-medium">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,473 @@
|
||||
import { Button } from '@/app/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Badge } from '@/app/components/ui/badge';
|
||||
import { Avatar, AvatarFallback } from '@/app/components/ui/avatar';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/app/components/ui/tabs';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/ui/table';
|
||||
import { ArrowLeft, Edit, Share2, Trophy, Calendar, Users, Settings, GripVertical, Plus, Play, CheckCircle2, Clock } from 'lucide-react';
|
||||
|
||||
export default function TournamentDetailPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back Button & Header */}
|
||||
<div>
|
||||
<Button variant="ghost" className="mb-4">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Tournaments
|
||||
</Button>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-3xl font-bold">Summer Championship 2026</h1>
|
||||
<Badge className="bg-primary text-primary-foreground gap-1">
|
||||
<Play className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Trophy className="w-4 h-4" />
|
||||
<span>Single Elimination</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Started Jan 25, 2026</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>16 Teams</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline">
|
||||
<Share2 className="w-4 h-4 mr-2" />
|
||||
Share Public View
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Settings className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-sm text-muted-foreground mb-1">Total Matches</div>
|
||||
<div className="text-2xl font-bold">15</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">8 remaining</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-sm text-muted-foreground mb-1">Current Round</div>
|
||||
<div className="text-2xl font-bold">Quarter Finals</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">4 of 8 matches</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-sm text-muted-foreground mb-1">Matches Today</div>
|
||||
<div className="text-2xl font-bold">4</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">2 completed</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-sm text-muted-foreground mb-1">Public Views</div>
|
||||
<div className="text-2xl font-bold">2.4k</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">Last 24 hours</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs defaultValue="matches" className="w-full">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="matches">Matches</TabsTrigger>
|
||||
<TabsTrigger value="bracket">Bracket</TabsTrigger>
|
||||
<TabsTrigger value="teams">Teams</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-6 mt-6">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tournament Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Format:</span>
|
||||
<span className="font-medium">Single Elimination</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Category:</span>
|
||||
<span className="font-medium">Male / Advanced</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Start Date:</span>
|
||||
<span className="font-medium">Jan 25, 2026</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">End Date:</span>
|
||||
<span className="font-medium">Jan 29, 2026</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Scoring:</span>
|
||||
<span className="font-medium">Best of 3 sets</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Access Code:</span>
|
||||
<span className="font-mono font-medium">SUMMER26</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Activity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-success/10 flex items-center justify-center">
|
||||
<CheckCircle2 className="w-4 h-4 text-success" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">Match #7 completed</p>
|
||||
<p className="text-sm text-muted-foreground">Team Alpha won 6-4, 6-3</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">5 minutes ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Play className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">Match #8 started</p>
|
||||
<p className="text-sm text-muted-foreground">Team Delta vs Team Gamma</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">12 minutes ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="matches" className="space-y-6 mt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Match Schedule</h3>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Match
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">Reorder</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quarter Finals */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium">Quarter Finals</h4>
|
||||
<Badge variant="outline">4 matches</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Match Card - Completed */}
|
||||
<Card className="border-success/50 bg-success/5">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 cursor-grab">
|
||||
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||
</Button>
|
||||
|
||||
<div className="flex-1 grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||
{/* Team 1 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">A1</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold">Team Alpha</div>
|
||||
<div className="text-sm text-muted-foreground">J. Doe / M. Smith</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
<div className="text-center min-w-[120px]">
|
||||
<div className="text-2xl font-bold">6-4, 6-3</div>
|
||||
<Badge className="bg-success text-success-foreground gap-1 mt-2">
|
||||
<CheckCircle2 className="w-3 h-3" />
|
||||
Completed
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Team 2 */}
|
||||
<div className="flex items-center gap-3 opacity-60">
|
||||
<div className="flex-1 text-right">
|
||||
<div className="font-semibold">Team Beta</div>
|
||||
<div className="text-sm text-muted-foreground">A. Johnson / K. Lee</div>
|
||||
</div>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground">B2</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2 min-w-[120px]">
|
||||
<div className="text-sm text-muted-foreground">Court 1</div>
|
||||
<div className="text-sm font-medium">14:00</div>
|
||||
<Button variant="outline" size="sm">View Details</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Match Card - In Progress */}
|
||||
<Card className="border-primary/50 bg-primary/5">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 cursor-grab">
|
||||
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||
</Button>
|
||||
|
||||
<div className="flex-1 grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">D3</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold">Team Delta</div>
|
||||
<div className="text-sm text-muted-foreground">P. Brown / L. Garcia</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center min-w-[120px]">
|
||||
<div className="text-2xl font-bold">6-5</div>
|
||||
<div className="text-sm text-muted-foreground">Set 1</div>
|
||||
<Badge className="bg-primary text-primary-foreground gap-1 mt-2">
|
||||
<Play className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 text-right">
|
||||
<div className="font-semibold">Team Gamma</div>
|
||||
<div className="text-sm text-muted-foreground">R. Wilson / S. Martinez</div>
|
||||
</div>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground">G4</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2 min-w-[120px]">
|
||||
<div className="text-sm text-muted-foreground">Court 2</div>
|
||||
<div className="text-sm font-medium">15:30</div>
|
||||
<Button size="sm">Update Score</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Match Card - Pending */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 cursor-grab">
|
||||
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||
</Button>
|
||||
|
||||
<div className="flex-1 grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">E5</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold">Team Epsilon</div>
|
||||
<div className="text-sm text-muted-foreground">T. Anderson / N. Taylor</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center min-w-[120px]">
|
||||
<div className="text-lg text-muted-foreground">vs</div>
|
||||
<Badge variant="outline" className="gap-1 mt-2">
|
||||
<Clock className="w-3 h-3" />
|
||||
Scheduled
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 text-right">
|
||||
<div className="font-semibold">Team Zeta</div>
|
||||
<div className="text-sm text-muted-foreground">H. Thomas / C. Moore</div>
|
||||
</div>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-secondary text-secondary-foreground">Z6</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2 min-w-[120px]">
|
||||
<div className="text-sm text-muted-foreground">Court 1</div>
|
||||
<div className="text-sm font-medium">17:00</div>
|
||||
<Button variant="outline" size="sm">Start Match</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="bracket" className="space-y-6 mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tournament Bracket - Single Elimination</CardTitle>
|
||||
<CardDescription>16 teams competing for the championship</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="min-w-[900px] p-6">
|
||||
{/* Bracket visualization */}
|
||||
<div className="grid grid-cols-4 gap-8">
|
||||
{/* Round of 16 */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-medium text-center mb-4">Round of 16</h4>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
||||
<div key={i} className="bg-muted p-2 rounded text-sm text-center">
|
||||
Team {i}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Quarter Finals */}
|
||||
<div className="space-y-8">
|
||||
<h4 className="text-sm font-medium text-center mb-4">Quarter Finals</h4>
|
||||
<div className="bg-primary/10 border-2 border-primary p-2 rounded text-sm text-center font-medium">
|
||||
Team Alpha
|
||||
</div>
|
||||
<div className="bg-muted p-2 rounded text-sm text-center">
|
||||
Team Delta
|
||||
</div>
|
||||
<div className="bg-muted p-2 rounded text-sm text-center">
|
||||
Team Epsilon
|
||||
</div>
|
||||
<div className="bg-muted p-2 rounded text-sm text-center">
|
||||
Team Zeta
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Semi Finals */}
|
||||
<div className="space-y-16 pt-12">
|
||||
<h4 className="text-sm font-medium text-center mb-4 -mt-12">Semi Finals</h4>
|
||||
<div className="bg-muted p-2 rounded text-sm text-center">
|
||||
TBD
|
||||
</div>
|
||||
<div className="bg-muted p-2 rounded text-sm text-center">
|
||||
TBD
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-medium text-center mb-4">Final</h4>
|
||||
<div className="bg-muted p-3 rounded text-center">
|
||||
<Trophy className="w-8 h-8 mx-auto mb-2 text-primary" />
|
||||
<div className="text-sm font-medium">Champion</div>
|
||||
<div className="text-xs text-muted-foreground">TBD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="teams" className="space-y-6 mt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">All Teams (16)</h3>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Team
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Seed</TableHead>
|
||||
<TableHead>Team Name</TableHead>
|
||||
<TableHead>Player 1</TableHead>
|
||||
<TableHead>Player 2</TableHead>
|
||||
<TableHead>Skill</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">1</TableCell>
|
||||
<TableCell className="font-medium">Team Alpha</TableCell>
|
||||
<TableCell>John Doe</TableCell>
|
||||
<TableCell>Mike Smith</TableCell>
|
||||
<TableCell>7.5</TableCell>
|
||||
<TableCell>
|
||||
<Badge className="bg-success text-success-foreground">Active</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm">Edit</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">2</TableCell>
|
||||
<TableCell className="font-medium">Team Beta</TableCell>
|
||||
<TableCell>Alice Johnson</TableCell>
|
||||
<TableCell>Kate Lee</TableCell>
|
||||
<TableCell>7.2</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">Eliminated</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm">Edit</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">3</TableCell>
|
||||
<TableCell className="font-medium">Team Delta</TableCell>
|
||||
<TableCell>Peter Brown</TableCell>
|
||||
<TableCell>Luis Garcia</TableCell>
|
||||
<TableCell>6.8</TableCell>
|
||||
<TableCell>
|
||||
<Badge className="bg-success text-success-foreground">Active</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm">Edit</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
import { Button } from '@/app/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Input } from '@/app/components/ui/input';
|
||||
import { Badge } from '@/app/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/app/components/ui/tabs';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/ui/select';
|
||||
import { Plus, Search, Filter, Trophy, Calendar, Users, MoreVertical, Play, CheckCircle2, Clock } from 'lucide-react';
|
||||
import { ImageWithFallback } from '@/app/components/figma/ImageWithFallback';
|
||||
|
||||
export default function TournamentListPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Tournaments</h1>
|
||||
<p className="text-muted-foreground mt-1">Manage all your padel tournaments</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Create Tournament
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex-1 min-w-[300px]">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search tournaments..."
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Select defaultValue="all">
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
<SelectItem value="draft">Draft</SelectItem>
|
||||
<SelectItem value="registration">Registration</SelectItem>
|
||||
<SelectItem value="in-progress">In Progress</SelectItem>
|
||||
<SelectItem value="completed">Completed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select defaultValue="all">
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Formats</SelectItem>
|
||||
<SelectItem value="round-robin">Round Robin</SelectItem>
|
||||
<SelectItem value="single-elim">Single Elimination</SelectItem>
|
||||
<SelectItem value="double-elim">Double Elimination</SelectItem>
|
||||
<SelectItem value="groups">Groups + Knockout</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
More Filters
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs defaultValue="active" className="w-full">
|
||||
<TabsList>
|
||||
<TabsTrigger value="active">Active (12)</TabsTrigger>
|
||||
<TabsTrigger value="upcoming">Upcoming (5)</TabsTrigger>
|
||||
<TabsTrigger value="completed">Completed (48)</TabsTrigger>
|
||||
<TabsTrigger value="draft">Drafts (3)</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="active" className="space-y-4 mt-6">
|
||||
{/* Tournament Cards Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Tournament Card 1 - In Progress */}
|
||||
<Card className="overflow-hidden group hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<div className="aspect-video relative bg-gradient-to-br from-primary/20 to-secondary/20 overflow-hidden">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1699117686612-ece525e4f91a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYWRlbCUyMHRlbm5pcyUyMGNvdXJ0fGVufDF8fHx8MTc2OTY0NDQyM3ww&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
alt="Tournament"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className="bg-primary text-primary-foreground gap-1">
|
||||
<Play className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg mb-1">Summer Championship 2026</CardTitle>
|
||||
<CardDescription>Started Jan 25, 2026</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Trophy className="w-4 h-4" />
|
||||
<span>Single Elimination</span>
|
||||
</div>
|
||||
<Badge variant="outline">Male</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">16</div>
|
||||
<div className="text-xs text-muted-foreground">Teams</div>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">12</div>
|
||||
<div className="text-xs text-muted-foreground">Matches</div>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">QF</div>
|
||||
<div className="text-xs text-muted-foreground">Round</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full" variant="secondary">
|
||||
Manage Tournament
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tournament Card 2 - In Progress */}
|
||||
<Card className="overflow-hidden group hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<div className="aspect-video relative bg-gradient-to-br from-blue-500/20 to-purple-500/20 overflow-hidden">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1642506538803-294fc3d9fc26?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYWRlbCUyMHBsYXllcnMlMjBhY3Rpb258ZW58MXx8fHwxNzY5NzE2NDQ5fDA&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
alt="Tournament"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className="bg-primary text-primary-foreground gap-1">
|
||||
<Play className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg mb-1">Weekend Mixed Doubles</CardTitle>
|
||||
<CardDescription>Started Jan 27, 2026</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Trophy className="w-4 h-4" />
|
||||
<span>Round Robin</span>
|
||||
</div>
|
||||
<Badge variant="outline">Mixed</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">12</div>
|
||||
<div className="text-xs text-muted-foreground">Teams</div>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">45</div>
|
||||
<div className="text-xs text-muted-foreground">Matches</div>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">R3</div>
|
||||
<div className="text-xs text-muted-foreground">Round</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full" variant="secondary">
|
||||
Manage Tournament
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tournament Card 3 - In Progress */}
|
||||
<Card className="overflow-hidden group hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<div className="aspect-video relative bg-gradient-to-br from-green-500/20 to-blue-500/20 overflow-hidden">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1764212694920-bee4f5b162ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBzcG9ydHMlMjBmYWNpbGl0eXxlbnwxfHx8fDE3Njk3MTY0NTB8MA&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
alt="Tournament"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className="bg-primary text-primary-foreground gap-1">
|
||||
<Play className="w-3 h-3" />
|
||||
In Progress
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg mb-1">Beginner's Cup</CardTitle>
|
||||
<CardDescription>Started Jan 28, 2026</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Trophy className="w-4 h-4" />
|
||||
<span>Groups + Knockout</span>
|
||||
</div>
|
||||
<Badge variant="outline">Male</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">20</div>
|
||||
<div className="text-xs text-muted-foreground">Teams</div>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">30</div>
|
||||
<div className="text-xs text-muted-foreground">Matches</div>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<div className="text-lg font-bold">GS</div>
|
||||
<div className="text-xs text-muted-foreground">Stage</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full" variant="secondary">
|
||||
Manage Tournament
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* List View Option */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>All Active Tournaments</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm">Grid View</Button>
|
||||
<Button variant="ghost" size="sm">List View</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="upcoming" className="space-y-4 mt-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-center text-muted-foreground">Upcoming tournaments view...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="completed" className="space-y-4 mt-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-center text-muted-foreground">Completed tournaments view...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="draft" className="space-y-4 mt-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-center text-muted-foreground">Draft tournaments view...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user