Merge branch 'main' into command-center-and-migrations

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+    - init: npm install && npm run build
+      command: npm run dev

package-lock.json

@@ -7,7 +7,8 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/console": "^0.1.1",
+                "@analytics/google-tag-manager": "^0.5.3",
+                "@appwrite.io/console": "0.2.0",
                 "@appwrite.io/pink": "^0.0.6-rc.14",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
@@ -20,6 +21,7 @@
                 "nanoid": "^4.0.2",
                 "pretty-bytes": "^6.1.0",
                 "prismjs": "^1.29.0",
+                "svelte-confetti": "^1.2.2",
                 "tippy.js": "^6.3.7",
                 "web-vitals": "^3.1.1"
             },
@@ -124,6 +126,11 @@
             "resolved": "https://registry.npmjs.org/@analytics/google-analytics/-/google-analytics-1.0.7.tgz",
             "integrity": "sha512-KZ69NaMIi5kOcouzqI8cu7tZgQl7ziGiRahfU6zniUf32G8bv7wQDh73JFz1NwO6gBPloUc+5BzEoWzScM5Rgw=="
         },
+        "node_modules/@analytics/google-tag-manager": {
+            "version": "0.5.5",
+            "resolved": "https://registry.npmjs.org/@analytics/google-tag-manager/-/google-tag-manager-0.5.5.tgz",
+            "integrity": "sha512-bYTzseT3DRwMhkWr0+zJH6BHdk5FDZv1TqU5dHseh60zf/sl3LlWUbb8Lgl41LAOmA2Qy1frJXr3mIO1Tak8Yg=="
+        },
         "node_modules/@analytics/localstorage-utils": {
             "version": "0.1.10",
             "resolved": "https://registry.npmjs.org/@analytics/localstorage-utils/-/localstorage-utils-0.1.10.tgz",
@@ -158,9 +165,9 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "version": "0.1.1",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.1.1.tgz",
-            "integrity": "sha512-7aBh/8QxKmaMsP9tVJgNsrOBstuikKasSUoSyRNxblK3J/OdPXnQRInZELT9uaK+vqjZaCYspA3B+5UH+DZ9Dw==",
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.2.0.tgz",
+            "integrity": "sha512-jgFYoskSCWaesF8zfsgYoTEKfyn6Kq3R9c5sM4AH2H+B/hmT8jwu9c3UU+LHBZ3BLdB9Zm3xOMa4bPyiQwzSeQ==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -8174,6 +8181,11 @@
                 "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0"
             }
         },
+        "node_modules/svelte-confetti": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.2.4.tgz",
+            "integrity": "sha512-2ut7fEjfHIQ5foXuBaVwalUdl7JlyhgEkFbepGYpOx2dOGC2vjj4kkepcYr/Fl3+CyqfnVmXre1owM+3rpfJEg=="
+        },
         "node_modules/svelte-hmr": {
             "version": "0.15.2",
             "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.2.tgz",

package.json

@@ -19,8 +19,9 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "^0.1.1",
         "@appwrite.io/pink": "^0.0.6-rc.14",
+        "@appwrite.io/console": "0.2.0",
+        "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",
@@ -32,6 +33,7 @@
         "nanoid": "^4.0.2",
         "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
+        "svelte-confetti": "^1.2.2",
         "tippy.js": "^6.3.7",
         "web-vitals": "^3.1.1"
     },

src/app.html

@@ -43,6 +43,8 @@
         <link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
         <link rel="stylesheet" href="/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <!-- {{CLOUD_OG}} -->
+
         %sveltekit.head%
     </head>
     <body>

src/lib/actions/analytics.ts

@@ -1,8 +1,9 @@
 import { page } from '$app/stores';
 import { user } from '$lib/stores/user';
-import { ENV, MODE, VARS } from '$lib/system';
+import { ENV, MODE, VARS, isCloud } from '$lib/system';
 import googleAnalytics from '@analytics/google-analytics';
 import { AppwriteException } from '@appwrite.io/console';
+import googleTagManager from '@analytics/google-tag-manager';
 import Analytics from 'analytics';
 import { get } from 'svelte/store';
 
@@ -11,7 +12,14 @@ const analytics = Analytics({
     plugins: [
         googleAnalytics({
             measurementIds: [VARS.GOOGLE_ANALYTICS || 'G-R4YJ9JN8L4']
-        })
+        }),
+        ...(isCloud
+            ? [
+                  googleTagManager({
+                      containerId: [VARS.GOOGLE_TAG || 'GTM-P3T9TBV']
+                  })
+              ]
+            : [])
     ]
 });
 

src/lib/components/cardGrid.svelte

@@ -19,3 +19,10 @@
         </div>
     {/if}
 </Card>
+
+<style lang="scss">
+    .grid-1-2 > * {
+        width: 100%;
+        overflow: hidden;
+    }
+</style>

src/lib/components/clickableListItem.svelte

@@ -4,11 +4,15 @@
 
 <li class="clickable-list-item">
     <a {href} class="clickable-list-button" on:click>
-        <h5 class="clickable-list-title u-trim-1">
-            <slot />
-        </h5>
-        <div class="clickable-list-desc">
-            <p class="text u-margin-block-start-8"><slot name="desc" /></p>
-        </div>
+        {#if $$slots.default}
+            <h5 class="clickable-list-title u-trim-1">
+                <slot />
+            </h5>
+        {/if}
+        {#if $$slots.desc}
+            <div class="clickable-list-desc">
+                <p class="text u-margin-block-start-8"><slot name="desc" /></p>
+            </div>
+        {/if}
     </a>
 </li>

src/lib/components/drop.svelte

@@ -14,7 +14,9 @@
     export let fullWidth = false;
     export let fixed = false;
 
-    const dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher<{
+        blur: undefined;
+    }>();
 
     let element: HTMLDivElement;
     let tooltip: HTMLDivElement;

src/lib/components/permissions/actions.svelte

@@ -20,7 +20,7 @@
     }
 </script>
 
-<DropList bind:show={showDropdown} placement="bottom-end">
+<DropList bind:show={showDropdown} placement="bottom-end" fixed>
     <slot />
     <svelte:fragment slot="list">
         <DropListItem disabled={$groups.has('any')} on:click={() => dispatch('create', ['any'])}>

src/lib/components/permissions/permissions.svelte

@@ -12,7 +12,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import {
-        Table,
         TableBody,
         TableCell,
         TableCellHead,
@@ -24,6 +23,7 @@
     import { writable, type Unsubscriber } from 'svelte/store';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
+    import Table from '$lib/elements/table/table.svelte';
 
     export let withCreate = false;
     export let permissions: string[] = [];
@@ -142,74 +142,76 @@
 </script>
 
 {#if [...$groups]?.length}
-    <Table noMargin noStyles>
-        <TableHeader>
-            <TableCellHead width={70}>Role</TableCellHead>
-            {#if withCreate}
-                <TableCellHead width={70}>Create</TableCellHead>
-            {/if}
-            <TableCellHead width={70}>Read</TableCellHead>
-            <TableCellHead width={70}>Update</TableCellHead>
-            <TableCellHead width={70}>Delete</TableCellHead>
-            <TableCellHead width={40} />
-        </TableHeader>
-        <TableBody>
-            {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
-                <TableRow>
-                    <TableCell title="Role">
-                        <Row {role} />
-                    </TableCell>
+    <div class="table-wrapper">
+        <Table noMargin noStyles>
+            <TableHeader>
+                <TableCellHead width={140}>Role</TableCellHead>
+                {#if withCreate}
+                    <TableCellHead width={60}>Create</TableCellHead>
+                {/if}
+                <TableCellHead width={50}>Read</TableCellHead>
+                <TableCellHead width={60}>Update</TableCellHead>
+                <TableCellHead width={60}>Delete</TableCellHead>
+                <TableCellHead width={32} />
+            </TableHeader>
+            <TableBody>
+                {#each [...$groups].sort(sortRoles) as [role, permission] (role)}
+                    <TableRow>
+                        <TableCell title="Role">
+                            <Row {role} />
+                        </TableCell>
 
-                    {#if withCreate}
-                        <TableCell title="Create">
+                        {#if withCreate}
+                            <TableCell title="Create">
+                                <input
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={permission.create}
+                                    on:change={() => togglePermission(role, 'create')} />
+                            </TableCell>
+                        {/if}
+                        <TableCell title="Read">
                             <input
                                 type="checkbox"
                                 class="icon-check"
-                                aria-label="Create"
-                                checked={permission.create}
-                                on:change={() => togglePermission(role, 'create')} />
+                                aria-label="Read"
+                                checked={permission.read}
+                                on:change={() => togglePermission(role, 'read')} />
+                        </TableCell>
+                        <TableCell title="Update">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Update"
+                                checked={permission.update}
+                                on:change={() => togglePermission(role, 'update')} />
+                        </TableCell>
+                        <TableCell title="Delete">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Delete"
+                                checked={permission.delete}
+                                on:change={() => togglePermission(role, 'delete')} />
                         </TableCell>
-                    {/if}
-                    <TableCell title="Read">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Read"
-                            checked={permission.read}
-                            on:change={() => togglePermission(role, 'read')} />
-                    </TableCell>
-                    <TableCell title="Update">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Update"
-                            checked={permission.update}
-                            on:change={() => togglePermission(role, 'update')} />
-                    </TableCell>
-                    <TableCell title="Delete">
-                        <input
-                            type="checkbox"
-                            class="icon-check"
-                            aria-label="Delete"
-                            checked={permission.delete}
-                            on:change={() => togglePermission(role, 'delete')} />
-                    </TableCell>
 
-                    <TableCell title="Remove" width={40}>
-                        <div class="u-flex">
-                            <button
-                                class="button is-text is-only-icon"
-                                type="button"
-                                aria-label="delete"
-                                on:click={() => deleteRole(role)}>
-                                <span class="icon-x" aria-hidden="true" />
-                            </button>
-                        </div>
-                    </TableCell>
-                </TableRow>
-            {/each}
-        </TableBody>
-    </Table>
+                        <TableCell title="Remove" width={40}>
+                            <div class="u-flex">
+                                <button
+                                    class="button is-text is-only-icon"
+                                    type="button"
+                                    aria-label="delete"
+                                    on:click={() => deleteRole(role)}>
+                                    <span class="icon-x" aria-hidden="true" />
+                                </button>
+                            </div>
+                        </TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    </div>
 
     <Actions
         bind:showCustom

src/lib/elements/forms/button.svelte

@@ -6,6 +6,7 @@
 
     export let submit = false;
     export let secondary = false;
+    export let github = false;
     export let text = false;
     export let danger = false;
     export let disabled = false;
@@ -40,6 +41,7 @@
         disabled && 'is-disabled',
         round && 'is-only-icon',
         secondary && 'is-secondary',
+        github && 'is-github',
         text && 'is-text',
         danger && 'is-danger',
         fullWidth && 'is-full-width',
@@ -71,3 +73,17 @@
         <slot />
     </button>
 {/if}
+
+<style lang="scss">
+    .is-github {
+        background-color: #373b4d;
+
+        &:hover {
+            background-color: lighten($color: #373b4d, $amount: 2.5);
+        }
+
+        &:active {
+            background-color: darken($color: #373b4d, $amount: 5);
+        }
+    }
+</style>

src/lib/elements/forms/formItem.svelte

@@ -1,3 +1,7 @@
-<li class="form-item">
+<script lang="ts">
+    export let fullWidth = false;
+</script>
+
+<li class="form-item" class:u-width-full-line={fullWidth}>
     <slot />
 </li>

src/lib/elements/forms/inputFile.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { onMount } from 'svelte';
     import { Helper } from '.';
 
     export let label: string = null;
     export let files: FileList;
-    export let list = new DataTransfer();
+
     export let allowedFileExtensions: string[] = [];
     export let maxSize: number = null;
     export let required = false;
@@ -14,16 +15,35 @@
     let input: HTMLInputElement;
     let hovering = false;
 
+    function setFiles(value: FileList) {
+        if (!value) return;
+
+        const hasInvalidExt = Array.from(value).some((file) => {
+            const fileExtension = file.name.split('.').pop();
+            return !allowedFileExtensions.includes(fileExtension);
+        });
+        if (hasInvalidExt) {
+            error = 'Invalid file extension';
+            return;
+        }
+
+        files = value;
+        input.files = value;
+    }
+
+    function resetFiles() {
+        setFiles(new DataTransfer().files);
+    }
+
     function dropHandler(ev: DragEvent) {
         ev.dataTransfer.dropEffect = 'move';
         hovering = false;
-        if (ev.dataTransfer.items) {
-            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                if (ev.dataTransfer.items[i].kind === 'file') {
-                    list.items.clear();
-                    list.items.add(ev.dataTransfer.items[i].getAsFile());
-                    files = list.files;
-                }
+        if (!ev.dataTransfer.items) return;
+        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+            if (ev.dataTransfer.items[i].kind === 'file') {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(ev.dataTransfer.items[i].getAsFile());
+                setFiles(dataTransfer.files);
             }
         }
     }
@@ -47,10 +67,19 @@
     }
 
     $: fileArray = files?.length ? Array.from(files) : [];
+
+    onMount(() => {
+        setFiles(files);
+    });
+
+    const handleChange = (event: Event) => {
+        const target = event.currentTarget as HTMLInputElement;
+        setFiles(target.files);
+    };
 </script>
 
 <input
-    bind:files
+    on:change={handleChange}
     bind:this={input}
     accept={allowedFileExtensions.map((n) => `.${n}`).join(',')}
     type="file"
@@ -123,7 +152,7 @@
                                 {fileSize.value + fileSize.unit}
                             </span>
                             <button
-                                on:click={() => (files = null)}
+                                on:click|preventDefault={resetFiles}
                                 type="button"
                                 class="button is-text is-only-icon u-margin-inline-start-auto"
                                 aria-label="remove file"

src/lib/elements/forms/inputText.svelte

@@ -17,6 +17,7 @@
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
+    export let fullWidth = false;
     export let maxlength: number = null;
     export let tooltip: string = null;
 
@@ -66,7 +67,7 @@
     };
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     {#if label}
         <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
             {label}

src/lib/elements/table/tableScroll.svelte

@@ -38,7 +38,7 @@
     };
 </script>
 
-<div class="table-with-scroll {noMargin ? '' : 'u-margin-block-start-32'}" data-private>
+<div class="table-with-scroll" class:u-margin-block-start-32={!noMargin} data-private>
     <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />

src/lib/images/appwrite-cloud.svg

@@ -0,0 +1,22 @@
+<svg width="215" height="19" viewBox="0 0 215 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.82529 15.1522H2.60847L1.64748 17.8121H6.10352e-05L4.32453 5.9198H6.12639L10.4337 17.8121H8.78628L7.82529 15.1522ZM7.37911 13.8823L5.21688 7.84179L3.05464 13.8823H7.37911Z" fill="white"/>
+<path d="M23.7474 9.35192C23.7474 10.3472 23.4041 11.1767 22.7177 11.8402C22.0427 12.4923 21.0074 12.8184 19.6117 12.8184H17.3121V17.8121H15.7505V5.85116H19.6117C20.9616 5.85116 21.9855 6.17721 22.6834 6.82931C23.3927 7.48141 23.7474 8.32228 23.7474 9.35192ZM19.6117 11.5313C20.4811 11.5313 21.1218 11.3425 21.5336 10.965C21.9455 10.5875 22.1514 10.0498 22.1514 9.35192C22.1514 7.87611 21.3048 7.1382 19.6117 7.1382H17.3121V11.5313H19.6117Z" fill="white"/>
+<path d="M37.1172 9.35192C37.1172 10.3472 36.774 11.1767 36.0876 11.8402C35.4126 12.4923 34.3772 12.8184 32.9815 12.8184H30.682V17.8121H29.1204V5.85116H32.9815C34.3315 5.85116 35.3554 6.17721 36.0532 6.82931C36.7625 7.48141 37.1172 8.32228 37.1172 9.35192ZM32.9815 11.5313C33.851 11.5313 34.4916 11.3425 34.9035 10.965C35.3153 10.5875 35.5213 10.0498 35.5213 9.35192C35.5213 7.87611 34.6747 7.1382 32.9815 7.1382H30.682V11.5313H32.9815Z" fill="white"/>
+<path d="M57.5229 5.85116L54.0564 17.8121H52.306L49.526 8.185L46.6431 17.8121L44.9098 17.8292L41.5635 5.85116H43.2281L45.8365 15.9931L48.7195 5.85116H50.4699L53.2156 15.9587L55.8411 5.85116H57.5229Z" fill="white"/>
+<path d="M68.9619 17.8121L66.1132 12.9213H64.2255V17.8121H62.6639V5.85116H66.5251C67.4288 5.85116 68.1896 6.0056 68.8074 6.31449C69.4366 6.62338 69.9057 7.04096 70.2146 7.56722C70.5235 8.09347 70.6779 8.69409 70.6779 9.36908C70.6779 10.1928 70.4377 10.9192 69.9572 11.5485C69.4881 12.1777 68.7788 12.5953 67.8293 12.8012L70.8324 17.8121H68.9619ZM64.2255 11.6686H66.5251C67.3717 11.6686 68.0066 11.4627 68.4299 11.0508C68.8532 10.6275 69.0648 10.0669 69.0648 9.36908C69.0648 8.65977 68.8532 8.11063 68.4299 7.72166C68.018 7.33269 67.3831 7.1382 66.5251 7.1382H64.2255V11.6686Z" fill="white"/>
+<path d="M78.0981 5.85116V17.8121H76.5365V5.85116H78.0981Z" fill="white"/>
+<path d="M91.5536 5.85116V7.12104H88.2931V17.8121H86.7315V7.12104H83.4538V5.85116H91.5536Z" fill="white"/>
+<path d="M98.4696 7.12104V11.1195H102.828V12.4065H98.4696V16.525H103.343V17.8121H96.908V5.834H103.343V7.12104H98.4696Z" fill="white"/>
+<path d="M108.383 11.7716C108.383 10.5818 108.641 9.52352 109.155 8.59685C109.67 7.65874 110.385 6.93228 111.3 6.41746C112.227 5.8912 113.274 5.62807 114.441 5.62807C115.871 5.62807 117.095 6.0056 118.113 6.76067C119.131 7.51573 119.812 8.54537 120.155 9.84957H116.929C116.689 9.3462 116.346 8.96294 115.9 8.69981C115.465 8.43669 114.967 8.30512 114.407 8.30512C113.503 8.30512 112.771 8.61973 112.21 9.24895C111.649 9.87817 111.369 10.719 111.369 11.7716C111.369 12.8241 111.649 13.6649 112.21 14.2942C112.771 14.9234 113.503 15.238 114.407 15.238C114.967 15.238 115.465 15.1064 115.9 14.8433C116.346 14.5802 116.689 14.1969 116.929 13.6935H120.155C119.812 14.9977 119.131 16.0274 118.113 16.7824C117.095 17.5261 115.871 17.8979 114.441 17.8979C113.274 17.8979 112.227 17.6405 111.3 17.1257C110.385 16.5994 109.67 15.8729 109.155 14.9463C108.641 14.0196 108.383 12.9614 108.383 11.7716Z" fill="white"/>
+<path d="M128.319 15.5469H132.163V17.8121H125.385V5.76536H128.319V15.5469Z" fill="white"/>
+<path d="M142.692 17.9322C141.559 17.9322 140.518 17.6691 139.569 17.1428C138.631 16.6166 137.881 15.8844 137.321 14.9463C136.772 13.9967 136.497 12.9328 136.497 11.7544C136.497 10.576 136.772 9.5178 137.321 8.57969C137.881 7.64158 138.631 6.90939 139.569 6.38314C140.518 5.85688 141.559 5.59375 142.692 5.59375C143.825 5.59375 144.86 5.85688 145.798 6.38314C146.748 6.90939 147.491 7.64158 148.029 8.57969C148.578 9.5178 148.853 10.576 148.853 11.7544C148.853 12.9328 148.578 13.9967 148.029 14.9463C147.48 15.8844 146.736 16.6166 145.798 17.1428C144.86 17.6691 143.825 17.9322 142.692 17.9322ZM142.692 15.2552C143.653 15.2552 144.42 14.9348 144.992 14.2942C145.575 13.6535 145.867 12.8069 145.867 11.7544C145.867 10.6904 145.575 9.84385 144.992 9.21463C144.42 8.57397 143.653 8.25364 142.692 8.25364C141.72 8.25364 140.942 8.56825 140.358 9.19747C139.786 9.82669 139.5 10.679 139.5 11.7544C139.5 12.8184 139.786 13.6707 140.358 14.3113C140.942 14.9405 141.72 15.2552 142.692 15.2552Z" fill="white"/>
+<path d="M156.8 5.76536V12.9728C156.8 13.6935 156.978 14.2484 157.332 14.6374C157.687 15.0263 158.207 15.2208 158.894 15.2208C159.58 15.2208 160.107 15.0263 160.473 14.6374C160.839 14.2484 161.022 13.6935 161.022 12.9728V5.76536H163.956V12.9556C163.956 14.031 163.727 14.9405 163.27 15.6842C162.812 16.4278 162.194 16.9884 161.416 17.3659C160.65 17.7434 159.792 17.9322 158.842 17.9322C157.893 17.9322 157.041 17.7492 156.285 17.3831C155.542 17.0055 154.953 16.445 154.518 15.7013C154.083 14.9463 153.866 14.031 153.866 12.9556V5.76536H156.8Z" fill="white"/>
+<path d="M173.962 5.76536C175.232 5.76536 176.342 6.01704 177.291 6.52042C178.241 7.0238 178.973 7.7331 179.488 8.64833C180.014 9.55212 180.277 10.5989 180.277 11.7887C180.277 12.9671 180.014 14.0139 179.488 14.9291C178.973 15.8443 178.235 16.5536 177.274 17.057C176.325 17.5604 175.221 17.8121 173.962 17.8121H169.449V5.76536H173.962ZM173.773 15.2723C174.883 15.2723 175.747 14.9691 176.365 14.3628C176.982 13.7565 177.291 12.8984 177.291 11.7887C177.291 10.679 176.982 9.81525 176.365 9.19747C175.747 8.57969 174.883 8.2708 173.773 8.2708H172.383V15.2723H173.773Z" fill="white"/>
+<path d="M195.974 18.1164C193.085 18.1164 190.743 15.7507 190.743 12.8325C190.743 10.1024 192.792 7.85585 195.422 7.57752C195.294 7.08627 195.226 6.57056 195.226 6.03881C195.226 2.70367 197.903 0 201.205 0C204.013 0 206.369 1.95563 207.011 4.59213C207.311 4.55057 207.618 4.5291 207.931 4.5291C211.645 4.5291 214.656 7.57073 214.656 11.3228C214.656 15.0748 211.645 18.1164 207.931 18.1164H195.974Z" fill="url(#paint0_linear_511_23621)"/>
+<defs>
+<linearGradient id="paint0_linear_511_23621" x1="202.699" y1="0" x2="202.699" y2="23.7487" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.7"/>
+</linearGradient>
+</defs>
+</svg>

src/lib/images/login/cloud-1.svg

@@ -0,0 +1,12 @@
+<svg width="79" height="58" viewBox="0 0 79 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.0709 16.202C50.359 6.60814 40.4551 0 29 0C12.9837 0 0 12.9182 0 28.8535C0 44.7889 12.9837 57.7071 29 57.7071C34.828 57.7071 40.2545 55.9966 44.8 53.0527C48.4035 55.963 52.997 57.7071 58 57.7071C69.5756 57.7071 78.9594 48.3706 78.9594 36.8535C78.9594 25.3364 69.5756 16 58 16C57.006 16 56.0281 16.0689 55.0709 16.202Z" fill="url(#paint0_linear_23_6393)"/>
+<defs>
+<linearGradient id="paint0_linear_23_6393" x1="56.5" y1="-7" x2="58" y2="57.7071" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6893"/>
+<stop offset="0.29541" stop-color="#F02E65"/>
+<stop offset="0.351472" stop-color="#F02E65" stop-opacity="0.86"/>
+<stop offset="0.526441" stop-color="#F02E65" stop-opacity="0.22"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/lib/images/login/cloud-2.svg

@@ -0,0 +1,11 @@
+<svg width="191" height="100" viewBox="0 0 191 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.696 19.8455C117.599 7.79137 103.154 -6.10352e-05 86.8893 -6.10352e-05C69.103 -6.10352e-05 53.4929 9.31726 44.6736 23.3373C42.1709 22.8017 39.5741 22.5198 36.9115 22.5198C16.5258 22.5198 0 39.0456 0 59.4313C0 79.8169 16.5258 96.3428 36.9115 96.3428C44.529 96.3428 51.6075 94.0353 57.4862 90.0812C65.7285 96.1135 75.893 99.6748 86.8893 99.6748C96.8339 99.6748 106.098 96.7621 113.876 91.7432C117.567 92.9821 121.519 93.6533 125.627 93.6533C134.693 93.6533 142.996 90.385 149.421 84.9623C153.51 87.3486 158.266 88.7158 163.342 88.7158C178.617 88.7158 191 76.3327 191 61.0574C191 45.782 178.617 33.3989 163.342 33.3989C160.501 33.3989 157.76 33.8272 155.18 34.6227C148.646 25.9069 138.347 20.1766 126.696 19.8455Z" fill="url(#paint0_linear_23_6387)"/>
+<defs>
+<linearGradient id="paint0_linear_23_6387" x1="81.5" y1="4.5" x2="81.5" y2="78.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6893"/>
+<stop offset="0.278871" stop-color="#F02E65" stop-opacity="0.99"/>
+<stop offset="0.657422" stop-color="#EC2E65" stop-opacity="0.29"/>
+<stop offset="1" stop-color="#EC2E65" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/lib/images/login/cloud-bg-mobile.svg

@@ -0,0 +1,626 @@
+<svg width="390" height="499" viewBox="0 0 390 499" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_50_2588)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M404.589 174.588C404.996 171.711 405.206 168.771 405.206 165.783C405.206 131.109 376.91 103 342.006 103C316.927 103 295.26 117.511 285.048 138.543C279.481 140.709 274.298 143.638 269.63 147.2C265.573 131.641 251.343 120.151 234.412 120.151C216.796 120.151 202.104 132.59 198.751 149.108C189.115 143.548 177.917 140.364 165.971 140.364C157.066 140.364 148.577 142.133 140.84 145.337C131.125 121.585 107.664 104.837 80.2655 104.837C52.7894 104.837 29.2733 121.68 19.6085 145.539C12.2104 141.088 3.53231 138.526 -5.7481 138.526C-32.8203 138.526 -54.7666 160.328 -54.7666 187.221C-54.7666 201.495 -48.5846 214.334 -38.7354 223.241V438.658H404.589V174.588Z" fill="url(#paint0_linear_50_2588)" fill-opacity="0.28"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M402.739 170.875C396.943 142.142 371.402 120.496 340.772 120.496C319.043 120.496 299.875 131.39 288.5 147.98C281.446 150.722 274.945 154.556 269.209 159.273C262.68 147.368 249.959 139.288 235.336 139.288C223.724 139.288 213.311 144.383 206.246 152.443C196.008 146.945 184.285 143.824 171.828 143.824C158.398 143.824 145.822 147.452 135.039 153.775C123.599 134.933 102.797 122.333 79.0321 122.333C51.556 122.333 28.0399 139.176 18.3751 163.035C10.977 158.584 2.29892 156.022 -6.9815 156.022C-34.0537 156.022 -56 177.824 -56 204.718C-56 218.991 -49.818 231.83 -39.9688 240.737V456.155H403.356V456.154H402.739V170.875Z" fill="url(#paint1_linear_50_2588)"/>
+<path d="M42.5201 -28.4292C42.5201 -28.2052 42.3663 -28.0236 42.1767 -28.0236C41.987 -28.0236 41.8332 -28.2052 41.8332 -28.4292C41.8332 -28.6532 41.987 -28.8349 42.1767 -28.8349C42.3663 -28.8349 42.5201 -28.6532 42.5201 -28.4292Z" fill="url(#paint2_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M60.6145 9.2556C60.6145 9.47964 60.4608 9.66125 60.2711 9.66125C60.0814 9.66125 59.9276 9.47964 59.9276 9.2556C59.9276 9.03157 60.0814 8.84995 60.2711 8.84995C60.4608 8.84995 60.6145 9.03157 60.6145 9.2556Z" fill="url(#paint3_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M68.3998 17.3687C68.3998 17.5927 68.246 17.7744 68.0564 17.7744C67.8667 17.7744 67.7129 17.5927 67.7129 17.3687C67.7129 17.1447 67.8667 16.963 68.0564 16.963C68.246 16.963 68.3998 17.1447 68.3998 17.3687Z" fill="url(#paint4_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M68.3998 1.02262C68.3998 1.24666 68.246 1.42828 68.0564 1.42828C67.8667 1.42828 67.7129 1.24666 67.7129 1.02262C67.7129 0.798585 67.8667 0.616971 68.0564 0.616971C68.246 0.616971 68.3998 0.798585 68.3998 1.02262Z" fill="url(#paint5_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M68.3998 1.02262C68.3998 1.24666 68.246 1.42828 68.0564 1.42828C67.8667 1.42828 67.7129 1.24666 67.7129 1.02262C67.7129 0.798585 67.8667 0.616971 68.0564 0.616971C68.246 0.616971 68.3998 0.798585 68.3998 1.02262Z" fill="url(#paint6_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M124.958 -22.0817C124.958 -21.8577 124.804 -21.6761 124.614 -21.6761C124.425 -21.6761 124.271 -21.8577 124.271 -22.0817C124.271 -22.3058 124.425 -22.4874 124.614 -22.4874C124.804 -22.4874 124.958 -22.3058 124.958 -22.0817Z" fill="url(#paint7_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M78.9329 -6.97061C78.9329 -6.74657 78.7791 -6.56495 78.5894 -6.56495C78.3997 -6.56495 78.246 -6.74657 78.246 -6.97061C78.246 -7.19464 78.3997 -7.37627 78.5894 -7.37627C78.7791 -7.37627 78.9329 -7.19464 78.9329 -6.97061Z" fill="url(#paint8_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M83.5125 -9.79486C83.5125 -9.57082 83.3587 -9.3892 83.169 -9.3892C82.9793 -9.3892 82.8256 -9.57082 82.8256 -9.79486C82.8256 -10.0189 82.9793 -10.2005 83.169 -10.2005C83.3587 -10.2005 83.5125 -10.0189 83.5125 -9.79486Z" fill="url(#paint9_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M97.2513 -18.5994C97.2513 -18.3754 97.0975 -18.1937 96.9078 -18.1937C96.7181 -18.1937 96.5643 -18.3754 96.5643 -18.5994C96.5643 -18.8234 96.7181 -19.005 96.9078 -19.005C97.0975 -19.005 97.2513 -18.8234 97.2513 -18.5994Z" fill="url(#paint10_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M101.831 -15.895C101.831 -15.671 101.677 -15.4894 101.487 -15.4894C101.298 -15.4894 101.144 -15.671 101.144 -15.895C101.144 -16.1191 101.298 -16.3007 101.487 -16.3007C101.677 -16.3007 101.831 -16.1191 101.831 -15.895Z" fill="url(#paint11_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M108.7 -24.0081C108.7 -23.7841 108.546 -23.6025 108.357 -23.6025C108.167 -23.6025 108.013 -23.7841 108.013 -24.0081C108.013 -24.2322 108.167 -24.4138 108.357 -24.4138C108.546 -24.4138 108.7 -24.2322 108.7 -24.0081Z" fill="url(#paint12_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M90.3819 17.3687C90.3819 17.5927 90.2281 17.7744 90.0384 17.7744C89.8487 17.7744 89.6949 17.5927 89.6949 17.3687C89.6949 17.1447 89.8487 16.963 90.0384 16.963C90.2281 16.963 90.3819 17.1447 90.3819 17.3687Z" fill="url(#paint13_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M17.1084 17.3687C17.1084 17.5927 16.9546 17.7744 16.7649 17.7744C16.5752 17.7744 16.4214 17.5927 16.4214 17.3687C16.4214 17.1447 16.5752 16.963 16.7649 16.963C16.9546 16.963 17.1084 17.1447 17.1084 17.3687Z" fill="url(#paint14_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M33.2385 8.84395C33.2385 9.06799 33.0847 9.24961 32.895 9.24961C32.7053 9.24961 32.5515 9.06799 32.5515 8.84395C32.5515 8.61992 32.7053 8.4383 32.895 8.4383C33.0847 8.4383 33.2385 8.61992 33.2385 8.84395Z" fill="url(#paint15_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-36.2674 -27.3133C-36.2674 -27.0893 -36.4212 -26.9077 -36.6109 -26.9077C-36.8006 -26.9077 -36.9544 -27.0893 -36.9544 -27.3133C-36.9544 -27.5373 -36.8006 -27.719 -36.6109 -27.719C-36.4212 -27.719 -36.2674 -27.5373 -36.2674 -27.3133Z" fill="url(#paint16_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M388.284 -12.3793C388.284 -12.1553 388.438 -11.9737 388.628 -11.9737C388.818 -11.9737 388.971 -12.1553 388.971 -12.3793C388.971 -12.6034 388.818 -12.785 388.628 -12.785C388.438 -12.785 388.284 -12.6034 388.284 -12.3793Z" fill="url(#paint17_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M376.835 -1.56188C376.835 -1.33784 376.989 -1.15621 377.179 -1.15621C377.369 -1.15621 377.522 -1.33784 377.522 -1.56188C377.522 -1.78591 377.369 -1.96753 377.179 -1.96753C376.989 -1.96753 376.835 -1.78591 376.835 -1.56188Z" fill="url(#paint18_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M360.807 -17.7881C360.807 -17.564 360.961 -17.3824 361.15 -17.3824C361.34 -17.3824 361.494 -17.564 361.494 -17.7881C361.494 -18.0121 361.34 -18.1937 361.15 -18.1937C360.961 -18.1937 360.807 -18.0121 360.807 -17.7881Z" fill="url(#paint19_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M352.742 5.13911C352.742 5.36315 352.896 5.54477 353.085 5.54477C353.275 5.54477 353.429 5.36315 353.429 5.13911C353.429 4.91507 353.275 4.73346 353.085 4.73346C352.896 4.73346 352.742 4.91507 352.742 5.13911Z" fill="url(#paint20_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M344.957 13.2522C344.957 13.4763 345.11 13.6579 345.3 13.6579C345.49 13.6579 345.643 13.4763 345.643 13.2522C345.643 13.0282 345.49 12.8466 345.3 12.8466C345.11 12.8466 344.957 13.0282 344.957 13.2522Z" fill="url(#paint21_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M344.957 5.13911C344.957 5.36315 345.11 5.54477 345.3 5.54477C345.49 5.54477 345.643 5.36315 345.643 5.13911C345.643 4.91507 345.49 4.73346 345.3 4.73346C345.11 4.73346 344.957 4.91507 344.957 5.13911Z" fill="url(#paint22_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M344.957 5.13911C344.957 5.36315 345.11 5.54477 345.3 5.54477C345.49 5.54477 345.643 5.36315 345.643 5.13911C345.643 4.91507 345.49 4.73346 345.3 4.73346C345.11 4.73346 344.957 4.91507 344.957 5.13911Z" fill="url(#paint23_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M291.884 -15.0837C291.884 -14.8597 292.038 -14.6781 292.227 -14.6781C292.417 -14.6781 292.571 -14.8597 292.571 -15.0837C292.571 -15.3078 292.417 -15.4894 292.227 -15.4894C292.038 -15.4894 291.884 -15.3078 291.884 -15.0837Z" fill="url(#paint24_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M280.634 -23.4366C280.634 -23.2125 280.787 -23.0309 280.977 -23.0309C281.167 -23.0309 281.32 -23.2125 281.32 -23.4366C281.32 -23.6606 281.167 -23.8422 280.977 -23.8422C280.787 -23.8422 280.634 -23.6606 280.634 -23.4366Z" fill="url(#paint25_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M296.464 1.1425C296.464 1.36653 296.617 1.54815 296.807 1.54815C296.997 1.54815 297.151 1.36653 297.151 1.1425C297.151 0.918459 296.997 0.736841 296.807 0.736841C296.617 0.736841 296.464 0.918459 296.464 1.1425Z" fill="url(#paint26_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M337.909 -6.97061C337.909 -6.74657 338.063 -6.56495 338.252 -6.56495C338.442 -6.56495 338.596 -6.74657 338.596 -6.97061C338.596 -7.19464 338.442 -7.37627 338.252 -7.37627C338.063 -7.37627 337.909 -7.19464 337.909 -6.97061Z" fill="url(#paint27_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M333.329 -1.56188C333.329 -1.33784 333.483 -1.15621 333.673 -1.15621C333.862 -1.15621 334.016 -1.33784 334.016 -1.56188C334.016 -1.78591 333.862 -1.96753 333.673 -1.96753C333.483 -1.96753 333.329 -1.78591 333.329 -1.56188Z" fill="url(#paint28_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M313.637 3.84687C313.637 4.0709 313.791 4.25252 313.981 4.25252C314.17 4.25252 314.324 4.0709 314.324 3.84687C314.324 3.62283 314.17 3.44121 313.981 3.44121C313.791 3.44121 313.637 3.62283 313.637 3.84687Z" fill="url(#paint29_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M336.535 -22.9264C336.535 -22.7023 336.689 -22.5207 336.879 -22.5207C337.068 -22.5207 337.222 -22.7023 337.222 -22.9264C337.222 -23.1504 337.068 -23.332 336.879 -23.332C336.689 -23.332 336.535 -23.1504 336.535 -22.9264Z" fill="url(#paint30_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M319.591 -18.5994C319.591 -18.3754 319.744 -18.1937 319.934 -18.1937C320.124 -18.1937 320.277 -18.3754 320.277 -18.5994C320.277 -18.8234 320.124 -19.005 319.934 -19.005C319.744 -19.005 319.591 -18.8234 319.591 -18.5994Z" fill="url(#paint31_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M315.011 -15.895C315.011 -15.671 315.165 -15.4894 315.354 -15.4894C315.544 -15.4894 315.698 -15.671 315.698 -15.895C315.698 -16.1191 315.544 -16.3007 315.354 -16.3007C315.165 -16.3007 315.011 -16.1191 315.011 -15.895Z" fill="url(#paint32_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M315.011 -21.3038C315.011 -21.0797 315.165 -20.8981 315.354 -20.8981C315.544 -20.8981 315.698 -21.0797 315.698 -21.3038C315.698 -21.5278 315.544 -21.7094 315.354 -21.7094C315.165 -21.7094 315.011 -21.5278 315.011 -21.3038Z" fill="url(#paint33_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M268.528 -21.3038C268.528 -21.0797 268.682 -20.8981 268.872 -20.8981C269.061 -20.8981 269.215 -21.0797 269.215 -21.3038C269.215 -21.5278 269.061 -21.7094 268.872 -21.7094C268.682 -21.7094 268.528 -21.5278 268.528 -21.3038Z" fill="url(#paint34_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M326.46 17.3687C326.46 17.5927 326.614 17.7744 326.803 17.7744C326.993 17.7744 327.147 17.5927 327.147 17.3687C327.147 17.1447 326.993 16.963 326.803 16.963C326.614 16.963 326.46 17.1447 326.46 17.3687Z" fill="url(#paint35_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M399.733 17.3687C399.733 17.5927 399.887 17.7744 400.077 17.7744C400.267 17.7744 400.42 17.5927 400.42 17.3687C400.42 17.1447 400.267 16.963 400.077 16.963C399.887 16.963 399.733 17.1447 399.733 17.3687Z" fill="url(#paint36_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M390.574 9.2556C390.574 9.47964 390.728 9.66125 390.918 9.66125C391.107 9.66125 391.261 9.47964 391.261 9.2556C391.261 9.03157 391.107 8.84995 390.918 8.84995C390.728 8.84995 390.574 9.03157 390.574 9.2556Z" fill="url(#paint37_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M404.313 -23.1968C404.313 -22.9728 404.467 -22.7912 404.657 -22.7912C404.846 -22.7912 405 -22.9728 405 -23.1968C405 -23.4209 404.846 -23.6025 404.657 -23.6025C404.467 -23.6025 404.313 -23.4209 404.313 -23.1968Z" fill="url(#paint38_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M401.794 -17.7881C401.794 -17.564 401.948 -17.3824 402.138 -17.3824C402.327 -17.3824 402.481 -17.564 402.481 -17.7881C402.481 -18.0121 402.327 -18.1937 402.138 -18.1937C401.948 -18.1937 401.794 -18.0121 401.794 -17.7881Z" fill="url(#paint39_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M72.4165 -27.4618C72.4165 -27.2378 72.2627 -27.0562 72.0731 -27.0562C71.8834 -27.0562 71.7296 -27.2378 71.7296 -27.4618C71.7296 -27.6859 71.8834 -27.8675 72.0731 -27.8675C72.2627 -27.8675 72.4165 -27.6859 72.4165 -27.4618Z" fill="url(#paint40_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M292.703 -29.5943C292.703 -29.3703 292.857 -29.1887 293.047 -29.1887C293.236 -29.1887 293.39 -29.3703 293.39 -29.5943C293.39 -29.8184 293.236 -30 293.047 -30C292.857 -30 292.703 -29.8184 292.703 -29.5943Z" fill="url(#paint41_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M48.1971 8.11188C48.1971 8.33592 48.0434 8.51754 47.8537 8.51754C47.664 8.51754 47.5102 8.33592 47.5102 8.11188C47.5102 7.88784 47.664 7.70622 47.8537 7.70622C48.0434 7.70622 48.1971 7.88784 48.1971 8.11188Z" fill="url(#paint42_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M35.5492 -24.3127C35.5492 -24.0887 35.3955 -23.9071 35.2058 -23.9071C35.0161 -23.9071 34.8623 -24.0887 34.8623 -24.3127C34.8623 -24.5368 35.0161 -24.7184 35.2058 -24.7184C35.3955 -24.7184 35.5492 -24.5368 35.5492 -24.3127Z" fill="url(#paint43_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M22.7821 4.31581C22.7821 4.53985 22.6284 4.72147 22.4387 4.72147C22.249 4.72147 22.0952 4.53985 22.0952 4.31581C22.0952 4.09178 22.249 3.91016 22.4387 3.91016C22.6284 3.91016 22.7821 4.09178 22.7821 4.31581Z" fill="url(#paint44_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M98.3454 -3.54555C98.3454 -3.32152 98.1917 -3.1399 98.002 -3.1399C97.8123 -3.1399 97.6585 -3.32152 97.6585 -3.54555C97.6585 -3.76959 97.8123 -3.95121 98.002 -3.95121C98.1917 -3.95121 98.3454 -3.76959 98.3454 -3.54555Z" fill="url(#paint45_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M149.356 -17.9653C149.356 -17.7412 149.202 -17.5596 149.012 -17.5596C148.823 -17.5596 148.669 -17.7412 148.669 -17.9653C148.669 -18.1893 148.823 -18.3709 149.012 -18.3709C149.202 -18.3709 149.356 -18.1893 149.356 -17.9653Z" fill="url(#paint46_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M152.841 -22.0817C152.841 -21.8577 152.688 -21.6761 152.498 -21.6761C152.308 -21.6761 152.154 -21.8577 152.154 -22.0817C152.154 -22.3058 152.308 -22.4874 152.498 -22.4874C152.688 -22.4874 152.841 -22.3058 152.841 -22.0817Z" fill="url(#paint47_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M201.638 -22.0817C201.638 -21.8577 201.484 -21.6761 201.294 -21.6761C201.104 -21.6761 200.951 -21.8577 200.951 -22.0817C200.951 -22.3058 201.104 -22.4874 201.294 -22.4874C201.484 -22.4874 201.638 -22.3058 201.638 -22.0817Z" fill="url(#paint48_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M226.036 -26.1982C226.036 -25.9742 225.882 -25.7926 225.692 -25.7926C225.503 -25.7926 225.349 -25.9742 225.349 -26.1982C225.349 -26.4223 225.503 -26.6039 225.692 -26.6039C225.882 -26.6039 226.036 -26.4223 226.036 -26.1982Z" fill="url(#paint49_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M233.007 -22.0817C233.007 -21.8577 232.853 -21.6761 232.663 -21.6761C232.473 -21.6761 232.32 -21.8577 232.32 -22.0817C232.32 -22.3058 232.473 -22.4874 232.663 -22.4874C232.853 -22.4874 233.007 -22.3058 233.007 -22.0817Z" fill="url(#paint50_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-32.782 -23.1968C-32.782 -22.9728 -32.9358 -22.7912 -33.1255 -22.7912C-33.3151 -22.7912 -33.4689 -22.9728 -33.4689 -23.1968C-33.4689 -23.4209 -33.3151 -23.6025 -33.1255 -23.6025C-32.9358 -23.6025 -32.782 -23.4209 -32.782 -23.1968Z" fill="url(#paint51_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-37.3131 9.32345C-37.3131 9.54749 -37.4668 9.7291 -37.6565 9.7291C-37.8462 9.7291 -38 9.54749 -38 9.32345C-38 9.09941 -37.8462 8.9178 -37.6565 8.9178C-37.4668 8.9178 -37.3131 9.09941 -37.3131 9.32345Z" fill="url(#paint52_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M140.532 4.4873C140.532 4.71134 140.378 4.89295 140.189 4.89295C139.999 4.89295 139.845 4.71134 139.845 4.4873C139.845 4.26326 139.999 4.08165 140.189 4.08165C140.378 4.08165 140.532 4.26326 140.532 4.4873Z" fill="url(#paint53_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M164.93 8.60379C164.93 8.82783 164.776 9.00944 164.587 9.00944C164.397 9.00944 164.243 8.82783 164.243 8.60379C164.243 8.37975 164.397 8.19813 164.587 8.19813C164.776 8.19813 164.93 8.37975 164.93 8.60379Z" fill="url(#paint54_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M168.416 4.4873C168.416 4.71134 168.262 4.89295 168.072 4.89295C167.882 4.89295 167.729 4.71134 167.729 4.4873C167.729 4.26326 167.882 4.08164 168.072 4.08164C168.262 4.08164 168.416 4.26326 168.416 4.4873Z" fill="url(#paint55_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M217.212 4.4873C217.212 4.71134 217.058 4.89295 216.868 4.89295C216.679 4.89295 216.525 4.71134 216.525 4.4873C216.525 4.26326 216.679 4.08164 216.868 4.08164C217.058 4.08164 217.212 4.26326 217.212 4.4873Z" fill="url(#paint56_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M241.61 0.370808C241.61 0.594845 241.456 0.776466 241.266 0.776466C241.077 0.776466 240.923 0.594845 240.923 0.370808C240.923 0.146771 241.077 -0.0348468 241.266 -0.0348468C241.456 -0.0348468 241.61 0.146771 241.61 0.370808Z" fill="url(#paint57_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M248.581 4.4873C248.581 4.71134 248.427 4.89295 248.237 4.89295C248.048 4.89295 247.894 4.71134 247.894 4.4873C247.894 4.26326 248.048 4.08164 248.237 4.08164C248.427 4.08164 248.581 4.26326 248.581 4.4873Z" fill="url(#paint58_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M180.872 -17.9942C180.872 -17.7702 180.718 -17.5885 180.528 -17.5885C180.339 -17.5885 180.185 -17.7702 180.185 -17.9942C180.185 -18.2182 180.339 -18.3999 180.528 -18.3999C180.718 -18.3999 180.872 -18.2182 180.872 -17.9942Z" fill="url(#paint59_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-5.3877 -1.02525C-5.3877 -0.801211 -5.54148 -0.61959 -5.73117 -0.61959C-5.92087 -0.61959 -6.07465 -0.801211 -6.07465 -1.02525C-6.07465 -1.24929 -5.92087 -1.43091 -5.73117 -1.43091C-5.54148 -1.43091 -5.3877 -1.24929 -5.3877 -1.02525Z" fill="url(#paint60_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M0.286034 -14.0781C0.286034 -13.8541 0.132263 -13.6725 -0.0574296 -13.6725C-0.247123 -13.6725 -0.400899 -13.8541 -0.400899 -14.0781C-0.400899 -14.3022 -0.247123 -14.4838 -0.0574296 -14.4838C0.132263 -14.4838 0.286034 -14.3022 0.286034 -14.0781Z" fill="url(#paint61_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M42.5201 28.7964C42.5201 29.0205 42.3663 29.2021 42.1767 29.2021C41.987 29.2021 41.8332 29.0205 41.8332 28.7964C41.8332 28.5724 41.987 28.3908 42.1767 28.3908C42.3663 28.3908 42.5201 28.5724 42.5201 28.7964Z" fill="url(#paint62_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M60.6145 66.4812C60.6145 66.7053 60.4608 66.8869 60.2711 66.8869C60.0814 66.8869 59.9276 66.7053 59.9276 66.4812C59.9276 66.2572 60.0814 66.0756 60.2711 66.0756C60.4608 66.0756 60.6145 66.2572 60.6145 66.4812Z" fill="url(#paint63_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M68.3998 74.5943C68.3998 74.8184 68.246 75 68.0564 75C67.8667 75 67.7129 74.8184 67.7129 74.5943C67.7129 74.3703 67.8667 74.1887 68.0564 74.1887C68.246 74.1887 68.3998 74.3703 68.3998 74.5943Z" fill="url(#paint64_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M68.3998 58.2483C68.3998 58.4723 68.246 58.6539 68.0564 58.6539C67.8667 58.6539 67.7129 58.4723 67.7129 58.2483C67.7129 58.0242 67.8667 57.8426 68.0564 57.8426C68.246 57.8426 68.3998 58.0242 68.3998 58.2483Z" fill="url(#paint65_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M68.3998 58.2483C68.3998 58.4723 68.246 58.6539 68.0564 58.6539C67.8667 58.6539 67.7129 58.4723 67.7129 58.2483C67.7129 58.0242 67.8667 57.8426 68.0564 57.8426C68.246 57.8426 68.3998 58.0242 68.3998 58.2483Z" fill="url(#paint66_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M124.958 35.1439C124.958 35.3679 124.804 35.5495 124.614 35.5495C124.425 35.5495 124.271 35.3679 124.271 35.1439C124.271 34.9199 124.425 34.7382 124.614 34.7382C124.804 34.7382 124.958 34.9199 124.958 35.1439Z" fill="url(#paint67_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M78.9329 50.255C78.9329 50.4791 78.7791 50.6607 78.5894 50.6607C78.3997 50.6607 78.246 50.4791 78.246 50.255C78.246 50.031 78.3997 49.8494 78.5894 49.8494C78.7791 49.8494 78.9329 50.031 78.9329 50.255Z" fill="url(#paint68_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M83.5125 47.4308C83.5125 47.6548 83.3587 47.8364 83.169 47.8364C82.9793 47.8364 82.8256 47.6548 82.8256 47.4308C82.8256 47.2067 82.9793 47.0251 83.169 47.0251C83.3587 47.0251 83.5125 47.2067 83.5125 47.4308Z" fill="url(#paint69_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M97.2513 38.6262C97.2513 38.8503 97.0975 39.0319 96.9078 39.0319C96.7181 39.0319 96.5643 38.8503 96.5643 38.6262C96.5643 38.4022 96.7181 38.2206 96.9078 38.2206C97.0975 38.2206 97.2513 38.4022 97.2513 38.6262Z" fill="url(#paint70_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M101.831 41.3306C101.831 41.5547 101.677 41.7363 101.487 41.7363C101.298 41.7363 101.144 41.5547 101.144 41.3306C101.144 41.1066 101.298 40.925 101.487 40.925C101.677 40.925 101.831 41.1066 101.831 41.3306Z" fill="url(#paint71_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M108.7 33.2175C108.7 33.4415 108.546 33.6232 108.357 33.6232C108.167 33.6232 108.013 33.4415 108.013 33.2175C108.013 32.9935 108.167 32.8119 108.357 32.8119C108.546 32.8119 108.7 32.9935 108.7 33.2175Z" fill="url(#paint72_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M90.3819 74.5943C90.3819 74.8184 90.2281 75 90.0384 75C89.8487 75 89.6949 74.8184 89.6949 74.5943C89.6949 74.3703 89.8487 74.1887 90.0384 74.1887C90.2281 74.1887 90.3819 74.3703 90.3819 74.5943Z" fill="url(#paint73_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M17.1084 74.5943C17.1084 74.8184 16.9546 75 16.7649 75C16.5752 75 16.4214 74.8184 16.4214 74.5943C16.4214 74.3703 16.5752 74.1887 16.7649 74.1887C16.9546 74.1887 17.1084 74.3703 17.1084 74.5943Z" fill="url(#paint74_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M33.2385 66.0696C33.2385 66.2936 33.0847 66.4752 32.895 66.4752C32.7053 66.4752 32.5515 66.2936 32.5515 66.0696C32.5515 65.8456 32.7053 65.6639 32.895 65.6639C33.0847 65.6639 33.2385 65.8456 33.2385 66.0696Z" fill="url(#paint75_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-36.2674 29.9123C-36.2674 30.1364 -36.4212 30.318 -36.6109 30.318C-36.8006 30.318 -36.9544 30.1364 -36.9544 29.9123C-36.9544 29.6883 -36.8006 29.5067 -36.6109 29.5067C-36.4212 29.5067 -36.2674 29.6883 -36.2674 29.9123Z" fill="url(#paint76_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M388.284 44.8463C388.284 45.0703 388.438 45.2519 388.628 45.2519C388.818 45.2519 388.971 45.0703 388.971 44.8463C388.971 44.6223 388.818 44.4406 388.628 44.4406C388.438 44.4406 388.284 44.6223 388.284 44.8463Z" fill="url(#paint77_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M376.835 55.6638C376.835 55.8878 376.989 56.0694 377.179 56.0694C377.369 56.0694 377.522 55.8878 377.522 55.6638C377.522 55.4397 377.369 55.2581 377.179 55.2581C376.989 55.2581 376.835 55.4397 376.835 55.6638Z" fill="url(#paint78_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M360.807 39.4376C360.807 39.6616 360.961 39.8432 361.15 39.8432C361.34 39.8432 361.494 39.6616 361.494 39.4376C361.494 39.2135 361.34 39.0319 361.15 39.0319C360.961 39.0319 360.807 39.2135 360.807 39.4376Z" fill="url(#paint79_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M352.742 62.3647C352.742 62.5888 352.896 62.7704 353.085 62.7704C353.275 62.7704 353.429 62.5888 353.429 62.3647C353.429 62.1407 353.275 61.9591 353.085 61.9591C352.896 61.9591 352.742 62.1407 352.742 62.3647Z" fill="url(#paint80_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M344.957 70.4779C344.957 70.7019 345.11 70.8835 345.3 70.8835C345.49 70.8835 345.643 70.7019 345.643 70.4779C345.643 70.2538 345.49 70.0722 345.3 70.0722C345.11 70.0722 344.957 70.2538 344.957 70.4779Z" fill="url(#paint81_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M344.957 62.3647C344.957 62.5888 345.11 62.7704 345.3 62.7704C345.49 62.7704 345.643 62.5888 345.643 62.3647C345.643 62.1407 345.49 61.9591 345.3 61.9591C345.11 61.9591 344.957 62.1407 344.957 62.3647Z" fill="url(#paint82_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M344.957 62.3647C344.957 62.5888 345.11 62.7704 345.3 62.7704C345.49 62.7704 345.643 62.5888 345.643 62.3647C345.643 62.1407 345.49 61.9591 345.3 61.9591C345.11 61.9591 344.957 62.1407 344.957 62.3647Z" fill="url(#paint83_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M291.884 42.1419C291.884 42.366 292.038 42.5476 292.227 42.5476C292.417 42.5476 292.571 42.366 292.571 42.1419C292.571 41.9179 292.417 41.7363 292.227 41.7363C292.038 41.7363 291.884 41.9179 291.884 42.1419Z" fill="url(#paint84_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M280.634 33.7891C280.634 34.0131 280.787 34.1947 280.977 34.1947C281.167 34.1947 281.32 34.0131 281.32 33.7891C281.32 33.565 281.167 33.3834 280.977 33.3834C280.787 33.3834 280.634 33.565 280.634 33.7891Z" fill="url(#paint85_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M296.464 58.3681C296.464 58.5922 296.617 58.7738 296.807 58.7738C296.997 58.7738 297.151 58.5922 297.151 58.3681C297.151 58.1441 296.997 57.9625 296.807 57.9625C296.617 57.9625 296.464 58.1441 296.464 58.3681Z" fill="url(#paint86_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M337.909 50.255C337.909 50.4791 338.063 50.6607 338.252 50.6607C338.442 50.6607 338.596 50.4791 338.596 50.255C338.596 50.031 338.442 49.8494 338.252 49.8494C338.063 49.8494 337.909 50.031 337.909 50.255Z" fill="url(#paint87_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M333.329 55.6638C333.329 55.8878 333.483 56.0694 333.673 56.0694C333.862 56.0694 334.016 55.8878 334.016 55.6638C334.016 55.4397 333.862 55.2581 333.673 55.2581C333.483 55.2581 333.329 55.4397 333.329 55.6638Z" fill="url(#paint88_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M313.637 61.0725C313.637 61.2965 313.791 61.4782 313.981 61.4782C314.17 61.4782 314.324 61.2965 314.324 61.0725C314.324 60.8485 314.17 60.6668 313.981 60.6668C313.791 60.6668 313.637 60.8485 313.637 61.0725Z" fill="url(#paint89_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M336.535 34.2993C336.535 34.5233 336.689 34.7049 336.879 34.7049C337.068 34.7049 337.222 34.5233 337.222 34.2993C337.222 34.0752 337.068 33.8936 336.879 33.8936C336.689 33.8936 336.535 34.0752 336.535 34.2993Z" fill="url(#paint90_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M319.591 38.6262C319.591 38.8503 319.744 39.0319 319.934 39.0319C320.124 39.0319 320.277 38.8503 320.277 38.6262C320.277 38.4022 320.124 38.2206 319.934 38.2206C319.744 38.2206 319.591 38.4022 319.591 38.6262Z" fill="url(#paint91_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M315.011 41.3306C315.011 41.5547 315.165 41.7363 315.354 41.7363C315.544 41.7363 315.698 41.5547 315.698 41.3306C315.698 41.1066 315.544 40.925 315.354 40.925C315.165 40.925 315.011 41.1066 315.011 41.3306Z" fill="url(#paint92_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M315.011 35.9219C315.011 36.1459 315.165 36.3275 315.354 36.3275C315.544 36.3275 315.698 36.1459 315.698 35.9219C315.698 35.6978 315.544 35.5162 315.354 35.5162C315.165 35.5162 315.011 35.6978 315.011 35.9219Z" fill="url(#paint93_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M268.528 35.9219C268.528 36.1459 268.682 36.3275 268.872 36.3275C269.061 36.3275 269.215 36.1459 269.215 35.9219C269.215 35.6978 269.061 35.5162 268.872 35.5162C268.682 35.5162 268.528 35.6978 268.528 35.9219Z" fill="url(#paint94_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M326.46 74.5943C326.46 74.8184 326.614 75 326.803 75C326.993 75 327.147 74.8184 327.147 74.5943C327.147 74.3703 326.993 74.1887 326.803 74.1887C326.614 74.1887 326.46 74.3703 326.46 74.5943Z" fill="url(#paint95_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M399.733 74.5943C399.733 74.8184 399.887 75 400.077 75C400.267 75 400.42 74.8184 400.42 74.5943C400.42 74.3703 400.267 74.1887 400.077 74.1887C399.887 74.1887 399.733 74.3703 399.733 74.5943Z" fill="url(#paint96_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M390.574 66.4812C390.574 66.7053 390.728 66.8869 390.918 66.8869C391.107 66.8869 391.261 66.7053 391.261 66.4812C391.261 66.2572 391.107 66.0756 390.918 66.0756C390.728 66.0756 390.574 66.2572 390.574 66.4812Z" fill="url(#paint97_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M404.313 34.0288C404.313 34.2529 404.467 34.4345 404.657 34.4345C404.846 34.4345 405 34.2529 405 34.0288C405 33.8048 404.846 33.6232 404.657 33.6232C404.467 33.6232 404.313 33.8048 404.313 34.0288Z" fill="url(#paint98_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M401.794 39.4376C401.794 39.6616 401.948 39.8432 402.138 39.8432C402.327 39.8432 402.481 39.6616 402.481 39.4376C402.481 39.2135 402.327 39.0319 402.138 39.0319C401.948 39.0319 401.794 39.2135 401.794 39.4376Z" fill="url(#paint99_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M72.4165 29.7638C72.4165 29.9879 72.2627 30.1695 72.0731 30.1695C71.8834 30.1695 71.7296 29.9879 71.7296 29.7638C71.7296 29.5398 71.8834 29.3582 72.0731 29.3582C72.2627 29.3582 72.4165 29.5398 72.4165 29.7638Z" fill="url(#paint100_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M292.703 27.6313C292.703 27.8553 292.857 28.0369 293.047 28.0369C293.236 28.0369 293.39 27.8553 293.39 27.6313C293.39 27.4073 293.236 27.2256 293.047 27.2256C292.857 27.2256 292.703 27.4073 292.703 27.6313Z" fill="url(#paint101_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M48.1971 65.3375C48.1971 65.5616 48.0434 65.7432 47.8537 65.7432C47.664 65.7432 47.5102 65.5616 47.5102 65.3375C47.5102 65.1135 47.664 64.9319 47.8537 64.9319C48.0434 64.9319 48.1971 65.1135 48.1971 65.3375Z" fill="url(#paint102_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M35.5492 32.9129C35.5492 33.137 35.3955 33.3186 35.2058 33.3186C35.0161 33.3186 34.8623 33.137 34.8623 32.9129C34.8623 32.6889 35.0161 32.5073 35.2058 32.5073C35.3955 32.5073 35.5492 32.6889 35.5492 32.9129Z" fill="url(#paint103_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M22.7821 61.5414C22.7821 61.7655 22.6284 61.9471 22.4387 61.9471C22.249 61.9471 22.0952 61.7655 22.0952 61.5414C22.0952 61.3174 22.249 61.1358 22.4387 61.1358C22.6284 61.1358 22.7821 61.3174 22.7821 61.5414Z" fill="url(#paint104_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M98.3454 53.6801C98.3454 53.9041 98.1917 54.0857 98.002 54.0857C97.8123 54.0857 97.6585 53.9041 97.6585 53.6801C97.6585 53.456 97.8123 53.2744 98.002 53.2744C98.1917 53.2744 98.3454 53.456 98.3454 53.6801Z" fill="url(#paint105_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M149.356 39.2604C149.356 39.4844 149.202 39.666 149.012 39.666C148.823 39.666 148.669 39.4844 148.669 39.2604C148.669 39.0363 148.823 38.8547 149.012 38.8547C149.202 38.8547 149.356 39.0363 149.356 39.2604Z" fill="url(#paint106_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M152.841 35.1439C152.841 35.3679 152.688 35.5495 152.498 35.5495C152.308 35.5495 152.154 35.3679 152.154 35.1439C152.154 34.9199 152.308 34.7382 152.498 34.7382C152.688 34.7382 152.841 34.9199 152.841 35.1439Z" fill="url(#paint107_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M201.638 35.1439C201.638 35.3679 201.484 35.5495 201.294 35.5495C201.104 35.5495 200.951 35.3679 200.951 35.1439C200.951 34.9199 201.104 34.7382 201.294 34.7382C201.484 34.7382 201.638 34.9199 201.638 35.1439Z" fill="url(#paint108_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M226.036 31.0274C226.036 31.2514 225.882 31.4331 225.692 31.4331C225.503 31.4331 225.349 31.2514 225.349 31.0274C225.349 30.8034 225.503 30.6217 225.692 30.6217C225.882 30.6217 226.036 30.8034 226.036 31.0274Z" fill="url(#paint109_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M233.007 35.1439C233.007 35.3679 232.853 35.5495 232.663 35.5495C232.473 35.5495 232.32 35.3679 232.32 35.1439C232.32 34.9199 232.473 34.7382 232.663 34.7382C232.853 34.7382 233.007 34.9199 233.007 35.1439Z" fill="url(#paint110_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-32.782 34.0288C-32.782 34.2529 -32.9358 34.4345 -33.1255 34.4345C-33.3151 34.4345 -33.4689 34.2529 -33.4689 34.0288C-33.4689 33.8048 -33.3151 33.6232 -33.1255 33.6232C-32.9358 33.6232 -32.782 33.8048 -32.782 34.0288Z" fill="url(#paint111_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-37.3131 66.5491C-37.3131 66.7731 -37.4668 66.9547 -37.6565 66.9547C-37.8462 66.9547 -38 66.7731 -38 66.5491C-38 66.3251 -37.8462 66.1434 -37.6565 66.1434C-37.4668 66.1434 -37.3131 66.3251 -37.3131 66.5491Z" fill="url(#paint112_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M140.532 61.7129C140.532 61.937 140.378 62.1186 140.189 62.1186C139.999 62.1186 139.845 61.937 139.845 61.7129C139.845 61.4889 139.999 61.3073 140.189 61.3073C140.378 61.3073 140.532 61.4889 140.532 61.7129Z" fill="url(#paint113_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M164.93 65.8294C164.93 66.0535 164.776 66.2351 164.587 66.2351C164.397 66.2351 164.243 66.0535 164.243 65.8294C164.243 65.6054 164.397 65.4238 164.587 65.4238C164.776 65.4238 164.93 65.6054 164.93 65.8294Z" fill="url(#paint114_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M168.416 61.7129C168.416 61.937 168.262 62.1186 168.072 62.1186C167.882 62.1186 167.729 61.937 167.729 61.7129C167.729 61.4889 167.882 61.3073 168.072 61.3073C168.262 61.3073 168.416 61.4889 168.416 61.7129Z" fill="url(#paint115_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M217.212 61.7129C217.212 61.937 217.058 62.1186 216.868 62.1186C216.679 62.1186 216.525 61.937 216.525 61.7129C216.525 61.4889 216.679 61.3073 216.868 61.3073C217.058 61.3073 217.212 61.4889 217.212 61.7129Z" fill="url(#paint116_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M241.61 57.5964C241.61 57.8205 241.456 58.0021 241.266 58.0021C241.077 58.0021 240.923 57.8205 240.923 57.5964C240.923 57.3724 241.077 57.1908 241.266 57.1908C241.456 57.1908 241.61 57.3724 241.61 57.5964Z" fill="url(#paint117_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M248.581 61.7129C248.581 61.937 248.427 62.1186 248.237 62.1186C248.048 62.1186 247.894 61.937 247.894 61.7129C247.894 61.4889 248.048 61.3073 248.237 61.3073C248.427 61.3073 248.581 61.4889 248.581 61.7129Z" fill="url(#paint118_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M180.872 39.2314C180.872 39.4555 180.718 39.6371 180.528 39.6371C180.339 39.6371 180.185 39.4555 180.185 39.2314C180.185 39.0074 180.339 38.8258 180.528 38.8258C180.718 38.8258 180.872 39.0074 180.872 39.2314Z" fill="url(#paint119_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M-5.3877 56.2004C-5.3877 56.4244 -5.54148 56.606 -5.73117 56.606C-5.92087 56.606 -6.07465 56.4244 -6.07465 56.2004C-6.07465 55.9764 -5.92087 55.7947 -5.73117 55.7947C-5.54148 55.7947 -5.3877 55.9764 -5.3877 56.2004Z" fill="url(#paint120_linear_50_2588)" fill-opacity="0.7"/>
+<path d="M0.286034 43.1475C0.286034 43.3715 0.132263 43.5532 -0.0574296 43.5532C-0.247123 43.5532 -0.400899 43.3715 -0.400899 43.1475C-0.400899 42.9235 -0.247123 42.7418 -0.0574296 42.7418C0.132263 42.7418 0.286034 42.9235 0.286034 43.1475Z" fill="url(#paint121_linear_50_2588)" fill-opacity="0.7"/>
+<defs>
+<filter id="filter0_f_50_2588" x="-114.767" y="43" width="579.973" height="455.658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="30" result="effect1_foregroundBlur_50_2588"/>
+</filter>
+<linearGradient id="paint0_linear_50_2588" x1="175.22" y1="103" x2="175.22" y2="438.658" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="0.653751" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="0.699927" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_50_2588" x1="174.295" y1="120.496" x2="174.295" y2="456.155" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6893"/>
+<stop offset="0.0582362" stop-color="#F02E65"/>
+<stop offset="0.485307" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="0.619552" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="0.918726" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint33_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint34_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint35_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint36_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint37_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint38_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint39_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint40_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint41_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint42_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint43_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint44_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint45_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint46_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint47_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint48_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint49_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint50_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint51_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint52_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint53_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint54_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint55_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint56_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint57_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint58_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint59_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint60_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint61_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint62_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint63_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint64_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint65_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint66_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint67_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint68_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint69_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint70_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint71_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint72_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint73_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint74_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint75_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint76_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint77_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint78_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint79_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint80_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint81_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint82_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint83_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint84_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint85_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint86_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint87_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint88_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint89_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint90_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint91_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint92_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint93_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint94_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint95_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint96_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint97_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint98_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint99_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint100_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint101_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint102_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint103_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint104_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint105_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint106_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint107_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint108_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint109_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint110_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint111_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint112_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint113_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint114_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint115_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint116_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint117_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint118_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint119_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint120_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint121_linear_50_2588" x1="208.421" y1="-23.6025" x2="208.421" y2="181.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/lib/images/login/cloud-bg.svg

@@ -0,0 +1,632 @@
+<svg width="722" height="821" viewBox="0 0 722 821" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_23_6705)">
+<rect width="719" height="821" fill="#1B1B28"/>
+<g filter="url(#filter0_f_23_6705)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M721 386.476C721.659 382.037 722 377.5 722 372.889C722 319.379 676.109 276 619.5 276C578.826 276 543.685 298.395 527.124 330.851C518.094 334.195 509.689 338.715 502.119 344.212C495.538 320.2 472.46 302.467 445 302.467C416.429 302.467 392.602 321.663 387.165 347.155C371.536 338.574 353.375 333.661 334 333.661C319.557 333.661 305.789 336.391 293.242 341.335C277.485 304.681 239.435 278.836 195 278.836C150.439 278.836 112.3 304.828 96.6246 341.647C84.626 334.779 70.5515 330.825 55.5 330.825C11.5934 330.825 -24 364.47 -24 405.973C-24 428 -13.9739 447.814 2 461.559V794H721V386.476Z" fill="url(#paint0_linear_23_6705)" fill-opacity="0.28"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M718 380.747C708.6 336.405 667.177 303 617.5 303C582.258 303 551.17 319.812 532.723 345.414C521.282 349.645 510.739 355.563 501.436 362.842C490.847 344.47 470.216 332 446.5 332C427.667 332 410.78 339.863 399.321 352.302C382.716 343.817 363.704 339 343.5 339C321.718 339 301.321 344.599 283.833 354.356C265.279 325.28 231.542 305.836 193 305.836C148.439 305.836 110.3 331.828 94.6246 368.647C82.626 361.779 68.5515 357.825 53.5 357.825C9.59336 357.825 -26 391.47 -26 432.973C-26 455 -15.9739 474.814 0 488.559V821H718V380.747Z" fill="url(#paint1_linear_23_6705)"/>
+<path d="M130.686 17.4235C130.686 17.7692 130.437 18.0494 130.129 18.0494C129.821 18.0494 129.571 17.7692 129.571 17.4235C129.571 17.0779 129.821 16.7976 130.129 16.7976C130.437 16.7976 130.686 17.0779 130.686 17.4235Z" fill="url(#paint2_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M160.054 75.5658C160.054 75.9114 159.804 76.1916 159.496 76.1916C159.189 76.1916 158.939 75.9114 158.939 75.5658C158.939 75.2201 159.189 74.9399 159.496 74.9399C159.804 74.9399 160.054 75.2201 160.054 75.5658Z" fill="url(#paint3_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M172.69 88.0831C172.69 88.4288 172.44 88.709 172.132 88.709C171.824 88.709 171.575 88.4288 171.575 88.0831C171.575 87.7375 171.824 87.4573 172.132 87.4573C172.44 87.4573 172.69 87.7375 172.69 88.0831Z" fill="url(#paint4_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M172.69 62.8635C172.69 63.2091 172.44 63.4893 172.132 63.4893C171.824 63.4893 171.575 63.2091 171.575 62.8635C171.575 62.5178 171.824 62.2376 172.132 62.2376C172.44 62.2376 172.69 62.5178 172.69 62.8635Z" fill="url(#paint5_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M172.69 62.8635C172.69 63.2091 172.44 63.4893 172.132 63.4893C171.824 63.4893 171.575 63.2091 171.575 62.8635C171.575 62.5178 171.824 62.2376 172.132 62.2376C172.44 62.2376 172.69 62.5178 172.69 62.8635Z" fill="url(#paint6_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M264.485 27.2167C264.485 27.5624 264.235 27.8426 263.927 27.8426C263.619 27.8426 263.37 27.5624 263.37 27.2167C263.37 26.8711 263.619 26.5909 263.927 26.5909C264.235 26.5909 264.485 26.8711 264.485 27.2167Z" fill="url(#paint7_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M189.785 50.5311C189.785 50.8767 189.535 51.1569 189.228 51.1569C188.92 51.1569 188.67 50.8767 188.67 50.5311C188.67 50.1854 188.92 49.9052 189.228 49.9052C189.535 49.9052 189.785 50.1854 189.785 50.5311Z" fill="url(#paint8_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M197.218 46.1737C197.218 46.5193 196.968 46.7995 196.66 46.7995C196.352 46.7995 196.103 46.5193 196.103 46.1737C196.103 45.828 196.352 45.5478 196.66 45.5478C196.968 45.5478 197.218 45.828 197.218 46.1737Z" fill="url(#paint9_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M219.516 32.5895C219.516 32.9352 219.267 33.2154 218.959 33.2154C218.651 33.2154 218.401 32.9352 218.401 32.5895C218.401 32.2439 218.651 31.9636 218.959 31.9636C219.267 31.9636 219.516 32.2439 219.516 32.5895Z" fill="url(#paint10_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M226.949 36.762C226.949 37.1076 226.699 37.3878 226.392 37.3878C226.084 37.3878 225.834 37.1076 225.834 36.762C225.834 36.4163 226.084 36.1361 226.392 36.1361C226.699 36.1361 226.949 36.4163 226.949 36.762Z" fill="url(#paint11_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M238.098 24.2446C238.098 24.5903 237.849 24.8705 237.541 24.8705C237.233 24.8705 236.983 24.5903 236.983 24.2446C236.983 23.8989 237.233 23.6187 237.541 23.6187C237.849 23.6187 238.098 23.8989 238.098 24.2446Z" fill="url(#paint12_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M208.367 88.0831C208.367 88.4288 208.117 88.709 207.81 88.709C207.502 88.709 207.252 88.4288 207.252 88.0831C207.252 87.7375 207.502 87.4573 207.81 87.4573C208.117 87.4573 208.367 87.7375 208.367 88.0831Z" fill="url(#paint13_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M89.4423 88.0831C89.4423 88.4288 89.1927 88.709 88.8848 88.709C88.577 88.709 88.3274 88.4288 88.3274 88.0831C88.3274 87.7375 88.577 87.4573 88.8848 87.4573C89.1927 87.4573 89.4423 87.7375 89.4423 88.0831Z" fill="url(#paint14_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M115.622 74.9307C115.622 75.2763 115.372 75.5565 115.064 75.5565C114.756 75.5565 114.507 75.2763 114.507 74.9307C114.507 74.585 114.756 74.3048 115.064 74.3048C115.372 74.3048 115.622 74.585 115.622 74.9307Z" fill="url(#paint15_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M2.81201 19.1452C2.81201 19.4908 2.56242 19.7711 2.25455 19.7711C1.94667 19.7711 1.69709 19.4908 1.69709 19.1452C1.69709 18.7995 1.94667 18.5193 2.25455 18.5193C2.56242 18.5193 2.81201 18.7995 2.81201 19.1452Z" fill="url(#paint16_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M691.87 42.1862C691.87 42.5318 692.12 42.812 692.428 42.812C692.736 42.812 692.985 42.5318 692.985 42.1862C692.985 41.8405 692.736 41.5603 692.428 41.5603C692.12 41.5603 691.87 41.8405 691.87 42.1862Z" fill="url(#paint17_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M673.288 58.876C673.288 59.2216 673.538 59.5018 673.846 59.5018C674.154 59.5018 674.403 59.2216 674.403 58.876C674.403 58.5303 674.154 58.2501 673.846 58.2501C673.538 58.2501 673.288 58.5303 673.288 58.876Z" fill="url(#paint18_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M647.273 33.8412C647.273 34.1869 647.523 34.4671 647.831 34.4671C648.139 34.4671 648.388 34.1869 648.388 33.8412C648.388 33.4956 648.139 33.2154 647.831 33.2154C647.523 33.2154 647.273 33.4956 647.273 33.8412Z" fill="url(#paint19_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M634.184 69.2146C634.184 69.5603 634.433 69.8405 634.741 69.8405C635.049 69.8405 635.299 69.5603 635.299 69.2146C635.299 68.869 635.049 68.5888 634.741 68.5888C634.433 68.5888 634.184 68.869 634.184 69.2146Z" fill="url(#paint20_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M621.548 81.732C621.548 82.0776 621.798 82.3579 622.105 82.3579C622.413 82.3579 622.663 82.0776 622.663 81.732C622.663 81.3863 622.413 81.1061 622.105 81.1061C621.798 81.1061 621.548 81.3863 621.548 81.732Z" fill="url(#paint21_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M621.548 69.2146C621.548 69.5603 621.798 69.8405 622.105 69.8405C622.413 69.8405 622.663 69.5603 622.663 69.2146C622.663 68.869 622.413 68.5888 622.105 68.5888C621.798 68.5888 621.548 68.869 621.548 69.2146Z" fill="url(#paint22_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M621.548 69.2146C621.548 69.5603 621.798 69.8405 622.105 69.8405C622.413 69.8405 622.663 69.5603 622.663 69.2146C622.663 68.869 622.413 68.5888 622.105 68.5888C621.798 68.5888 621.548 68.869 621.548 69.2146Z" fill="url(#paint23_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M535.41 38.0137C535.41 38.3594 535.66 38.6396 535.967 38.6396C536.275 38.6396 536.525 38.3594 536.525 38.0137C536.525 37.668 536.275 37.3878 535.967 37.3878C535.66 37.3878 535.41 37.668 535.41 38.0137Z" fill="url(#paint24_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M517.15 25.1264C517.15 25.4721 517.4 25.7523 517.708 25.7523C518.016 25.7523 518.265 25.4721 518.265 25.1264C518.265 24.7808 518.016 24.5006 517.708 24.5006C517.4 24.5006 517.15 24.7808 517.15 25.1264Z" fill="url(#paint25_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M542.843 63.0484C542.843 63.3941 543.092 63.6743 543.4 63.6743C543.708 63.6743 543.958 63.3941 543.958 63.0484C543.958 62.7028 543.708 62.4226 543.4 62.4226C543.092 62.4226 542.843 62.7028 542.843 63.0484Z" fill="url(#paint26_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M610.11 50.5311C610.11 50.8767 610.359 51.1569 610.667 51.1569C610.975 51.1569 611.224 50.8767 611.224 50.5311C611.224 50.1854 610.975 49.9052 610.667 49.9052C610.359 49.9052 610.11 50.1854 610.11 50.5311Z" fill="url(#paint27_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M602.677 58.876C602.677 59.2216 602.926 59.5018 603.234 59.5018C603.542 59.5018 603.792 59.2216 603.792 58.876C603.792 58.5303 603.542 58.2501 603.234 58.2501C602.926 58.2501 602.677 58.5303 602.677 58.876Z" fill="url(#paint28_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M570.716 67.2209C570.716 67.5665 570.965 67.8467 571.273 67.8467C571.581 67.8467 571.831 67.5665 571.831 67.2209C571.831 66.8752 571.581 66.595 571.273 66.595C570.965 66.595 570.716 66.8752 570.716 67.2209Z" fill="url(#paint29_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M607.88 25.9136C607.88 26.2592 608.129 26.5395 608.437 26.5395C608.745 26.5395 608.995 26.2592 608.995 25.9136C608.995 25.5679 608.745 25.2877 608.437 25.2877C608.129 25.2877 607.88 25.5679 607.88 25.9136Z" fill="url(#paint30_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M580.378 32.5895C580.378 32.9352 580.628 33.2154 580.936 33.2154C581.244 33.2154 581.493 32.9352 581.493 32.5895C581.493 32.2439 581.244 31.9636 580.936 31.9636C580.628 31.9636 580.378 32.2439 580.378 32.5895Z" fill="url(#paint31_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M572.946 36.762C572.946 37.1076 573.195 37.3878 573.503 37.3878C573.811 37.3878 574.06 37.1076 574.06 36.762C574.06 36.4163 573.811 36.1361 573.503 36.1361C573.195 36.1361 572.946 36.4163 572.946 36.762Z" fill="url(#paint32_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M572.946 28.4171C572.946 28.7627 573.195 29.0429 573.503 29.0429C573.811 29.0429 574.06 28.7627 574.06 28.4171C574.06 28.0714 573.811 27.7912 573.503 27.7912C573.195 27.7912 572.946 28.0714 572.946 28.4171Z" fill="url(#paint33_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M497.503 28.4171C497.503 28.7627 497.752 29.0429 498.06 29.0429C498.368 29.0429 498.618 28.7627 498.618 28.4171C498.618 28.0714 498.368 27.7912 498.06 27.7912C497.752 27.7912 497.503 28.0714 497.503 28.4171Z" fill="url(#paint34_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M591.528 88.0831C591.528 88.4288 591.777 88.709 592.085 88.709C592.393 88.709 592.642 88.4288 592.642 88.0831C592.642 87.7375 592.393 87.4573 592.085 87.4573C591.777 87.4573 591.528 87.7375 591.528 88.0831Z" fill="url(#paint35_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M710.452 88.0831C710.452 88.4288 710.702 88.709 711.01 88.709C711.318 88.709 711.567 88.4288 711.567 88.0831C711.567 87.7375 711.318 87.4573 711.01 87.4573C710.702 87.4573 710.452 87.7375 710.452 88.0831Z" fill="url(#paint36_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M695.587 75.5658C695.587 75.9114 695.836 76.1916 696.144 76.1916C696.452 76.1916 696.702 75.9114 696.702 75.5658C696.702 75.2201 696.452 74.9399 696.144 74.9399C695.836 74.9399 695.587 75.2201 695.587 75.5658Z" fill="url(#paint37_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M717.885 25.4963C717.885 25.842 718.135 26.1222 718.443 26.1222C718.75 26.1222 719 25.842 719 25.4963C719 25.1507 718.75 24.8705 718.443 24.8705C718.135 24.8705 717.885 25.1507 717.885 25.4963Z" fill="url(#paint38_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M713.797 33.8412C713.797 34.1869 714.047 34.4671 714.355 34.4671C714.662 34.4671 714.912 34.1869 714.912 33.8412C714.912 33.4956 714.662 33.2154 714.355 33.2154C714.047 33.2154 713.797 33.4956 713.797 33.8412Z" fill="url(#paint39_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M179.209 18.916C179.209 19.2617 178.959 19.5419 178.651 19.5419C178.343 19.5419 178.094 19.2617 178.094 18.916C178.094 18.5704 178.343 18.2902 178.651 18.2902C178.959 18.2902 179.209 18.5704 179.209 18.916Z" fill="url(#paint40_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M536.739 15.6259C536.739 15.9715 536.989 16.2517 537.297 16.2517C537.605 16.2517 537.854 15.9715 537.854 15.6259C537.854 15.2802 537.605 15 537.297 15C536.989 15 536.739 15.2802 536.739 15.6259Z" fill="url(#paint41_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M139.9 73.8012C139.9 74.1468 139.651 74.4271 139.343 74.4271C139.035 74.4271 138.785 74.1468 138.785 73.8012C138.785 73.4555 139.035 73.1753 139.343 73.1753C139.651 73.1753 139.9 73.4555 139.9 73.8012Z" fill="url(#paint42_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M119.372 23.7747C119.372 24.1203 119.123 24.4005 118.815 24.4005C118.507 24.4005 118.257 24.1203 118.257 23.7747C118.257 23.429 118.507 23.1488 118.815 23.1488C119.123 23.1488 119.372 23.429 119.372 23.7747Z" fill="url(#paint43_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M98.6509 67.9444C98.6509 68.2901 98.4013 68.5703 98.0935 68.5703C97.7856 68.5703 97.536 68.2901 97.536 67.9444C97.536 67.5987 97.7856 67.3185 98.0935 67.3185C98.4013 67.3185 98.6509 67.5987 98.6509 67.9444Z" fill="url(#paint44_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M221.292 55.8154C221.292 56.1611 221.042 56.4413 220.735 56.4413C220.427 56.4413 220.177 56.1611 220.177 55.8154C220.177 55.4698 220.427 55.1896 220.735 55.1896C221.042 55.1896 221.292 55.4698 221.292 55.8154Z" fill="url(#paint45_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M304.083 33.5679C304.083 33.9135 303.834 34.1938 303.526 34.1938C303.218 34.1938 302.968 33.9135 302.968 33.5679C302.968 33.2222 303.218 32.942 303.526 32.942C303.834 32.942 304.083 33.2222 304.083 33.5679Z" fill="url(#paint46_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M309.74 27.2167C309.74 27.5624 309.491 27.8426 309.183 27.8426C308.875 27.8426 308.625 27.5624 308.625 27.2167C308.625 26.8711 308.875 26.5909 309.183 26.5909C309.491 26.5909 309.74 26.8711 309.74 27.2167Z" fill="url(#paint47_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M388.938 27.2167C388.938 27.5624 388.688 27.8426 388.38 27.8426C388.072 27.8426 387.823 27.5624 387.823 27.2167C387.823 26.8711 388.072 26.5909 388.38 26.5909C388.688 26.5909 388.938 26.8711 388.938 27.2167Z" fill="url(#paint48_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M428.536 20.8656C428.536 21.2112 428.287 21.4914 427.979 21.4914C427.671 21.4914 427.422 21.2112 427.422 20.8656C427.422 20.5199 427.671 20.2397 427.979 20.2397C428.287 20.2397 428.536 20.5199 428.536 20.8656Z" fill="url(#paint49_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M439.85 27.2167C439.85 27.5624 439.601 27.8426 439.293 27.8426C438.985 27.8426 438.736 27.5624 438.736 27.2167C438.736 26.8711 438.985 26.5909 439.293 26.5909C439.601 26.5909 439.85 26.8711 439.85 27.2167Z" fill="url(#paint50_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M8.46897 25.4963C8.46897 25.842 8.21939 26.1222 7.91151 26.1222C7.60364 26.1222 7.35405 25.842 7.35405 25.4963C7.35405 25.1507 7.60364 24.8705 7.91151 24.8705C8.21939 24.8705 8.46897 25.1507 8.46897 25.4963Z" fill="url(#paint51_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M1.11492 75.6705C1.11492 76.0161 0.865336 76.2963 0.557459 76.2963C0.249583 76.2963 0 76.0161 0 75.6705C0 75.3248 0.249583 75.0446 0.557459 75.0446C0.865336 75.0446 1.11492 75.3248 1.11492 75.6705Z" fill="url(#paint52_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M289.762 68.209C289.762 68.5546 289.512 68.8348 289.204 68.8348C288.897 68.8348 288.647 68.5546 288.647 68.209C288.647 67.8633 288.897 67.5831 289.204 67.5831C289.512 67.5831 289.762 67.8633 289.762 68.209Z" fill="url(#paint53_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M329.361 74.5601C329.361 74.9058 329.111 75.186 328.803 75.186C328.495 75.186 328.246 74.9058 328.246 74.5601C328.246 74.2145 328.495 73.9343 328.803 73.9343C329.111 73.9343 329.361 74.2145 329.361 74.5601Z" fill="url(#paint54_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M335.018 68.209C335.018 68.5546 334.768 68.8348 334.46 68.8348C334.152 68.8348 333.903 68.5546 333.903 68.209C333.903 67.8633 334.152 67.5831 334.46 67.5831C334.768 67.5831 335.018 67.8633 335.018 68.209Z" fill="url(#paint55_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M414.215 68.209C414.215 68.5546 413.966 68.8348 413.658 68.8348C413.35 68.8348 413.1 68.5546 413.1 68.209C413.1 67.8633 413.35 67.5831 413.658 67.5831C413.966 67.5831 414.215 67.8633 414.215 68.209Z" fill="url(#paint56_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M453.814 61.8578C453.814 62.2035 453.564 62.4837 453.256 62.4837C452.949 62.4837 452.699 62.2035 452.699 61.8578C452.699 61.5122 452.949 61.2319 453.256 61.2319C453.564 61.2319 453.814 61.5122 453.814 61.8578Z" fill="url(#paint57_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M465.128 68.209C465.128 68.5546 464.878 68.8348 464.57 68.8348C464.262 68.8348 464.013 68.5546 464.013 68.209C464.013 67.8633 464.262 67.5831 464.57 67.5831C464.878 67.5831 465.128 67.8633 465.128 68.209Z" fill="url(#paint58_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M355.235 33.5232C355.235 33.8689 354.985 34.1491 354.677 34.1491C354.369 34.1491 354.12 33.8689 354.12 33.5232C354.12 33.1776 354.369 32.8974 354.677 32.8974C354.985 32.8974 355.235 33.1776 355.235 33.5232Z" fill="url(#paint59_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M52.9306 59.7039C52.9306 60.0496 52.681 60.3298 52.3731 60.3298C52.0652 60.3298 51.8156 60.0496 51.8156 59.7039C51.8156 59.3582 52.0652 59.078 52.3731 59.078C52.681 59.078 52.9306 59.3582 52.9306 59.7039Z" fill="url(#paint60_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M62.1392 39.5652C62.1392 39.9108 61.8896 40.191 61.5817 40.191C61.2739 40.191 61.0243 39.9108 61.0243 39.5652C61.0243 39.2195 61.2739 38.9393 61.5817 38.9393C61.8896 38.9393 62.1392 39.2195 62.1392 39.5652Z" fill="url(#paint61_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M130.686 105.714C130.686 106.06 130.437 106.34 130.129 106.34C129.821 106.34 129.571 106.06 129.571 105.714C129.571 105.369 129.821 105.089 130.129 105.089C130.437 105.089 130.686 105.369 130.686 105.714Z" fill="url(#paint62_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M160.054 163.857C160.054 164.202 159.804 164.483 159.496 164.483C159.189 164.483 158.939 164.202 158.939 163.857C158.939 163.511 159.189 163.231 159.496 163.231C159.804 163.231 160.054 163.511 160.054 163.857Z" fill="url(#paint63_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M172.69 176.374C172.69 176.72 172.44 177 172.132 177C171.824 177 171.575 176.72 171.575 176.374C171.575 176.028 171.824 175.748 172.132 175.748C172.44 175.748 172.69 176.028 172.69 176.374Z" fill="url(#paint64_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M172.69 151.154C172.69 151.5 172.44 151.78 172.132 151.78C171.824 151.78 171.575 151.5 171.575 151.154C171.575 150.809 171.824 150.529 172.132 150.529C172.44 150.529 172.69 150.809 172.69 151.154Z" fill="url(#paint65_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M172.69 151.154C172.69 151.5 172.44 151.78 172.132 151.78C171.824 151.78 171.575 151.5 171.575 151.154C171.575 150.809 171.824 150.529 172.132 150.529C172.44 150.529 172.69 150.809 172.69 151.154Z" fill="url(#paint66_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M264.485 115.508C264.485 115.853 264.235 116.134 263.927 116.134C263.619 116.134 263.37 115.853 263.37 115.508C263.37 115.162 263.619 114.882 263.927 114.882C264.235 114.882 264.485 115.162 264.485 115.508Z" fill="url(#paint67_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M189.785 138.822C189.785 139.168 189.535 139.448 189.228 139.448C188.92 139.448 188.67 139.168 188.67 138.822C188.67 138.476 188.92 138.196 189.228 138.196C189.535 138.196 189.785 138.476 189.785 138.822Z" fill="url(#paint68_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M197.218 134.465C197.218 134.81 196.968 135.091 196.66 135.091C196.352 135.091 196.103 134.81 196.103 134.465C196.103 134.119 196.352 133.839 196.66 133.839C196.968 133.839 197.218 134.119 197.218 134.465Z" fill="url(#paint69_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M219.516 120.88C219.516 121.226 219.267 121.506 218.959 121.506C218.651 121.506 218.401 121.226 218.401 120.88C218.401 120.535 218.651 120.255 218.959 120.255C219.267 120.255 219.516 120.535 219.516 120.88Z" fill="url(#paint70_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M226.949 125.053C226.949 125.399 226.699 125.679 226.392 125.679C226.084 125.679 225.834 125.399 225.834 125.053C225.834 124.707 226.084 124.427 226.392 124.427C226.699 124.427 226.949 124.707 226.949 125.053Z" fill="url(#paint71_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M238.098 112.536C238.098 112.881 237.849 113.161 237.541 113.161C237.233 113.161 236.983 112.881 236.983 112.536C236.983 112.19 237.233 111.91 237.541 111.91C237.849 111.91 238.098 112.19 238.098 112.536Z" fill="url(#paint72_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M208.367 176.374C208.367 176.72 208.117 177 207.81 177C207.502 177 207.252 176.72 207.252 176.374C207.252 176.028 207.502 175.748 207.81 175.748C208.117 175.748 208.367 176.028 208.367 176.374Z" fill="url(#paint73_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M89.4423 176.374C89.4423 176.72 89.1927 177 88.8848 177C88.577 177 88.3274 176.72 88.3274 176.374C88.3274 176.028 88.577 175.748 88.8848 175.748C89.1927 175.748 89.4423 176.028 89.4423 176.374Z" fill="url(#paint74_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M115.622 163.222C115.622 163.567 115.372 163.848 115.064 163.848C114.756 163.848 114.507 163.567 114.507 163.222C114.507 162.876 114.756 162.596 115.064 162.596C115.372 162.596 115.622 162.876 115.622 163.222Z" fill="url(#paint75_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M2.81201 107.436C2.81201 107.782 2.56242 108.062 2.25455 108.062C1.94667 108.062 1.69709 107.782 1.69709 107.436C1.69709 107.091 1.94667 106.81 2.25455 106.81C2.56242 106.81 2.81201 107.091 2.81201 107.436Z" fill="url(#paint76_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M691.87 130.477C691.87 130.823 692.12 131.103 692.428 131.103C692.736 131.103 692.985 130.823 692.985 130.477C692.985 130.131 692.736 129.851 692.428 129.851C692.12 129.851 691.87 130.131 691.87 130.477Z" fill="url(#paint77_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M673.288 147.167C673.288 147.513 673.538 147.793 673.846 147.793C674.154 147.793 674.403 147.513 674.403 147.167C674.403 146.821 674.154 146.541 673.846 146.541C673.538 146.541 673.288 146.821 673.288 147.167Z" fill="url(#paint78_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M647.273 122.132C647.273 122.478 647.523 122.758 647.831 122.758C648.139 122.758 648.388 122.478 648.388 122.132C648.388 121.787 648.139 121.506 647.831 121.506C647.523 121.506 647.273 121.787 647.273 122.132Z" fill="url(#paint79_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M634.184 157.506C634.184 157.851 634.433 158.131 634.741 158.131C635.049 158.131 635.299 157.851 635.299 157.506C635.299 157.16 635.049 156.88 634.741 156.88C634.433 156.88 634.184 157.16 634.184 157.506Z" fill="url(#paint80_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M621.548 170.023C621.548 170.369 621.798 170.649 622.105 170.649C622.413 170.649 622.663 170.369 622.663 170.023C622.663 169.677 622.413 169.397 622.105 169.397C621.798 169.397 621.548 169.677 621.548 170.023Z" fill="url(#paint81_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M621.548 157.506C621.548 157.851 621.798 158.131 622.105 158.131C622.413 158.131 622.663 157.851 622.663 157.506C622.663 157.16 622.413 156.88 622.105 156.88C621.798 156.88 621.548 157.16 621.548 157.506Z" fill="url(#paint82_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M621.548 157.506C621.548 157.851 621.798 158.131 622.105 158.131C622.413 158.131 622.663 157.851 622.663 157.506C622.663 157.16 622.413 156.88 622.105 156.88C621.798 156.88 621.548 157.16 621.548 157.506Z" fill="url(#paint83_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M535.41 126.305C535.41 126.65 535.66 126.931 535.967 126.931C536.275 126.931 536.525 126.65 536.525 126.305C536.525 125.959 536.275 125.679 535.967 125.679C535.66 125.679 535.41 125.959 535.41 126.305Z" fill="url(#paint84_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M517.15 113.417C517.15 113.763 517.4 114.043 517.708 114.043C518.016 114.043 518.265 113.763 518.265 113.417C518.265 113.072 518.016 112.792 517.708 112.792C517.4 112.792 517.15 113.072 517.15 113.417Z" fill="url(#paint85_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M542.843 151.339C542.843 151.685 543.092 151.965 543.4 151.965C543.708 151.965 543.958 151.685 543.958 151.339C543.958 150.994 543.708 150.714 543.4 150.714C543.092 150.714 542.843 150.994 542.843 151.339Z" fill="url(#paint86_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M610.11 138.822C610.11 139.168 610.359 139.448 610.667 139.448C610.975 139.448 611.224 139.168 611.224 138.822C611.224 138.476 610.975 138.196 610.667 138.196C610.359 138.196 610.11 138.476 610.11 138.822Z" fill="url(#paint87_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M602.677 147.167C602.677 147.513 602.926 147.793 603.234 147.793C603.542 147.793 603.792 147.513 603.792 147.167C603.792 146.821 603.542 146.541 603.234 146.541C602.926 146.541 602.677 146.821 602.677 147.167Z" fill="url(#paint88_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M570.716 155.512C570.716 155.858 570.965 156.138 571.273 156.138C571.581 156.138 571.831 155.858 571.831 155.512C571.831 155.166 571.581 154.886 571.273 154.886C570.965 154.886 570.716 155.166 570.716 155.512Z" fill="url(#paint89_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M607.88 114.205C607.88 114.55 608.129 114.83 608.437 114.83C608.745 114.83 608.995 114.55 608.995 114.205C608.995 113.859 608.745 113.579 608.437 113.579C608.129 113.579 607.88 113.859 607.88 114.205Z" fill="url(#paint90_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M580.378 120.88C580.378 121.226 580.628 121.506 580.936 121.506C581.244 121.506 581.493 121.226 581.493 120.88C581.493 120.535 581.244 120.255 580.936 120.255C580.628 120.255 580.378 120.535 580.378 120.88Z" fill="url(#paint91_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M572.946 125.053C572.946 125.399 573.195 125.679 573.503 125.679C573.811 125.679 574.06 125.399 574.06 125.053C574.06 124.707 573.811 124.427 573.503 124.427C573.195 124.427 572.946 124.707 572.946 125.053Z" fill="url(#paint92_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M572.946 116.708C572.946 117.054 573.195 117.334 573.503 117.334C573.811 117.334 574.06 117.054 574.06 116.708C574.06 116.362 573.811 116.082 573.503 116.082C573.195 116.082 572.946 116.362 572.946 116.708Z" fill="url(#paint93_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M497.503 116.708C497.503 117.054 497.752 117.334 498.06 117.334C498.368 117.334 498.618 117.054 498.618 116.708C498.618 116.362 498.368 116.082 498.06 116.082C497.752 116.082 497.503 116.362 497.503 116.708Z" fill="url(#paint94_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M591.528 176.374C591.528 176.72 591.777 177 592.085 177C592.393 177 592.642 176.72 592.642 176.374C592.642 176.028 592.393 175.748 592.085 175.748C591.777 175.748 591.528 176.028 591.528 176.374Z" fill="url(#paint95_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M710.452 176.374C710.452 176.72 710.702 177 711.01 177C711.318 177 711.567 176.72 711.567 176.374C711.567 176.028 711.318 175.748 711.01 175.748C710.702 175.748 710.452 176.028 710.452 176.374Z" fill="url(#paint96_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M695.587 163.857C695.587 164.202 695.836 164.483 696.144 164.483C696.452 164.483 696.702 164.202 696.702 163.857C696.702 163.511 696.452 163.231 696.144 163.231C695.836 163.231 695.587 163.511 695.587 163.857Z" fill="url(#paint97_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M717.885 113.787C717.885 114.133 718.135 114.413 718.443 114.413C718.75 114.413 719 114.133 719 113.787C719 113.442 718.75 113.161 718.443 113.161C718.135 113.161 717.885 113.442 717.885 113.787Z" fill="url(#paint98_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M713.797 122.132C713.797 122.478 714.047 122.758 714.355 122.758C714.662 122.758 714.912 122.478 714.912 122.132C714.912 121.787 714.662 121.506 714.355 121.506C714.047 121.506 713.797 121.787 713.797 122.132Z" fill="url(#paint99_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M179.209 107.207C179.209 107.553 178.959 107.833 178.651 107.833C178.343 107.833 178.094 107.553 178.094 107.207C178.094 106.861 178.343 106.581 178.651 106.581C178.959 106.581 179.209 106.861 179.209 107.207Z" fill="url(#paint100_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M536.739 103.917C536.739 104.263 536.989 104.543 537.297 104.543C537.605 104.543 537.854 104.263 537.854 103.917C537.854 103.571 537.605 103.291 537.297 103.291C536.989 103.291 536.739 103.571 536.739 103.917Z" fill="url(#paint101_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M139.9 162.092C139.9 162.438 139.651 162.718 139.343 162.718C139.035 162.718 138.785 162.438 138.785 162.092C138.785 161.747 139.035 161.466 139.343 161.466C139.651 161.466 139.9 161.747 139.9 162.092Z" fill="url(#paint102_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M119.372 112.066C119.372 112.411 119.123 112.692 118.815 112.692C118.507 112.692 118.257 112.411 118.257 112.066C118.257 111.72 118.507 111.44 118.815 111.44C119.123 111.44 119.372 111.72 119.372 112.066Z" fill="url(#paint103_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M98.6509 156.235C98.6509 156.581 98.4013 156.861 98.0935 156.861C97.7856 156.861 97.536 156.581 97.536 156.235C97.536 155.89 97.7856 155.61 98.0935 155.61C98.4013 155.61 98.6509 155.89 98.6509 156.235Z" fill="url(#paint104_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M221.292 144.106C221.292 144.452 221.042 144.732 220.735 144.732C220.427 144.732 220.177 144.452 220.177 144.106C220.177 143.761 220.427 143.481 220.735 143.481C221.042 143.481 221.292 143.761 221.292 144.106Z" fill="url(#paint105_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M304.083 121.859C304.083 122.205 303.834 122.485 303.526 122.485C303.218 122.485 302.968 122.205 302.968 121.859C302.968 121.513 303.218 121.233 303.526 121.233C303.834 121.233 304.083 121.513 304.083 121.859Z" fill="url(#paint106_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M309.74 115.508C309.74 115.853 309.491 116.134 309.183 116.134C308.875 116.134 308.625 115.853 308.625 115.508C308.625 115.162 308.875 114.882 309.183 114.882C309.491 114.882 309.74 115.162 309.74 115.508Z" fill="url(#paint107_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M388.938 115.508C388.938 115.853 388.688 116.134 388.38 116.134C388.072 116.134 387.823 115.853 387.823 115.508C387.823 115.162 388.072 114.882 388.38 114.882C388.688 114.882 388.938 115.162 388.938 115.508Z" fill="url(#paint108_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M428.536 109.157C428.536 109.502 428.287 109.782 427.979 109.782C427.671 109.782 427.422 109.502 427.422 109.157C427.422 108.811 427.671 108.531 427.979 108.531C428.287 108.531 428.536 108.811 428.536 109.157Z" fill="url(#paint109_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M439.85 115.508C439.85 115.853 439.601 116.134 439.293 116.134C438.985 116.134 438.736 115.853 438.736 115.508C438.736 115.162 438.985 114.882 439.293 114.882C439.601 114.882 439.85 115.162 439.85 115.508Z" fill="url(#paint110_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M8.46897 113.787C8.46897 114.133 8.21939 114.413 7.91151 114.413C7.60364 114.413 7.35405 114.133 7.35405 113.787C7.35405 113.442 7.60364 113.161 7.91151 113.161C8.21939 113.161 8.46897 113.442 8.46897 113.787Z" fill="url(#paint111_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M1.11492 163.961C1.11492 164.307 0.865336 164.587 0.557459 164.587C0.249583 164.587 0 164.307 0 163.961C0 163.616 0.249583 163.336 0.557459 163.336C0.865336 163.336 1.11492 163.616 1.11492 163.961Z" fill="url(#paint112_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M289.762 156.5C289.762 156.846 289.512 157.126 289.204 157.126C288.897 157.126 288.647 156.846 288.647 156.5C288.647 156.154 288.897 155.874 289.204 155.874C289.512 155.874 289.762 156.154 289.762 156.5Z" fill="url(#paint113_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M329.361 162.851C329.361 163.197 329.111 163.477 328.803 163.477C328.495 163.477 328.246 163.197 328.246 162.851C328.246 162.505 328.495 162.225 328.803 162.225C329.111 162.225 329.361 162.505 329.361 162.851Z" fill="url(#paint114_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M335.018 156.5C335.018 156.846 334.768 157.126 334.46 157.126C334.152 157.126 333.903 156.846 333.903 156.5C333.903 156.154 334.152 155.874 334.46 155.874C334.768 155.874 335.018 156.154 335.018 156.5Z" fill="url(#paint115_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M414.215 156.5C414.215 156.846 413.966 157.126 413.658 157.126C413.35 157.126 413.1 156.846 413.1 156.5C413.1 156.154 413.35 155.874 413.658 155.874C413.966 155.874 414.215 156.154 414.215 156.5Z" fill="url(#paint116_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M453.814 150.149C453.814 150.494 453.564 150.775 453.256 150.775C452.949 150.775 452.699 150.494 452.699 150.149C452.699 149.803 452.949 149.523 453.256 149.523C453.564 149.523 453.814 149.803 453.814 150.149Z" fill="url(#paint117_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M465.128 156.5C465.128 156.846 464.878 157.126 464.57 157.126C464.262 157.126 464.013 156.846 464.013 156.5C464.013 156.154 464.262 155.874 464.57 155.874C464.878 155.874 465.128 156.154 465.128 156.5Z" fill="url(#paint118_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M355.235 121.814C355.235 122.16 354.985 122.44 354.677 122.44C354.369 122.44 354.12 122.16 354.12 121.814C354.12 121.469 354.369 121.188 354.677 121.188C354.985 121.188 355.235 121.469 355.235 121.814Z" fill="url(#paint119_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M52.9306 147.995C52.9306 148.341 52.681 148.621 52.3731 148.621C52.0652 148.621 51.8156 148.341 51.8156 147.995C51.8156 147.649 52.0652 147.369 52.3731 147.369C52.681 147.369 52.9306 147.649 52.9306 147.995Z" fill="url(#paint120_linear_23_6705)" fill-opacity="0.7"/>
+<path d="M62.1392 127.856C62.1392 128.202 61.8896 128.482 61.5817 128.482C61.2739 128.482 61.0243 128.202 61.0243 127.856C61.0243 127.51 61.2739 127.23 61.5817 127.23C61.8896 127.23 62.1392 127.51 62.1392 127.856Z" fill="url(#paint121_linear_23_6705)" fill-opacity="0.7"/>
+</g>
+<defs>
+<filter id="filter0_f_23_6705" x="-84" y="216" width="866" height="638" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="30" result="effect1_foregroundBlur_23_6705"/>
+</filter>
+<linearGradient id="paint0_linear_23_6705" x1="349" y1="276" x2="349" y2="794" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="0.653751" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="0.699927" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_23_6705" x1="347" y1="303" x2="347" y2="821" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6893"/>
+<stop offset="0.0582362" stop-color="#F02E65"/>
+<stop offset="0.653751" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="0.699927" stop-color="#F02E65" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint33_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint34_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint35_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint36_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint37_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint38_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint39_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint40_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint41_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint42_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint43_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint44_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint45_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint46_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint47_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint48_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint49_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint50_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint51_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint52_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint53_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint54_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint55_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint56_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint57_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint58_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint59_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint60_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint61_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint62_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint63_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint64_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint65_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint66_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint67_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint68_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint69_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint70_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint71_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint72_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint73_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint74_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint75_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint76_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint77_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint78_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint79_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint80_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint81_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint82_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint83_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint84_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint85_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint86_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint87_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint88_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint89_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint90_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint91_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint92_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint93_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint94_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint95_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint96_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint97_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint98_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint99_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint100_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint101_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint102_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint103_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint104_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint105_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint106_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint107_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint108_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint109_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint110_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint111_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint112_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint113_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint114_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint115_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint116_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint117_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint118_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint119_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint120_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint121_linear_23_6705" x1="399.947" y1="24.8705" x2="399.947" y2="341.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_23_6705">
+<rect width="722" height="821" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/lib/layout/header.svelte

@@ -16,6 +16,7 @@
     import { newOrgModal, organization, organizationList } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
+    import { isCloud } from '$lib/system';
     import { slide } from 'svelte/transition';
 
     let showDropdown = false;
@@ -47,6 +48,17 @@
     $: if (showDropdown) {
         trackEvent('click_menu_dropdown');
     }
+
+    const slideFade: typeof slide = (node, options) => {
+        const slideTrans = slide(node, options);
+        return {
+            ...slideTrans,
+            css: (t, u) => `
+            ${slideTrans.css(t, u)};
+            opacity: ${t};
+			`
+        };
+    };
 </script>
 
 <svelte:window on:click={onBlur} />
@@ -107,7 +119,7 @@
                 {#if showDropdown}
                     <div
                         class="drop is-no-arrow is-block-end is-inline-end"
-                        transition:slide={{ duration: 100 }}>
+                        transition:slideFade={{ duration: 150 }}>
                         {#if $organizationList?.total}
                             <section class="drop-section u-overflow-y-auto u-max-height-200">
                                 <ul class="drop-list">
@@ -134,7 +146,7 @@
                                 <DropListLink
                                     href={`${base}/console/account`}
                                     on:click={() => (showDropdown = false)}>
-                                    Your Account
+                                    Your account
                                 </DropListLink>
                                 <DropListItem
                                     icon="logout-right"
@@ -142,7 +154,7 @@
                                         showDropdown = false;
                                         logout();
                                     }}>
-                                    Sign Out
+                                    Sign out
                                 </DropListItem>
                             </ul>
                         </section>
@@ -195,9 +207,81 @@
                                 </li>
                             </ul>
                         </section>
+                        {#if isCloud}
+                            <section class="drop-section">
+                                <a
+                                    class="claim"
+                                    title="Gradient Border"
+                                    href="/card"
+                                    data-sveltekit-reload>
+                                    Claim your Cloud card
+                                </a>
+                            </section>
+                        {/if}
                     </div>
                 {/if}
             </div>
         {/if}
     </nav>
 </div>
+
+<style lang="scss">
+    .claim {
+        display: block;
+        background-image: linear-gradient(90deg, #fd7f34, #bd155b);
+
+        padding: 0.6875rem 0.625rem;
+        position: relative;
+        z-index: 0;
+        border-radius: 0.5rem;
+        text-align: center;
+        width: 100%;
+
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 150%;
+
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+
+        color: #ffffff;
+
+        transition: 150ms ease;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: -1px;
+            top: -1px;
+            width: calc(100% + 2px);
+            height: calc(100% + 2px);
+            background: linear-gradient(
+                113.48deg,
+                #3b3b4eaa -15.8%,
+                rgba(255, 255, 255, 0.7) 27.72%,
+                #3b3b4eaa 109.47%
+            );
+            z-index: -2;
+            border-radius: 0.3125rem;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(180deg, #1b1b28 0%, #272739 62.73%, #c81b4c 136.87%);
+            z-index: -1;
+
+            border-radius: 0.25rem;
+        }
+
+        &:hover {
+            opacity: 0.75;
+        }
+    }
+</style>

src/lib/layout/unauthenticated.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-    import AppwriteLogo from '$lib/images/appwrite.svg';
-    import LoginLight from '$lib/images/login/login-light-mode.svg';
-    import LoginDark from '$lib/images/login/login-dark-mode.svg';
-    import { app } from '$lib/stores/app';
     import { base } from '$app/paths';
+    import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
+    import AppwriteLogo from '$lib/images/appwrite.svg';
+    import Cloud1 from '$lib/images/login/cloud-1.svg';
+    import Cloud2 from '$lib/images/login/cloud-2.svg';
+    import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
+    import AppwriteCloudBgMobile from '$lib/images/login/cloud-bg-mobile.svg';
+    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    import LoginLight from '$lib/images/login/login-light-mode.svg';
+    import { app } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
+    import { isCloud } from '$lib/system';
+    import { onDestroy } from 'svelte';
 
     export let imgLight = LoginLight;
     export let imgDark = LoginDark;
@@ -22,60 +29,148 @@
         'kotlin',
         'swift'
     ];
+
+    let innerWidth = 0;
+    $: isMobile = innerWidth < 768;
+
+    const prevTheme = $app.theme;
+    $: if (isMobile && isCloud) {
+        $app.theme = 'dark';
+    } else {
+        $app.theme = prevTheme;
+    }
+
+    onDestroy(() => {
+        $app.theme = prevTheme;
+    });
 </script>
 
-<main class="grid-1-1 is-full-page" id="main">
-    <section class="grid-1-1-col-1 u-flex u-flex-vertical">
-        <div
-            class="container u-margin-block-start-20"
-            style="--p-container-max-size: var(--container-size-medium);">
-            <a href={user ? '/console' : '/'}>
-                <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
+<svelte:window bind:innerWidth />
+
+<main class="grid-1-1 is-full-page" class:main-cloud={isCloud} id="main">
+    {#if isCloud}
+        <section
+            class="cloud-section grid-1-1-col-1 u-flex u-flex-vertical u-overflow-hidden"
+            style:--url={`url(${AppwriteCloudBg})`}>
+            <a class="logo" href={user ? '/console' : '/'}>
+                <img
+                    src={AppwriteCloudLogo}
+                    width="196"
+                    height="47"
+                    class="u-block"
+                    alt="Appwrite" />
             </a>
-        </div>
 
-        <div class="u-margin-block-start-auto" />
+            <div class="header">
+                <p>Cloud is Live</p>
+                <img src={Cloud1} alt="" class="cloud-1" />
+                <img src={Cloud2} alt="" class="cloud-2" />
+            </div>
 
-        <div class="u-margin-block-start-auto is-not-mobile" />
-        <div
-            class="container u-margin-block-start-20 is-not-mobile"
-            style="--p-container-max-size: var(--container-size-large);">
-            {#if $app.themeInUse === 'dark'}
-                <img src={imgDark} alt="" class="u-only-dark" />
-            {:else}
-                <img src={imgLight} alt="" class="u-only-light" />
-            {/if}
-        </div>
+            <p class="beta">Now in public <span>beta</span></p>
 
-        <div class="u-margin-block-start-auto" />
+            <div class="u-margin-block-start-auto is-no-mobile" />
+
+            <div
+                class="container u-text-color-light-gray is-no-mobile"
+                style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
+                <p>Integrate with your favourite technologies</p>
+                <ul
+                    class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
+                    {#each technologies as tech}
+                        <li>
+                            <img
+                                src={`${base}/icons/dark/grayscale/${tech}.svg`}
+                                alt={tech}
+                                aria-hidden="true"
+                                aria-label={tech} />
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+            <div class="u-margin-block-start-40" />
+        </section>
+    {:else}
+        <section class="grid-1-1-col-1 u-flex u-flex-vertical">
+            <div
+                class="container u-margin-block-start-20"
+                style="--p-container-max-size: var(--container-size-medium);">
+                <a href={user ? '/console' : '/'}>
+                    <img
+                        src={AppwriteLogo}
+                        width="196"
+                        height="47"
+                        class="u-block"
+                        alt="Appwrite" />
+                </a>
+            </div>
 
-        <div class="u-margin-block-start-auto is-not-mobile" />
-        <div
-            class="container u-color-text-gray is-not-mobile"
-            style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
-            <p>Integrate with your favourite technologies</p>
-            <ul
-                class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-50">
-                {#each technologies as tech}
-                    <li>
-                        <img
-                            src={`${base}/icons/${$app.themeInUse}/grayscale/${tech}.svg`}
-                            alt={tech}
-                            aria-hidden="true"
-                            aria-label={tech} />
-                    </li>
-                {/each}
-            </ul>
-        </div>
-        <div class="u-margin-block-start-40" />
-    </section>
-    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
-        <div class="container u-flex u-flex-vertical u-cross-center u-height-100-percent">
             <div class="u-margin-block-start-auto" />
 
+            <div class="u-margin-block-start-auto is-no-mobile" />
+            <div
+                class="container u-margin-block-start-20 is-no-mobile u-flex u-main-center"
+                style="--p-container-max-size: var(--container-size-large);">
+                {#if $app.themeInUse === 'dark'}
+                    <img src={imgDark} alt="" class="u-only-dark" />
+                {:else}
+                    <img src={imgLight} alt="" class="u-only-light" />
+                {/if}
+            </div>
+
+            <div class="u-margin-block-start-auto" />
+
+            <div class="u-margin-block-start-auto is-no-mobile" />
+            <div
+                class="container u-text-color-light-gray is-no-mobile"
+                style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
+                <p>Integrate with your favourite technologies</p>
+                <ul
+                    class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 u-opacity-0-5">
+                    {#each technologies as tech}
+                        <li>
+                            <img
+                                src={`${base}/icons/${$app.themeInUse}/grayscale/${tech}.svg`}
+                                alt={tech}
+                                aria-hidden="true"
+                                aria-label={tech} />
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+            <div class="u-margin-block-start-40" />
+        </section>
+    {/if}
+    <section
+        class="grid-1-1-col-2 u-flex u-main-center u-cross-center"
+        class:is-cloud={isCloud}
+        style:--url={`url(${AppwriteCloudBg})`}
+        style:--url-mobile={`url(${AppwriteCloudBgMobile})`}>
+        <div class="container u-flex u-flex-vertical u-cross-center" class:cloud-contents={isCloud}>
+            {#if isCloud}
+                <a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
+                    <img
+                        src={AppwriteCloudLogo}
+                        width="196"
+                        height="47"
+                        class="u-block"
+                        alt="Appwrite" />
+                </a>
+
+                <div class="is-only-mobile theme-dark">
+                    <div class="mobile-beta">Public <span>beta</span></div>
+                </div>
+            {/if}
+
             <div class="u-max-width-500 u-width-full-line">
-                <h1 class="heading-level-3 u-margin-block-start-auto"><slot name="title" /></h1>
-                <div class="u-margin-block-start-40">
+                <h1 class="heading-level-2 u-margin-block-start-auto">
+                    {#if isCloud}
+                        <img src={Cloud1} alt="" class="cloud-1" />
+                        <img src={Cloud2} alt="" class="cloud-2" />
+                    {/if}
+                    <slot name="title" />
+                </h1>
+                <div class="u-margin-block-start-24">
                     <slot />
                 </div>
 
@@ -83,12 +178,181 @@
                     <slot name="links" />
                 </ul>
             </div>
-
-            <div class="u-margin-block-start-auto" />
-            <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
-                <!-- version 0.15.2.402 -->
-            </p>
-            <div class="u-margin-block-start-20" />
         </div>
     </section>
 </main>
+
+<style lang="scss">
+    @media (prefers-reduced-motion: reduce) {
+        main * {
+            animation: none !important;
+        }
+    }
+
+    @keyframes float {
+        0% {
+            transform: translatey(0px);
+        }
+        50% {
+            transform: translatey(-8px);
+        }
+        100% {
+            transform: translatey(0px);
+        }
+    }
+
+    .cloud-section {
+        background: var(--url);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        color: hsl(var(--color-neutral-5));
+
+        .logo {
+            display: block;
+            align-self: center;
+            margin-block-start: 32.5vh;
+            margin-block-start: 32.5lvh;
+        }
+
+        .header {
+            text-align: center;
+            align-self: center;
+            position: relative;
+
+            p {
+                font-family: 'Poppins';
+                font-size: clamp(3.5rem, 7vw, 5.25rem);
+                font-weight: 700;
+            }
+
+            .cloud-1 {
+                position: absolute;
+                top: 95%;
+                left: 0;
+                translate: 15% -50%;
+                animation: float 6s ease-in-out infinite;
+            }
+
+            .cloud-2 {
+                position: absolute;
+                top: 110%;
+                right: 0;
+                translate: 20% -50%;
+                animation: float 7s ease-in-out infinite;
+                animation-delay: 3s;
+            }
+        }
+    }
+
+    .beta,
+    .mobile-beta {
+        text-align: center;
+        align-self: center;
+        font-family: 'Poppins';
+        font-size: 1.125rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        line-height: 130%;
+        letter-spacing: 0.25em;
+
+        color: hsl(var(--color-neutral-0));
+
+        > span {
+            background: linear-gradient(
+                180deg,
+                rgba(252, 252, 255, 0.5) 0%,
+                rgba(252, 252, 255, 0.25) 100%
+            );
+            border-radius: 5.38636px;
+            text-align: center;
+            padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+        }
+    }
+
+    .beta {
+        margin-block-start: 4rem;
+    }
+
+    .mobile-logo {
+        margin-block-start: 1rem;
+        margin-block-end: 0.5rem;
+    }
+
+    .mobile-beta {
+        font-size: 0.75rem;
+        margin-block-end: 6rem;
+
+        > span {
+            background: hsl(var(--color-neutral-120));
+            padding: 0.25rem 0.375rem 0.25rem 0.5rem;
+        }
+    }
+
+    .cloud-contents {
+        justify-content: center;
+    }
+
+    .heading-level-2 {
+        .cloud-1,
+        .cloud-2 {
+            display: none;
+        }
+    }
+
+    @media (max-width: 767px) {
+        .heading-level-2 {
+            position: relative;
+            .cloud-1,
+            .cloud-2 {
+                display: block;
+                position: absolute;
+            }
+
+            .cloud-1 {
+                left: 32px;
+                top: -40px;
+            }
+
+            .cloud-2 {
+                right: 0;
+                top: 10px;
+            }
+        }
+        .main-cloud {
+            background-color: hsl(var(--color-neutral-500));
+        }
+
+        .cloud-contents {
+            justify-content: initial;
+        }
+
+        .is-cloud {
+            background: var(--url-mobile);
+            background-position: 0px calc(30px - 5vw);
+            background-size: 100vw;
+
+            background-repeat: no-repeat;
+        }
+
+        .cloud-section {
+            display: none;
+        }
+
+        section:last-child {
+            padding-block-end: 32px;
+        }
+    }
+
+    @media (min-width: 530px) and (max-width: 767px) {
+        .heading-level-2 {
+            .cloud-1 {
+                display: none;
+            }
+        }
+
+        .is-cloud {
+            background-position: 0px calc(30px - 15vw);
+        }
+    }
+</style>

src/lib/layout/usage.svelte

@@ -13,9 +13,8 @@
 
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { BarChart, LineChart } from '$lib/charts';
-    import { Card, SecondaryTabs, SecondaryTabsItem, Heading, Tiles } from '$lib/components';
-    import { Colors } from '$lib/charts/config';
+    import { BarChart } from '$lib/charts';
+    import { Card, SecondaryTabs, SecondaryTabsItem, Heading } from '$lib/components';
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
 
@@ -26,16 +25,7 @@
 
     export let title: string;
     export let count: Models.Metric[];
-    export let created: Models.Metric[];
-    export let read: Models.Metric[];
-    export let updated: Models.Metric[];
-    export let deleted: Models.Metric[];
-
     export let countMetadata: MetricMetadata;
-    export let createdMetadata: MetricMetadata;
-    export let readMetadata: MetricMetadata;
-    export let updatedMetadata: MetricMetadata;
-    export let deletedMetadata: MetricMetadata;
     export let path: string = null;
 </script>
 
@@ -72,76 +62,6 @@
             </div>
         {/if}
     </Card>
-    <Tiles>
-        <Card isTile>
-            {#if created}
-                <Heading tag="h6" size="6">{total(created)}</Heading>
-                <p>{createdMetadata.title}</p>
-                <div class="u-margin-block-start-16" />
-                <div class="chart-container">
-                    <LineChart
-                        series={[
-                            {
-                                name: createdMetadata.legend,
-                                data: [...created.map((e) => [e.date, e.value])],
-                                color: Colors.Secondary
-                            }
-                        ]} />
-                </div>
-            {/if}
-        </Card>
-        <Card isTile>
-            {#if read}
-                <Heading tag="h6" size="6">{total(read)}</Heading>
-                <p>{readMetadata.title}</p>
-                <div class="u-margin-block-start-16" />
-                <div class="chart-container">
-                    <LineChart
-                        series={[
-                            {
-                                name: readMetadata.legend,
-                                data: [...read.map((e) => [e.date, e.value])],
-                                color: Colors.Tertiary
-                            }
-                        ]} />
-                </div>
-            {/if}
-        </Card>
-        <Card isTile>
-            {#if updated}
-                <Heading tag="h6" size="6">{total(updated)}</Heading>
-                <p>{updatedMetadata.title}</p>
-                <div class="u-margin-block-start-16" />
-                <div class="chart-container">
-                    <LineChart
-                        series={[
-                            {
-                                name: updatedMetadata.legend,
-                                data: [...updated.map((e) => [e.date, e.value])],
-                                color: Colors.Quaternary
-                            }
-                        ]} />
-                </div>
-            {/if}
-        </Card>
-        <Card isTile>
-            {#if deleted}
-                <Heading tag="h6" size="6">{total(deleted)}</Heading>
-                <p>{deletedMetadata.title}</p>
-                <div class="u-margin-block-start-16" />
-                <div class="chart-container">
-                    <LineChart
-                        series={[
-                            {
-                                name: deletedMetadata.legend,
-                                data: [...deleted.map((e) => [e.date, e.value])],
-                                color: Colors.Quinary
-                            }
-                        ]} />
-                </div>
-            {/if}
-        </Card>
-    </Tiles>
 </Container>
 
 <style lang="scss">

src/lib/sdk/project.ts

@@ -1,31 +0,0 @@
-import type { Models, Payload } from '@appwrite.io/console';
-import { Service } from './service';
-
-export class Project extends Service {
-    /**
-     * Get usage stats for a project
-     *
-     *
-     * @param {string} range
-     * @throws {AppwriteException}
-     * @returns {Promise}
-     */
-    async getUsage(range?: string): Promise<Models.UsageProject> {
-        const path = '/project/usage';
-        const payload: Payload = {};
-
-        if (typeof range !== 'undefined') {
-            payload['range'] = range;
-        }
-
-        const uri = new URL(this.client.config.endpoint + path);
-        return await this.client.call(
-            'get',
-            uri,
-            {
-                'content-type': 'application/json'
-            },
-            payload
-        );
-    }
-}

src/lib/sdk/service.ts

@@ -1,28 +0,0 @@
-import type { Client, Payload } from '@appwrite.io/console';
-
-export class Service {
-    static CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
-
-    client: Client;
-
-    constructor(client: Client) {
-        this.client = client;
-    }
-
-    static flatten(data: Payload, prefix = ''): Payload {
-        let output: Payload = {};
-
-        for (const key in data) {
-            const value = data[key];
-            const finalKey = prefix ? `${prefix}[${key}]` : key;
-
-            if (Array.isArray(value)) {
-                output = Object.assign(output, this.flatten(value, finalKey));
-            } else {
-                output[finalKey] = value;
-            }
-        }
-
-        return output;
-    }
-}

src/lib/stores/sdk.ts

@@ -1,5 +1,4 @@
 import { getProjectId } from '$lib/helpers/project';
-import { Project } from '$lib/sdk/project';
 import { VARS } from '$lib/system';
 import {
     Account,
@@ -11,6 +10,7 @@ import {
     Locale,
     Migrations,
     Projects,
+    Project,
     Storage,
     Teams,
     Users

src/lib/stores/windowFocus.ts

@@ -0,0 +1,29 @@
+import { readable, type Readable } from 'svelte/store';
+
+function isCurrentWindowFocused(): boolean {
+    if (!window) return false;
+    if (!window.document) return false;
+    if (typeof window.document.hasFocus !== 'function') return false;
+
+    return window.document.hasFocus();
+}
+
+export function windowFocusStore(): Readable<boolean> {
+    const visibility = readable(isCurrentWindowFocused(), (set) => {
+        function handler() {
+            set(isCurrentWindowFocused());
+        }
+
+        if (window) {
+            window.addEventListener('focus', handler);
+            window.addEventListener('blur', handler);
+
+            return () => {
+                window.removeEventListener('focus', handler);
+                window.removeEventListener('blur', handler);
+            };
+        }
+    });
+
+    return visibility;
+}

src/lib/system.ts

@@ -11,7 +11,8 @@ export const VARS = {
     CONSOLE_MODE: import.meta.env?.VITE_CONSOLE_MODE?.toString() as string | undefined,
     VERCEL_ENV: import.meta.env?.VITE_VERCEL_ENV?.toString() as string | undefined,
     GOOGLE_ANALYTICS: import.meta.env?.VITE_GA_PROJECT?.toString() as string | undefined,
-    ASSISTANT_ENDPOINT: import.meta.env?.VITE_ASSISTANT_ENDPOINT?.toString() as string | undefined
+    ASSISTANT_ENDPOINT: import.meta.env?.VITE_ASSISTANT_ENDPOINT?.toString() as string | undefined,
+    GOOGLE_TAG: import.meta.env?.VITE_GTM_PROJECT?.toString() as string | undefined
 };
 
 export const ENV = {

src/routes/+layout.svelte

@@ -60,11 +60,20 @@
          * Handle initial load.
          */
         if (!$page.url.pathname.startsWith('/auth')) {
-            const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
+            const acceptedRoutes = [
+                '/login',
+                '/register',
+                '/recover',
+                '/invite',
+                '/card',
+                '/hackathon'
+            ];
             if ($user) {
                 if (
                     !$page.url.pathname.startsWith('/console') &&
-                    !$page.url.pathname.startsWith('/invite')
+                    !$page.url.pathname.startsWith('/invite') &&
+                    !$page.url.pathname.startsWith('/card') &&
+                    !$page.url.pathname.startsWith('/hackathon')
                 ) {
                     await goto(`${base}/console`, {
                         replaceState: true
@@ -142,4 +151,37 @@
             border-right-color: hsl(var(--p-tooltip--bg-color));
         }
     }
+
+    .theme-dark .with-separators {
+        --separator-color: hsl(var(--color-neutral-200));
+        --separator-text: hsl(var(--color-neutral-100));
+    }
+
+    .with-separators {
+        --separator-color: hsl(var(--color-neutral-5));
+        --separator-text: hsl(var(--color-neutral-50));
+    }
+
+    .with-separators {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        text-transform: uppercase;
+        width: 100%;
+
+        color: var(--separator-text);
+
+        &::before,
+        &::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: var(--separator-color);
+        }
+    }
+
+    [type='checkbox']:where(:checked)::before {
+        content: '\ea38';
+    }
 </style>

src/routes/+layout.ts

@@ -39,7 +39,9 @@ export const load: LayoutLoad = async ({ depends, url }) => {
             '/invite',
             '/auth/magic-url',
             '/auth/oauth2/success',
-            '/auth/oauth2/failure'
+            '/auth/oauth2/failure',
+            '/card',
+            '/hackathon'
         ];
 
         if (!acceptedRoutes.some((n) => url.pathname.startsWith(n))) {

src/routes/card/+layout.svelte

@@ -0,0 +1,13 @@
+<script>
+    import { Shell } from '$lib/layout';
+    import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
+    import Footer from '$lib/layout/footer.svelte';
+</script>
+
+<Shell>
+    <a class="logo" slot="header" href={`/console`}>
+        <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
+    </a>
+    <slot />
+    <Footer slot="footer" />
+</Shell>

src/routes/card/+page.ts

@@ -0,0 +1,10 @@
+import { isCloud } from '$lib/system';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent }) {
+    if (!isCloud) throw redirect(303, '/');
+    const { account } = await parent();
+    if (!account) throw redirect(303, '/login');
+
+    throw redirect(303, `/card/${account.$id}`);
+}

src/routes/card/Card.svelte

@@ -0,0 +1,458 @@
+<script lang="ts" context="module">
+    // Helpers
+    const round = (num: number, fix = 3) => parseFloat(num.toFixed(fix));
+    const clamp = (num: number, min = -20, max = 20) => Math.min(Math.max(num, min), max);
+
+    function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent {
+        return e.type === 'touchmove';
+    }
+</script>
+
+<script lang="ts">
+    import { windowFocusStore } from '$lib/stores/windowFocus';
+
+    import { spring } from 'svelte/motion';
+
+    let cardEl: HTMLDivElement | undefined;
+    export let active = false;
+    export let isFlipped = false;
+    export let base64: { front: string; back: string };
+
+    let interacting = false;
+
+    const springR = { stiffness: 0.066, damping: 0.25 };
+    const springD = { stiffness: 0.03, damping: 0.45 };
+    const THICKNESS = 3;
+
+    let springRotate = spring({ x: 0, y: 0 }, springR);
+    let springGlare = spring({ x: 50, y: 50, o: 0.25 }, springR);
+    let springBackground = spring({ x: 50, y: 50 }, springR);
+    let springRotateDelta = spring({ x: 0, y: 0 }, springD);
+    let springTranslate = spring({ x: 0, y: 0 }, springD);
+    let springScale = spring(1, springD);
+    let angle = 0;
+    let centerProximity = spring(0, springR);
+    let springRotateZ = spring(-15, springD);
+
+    // Events
+    const interact = (e: MouseEvent | TouchEvent) => {
+        if (!active) return;
+        interacting = true;
+
+        const clientX = isTouchEvent(e) ? e.touches[0].clientX : e.clientX;
+        const clientY = isTouchEvent(e) ? e.touches[0].clientY : e.clientY;
+
+        const el = e.target as HTMLElement;
+        const rect = el.getBoundingClientRect(); // get element's current size/position
+        const absolute = {
+            x: clientX - rect.left, // get mouse position from left
+            y: clientY - rect.top // get mouse position from right
+        };
+        const percent = {
+            x: round((100 / rect.width) * absolute.x),
+            y: round((100 / rect.height) * absolute.y)
+        };
+        const center = {
+            x: percent.x - 50,
+            y: (percent.y - 50) * (isFlipped ? -1 : 1)
+        };
+
+        springBackground.stiffness = springR.stiffness;
+        springBackground.damping = springR.damping;
+        springBackground.set({
+            x: round(50 + percent.x / 4 - 12.5),
+            y: round(50 + percent.y / 3 - 16.67)
+        });
+        springRotate.stiffness = springR.stiffness;
+        springRotate.damping = springR.damping;
+        springRotate.set({
+            x: round(-(center.x / 3.5)),
+            y: round(center.y / 2)
+        });
+        springGlare.stiffness = springR.stiffness;
+        springGlare.damping = springR.damping;
+        springGlare.set({
+            x: percent.x,
+            y: percent.y,
+            o: 1
+        });
+
+        // get angle of mouse position relative to center of element
+        angle = Math.atan2(center.y, center.x) * (180 / Math.PI);
+
+        // get proximity to center of element. 0 = center, 1 = edge
+        $centerProximity = Math.sqrt(center.x * center.x + center.y * center.y) / 50 - 0.1;
+    };
+
+    const interactEnd = (_: unknown, delay = 500) => {
+        if (!active) return;
+        setTimeout(function () {
+            const snapStiff = 0.01;
+            const snapDamp = 0.06;
+            interacting = false;
+
+            springRotate.stiffness = snapStiff;
+            springRotate.damping = snapDamp;
+            springRotate.set({ x: 0, y: 0 });
+
+            springGlare.stiffness = snapStiff;
+            springGlare.damping = snapDamp;
+            springGlare.set({ x: 50, y: 50, o: 0 });
+
+            springBackground.stiffness = snapStiff;
+            springBackground.damping = snapDamp;
+            springBackground.set({ x: 50, y: 50 });
+            $centerProximity = 0;
+        }, delay);
+    };
+
+    const setCenter = () => {
+        if (!cardEl) return;
+        const rect = cardEl.getBoundingClientRect(); // get element's size/position
+        const view = document.documentElement; // get window/viewport size
+
+        const delta = {
+            x: round(view.clientWidth / 2 - rect.x - rect.width / 2),
+            y: round(view.clientHeight / 2 - rect.y - rect.height / 2)
+        };
+        springTranslate.set({
+            x: delta.x,
+            y: delta.y
+        });
+    };
+
+    const popover = () => {
+        if (!cardEl) return;
+        const rect = cardEl.getBoundingClientRect(); // get element's size/position
+        let delay = 100;
+        let scaleW = (window.innerWidth / rect.width) * 0.65;
+        let scaleH = (window.innerHeight / rect.height) * 0.65;
+        let scaleF = 1.5;
+        setCenter();
+
+        delay = 1000;
+        springRotateDelta.set({
+            x: 360,
+            y: 0
+        });
+        springRotateZ.set(0);
+
+        springScale.set(Math.min(scaleW, scaleH, scaleF));
+        interactEnd(null, delay);
+    };
+
+    const retreat = () => {
+        springScale.set(1);
+        springTranslate.set({ x: 0, y: 0 });
+        springRotateDelta.set({ x: 0, y: 0 });
+        springRotate.set({ x: 0, y: 0 });
+        springGlare.set({ x: 50, y: 50, o: 0 });
+        $centerProximity = 0;
+        springRotateZ.set(-15);
+    };
+
+    const handleClick = () => {
+        active = !active;
+    };
+
+    const windowKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'q') {
+            springRotateDelta.update((old) => {
+                return {
+                    ...old,
+                    x: old.x + 360
+                };
+            });
+        }
+        if (!active) return;
+
+        if (e.key === 'q') {
+            isFlipped = !isFlipped;
+        } else if (e.key === 'Escape') {
+            active = false;
+        }
+    };
+
+    $: if (!active) {
+        isFlipped = false;
+    } else {
+        springRotateDelta.update((old) => ({
+            x: isFlipped ? 180 : 360,
+            y: old.y
+        }));
+    }
+
+    // Reactive
+    $: if (active) {
+        popover();
+        interacting = true;
+    } else {
+        retreat();
+    }
+
+    windowFocusStore().subscribe((focused) => {
+        if (focused) {
+            active = false;
+            springScale.set(1, { hard: true });
+            springTranslate.set({ x: 0, y: 0 }, { hard: true });
+            springRotateDelta.set({ x: 0, y: 0 }, { hard: true });
+            springRotate.set({ x: 0, y: 0 }, { hard: true });
+            springRotateZ.set(-15, { hard: true });
+            centerProximity.set(0, { hard: true });
+        }
+    });
+
+    $: styles = `
+		--mx: ${$springGlare.x}%;
+		--my: ${$springGlare.y}%;
+		--tx: ${$springTranslate.x}px;
+		--ty: ${$springTranslate.y}px;
+		--s: ${$springScale};
+		--o: ${$springGlare.o};
+		--rx: ${$springRotate.x + $springRotateDelta.x}deg;
+		--ry: ${$springRotate.y + $springRotateDelta.y}deg;
+        --rz: ${$springRotateZ}deg;
+		--pos: ${$springBackground.x}% ${$springBackground.y}%;
+		--posx: ${$springBackground.x}%;
+		--posy: ${$springBackground.y}%;
+		--hyp: ${clamp(
+            Math.sqrt(
+                ($springGlare.y - 50) * ($springGlare.y - 50) +
+                    ($springGlare.x - 50) * ($springGlare.x - 50)
+            ) / 50,
+            0,
+            1
+        )};
+		--angle: ${angle}deg;
+		--center: ${$centerProximity};
+	`;
+</script>
+
+<svelte:window on:keydown={windowKeyDown} />
+
+<div class="cb-card" class:active class:interacting style={styles} bind:this={cardEl}>
+    <div class="card__translater">
+        <button
+            class="card__rotator"
+            aria-label="Expand the Card"
+            tabindex="0"
+            on:pointermove={interact}
+            on:mouseout={interactEnd}
+            on:click={handleClick}
+            on:blur={() => {
+                /* noop */
+            }}>
+            <div class="card__back">
+                <img
+                    class="invisible"
+                    src={base64.back}
+                    alt="The back of the Card"
+                    loading="lazy"
+                    width="450"
+                    height="274" />
+                <img
+                    class="abs"
+                    src={base64.back}
+                    alt="The back of the Card"
+                    loading="lazy"
+                    width="450"
+                    height="274" />
+                <div class="card__glare" />
+            </div>
+
+            {#each new Array(THICKNESS) as _, i (i)}
+                <div class="card__thick" style:--i={i + 1} />
+            {/each}
+            <div class="card__front" style:--thickness={THICKNESS}>
+                <img class="invisible" src={base64.front} alt="" />
+                <img class="abs" src={base64.front} alt="The front of the card" />
+                <div class="card__glare" />
+            </div>
+        </button>
+    </div>
+</div>
+
+<style lang="scss">
+    .invisible {
+        opacity: 0;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .cb-card,
+        .cb-card * {
+            transition: none !important;
+            animation: none !important;
+            pointer-events: none !important;
+        }
+    }
+
+    :root {
+        --mx: 50%;
+        --my: 50%;
+        --s: 1;
+        --o: 0;
+        --tx: 0px;
+        --ty: 0px;
+        --rx: 0deg;
+        --ry: 0deg;
+        --pos: 50% 50%;
+        --posx: 50%;
+        --posy: 50%;
+        --hyp: 0;
+    }
+
+    :global(.theme-dark) .cb-card {
+        --shadow-clr: transparent;
+    }
+
+    .cb-card {
+        --radius: 12px;
+        --shadow-clr: hsl(var(--color-neutral-30));
+
+        z-index: calc(var(--s) * 100);
+        transform: translate3d(0, 0, 0.1px);
+        -webkit-transform: translate3d(0, 0, 0.1px);
+        will-change: transform, visibility;
+        transform-style: preserve-3d;
+        -webkit-transform-style: preserve-3d;
+
+        &.interacting {
+            z-index: calc(var(--s) * 120);
+        }
+    }
+
+    .cb-card.active .card__translater,
+    .cb-card.active .card__rotator {
+        touch-action: none;
+    }
+
+    .card__translater,
+    .card__rotator {
+        display: grid;
+        perspective: 600px;
+        transform-origin: center;
+        -webkit-transform-origin: center;
+        will-change: transform;
+    }
+
+    .card__translater {
+        width: auto;
+        position: relative;
+        transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
+        -webkit-transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
+    }
+
+    .card__rotator {
+        -webkit-transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
+        -webkit-transform-style: preserve-3d;
+        transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
+        transform-style: preserve-3d;
+        box-shadow: 0px 10px 20px -5px var(--shadow-clr);
+        border-radius: var(--radius);
+        outline: none;
+
+        appearance: none;
+        -webkit-appearance: none;
+        border: none;
+        background: top;
+        padding: 0;
+
+        :global(*) {
+            width: 100%;
+            display: grid;
+            grid-area: 1/1;
+            border-radius: var(--radius);
+            image-rendering: optimizeQuality;
+            transform-style: preserve-3d;
+            -webkit-transform-style: preserve-3d;
+        }
+
+        img {
+            outline: 1px solid transparent;
+            height: auto;
+        }
+    }
+
+    .card__thick {
+        background-color: transparent;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform: translateZ(calc(var(--i) * 1px));
+    }
+
+    .card__back {
+        transform: rotateY(180deg) translateZ(0px);
+        -webkit-transform: rotateY(180deg) translateZ(0px);
+        backface-visibility: hidden;
+
+        &::before {
+            --resolved-angle: calc(calc(var(--angle) * -1) + 60deg);
+        }
+    }
+
+    .card__front {
+        opacity: 1;
+        transition: opacity 0.33s ease-out;
+        transform: translateZ(calc(var(--thickness) * 1px));
+        position: relative;
+
+        backface-visibility: hidden;
+
+        * {
+            backface-visibility: hidden;
+        }
+
+        &::before {
+            --resolved-angle: calc(var(--angle) + 65deg);
+        }
+    }
+
+    .card__front,
+    .card__back {
+        .abs {
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            translate: -50% -50%;
+            width: 200%;
+            scale: calc(100 / 200);
+            max-inline-size: initial;
+            max-block-size: initial;
+        }
+    }
+
+    .card__front::before,
+    .card__back::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: conic-gradient(
+            from var(--resolved-angle),
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 1) 7.5%,
+            rgba(255, 255, 255, 0) 15%
+        );
+        scale: 1.01;
+        border-radius: calc(var(--radius) * 1.2);
+
+        opacity: var(--center);
+    }
+
+    .card__glare {
+        border-radius: calc(var(--radius) + 3px);
+        transform: translateZ(1px);
+        z-index: 4;
+        background: radial-gradient(
+            farthest-corner circle at var(--mx) var(--my),
+            rgba(255, 255, 255, 0.8) 10%,
+            rgba(255, 255, 255, 0.65) 20%,
+            rgba(0, 0, 0, 0.5) 90%
+        );
+        mix-blend-mode: overlay;
+        opacity: calc(var(--o) * 0.5);
+    }
+</style>

src/routes/card/[uid]/+page.svelte

@@ -0,0 +1,430 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { Modal } from '$lib/components';
+    import Code from '$lib/components/code.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { copy } from '$lib/helpers/copy';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Confetti } from 'svelte-confetti';
+    import { fade } from 'svelte/transition';
+    import Card from '../Card.svelte';
+
+    export let data;
+    const base64 = data.base64;
+    const variant = data.isOwner ? 'owner' : 'external';
+    const userId = data.userId;
+    const { frontImg } = data.imgUrls;
+
+    let triggerConfettiKey = 1;
+    const confettiColors = [
+        'hsl(var(--color-primary-100))',
+        'hsl(var(--color-primary-200))',
+        'hsl(var(--color-primary-300))',
+        '#F05088',
+        '#FF86BB',
+        '#FFFFFF80'
+    ];
+
+    let cardActive = false;
+    let cardIsFlipped = false;
+    let showEmbedCode = false;
+
+    $: title =
+        variant === 'owner' ? 'Welcome to Cloud Public Beta' : 'Join Appwrite Cloud Public Beta';
+    $: shareableLink =
+        typeof window !== 'undefined' ? `${window.location.origin}/card/${userId}` : '';
+    $: embedCode = [
+        `<a href="${shareableLink}">`,
+        `\t<img width="350" src="${frontImg}" alt="Appwrite Cloud Card" />`,
+        `</a>`
+    ].join('\n');
+    $: twitterText = encodeURIComponent(
+        [
+            `Guess what I just received? 💳 My personalized Cloud card from @appwrite! 🚀`,
+            ``,
+            `Appwrite Cloud just announced their Public Beta!`,
+            ``,
+            `🌥️ Sign up now and claim your own card at ${shareableLink}`,
+            ``,
+            `#AppwriteCloud`
+        ].join('\n')
+    );
+
+    function copyShareableLink() {
+        copy(shareableLink);
+        addNotification({
+            message: 'The link has been copied',
+            type: 'success'
+        });
+    }
+
+    function copyEmbedCode() {
+        copy(embedCode);
+        addNotification({
+            message: 'Embed code has been copied',
+            type: 'success'
+        });
+        showEmbedCode = false;
+    }
+
+    const seo = {
+        title: 'Appwrite Cloud Card',
+        description:
+            'Cloud is live in public beta, create your Cloud account and unlock your exclusive card!'
+    };
+</script>
+
+<svelte:head>
+    <!-- HTML Meta Tags -->
+    <title>{seo.title}</title>
+    <meta name="description" content={seo.description} />
+</svelte:head>
+
+<div class="wrapper">
+    <div class="card">
+        <h3 class="heading-level-3 no-text-select">
+            {title}
+            <button class="confetti-btn" on:click={() => triggerConfettiKey++}>
+                🎉
+                {#each Array(triggerConfettiKey) as _, i (i)}
+                    <Confetti
+                        delay={i === 0 ? [500, 500] : [0, 100]}
+                        x={[0.5, 2]}
+                        y={[0, 1.5]}
+                        amount="30"
+                        fallDistance="50px"
+                        colorArray={confettiColors} />
+                {/each}
+            </button>
+        </h3>
+
+        <div class="content">
+            <div>
+                {#if variant === 'owner'}
+                    <h4 class="eyebrow-heading-3 is-only-desktop">Share your card</h4>
+                {:else if variant === 'external'}
+                    <h4 class="eyebrow-heading-3 is-only-desktop">Share card</h4>
+                {/if}
+                {#if variant === 'external'}
+                    <a
+                        href="/register"
+                        class="button u-width-full-line u-main-center u-margin-block-start-16 external-btn-top"
+                        data-sveltekit-reload>Claim your card</a>
+                {/if}
+            </div>
+        </div>
+        <img class="card-preview" src={base64.front} alt="The front of the card" />
+        <ul class="buttons-list u-margin-block-start-16">
+            <li class="buttons-list-item">
+                <a
+                    class="button is-text"
+                    href="https://twitter.com/intent/tweet?text={twitterText}"
+                    target="_blank"
+                    rel="noreferrer">
+                    <span class="icon-twitter" aria-hidden="true" />
+                    <span class="text">Tweet it</span>
+                </a>
+            </li>
+            {#if variant === 'owner'}
+                <li class="buttons-list-item embed-btn">
+                    <button class="button is-text" on:click={() => (showEmbedCode = true)}>
+                        <span class="icon-code" aria-hidden="true" />
+                        <span class="text">Get embed code</span>
+                    </button>
+                </li>
+            {/if}
+            <li class="buttons-list-item">
+                <button class="button is-text" on:click={copyShareableLink}>
+                    <span class="icon-link" aria-hidden="true" />
+                    <span class="text">Get a link</span>
+                </button>
+            </li>
+        </ul>
+        <div class="card-footer">
+            {#if variant === 'owner'}
+                <a data-sveltekit-reload href="/console" class="button">Go to console</a>
+            {:else}
+                <a data-sveltekit-reload href="/card" class="button external-btn-bottom"
+                    >Claim your card</a>
+            {/if}
+        </div>
+    </div>
+    <div class="cbc-wrapper">
+        {#if !cardActive}
+            <div class="cbc-confetti" transition:fade|local>
+                <Confetti
+                    x={[-1.75, 1.85]}
+                    y={[-1.875, 1]}
+                    amount={100}
+                    size="10"
+                    infinite
+                    delay={[2000, 7000]}
+                    colorArray={confettiColors}
+                    fallDistance="50px" />
+            </div>
+        {/if}
+        {#if browser}
+            <Card bind:active={cardActive} bind:isFlipped={cardIsFlipped} {base64} />
+        {/if}
+    </div>
+    {#if cardActive}
+        <div
+            class="overlay"
+            on:click={() => (cardActive = false)}
+            on:keydown={() => {
+                /* no-op */
+            }}
+            transition:fade|local />
+    {/if}
+    <div class="controls" class:invisible={!cardActive}>
+        <button
+            class="button is-text"
+            on:click={() => (cardIsFlipped = !cardIsFlipped)}
+            aria-label="Rotate card">
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2 11C2 8.2 6.5 6 12 6C17.5 6 22 8.2 22 11C22 12.8414 20.0779 14.3752 17.2449 15.2644C16.615 15.4621 16 14.9707 16 14.3105C16 13.8351 16.3283 13.4267 16.7816 13.2837C18.8093 12.6442 20 11.6237 20 11C20 9.9 17 8 12 8C7 8 4 9.9 4 11C4 11.7821 6.79551 13.1137 9.91054 13.7336C10.0265 13.7566 10.1405 13.7886 10.2509 13.8305C10.308 13.8187 10.3669 13.8125 10.4273 13.8125L9.26357 12.6004C8.9121 12.2343 8.9121 11.6407 9.26357 11.2746C9.61504 10.9085 10.1849 10.9085 10.5364 11.2746L13.2364 14.0871C13.4051 14.2629 13.5 14.5013 13.5 14.75C13.5 14.9986 13.4051 15.2371 13.2364 15.4129L10.5364 18.2254C10.1849 18.5915 9.61504 18.5915 9.26357 18.2254C8.9121 17.8593 8.9121 17.2657 9.26357 16.8996L10.2838 15.8369C6.24683 15.1056 2 13.1614 2 11Z"
+                    fill="currentColor" />
+            </svg>
+            <span class="text">Spin</span>
+        </button>
+    </div>
+</div>
+
+<Modal bind:show={showEmbedCode}>
+    <svelte:fragment slot="header">Get Embed Code</svelte:fragment>
+    <div class="u-overflow-hidden">
+        <Code language="html" code={embedCode} noMargin />
+    </div>
+    <svelte:fragment slot="footer">
+        <Button on:click={copyEmbedCode}>Copy</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    :global(.theme-dark) .wrapper {
+        --glow: hsl(var(--color-primary-100));
+        --beta-bg: hsl(var(--color-neutral-120));
+        --beta-fg: hsl(var(--color-neutral-0));
+        --sep-clr: hsl(var(--color-neutral-150));
+    }
+
+    :global(.main-content) {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        flex-grow: 1;
+    }
+
+    .wrapper {
+        --glow: transparent;
+        --beta-bg: rgba(240, 46, 101, 0.16);
+        --beta-fg: rgba(240, 46, 101, 0.8);
+        --sep-clr: hsl(var(--color-neutral-10));
+
+        display: grid;
+        place-items: center;
+        justify-content: center;
+        flex-grow: 1;
+        position: relative;
+
+        grid-template-columns: 620px 400px;
+        padding-block: 4rem;
+        gap: max(4rem, 10vw);
+        overflow: hidden;
+    }
+
+    .card {
+        max-width: 660px;
+
+        .content {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+            margin-block-start: 2.5rem;
+        }
+
+        .card-preview {
+            display: none;
+        }
+
+        .card-footer {
+            display: flex;
+            justify-content: flex-end;
+
+            border-top: 1px solid var(--sep-clr);
+
+            margin-block-start: 2rem;
+            padding-block-start: 2rem;
+            margin-inline: -2rem;
+            padding-inline: 2rem;
+        }
+    }
+
+    .cbc-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 500px;
+        position: relative;
+    }
+
+    .cbc-confetti {
+        position: absolute;
+        top: 30%;
+        left: 50%;
+        translate: -50% -50%;
+    }
+
+    @keyframes shake {
+        0% {
+            translate: 0;
+        }
+        25% {
+            translate: 0 -4px;
+        }
+        50% {
+            translate: 0 0px;
+        }
+        75% {
+            translate: 0 0px;
+        }
+        100% {
+            translate: 0 0px;
+        }
+    }
+
+    .confetti-btn {
+        animation: shake 2000ms ease infinite;
+        user-select: none;
+        display: inline-flex;
+        place-items: center;
+        position: relative;
+
+        :global(.confetti-holder) {
+            position: absolute !important;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .controls {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        position: absolute;
+        bottom: 5vh;
+        left: 50%;
+        translate: -50%;
+
+        transition: opacity 250ms ease;
+
+        &.invisible {
+            opacity: 0;
+        }
+    }
+
+    .buttons-list-item:first-child .button {
+        padding-inline-start: 0;
+    }
+
+    .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: hsl(var(--p-body-bg-color));
+        backdrop-filter: blur(80px);
+        opacity: 0.5;
+    }
+
+    .external-btn-top {
+        display: none;
+    }
+
+    .no-text-select {
+        user-select: none;
+    }
+
+    @media (max-width: 1024px) {
+        .external-btn-top {
+            display: flex;
+        }
+
+        .external-btn-bottom {
+            display: none !important;
+        }
+
+        .embed-btn {
+            order: 2;
+            border: none !important;
+        }
+
+        .wrapper {
+            display: block;
+            padding-block: 2rem;
+
+            max-width: min(100%, 500px);
+            margin: 0 auto;
+        }
+
+        .card {
+            background-color: transparent;
+            border: none;
+            padding-inline: 1rem;
+            padding-block: 0;
+
+            .content {
+                flex-direction: column;
+                align-items: stretch;
+                margin-block-start: 1rem;
+                padding-block-end: 2rem;
+                // border-block-end: 1px solid var(--sep-clr);
+            }
+
+            .card-preview {
+                display: block;
+                margin-block-start: 2rem;
+            }
+
+            .buttons-list {
+                flex-wrap: wrap;
+                justify-content: center;
+
+                .buttons-list-item:last-child {
+                    border: none !important;
+                }
+            }
+
+            .card-footer {
+                border: none;
+                padding-block-start: 0;
+
+                .button {
+                    display: grid;
+                    place-items: center;
+                    text-align: center;
+                    width: 100%;
+                }
+            }
+        }
+
+        .cbc-wrapper {
+            display: none;
+        }
+    }
+</style>

src/routes/card/[uid]/+page.ts

@@ -0,0 +1,58 @@
+import { VARS } from '$lib/system.js';
+import { redirect } from '@sveltejs/kit';
+
+function getCardImgUrls(userId: string, endpoint: string) {
+    const resolved = endpoint;
+
+    const frontImg = `${resolved}/cards/cloud?userId=${userId}`;
+    const backImg = `${resolved}/cards/cloud-back?userId=${userId}`;
+    const ogImg = `${resolved}/cards/cloud-og?userId=${userId}`;
+
+    return { frontImg, backImg, ogImg };
+}
+
+async function urlContentToDataUri(url: string): Promise<string> {
+    const res = await fetch(url);
+    const blob = await res.blob();
+
+    return await new Promise((callback) => {
+        const reader = new FileReader();
+        reader.onload = function () {
+            if (typeof this.result !== 'string') return '';
+            callback(this.result);
+        };
+        reader.readAsDataURL(blob);
+    });
+}
+
+export async function load({ params, url, parent }) {
+    const { account } = await parent();
+
+    const userId = params.uid;
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${url.origin}/v1`;
+    const { frontImg, backImg } = getCardImgUrls(userId, endpoint);
+
+    try {
+        const res = await fetch(frontImg);
+
+        if (!res.ok) {
+            throw redirect(303, '/');
+        }
+
+        return {
+            userId: params.uid,
+            base64: {
+                front: await urlContentToDataUri(frontImg),
+                back: await urlContentToDataUri(backImg)
+            },
+            isOwner: account && account.$id === userId,
+            imgUrls: {
+                frontImg,
+                backImg
+            }
+        };
+    } catch (e) {
+        console.error(e);
+        throw redirect(303, '/');
+    }
+}

src/routes/card/helpers.ts

@@ -0,0 +1,9 @@
+export function getCardImgUrls(userId: string, endpoint: string) {
+    const resolved = endpoint;
+
+    const frontImg = `${resolved}/cards/cloud?userId=${userId}`;
+    const backImg = `${resolved}/cards/cloud-back?userId=${userId}`;
+    const ogImg = `${resolved}/cards/cloud-og?userId=${userId}`;
+
+    return { frontImg, backImg, ogImg };
+}

src/routes/console/+layout.svelte

@@ -173,6 +173,7 @@
     showSideNavigation={$page.url.pathname !== '/console' &&
         !$page?.params.organization &&
         !$page.url.pathname.includes('/console/account') &&
+        !$page.url.pathname.includes('/console/card') &&
         !$page.url.pathname.includes('/console/onboarding')}>
     <Header slot="header" />
     <SideNavigation slot="side" bind:isOpen />

src/routes/console/account/organizations/+page.ts

@@ -15,7 +15,7 @@ export const load: PageLoad = async ({ url, route }) => {
         organizations: await sdk.forConsole.teams.list([
             Query.offset(offset),
             Query.limit(limit),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/organization-[organization]/+page.ts

@@ -14,9 +14,9 @@ export const load: PageLoad = async ({ params, url, route }) => {
         limit,
         projects: await sdk.forConsole.projects.list([
             Query.offset(offset),
-            Query.limit(limit),
             Query.equal('teamId', params.organization),
-            Query.orderDesc('$createdAt')
+            Query.limit(CARD_LIMIT),
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/auth/+page.ts

@@ -20,7 +20,7 @@ export const load: PageLoad = async ({ url, route }) => {
         search,
         page,
         users: await sdk.forProject.users.list(
-            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
             search
         )
     };

src/routes/console/project-[project]/auth/teams/+page.ts

@@ -16,7 +16,7 @@ export const load: PageLoad = async ({ url, route }) => {
         search,
         page,
         teams: await sdk.forProject.teams.list(
-            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
             search
         )
     };

src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.ts

@@ -18,7 +18,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         limit,
         memberships: await sdk.forProject.teams.listMemberships(
             teamId,
-            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
             search
         )
     };

src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte

@@ -5,38 +5,14 @@
 
     export let data: PageData;
 
-    $: count = data.count;
-    $: created = data.created;
-    $: read = data.read;
-    $: updated = data.updated;
-    $: deleted = data.deleted;
+    $: count = data.usersTotal;
 </script>
 
 <Usage
     title="Users"
     path={`/console/project-${$page.params.project}/auth/usage`}
     {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
     countMetadata={{
         legend: 'Users',
         title: 'Registered users'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Users created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Users read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Users updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Users deleted'
     }} />

src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts

@@ -8,11 +8,7 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.users.getUsage(period ?? '30d');
         return {
-            count: response.usersCount as unknown as Models.Metric[],
-            created: response.usersCreate as unknown as Models.Metric[],
-            read: response.usersRead as unknown as Models.Metric[],
-            updated: response.usersUpdate as unknown as Models.Metric[],
-            deleted: response.usersDelete as unknown as Models.Metric[]
+            usersTotal: response.usersTotal as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/databases/+page.svelte

@@ -40,7 +40,12 @@
 </script>
 
 <Container>
-    <GridHeader title="Databases" {columns} view={data.view}>
+    <GridHeader
+        title="Databases"
+        {columns}
+        view={data.view}
+        hideColumns={!data.databases.total}
+        hideView={!data.databases.total}>
         <Button on:click={() => (showCreate = true)} event="create_database">
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create database</span>

src/routes/console/project-[project]/databases/+page.ts

@@ -18,7 +18,7 @@ export const load: PageLoad = async ({ url, route, depends }) => {
         databases: await sdk.forProject.databases.list([
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/databases/database-[database]/+page.svelte

@@ -11,7 +11,12 @@
 </script>
 
 <Container>
-    <GridHeader title="Collections" {columns} view={data.view}>
+    <GridHeader
+        title="Collections"
+        {columns}
+        view={data.view}
+        hideColumns={!data.collections.total}
+        hideView={!data.collections.total}>
         <Button on:click={() => ($showCreate = true)} event="create_collection">
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create collection</span>

src/routes/console/project-[project]/databases/database-[database]/+page.ts

@@ -18,7 +18,7 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
         collections: await sdk.forProject.databases.listCollections(params.database, [
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.ts

@@ -19,7 +19,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             ),
             subNavigation: SubNavigation,
             allCollections: await sdk.forProject.databases.listCollections(params.database, [
-                Query.orderDesc('$createdAt')
+                Query.orderDesc('')
             ])
         };
     } catch (e) {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte

@@ -74,7 +74,7 @@
         if (search) {
             const collections = await sdk.forProject.databases.listCollections(
                 databaseId,
-                [Query.orderDesc('$createdAt')],
+                [Query.orderDesc('')],
                 search
             );
             return collections;

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte

@@ -61,7 +61,7 @@
             const documents = await sdk.forProject.databases.listDocuments(
                 databaseId,
                 attribute.relatedCollection,
-                [Query.search('$id', search), Query.orderDesc('$createdAt')]
+                [Query.startsWith('$id', search), Query.orderDesc('')]
             );
             return documents;
         } else {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte

@@ -52,7 +52,7 @@
             invalidate(Dependencies.DOCUMENT);
             trackEvent(Submit.DocumentUpdate);
             addNotification({
-                message: 'Document was updated!',
+                message: 'Document has been updated',
                 type: 'success'
             });
         } catch (error) {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte

@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Alert, Modal } from '$lib/components';
+    import { Alert, Modal, Trim } from '$lib/components';
     import { Button, InputChoice } from '$lib/elements/forms';
     import {
         TableBody,
@@ -68,17 +68,12 @@
     headerDivider={false}>
     <svelte:fragment slot="header">Delete Document</svelte:fragment>
 
-    <p data-private>
-        Are you sure you want to delete <b
-            >the document from <span data-private>{$collection.name}</span></b
-        >?
-    </p>
-
     {#if relAttributes?.length}
-        <TableScroll>
+        <p class="text">This document contains the following relationships:</p>
+        <TableScroll noMargin>
             <TableHeader>
-                <TableCellHead width={50}>Relation</TableCellHead>
-                <TableCellHead width={50}>Setting</TableCellHead>
+                <TableCellHead width={70}>Relation</TableCellHead>
+                <TableCellHead width={70}>Setting</TableCellHead>
                 <TableCellHead width={200} />
             </TableHeader>
             <TableBody>
@@ -91,7 +86,7 @@
                                 {:else}
                                     <span class="icon-arrow-sm-right" />
                                 {/if}
-                                <span data-private>{attr.key}</span>
+                                <Trim>{attr.key}</Trim>
                             </span>
                         </TableCell>
                         <TableCellText title="Settings">
@@ -111,7 +106,14 @@
                 Delete document from <span data-private>{$collection.name}</span>
             </InputChoice>
         </div>
+    {:else}
+        <p data-private>
+            Are you sure you want to delete <b
+                >the document from <span data-private>{$collection.name}</span></b
+            >?
+        </p>
     {/if}
+
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit disabled={relAttributes?.length && !checked}>Delete</Button>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte

@@ -65,7 +65,7 @@
             trackEvent(Submit.DocumentUpdate);
             disableUpdate = true;
             addNotification({
-                message: 'Document was updated!',
+                message: 'Document has been updated',
                 type: 'success'
             });
         } catch (error) {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte

@@ -51,7 +51,9 @@
         <CoverTitle href={`/console/project-${projectId}/databases/database-${databaseId}`}>
             {$collection?.name}
         </CoverTitle>
-        <Id value={$collection?.$id}>{$collection?.$id}</Id>
+        {#key $collection?.$id}
+            <Id value={$collection?.$id}>{$collection?.$id}</Id>
+        {/key}
     </svelte:fragment>
 
     <Tabs>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte

@@ -77,7 +77,7 @@
             );
 
             addNotification({
-                message: 'Index has been created',
+                message: 'Creating index',
                 type: 'success'
             });
             trackEvent(Submit.IndexCreate);

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte

@@ -12,7 +12,10 @@
     const databaseId = $page.params.database;
     const limit = 10;
 
-    $: args = preferences.getDisplayNames()?.[selectedRelationship?.relatedCollection] ?? [];
+    $: args =
+        preferences
+            .getDisplayNames()
+            ?.[selectedRelationship?.relatedCollection]?.filter((p) => p !== '$id') ?? [];
 
     $: if (!show) {
         data = null;

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte

@@ -37,10 +37,7 @@
     $: options = ($attributes as Models.AttributeString[])
         .filter(
             (attr) =>
-                attr.type === 'string' &&
-                attr?.size <= 50 &&
-                !attr?.array &&
-                !names?.some((name) => name === attr.key)
+                attr.type === 'string' && !attr?.array && !names?.some((name) => name === attr.key)
         )
         .map((attr) => {
             return {
@@ -60,19 +57,28 @@
     <CardGrid>
         <Heading tag="h6" size="7">Display Name</Heading>
         <p class="text">
-            Set string attributes with maximum 50 characters to be used as a display name in the
-            Appwrite console. Maximum 5 names.
+            Select string attributes as display names for your documents. The selected names will be
+            used as short forms to identify documents in the Appwrite console, like when creating
+            database relationships. You can specify up to 5 names.
         </p>
 
         <svelte:fragment slot="aside">
             <div class="u-flex u-flex-vertical u-gap-4">
-                <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
-                    <InputText
-                        id="id"
-                        label="Document ID"
-                        showLabel={false}
-                        placeholder="Document ID"
-                        readonly />
+                <ul class="u-flex-vertical u-gap-8">
+                    <li class="u-flex u-gap-8">
+                        <InputText
+                            id="id"
+                            label="Document ID"
+                            showLabel={false}
+                            placeholder="Document ID"
+                            readonly
+                            fullWidth />
+                        <div class="form-item-part u-cross-child-end u-opacity-0">
+                            <Button text noMargin disabled>
+                                <span class="icon-x" aria-hidden="true" />
+                            </Button>
+                        </div>
+                    </li>
                     {#if names?.length}
                         {#each names as name, i}
                             <div class="u-flex u-gap-8">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -28,6 +28,7 @@
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let data: PageData;
 
@@ -170,22 +171,26 @@
                                 {#if !isRelationshipToMany(attr)}
                                     {#if document[column.id]}
                                         {@const related = document[column.id]}
-                                        <button
-                                            class="link u-flex u-gap-4 u-padding-block-8"
-                                            type="button"
+                                        <div
+                                            tabindex="0"
+                                            class="link is-5px-offset u-trim-1 u-break-word"
+                                            role="button"
+                                            on:keyup={clickOnEnter}
                                             on:click|preventDefault|stopPropagation={() =>
                                                 goto(
                                                     `${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
                                                 )}>
                                             {#each args as arg, i}
                                                 {#if arg !== undefined}
-                                                    {i ? '|' : ''}
+                                                    {#if i}
+                                                        &nbsp;|
+                                                    {/if}
                                                     <span class="text" data-private>
                                                         {related?.[arg]}
                                                     </span>
                                                 {/if}
                                             {/each}
-                                        </button>
+                                        </div>
                                     {:else}
                                         <span class="text">n/a</span>
                                     {/if}

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte

@@ -5,38 +5,14 @@
 
     export let data: PageData;
 
-    $: count = data.count;
-    $: created = data.created;
-    $: read = data.read;
-    $: updated = data.updated;
-    $: deleted = data.deleted;
+    $: count = data.documentsTotal;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
     {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
     countMetadata={{
         legend: 'Documents',
         title: 'Total documents'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Documents created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Documents read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Documents updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Documents deleted'
     }} />

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts

@@ -10,10 +10,6 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        count: response.documentsCount as unknown as Models.Metric[],
-        created: response.documentsCreate as unknown as Models.Metric[],
-        read: response.documentsRead as unknown as Models.Metric[],
-        updated: response.documentsUpdate as unknown as Models.Metric[],
-        deleted: response.documentsDelete as unknown as Models.Metric[]
+        documentsTotal: response.documentsTotal as unknown as Models.Metric[]
     };
 };

src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte

@@ -5,38 +5,14 @@
 
     export let data: PageData;
 
-    $: count = data.count;
-    $: created = data.created;
-    $: read = data.read;
-    $: updated = data.updated;
-    $: deleted = data.deleted;
+    $: count = data.collectionsTotal;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
     {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
     countMetadata={{
         legend: 'Collections',
         title: 'Total collections'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Collections created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Collections read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Collections updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Collections deleted'
     }} />

src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts

@@ -9,10 +9,6 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        count: response.collectionsCount as unknown as Models.Metric[],
-        created: response.collectionsCreate as unknown as Models.Metric[],
-        read: response.collectionsRead as unknown as Models.Metric[],
-        updated: response.collectionsUpdate as unknown as Models.Metric[],
-        deleted: response.collectionsDelete as unknown as Models.Metric[]
+        collectionsTotal: response.collectionsTotal as unknown as Models.Metric[]
     };
 };

src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte

@@ -5,38 +5,14 @@
 
     export let data: PageData;
 
-    $: count = data.count;
-    $: created = data.created;
-    $: read = data.read;
-    $: updated = data.updated;
-    $: deleted = data.deleted;
+    $: count = data.databasesTotal;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/usage`}
     {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
     countMetadata={{
         legend: 'Databases',
         title: 'Total databases'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Databases created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Databases read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Databases updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Databases deleted'
     }} />

src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts

@@ -8,11 +8,7 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.databases.getUsage(period ?? '30d');
         return {
-            count: response.databasesCount as unknown as Models.Metric[],
-            created: response.databasesCreate as unknown as Models.Metric[],
-            read: response.databasesRead as unknown as Models.Metric[],
-            updated: response.databasesUpdate as unknown as Models.Metric[],
-            deleted: response.databasesDelete as unknown as Models.Metric[]
+            databasesTotal: response.databasesTotal as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/functions/+page.svelte

@@ -76,14 +76,14 @@
                         </div>
                     </svelte:fragment>
                     <svelte:fragment slot="icons">
-                        {#if func.scheduleNext}
+                        {#if func.schedule}
                             <li>
                                 <span
                                     class="icon-clock"
                                     aria-hidden="true"
                                     use:tooltip={{
                                         content: `Next execution: 
-                                        ${toLocaleDateTime(func.scheduleNext)}`
+                                        ${toLocaleDateTime(func.schedule)}`
                                     }} />
                             </li>
                         {/if}

src/routes/console/project-[project]/functions/+page.ts

@@ -16,7 +16,7 @@ export const load: PageLoad = async ({ url, depends, route }) => {
         functions: await sdk.forProject.functions.list([
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/functions/function-[function]/+page.svelte

@@ -6,46 +6,48 @@
 </script>
 
 <script lang="ts">
-    import { Button } from '$lib/elements/forms';
+    import { browser } from '$app/environment';
+    import { invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { timer } from '$lib/actions/timer';
     import {
         CardGrid,
         DropList,
         DropListItem,
         Empty,
-        Status,
         Heading,
+        Id,
         PaginationWithLimit,
-        Id
+        Status
     } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import {
-        TableHeader,
         TableBody,
-        TableRow,
-        TableCellHead,
         TableCell,
+        TableCellHead,
         TableCellText,
+        TableHeader,
+        TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { execute, func } from './store';
-    import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
-    import { app } from '$lib/stores/app';
-    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { log } from '$lib/stores/logs';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import type { Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
-    import Delete from './delete.svelte';
-    import Create from './create.svelte';
-    import Rebuild from './rebuild.svelte';
-    import Activate from './activate.svelte';
-    import { browser } from '$app/environment';
-    import { sdk } from '$lib/stores/sdk';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { calculateTime } from '$lib/helpers/timeConversion';
-    import { timer } from '$lib/actions/timer';
+    import { Container } from '$lib/layout';
+    import { app } from '$lib/stores/app';
+    import { log } from '$lib/stores/logs';
+    import { sdk } from '$lib/stores/sdk';
+    import { Query, type Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
+    import type { PageData } from './$types';
+    import Activate from './activate.svelte';
+    import Create from './create.svelte';
+    import Delete from './delete.svelte';
+    import Rebuild from './rebuild.svelte';
+    import { execute, func } from './store';
 
     export let data: PageData;
 
@@ -55,6 +57,18 @@
     let showRebuild = false;
 
     let selectedDeployment: Models.Deployment = null;
+    let activeDeployment: Models.Deployment = null;
+
+    onMount(async () => {
+        activeDeployment = await getActiveDeployment();
+    });
+
+    async function getActiveDeployment() {
+        const list = await sdk.forProject.functions.listDeployments($page.params.function, [
+            Query.equal('$id', $func?.deployment)
+        ]);
+        return list?.deployments?.[0];
+    }
 
     function handleActivate() {
         invalidate(Dependencies.DEPLOYMENTS);

src/routes/console/project-[project]/functions/function-[function]/+page.ts

@@ -16,7 +16,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         deployments: await sdk.forProject.functions.listDeployments(params.function, [
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/functions/function-[function]/executions/+page.ts

@@ -16,7 +16,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         executions: await sdk.forProject.functions.listExecutions(params.function, [
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte

@@ -7,9 +7,7 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-
-    $: count = data.count;
-    $: errors = data.errors;
+    $: count = data.executionsTotal;
 </script>
 
 <Container>
@@ -47,18 +45,4 @@
                 ]} />
         </Card>
     {/if}
-    {#if errors}
-        <Card>
-            <Heading tag="h6" size="6">{total(errors)}</Heading>
-            <p>Errors</p>
-            <div class="u-margin-block-start-16" />
-            <BarChart
-                series={[
-                    {
-                        name: 'Count of function errors over time',
-                        data: [...errors.map((e) => [e.date, e.value])]
-                    }
-                ]} />
-        </Card>
-    {/if}
 </Container>

src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts

@@ -11,8 +11,7 @@ export const load: PageLoad = async ({ params }) => {
         );
 
         return {
-            count: response.executionsTotal as unknown as Models.Metric[],
-            errors: response.buildsFailure as unknown as Models.Metric[]
+            executionsTotal: response.executionsTotal as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/overview/+layout.svelte

@@ -47,7 +47,7 @@
     afterNavigate(handle);
 
     async function handle() {
-        const promise = usage.load(projectId, period);
+        const promise = usage.load(period);
 
         if ($usage) {
             await promise;
@@ -56,7 +56,7 @@
 
     function changePeriod(newPeriod: UsagePeriods) {
         period = newPeriod;
-        usage.load(projectId, period);
+        usage.load(period);
     }
 
     $: $registerCommands([
@@ -95,7 +95,7 @@
             <Onboard {projectId} />
         {:else}
             {#if $usage}
-                {@const storage = humanFileSize(total($usage.storage) ?? 0)}
+                {@const storage = humanFileSize(total($usage.filesStorage) ?? 0)}
                 <section class="common-section">
                     <div class="grid-dashboard-1s-2m-6l">
                         <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -119,14 +119,14 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.documents) ?? 0)}
+                                        {format(total($usage.documentsTotal) ?? 0)}
                                     </div>
                                     <div>Documents</div>
                                 </div>
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Databases: {format(total($usage.databases) ?? 0)}
+                                        Databases: {format(total($usage.databasesTotal) ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -154,7 +154,7 @@
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Buckets: {format(total($usage.buckets) ?? 0)}
+                                        Buckets: {format(total($usage.bucketsTotal) ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -174,7 +174,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.users) ?? 0)}
+                                        {format(total($usage.usersTotal) ?? 0)}
                                     </div>
                                     <div>Users</div>
                                 </div>
@@ -195,7 +195,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.executions) ?? 0)}
+                                        {format(total($usage.executionsTotal) ?? 0)}
                                     </div>
                                     <div>Executions</div>
                                 </div>

src/routes/console/project-[project]/overview/bandwith.svelte

@@ -17,7 +17,7 @@
         date: number;
         value: number;
     }>;
-    $: bandwith = humanFileSize(total($usage.network));
+    $: bandwith = humanFileSize(total($usage?.network));
 
     $: if (period) {
         showPeriod = false;

src/routes/console/project-[project]/overview/onboard.svelte

@@ -14,22 +14,22 @@
 
     const platforms = [
         {
-            title: 'Web App',
+            title: 'Web',
             icon: 'grayscale/code',
             platform: Platform.Web
         },
         {
-            title: 'Flutter App',
+            title: 'Flutter',
             icon: 'color/flutter',
             platform: Platform.Flutter
         },
         {
-            title: 'Apple App',
+            title: 'Apple',
             icon: 'color/apple',
             platform: Platform.Apple
         },
         {
-            title: 'Android App',
+            title: 'Android',
             icon: 'color/android',
             platform: Platform.Android
         }
@@ -48,7 +48,9 @@
     <header class="card-header common-section grid-1-2">
         <div class="grid-1-2-col-1">
             <h2 class="heading-level-5">Getting Started Guide</h2>
-            <p class="u-line-height-1-5">Let's get your project up and running</p>
+            <p class="u-line-height-1-5 u-margin-block-start-12">
+                Here are some next steps to start building
+            </p>
         </div>
         <div class="grid-1-2-col-2 u-flex u-main-end u-cross-end is-not-mobile">
             <img src={onBoardIntro} alt="" class="card-header-image" />
@@ -58,8 +60,8 @@
     <section class="common-section card-separator grid-1-2">
         <div class="grid-1-2-col-1">
             <h3 class="heading-level-7">Add a Platform</h3>
-            <p class="u-line-height-1-5">
-                Our SDK's make it possible to easily add any platform that you want to use.
+            <p class="u-line-height-1-5 u-margin-block-start-16">
+                Our SDKs make it possible to easily integrate with any platform.
             </p>
         </div>
         <div class="grid-1-2-col-2">
@@ -96,8 +98,9 @@
     <section class="common-section grid-1-2">
         <div class="grid-1-2-col-1">
             <h3 class="heading-level-7">Integrate With Your Server</h3>
-            <p class="u-line-height-1-5">
-                Our SDK's make it possible to easily add any platform that you want to use.
+            <p class="u-line-height-1-5 u-margin-block-start-16">
+                Appwrite is designed to adapt to your existing backend. Integrate Appwrite with your
+                backend code base using Server SDKs or Webhooks.
             </p>
         </div>
         <div class="grid-1-2-col-2">
@@ -144,15 +147,15 @@
 
 <article
     class="card u-grid u-width-full-line common-section onboard-cover"
-    style={`background-image: url(${onBoardImage1});`}>
+    style={`background-image: url(${onBoardImage1}); box-shadow: none !important`}>
     <div class="u-flex u-flex-vertical u-cross-center">
         <div class="avatar">
             <i class="icon-lock-closed" />
         </div>
         <div class="common-section">
-            <h7 class="heading-level-7">Add a Platform to View Data About Your Project</h7>
+            <h7 class="heading-level-7">Add a platform to view data about your project</h7>
         </div>
-        <div class="common-section">
+        <div class="u-margin-block-start-16 u-text-center" style:max-width="550px">
             Get insights on bandwidth usage, requests, realtime connections and more after making
             your first API call
         </div>

src/routes/console/project-[project]/overview/platforms/+page.svelte

@@ -156,7 +156,7 @@
                         <svelte:fragment slot="list">
                             <DropListItem on:click={() => addPlatform(Platform.Web)}>
                                 Web App
-                            </DropListItem>
+                            </DropListItem>Ï
                             <DropListItem on:click={() => addPlatform(Platform.Flutter)}>
                                 Flutter App
                             </DropListItem>

src/routes/console/project-[project]/overview/platforms/createAndroid.svelte

@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add an Android Project"
+    title="Add an Android platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />

src/routes/console/project-[project]/overview/platforms/createApple.svelte

@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add an Apple Project"
+    title="Add an Apple platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />

src/routes/console/project-[project]/overview/platforms/createFlutter.svelte

@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add a Flutter Project"
+    title="Add a Flutter platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />

src/routes/console/project-[project]/overview/platforms/createWeb.svelte

@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -35,7 +35,7 @@
         optional: true
     });
     stepsComponents.set(3, {
-        label: "Let's get coding",
+        label: 'Initialize SDK',
         component: Step3,
         optional: true
     });
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add a Web Project"
+    title="Add a web platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />

src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte

@@ -11,8 +11,8 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
-    <p>First, add this to your root level build.gradle file:</p>
+    <p>First, add this to your root level <code class="inline-code">build.gradle</code> file.</p>
     <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
-    <p class="common-section">And add this to your project's build.gradle file:</p>
+    <p class="common-section">And add this to your project's build.gradle file.</p>
     <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
 </WizardStep>

src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Code } from '$lib/components';
+    import Id from '$lib/components/id.svelte';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
 
@@ -14,12 +15,13 @@ val client = Client(context)
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id
+        >.
     </p>
     <Code
         label="Android SDK"

src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte

@@ -48,11 +48,11 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Apple app</svelte:fragment>
+    <svelte:fragment slot="title">Register your bundle ID</svelte:fragment>
 
     <FormList isCommonSection>
         <FormItem>
-            <p>Choose a platform</p>
+            <p>Choose an Apple platform</p>
             <div class="u-flex u-gap-16 u-margin-block-start-8">
                 <Pill
                     button

src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte

@@ -42,7 +42,9 @@
         {#if method === Method.Xcode}
             <ol class="numeric-list">
                 <li class="numeric-list-item">
-                    <span class="text"> Select File > Add Packages </span>
+                    <span class="text">
+                        In the menu bar under Select File, select Add Packages
+                    </span>
                 </li>
                 <li class="numeric-list-item">
                     <span class="text">
@@ -70,9 +72,9 @@
                 </li>
             </ol>
         {:else if method === Method.Swift}
-            <p>Add this to your Package.swift file:</p>
+            <p>Add this to your <code class="inline-code">Package.swift</code> file.</p>
             <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
-            <p class="common-section">Then add the dependency to your target:</p>
+            <p class="common-section">Then add the dependency to your target.</p>
             <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
         {/if}
     </div>

src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte

@@ -3,6 +3,7 @@
     import { WizardStep } from '$lib/layout';
     import { Mode, MODE } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
+    import Id from '$lib/components/id.svelte';
 
     const { endpoint, project } = sdk.forProject.client.config;
     const code = `import Appwrite
@@ -16,24 +17,22 @@ let client = Client()
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id
+        >.
     </p>
     <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
-    <p>
+    <p class="u-margin-block-start-24">
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.
     </p>
-    {#if showAlert}
+    {#if showAlert && MODE === Mode.SELF_HOSTED}
         <div class="common-section">
-            <Alert
-                type="info"
-                dismissible={MODE === Mode.CLOUD}
-                on:dismiss={() => (showAlert = false)}>
+            <Alert type="info" dismissible on:dismiss={() => (showAlert = false)}>
                 <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
                 When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
                 you should use the private IP of the device running your Appwrite project as the hostname

src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte

@@ -106,10 +106,19 @@
         $createPlatform.$id = response.$id;
         $createPlatform.type = platform;
     }
+
+    $: registee = {
+        [Platform.Android]: 'package name',
+        [Platform.Ios]: 'bundle ID',
+        [Platform.Linux]: 'package name',
+        [Platform.Macos]: 'bundle ID',
+        [Platform.Windows]: 'package name',
+        [Platform.Web]: 'hostname'
+    }[platform];
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
+    <svelte:fragment slot="title">Register your {registee}</svelte:fragment>
     <svelte:fragment slot="subtitle">
         <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
             <Pill

src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte

@@ -11,10 +11,13 @@
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
-    <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
+    <p>
+        Add Appwrite SDK to your package's <code class="inline-code">pubspec.yaml</code> file. You can
+        view an example here.
+    </p>
     <Code label="YAML" language="yml" code={example1} withCopy />
     <p class="common-section">
-        You can also install the SDK using the Dart package manager from your terminal:
+        You can also install the SDK using the Dart package manager from your terminal.
     </p>
     <Code label="Bash" language="sh" code={example2} withCopy />
 </WizardStep>

src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte

@@ -3,6 +3,7 @@
     import { WizardStep } from '$lib/layout';
     import { Mode, MODE } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
+    import Id from '$lib/components/id.svelte';
 
     const { endpoint, project } = sdk.forProject.client.config;
     const code = `import 'package:appwrite/appwrite.dart';
@@ -17,12 +18,12 @@ client
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id>
     </p>
     <Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
     <p class="common-section">

src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
+    import { page } from '$app/stores';
     import { WizardStep } from '$lib/layout';
+
+    $: isFirstProject = $page.data.platforms.total === 0;
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
     <p>
-        Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
-        give it a go? Why not add a database to your project, or start uploading files? The choice
-        is up to you.
+        {#if isFirstProject}
+            Congratulations on adding the first platform to your project! Start exploring by
+            creating users, adding a database to your project, or uploading files to a bucket.
+        {:else}
+            Congratulations on adding another platform to your project! Start building by adding a
+            database, uploading files to a bucket and more via your dashboard.
+        {/if}
     </p>
 </WizardStep>

src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Web app</svelte:fragment>
+    <svelte:fragment slot="title">Register your hostname</svelte:fragment>
     <FormList>
         <InputText
             id="name"

src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte

@@ -44,7 +44,7 @@
         </p>
         <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
         <p class="common-section">
-            When you're using a bundler (like <a
+            If you're using a bundler like <a
                 href="https://vitejs.dev"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -52,14 +52,11 @@
             or
             <a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
                 >Rollup</a
-            >), import the Appwrite module when you need it:
+            >, import Appwrite as a module.
         </p>
         <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
     {:else if method === Method.CDN}
-        <p>
-            To install with a CDN (content delivery network) add the following scripts to the bottom
-            of your tag, but before you use any Appwrite services:
-        </p>
+        <p>Add the following script tags to install Appwrite with a CDN.</p>
         <Code label="HTML" language="html" code={example2} withCopy />
     {/if}
 </WizardStep>

src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Code } from '$lib/components';
+    import Id from '$lib/components/id.svelte';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
 
@@ -12,12 +13,13 @@ client
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id
+        >.
     </p>
     <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
 </WizardStep>

src/routes/console/project-[project]/overview/requests.svelte

@@ -12,7 +12,7 @@
 
     const dispatch = createEventDispatcher();
 
-    $: requests = $usage?.requests as unknown as Array<{
+    $: requests = $usage?.requestsTotal as unknown as Array<{
         date: number;
         value: number;
     }>;
@@ -25,7 +25,7 @@
 <div class="u-flex u-gap-16 u-main-space-between">
     <div>
         <div class="heading-level-4">
-            {format(total($usage.requests))}
+            {format(total($usage?.requestsTotal))}
         </div>
         <div>Requests</div>
     </div>
@@ -41,7 +41,7 @@
         </svelte:fragment>
     </DropList>
 </div>
-{#if total($usage.requests) !== 0}
+{#if total($usage?.requestsTotal) !== 0}
     <div style="height: 12rem;">
         <LineChart
             options={{
@@ -54,7 +54,7 @@
             series={[
                 {
                     name: 'Requests',
-                    data: [...requests.map((e) => [e.date, e.value])]
+                    data: [...(requests?.map((e) => [e.date, e.value]) ?? [])]
                 }
             ]} />
     </div>

src/routes/console/project-[project]/overview/store.ts

@@ -2,19 +2,16 @@ import { sdk } from '$lib/stores/sdk';
 import { cachedStore } from '$lib/helpers/cache';
 import type { Models } from '@appwrite.io/console';
 import { writable, type Writable } from 'svelte/store';
-import { isCloud } from '$lib/system';
 
 export const usage = cachedStore<
     Models.UsageProject,
     {
-        load: (projectId: string, range: string) => Promise<void>;
+        load: (range: string) => Promise<void>;
     }
 >('projectUsage', function ({ set }) {
     return {
-        load: async (projectId, range) => {
-            const usages = isCloud
-                ? await sdk.forProject.project.getUsage(range)
-                : await sdk.forConsole.projects.getUsage(projectId, range);
+        load: async (range) => {
+            const usages = await sdk.forProject.project.getUsage(range);
             set(usages);
         }
     };

src/routes/console/project-[project]/storage/+page.ts

@@ -15,7 +15,7 @@ export const load: PageLoad = async ({ url, route }) => {
         buckets: await sdk.forProject.storage.listBuckets([
             Query.limit(limit),
             Query.offset(offset),
-            Query.orderDesc('$createdAt')
+            Query.orderDesc('')
         ])
     };
 };

src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts

@@ -17,7 +17,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         search,
         files: await sdk.forProject.storage.listFiles(
             params.bucket,
-            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
             search
         )
     };

src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte

@@ -5,38 +5,14 @@
 
     export let data: PageData;
 
-    $: count = data.count;
-    $: created = data.created;
-    $: read = data.read;
-    $: updated = data.updated;
-    $: deleted = data.deleted;
+    $: count = data.filesTotal;
 </script>
 
 <Usage
     title="Files"
     path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/usage`}
     {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
     countMetadata={{
         legend: 'Files',
         title: 'Total files'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Files created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Files read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Files updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Files deleted'
     }} />

src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts

@@ -9,10 +9,6 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        count: response.filesCount as unknown as Models.Metric[],
-        created: response.filesCreate as unknown as Models.Metric[],
-        read: response.filesRead as unknown as Models.Metric[],
-        updated: response.filesUpdate as unknown as Models.Metric[],
-        deleted: response.filesDelete as unknown as Models.Metric[]
+        filesTotal: response.filesTotal as unknown as Models.Metric[]
     };
 };

src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte

@@ -4,39 +4,14 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-
-    $: count = data.count;
-    $: created = data.created;
-    $: read = data.read;
-    $: updated = data.updated;
-    $: deleted = data.deleted;
+    $: count = data.bucketsTotal;
 </script>
 
 <Usage
     title="Buckets"
     path={`/console/project-${$page.params.project}/storage/usage`}
     {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
     countMetadata={{
         legend: 'Buckets',
         title: 'Total buckets'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Buckets created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Buckets read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Buckets updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Buckets deleted'
     }} />

src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts

@@ -8,11 +8,7 @@ export const load: PageLoad = async ({ params }) => {
         const response = await sdk.forProject.storage.getUsage(params.period ?? '30d');
 
         return {
-            count: response.bucketsCount as unknown as Models.Metric[],
-            created: response.bucketsCreate as unknown as Models.Metric[],
-            read: response.bucketsRead as unknown as Models.Metric[],
-            updated: response.bucketsUpdate as unknown as Models.Metric[],
-            deleted: response.bucketsDelete as unknown as Models.Metric[]
+            bucketsTotal: response.bucketsTotal as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);