Add tooltip to specifications

src/lib/wizards/functions/components/specificationsTooltip.svelte

@@ -0,0 +1,30 @@
+<div class="u-flex-vertical u-gap-16">
+    <div class="u-flex-vertical u-gap-8">
+        <p>Additional CPU and RAM are available for Pro and Scale teams.</p>
+        <p>
+            <a
+                class="link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://appwrite.io/docs/products/functions/specificatinos">Learn more</a>
+        </p>
+    </div>
+</div>
+
+<style>
+    div {
+        color: hsl(var(--color-neutral-50));
+        line-height: 1.25rem;
+        &:first-child {
+            color: hsl(var(--color-neutral-70));
+        }
+    }
+
+    :global(.theme-dark) div {
+        color: hsl(var(--color-neutral-20));
+
+        &:first-child {
+            color: hsl(var(--color-neutral-10));
+        }
+    }
+</style>

src/lib/wizards/functions/steps/templateConfiguration.svelte

@@ -5,7 +5,11 @@
     import { WizardStep } from '$lib/layout';
     import { runtimesList } from '$lib/stores/runtimes';
     import { specificationsList } from '$lib/stores/specifications';
+    import { BillingPlan } from '$lib/constants';
+    import SpecificationsTooltip from '../components/specificationsTooltip.svelte';
     import { template, templateConfig } from '../store';
+    import { organization } from '$lib/stores/organization';
+    import { isCloud } from '$lib/system';
 
     let showCustomId = false;
 
@@ -99,6 +103,9 @@
                 required
                 disabled={specificationOptions.length < 1}
                 options={specificationOptions}
+                popover={isCloud && $organization?.billingPlan === BillingPlan.FREE
+                    ? SpecificationsTooltip
+                    : null}
                 bind:value={$templateConfig.specification} />
         {/await}
     </FormList>