Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application aims to recreate the existing website of Mirema School, featuring a multi-page layout that incorporates the school's logo and brand colors. The application will provide users with essential information about the school, including admissions, programs, and student life, presented in a clean and visually appealing manner.

## CORE FEATURES
1. **Home Page**: A welcoming introduction to the school, featuring high-quality AI-generated images of students in uniform, a brief overview of the school's mission, and a prominent call-to-action (CTA) for inquiries.
2. **About Us**: A dedicated page detailing the school's history, values, and educational approach, with engaging visuals and testimonials from students and parents.
3. **Programs Offered**: An informative section outlining the various academic programs available, including curriculum details and faculty information, enhanced with images of students in class settings.
4. **Admissions**: A page that guides prospective students and parents through the admission process, including important dates, application forms, and contact information.
5. **Contact Us**: A user-friendly contact form allowing visitors to reach out with inquiries, complemented by a map showing the school’s location.
6. **Gallery**: A visually rich gallery showcasing school events, activities, and student achievements, using realistic AI-generated images for a cohesive aesthetic.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will be clean and simple, emphasizing white space and a minimal color palette, ensuring focus on typography and content.
- **Color Mode**: Light theme with dark text on light backgrounds, providing a bright and inviting user experience.
- **Layout**: A structured multi-page layout with a consistent header and footer across all pages. Each page will feature sections that guide the user through the content seamlessly.
- **Typography**: Use modern sans-serif fonts such as 'Montserrat' for headings and 'Roboto' for body text, establishing a clear hierarchy with appropriate sizing and spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust, type-safe application.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid development and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-designed UI components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management or consider Context API for managing global state if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui through npm.
3. **Create Page Structure**: Set up the folder structure for pages (`Home`, `About`, `Programs`, `Admissions`, `Contact`, `Gallery`) and create corresponding components.
4. **Implement Routing**: Use React Router to handle navigation between pages.
5. **Design Layout**: Develop a responsive header and footer component that will be reused across all pages.
6. **Add Content**: Populate each page with relevant text and high-quality AI-generated images of students in uniform.
7. **Style Components**: Apply Tailwind CSS classes to achieve the desired minimalist aesthetic.
8. **Test Responsiveness**: Ensure that the application is fully responsive on various devices.
9. **Deploy Application**: Choose a hosting platform (e.g., Vercel, Netlify) to deploy the application.

## USER EXPERIENCE
Key user interactions will include easy navigation through the multi-page layout, smooth transitions between pages, and a straightforward contact form submission process. Users will be able to easily find information about the school, view visually appealing content, and engage with the school's community through the gallery and contact page. The minimalist design will ensure that the content is accessible and the user experience is intuitive.