คุณช่วยสรุป prompt design ของ project นี้ให้ผมได้ไหมครับ
This prompt design demonstrates a user-centered, iterative approach to building a comprehensive competition management platform with both public and administrative interfaces, emphasizing real-time functionality and professional presentation.
อยากได้แค่การ design ui เพราะผมจะนำไปประยุกต์ใช้กับอย่างอื่น
Primary: Amber/Orange Gradient (from-amber-600 to-orange-600)
Secondary: Gray scale (50, 100, 200, 600, 900)
Status Colors:
- Registration: Blue (from-blue-600 to-indigo-600)
- Live/Active: Red/Orange (from-red-600 to-orange-600)
- Voting: Purple (from-purple-600 to-pink-600)
- Results: Yellow/Gold (from-yellow-600 to-orange-600)
- Success: Green (green-500, green-100)
- Warning: Yellow (yellow-500, yellow-100)
- Error: Red (red-500, red-100)Hero Titles: text-5xl font-bold (48px)
Section Headers: text-3xl font-bold (30px)
Card Titles: text-xl font-bold (20px)
Body Text: text-base (16px)
Small Text: text-sm (14px)
Micro Text: text-xs (12px)Header (Sticky)
├── Logo/Brand + Navigation
├── Status Indicators
└── Action Buttons
Hero Section
├── Large Title with Gradient Text
├── Descriptive Subtitle
├── Status Cards (3-4 columns)
└── Primary CTA Buttons
Content Sections
├── Card-based Layout
├── Grid Systems (2-3 columns)
└── Progressive Information Disclosure
Footer
├── Brand Information
└── Copyright/LinksPrimary: Gradient background, white text, large padding
Secondary: Outline style, colored border, transparent background
Ghost: No background, subtle hover effects
Icon Buttons: Square/circular, icon-only, minimal paddingMobile: < 768px (1 column layouts)
Tablet: 768px - 1024px (2 column layouts)
Desktop: > 1024px (3-4 column layouts)Hero Stats: grid-cols-1 md:grid-cols-3
Content Cards: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
Admin Dashboard: grid-cols-1 lg:grid-cols-2
Form Layouts: Single column with grouped sectionsCards: hover:shadow-xl + hover:scale-105
Buttons: Gradient shifts, shadow increases
Links: Color transitions, underline animationsHomepage: Amber/Orange (warm, welcoming)
Registration: Orange/Red (action-oriented)
Live Dashboard: Red/Orange (urgent, active)
Voting: Purple/Pink (decision-making)
Results: Yellow/Gold (celebration)
Admin: Gray/Dark (professional, serious)Micro: 4px (space-1)
Small: 8px (space-2)
Medium: 16px (space-4)
Large: 24px (space-6)
XLarge: 32px (space-8)
Section: 48px (space-12)
Hero: 64px (space-16)Default Transition: transition-all duration-300
Hover Transforms: transform hover:scale-105
Loading Animations: animate-pulse, animate-spin
Entrance Animations: fade-in, slide-up effectsSmall: w-4 h-4 (16px) - inline with text
Medium: w-6 h-6 (24px) - buttons, cards
Large: w-8 h-8 (32px) - headers, features
XLarge: w-12 h-12 (48px) - hero sectionsThis UI design system emphasizes clarity, professionalism, and contextual communication through color and typography, making it adaptable for various competition or event management applications.
ผมอยากได้พร้อม ที่ใช้กับ previous winners ที่หน้าต่างแสดงผลรูปภาพ ชื่อ รายละเอียด logo เหรียญ และมัน floatด้วย