components/error/layout.vue

<template>
  <div
    class="typography gl-flex gl-h-screen gl-max-h-screen gl-flex-col gl-items-center gl-gap-4 gl-p-7"
  >
    <slot name="illustration">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="288"
        height="164"
        fill="none"
        aria-hidden="true"
      >
        <path fill="#E7E4F2" d="M262 0H65a40 40 0 0 0-40 40v124h197a40 40 0 0 0 40-40V0Z" />
        <path
          fill="#fff"
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M175 87h-63l-7.7 51.92a2 2 0 0 0 1.8 2.28l27 2.62a2 2 0 0 0 2.17-1.71L138 123h11l2.73 19.1a2 2 0 0 0 2.17 1.72l27-2.62a2 2 0 0 0 1.8-2.28L175 87Zm-85 0H27l-7.7 51.92a2 2 0 0 0 1.8 2.28l27 2.62a2 2 0 0 0 2.17-1.71L53 123h11l2.73 19.1a2 2 0 0 0 2.17 1.72l27-2.62a2 2 0 0 0 1.8-2.28L90 87Z"
        />
        <path
          fill="#6FDAC9"
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M260 87h-63l-7.7 51.92a2 2 0 0 0 1.8 2.28l27 2.62a2 2 0 0 0 2.17-1.71L223 123h11l2.73 19.1a2 2 0 0 0 2.17 1.72l27-2.62a2 2 0 0 0 1.8-2.28L260 87Z"
        />
        <path fill="#FCA326" d="M112 87h63l1 8h-65l1-8Zm-7 48 31 3-1.5 5.5-30-3 .5-5.5Z" />
        <path fill="#fff" d="m190 135 31 3-1.5 5.5-30-3 .5-5.5Z" />
        <path fill="#FCA326" d="m182 135-31 3 1.5 5.5 30-3-.5-5.5Z" />
        <path fill="#fff" d="m267 135-31 3 1.5 5.5 30-3-.5-5.5Z" />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M260 87h-63l-7.7 51.92a2 2 0 0 0 1.8 2.28l27 2.62a2 2 0 0 0 2.17-1.71L223 123h11l2.73 19.1a2 2 0 0 0 2.17 1.72l27-2.62a2 2 0 0 0 1.8-2.28L260 87Zm-155 48 24.5 2.37M190 135l24.5 2.37M182 135l-30.5 2.95M267 135l-30.5 2.95M144 123h9m-41-28h63M59 123h9m161 0h9m-63-36h-63l-7.7 51.92a2 2 0 0 0 1.8 2.28l27 2.62a2 2 0 0 0 2.17-1.71L138 123h11l2.73 19.1a2 2 0 0 0 2.17 1.72l27-2.62a2 2 0 0 0 1.8-2.28L175 87Z"
        />
        <path
          fill="#fff"
          d="M194 93.5h70V51l6.09 6.09a2 2 0 0 0 2.82 0L285.6 44.4a2 2 0 0 0 0-2.82l-12.22-12.22A32 32 0 0 0 250.74 20h-8.24s-4.5 4-13.5 4-13.5-4-13.5-4h-8.24a32 32 0 0 0-22.63 9.37L172.4 41.6a2 2 0 0 0 0 2.82l12.7 12.68a2 2 0 0 0 2.82 0L194 51v42.5Z"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M211 20h-3.75a32 32 0 0 0-22.62 9.37L172.4 41.6a2 2 0 0 0 0 2.82l12.7 12.68a2 2 0 0 0 2.82 0L194 51v42.5h70V51l6.09 6.09a2 2 0 0 0 2.82 0L285.6 44.4a2 2 0 0 0 0-2.82l-12.22-12.22A32 32 0 0 0 250.74 20h-8.24s-4.5 4-13.5 4-13.5-4-13.5-4H211Zm0 0c0 5.67 5.2 15.5 18 15.5"
        />
        <path
          fill="#6FDAC9"
          d="m186.88 58.44 3.28-3.28-15.57-15.57-3.28 3.29 15.56 15.56Zm84.4 0L268 55.16l15.56-15.57 3.28 3.28-15.56 15.57Z"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M215.5 20h-8.24a32 32 0 0 0-22.63 9.37L172.4 41.6a2 2 0 0 0 0 2.82l12.7 12.68a2 2 0 0 0 2.82 0L194 51v42.5h70V51l6.09 6.09a2 2 0 0 0 2.82 0L285.6 44.4a2 2 0 0 0 0-2.82l-12.22-12.22A32 32 0 0 0 250.74 20h-8.24m-27 0s4.5 4 13.5 4 13.5-4 13.5-4m-27 0c.83 4.67 4.7 11 13.5 11s12.67-6.33 13.5-11"
        />
        <path
          fill="#fff"
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M24 93.5h70V51l6.09 6.09a2 2 0 0 0 2.82 0L115.6 44.4a2 2 0 0 0 0-2.82l-12.22-12.22A32 32 0 0 0 80.74 20H37.27a32 32 0 0 0-22.63 9.37L2.4 41.6a2 2 0 0 0 0 2.82L15.1 57.1a2 2 0 0 0 2.82 0L24 51v42.5Z"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M59 93.5V76m0 27.5V94m0-26V34m170.36 59.52s-2.67 4.9-4.66 6.05c-1.98 1.14-4.24.95-5.05-.44-.8-1.4.16-3.45 2.15-4.6 1.98-1.15 7.56-1.01 7.56-1.01Z"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M228.64 93.52s2.67 4.9 4.66 6.05c1.98 1.14 4.24.95 5.05-.44.8-1.4-.16-3.45-2.15-4.6-1.98-1.15-7.56-1.01-7.56-1.01Z"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M225.5 108c.17-4.83 1.5-14.5 5.5-14.5"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M232.5 108c-.17-4.83-1.5-14.5-5.5-14.5"
        />
        <path
          stroke="#10B1B1"
          stroke-linecap="square"
          stroke-linejoin="round"
          stroke-width="2"
          d="m229.05 58.11 3.61-3.61a11.09 11.09 0 0 1 7.96-3.37 11.17 11.17 0 0 1 0 22.35 11.07 11.07 0 0 1-7.74-3.15l-11.66-11.78a5.33 5.33 0 0 0-3.83-1.62 5.38 5.38 0 0 0 0 10.76 5.34 5.34 0 0 0 3.66-1.46l1.74-1.75"
        />
        <path
          stroke="#10B1B1"
          stroke-linecap="square"
          stroke-linejoin="round"
          stroke-width="2"
          d="m235.87 59.49.9-.93a5.34 5.34 0 0 1 3.85-1.63 5.38 5.38 0 0 1 0 10.76 5.34 5.34 0 0 1-3.7-1.48l-11.58-11.7a11.09 11.09 0 0 0-7.96-3.37 11.17 11.17 0 0 0 0 22.35 11.1 11.1 0 0 0 7.77-3.18l3.73-3.73"
        />
        <path
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="m175 40 12.1 12.1M6.15 38 21 52.84M111.84 38 97 52.84M283.1 40 271 52.1M24 111c4.47-1.78 13-8.06 13-17m56 17c-4.47-1.78-13-8.06-13-17"
        />
        <path
          fill="#E7E4F2"
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="m39.78 13 19.09 19.1-2.83 2.82a7 7 0 0 1-9.9 0L32 20.78 39.78 13Z"
        />
        <path stroke="#171321" stroke-linecap="square" stroke-width="2" d="M40.8 12.58h36.3" />
        <path
          fill="#E7E4F2"
          stroke="#171321"
          stroke-linecap="square"
          stroke-width="2"
          d="M78.1 13 59 32.1l2.83 2.82a7 7 0 0 0 9.9 0l14.14-14.14L78.09 13ZM67.74 45.06h18.12V57.2a6 6 0 0 1-6 6H67.74V45.06Z"
        />
      </svg>
    </slot>
    <h1 class="gl-text-size-h1">
      <slot name="title"></slot>
    </h1>
    <slot name="text"></slot>
    <pre
      v-if="$scopedSlots.details"
      class="gl-max-w-1/2 gl-grow gl-overflow-scroll gl-text-left gl-text-sm gl-text-gray-500"
    ><slot name="details"></slot></pre>
  </div>
</template>