Redesign CruxHub: UI/UX & Tech Implementation
Budget: ₹1,500 – ₹12,500 INR
CruxHub - Design & Design Tech Overview
Design Technology Stack
Styling: Tailwind CSS 3.4.17, PostCSS, CSS Variables
Animation: Framer Motion, Motion v12, Tailwind Animate
Components: Radix UI, shadcn/ui, Class Variance Authority
Theming: next-themes, HSL color system.
Website Pages
Homepage (/) - Landing page with hero section, features, and platform stats
Scripts Marketplace (/scripts) - Browse and filter all available FiveM scripts
Script Detail (/script/[id]) - Individual script page with details, reviews, and purchase
Submit Script (/scripts/submit) - Multi-step form to submit new scripts for approval
Category Page (/category/[slug]) - Filtered scripts by category (economy, vehicles, jobs, housing, medical, police, utilities, core)
Marketplace (/marketplace) - Alternative marketplace view
Giveaways (/giveaways) - Browse active giveaways and enter to win prizes
Giveaway Detail (/giveaway/[id]) - Individual giveaway page with entry requirements and prizes
Create Giveaway (/giveaways/create) - Create and manage new giveaways
User Profile (/profile) - Dashboard to manage scripts, giveaways, ads, and entries
Admin Panel (/admin) - Admin dashboard for managing users, scripts, giveaways, and ads
Advertise (/advertise) - Advertising and promotion information page
Design Deliverables Needed
Design system documentation (Figma/Sketch)
Visual assets (logo, icons, illustrations)
High-fidelity mockups for key pages
Style guide (animation timing, interaction patterns, accessibility)
Current Design: Dark theme, smooth animations, glassmorphism, strong orange/yellow brand identity
Improvement Areas: Logo design, illustrations, empty states, mobile UX enhancements
Design Technology Stack
Styling: Tailwind CSS 3.4.17, PostCSS, CSS Variables
Animation: Framer Motion, Motion v12, Tailwind Animate
Components: Radix UI, shadcn/ui, Class Variance Authority
Theming: next-themes, HSL color system.
Website Pages
Homepage (/) - Landing page with hero section, features, and platform stats
Scripts Marketplace (/scripts) - Browse and filter all available FiveM scripts
Script Detail (/script/[id]) - Individual script page with details, reviews, and purchase
Submit Script (/scripts/submit) - Multi-step form to submit new scripts for approval
Category Page (/category/[slug]) - Filtered scripts by category (economy, vehicles, jobs, housing, medical, police, utilities, core)
Marketplace (/marketplace) - Alternative marketplace view
Giveaways (/giveaways) - Browse active giveaways and enter to win prizes
Giveaway Detail (/giveaway/[id]) - Individual giveaway page with entry requirements and prizes
Create Giveaway (/giveaways/create) - Create and manage new giveaways
User Profile (/profile) - Dashboard to manage scripts, giveaways, ads, and entries
Admin Panel (/admin) - Admin dashboard for managing users, scripts, giveaways, and ads
Advertise (/advertise) - Advertising and promotion information page
Design Deliverables Needed
Design system documentation (Figma/Sketch)
Visual assets (logo, icons, illustrations)
High-fidelity mockups for key pages
Style guide (animation timing, interaction patterns, accessibility)
Current Design: Dark theme, smooth animations, glassmorphism, strong orange/yellow brand identity
Improvement Areas: Logo design, illustrations, empty states, mobile UX enhancements