> ## Documentation Index
> Fetch the complete documentation index at: https://docs.larafast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Problem

> import Problem from @/Components/Problem.vue;

<Frame>
  <img src="https://mintcdn.com/larafast/p7p6xbnL6MINm0mR/images/components/problem.jpg?fit=max&auto=format&n=p7p6xbnL6MINm0mR&q=85&s=67aa066ddfc729008d609fdf95078b6b" width="1380" height="899" data-path="images/components/problem.jpg" />
</Frame>

The Problem component is designed to present a challenge or issue that your product or service aims to solve. It consists of a heading, descriptive text, and a series of steps or points, each represented by an emoji and accompanying text.

## Usage

To use the Problem component, import it in your Vue file and pass the necessary props:

```js theme={null}
import Problem from '@/Components/Problem.vue';

<Problem
    heading="Empower Your Workflow: Unleashing the Full Potential of SaaS Integrations"
    text="In today’s fast-paced digital landscape, integrating the right tools can make or break your productivity. With our cutting-edge SaaS platform, you’re not just adopting software—you’re transforming how your team collaborates, manages resources, and achieves success. Explore the possibilities and take your operations to the next level."
    :steps="[
        { emoji: '🤔', text: 'Connect Your Tools: Effortlessly integrate with key platforms to centralize your workflow.' },
        { emoji: '🚀', text: 'Automate Processes: Set up automated tasks that save time and reduce manual effort.' },
        { emoji: '🎉', text: 'Gain Insights: Leverage powerful analytics to make data-driven decisions.' },
]"/>
```

### Props

* `heading`: A string representing the main heading of the component.
* `text`: A string representing the descriptive text of the component.
* `steps`: An array of objects, each containing an emoji and a text string.