Create a fully functional React application called "HireComps" using Tailwind CSS, Lucide React icons, and React Router.

App Overview

HireComps is a skills-based hiring platform where developers compete in technical challenges (created by companies) to win job offers and prizes. The app features a dark-themed, premium UI with glassmorphism effects.

Design System

• Theme: Dark mode only. Backgrounds should use Zinc-900 (#09090b) and Zinc-800 (#18181b).
• Primary Color: Emerald Green (#22c55e). Use this for buttons, accents, and progress bars.
• Typography: Use 'Space Grotesk' for headings/display text and 'Inter' for body text.
• Styling: Extensive use of gradients, subtle borders (zinc-700), and backdrop blur.

Pages & Routing

1. Navbar (Global)
   • Sticky top with glass effect.
   • Logo: A trophy icon inside a rounded-xl container with a green gradient background, followed by text "HireComps" where "Comps" has a gradient text effect.
   • Links: Explore Contests, Create Contest (CTA button style).
   • Mobile responsive menu.
2. Home Page (/)
   • Hero Section: Large centered text "Prove Your Skills. Get Hired." with a background image overlay. Two buttons: "Start Competing" and "Post a Challenge".
   • Stats Banner: A strip showing stats like "$250k+ Prize Pool", "45 Active Challenges", etc.
   • Contest Grid: Display a grid of cards. Each card represents a contest.
     • Card details: Company logo, Role title, Difficulty badge (Junior/Mid/Senior/Expert), Tech stack tags, Prize pool, and Deadline.
     • Hover effects: Subtle glow or border highlight.
3. Create Contest Page (/create)
   • A multi-step wizard to generate a hiring challenge using AI.
   • Step 1: Form inputs for Company Name, Hiring Role, Difficulty (buttons), and specific Topic.
   • Action: A "Generate with AI" button. This should use a Large Language Model API (such as OpenAI or similar) to generate a JSON object containing a catchy title, description, deliverables, tech stack, and evaluation criteria based on the user's input.
   • Step 2: Display the generated content in a preview card. Allow the user to "Publish Challenge", which adds it to the global state and redirects home.
4. Contest Detail Page (/contest/:id)
   • Header: Large banner with company logo, contest title, countdown, and a big "Submit Solution" button.
   • Tabs: Toggle between "Challenge Details" and "Leaderboard".
   • Details Tab: Show the full description, list of deliverables, tech stack tags, and resources.
   • Leaderboard Tab: A table showing Rank, Candidate Name/Avatar, Score (progress bar), and Status (Hired, In Review, Submitted). Mock this data.
   • Submit Modal: A popup form to enter GitHub URL and notes.

Data

• Pre-populate the app with realistic mock data for major tech companies (e.g., Netflix, Spotify, Stripe, etc.).
• Use distinct logos and realistic technical descriptions for each.

Technical Requirements

• Use react-router-dom for navigation.
• Ensure the app is fully responsive.
• The AI generation feature should be implemented with a generic service layer that can be easily swapped or configured with an API key.