Lovable Prompt Creator - AI Prompt Generator

```markdown
## PROJECT DEFINITION
Build a minimalist landing page titled "сайн байна уу" (which translates to "Hello" in Mongolian) that serves as an introduction to a brand or service. The page should effectively communicate the brand message, showcase key features or offerings, and include a call-to-action (CTA) section for user engagement. The focus will be on a clean design that emphasizes typography and user experience.

## DESIGN REQUIREMENTS
- 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

## TECH STACK & CONSTRAINTS
- Language: HTML, CSS, JavaScript
- Framework: Use a lightweight framework like Bootstrap for responsive design
- Constraints: Ensure the page is fully responsive and works well on mobile devices. Optimize for speed and accessibility.

## BREAKDOWN INTO TASKS
1. **Setup Project**: Create a new Replit project with the necessary files (HTML, CSS, JS).
2. **Create HTML Structure**: 
   - Implement the basic structure of the landing page including the header, main content area, and footer.
   - Add sections for hero content, features, testimonials, and CTA.
3. **Style the Page**: 
   - Apply CSS for layout, typography, and color scheme based on design requirements.
   - Ensure buttons and interactive elements use the specified border radius.
4. **Add Interactivity**: 
   - Use JavaScript to enhance user engagement, such as smooth scrolling for the CTA button.
5. **Optimize for Mobile**: 
   - Ensure the layout is responsive and adjusts well to different screen sizes.

## IMPLEMENTATION GUIDANCE
1. **HTML Structure**: Start with a simple HTML template, using `<header>`, `<main>`, and `<footer>` tags to organize content.
   - Example:
     ```html
     <header>
       <h1>сайн байна уу</h1>
       <p>Welcome to our minimalist landing page!</p>
     </header>
     <main>
       <section id="features">...</section>
       <section id="testimonials">...</section>
       <section id="cta"><button>Get Started</button></section>
     </main>
     <footer>...</footer>
     ```
2. **CSS Styling**: In your CSS file, define styles for the overall layout, typography, and button styles.
   - Example:
     ```css
     body {
       font-family: 'Inter', sans-serif;
       background-color: #ffffff;
       color: #333333;
     }
     .btn {
       background-color: #1978E5;
       border-radius: 8px;
       padding: 10px 20px;
       color: white;
     }
     ```
3. **JavaScript Interactivity**: Write a simple script to handle button clicks or smooth scrolling.
   - Example:
     ```javascript
     document.querySelector('.btn').addEventListener('click', function() {
       window.scrollTo({ top: document.getElementById('cta').offsetTop, behavior: 'smooth' });
     });
     ```

## ITERATION STRATEGY
After implementing the initial version, gather feedback on design and functionality. Consider:
- A/B testing different CTA phrases or button designs.
- Adjusting typography based on user readability feedback.
- Iteratively refining the layout based on user interactions.

## TESTING & VALIDATION
1. **Cross-Browser Testing**: Ensure the landing page works on all major browsers (Chrome, Firefox, Safari).
2. **Mobile Testing**: Test responsiveness on various devices and screen sizes.
3. **Accessibility Checks**: Validate accessibility using tools like Lighthouse to ensure compliance with web standards.
4. **User Testing**: Gather feedback from users on the clarity and engagement level of the landing page.

By following this structured approach, you can create an effective and visually appealing landing page that meets the specified design and functionality requirements.
```