update
This commit is contained in:
@@ -0,0 +1,337 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
|
||||
import { Badge } from '@/app/components/ui/badge';
|
||||
import { CheckCircle2 } from 'lucide-react';
|
||||
|
||||
export default function DesignSummary() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div className="text-center space-y-4 py-8">
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 bg-primary rounded-2xl mb-4">
|
||||
<span className="text-4xl font-bold text-primary-foreground">T</span>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold">tourn.me Design System</h1>
|
||||
<p className="text-xl text-muted-foreground">
|
||||
Complete UI/UX Design Reference for Padel Tournament Management Platform
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>🎨 Design System Overview</CardTitle>
|
||||
<CardDescription>
|
||||
A comprehensive design system built with React, Tailwind CSS, and shadcn/ui
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Brand Identity</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
|
||||
<div className="w-12 h-12 bg-primary rounded"></div>
|
||||
<div>
|
||||
<div className="font-medium">Primary Color</div>
|
||||
<div className="text-sm text-muted-foreground">#F3B331</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
|
||||
<div className="w-12 h-12 bg-secondary rounded"></div>
|
||||
<div>
|
||||
<div className="font-medium">Secondary Color</div>
|
||||
<div className="text-sm text-muted-foreground">#111827</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Design Philosophy</h3>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<span>Modern, minimal aesthetic inspired by Airbnb and Playtomic</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<span>Sport-focused with emphasis on clarity and readability</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<span>Responsive layouts optimized for desktop, tablet, and TV displays</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<span>Dark mode support throughout the entire system</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>📦 Components Included</CardTitle>
|
||||
<CardDescription>All components with comprehensive examples</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-sm">Base Components</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Typography (H1-H4, Body, Small)</li>
|
||||
<li>• Buttons (Primary, Secondary, Outline, Ghost, Link)</li>
|
||||
<li>• Form Elements (Input, Select, Switch, Checkbox)</li>
|
||||
<li>• Badges & Status Indicators</li>
|
||||
<li>• Avatars & User Elements</li>
|
||||
<li>• Cards & Containers</li>
|
||||
<li>• Icons (Lucide React)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-sm">Advanced Components</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Tables (Players, Standings, Teams)</li>
|
||||
<li>• Tournament Brackets</li>
|
||||
<li>• Match Cards & Visualizations</li>
|
||||
<li>• Modals & Dialogs</li>
|
||||
<li>• Tooltips & Popovers</li>
|
||||
<li>• Alerts & Notifications</li>
|
||||
<li>• Navigation (Tabs, Sidebar, Header)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>📱 Page Mockups</CardTitle>
|
||||
<CardDescription>Complete page designs for all user flows</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<Badge variant="outline">Not Logged In</Badge>
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Landing Page</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hero section, features grid, how it works, stats, CTA, and footer
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Login Page</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Clean authentication form with password recovery link
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Registration Page</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Two-column layout with benefits and registration form
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<Badge className="bg-primary text-primary-foreground">Admin Area</Badge>
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Dashboard</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sidebar layout with stats cards, active tournaments, recent activity, and upcoming matches
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Tournament List</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Search, filters, tabs (Active/Upcoming/Completed/Draft), and card grid layout
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Tournament Detail</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Multi-tab interface with overview, match scheduling (drag & drop), bracket, and teams table
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<Badge className="bg-blue-500 text-white">Public Display</Badge>
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="font-medium mb-1">Public Tournament View (TV Display)</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Large format design with live matches, completed results, upcoming schedule, bracket preview, and QR code
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>🎯 Key Features</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-medium">Status-Driven Design</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Clear visual indicators for tournaments, matches, and teams (draft, in progress, completed, etc.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-medium">Tournament Brackets</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Visual bracket displays for single/double elimination formats
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-medium">Match Management</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Drag & drop scheduling with court assignments and score tracking
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-medium">Data Tables</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Comprehensive tables for players, teams, and standings with sorting
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-medium">Dark Mode</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Complete dark mode support with theme toggle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-medium">TV Display Optimized</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Large, readable public view perfect for center displays
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>🛠️ Technology Stack</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-sm">Frontend</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• React 18</li>
|
||||
<li>• Vite (build tool)</li>
|
||||
<li>• Tailwind CSS v4</li>
|
||||
<li>• shadcn/ui components</li>
|
||||
<li>• Lucide React (icons)</li>
|
||||
<li>• Radix UI primitives</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-sm">Design Tokens</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• CSS Custom Properties</li>
|
||||
<li>• Responsive spacing system</li>
|
||||
<li>• Typography scale</li>
|
||||
<li>• Color palette with semantic naming</li>
|
||||
<li>• Border radius tokens</li>
|
||||
<li>• Shadow utilities</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>📋 Usage Guide</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Exploring the Design System</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Use the tabs at the top of the page to navigate through different sections:
|
||||
</p>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• <strong>Design System:</strong> View all components, colors, typography, and UI elements</li>
|
||||
<li>• <strong>Landing:</strong> Public-facing marketing page</li>
|
||||
<li>• <strong>Login/Register:</strong> Authentication flows</li>
|
||||
<li>• <strong>Dashboard:</strong> Admin home with sidebar navigation</li>
|
||||
<li>• <strong>Tournaments:</strong> Tournament management list view</li>
|
||||
<li>• <strong>Tournament Detail:</strong> Full tournament management interface</li>
|
||||
<li>• <strong>Public View:</strong> TV display for centers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">For Figma Design</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This interactive prototype serves as a complete reference for your Figma designs.
|
||||
All components, spacing, colors, and layouts are production-ready and can be
|
||||
directly translated to Figma. Use the dark mode toggle to see both theme variants.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Component Reusability</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Every component is built to be reusable and follows consistent patterns.
|
||||
Status badges, cards, tables, and navigation elements maintain the same
|
||||
visual language throughout the application.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center space-y-3">
|
||||
<div className="text-2xl font-bold">✨ Ready to Build</div>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
This design system provides everything you need to create a cohesive,
|
||||
professional tournament management platform. All components are designed
|
||||
to work together seamlessly.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user