website/src/routes/docs/+error.svelte

<script lang="ts">
    import { page } from '$app/state';
    import { MainFooter } from '$lib/components';
    import { Button } from '$lib/components/ui';
    import { Docs } from '$lib/layouts';
    import Sidebar from './Sidebar.svelte';
</script>

<Docs variant="two-side-navs">
    <Sidebar />
    <div class="web-article mx-auto flex max-w-[700px] items-center justify-center py-4">
        <div class="container">
            <div class="web-hero" style="--hero-gap:1.25rem;">
                <span class="web-badges text-micro !text-white uppercase">{page.status}</span>
                <h1 class="text-headline font-aeonik-pro text-primary">
                    {page.error?.message ?? 'An error has occured'}
                </h1>
                {#if page.status === 404}
                    <p class="text-description">
                        Sorry, it seems that the page you are looking for does not exist. Feel free
                        to use our navigation menu or the button below to explore more of Appwrite's
                        documentation.
                    </p>
                {/if}
                <Button variant="secondary" href="/docs" class="mt-3 self-center">
                    <span>Back to docs</span>
                </Button>
            </div>
        </div>
    </div>
    <MainFooter variant="docs" />
</Docs>