Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a comprehensive guide to the tool calls available for the Lovable agent. The main purpose is to provide users with an intuitive interface to explore and understand the various functionalities offered by the Lovable platform, facilitating a seamless experience for developers and users alike.

## CORE FEATURES
1. **Interactive Tool Call Explorer**: A dynamic interface that allows users to search and filter through available tool calls, providing descriptions and usage examples.
2. **Documentation Access**: Direct links to detailed documentation for each tool call, enabling users to dive deeper into specific functionalities.
3. **User Feedback Section**: A space for users to submit their questions or feedback regarding tool calls, fostering community engagement.
4. **Frequently Asked Questions (FAQ)**: A section addressing common queries about tool calls, improving user comprehension and reducing support requests.
5. **Responsive Design**: A mobile-friendly layout that ensures users can access information on any device, enhancing usability.

## 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 layout consists of a hero section at the top, followed by a features overview, an interactive tool call explorer, user feedback, and a FAQ section, all structured in a single-column format to maintain focus and simplicity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand (or similar lightweight state management library)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App or Vite, and install Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Develop the main layout structure using a single-column design to ensure a minimalist aesthetic.
3. **Implement the Hero Section**: Design a welcoming hero section with a concise tagline and a call-to-action button.
4. **Build the Tool Call Explorer**: Create an interactive component that fetches and displays tool calls dynamically, allowing users to filter and search.
5. **Design the Documentation Access**: Link each tool call in the explorer to its respective documentation page for easy navigation.
6. **Add User Feedback and FAQ Sections**: Include components for users to submit feedback and view answers to frequently asked questions.
7. **Ensure Responsiveness**: Test the application on various devices to ensure it is fully responsive and user-friendly.
8. **Deploy the Application**: Use a platform like Vercel or Netlify for deployment, making the application accessible to users.

## USER EXPERIENCE
Users will start at the hero section, where they are introduced to the tool call functionality. They can then interact with the tool call explorer to find specific tool calls, read documentation, and submit feedback. The FAQ section will assist users in quickly resolving common issues or questions, enhancing overall user satisfaction and engagement. The minimalist design will guide their journey seamlessly, ensuring a clear focus on the content.