error.vue

<template>
  <div
    class="bg-gradient-to-b flex from-blue-100 relative to-blue-50 overflow-hidden"
    style="height: 80vh"
  >
    <div class="container flex items-center justify-center">
      <div class="absolute z-10">
        <div
          class="flex items-center text-red-400 dark:text-red-600 scale-150 transform"
        >
          <span class="text-9xl">4</span>
          <fa
            :icon="['fab', 'creative-commons-nc-eu']"
            class="mx-4"
            style="font-size: 6.5rem"
          />
          <span class="text-9xl">4</span>
        </div>

        <div class="flex">
          <t-button
            variant="custom"
            class="mr-8 mt-20 bg-gray-500 hover:bg-gray-600 shadow-xl text-2xl"
            icon="chevron-left"
            @click="$router.go(-1)"
          >
            <fa icon="chevron-left" class="mr-3" />{{ $t('goBack') }}
          </t-button>
          <t-button class="mt-20 shadow-xl text-2xl" @click="$router.push('/')">
            <fa icon="home" class="mr-3" />{{ $t('home.title') }}
          </t-button>
        </div>
      </div>
    </div>

    <LazySky class="fill-current text-white absolute" />

    <LazyParticlesML v-if="isDesktop" />

    <div
      class="absolute bottom-0 h-16 w-full z-0"
      style="backdrop-filter: blur(2px)"
    />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="100%"
      height="700"
      preserveAspectRatio="none"
      viewBox="0 0 3000 700"
      class="bottom-0 absolute"
      style="margin-bottom: -24%"
    >
      <g transform="translate(1500,350) scale(1,1) translate(-1500,-350)">
        <linearGradient id="wave-color" x1="0" x2="1" y1="0" y2="0">
          <stop stop-color="#7c3aed" offset="0"></stop>
          <stop stop-color="#a78bfa" offset="1"></stop>
        </linearGradient>
        <path d="" fill="url(#wave-color)" opacity="0.3">
          <animate
            attributeName="d"
            dur="10s"
            repeatCount="indefinite"
            keyTimes="0;0.333;0.667;1"
            calcmod="spline"
            keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
            begin="0s"
            values="M0 0M 0 538.6197230687883Q 500 574.6819201141337 1000 574.575666670496T 2000 528.2190300776177T 3000 527.9222284268443L 3000 115.4395609622847Q 2500 122.11205254010194 2000 112.64297809895902T 1000 141.3855421925954T 0 166.56344278918195Z;M0 0M 0 588.7850739966284Q 500 593.4766386389036 1000 589.7625799078935T 2000 551.7945119708431T 3000 578.5077673498635L 3000 169.7675721459745Q 2500 125.67810753789244 2000 116.51196847367086T 1000 126.5496708214944T 0 168.4786767549831Z;M0 0M 0 531.1090348755101Q 500 557.1270943668658 1000 554.5419554069241T 2000 545.9865154592908T 3000 569.5619790716728L 3000 126.52765717058406Q 2500 154.4510819017288 2000 145.51367313923492T 1000 173.5431781037003T 0 152.16935842768572Z;M0 0M 0 538.6197230687883Q 500 574.6819201141337 1000 574.575666670496T 2000 528.2190300776177T 3000 527.9222284268443L 3000 115.4395609622847Q 2500 122.11205254010194 2000 112.64297809895902T 1000 141.3855421925954T 0 166.56344278918195Z"
          ></animate>
        </path>
        <path d="" fill="url(#wave-color)" opacity="0.3">
          <animate
            attributeName="d"
            dur="10s"
            repeatCount="indefinite"
            keyTimes="0;0.333;0.667;1"
            calcmod="spline"
            keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
            begin="-3.3333333333333335s"
            values="M0 0M 0 590.6448658165359Q 500 559.7529084945777 1000 557.6861681027829T 2000 561.5267270090096T 3000 593.9178925323536L 3000 114.18322607589454Q 2500 166.66199791810573 2000 162.8315286347745T 1000 160.3215475477619T 0 107.78843290213965Z;M0 0M 0 585.7333909305496Q 500 544.8442474547807 1000 537.1154758997013T 2000 552.1278283483364T 3000 540.760640040708L 3000 146.52147135465333Q 2500 113.81907823669863 2000 111.7307131744789T 1000 115.35203072555836T 0 110.67481984112672Z;M0 0M 0 543.131818899705Q 500 589.9945665811799 1000 586.6098547370501T 2000 584.5365631772061T 3000 581.8427322344887L 3000 145.84962300077729Q 2500 154.00891194415192 2000 149.856911020101T 1000 115.72184159380231T 0 138.76577509540138Z;M0 0M 0 590.6448658165359Q 500 559.7529084945777 1000 557.6861681027829T 2000 561.5267270090096T 3000 593.9178925323536L 3000 114.18322607589454Q 2500 166.66199791810573 2000 162.8315286347745T 1000 160.3215475477619T 0 107.78843290213965Z"
          ></animate>
        </path>
        <path d="" fill="url(#wave-color)" opacity="0.3">
          <animate
            attributeName="d"
            dur="10s"
            repeatCount="indefinite"
            keyTimes="0;0.333;0.667;1"
            calcmod="spline"
            keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
            begin="-6.666666666666667s"
            values="M0 0M 0 577.3279699785157Q 500 596.5194960333786 1000 591.0515207168066T 2000 580.7438383793185T 3000 559.5043698739771L 3000 106.40480611640268Q 2500 158.55578293506778 2000 155.42053618954887T 1000 125.62767807693737T 0 122.13819191110474Z;M0 0M 0 549.1585595469946Q 500 576.0564903157024 1000 572.0145684353647T 2000 536.8811706818898T 3000 539.2410439119517L 3000 150.739380000344Q 2500 122.68200223973729 2000 117.80547834149974T 1000 130.7528253401447T 0 114.62861752105474Z;M0 0M 0 544.9971494193371Q 500 591.2702407207314 1000 586.3395289570205T 2000 535.4362929322266T 3000 559.0140529154019L 3000 137.58917569157174Q 2500 135.2633200441013 2000 129.28903611617616T 1000 160.0439061679986T 0 161.57296247749883Z;M0 0M 0 577.3279699785157Q 500 596.5194960333786 1000 591.0515207168066T 2000 580.7438383793185T 3000 559.5043698739771L 3000 106.40480611640268Q 2500 158.55578293506778 2000 155.42053618954887T 1000 125.62767807693737T 0 122.13819191110474Z"
          ></animate>
        </path>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDesktop: false,
    }
  },
  mounted() {
    if (window.innerWidth > 640) this.isDesktop = true
  },
}
</script>