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: 
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.