React Component Documentation

Analyze the application and generate documentation visualizing the component hierarchy, component relationships, and key component metadata. 

Application Context:
This is a Next.js 15 application using React 19 with tailwind CSS and shadcn components. The application structure follows an app router with server components architecture. Components are stored inside the ./app folder. React components have the .tsx filename extension.

Documentation Requirements:
1. General:
- Add the documentation as markdown files in the ./docs folder.
- Analyze in iterations folder by folder.
- You must read every react component within a folder to understand the component structure.
- Update the existing documentation in each iteration based on your analysis results. 
- Ignore files that are not react components.

2. Component Hierarchy Visualization
Create a mermaid flowchart diagram that shows:
- Parent-child relationships between components
- Logical grouping by feature using subgraphs
- Clear distinction between page components and UI components
- Use color coding in the mermaid diagram to distinguish:
  * Server vs Client components
  * Ensure high contrast in the color coding to ensure that the text is readable
- Include a legend explaining the visualization conventions