feat: credit flow

src/lib/layout/unauthenticated.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Heading } from '$lib/components';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.png';
@@ -8,13 +9,21 @@
 
     export const imgLight = LoginLight;
     export const imgDark = LoginDark;
+
+    export let variation: 'default' | 'gradient' = 'gradient';
 </script>
 
 <main class="grid-1-1 is-full-page" id="main">
     <section
         class="u-flex u-flex-vertical"
-        style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
-        <div class="logo u-flex u-gap-16 is-not-mobile">
+        class:side-bg={variation === 'gradient'}
+        style:--url={variation === 'gradient'
+            ? ''
+            : `url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
+        <div
+            class="logo u-flex u-gap-16 is-not-mobile"
+            class:u-margin-inline-auto={variation === 'gradient'}
+            style="z-index: 10">
             <a href={user ? '/console' : '/'}>
                 {#if $app.themeInUse === 'dark'}
                     <img
@@ -32,11 +41,40 @@
             </a>
         </div>
 
-        <div class="u-flex u-stretch" />
+        {#if variation === 'default'}
+            <div class="u-flex u-stretch" />
 
-        <div class="tag-line is-not-mobile">
-            <p>Build like a team of hundreds<span class="underscore">_</span></p>
-        </div>
+            <div class="tag-line is-not-mobile">
+                <p>Build like a team of hundreds<span class="underscore">_</span></p>
+            </div>
+        {:else if variation === 'gradient'}
+            <div class="u-flex u-flex-vertical u-main-center u-cross-center" style=" height: 100%">
+                {#if $app.themeInUse === 'dark'}
+                    <img
+                        src="/images/3D-card-illust-dark.png"
+                        class="u-block"
+                        width="401"
+                        height="243"
+                        alt="promo" />
+                {:else}
+                    <img
+                        src="/images/3D-card-illust-light.png"
+                        class="u-block"
+                        width="401"
+                        height="243"
+                        alt="promo" />
+                {/if}
+                <div class="u-text-center">
+                    <Heading size="4" tag="h3" class="u-margin-block-start-56">
+                        You've received $15 in credits
+                    </Heading>
+                    <p class="body-text-1 u-margin-block-start-8">
+                        Get $15 in credits when you sign up and create an organization with a Pro
+                        plan.
+                    </p>
+                </div>
+            </div>
+        {/if}
     </section>
     <section class="grid-1-1-col-2 u-flex u-flex-vertical u-cross-center u-main-center">
         <slot name="top" />
@@ -82,6 +120,53 @@
 
 <style lang="scss">
     @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    @import '@appwrite.io/pink/src/abstract/variables/_common.scss';
+
+    .side-bg {
+        position: relative;
+        background-color: #ededf0;
+        overflow: hidden;
+    }
+    .side-bg::before {
+        position: absolute;
+        // inset-block-start: -950px;
+        inset-block-start: -1450px;
+        inset-inline-end: -650px;
+        content: '';
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        background: radial-gradient(49.55% 43.54% at 47% 50.69%, #e7f8f7 0%, #85dbd8 100%);
+        filter: blur(250px);
+        @media #{$break1} {
+            // inset-block-start: -200px;
+            inset-block-start: -500px;
+            inset-inline-end: -400px;
+            filter: blur(100px);
+        }
+    }
+    .side-bg::after {
+        position: absolute;
+        // inset-block-end: -850px;
+        inset-block-end: -1250px;
+        inset-inline-start: -600px;
+        content: '';
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        background: radial-gradient(50% 46.73% at 50% 53.27%, #fe9567 28.17%, #fd366e 59.38%);
+        filter: blur(250px);
+
+        @media #{$break1} {
+            // inset-block-end: -200px;
+            inset-block-end: -400px;
+            inset-inline-start: -400px;
+            filter: blur(100px);
+        }
+    }
+    :global(.theme-dark) .side-bg {
+        background-color: #19191d;
+    }
 
     /* Default (including mobile) */
     #main section:first-child {

src/routes/console/organization-[organization]/change-plan/+page.svelte

@@ -360,6 +360,9 @@
             {/if}
         </Form>
         <svelte:fragment slot="aside">
+            <div>
+                <img src="/images/3D-card-illust-light.png" alt="" />
+            </div>
             {#if billingPlan !== BillingPlan.STARTER && $organization.billingPlan !== BillingPlan.PRO}
                 <EstimatedTotalBox
                     {billingPlan}

src/routes/login/+page.ts

@@ -0,0 +1,14 @@
+import type { Coupon } from '$lib/sdk/billing.js';
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ url }) => {
+    let couponData: Coupon;
+    if (url.searchParams.has('code')) {
+        const code = url.searchParams.get('code');
+        couponData = await sdk.forConsole.billing.getCoupon(code);
+    }
+
+    return {
+        couponData
+    };
+};