Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The AFYA Medical Centre landing page is a minimalist website designed to showcase the healthcare services offered by the center. Its primary purpose is to provide information, facilitate contact, and encourage potential patients to book appointments through an intuitive and visually appealing interface.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction featuring a background image and a compelling call-to-action for users to call or book appointments.
2. **About Section**: Information about the AFYA Medical Centre, including its mission and values, presented with engaging visuals.
3. **Services Offered**: A grid display of various medical services available, each with a brief description to inform patients.
4. **Gallery**: A showcase of the medical environment and facilities, enhancing trust and visual appeal.
5. **Contact Information**: Easy access to contact details including phone and email, with a CTA to book appointments directly.
6. **Responsive Design**: Optimized for all devices, ensuring users have a seamless experience whether on mobile or desktop.

## 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 features a structured grid for the services and a flexible hero section, with distinct sections for about, services, gallery, and contact information, all easily navigable via a top navigation menu.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this static landing page

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop reusable components for the header, hero section, about section, services, gallery, contact form, and footer.
3. **Design Layout**: Structure the main layout using Tailwind CSS classes, ensuring responsiveness and accessibility.
4. **Add Content**: Populate each section with relevant text and images as described in the core features.
5. **Implement Navigation**: Create a smooth scrolling navigation experience linking to each section of the page.
6. **Testing**: Conduct testing across different devices and browsers to ensure functionality and responsiveness.
7. **Deployment**: Deploy the website on a suitable hosting platform (e.g., Vercel, Netlify) for public access.

## USER EXPERIENCE
Users will begin their journey on the hero section, where they are greeted with a welcoming image and call-to-action buttons. As they scroll down, they will find engaging content in the about section that outlines the mission and values of AFYA Medical Centre. The services section will provide a clear overview of available medical services, enhancing understanding and encouraging users to reach out. The gallery will instill confidence in the medical environment, while the contact section will offer multiple ways to get in touch, ensuring a straightforward appointment booking process. This landing page is crafted to create an inviting online presence for AFYA Medical Centre, focusing on clarity, user engagement, and accessibility.