Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a comprehensive comparison platform for AI tools tailored specifically for IT offices. Users can easily explore, compare, and select the most suitable AI tools categorized based on various IT functions, ensuring optimal performance at minimal costs. The application promotes efficiency and informed decision-making by presenting data in a clear and concise manner.

## CORE FEATURES
1. **AI Tool Directory**: A searchable and filterable database of AI tools categorized by function (e.g., project management, development, customer support).
2. **Comparison Tool**: An interactive feature allowing users to select multiple tools and compare their features, pricing, and user ratings side-by-side.
3. **User Reviews and Ratings**: A section for users to leave feedback and ratings on tools, providing community insights to aid in decision-making.
4. **Personalized Recommendations**: An AI-driven feature that suggests tools based on user preferences and previous selections.
5. **Resource Hub**: A collection of articles, tutorials, and guides on how to effectively utilize AI tools in IT environments.
6. **Responsive Design**: Ensures seamless user experience across various devices, from desktops to tablets and mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, focusing on a clean and simple design that emphasizes usability and clarity. The use of plenty of white space enhances readability and reduces visual clutter.
- **Color Mode**: Light theme featuring dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A grid-based layout for the tool directory, featuring cards for each AI tool that includes an image, title, brief description, and rating. A sidebar for filters and categories enhances navigation.
- **Typography**: Use a modern sans-serif font like Inter or Roboto for body text, with larger, bold headings to establish a clear hierarchy. Ensure sufficient spacing between lines and sections for optimal readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling and rapid design implementation.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components that align with the minimalist aesthetic.
- **State Management**: Use React Context API or Zustand for managing global state across the application as needed.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Develop the main components for the AI tool directory, comparison tool, and user reviews sections.
3. **Implement Routing**: Use React Router to manage navigation between the homepage, comparison tool, and resource hub.
4. **Design the Layout**: Create a grid layout for displaying AI tools using Tailwind CSS, ensuring responsive adjustments for different screen sizes.
5. **Integrate User Reviews**: Set up a simple backend or utilize a service to store user reviews and ratings, connecting this to the front end.
6. **Build Recommendation Engine**: Develop an algorithm that analyzes user behavior to suggest relevant tools based on preferences.
7. **Testing and Optimization**: Conduct thorough testing across different devices and browsers to ensure consistent performance and user experience.

## USER EXPERIENCE
The application provides an intuitive user journey where users can easily navigate through the AI tool directory, utilize the comparison tool to make informed choices, and read community reviews for additional insights. The minimalist design ensures that users can focus on content without distractions, while responsive adjustments guarantee usability across devices. Users can effortlessly switch between browsing tools and accessing resources, enhancing their overall experience and engagement with the platform.