Criar um dashboard moderno e com layout premium para uma intranet da Agência Pan.
Generated Prompt
## APPLICATION OVERVIEW The "Pan Hub" is a modern web application designed for the internal use of Agência Pan, serving as an intranet dashboard for employee engagement and communication. It provides a centralized platform for showcasing employees, managing client accounts, sharing news and events, and facilitating social interactions among staff members.ddsd ## CORE FEATURES 1. **Employee Directory**: A categorized listing of employees, including their photos, names, positions, phone numbers, and links to their social media profiles. Employees can add multiple social media links and upload their photos. 2. **Client Management**: A section displaying clients alongside their respective account managers. Each client will have a link to their Google Drive folder for easy access to relevant documents. 3. **News and Events**: A dedicated area on the homepage for news and announcements, featuring a prominent image and a carousel of related photos. Each post will include a date, title, description with rich text formatting, and an optional link for events. 4. **Birthday Notifications**: A monthly display of employee birthdays, with the option to view all birthdays throughout the year. Colleagues can react with animated "congratulations" messages. 5. **Leave Tracker**: A compact section showing employees currently on vacation or leave, managed by an admin. 6. **Chat Feature**: A simple messaging interface where employees can share important messages, displayed in a chat-like format with sender's name, photo, and timestamp. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean and simple design with ample white space, focusing on easy navigation and readability. - **Color Mode**: Light theme with dark text on light backgrounds. - **Layout**: A single-page layout with clearly defined sections for each core feature. The homepage will prominently display the news/events section, followed by employee listings, client details, and social interactions. - **Typography**: Use modern sans-serif fonts for headers and body text, ensuring a consistent hierarchy with clear distinctions between titles, subtitles, and body text. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust type-checking and enhanced development efficiency. - **Styling**: Tailwind CSS for responsive design and rapid styling. - **UI Components**: Utilize shadcn/ui library for consistent and reusable components. - **State Management**: Implement state management using React Context or Redux as needed. ## IMPLEMENTATION STEPS 1. **Set up the React project** with TypeScript and Tailwind CSS. 2. **Create the main layout** for the dashboard, including headers and navigation. 3. **Develop the Employee Directory** component, allowing for photo uploads and social media link management. 4. **Build the Client Management** section, integrating Google Drive links and displaying account managers. 5. **Implement the News and Events** feature with rich text formatting and image carousels. 6. **Design the Birthday Notifications** section with interactive reactions. 7. **Create the Leave Tracker** for admin management of employee vacations. 8. **Develop the Chat Feature** for real-time messaging among employees. ## USER EXPERIENCE Users will interact with a sleek interface where they can easily navigate through employee directories, client management, and news updates. The birthday notification system will encourage social interaction, while the chat feature will promote communication. The design will ensure that all sections are accessible and responsive, providing a seamless user experience across devices.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
