From 1862a475bd252669ff778649f370489c60fc4a39 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Tue, 14 Sep 2021 01:22:39 +0200
Subject: [PATCH] Move waves to error page
---
components/home/HomeSearch.vue | 61 +-------------------------
layouts/error.vue | 78 ++++++++++++++++++++++++++++------
pages/index.vue | 4 +-
3 files changed, 69 insertions(+), 74 deletions(-)
diff --git a/components/home/HomeSearch.vue b/components/home/HomeSearch.vue
index 13cec9f1..dd2412db 100644
--- a/components/home/HomeSearch.vue
+++ b/components/home/HomeSearch.vue
@@ -1,63 +1,6 @@
<template>
- <section class="overflow-hidden relative z-10">
- <div
- class="absolute inset-0 mt-10 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="absolute inset-0 -top-28"
- >
- <g transform="translate(1500,350) scale(1,1) translate(-1500,-350)">
- <linearGradient id="lg-0.351604754756625" x1="0" x2="1" y1="0" y2="0">
- <stop stop-color="#5b21b6" offset="0"></stop>
- <stop stop-color="#2563eb" offset="1"></stop>
- </linearGradient>
- <path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
- <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(#lg-0.351604754756625)" opacity="0.1">
- <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(#lg-0.351604754756625)" opacity="0.1">
- <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 class="container pt-20 pb-12 relative">
+ <section class="bg-blue-100">
+ <div class="container py-12 relative">
<h1
class="font-bold mb-8 text-3xl text-center text-gray-700 dark:text-white dark:text-opacity-50"
>
diff --git a/layouts/error.vue b/layouts/error.vue
index 7ca1d2b5..e51cebce 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,6 +1,9 @@
<template>
- <div class="h-screen -mb-44 flex bg-gradient-to-b from-blue-100 to-blue-50">
- <div class="container text404">
+ <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"
@@ -14,16 +17,16 @@
<span class="text-9xl">4</span>
</div>
- <div class="v-full flex">
+ <div class="flex">
<t-button
variant="custom"
- class="m-auto mt-20 bg-gray-500 hover:bg-gray-600 shadow-xl"
+ 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="m-auto mt-20 shadow-xl" @click="$router.push('/')">
+ <t-button class="mt-20 shadow-xl text-2xl" @click="$router.push('/')">
<fa icon="home" class="mr-3" />{{ $t('home.title') }}
</t-button>
</div>
@@ -33,6 +36,64 @@
<HomeHeroSky class="fill-current text-white absolute" />
<LazyHomeHeroParticles 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: -26%"
+ >
+ <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>
@@ -48,10 +109,3 @@ export default {
},
}
</script>
-
-<style lang="postcss" scoped>
-.text404 {
- margin-top: calc(min(2vh, 10rem) + 10rem);
- padding-left: calc(min(2vw, 10rem) + 10rem);
-}
-</style>
diff --git a/pages/index.vue b/pages/index.vue
index f5e3bdb0..1b10a607 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,6 @@
<template>
<div>
- <div
- class="h-screen -mt-16 flex flex-col justify-between bg-blue-50 shadow-lg"
- >
+ <div class="h-screen -mt-16 flex flex-col justify-between shadow-lg">
<HomeHero :hero="hero" />
<HomeSearch />
</div>
--
GitLab