Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for "EL YOUSR CABINET MEDICAL," designed to serve as an introductory page within a medical clinic management software. The purpose of this page is to provide essential information about the clinic in a clean, modern, and visually appealing format, ensuring a user-friendly experience.

## CORE FEATURES
1. **Header Section**: 
   - Includes the clinic's logo and name in both Arabic and English, along with a tagline emphasizing the importance of health care.

2. **About Us Section**: 
   - A brief introduction welcoming users to the clinic, highlighting the expertise of the medical team and the commitment to patient comfort.

3. **Our Services Section**: 
   - A list of key services offered by the clinic, accompanied by relevant medical icons to visually represent each service.

4. **Contact Us Section**: 
   - Displays the clinic's address and phone number for easy access to contact information.

5. **Footer Section**: 
   - Contains copyright information and a symbolic button linking to the control panel.

## 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 includes a top header with the logo, followed by sections for About Us, Our Services, Contact Us, and a footer. Each section should be clearly defined with adequate spacing and a consistent style.

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

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Components**:
   - Header component for the clinic’s logo and name.
   - About Us component for the introduction paragraph.
   - Our Services component with a list styled with icons.
   - Contact Us component for address and phone number.
   - Footer component for copyright and navigation links.
4. **Apply Styling**: Use Tailwind CSS classes to implement the minimalist design specifications, including the primary color, typography, and border radius.
5. **Implement Effects**: Add simple animations (e.g., Fade In and Slide) for section transitions.
6. **Test Responsiveness**: Ensure the layout is responsive across various devices by utilizing Tailwind's responsive utilities.

## USER EXPERIENCE
Users will be greeted with a clear header showcasing the clinic's branding. As they scroll down, they will find concise information about the clinic, the services offered, and how to contact the clinic. The design will prioritize readability and ease of navigation, with smooth transitions between sections to enhance engagement and retain user interest.