Merge pull request 'feat(ui): add creating cube animation' (#4399) from ui/creating-animation into main
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4399
This commit is contained in:
brianmcgee
663
pkgs/clan-app/ui/src/routes/Onboarding/Creating.css
Normal file
663
pkgs/clan-app/ui/src/routes/Onboarding/Creating.css
Normal file
@@ -0,0 +1,663 @@
|
||||
div.creating {
|
||||
@apply flex flex-col items-center justify-center;
|
||||
|
||||
div.scene {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
perspective: 1000px;
|
||||
/*background: red;*/
|
||||
|
||||
& > .frame {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 65px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
/*background: green;*/
|
||||
|
||||
/*transform: rotate3d(-2, -2, 1, 45deg);*/
|
||||
transform: rotate3d(-1.5, -2, 0.5, 45deg);
|
||||
transform-style: preserve-3d;
|
||||
|
||||
& > .cube {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
.cube-face {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.56) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
border: 1px #10191a solid;
|
||||
|
||||
opacity: 1;
|
||||
|
||||
&.front {
|
||||
transform: rotateY(0deg) translateZ(50px);
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: rotateY(90deg) translateZ(50px);
|
||||
}
|
||||
|
||||
&.back {
|
||||
transform: rotateY(180deg) translateZ(50px);
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: rotateY(-90deg) translateZ(50px);
|
||||
}
|
||||
|
||||
&.top {
|
||||
transform: rotateX(90deg) translateZ(50px);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
transform: rotateX(-90deg) translateZ(50px);
|
||||
}
|
||||
}
|
||||
|
||||
&.state-1 {
|
||||
animation: anim-cube-1-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-1-1 {
|
||||
transform: translateZ(-120px);
|
||||
animation: anim-cube-1-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-2 {
|
||||
left: 120px;
|
||||
animation: anim-cube-2-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-2-2 {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
animation: anim-cube-2-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-3 {
|
||||
top: 120px;
|
||||
animation: anim-cube-3-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-3-3 {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
animation: anim-cube-3-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-4 {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
animation: anim-cube-4-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
|
||||
&.state-4-4 {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
animation: anim-cube-4-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)
|
||||
infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-1-1 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
left: 0px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
2.083% {
|
||||
left: -40px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
16.666% {
|
||||
left: -40px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
left: 0;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
33.332% {
|
||||
left: 0;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
left: 0;
|
||||
transform: translateZ(40px);
|
||||
}
|
||||
|
||||
49.998% {
|
||||
left: 0;
|
||||
transform: translateZ(40px);
|
||||
}
|
||||
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
left: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
66.664% {
|
||||
left: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
left: -60px;
|
||||
transform: translateZ(60px);
|
||||
}
|
||||
83.33% {
|
||||
left: -60px;
|
||||
transform: translateZ(60px);
|
||||
}
|
||||
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
left: 0px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
100% {
|
||||
left: 0px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-2-1 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
2.083% {
|
||||
left: 180px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
16.666% {
|
||||
left: 180px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
33.332% {
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
left: 240px;
|
||||
transform: translateZ(120px);
|
||||
}
|
||||
|
||||
49.998% {
|
||||
left: 240px;
|
||||
transform: translateZ(120px);
|
||||
}
|
||||
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
left: 120px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
66.664% {
|
||||
left: 120px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
left: 60px;
|
||||
transform: translateZ(60px);
|
||||
}
|
||||
83.33% {
|
||||
left: 60px;
|
||||
transform: translateZ(60px);
|
||||
}
|
||||
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
100% {
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-3-1 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
top: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
2.083% {
|
||||
top: 220px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
16.666% {
|
||||
top: 220px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
top: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
33.332% {
|
||||
top: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
top: 120px;
|
||||
transform: translateZ(40px);
|
||||
}
|
||||
|
||||
49.998% {
|
||||
top: 120px;
|
||||
transform: translateZ(40px);
|
||||
}
|
||||
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
top: 120px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
66.664% {
|
||||
top: 120px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
top: 180px;
|
||||
transform: translateZ(80px);
|
||||
}
|
||||
83.33% {
|
||||
top: 180px;
|
||||
transform: translateZ(80px);
|
||||
}
|
||||
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
top: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-4-1 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
2.083% {
|
||||
top: 220px;
|
||||
left: 180px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
16.666% {
|
||||
top: 220px;
|
||||
left: 180px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
33.332% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
top: 120px;
|
||||
left: 240px;
|
||||
transform: translateZ(120px);
|
||||
}
|
||||
49.998% {
|
||||
top: 120px;
|
||||
left: 240px;
|
||||
transform: translateZ(120px);
|
||||
}
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
66.664% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
top: 180px;
|
||||
left: 260px;
|
||||
transform: translateZ(80px);
|
||||
}
|
||||
83.33% {
|
||||
top: 180px;
|
||||
left: 260px;
|
||||
transform: translateZ(80px);
|
||||
}
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-1-2 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
2.083% {
|
||||
left: -40px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
16.666% {
|
||||
left: -40px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
33.332% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
left: 0px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
49.998% {
|
||||
left: 0px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
66.664% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
left: -60px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
83.33% {
|
||||
left: -60px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
100% {
|
||||
left: 0px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-2-2 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
2.083% {
|
||||
left: 180px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
16.666% {
|
||||
left: 180px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
33.332% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
left: 240px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
49.998% {
|
||||
left: 240px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
66.664% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
left: 60px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
83.33% {
|
||||
left: 60px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
100% {
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-3-2 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
2.083% {
|
||||
top: 220px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
16.666% {
|
||||
top: 220px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
33.332% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
top: 120px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
49.998% {
|
||||
top: 120px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
66.664% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
top: 180px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
83.33% {
|
||||
top: 180px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-cube-4-2 {
|
||||
/* STEP 1 */
|
||||
0% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
2.083% {
|
||||
top: 220px;
|
||||
left: 180px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
16.666% {
|
||||
top: 220px;
|
||||
left: 180px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 2 */
|
||||
18.749% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
33.332% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* STEP 3 */
|
||||
35.415% {
|
||||
top: 120px;
|
||||
left: 240px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
49.998% {
|
||||
top: 120px;
|
||||
left: 240px;
|
||||
transform: translateZ(-200px);
|
||||
}
|
||||
/* STEP 4 */
|
||||
52.081% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
66.664% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
/* Step 5 */
|
||||
68.747% {
|
||||
top: 180px;
|
||||
left: 260px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
83.33% {
|
||||
top: 180px;
|
||||
left: 260px;
|
||||
transform: translateZ(-180px);
|
||||
}
|
||||
/* Step 6 */
|
||||
85.413% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
transform: translateZ(-120px);
|
||||
}
|
||||
}
|
||||
90
pkgs/clan-app/ui/src/routes/Onboarding/Creating.tsx
Normal file
90
pkgs/clan-app/ui/src/routes/Onboarding/Creating.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { Tooltip } from "@/src/components/Tooltip/Tooltip";
|
||||
import { Typography } from "@/src/components/Typography/Typography";
|
||||
|
||||
import "./Creating.css";
|
||||
|
||||
export const Creating = () => (
|
||||
<div class="creating">
|
||||
<Tooltip open={true} placement="top" trigger={<div />}>
|
||||
<Typography hierarchy="body" size="xs" weight="medium" inverted={true}>
|
||||
Your Clan is being created
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
|
||||
<div class="scene">
|
||||
<div class="frame">
|
||||
<div id="cube-1" class="cube state-1">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-2" class="cube state-2">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-3" class="cube state-3">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-4" class="cube state-4">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-1-1" class="cube state-1-1">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-2-2" class="cube state-2-2">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-3-3" class="cube state-3-3">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
|
||||
<div id="cube-4-4" class="cube state-4-4">
|
||||
<div class="cube-face front"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face back"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -81,10 +81,5 @@ main#welcome {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.creating {
|
||||
@apply w-[17.0625rem] h-[20.4375rem];
|
||||
background: url(./cube.svg) center / cover no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@ import { RouteSectionProps, useNavigate } from "@solidjs/router";
|
||||
import "./Onboarding.css";
|
||||
import { Typography } from "@/src/components/Typography/Typography";
|
||||
import { Button } from "@/src/components/Button/Button";
|
||||
import { Tooltip } from "@/src/components/Tooltip/Tooltip";
|
||||
import { Alert } from "@/src/components/Alert/Alert";
|
||||
|
||||
import { Divider } from "@/src/components/Divider/Divider";
|
||||
@@ -33,6 +32,7 @@ import { Fieldset } from "@/src/components/Form/Fieldset";
|
||||
import * as v from "valibot";
|
||||
import { HostFileInput } from "@/src/components/Form/HostFileInput";
|
||||
import { callApi } from "@/src/hooks/api";
|
||||
import { Creating } from "./Creating";
|
||||
|
||||
type State = "welcome" | "setup" | "creating";
|
||||
|
||||
@@ -154,21 +154,6 @@ const welcome = (props: {
|
||||
);
|
||||
};
|
||||
|
||||
const creating = () => (
|
||||
<div class="animate-pulse">
|
||||
<Tooltip
|
||||
open={true}
|
||||
placement="top"
|
||||
animation="bounce"
|
||||
trigger={<div class="creating" />}
|
||||
>
|
||||
<Typography hierarchy="body" size="xs" weight="medium" inverted={true}>
|
||||
Your Clan is being created
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Onboarding: Component<RouteSectionProps> = (props) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -372,7 +357,9 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
|
||||
</div>
|
||||
</Match>
|
||||
|
||||
<Match when={state() === "creating"}>{creating()}</Match>
|
||||
<Match when={state() === "creating"}>
|
||||
<Creating />
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,316 +0,0 @@
|
||||
<svg width="273" height="327" viewBox="0 0 273 327" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499716 -0.86619 0.499716 137.399 89.7148)" fill="url(#paint0_linear_4542_12187)" stroke="url(#paint1_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.8281 125.194)" fill="url(#paint2_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.8281 125.194)" fill="url(#paint3_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.8281 125.194)" stroke="url(#paint4_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.326 160.673)" fill="url(#paint5_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.326 160.673)" fill="url(#paint6_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.326 160.673)" stroke="url(#paint7_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499716 -0.86619 0.499716 62.5708 142.85)" fill="url(#paint8_linear_4542_12187)" stroke="url(#paint9_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 1 178.329)" fill="url(#paint10_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 1 178.329)" fill="url(#paint11_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 1 178.329)" stroke="url(#paint12_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 62.4976 213.808)" fill="url(#paint13_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 62.4976 213.808)" fill="url(#paint14_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 62.4976 213.808)" stroke="url(#paint15_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499715 -0.86619 0.499715 210.502 137.882)" fill="url(#paint16_linear_4542_12187)" stroke="url(#paint17_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 148.931 173.361)" fill="url(#paint18_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 148.931 173.361)" fill="url(#paint19_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 148.931 173.361)" stroke="url(#paint20_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499715 0 1 210.429 208.84)" fill="url(#paint21_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499715 0 1 210.429 208.84)" fill="url(#paint22_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499715 0 1 210.429 208.84)" stroke="url(#paint23_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499716 -0.86619 0.499716 137.158 185.084)" fill="url(#paint24_linear_4542_12187)" stroke="url(#paint25_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.5869 220.563)" fill="url(#paint26_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.5869 220.563)" fill="url(#paint27_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.5869 220.563)" stroke="url(#paint28_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.084 256.042)" fill="url(#paint29_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.084 256.042)" fill="url(#paint30_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.084 256.042)" stroke="url(#paint31_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499716 -0.86619 0.499716 135.915 0)" fill="url(#paint32_linear_4542_12187)" stroke="url(#paint33_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 74.3442 35.479)" fill="url(#paint34_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 74.3442 35.479)" fill="url(#paint35_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 74.3442 35.479)" stroke="url(#paint36_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 135.842 70.9579)" fill="url(#paint37_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 135.842 70.9579)" fill="url(#paint38_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 135.842 70.9579)" stroke="url(#paint39_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499716 -0.86619 0.499716 62.5708 47.2027)" fill="url(#paint40_linear_4542_12187)" stroke="url(#paint41_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 1 82.6817)" fill="url(#paint42_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 1 82.6817)" fill="url(#paint43_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 1 82.6817)" stroke="url(#paint44_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 62.4976 118.161)" fill="url(#paint45_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 62.4976 118.161)" fill="url(#paint46_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 62.4976 118.161)" stroke="url(#paint47_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499715 -0.86619 0.499715 210.502 42.234)" fill="url(#paint48_linear_4542_12187)" stroke="url(#paint49_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 148.931 77.713)" fill="url(#paint50_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 148.931 77.713)" fill="url(#paint51_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 148.931 77.713)" stroke="url(#paint52_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499715 0 1 210.429 113.192)" fill="url(#paint53_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499715 0 1 210.429 113.192)" fill="url(#paint54_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499715 0 1 210.429 113.192)" stroke="url(#paint55_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9982" rx="1" transform="matrix(0.86619 0.499716 -0.86619 0.499716 137.158 89.4367)" fill="url(#paint56_linear_4542_12187)" stroke="url(#paint57_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.5869 124.916)" fill="url(#paint58_linear_4542_12187)" fill-opacity="0.1"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.5869 124.916)" fill="url(#paint59_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 0.499716 0 1 75.5869 124.916)" stroke="url(#paint60_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.084 160.395)" fill="url(#paint61_linear_4542_12187)"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.084 160.395)" fill="url(#paint62_linear_4542_12187)" fill-opacity="0.24"/>
|
||||
<rect width="70.9982" height="70.9578" rx="1" transform="matrix(0.86619 -0.499716 0 1 137.084 160.395)" stroke="url(#paint63_linear_4542_12187)" stroke-width="0.64"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4542_12187" x1="73.1289" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_4542_12187" x1="73.1289" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear_4542_12187" x1="73.129" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint17_linear_4542_12187" x1="73.129" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint18_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint19_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42737" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint20_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint21_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint22_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint23_linear_4542_12187" x1="73.129" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint24_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint25_linear_4542_12187" x1="73.1289" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint26_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint27_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint28_linear_4542_12187" x1="73.129" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint29_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint30_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1743" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint31_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint32_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint33_linear_4542_12187" x1="73.129" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint34_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint35_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint36_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint37_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint38_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint39_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint40_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint41_linear_4542_12187" x1="73.1289" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint42_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint43_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint44_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint45_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint46_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint47_linear_4542_12187" x1="73.129" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint48_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint49_linear_4542_12187" x1="73.129" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint50_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint51_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint52_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint53_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint54_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint55_linear_4542_12187" x1="73.129" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint56_linear_4542_12187" x1="3.21525" y1="1.26987" x2="26.2123" y2="73.9372" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.94"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint57_linear_4542_12187" x1="73.1289" y1="21.7256" x2="19.1537" y2="-1.08702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint58_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint59_linear_4542_12187" x1="71.0824" y1="68.7651" x2="43.5492" y2="9.42738" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint60_linear_4542_12187" x1="73.129" y1="21.7132" x2="19.163" y2="-1.10843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint61_linear_4542_12187" x1="3.21525" y1="1.26914" x2="26.1885" y2="73.9026" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.81"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint62_linear_4542_12187" x1="22.5463" y1="67.3059" x2="51.7875" y2="28.1744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#40A2A6"/>
|
||||
<stop offset="1" stop-color="#91ACAF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint63_linear_4542_12187" x1="73.1289" y1="21.7132" x2="19.163" y2="-1.10842" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#10191A"/>
|
||||
<stop offset="1" stop-color="#2C4547"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 24 KiB |
Reference in New Issue
Block a user