From 9c716514ce04cfa8acb44dd32f636f608b7ff1b5 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 2 Jan 2024 09:25:53 +0000
Subject: [PATCH 1/3] fix assets navigation

---
 src/lib/components/TocNav.svelte              | 102 ++
 src/lib/components/TocRoot.svelte             |  39 +
 .../components/TocTree.svelte}                |   4 +-
 src/markdoc/layouts/Policy.svelte             | 172 +---
 src/routes/assets/+page.svelte                | 954 +++++++++---------
 5 files changed, 663 insertions(+), 608 deletions(-)
 create mode 100644 src/lib/components/TocNav.svelte
 create mode 100644 src/lib/components/TocRoot.svelte
 rename src/{markdoc/layouts/PolicyTree.svelte => lib/components/TocTree.svelte} (94%)

diff --git a/src/lib/components/TocNav.svelte b/src/lib/components/TocNav.svelte
new file mode 100644
index 0000000000..be80d2108b
--- /dev/null
+++ b/src/lib/components/TocNav.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { getTocCtx } from './TocRoot.svelte';
+    import TocTree from './TocTree.svelte';
+
+    export let showToc = true;
+
+    const {
+        toc: {
+            elements: { item },
+            states: { activeHeadingIdxs, headingsTree }
+        }
+    } = getTocCtx();
+
+    $: progress = Math.max(...$activeHeadingIdxs) / ($headingsTree.length - 1);
+</script>
+
+<aside class="aw-grid-120-1fr-auto-side" class:aw-is-mobile-closed={!showToc}>
+    <div class="aw-page-steps">
+        <div class="aw-page-steps-location aw-is-not-mobile" style="--location:{progress * 100}%;">
+            <span class="aw-page-steps-location-button">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                >
+                    <g clip-path="url(#clip0_1684_10747)">
+                        <g filter="url(#filter0_b_1684_10747)">
+                            <circle
+                                cx="8"
+                                cy="8"
+                                r="8"
+                                fill="url(#paint0_linear_1684_10747)"
+                                fill-opacity="0.32"
+                            />
+                            <circle
+                                cx="8"
+                                cy="8"
+                                r="7.75"
+                                stroke="url(#paint1_linear_1684_10747)"
+                                stroke-width="0.5"
+                            />
+                        </g>
+                        <circle cx="8" cy="7.99219" r="3" fill="white" />
+                    </g>
+                    <defs>
+                        <filter
+                            id="filter0_b_1684_10747"
+                            x="-200"
+                            y="-200"
+                            width="416"
+                            height="416"
+                            filterUnits="userSpaceOnUse"
+                            color-interpolation-filters="sRGB"
+                        >
+                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                            <feGaussianBlur in="BackgroundImageFix" stdDeviation="100" />
+                            <feComposite
+                                in2="SourceAlpha"
+                                operator="in"
+                                result="effect1_backgroundBlur_1684_10747"
+                            />
+                            <feBlend
+                                mode="normal"
+                                in="SourceGraphic"
+                                in2="effect1_backgroundBlur_1684_10747"
+                                result="shape"
+                            />
+                        </filter>
+                        <linearGradient
+                            id="paint0_linear_1684_10747"
+                            x1="2.02105"
+                            y1="1.10843"
+                            x2="16.3872"
+                            y2="17.2901"
+                            gradientUnits="userSpaceOnUse"
+                        >
+                            <stop stop-color="white" stop-opacity="0.4" />
+                            <stop offset="1" stop-color="white" stop-opacity="0" />
+                        </linearGradient>
+                        <linearGradient
+                            id="paint1_linear_1684_10747"
+                            x1="7.45643"
+                            y1="-1.10615"
+                            x2="5.53812"
+                            y2="17.9973"
+                            gradientUnits="userSpaceOnUse"
+                        >
+                            <stop stop-color="white" stop-opacity="0.16" />
+                            <stop offset="1" stop-color="white" stop-opacity="0" />
+                        </linearGradient>
+                        <clipPath id="clip0_1684_10747">
+                            <rect width="16" height="16" fill="white" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </span>
+        </div>
+        <TocTree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />
+    </div>
+</aside>
diff --git a/src/lib/components/TocRoot.svelte b/src/lib/components/TocRoot.svelte
new file mode 100644
index 0000000000..f07c78cead
--- /dev/null
+++ b/src/lib/components/TocRoot.svelte
@@ -0,0 +1,39 @@
+<script context="module" lang="ts">
+    import {
+        createTableOfContents,
+        type CreateTableOfContentsArgs,
+        type TableOfContents
+    } from '@melt-ui/svelte';
+    import { getContext, setContext } from 'svelte';
+
+    const TOC_KEY = Symbol();
+    export type TocContext = {
+        toc: TableOfContents;
+    };
+
+    const setCtx = (ctx: TocContext) => {
+        setContext<TocContext>(TOC_KEY, ctx);
+    };
+
+    export const getTocCtx = () => {
+        return getContext<TocContext>(TOC_KEY);
+    };
+</script>
+
+<script lang="ts">
+    export let selector = '#main';
+    export let exclude: CreateTableOfContentsArgs['exclude'] = ['h1', 'h3', 'h4', 'h5', 'h6'];
+    export let activeType: CreateTableOfContentsArgs['activeType'] = 'lowest';
+    export let scrollOffset: CreateTableOfContentsArgs['scrollOffset'] = 120;
+
+    const toc = createTableOfContents({
+        selector,
+        exclude,
+        activeType,
+        scrollOffset
+    });
+
+    setCtx({ toc });
+</script>
+
+<slot />
diff --git a/src/markdoc/layouts/PolicyTree.svelte b/src/lib/components/TocTree.svelte
similarity index 94%
rename from src/markdoc/layouts/PolicyTree.svelte
rename to src/lib/components/TocTree.svelte
index acfb913b7d..a75b357f5c 100644
--- a/src/markdoc/layouts/PolicyTree.svelte
+++ b/src/lib/components/TocTree.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { type TableOfContentsItem, type TableOfContentsElements, melt } from '@melt-ui/svelte';
-    import { getPolicyCtx } from './Policy.svelte';
+    import { getTocCtx } from './TocRoot.svelte';
 
     export let tree: TableOfContentsItem[] = [];
     export let activeHeadingIdxs: number[];
@@ -11,7 +11,7 @@
         toc: {
             helpers: { isActive }
         }
-    } = getPolicyCtx();
+    } = getTocCtx();
 </script>
 
 <ul class="aw-page-steps-list aw-sub-body-500">
diff --git a/src/markdoc/layouts/Policy.svelte b/src/markdoc/layouts/Policy.svelte
index e84c932ad0..1d6fc6a5f9 100644
--- a/src/markdoc/layouts/Policy.svelte
+++ b/src/markdoc/layouts/Policy.svelte
@@ -1,7 +1,6 @@
 <script context="module" lang="ts">
     const POLICY_KEY = Symbol();
     export type PolicyContext = {
-        toc: TableOfContents;
         transparentTableCells?: boolean;
     };
 
@@ -26,11 +25,11 @@
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
 
     import { TITLE_SUFFIX } from '$routes/titles';
-    import { createTableOfContents, type TableOfContents } from '@melt-ui/svelte';
 
-    import { getContext, hasContext, setContext } from 'svelte';
-    import PolicyTree from './PolicyTree.svelte';
+    import TocNav from '$lib/components/TocNav.svelte';
+    import TocRoot from '$lib/components/TocRoot.svelte';
     import { isHeaderHidden } from '$lib/layouts/Main.svelte';
+    import { getContext, hasContext, setContext } from 'svelte';
 
     export let title: string;
     export let transparentTableCells = false;
@@ -45,21 +44,7 @@
 
     let showToc = false;
 
-    const toc = createTableOfContents({
-        exclude: ['h1', 'h3', 'h4', 'h5', 'h6'],
-        selector: '#main',
-        activeType: 'lowest',
-        scrollOffset: 120
-    });
-
-    setCtx({ toc, transparentTableCells });
-
-    const {
-        elements: { item },
-        states: { activeHeadingIdxs, headingsTree }
-    } = toc;
-
-    $: progress = Math.max(...$activeHeadingIdxs) / ($headingsTree.length - 1);
+    setCtx({ transparentTableCells });
 </script>
 
 <svelte:head>
@@ -80,131 +65,38 @@
 </svelte:head>
 
 <Main omitMainId>
-    <div class="aw-container">
-        <div class="aw-grid-120-1fr-auto">
-            <header class="aw-grid-120-1fr-auto-header">
-                <h1 class="aw-title aw-u-color-text-primary">{title}</h1>
-            </header>
-            <button
-                class="toc-btn u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
+    <TocRoot>
+        <div class="aw-container">
+            <div class="aw-grid-120-1fr-auto">
+                <header class="aw-grid-120-1fr-auto-header">
+                    <h1 class="aw-title aw-u-color-text-primary">{title}</h1>
+                </header>
+                <button
+                    class="toc-btn u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
                 aw-u-padding-20 aw-u-margin-inline-20-negative aw-u-color-text-primary aw-is-only-mobile
                 u-margin-block-start-24 aw-u-sep-block aw-u-filter-blur-8"
-                style:--inset-block-start="4.5rem"
-                style:inline-size="100vw"
-                style:background-color="hsl(var(--p-body-bg-color) / 0.1)"
-                style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}"
-                on:click={() => (showToc = !showToc)}
-            >
-                <span class="aw-description">Table of contents</span>
-                <span class="icon-menu-alt-4" aria-hidden="true" />
-            </button>
-            <aside class="aw-grid-120-1fr-auto-side" class:aw-is-mobile-closed={!showToc}>
-                <div class="aw-page-steps">
-                    <div
-                        class="aw-page-steps-location aw-is-not-mobile"
-                        style="--location:{progress * 100}%;"
-                    >
-                        <span class="aw-page-steps-location-button">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 16 16"
-                                fill="none"
-                            >
-                                <g clip-path="url(#clip0_1684_10747)">
-                                    <g filter="url(#filter0_b_1684_10747)">
-                                        <circle
-                                            cx="8"
-                                            cy="8"
-                                            r="8"
-                                            fill="url(#paint0_linear_1684_10747)"
-                                            fill-opacity="0.32"
-                                        />
-                                        <circle
-                                            cx="8"
-                                            cy="8"
-                                            r="7.75"
-                                            stroke="url(#paint1_linear_1684_10747)"
-                                            stroke-width="0.5"
-                                        />
-                                    </g>
-                                    <circle cx="8" cy="7.99219" r="3" fill="white" />
-                                </g>
-                                <defs>
-                                    <filter
-                                        id="filter0_b_1684_10747"
-                                        x="-200"
-                                        y="-200"
-                                        width="416"
-                                        height="416"
-                                        filterUnits="userSpaceOnUse"
-                                        color-interpolation-filters="sRGB"
-                                    >
-                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                                        <feGaussianBlur
-                                            in="BackgroundImageFix"
-                                            stdDeviation="100"
-                                        />
-                                        <feComposite
-                                            in2="SourceAlpha"
-                                            operator="in"
-                                            result="effect1_backgroundBlur_1684_10747"
-                                        />
-                                        <feBlend
-                                            mode="normal"
-                                            in="SourceGraphic"
-                                            in2="effect1_backgroundBlur_1684_10747"
-                                            result="shape"
-                                        />
-                                    </filter>
-                                    <linearGradient
-                                        id="paint0_linear_1684_10747"
-                                        x1="2.02105"
-                                        y1="1.10843"
-                                        x2="16.3872"
-                                        y2="17.2901"
-                                        gradientUnits="userSpaceOnUse"
-                                    >
-                                        <stop stop-color="white" stop-opacity="0.4" />
-                                        <stop offset="1" stop-color="white" stop-opacity="0" />
-                                    </linearGradient>
-                                    <linearGradient
-                                        id="paint1_linear_1684_10747"
-                                        x1="7.45643"
-                                        y1="-1.10615"
-                                        x2="5.53812"
-                                        y2="17.9973"
-                                        gradientUnits="userSpaceOnUse"
-                                    >
-                                        <stop stop-color="white" stop-opacity="0.16" />
-                                        <stop offset="1" stop-color="white" stop-opacity="0" />
-                                    </linearGradient>
-                                    <clipPath id="clip0_1684_10747">
-                                        <rect width="16" height="16" fill="white" />
-                                    </clipPath>
-                                </defs>
-                            </svg>
-                        </span>
+                    style:--inset-block-start="4.5rem"
+                    style:inline-size="100vw"
+                    style:background-color="hsl(var(--p-body-bg-color) / 0.1)"
+                    style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}"
+                    on:click={() => (showToc = !showToc)}
+                >
+                    <span class="aw-description">Table of contents</span>
+                    <span class="icon-menu-alt-4" aria-hidden="true" />
+                </button>
+                <TocNav />
+                <main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
+                    <div class="aw-content is-count-headers" class:aw-is-mobile-closed={showToc}>
+                        <!-- eslint-disable-next-line svelte/valid-compile -->
+                        <h2 aria-hidden="true">Introduction</h2>
+                        <slot />
                     </div>
-                    <PolicyTree
-                        tree={$headingsTree}
-                        activeHeadingIdxs={$activeHeadingIdxs}
-                        {item}
-                    />
-                </div>
-            </aside>
-            <main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
-                <div class="aw-content is-count-headers" class:aw-is-mobile-closed={showToc}>
-                    <!-- eslint-disable-next-line svelte/valid-compile -->
-                    <h2 aria-hidden="true">Introduction</h2>
-                    <slot />
-                </div>
-            </main>
+                </main>
+            </div>
+            <FooterNav />
+            <MainFooter />
         </div>
-        <FooterNav />
-        <MainFooter />
-    </div>
+    </TocRoot>
 </Main>
 
 <style lang="scss">
diff --git a/src/routes/assets/+page.svelte b/src/routes/assets/+page.svelte
index 1ae576e280..665c87473d 100644
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { visible } from '$lib/actions';
+    import TocNav from '$lib/components/TocNav.svelte';
+    import TocRoot from '$lib/components/TocRoot.svelte';
     import { Main } from '$lib/layouts';
     import { copy } from '$lib/utils/copy';
 
@@ -27,21 +29,6 @@
         Object.values(Section).map((section) => [section, false])
     );
 
-    $: selected = (function getSelected() {
-        for (const [key, value] of selectedMap) {
-            if (value) {
-                return key;
-            }
-        }
-        return Section.NAMING;
-    })();
-
-    $: progress = (function getProgress() {
-        const sections = Object.values(Section);
-        const index = sections.indexOf(selected);
-        return (index / (sections.length - 1)) * 100;
-    })();
-
     const handleVisibility = (section: Section) => {
         return (e: CustomEvent<boolean>) => {
             selectedMap.set(section, e.detail);
@@ -72,514 +59,549 @@
 </div>
 
 <Main>
-    <div class="aw-container">
-        <div class="aw-grid-120-1fr-auto">
-            <header class="aw-grid-120-1fr-auto-header">
-                <h1 class="aw-title aw-u-color-text-primary">Brand assets</h1>
-                <button
-                    class="u-flex u-width-full-line aw-u-padding-block-20
+    <TocRoot activeType="highest">
+        <div class="aw-container">
+            <div class="aw-grid-120-1fr-auto">
+                <header class="aw-grid-120-1fr-auto-header">
+                    <h1 class="aw-title aw-u-color-text-primary">Brand assets</h1>
+                    <button
+                        class="u-flex u-width-full-line aw-u-padding-block-20
                         aw-u-color-text-primary aw-is-only-mobile
                        aw-u-margin-inline-32-negative u-margin-block-start-24 aw-u-sep-block"
-                    style="inline-size:100vw"
-                >
-                    <span
-                        class="aw-container u-flex u-width-full-line u-main-space-between u-cross-center"
+                        style="inline-size:100vw"
                     >
-                        <span class="aw-description">Table of contents</span>
-                        <span class="icon-menu-alt-4" aria-hidden="true" />
-                    </span>
-                </button>
-            </header>
-            <aside class="aw-grid-120-1fr-auto-side aw-is-mobile-closed">
-                <div class="aw-page-steps">
-                    <div
-                        class="aw-page-steps-location aw-is-not-mobile"
-                        style="--location:{progress}%;"
-                    >
-                        <button class="aw-page-steps-location-button">
-                            <img src="/images/animations/indicator.svg" alt="" />
-                        </button>
-                    </div>
-                    <ul class="aw-page-steps-list aw-sub-body-500">
-                        {#each Object.values(Section) as section}
-                            <li>
-                                <a
-                                    href="#{getSectionId(section)}"
-                                    class:is-selected={selected === section}>{section}</a
-                                >
-                            </li>
-                        {/each}
-                    </ul>
-                </div>
-            </aside>
-            <main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
-                <div class="aw-content">
-                    <section>
-                        <p>
-                            Resources for presenting the Appwrite brand to maintain consistency
-                            while using our logos, colors, and other brand elements across various
-                            platforms and materials.
-                        </p>
-
-                        <a href="/assets.zip" download class="aw-button u-cross-child-start">
-                            <span class="aw-icon-download" aria-hidden="true" />
-                            <span>Download assets</span>
-                        </a>
-                    </section>
-
-                    <section id={getSectionId(Section.NAMING)}>
-                        <div class="u-flex u-flex-vertical u-gap-8">
-                            <h2
-                                class="aw-title aw-u-color-text-primary"
-                                use:visible={{ top: 48 }}
-                                on:visible={handleVisibility(Section.NAMING)}
-                            >
-                                Naming
-                            </h2>
+                        <span
+                            class="aw-container u-flex u-width-full-line u-main-space-between u-cross-center"
+                        >
+                            <span class="aw-description">Table of contents</span>
+                            <span class="icon-menu-alt-4" aria-hidden="true" />
+                        </span>
+                    </button>
+                </header>
+                <TocNav />
+                <main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
+                    <div class="aw-content">
+                        <section>
                             <p>
-                                Write 'Appwrite,' with a lowercase 'w' and no space between the two
-                                words. Please refrain from using variations like 'AppWrite' or 'App
-                                Write'.
+                                Resources for presenting the Appwrite brand to maintain consistency
+                                while using our logos, colors, and other brand elements across
+                                various platforms and materials.
                             </p>
-                        </div>
-                    </section>
 
-                    <section id={getSectionId(Section.LOGOTYPE)}>
-                        <div class="u-flex u-flex-vertical u-gap-8">
-                            <h2
-                                class="aw-title aw-u-color-text-primary"
-                                use:visible={{ top: 48 }}
-                                on:visible={handleVisibility(Section.LOGOTYPE)}
-                            >
-                                Logotype
-                            </h2>
-                            <p>
-                                The Appwrite logo stands as a prominent symbol of our brand's
-                                identity. Refrain from altering our logo and preferably use our logo
-                                on a neutral background.
-                            </p>
-                            <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
-                                <div
-                                    class="media-wrapper | theme-light |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                    style="background-color:hsl(var(--aw-color-greyscale-100)); block-size:20rem;"
-                                >
-                                    <img
-                                        src="/assets/logotype/white.svg"
-                                        alt="Appwrite logo with black text"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logotype/white.svg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>SVG</span>
-                                        </a>
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logotype/white.png"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
-                                    </div>
-                                </div>
-                                <div
-                                    class="media-wrapper | theme-dark |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                    style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
-                                >
-                                    <img
-                                        src="/assets/logotype/black.svg"
-                                        alt="Appwrite logo with white text"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logotype/black.svg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>SVG</span>
-                                        </a>
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logotype/black.png"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <section>
+                            <a href="/assets.zip" download class="aw-button u-cross-child-start">
+                                <span class="aw-icon-download" aria-hidden="true" />
+                                <span>Download assets</span>
+                            </a>
+                        </section>
+
+                        <section id={getSectionId(Section.NAMING)}>
                             <div class="u-flex u-flex-vertical u-gap-8">
-                                <h3 class="aw-label aw-u-color-text-primary">
-                                    Co-branding logotypes
-                                </h3>
+                                <h2
+                                    class="aw-title aw-u-color-text-primary"
+                                    use:visible={{ top: 48 }}
+                                    on:visible={handleVisibility(Section.NAMING)}
+                                >
+                                    Naming
+                                </h2>
                                 <p>
-                                    Spacing is determined by the Appwrite mark. Unless otherwise
-                                    noted by partner brands, each logo is optically equal as a
-                                    collection of shapes.
+                                    Write 'Appwrite,' with a lowercase 'w' and no space between the
+                                    two words. Please refrain from using variations like 'AppWrite'
+                                    or 'App Write'.
                                 </p>
-                                <div
-                                    class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16"
-                                    style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
-                                >
-                                    <img
-                                        src="/assets/logotype/co-brand.svg"
-                                        alt="Appwrite logo besides a generic logo"
-                                    />
-                                </div>
                             </div>
                         </section>
-                    </section>
 
-                    <section id={getSectionId(Section.LOGOMARK)}>
-                        <div class="u-flex u-flex-vertical u-gap-8">
-                            <h3
-                                class="aw-title aw-u-color-text-primary"
-                                use:visible={{ top: 48 }}
-                                on:visible={handleVisibility(Section.LOGOMARK)}
-                            >
-                                Logomark
-                            </h3>
-                            <p>
-                                While prioritizing recognizability, the logotype is the recommended
-                                choice. Using the Appwrite logomark is suitable for situations where
-                                space constraints make it challenging to showcase the complete
-                                logotype.
-                            </p>
-                            <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
-                                <div
-                                    class="media-wrapper | theme-light |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                    style="background-color:hsl(var(--aw-color-greyscale-100)); block-size:20rem;"
+                        <section id={getSectionId(Section.LOGOTYPE)}>
+                            <div class="u-flex u-flex-vertical u-gap-8">
+                                <h2
+                                    class="aw-title aw-u-color-text-primary"
+                                    use:visible={{ top: 48 }}
+                                    on:visible={handleVisibility(Section.LOGOTYPE)}
                                 >
-                                    <img
-                                        src="/assets/logomark/logo.svg"
-                                        alt="Appwrite's logomark"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logomark/logo.svg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>SVG</span>
-                                        </a>
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logomark/logo.png"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                                    Logotype
+                                </h2>
+                                <p>
+                                    The Appwrite logo stands as a prominent symbol of our brand's
+                                    identity. Refrain from altering our logo and preferably use our
+                                    logo on a neutral background.
+                                </p>
+                                <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
+                                    <div
+                                        class="media-wrapper | theme-light |
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
+                                        style="background-color:hsl(var(--aw-color-greyscale-100)); block-size:20rem;"
+                                    >
+                                        <img
+                                            src="/assets/logotype/white.svg"
+                                            alt="Appwrite logo with black text"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logotype/white.svg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>SVG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logotype/white.png"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
                                     </div>
-                                </div>
-                                <div
-                                    class="media-wrapper | theme-dark |
+                                    <div
+                                        class="media-wrapper | theme-dark |
                                     u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                    style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
-                                >
-                                    <img
-                                        src="/assets/logomark/logo.svg"
-                                        alt="Appwrite's logomark"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logomark/logo.svg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>SVG</span>
-                                        </a>
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/logomark/logo.png"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
+                                    >
+                                        <img
+                                            src="/assets/logotype/black.svg"
+                                            alt="Appwrite logo with white text"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logotype/black.svg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>SVG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logotype/black.png"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                        <section id="">
+                            <section>
+                                <div class="u-flex u-flex-vertical u-gap-8">
+                                    <h3 class="aw-label aw-u-color-text-primary">
+                                        Co-branding logotypes
+                                    </h3>
+                                    <p>
+                                        Spacing is determined by the Appwrite mark. Unless otherwise
+                                        noted by partner brands, each logo is optically equal as a
+                                        collection of shapes.
+                                    </p>
+                                    <div
+                                        class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16"
+                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
+                                    >
+                                        <img
+                                            src="/assets/logotype/co-brand.svg"
+                                            alt="Appwrite logo besides a generic logo"
+                                        />
+                                    </div>
+                                </div>
+                            </section>
+                        </section>
+
+                        <section id={getSectionId(Section.LOGOMARK)}>
                             <div class="u-flex u-flex-vertical u-gap-8">
-                                <h3 class="aw-label aw-u-color-text-primary">
-                                    Co-branding lockups
+                                <h3
+                                    class="aw-title aw-u-color-text-primary"
+                                    use:visible={{ top: 48 }}
+                                    on:visible={handleVisibility(Section.LOGOMARK)}
+                                >
+                                    Logomark
                                 </h3>
                                 <p>
-                                    Spacing is determined by the Appwrite mark. Unless otherwise
-                                    noted by partner brands, each logo is optically equal as a
-                                    collection of shapes.
+                                    While prioritizing recognizability, the logotype is the
+                                    recommended choice. Using the Appwrite logomark is suitable for
+                                    situations where space constraints make it challenging to
+                                    showcase the complete logotype.
                                 </p>
-                                <div
-                                    class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16"
-                                    style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
-                                >
-                                    <img
-                                        src="/assets/logomark/co-brand.svg"
-                                        alt="Logomark cobrand example"
-                                    />
-                                </div>
-                            </div>
-                        </section>
-                    </section>
-
-                    <section id={getSectionId(Section.COLORS)}>
-                        <h2
-                            class="aw-title aw-u-color-text-primary"
-                            use:visible={{ top: 48 }}
-                            on:visible={handleVisibility(Section.COLORS)}
-                        >
-                            Brand colors
-                        </h2>
-                        <div class="u-flex u-flex-wrap u-gap-32">
-                            <div
-                                class="media-wrapper | u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center u-gap-8
-                                aw-u-border-radius-8 u-padding-inline-24"
-                                style="color:hsl(var(--aw-color-greyscale-900)); background-color:#EDEDF0; 
-                                aspect-ratio: 1/1; min-block-size: 10rem;"
-                            >
-                                <h3 class="aw-label">Light Grey</h3>
-                                <p class="aw-caption-400">#EDEDF0</p>
-                                <div class="buttons | theme-light">
-                                    <button
-                                        class="aw-button is-secondary"
-                                        on:click={() => copy('#EDEDF0')}
+                                <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
+                                    <div
+                                        class="media-wrapper | theme-light |
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
+                                        style="background-color:hsl(var(--aw-color-greyscale-100)); block-size:20rem;"
                                     >
-                                        <span class="aw-icon-copy" aria-label="copy" />
-                                        <span>Copy</span>
-                                    </button>
-                                </div>
-                            </div>
-                            <div
-                                class="media-wrapper | aw-u-sep u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center
-                                u-gap-8 aw-u-border-radius-8 u-padding-inline-24"
-                                style="color:hsl(var(--aw-color-greyscale-50)); background-color:#19191D;
-                                aspect-ratio: 1/1; min-block-size: 10rem;"
-                            >
-                                <h3 class="aw-label">Dark Grey</h3>
-                                <p class="aw-caption-400">#19191D</p>
-                                <div class="buttons">
-                                    <button
-                                        class="aw-button is-secondary"
-                                        on:click={() => copy('#19191D')}
+                                        <img
+                                            src="/assets/logomark/logo.svg"
+                                            alt="Appwrite's logomark"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logomark/logo.svg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>SVG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logomark/logo.png"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="media-wrapper | theme-dark |
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
+                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
                                     >
-                                        <span class="aw-icon-copy" aria-label="copy" />
-                                        <span>Copy</span>
-                                    </button>
+                                        <img
+                                            src="/assets/logomark/logo.svg"
+                                            alt="Appwrite's logomark"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logomark/logo.svg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>SVG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/logomark/logo.png"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                            <div
-                                class="media-wrapper | u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center u-gap-8
-                                aw-u-border-radius-8 u-padding-inline-24"
-                                style="color:hsl(var(--aw-color-greyscale-50)); background-color:#FD366E;
-                                aspect-ratio: 1/1; min-block-size: 10rem;"
-                            >
-                                <h3 class="aw-label">Appwrite Pink</h3>
-                                <p class="aw-caption-400">#FD366E</p>
-                                <div class="buttons">
-                                    <button
-                                        class="aw-button is-secondary"
-                                        on:click={() => copy('#FD366E')}
+                            <section id="">
+                                <div class="u-flex u-flex-vertical u-gap-8">
+                                    <h3 class="aw-label aw-u-color-text-primary">
+                                        Co-branding lockups
+                                    </h3>
+                                    <p>
+                                        Spacing is determined by the Appwrite mark. Unless otherwise
+                                        noted by partner brands, each logo is optically equal as a
+                                        collection of shapes.
+                                    </p>
+                                    <div
+                                        class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16"
+                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
                                     >
-                                        <span
-                                            class="aw-icon-copy"
-                                            aria-label="copy"
-                                            style="color: white;"
+                                        <img
+                                            src="/assets/logomark/co-brand.svg"
+                                            alt="Logomark cobrand example"
                                         />
-                                        <span>Copy</span>
-                                    </button>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                    </section>
+                            </section>
+                        </section>
 
-                    <section id={getSectionId(Section.VISUALS)}>
-                        <div class="u-flex u-flex-vertical u-gap-8">
+                        <section id={getSectionId(Section.COLORS)}>
                             <h2
                                 class="aw-title aw-u-color-text-primary"
                                 use:visible={{ top: 48 }}
-                                on:visible={handleVisibility(Section.VISUALS)}
+                                on:visible={handleVisibility(Section.COLORS)}
                             >
-                                Product visuals
+                                Brand colors
                             </h2>
-                            <p>
-                                Use these product visuals to enhance your articles, presentations,
-                                and content related to Appwrite.
-                            </p>
-                            <div class="aw-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12">
-                                <div class="media-wrapper">
-                                    <img
-                                        class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
-                                        src="/assets/visuals/dashboard.png"
-                                        alt="Dashboard"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/visuals/dashboard.jpg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>JPG</span>
-                                        </a>
-                                        <a
+                            <div class="u-flex u-flex-wrap u-gap-32">
+                                <div
+                                    class="media-wrapper | u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center u-gap-8
+                                aw-u-border-radius-8 u-padding-inline-24"
+                                    style="color:hsl(var(--aw-color-greyscale-900)); background-color:#EDEDF0; 
+                                aspect-ratio: 1/1; min-block-size: 10rem;"
+                                >
+                                    <h3 class="aw-label">Light Grey</h3>
+                                    <p class="aw-caption-400">#EDEDF0</p>
+                                    <div class="buttons | theme-light">
+                                        <button
                                             class="aw-button is-secondary"
-                                            href={'/assets/visuals/dashboard.png'}
-                                            download
+                                            on:click={() => copy('#EDEDF0')}
                                         >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                                            <span class="aw-icon-copy" aria-label="copy" />
+                                            <span>Copy</span>
+                                        </button>
                                     </div>
                                 </div>
-                                <div class="media-wrapper">
-                                    <img
-                                        class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
-                                        src="/assets/visuals/auth.png"
-                                        alt="Appwrite Auth"
-                                    />
+                                <div
+                                    class="media-wrapper | aw-u-sep u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center
+                                u-gap-8 aw-u-border-radius-8 u-padding-inline-24"
+                                    style="color:hsl(var(--aw-color-greyscale-50)); background-color:#19191D;
+                                aspect-ratio: 1/1; min-block-size: 10rem;"
+                                >
+                                    <h3 class="aw-label">Dark Grey</h3>
+                                    <p class="aw-caption-400">#19191D</p>
                                     <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/visuals/auth.jpg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>JPG</span>
-                                        </a>
-                                        <a
+                                        <button
                                             class="aw-button is-secondary"
-                                            href={'/assets/visuals/auth.png'}
-                                            download
+                                            on:click={() => copy('#19191D')}
                                         >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                                            <span class="aw-icon-copy" aria-label="copy" />
+                                            <span>Copy</span>
+                                        </button>
                                     </div>
                                 </div>
-                                <div class="media-wrapper">
-                                    <img
-                                        class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
-                                        src="/assets/visuals/databases.png"
-                                        alt="Appwrite Databases"
-                                    />
+                                <div
+                                    class="media-wrapper | u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center u-gap-8
+                                aw-u-border-radius-8 u-padding-inline-24"
+                                    style="color:hsl(var(--aw-color-greyscale-50)); background-color:#FD366E;
+                                aspect-ratio: 1/1; min-block-size: 10rem;"
+                                >
+                                    <h3 class="aw-label">Appwrite Pink</h3>
+                                    <p class="aw-caption-400">#FD366E</p>
                                     <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/visuals/databases.jpg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>JPG</span>
-                                        </a>
-                                        <a
+                                        <button
                                             class="aw-button is-secondary"
-                                            href={'/assets/visuals/databases.png'}
-                                            download
+                                            on:click={() => copy('#FD366E')}
                                         >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                                            <span
+                                                class="aw-icon-copy"
+                                                aria-label="copy"
+                                                style="color: white;"
+                                            />
+                                            <span>Copy</span>
+                                        </button>
                                     </div>
                                 </div>
+                            </div>
+                        </section>
 
-                                <div class="media-wrapper">
-                                    <img
-                                        class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
-                                        src="/assets/visuals/storage.png"
-                                        alt="Appwrite Storage"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/visuals/storage.jpg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>JPG</span>
-                                        </a>
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href={'/assets/visuals/storage.png'}
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                        <section id={getSectionId(Section.VISUALS)}>
+                            <div class="u-flex u-flex-vertical u-gap-8">
+                                <h2
+                                    class="aw-title aw-u-color-text-primary"
+                                    use:visible={{ top: 48 }}
+                                    on:visible={handleVisibility(Section.VISUALS)}
+                                >
+                                    Product visuals
+                                </h2>
+                                <p>
+                                    Use these product visuals to enhance your articles,
+                                    presentations, and content related to Appwrite.
+                                </p>
+                                <div class="aw-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12">
+                                    <div class="media-wrapper">
+                                        <img
+                                            class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
+                                            src="/assets/visuals/dashboard.png"
+                                            alt="Dashboard"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/visuals/dashboard.jpg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>JPG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href={'/assets/visuals/dashboard.png'}
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="media-wrapper">
+                                        <img
+                                            class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
+                                            src="/assets/visuals/auth.png"
+                                            alt="Appwrite Auth"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/visuals/auth.jpg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>JPG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href={'/assets/visuals/auth.png'}
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="media-wrapper">
+                                        <img
+                                            class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
+                                            src="/assets/visuals/databases.png"
+                                            alt="Appwrite Databases"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/visuals/databases.jpg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>JPG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href={'/assets/visuals/databases.png'}
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
                                     </div>
-                                </div>
 
-                                <div class="media-wrapper">
-                                    <img
-                                        class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
-                                        src="/assets/visuals/functions.png"
-                                        alt="Appwrite Functions"
-                                    />
-                                    <div class="buttons">
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href="/assets/visuals/functions.jpg"
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>JPG</span>
-                                        </a>
-                                        <a
-                                            class="aw-button is-secondary"
-                                            href={'/assets/visuals/functions.png'}
-                                            download
-                                        >
-                                            <span class="aw-icon-download" aria-label="download" />
-                                            <span>PNG</span>
-                                        </a>
+                                    <div class="media-wrapper">
+                                        <img
+                                            class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
+                                            src="/assets/visuals/storage.png"
+                                            alt="Appwrite Storage"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/visuals/storage.jpg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>JPG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href={'/assets/visuals/storage.png'}
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
+                                    </div>
+
+                                    <div class="media-wrapper">
+                                        <img
+                                            class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line"
+                                            src="/assets/visuals/functions.png"
+                                            alt="Appwrite Functions"
+                                        />
+                                        <div class="buttons">
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href="/assets/visuals/functions.jpg"
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>JPG</span>
+                                            </a>
+                                            <a
+                                                class="aw-button is-secondary"
+                                                href={'/assets/visuals/functions.png'}
+                                                download
+                                            >
+                                                <span
+                                                    class="aw-icon-download"
+                                                    aria-label="download"
+                                                />
+                                                <span>PNG</span>
+                                            </a>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    </section>
+                        </section>
 
-                    <section id={getSectionId(Section.CONTACT)}>
-                        <div class="u-flex u-flex-vertical u-gap-8">
-                            <h2
-                                class="aw-title aw-u-color-text-primary"
-                                use:visible={{ top: 48 }}
-                                on:visible={handleVisibility(Section.CONTACT)}
-                            >
-                                Contact us
-                            </h2>
-                            <p>
-                                Should you require further assistance or have specific needs beyond
-                                what's presented on this page, please don't hesitate to
-                                <a
-                                    class="aw-link"
-                                    href="/contact-us"
-                                    target="_blank"
-                                    rel="noopener noreferrer">contact us</a
-                                >.
-                            </p>
-                        </div>
-                    </section>
-                </div>
-            </main>
-        </div>
+                        <section id={getSectionId(Section.CONTACT)}>
+                            <div class="u-flex u-flex-vertical u-gap-8">
+                                <h2
+                                    class="aw-title aw-u-color-text-primary"
+                                    use:visible={{ top: 48 }}
+                                    on:visible={handleVisibility(Section.CONTACT)}
+                                >
+                                    Contact us
+                                </h2>
+                                <p>
+                                    Should you require further assistance or have specific needs
+                                    beyond what's presented on this page, please don't hesitate to
+                                    <a
+                                        class="aw-link"
+                                        href="/contact-us"
+                                        target="_blank"
+                                        rel="noopener noreferrer">contact us</a
+                                    >.
+                                </p>
+                            </div>
+                        </section>
+                    </div>
+                </main>
+            </div>
 
-        <FooterNav />
-        <MainFooter />
-    </div>
+            <FooterNav />
+            <MainFooter />
+        </div>
+    </TocRoot>
 </Main>
 
 <style lang="scss">

From 4de6ee7c08aea20e25c02b6f87fb11e9127ea35a Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 2 Jan 2024 19:52:12 +0000
Subject: [PATCH 2/3] add copy btn fix

---
 src/markdoc/layouts/Policy.svelte |  8 +-------
 src/routes/assets/+page.svelte    | 29 ++++-------------------------
 src/routes/assets/Copy.svelte     | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 32 deletions(-)
 create mode 100644 src/routes/assets/Copy.svelte

diff --git a/src/markdoc/layouts/Policy.svelte b/src/markdoc/layouts/Policy.svelte
index 1d6fc6a5f9..f49f27636f 100644
--- a/src/markdoc/layouts/Policy.svelte
+++ b/src/markdoc/layouts/Policy.svelte
@@ -87,7 +87,7 @@
                 <TocNav />
                 <main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
                     <div class="aw-content is-count-headers" class:aw-is-mobile-closed={showToc}>
-                        <!-- eslint-disable-next-line svelte/valid-compile -->
+                        <!-- svelte-ignore a11y-hidden -->
                         <h2 aria-hidden="true">Introduction</h2>
                         <slot />
                     </div>
@@ -108,10 +108,4 @@
     .toc-btn {
         transition: translate 0.3s ease;
     }
-
-    @media screen and (max-width: 1023px) {
-        .aw-page-steps {
-            margin-block-start: 2rem;
-        }
-    }
 </style>
diff --git a/src/routes/assets/+page.svelte b/src/routes/assets/+page.svelte
index 665c87473d..6292e423dc 100644
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -9,6 +9,7 @@
     import { TITLE_SUFFIX } from '$routes/titles';
     import FooterNav from '../../lib/components/FooterNav.svelte';
     import MainFooter from '../../lib/components/MainFooter.svelte';
+    import Copy from './Copy.svelte';
 
     const title = 'Assets' + TITLE_SUFFIX;
     const description = DEFAULT_DESCRIPTION;
@@ -346,13 +347,7 @@
                                     <h3 class="aw-label">Light Grey</h3>
                                     <p class="aw-caption-400">#EDEDF0</p>
                                     <div class="buttons | theme-light">
-                                        <button
-                                            class="aw-button is-secondary"
-                                            on:click={() => copy('#EDEDF0')}
-                                        >
-                                            <span class="aw-icon-copy" aria-label="copy" />
-                                            <span>Copy</span>
-                                        </button>
+                                        <Copy toCopy="#EDEDF0" />
                                     </div>
                                 </div>
                                 <div
@@ -364,13 +359,7 @@
                                     <h3 class="aw-label">Dark Grey</h3>
                                     <p class="aw-caption-400">#19191D</p>
                                     <div class="buttons">
-                                        <button
-                                            class="aw-button is-secondary"
-                                            on:click={() => copy('#19191D')}
-                                        >
-                                            <span class="aw-icon-copy" aria-label="copy" />
-                                            <span>Copy</span>
-                                        </button>
+                                        <Copy toCopy="#19191D" />
                                     </div>
                                 </div>
                                 <div
@@ -382,17 +371,7 @@
                                     <h3 class="aw-label">Appwrite Pink</h3>
                                     <p class="aw-caption-400">#FD366E</p>
                                     <div class="buttons">
-                                        <button
-                                            class="aw-button is-secondary"
-                                            on:click={() => copy('#FD366E')}
-                                        >
-                                            <span
-                                                class="aw-icon-copy"
-                                                aria-label="copy"
-                                                style="color: white;"
-                                            />
-                                            <span>Copy</span>
-                                        </button>
+                                        <Copy toCopy="#FD366E" />
                                     </div>
                                 </div>
                             </div>
diff --git a/src/routes/assets/Copy.svelte b/src/routes/assets/Copy.svelte
new file mode 100644
index 0000000000..5fea1449b6
--- /dev/null
+++ b/src/routes/assets/Copy.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { copy } from '$lib/utils/copy';
+
+    export let toCopy: string;
+    let copied = false;
+
+    const copyToClipboard = () => {
+        copy(toCopy);
+        copied = true;
+        setTimeout(() => (copied = false), 2000);
+    };
+</script>
+
+<button class="aw-button is-secondary" on:click={copyToClipboard}>
+    <span class="aw-icon-{copied ? 'check' : 'copy'}" aria-label={copied ? 'Copied' : 'Copy'} />
+    <span>Copy</span>
+</button>

From 29e2716f771878bf35272c221534ecc04df2129c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 2 Jan 2024 19:54:49 +0000
Subject: [PATCH 3/3] cleanup imports

---
 src/routes/assets/+page.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/assets/+page.svelte b/src/routes/assets/+page.svelte
index 6292e423dc..d82dec6a63 100644
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -3,7 +3,6 @@
     import TocNav from '$lib/components/TocNav.svelte';
     import TocRoot from '$lib/components/TocRoot.svelte';
     import { Main } from '$lib/layouts';
-    import { copy } from '$lib/utils/copy';
 
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
     import { TITLE_SUFFIX } from '$routes/titles';