From 68479d7e85f48a8ecc5096f72269adca12ff8be8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 13 Jun 2024 18:13:47 +0200
Subject: [PATCH] feat: startups program

---
 .../organization-[organization]/+page.svelte  |  3 +
 .../startupsProgram.svelte                    | 57 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 src/routes/console/organization-[organization]/startupsProgram.svelte

diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 95dd694b2..ca343b884 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -31,6 +31,7 @@
     import type { RegionList } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
     import { organization } from '$lib/stores/organization';
+    import StartupsProgram from './startupsProgram.svelte';
 
     export let data;
 
@@ -224,6 +225,8 @@
             limit={data.limit}
             offset={data.offset}
             total={data.projects.total} />
+
+        <StartupsProgram />
     </Container>
 
     <CreateOrganization bind:show={addOrganization} />
diff --git a/src/routes/console/organization-[organization]/startupsProgram.svelte b/src/routes/console/organization-[organization]/startupsProgram.svelte
new file mode 100644
index 000000000..609dbc837
--- /dev/null
+++ b/src/routes/console/organization-[organization]/startupsProgram.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { Avatar, Card, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+</script>
+
+<Heading size="5" tag="h2" class="u-margin-block-start-48">Startups Program</Heading>
+<div
+    class="u-margin-block-start-16 grid-1-2"
+    style:column-gap="1rem"
+    style:grid-template-columns="1.5fr 1fr">
+    <Card isTile class="u-flex u-flex-vertical-mobile u-gap-24">
+        <div class="u-flex-vertical u-gap-24">
+            <div class="u-flex u-gap-16">
+                <Avatar size={40} src="https://unsplash.it/200" name="Tessa Mero" />
+                <div class="u-cross-child-center u-line-height-1-5">
+                    <h4 class="body-text-1 u-bold">Tessa Mero</h4>
+                    <h5 class="body-text-2 u-bold u-color-text-offline">Developer Advocate</h5>
+                    <p class="text u-margin-block-start-8 u-trim-1">
+                        Contact Tessa with any questions you might have about Appwrite.
+                    </p>
+                </div>
+            </div>
+            <Button secondary fullWidth>
+                <span class="text">Schedule a call</span>
+                <span class="icon-external-link"></span>
+            </Button>
+        </div>
+
+        <div class="divider is-not-mobile" style="height: 100%; width:1px" />
+        <div class="divider is-only-mobile" />
+        <div class="u-flex-vertical u-gap-24">
+            <div class="u-flex u-gap-16">
+                <Avatar size={40} src="https://unsplash.it/200" name="Tessa Mero" />
+                <div class="u-cross-child-center u-line-height-1-5">
+                    <h4 class="body-text-1 u-bold">Private channel</h4>
+                    <h5 class="body-text-2 u-bold u-color-text-offline">#acme-corp-appwrite</h5>
+                    <p class="text u-margin-block-start-8 u-trim-1">
+                        Visit your dedicated Discord channel to chat with our team of engineers.
+                    </p>
+                </div>
+            </div>
+            <Button secondary fullWidth>
+                <span class="text">Message us on Discord</span>
+                <span class="icon-external-link"></span>
+            </Button>
+        </div>
+    </Card>
+    <Card isTile>
+        <h4 class="body-text-1 u-bold">Private channel</h4>
+        <div class="card u-margin-block-start-16">
+            <div class="u-flex u-flex-vertical u-main-center u-cross-center u-gap-8">
+                <h5 class="body-text-2 u-bold u-text-center">No events scheduled</h5>
+                <p class="text u-text-center">Please check back later</p>
+            </div>
+        </div>
+    </Card>
+</div>