Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project is a web application for a Madrasah / Islamic school, designed to serve as a comprehensive platform for students, parents, and staff. The application will facilitate features such as student registration, news updates, academic calendars, and a student portal for grades and attendance. The primary goal is to create an intuitive, user-friendly interface that promotes engagement and accessibility for all users.

# CORE FEATURES
1. **Homepage**: A welcoming landing page showcasing the school’s profile, mission, and latest news updates.
2. **News & Announcements**: A section for posting updates, articles, and important announcements related to school activities.
3. **Academic Calendar**: A dynamic calendar displaying important dates, events, and deadlines relevant to students and parents.
4. **Student Registration Portal**: An online form for new students to register, including document uploads and real-time status tracking.
5. **Student Portal**: A secure area for students and parents to view grades, attendance records, and personal notifications.
6. **Content Management System (CMS)**: An admin interface for staff to manage news posts, calendar events, and other content easily.

# 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 layout will consist of a top navigation bar, a hero section, and a grid-based structure for features and content, ensuring responsiveness and easy navigation across devices.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand for UI state management, React Query for server state.

# IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Create a new React application using Create React App with TypeScript.
   - Install necessary packages: Tailwind CSS, Zustand, React Query, and shadcn/ui.
   - Set up Tailwind CSS by creating a configuration file and including styles in the application.

2. **Create the Folder Structure**:
   - Organize components, pages, and assets into distinct folders for better maintainability.

3. **Implement the Navigation Bar**:
   - Create a responsive navigation bar with links to the homepage, news, calendar, registration, and login.

4. **Develop the Homepage**:
   - Design the hero section with a welcome message and a call-to-action button leading to the registration portal.
   - Add sections for latest news updates and featured announcements using a grid layout.

5. **Set Up the News Section**:
   - Create a component to fetch and display news articles using React Query and integrate it into the homepage.

6. **Implement the Academic Calendar**:
   - Use a calendar library to display academic events and deadlines. Allow users to filter events by category.

7. **Build the Student Registration Portal**:
   - Develop a form for student registration that includes input fields for personal information, document uploads, and a submit button.

8. **Create the Student Portal**:
   - Develop a secure login system and create a dashboard for students to view grades and attendance. Ensure that proper authentication is implemented.

9. **Develop the CMS for Admin**:
   - Build an admin interface allowing staff to create, edit, and delete news posts and manage calendar events.

10. **Testing**:
    - Conduct thorough testing for responsiveness and usability on different device sizes.
    - Implement unit tests and integration tests as necessary.

# USER EXPERIENCE
Key user interactions will include a smooth navigation experience through the top navigation bar, an engaging homepage with quick access to important updates, and a straightforward registration process for students. The student portal will allow easy access to grades and attendance, while the CMS will enable staff to efficiently manage content. Overall, the application will prioritize intuitive design and responsive interactions to enhance user engagement and satisfaction.