Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist web application that focuses on providing a clean and simple user interface for displaying content in Arabic. The main purpose is to ensure that all Arabic text is rendered in the IBM Plex Sans Arabic font, while any text styled in white is displayed in a warm ivory color (#F4EFE6). The application will emphasize typography and user-friendly design to enhance readability and engagement.

## CORE FEATURES
1. **Dynamic Font Rendering**: Automatically change all Arabic text to IBM Plex Sans Arabic for a consistent typographic experience.
2. **Color Customization**: Apply the warm ivory color (#F4EFE6) to all text that is styled in white, ensuring accessibility and aesthetic alignment.
3. **Responsive Design**: The application will be fully responsive, adapting seamlessly to different screen sizes and devices.
4. **User-Friendly Navigation**: Simple and intuitive navigation to improve the user journey throughout the application.
5. **Content Management**: A straightforward interface that allows users to manage and update the content being displayed in the application easily.
6. **Accessibility Features**: Implement accessibility standards to ensure usability for all users, including those with visual impairments.

## 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 main layout will consist of a header, a main content area with sections for features and contact information, and a footer. Each section will be clearly delineated with ample white space to maintain a clean look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's built-in state management (or context API if needed).

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Configure Tailwind CSS**: Set up Tailwind CSS for styling, ensuring that the theme aligns with the specified design specifications.
3. **Create Global Styles**: Implement global styles that include the font family for Inter and set the primary color to #1978E5.
4. **Implement Dynamic Font Handling**: Develop a utility function to detect Arabic text and apply the IBM Plex Sans Arabic font accordingly.
5. **Style Text Elements**: Create components for text that conditionally apply the warm ivory color (#F4EFE6) to any text elements styled in white.
6. **Build Layout Components**: Construct the header, main content area, and footer, ensuring proper spacing and alignment per the minimalist design approach.
7. **Test Responsiveness**: Utilize Tailwind CSS to ensure that the application is responsive across devices and screen sizes.
8. **Accessibility Testing**: Conduct tests to ensure all features are accessible and usable for individuals with disabilities.

## USER EXPERIENCE
Users will interact with a straightforward interface that emphasizes readability and ease of navigation. Upon entering the application, users will see clearly defined sections with Arabic text rendered in the specified font, enhancing their overall experience. The warm ivory color will provide a soft contrast for any white text, making it easier to read. The responsive design will ensure a smooth experience across all devices, while intuitive navigation will guide users through the content seamlessly.