Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a professional internal IT project communication portal designed for a corporate IT department. Its primary purpose is to centralize information, streamline communication, enhance onboarding processes, and improve project visibility, thereby reducing reliance on disparate tools like email, Excel, and SharePoint.

## CORE FEATURES
1. **Hero Section**: A welcoming introduction with a headline, tagline, and clear CTAs, encouraging users to explore projects and methodologies.
2. **Dashboard Overview**: A comprehensive dashboard displaying active projects, recent updates, and quick links, providing users with a high-level view of their involvement and project statuses.
3. **Projects Repository**: A detailed section for managing all IT initiatives, featuring project cards that display key information and dynamic pages for in-depth project tracking and documentation.
4. **Processes & Methodology**: A resource for standard operating procedures and methodologies, including templates and visual aids to guide users through project lifecycles.
5. **Resources & Onboarding**: A knowledge base for new and existing team members, offering onboarding guides, SOPs, FAQs, and training materials.
6. **Authentication & User Management**: Secure user access with role-based authentication to ensure appropriate access levels to project information.

## 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 consists of a sidebar navigation for core sections, a top hero area, followed by clearly defined sections for dashboards, projects, methodologies, resources, and team information, utilizing card layouts and a responsive grid system.

## TECHNICAL REQUIREMENTS
- **Framework**: React with Next.js and TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-built components.
- **State Management**: Supabase for backend services (authentication, real-time database, file storage).

## IMPLEMENTATION STEPS
1. **Set up the Next.js project** with TypeScript and Tailwind CSS configurations.
2. **Design the sidebar navigation** to include links to Projects, Processes, Resources, and About Us sections.
3. **Create the Hero Section** with a headline, tagline, and CTAs using utility classes for styling.
4. **Develop the Dashboard Overview** to aggregate project statuses and updates, utilizing Supabase for real-time data fetching.
5. **Implement the Projects Section**, including dynamic project cards and detailed project pages with all required information.
6. **Document the Processes & Methodology**, creating templates and guides using intuitive layouts.
7. **Build the Resources & Onboarding section**, populating it with onboarding guides, SOPs, and FAQs.
8. **Integrate Authentication** using Supabase, ensuring role-based access control for users.
9. **Add Search Functionality** for easy access to projects and documents.
10. **Conduct thorough testing** for responsiveness, accessibility (WCAG 2.1 AA compliance), and performance optimization (lazy loading, semantic HTML).

## USER EXPERIENCE
The user experience will emphasize intuitive navigation through a sidebar menu, allowing quick access to different sections. The dashboard will provide instant insights into project statuses, while the hero section will engage users with clear messaging and actionable CTAs. Users will experience smooth transitions, hover effects, and loading animations, all contributing to a polished and professional interaction. The layout will be mobile-first, ensuring usability across all devices.