Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will integrate a chat agent from Notebook LM into a minimalist landing page design. The primary purpose is to provide users with an interactive chat experience, enhancing customer engagement and support on the website.

## CORE FEATURES
1. **Chat Agent Integration**: A responsive chat window that allows users to interact with the Notebook LM chat agent for real-time assistance.
2. **User-Friendly Interface**: A clean and simple UI that invites user interaction without overwhelming them, featuring clear prompts and easy navigation.
3. **Contact Form**: A form for users to submit inquiries or feedback, ensuring that all communication can be captured and addressed.
4. **Frequently Asked Questions (FAQ)**: A section dedicated to common queries, which can help reduce the load on the chat agent and provide instant answers to users.
5. **Live Chat Analytics**: Basic analytics that track user interactions with the chat agent, providing insights into user behavior and engagement levels.

## 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 feature a header with the chat window, followed by sections for features, FAQs, and a contact form. Each section will have ample padding to maintain a spacious feel.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React Context API for managing chat state and user interactions.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React app with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout**: Design the main layout with a header for the chat window, and sections for features, FAQs, and contact.
3. **Integrate Chat Agent**: Embed the Notebook LM chat agent within the header component, ensuring responsiveness.
4. **Develop Features Section**: Create a simple grid layout to showcase core features of the chat agent.
5. **Create FAQ Section**: Implement collapsible FAQ items to provide users with answers to common questions.
6. **Build Contact Form**: Develop a contact form component that captures user inquiries and integrates with a backend service for processing.
7. **Style Components**: Ensure all components adhere to the design specifications, using the defined color palette, typography, and border radius.
8. **Test Responsiveness**: Conduct thorough testing on various devices to ensure a smooth user experience across all screen sizes.

## USER EXPERIENCE
Users will land on a clean and inviting page where they can immediately engage with the chat agent. The chat window will be prominently displayed, allowing users to start a conversation easily. As they scroll down, they will find clear sections explaining the features of the chat agent, along with an FAQ to provide quick answers. The contact form will be accessible and straightforward to use, ensuring users can reach out for additional support seamlessly. All interactions will be designed to be intuitive and user-friendly, enhancing overall engagement.