From 8a6be9ec6f89ae6b438a7bec9b772c5ae0eb4e08 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 26 Apr 2023 18:56:12 +0100
Subject: [PATCH] feat: floating signup clouds

---
 src/lib/images/login/cloud-1.svg      | 12 ++++++
 src/lib/images/login/cloud-2.svg      | 11 +++++
 src/lib/layout/unauthenticated.svelte | 62 ++++++++++++++++++++++-----
 3 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/images/login/cloud-1.svg
 create mode 100644 src/lib/images/login/cloud-2.svg

diff --git a/src/lib/images/login/cloud-1.svg b/src/lib/images/login/cloud-1.svg
new file mode 100644
index 000000000..a56f11b0a
--- /dev/null
+++ b/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>
diff --git a/src/lib/images/login/cloud-2.svg b/src/lib/images/login/cloud-2.svg
new file mode 100644
index 000000000..f11896e56
--- /dev/null
+++ b/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>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 1d8072d14..c34b9531a 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import AppwriteLogo from '$lib/images/appwrite.svg';
-    import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
-    import AppwriteCloudBg from '$lib/images/login/cloud-bg.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 { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { isCloud } from '$lib/system';
+    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    import LoginLight from '$lib/images/login/login-light-mode.svg';
+    import AppwriteLogo from '$lib/images/appwrite.svg';
+    import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
+    import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
+    import Cloud1 from '$lib/images/login/cloud-1.svg';
+    import Cloud2 from '$lib/images/login/cloud-2.svg';
 
     export let imgLight = LoginLight;
     export let imgDark = LoginDark;
@@ -40,12 +42,14 @@
 <main class="grid-1-1 is-full-page" id="main">
     {#if isCloud}
         <section
-            class="grid-1-1-col-1 u-flex u-flex-vertical cloud-section"
+            class="grid-1-1-col-1 u-flex u-flex-vertical cloud-section u-overflow-hidden"
             style:--url={`url(${AppwriteCloudBg})`}>
             <div class="u-margin-block-start-auto" />
             <div class="u-margin-block-start-auto" />
             <div class="u-margin-block-start-auto" />
             <div class="u-margin-block-start-auto" />
+            <div class="u-margin-block-start-auto" />
+            <div class="u-margin-block-start-auto" />
 
             <a class="logo" href={user ? '/console' : '/'}>
                 <img
@@ -56,7 +60,11 @@
                     alt="Appwrite" />
             </a>
 
-            <p class="header">Cloud is Live</p>
+            <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" />
 
@@ -65,6 +73,7 @@
             <div class="u-margin-block-start-auto" />
             <div class="u-margin-block-start-auto" />
             <div class="u-margin-block-start-auto" />
+            <div class="u-margin-block-start-auto" />
 
             <div class="u-margin-block-start-auto is-no-mobile" />
             <div
@@ -170,6 +179,18 @@
 </main>
 
 <style lang="scss">
+    @keyframes float {
+        0% {
+            transform: translatey(0px);
+        }
+        50% {
+            transform: translatey(-8px);
+        }
+        100% {
+            transform: translatey(0px);
+        }
+    }
+
     .cloud-section {
         background: var(--url);
         background-repeat: no-repeat;
@@ -185,9 +206,30 @@
         .header {
             text-align: center;
             align-self: center;
-            font-family: 'Poppins';
-            font-size: 5.25rem;
-            font-weight: 700;
+            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 {