Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for RBX PLUS Web Application

## APPLICATION OVERVIEW
RBX PLUS is a fully functional web application inspired by Roblox, designed to simulate the experience of managing Robux and premium memberships. The application will provide users with a seamless interface to explore Robux packages, premium membership tiers, and manage their demo balances, all while maintaining a user-friendly and engaging experience.

## CORE FEATURES
- **Home Page**: A Roblox-inspired homepage featuring navigation, highlighted rewards, and membership offers to engage users immediately.
- **Robux Packages**: Display various Robux packages through purchase-style cards that allow users to explore and simulate transactions.
- **Premium Membership**: Showcase different membership tiers, including benefits and monthly demo rewards, to entice users to engage with premium features.
- **User Dashboard**: A personalized area where users can view their demo Robux balance, transaction history, and any rewards earned through daily logins.
- **Interactive Elements**: Functional navigation, buttons, and menus that enhance user interaction and engagement.
- **Responsive Design**: Ensure the application is fully responsive, providing an optimized experience on both desktop and mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will consist of a top navigation bar, a hero section on the home page, followed by feature cards for Robux and Premium sections, and a user dashboard with clean spacing and a structured grid.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for streamlined components.
- **State Management**: Use React's built-in state management for handling demo balances and transaction histories.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Pages**: Develop the main pages: Home, Robux, Premium, and Dashboard.
3. **Build Components**: Create reusable components for navigation, cards, buttons, and user profile sections.
4. **Implement Routing**: Use React Router to enable navigation between different pages.
5. **State Management**: Implement local storage functionality to save and manage demo balances and rewards.
6. **Design Layout**: Style each component according to the minimalist design specifications using Tailwind CSS.
7. **Test Responsiveness**: Ensure all components are responsive and function correctly on both desktop and mobile views.
8. **Final Touches**: Add animated loading screens and ensure all buttons and links are functional without broken links.

## USER EXPERIENCE
Users will begin their journey on the Home page, where they will be greeted with engaging visuals and easy navigation. They can explore Robux packages and premium membership options, and upon selecting a package or membership, they will be taken to the respective page to view details. The dashboard will provide a summary of their demo balances and transaction history, enhancing user engagement through daily login rewards and interactive features, all while clearly labeling the experience as an unofficial simulator.