Various fixes for adding screenshots and improving platform overview

src/routes/docs/advanced/platform/+layout.svelte

@@ -88,7 +88,7 @@
 					href: '/docs/advanced/platform/custom-domains'
 				},
 				{	
-					label: 'Email and SMS templates',
+					label: 'Message templates',
 					href: '/docs/advanced/platform/message-templates'
 				},
 			]

src/routes/docs/advanced/platform/+page.markdoc

@@ -7,3 +7,67 @@ description: Appwrite is a development platform designed to adapt you unique use
 Appwrite is a development platform designed to adapt your unique use cases.
 Appwrite provides features that help you maintain, scale, and integrate Appwrite with other platforms.
 
+# Integration
+Appwrite is designed to integrate with both frontend and backend apps.
+Learn about advanced integrations and API response codes.
+
+{% cards %}
+{% cards_item href="/docs/advanced/platform/events" title="Events" %}
+Appwrite allows you to react to events that occur on the platform.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/webhooks" title="Webhooks" %}
+Use webhooks to update backend integrations about Appwrite events.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/response-codes" title="Response codes" %}
+Learn about response codes and errors returned by Appwrite APIs.
+{% /cards_item %}
+{% /cards %}
+
+# Access control
+Appwrite is secure by default and provides tools for you to manage 
+access control and prevent abuse.
+{% cards %}
+{% cards_item href="/docs/advanced/platform/permissions" title="Permissions" %}
+Control which users can access which resources.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/rate-limits" title="Rate limits" %}
+Appwrite has rate limits on some endpoints to prevent abuse.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/api-keys" title="API keys" %}
+Create and manage API keys use by Server SDKs.
+{% /cards_item %}
+{% /cards %}
+
+# Plans
+Learn which plan best suits your organization and how to manage billing.
+{% cards %}
+{% cards_item href="/docs/advanced/platform/billing" title="Billing" %}
+Learn to manage your billing information.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/starter" title="Starter" %}
+Learn about Appwrite Starter. Free plan for hobby projects and learners.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/pro" title="Pro" %}
+Learn about Appwrite Pro, for growing organizations that need to scale.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/scale" title="Scale" %}
+Coming soon.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/enterprise" title="Enterprise" %}
+Coming soon.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/oss" title="Open source" %}
+Appwrite provides special plans for open source projects.
+{% /cards_item %}
+{% /cards %}
+
+# Configuration
+Configure custom domains and customize communication templates.
+{% cards %}
+{% cards_item href="/docs/advanced/platform/custom-domains" title="Custom domains" %}
+Add a custom domain for your Appwrite APIs.
+{% /cards_item %}
+{% cards_item href="/docs/advanced/platform/message-templates" title="Message templates" %}
+Create custom branding and messages when you communicate with users..
+{% /cards_item %}
+{% /cards %}

src/routes/docs/advanced/platform/billing/+page.markdoc

@@ -33,6 +33,7 @@ If you'd like you or your company's tax ID displayed on your generated invoice,
 Appwrite allows you to set budget caps when on your organizations. 
 Appwrite will automatically scale your projects by purchasing add-ons as they require more resources.
 Budget caps limit the amount of automatic scaling and prevent unexpected bills.
+This budget cap does **not include the plan's recurring cost**, only add-ons.
 
 You can enable budget caps under **Budget cap**, toggle the option **Enable budget cap**.
 You will be able to set a budget cap in USD.

src/routes/docs/products/storage/buckets/+page.markdoc

@@ -14,6 +14,12 @@ You can create your bucket from the Appwrite Console or a [Server SDK](/docs/sdk
 {% tabsitem #console title="Console" %}
 You can create a bucket by heading to the **Storage** page and clicking **Create bucket**.
 
+{% only_dark %}
+![Create bucket on console](/images/docs/storage/dark/create-bucket.png)
+{% /only_dark %}
+{% only_light %}
+![Create bucket on console](/images/docs/storage/create-bucket.png)
+{% /only_light %}
 {% /tabsitem %}
 
 {% tabsitem #server-sdk title="Server SDK" %}

src/routes/docs/tooling/assistant/+page.markdoc

@@ -6,6 +6,13 @@ description: AI-powered assistant for precise Appwrite tasks. Code snippets, tro
 
 The **Appwrite Assistant** is an AI-powered tool engineered to augment Appwrite-related tasks with technical precision. It operates on a foundation of training data sourced from the Appwrite documentation website, enabling it to furnish insights into Appwrite's features, APIs, and documentation. Additionally, it offers functionality for code snippet generation, sample project creation, and problem troubleshooting.
 
+{% only_dark %}
+![Using Appwrite Assistant's AI features](/images/docs/assistant/dark/ask-ai.png)
+{% /only_dark %}
+{% only_light %}
+![Using Appwrite Assistant's AI features](/images/docs/assistant/ask-ai.png)
+{% /only_light %}
+
 {% info title="Development" %}
 While the Appwrite Assistant remains under active development and is considered experimental, it undergoes incremental refinement. Its proficiency in comprehending user queries and delivering relevant responses improves with sustained usage.
 {% /info %}

src/routes/docs/tutorials/+page.svelte

@@ -52,94 +52,64 @@
         <header class="aw-article-header">
             <div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
                 <div class="u-position-relative u-flex u-cross-center">
-                    <h1 class="aw-title">Platforms</h1>
+                    <h1 class="aw-title">Tutorials</h1>
                 </div>
             </div>
             <div class="aw-article-header-end" />
         </header>
         <div class="aw-article-content aw-u-gap-80">
-            <section class="u-flex-vertical u-gap-24">
-                <h2 class="aw-eyebrow">Client</h2>
-                <ul class="tutorial-grid">
-                    {#each data.tutorials as tutorial}
-                        <li>
-                            <a href={tutorial.href} class="aw-card is-normal">
-                                <header>
-                                    <span
-                                        class="{getIcon(tutorial)} aw-u-font-size-24"
-                                        aria-hidden="true"
-                                    />
-                                    <h3 class="aw-sub-body-500 aw-u-color-text-primary">
-                                        {tutorial.framework}
-                                    </h3>
-                                </header>
-                                <p class="aw-sub-body-400 u-margin-block-start-4">
-                                    {tutorial.title}
-                                </p>
-                            </a>
-                        </li>
-                    {/each}
-                </ul>
-                <ul class="tutorial-grid">
-                    {#each data.drafts as draft}
-                        <li>
-                            <a
-                                href={draft.href}
-                                class="aw-card is-normal draft"
-                                aria-disabled="true"
-                                tabindex="-1"
-                            >
-                                <header>
-                                    <span
-                                        class="{getIcon(draft)} aw-u-font-size-24"
-                                        aria-hidden="true"
-                                    />
-                                    <h3 class="aw-sub-body-500 aw-u-color-text-primary">
-                                        {draft.framework}
-                                    </h3>
-                                    <span class="badge aw-caption-400">Coming Soon</span>
-                                </header>
-                            </a>
-                        </li>
-                    {/each}
-                </ul>
-            </section>
+            {#each data.tutorials as category}
+                <section class="u-flex-vertical u-gap-24">
+                    <h2 class="aw-eyebrow">{category.title}</h2>
+                    <ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
+                        {#each category.tutorials as tutorial}
+                            <li>
+                                {#if tutorial.draft === true}
+                                    <a
+                                        href={tutorial.href}
+                                        class="aw-card is-normal draft"
+                                        aria-disabled="true"
+                                        tabindex="-1"
+                                    >
+                                        <header class="u-flex u-cross-baseline u-gap-4">
+                                            <span
+                                                class="{getIcon(tutorial)} aw-u-font-size-24"
+                                                aria-hidden="true"
+                                            />
+                                            <h3 class="aw-sub-body-500 aw-u-color-text-primary">
+                                                {tutorial.framework}
+                                            </h3>
+                                            <span class="badge aw-caption-400">Coming Soon</span>
+                                        </header>
+                                    </a>
+                                {:else}
+                                    <a href={tutorial.href} class="aw-card is-normal">
+                                        <header class="u-flex u-cross-baseline u-gap-4">
+                                            <span
+                                                class="{getIcon(tutorial)} aw-u-font-size-24"
+                                                aria-hidden="true"
+                                            />
+                                            <h3 class="aw-sub-body-500 aw-u-color-text-primary">
+                                                {tutorial.framework}
+                                            </h3>
+                                        </header>
+                                        <p class="aw-sub-body-400 u-margin-block-start-4">
+                                            {tutorial.title}
+                                        </p>
+                                    </a>
+                                {/if}
+                            </li>
+                        {/each}
+                    </ul>
+                </section>
+            {/each}
         </div>
     </article>
 
     <MainFooter variant="docs" />
 </main>
 
 <style lang="scss">
-    .tutorial-grid {
-        display: grid;
-        gap: 1.5rem; // 24px
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-
-        .aw-card {
-            padding: 1.25rem;
-
-            header {
-                display: flex;
-                gap: 0.25rem;
-                align-items: center;
-
-                > [class*='icon'] {
-                    position: relative;
-                    width: 1.5rem;
-                    height: 1.5rem;
-
-                    &::before {
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, calc(-50%));
-                    }
-                }
-            }
-        }
-    }
-
     .badge {
         border-radius: 0.25rem;
         background: rgba(253, 54, 110, 0.24);

src/routes/docs/tutorials/+page.ts

@@ -2,6 +2,8 @@ import { base } from '$app/paths';
 import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
 
 const framework_order = ['React', 'Vue', 'SvelteKit', 'Stripe', 'Refine'];
+const category_order = ['Web', 'Mobile and native', 'Server', 'Auth', 'Databases', 'Storage', 'Functions'];
+
 
 export async function load() {
     const tutorialsGlob = import.meta.glob('./**/step-1/+page.markdoc', {
@@ -18,11 +20,12 @@ export async function load() {
                 .replace('/+page.markdoc', '')
                 .replace('/step-1', '');
             const tutorialName = slug.slice(slug.lastIndexOf('/') + 1);
-
+            
             return {
                 title: frontmatter.title,
                 framework: frontmatter.framework,
-                draft: frontmatter.draft,
+                draft: frontmatter.draft || false,
+                category: frontmatter.category,
                 href: `${base}/docs/tutorials/${tutorialName}`
             };
         })
@@ -41,12 +44,23 @@ export async function load() {
             // Else, sort by title
             return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
         });
+
+        const tutorials = Object.entries(
+            allTutorials.reduce((acc: { [key: string]: any[] }, item) => {
+                // If the category does not exist in the accumulator, initialize it
+                if (!acc[item.category]) {
+                    acc[item.category] = [];
+                }
 
-    const drafts = allTutorials.filter((tutorial) => tutorial.draft);
-    const tutorials = allTutorials.filter((tutorial) => !tutorial.draft);
+                // Push the current item into the appropriate category
+                acc[item.category].push(item);
 
+                return acc;
+            }, {})
+        ).map(([title, tutorials]) => ({ title, tutorials }));
+
+        tutorials.sort((a, b) => category_order.indexOf(a.title) - category_order.indexOf(b.title));
     return {
         tutorials,
-        drafts
     };
 }

src/routes/docs/tutorials/android/step-1/+page.markdoc

@@ -3,6 +3,7 @@ layout: tutorial
 title: Coming soon
 description: Learn to build an Android app with no backend code using an Appwrite backend.
 framework: Android
+category: Mobile and native
 step: 1
 draft: true
 ---

src/routes/docs/tutorials/apple/step-1/+page.markdoc

@@ -3,6 +3,7 @@ layout: tutorial
 title: Coming soon
 description: Learn to build an Apple app with no backend code using an Appwrite backend.
 framework: Apple
+category: Mobile and native
 step: 1
 draft: true
 ---

src/routes/docs/tutorials/flutter/step-1/+page.markdoc

@@ -3,6 +3,7 @@ layout: tutorial
 title: Coming soon
 description: Learn to build an Flutter app with no backend code using an Appwrite backend.
 framework: Flutter
+category: Mobile and native 
 step: 1
 draft: true
 ---

src/routes/docs/tutorials/react/step-1/+page.markdoc

@@ -5,6 +5,7 @@ description: Learn to build a React app with no backend code using an Appwrite b
 step: 1
 difficulty: beginner
 readtime: 10
+category: Web
 framework: React
 ---
 

src/routes/docs/tutorials/refine/step-1/+page.markdoc

@@ -6,6 +6,7 @@ step: 1
 difficulty: beginner
 readtime: 10
 framework: Refine
+category: Web
 ---
 
 **Blog admin panel**: a CRUD app to manage Blog content.

src/routes/docs/tutorials/subscriptions-with-stripe/step-1/+page.markdoc

@@ -6,6 +6,7 @@ step: 1
 difficulty: easy
 readtime: 10
 framework: Stripe
+category: Functions
 ---
 As you app grows, you may start offering paid services or features.
 This is an important part of growing your idea into a business.

src/routes/docs/tutorials/sveltekit-auth/step-1/+page.markdoc

@@ -6,6 +6,7 @@ step: 1
 difficulty: beginner
 readtime: 20
 framework: SvelteKit
+category: Auth
 ---
 
 Appwrite takes away your stress of building and maintaining a backend. Appwrite helps you implement authentication, databases, file storage, and respond to real-time events with **secure** APIs out of the box. 

src/routes/docs/tutorials/sveltekit/step-1/+page.markdoc

@@ -6,6 +6,7 @@ step: 1
 difficulty: beginner
 readtime: 10
 framework: SvelteKit
+category: Web
 ---
 
 **Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.

src/routes/docs/tutorials/vue/step-1/+page.markdoc

@@ -5,6 +5,7 @@ description: Learn to build an idea tracker app with Appwrite and Vue with authe
 step: 1
 back: /docs
 framework: Vue
+category: Web
 ---
 
 **Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.