Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase an image of the Kaaba (الكعبة المشرفة) with the phrase "ماء زمزم" beneath it. The main purpose of the landing page is to provide a visually appealing and informative experience that highlights the significance of the Kaaba and the Zamzam water.

## CORE FEATURES
1. **Hero Section**: A captivating image of the Kaaba with a prominent title and the phrase "ماء زمزم" displayed underneath, creating a strong first impression.
2. **About Section**: A brief description of the Kaaba's significance and the importance of Zamzam water, enhancing visitor knowledge.
3. **Visual Gallery**: A minimalist gallery showcasing additional images related to the Kaaba and its cultural relevance.
4. **Call-To-Action (CTA)**: An inviting button that encourages visitors to learn more about the significance of Zamzam water, leading them to additional resources or information.
5. **Contact Information**: A simple contact form allowing visitors to reach out for inquiries or additional information.

## 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 structure includes a full-width hero section, followed by about and gallery sections, a CTA section, and a footer with contact information, all arranged vertically for easy scrolling.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Required Libraries**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Develop the following components:
   - HeroSection
   - AboutSection
   - GallerySection
   - CTASection
   - ContactSection
4. **Design Each Component**: Use Tailwind CSS utility classes to implement the minimalist design and ensure responsive behavior on different screen sizes.
5. **Integrate Google Fonts**: Include the Inter font in the project by adding a link in the index.html file.
6. **Deploy the Landing Page**: Choose a hosting solution (such as Vercel or Netlify) to deploy the landing page and make it accessible online.

## USER EXPERIENCE
Visitors will land on a visually striking page featuring the Kaaba, with the phrase "ماء زمزم" underneath. They can scroll through the sections to learn about the Kaaba's significance, view a gallery of related images, and engage with the CTA to explore further. The minimalist design ensures a smooth browsing experience, allowing users to focus on the content without distractions. The contact section offers an easy way for users to inquire for more information, enhancing engagement and interaction.

By following this prompt, you will create a fully functional minimalist landing page that aligns with the user's vision.