Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Klan.ai is a web application designed to serve as an advanced AI chatbot, leveraging modern AI technologies to provide users with comprehensive knowledge and information similar to today's leading assistants like ChatGPT and Gemini. The platform will feature a clean, minimalist interface that prioritizes user experience, allowing visitors to interact with the chatbot seamlessly.

## CORE FEATURES
1. **Advanced AI Chatbot**: Klan.ai will utilize cutting-edge AI technology to provide accurate and extensive responses to user queries, drawing from a wide knowledge base.
2. **Web Search Integration**: Users can perform web searches directly through the chatbot, allowing for real-time information retrieval and ensuring up-to-date responses.
3. **Source Display**: Every answer generated by the chatbot will include visible sources to enhance credibility and transparency.
4. **Interactive Homepage**: The homepage will feature a rotating logo above the Klan.ai name, creating an engaging visual experience for users.
5. **User-Friendly Interface**: The chatbot will be designed for ease of use, ensuring that users can easily navigate and interact without confusion.

## 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 hero section displaying the rotating logo and Klan.ai title, followed by a chat interface, features section, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use Context API or Zustand for efficient state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop the main layout components, including the Header, Hero, Chat Interface, Features Section, and Footer.
3. **Implement Chatbot Functionality**: Integrate the AI chatbot capabilities using a suitable AI API, ensuring it can handle queries and return responses with sources.
4. **Design the Homepage**: Style the homepage using Tailwind CSS, applying the specified design specifications and ensuring responsiveness.
5. **Add Web Search Feature**: Implement functionality that allows users to perform web searches and display the results within the chat interface.
6. **Test User Interactions**: Conduct thorough testing of user flows to ensure a smooth experience, fixing any bugs or issues that may arise.

## USER EXPERIENCE
The user experience will focus on intuitive interactions, with the chatbot prominently positioned for easy access. Users will be welcomed by a visually appealing homepage that features the rotating logo and the Klan.ai title. Upon entering a query, users will receive prompt responses from the chatbot, complete with sourced information, enhancing the reliability of the answers. The clean design will promote ease of navigation and engagement, making it simple for users to explore features and utilize the chatbot effectively.