Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Sawa is a youth AI-volunteer matching web application designed to connect young individuals with vetted volunteering opportunities. The platform features dedicated portals for students, NGOs, schools, and admin, facilitating a seamless interaction between volunteers and organizations while promoting community involvement and personal growth.

## CORE FEATURES
1. **Student Portal**: A gamified onboarding process that gathers information about students' interests and goals, leading to a personalized volunteer path with recommendations.
2. **Volunteer Hub**: Access to pathways, events, badges, certificates, and hours tracking to motivate and engage students in their volunteer journey.
3. **NGO Portal**: Allows partner organizations to create profiles, add programming details, and customize curriculums to attract suitable volunteers.
4. **School Portal**: For partnered schools to manage enrolled students, track volunteer hours, and issue certificates.
5. **Admin Portal**: Enables Sawa employees to manage all aspects of the application, including students, NGOs, and schools.
6. **Landing Page**: A marketing page that clearly describes Sawa’s mission and functionality, including an authentication option for easy sign-up via Google.

## 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 application will feature a structured layout with a top navigation bar, sidebars for portals, and a main content area that adapts based on the selected portal (Student, NGO, School, Admin).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API or Redux (if needed for complex state management)

## IMPLEMENTATION STEPS
1. **Set up the development environment**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the main structure**: Develop the layout with a responsive navigation bar and sidebars for each portal.
3. **Build the Student Portal**: Implement the gamified onboarding process and the Volunteer Hub with personalized recommendations.
4. **Develop the NGO Portal**: Create functionalities for NGOs to sign up and manage their profiles and curriculums.
5. **Set up the School Portal**: Allow schools to track their students and manage certificates.
6. **Implement Admin Portal**: Build admin functionalities to manage users and NGOs.
7. **Design the Landing Page**: Create a visually appealing landing page that showcases Sawa’s mission and invites users to sign up.
8. **Test the application**: Ensure all features work seamlessly and are responsive across devices.
9. **Deploy the application**: Use a platform like Vercel or Netlify for hosting.

## USER EXPERIENCE
Users will experience a seamless interaction with the application through an intuitive interface. Students will enjoy a gamified onboarding process that personalizes their volunteer journey. NGOs will find it easy to create profiles and manage their opportunities, while schools can efficiently track and support their students' volunteer efforts. The admin portal will provide comprehensive management tools to ensure smooth operations of the platform. The application will be mobile-friendly, ensuring accessibility for all users.

This fully functional minimalist light application will align with Sawa's vision of connecting youth with meaningful volunteer opportunities effectively and engagingly.