Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a modern, minimalist web app designed to provide users with tools and account management features. The site will feature a dark modern aesthetic with neon violet accents, ensuring a visually engaging user experience while maintaining a clean and airy layout.

## CORE FEATURES
1. **Home Page**: A welcoming landing page that introduces users to the application, featuring an engaging layout and key highlights of the platform.
2. **Tools Dropdown**: A dropdown menu under "Tools" that directs users to two dedicated pages: "Cloud" for cloud-related services and "Project" for project management tools.
3. **Account Management**: A dropdown menu under "Account" allowing users to access "Settings" for application preferences and "Profile" for personal information management.
4. **Responsive Design**: A fully responsive layout that adapts seamlessly to various screen sizes, with a mobile-friendly menu that transitions from left to right.
5. **Customizable Typography**: Users can easily change font styles for text elements, ensuring a personalized touch while maintaining legibility.
6. **Background Styling**: The home page will feature a "Dark Veil" background from React Bits, contributing to the modern dark aesthetic.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean and simple appearance, characterized by ample white space and a focus on typography.
- **Color Mode**: The primary color scheme will feature a soft neon violet accent against a dark background, creating a modern yet approachable vibe.
- **Layout**: The layout will consist of a top navigation bar with the menu options evenly spaced. The content areas will be organized to allow for easy navigation without overwhelming the user.
- **Typography**: Utilize a pixel font for headings and a clean sans-serif font for body text. Maintain a clear hierarchy with larger font sizes for headings and smaller sizes for subtext to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component management and type safety.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid design adjustments.
- **UI Components**: Incorporate shadcn/ui for consistent and modern UI elements.
- **State Management**: Use React Context or Zustand for state management if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Basic Structure**: Develop the main layout with a top navigation bar that includes the Home, Tools (with dropdown), and Account (with dropdown) options.
3. **Implement Home Page**: Design the home page using the "Dark Veil" background and ensure it aligns with the minimalist aesthetic.
4. **Develop Tools and Account Pages**: Create the Cloud and Project pages under Tools, and Settings and Profile pages under Account.
5. **Responsive Design**: Ensure the navigation menu adjusts to mobile views, transitioning to a left-to-right layout for better usability.
6. **Typography Customization**: Implement font customization features, allowing users to change text styles easily.
7. **Testing and Optimization**: Conduct usability testing across various devices and browsers, optimizing performance and ensuring a smooth user experience.

## USER EXPERIENCE
Users will begin their journey on the home page, drawn in by the minimalist design and vibrant colors. The top navigation bar will provide easy access to all features, with dropdowns for tools and account options enhancing navigation efficiency. Users will enjoy a seamless experience as they explore cloud services, manage projects, and personalize their profiles, all while benefiting from a responsive design that caters to their device of choice.