feat: design review fixes and some logic

src/lib/components/billing/estimatedTotalBox.svelte

@@ -35,6 +35,7 @@
     class="card u-margin-block-start-32 u-flex u-flex-vertical u-gap-8"
     style:--p-card-padding="1.5rem"
     style:--p-card-border-radius="var(--border-radius-small)">
+    <slot />
     <span class="u-flex u-main-space-between">
         <p class="text">{currentPlan.name} plan</p>
         <p class="text">{formatCurrency(currentPlan.price)}</p>

src/lib/elements/forms/inputText.svelte

@@ -108,7 +108,7 @@
     <div
         class:input-text-wrapper={!$$slots.default}
         class:u-flex={$$slots.default}
-        class:u-gap-16={$$slots.default}
+        class:u-gap-8={$$slots.default}
         class:u-cross-center={$$slots.default}>
         <input
             {id}

src/lib/layout/unauthenticated.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Avatar, Card, Heading } from '$lib/components';
+    import { Avatar, AvatarInitials, Card, 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';
@@ -112,13 +112,13 @@
             </section>
         {:else if variation === 'review'}
             <section
-                class="u-flex u-flex-vertical u-main-center u-cross-center u-height-100-percent u-width-full-line">
-                <div class="u-text-center auth-container">
-                    <div class="is-only-mobile u-width-full-line u-margin-block-start">
+                class="u-flex u-flex-vertical u-main-center u-cross-center u-height-100-percent u-width-full-line auth-container">
+                <div class="u-text-center">
+                    <div class="is-only-mobile u-width-full-line">
                         <Heading
                             size="5"
                             tag="h3"
-                            class="u-margin-block-start-16"
+                            class="u-margin-block-start-48"
                             trimmed={false}
                             style="font-weight:normal">
                             {generateTitle()}
@@ -135,16 +135,22 @@
                         </Heading>
                     </div>
                 </div>
-                <div class="auth-container u-margin-block-start-48">
+
+                <p class="body-text-1 u-margin-block-start-16 u-text-center">{generateDesc()}</p>
+                <div class="auth-container u-margin-block-start-64">
                     <Card style="--p-card-padding: 1.25rem">
-                        <p>
+                        <p class="body-text-1">
                             {currentReview.review}
                         </p>
                         <div class="u-margin-block-start-16 u-flex u-gap-16">
-                            <Avatar
-                                src="https://unsplash.it/200"
-                                name={currentReview.name}
-                                size={40} />
+                            {#if currentReview?.img}
+                                <Avatar
+                                    src={currentReview.img}
+                                    name={currentReview.name}
+                                    size={40} />
+                            {:else}
+                                <AvatarInitials size={40} name={currentReview.name} />
+                            {/if}
                             <div>
                                 <p class="body-text-2 u-bold">{currentReview.name}</p>
                                 <p class="body-text-2">{currentReview.desc}</p>

src/lib/stores/campaigns.ts

@@ -54,6 +54,9 @@ campaigns
             "We're excited to have you on board. Add your credit code to your Appwrite Pro account to join.",
         onlyNewOrgs: true,
         data: {
+            cta: 'Get everything out of Cloud with Pro',
+            claimed: 'Your credits will be valid for 12 months.',
+            unclaimed: 'Apply your code to join the Startups program.',
             reviews: [
                 {
                     name: 'David Foster',

src/routes/console/apply-credit/+page.svelte

@@ -254,15 +254,7 @@
             </FormList>
         </Form>
         <svelte:fragment slot="aside">
-            {#if campaign?.template === 'review'}
-                <div
-                    class="box card-container u-position-relative"
-                    style:--box-border-radius="var(--border-radius-small)">
-                    <p>
-                        {campaign.description}
-                    </p>
-                </div>
-            {:else if campaign?.template === 'card'}
+            {#if campaign?.template === 'card'}
                 <div
                     class="box card-container u-position-relative"
                     style:--box-border-radius="var(--border-radius-small)">
@@ -303,7 +295,20 @@
                     billingPlan={BillingPlan.PRO}
                     {collaborators}
                     bind:couponData
-                    bind:billingBudget />
+                    bind:billingBudget>
+                    {#if campaign?.template === 'review' && (campaign?.data?.cta || campaign?.data?.claimed || campaign?.data?.unclaimed)}
+                        <div class="u-margin-block-end-24">
+                            <p class="body-text-1 u-bold">{campaign?.data?.cta}</p>
+                            <p class="text u-margin-block-start-8">
+                                {#if couponData?.code && couponData?.status === 'active' && campaign?.data?.claimed}
+                                    {campaign?.data?.claimed}
+                                {:else if campaign?.data?.unclaimed}
+                                    {campaign?.data?.unclaimed}
+                                {/if}
+                            </p>
+                        </div>
+                    {/if}
+                </EstimatedTotalBox>
             {/if}
         </svelte:fragment>
     </WizardSecondaryContent>