Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application for online banking named GUY MISHEAL THOMAS. It provides users with an interface to view their balance, recent transactions, and manage their banking activities in a clean and minimalist design.

## CORE FEATURES
1. **Account Overview**: Display the user's current balance of $850,000 prominently on the dashboard.
2. **Transaction History**: List all recent transactions, categorized into pending and cancelled statuses for easy tracking.
3. **Transaction Details**: Allow users to click on individual transactions to view more details about each transaction.
4. **Funds Transfer**: Enable users to initiate transfers to other accounts with a simple and secure interface.
5. **User Authentication**: Implement a secure login and registration system for users to access their accounts.
6. **Notifications**: Provide alerts for important activities such as large transactions, account updates, or system maintenance.

## 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 includes a header for navigation, a sidebar for quick access to features, and a main content area displaying account overview and transaction history.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's built-in context for state management.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and component usage.
3. **Create Components**:
   - Build the Header component for navigation.
   - Develop the Sidebar component for quick access to features.
   - Create the Dashboard component to display balance and transaction history.
4. **Implement Routing**: Use React Router for navigating between different features of the application.
5. **User Authentication**: Set up a basic authentication flow including login and registration forms.
6. **Fetch Data**: Integrate APIs or dummy data to fetch account balance and transaction history.
7. **Styling**: Apply Tailwind CSS classes to ensure the application adheres to the minimalist design specifications.
8. **Testing**: Conduct usability testing to ensure all features are functional and user-friendly.

## USER EXPERIENCE
Users will be greeted with a streamlined dashboard displaying their balance at the top. They can easily navigate through the sidebar to view their transaction history, initiate funds transfers, and manage their account. Each transaction will provide detailed information upon clicking, ensuring users have a clear understanding of their banking activities. The overall experience will be smooth, with attention to responsive design ensuring accessibility on various devices.