Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed for a credits seller for apps like TikTok. The primary purpose is to present various apps and allow users to calculate the credits they should receive based on their payment type. The site will be developed on Shopify and will remain in Arabic, showcasing a minimalist design for ease of use and clarity.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that highlights the main services offered, including a brief description and a prominent call-to-action (CTA).
2. **App Showcase**: A section displaying various apps available for credit purchase, including images, brief descriptions, and links for more information.
3. **Credit Calculation Tool**: An interactive feature allowing users to input their payment type and see the corresponding credits they would receive.
4. **Contact Information**: A simple contact form or section for users to reach out for inquiries or support.
5. **Language Support**: Ensure the entire site is in Arabic, maintaining readability and accessibility for the target audience.

## 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 should include a full-width hero section at the top, followed by a grid-based display of apps, each with a card layout, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Shopify**: Configure a new Shopify store and select a suitable theme that supports customization.
2. **Create Hero Section**: Design the hero section with a large heading, a brief description, and a CTA button styled with the primary color.
3. **Develop App Showcase**: Create a grid layout for the app showcase, ensuring each app has a card that includes an image, title, and description.
4. **Implement Credit Calculation Tool**: Add an interactive section where users can input payment types and get feedback on credits, using React state for input handling.
5. **Design Contact Section**: Include a simple contact form or provide email/contact information in the footer.
6. **Ensure Arabic Support**: Make sure all text is in Arabic and appropriately styled for readability.

## USER EXPERIENCE
Users will first see the hero section, which will draw them in with clear messaging and a CTA to explore apps. They can navigate to the app showcase to view available options. Each app card will provide enough information to entice users to learn more or calculate credits. The credit calculation tool will be intuitive, allowing users to quickly understand their credits based on the payment type. Finally, users can reach out via the contact section for any further inquiries, ensuring a seamless experience throughout the website.