Battle Arena - Mobile Game UI

Project Description

Battle Arena is a visually appealing mobile-first home screen for a game interface. It allows users to navigate through different sections, including gameplay, leaderboards, rules, a marketplace, and a user profile. The project focuses on UI/UX design and provides a structured layout for an engaging user experience.

Features

1. Home Screen

• A welcoming sales banner promoting the game.
• A main menu with quick navigation to core sections.
• User profile details displayed in the top corner.

2. Play Options

• A Play button to start a new game (gameplay page left blank).
• Different game modes: Ranked, Unranked, Casual.

3. Leaderboard

• Displays player rankings and scores.

4. Rules Section

• Two sections for rules:
  • Interactive tutorial explaining gameplay mechanics and strategies.
  • Text-based explanation of game rules (using Lorem Ipsum placeholder text).

5. Marketplace

• Inspired by Immutable Marketplace.
• Allows users to browse and explore in-game items.

6. User Profile

• Displays user details:
  • Username, Rank, Level, Points, Gold/Cash.
  • Friends & Community options.

Tech Stack

• Next.js for frontend development.
• React Icons for UI elements.
• Tailwind CSS for styling.

Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-repo/battle-arena-ui.git
   cd battle-arena-ui
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open http://localhost:3000 in your browser.

Navigation

Contributing

Feel free to fork the repo and submit pull requests with improvements!

License

This project is licensed under the MIT License.