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

# Visual and learning-experience-centered design interface

export const VideoCard = ({videoSrc, title}) => {
  return <div style={{
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    margin: '2rem 0'
  }}>
      <style>{`
        .video-card {
          width: 100%;
          max-width: 84%;
          border-radius: 12px;
          overflow: hidden;
          border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .video-card-header {
          padding: 10px 16px;
          margin: 0;
          text-align: center;
        }

        .video-card-title {
          margin: 0;
          font-size: 13px;
          font-weight: 400;
          color: inherit;
          font-family: inherit;
        }

        .video-card video {
          width: 100%;
          display: block;
          margin: 0;
          aspect-ratio: 16 / 9;
          object-fit: cover;
        }

        /* Modo Oscuro */
        .dark .video-card {
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: #000000;
        }

        .dark .video-card-title {
          color: inherit;
        }
      `}</style>

      <div className="video-card">
        <div className="video-card-video-wrapper">
          <video src={videoSrc} autoPlay loop muted playsInline />
        </div>
        
        {title && <div className="video-card-header">
            <h3 className="video-card-title">{title}</h3>
          </div>}
      </div>
    </div>;
};

On the Missions platform there are **different roles** (sometimes the same user can assume several): **designer, mentor and evaluator, learner and administrator**. In educational contexts, the teacher plays the roles of designer (creating missions) and mentor (accompanying and evaluating the student).

The Missions design interface is focused on facilitating the **creation of *seamless* experiences, focused on learner *engagement* and support and directly connected to learning objectives**.

To achieve this, the platform makes it easy for **the designer to follow a journey in which they flexibly use the different functions of the platform and can reuse and recombine resources** (such as profile designs, functions, missions or itineraries) previously developed by themselves or by other people in their organization.

<img className="block dark:hidden mx-auto" src="https://mintcdn.com/eutika/_YbXLtJfkFDk1wlx/images/light/20-proceso-de-creacion-de-una-mision-claro-en.png?fit=max&auto=format&n=_YbXLtJfkFDk1wlx&q=85&s=1b0265370efcccbe0d7a68e5efe984ba" alt="Designer's journey" title={true} width="2280" height="1166" data-path="images/light/20-proceso-de-creacion-de-una-mision-claro-en.png" />

<img className="hidden dark:block mx-auto" src="https://mintcdn.com/eutika/jc9EgrggxQjf_cyE/images/dark/20-proceso-de-creacion-de-una-mision-oscuro-en.png?fit=max&auto=format&n=jc9EgrggxQjf_cyE&q=85&s=9c62f47ea1cf7398a96b14aee86eca79" alt="Designer's journey" title={true} width="2280" height="1166" data-path="images/dark/20-proceso-de-creacion-de-una-mision-oscuro-en.png" />

The interface **is inspired by and offers an experience similar to the Miro and Notion platforms**. In this sense, **designing becomes a visual and interactive process** where, for example, a mission is composed of graphic icons that represent the different stages of the experience (start, end, action stage, branching...).

<VideoCard videoSrc="/videos/canvas-mision.mp4" title="Stage editing canvas" />

Similarly, contextual menus **allow you to create and edit content that combines text, images and other resources in a flexible way**.