create partners catalog

src/lib/constants.ts

@@ -59,13 +59,13 @@ export type SocialShareOption = {
     type: 'link' | 'copy';
 };
 
-export type IntegrationCategory = {
+export type SearchableCategory = {
     slug: string;
     heading: string;
     description: string;
 };
 
-export const integrationCategoryDescriptions: IntegrationCategory[] = [
+export const integrationCategoryDescriptions: SearchableCategory[] = [
     {
         slug: 'ai',
         heading: 'AI',
@@ -118,6 +118,14 @@ export const integrationCategoryDescriptions: IntegrationCategory[] = [
     }
 ];
 
+export const partnerCategoryDescriptions: SearchableCategory[] = [
+    {
+        slug: 'agency',
+        heading: 'Agency',
+        description: 'Agencies that build software for their clients using Appwrite'
+    }
+];
+
 export const socialSharingOptions: Array<SocialShareOption> = [
     {
         icon: 'web-icon-x',

src/markdoc/layouts/Partner.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+    import FooterNav from '$lib/components/FooterNav.svelte';
+    import MainFooter from '$lib/components/MainFooter.svelte';
+    import { Main } from '$lib/layouts';
+    import { DEFAULT_HOST } from '$lib/utils/metadata';
+
+    import { classNames } from '$lib/utils/classnames';
+    import type { Partner } from '$routes/partners/catalog/+page';
+    import ContactPartner from '$routes/partners/catalog/(components)/contact-partner.svelte';
+
+    export let title: Partner['title'];
+    export let partnerLevel: Partner['partnerLevel'];
+    export let category: Partner['category'];
+    export let description: Partner['description'];
+    export let cover: Partner['cover'];
+    export let capabilities: Partner['capabilities'];
+    export let frameworks: Partner['frameworks'];
+    export let regions: Partner['regions'];
+    export let languages: Partner['languages'];
+    export let website: Partner['website'];
+
+    const ogImage = DEFAULT_HOST + cover;
+</script>
+
+<svelte:head>
+    <!-- Titles -->
+    <title>{title}</title>
+    <meta property="og:title" content={title} />
+    <meta name="twitter:title" content={title} />
+    <!-- Description -->
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+    <!-- Image -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
+<Main>
+    <div
+        class={classNames(
+            'grid-bg border-smooth relative flex items-center border-b px-5 py-28 lg:px-8 xl:px-16',
+            'before:from-accent/20 before:absolute before:inset-0 before:-z-1 before:bg-linear-to-tr before:via-transparent before:via-40% before:to-transparent'
+        )}
+    >
+        <div class="relative container w-full pb-0">
+            <div class="flex flex-col gap-7">
+                <a href="/partners" class="text-caption text-primary group flex gap-2">
+                    <span class="web-icon-arrow-left transition group-hover:-translate-x-1" />
+                    Back to Partners Catalog
+                </a>
+                <h1 class="text-headline font-aeonik-pro text-primary">{title}</h1>
+            </div>
+        </div>
+    </div>
+
+    <div class="py-10">
+        <div class="container">
+            <article class="flex flex-col gap-10 md:gap-14">
+                <div class="grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-x-14">
+                    <div class="md:col-span-7">
+                        <div class="web-article">
+                            <div class="web-article-content">
+                                <slot />
+                            </div>
+                            <ContactPartner />
+                        </div>
+                    </div>
+                    <div class="md:col-span-5">
+                        <h2 class="text-label text-primary font-aeonik-pro">About {title}</h2>
+                        <dl class="divide-smooth sticky top-32 mt-10 flex flex-col gap-7 divide-y">
+                            <div class="flex flex-col justify-between gap-7 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Frameworks
+                                </dt>
+                                <dd class="flex flex-wrap gap-2">
+                                    {#each frameworks as framework}
+                                        <div
+                                            class="text-primary text-caption bg-smooth rounded-full px-3 py-1"
+                                        >
+                                            {framework}
+                                        </div>
+                                    {/each}
+                                </dd>
+                            </div>
+
+                            <div class="flex flex-col justify-between gap-7 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Capabilities
+                                </dt>
+                                <dd class="flex flex-wrap gap-2">
+                                    {#each capabilities as capability}
+                                        <div
+                                            class="text-primary text-caption bg-smooth rounded-full px-3 py-1"
+                                        >
+                                            {capability}
+                                        </div>
+                                    {/each}
+                                </dd>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-7 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Category
+                                </dt>
+                                <dd class="text-primary text-caption">{category}</dd>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-7 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Website
+                                </dt>
+                                <dd
+                                    class="text-primary text-caption font-medium underline underline-offset-4"
+                                >
+                                    {website}
+                                </dd>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-7 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Partner Level
+                                </dt>
+                                <dd>
+                                    <div
+                                        class="text-primary text-caption rounded bg-white/24 px-2 py-0.5"
+                                    >
+                                        {partnerLevel}
+                                    </div>
+                                </dd>
+                            </div>
+
+                            <div class="flex items-center justify-between gap-8 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Regions
+                                </dt>
+                                <dd class="text-primary text-caption">
+                                    {regions.join(', ')}
+                                </dd>
+                            </div>
+
+                            <div class="flex flex-col justify-between gap-7 pb-7">
+                                <dt class="text-micro font-aeonik-fono tracking-loose uppercase">
+                                    Languages
+                                </dt>
+                                <dd class="flex flex-wrap gap-2">
+                                    {#each languages as language}
+                                        <div
+                                            class="text-primary text-caption bg-smooth rounded-full px-3 py-1"
+                                        >
+                                            {language}
+                                        </div>
+                                    {/each}
+                                </dd>
+                            </div>
+                        </dl>
+                    </div>
+                </div>
+            </article>
+        </div>
+    </div>
+
+    <div class="mt-12 overflow-hidden py-10">
+        <div class="container">
+            <FooterNav />
+            <MainFooter />
+        </div>
+    </div>
+</Main>

src/routes/integrations/+page.ts

@@ -1,7 +1,7 @@
 import { base } from '$app/paths';
 import { groupBy } from 'remeda';
-import type { IntegrationCategory } from '$lib/constants';
-import { integrationCategoryDescriptions as categoryDescriptions } from '$lib/constants';
+import type { SearchableCategory } from '$lib/constants';
+import { partnerCategoryDescriptions as categoryDescriptions } from '$lib/constants';
 
 export type Integration = {
     title: string;
@@ -26,7 +26,7 @@ export const load = () => {
         eager: true
     });
 
-    const categories: IntegrationCategory[] = [];
+    const categories: SearchableCategory[] = [];
     const platforms: string[] = [];
 
     const integrations = Object.entries(integrationsGlob).map(([filepath, integrationList]) => {
@@ -40,7 +40,7 @@ export const load = () => {
         frontmatter.platform.map((platform) => platforms.push(platform));
         categories.push(
             categoryDescriptions.find((i) => i.slug === frontmatter.category) ??
-                ({} as IntegrationCategory)
+                ({} as SearchableCategory)
         );
 
         return {

src/routes/partners/catalog/(components)/call-to-action.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { classNames } from '$lib/utils/classnames';
+</script>
+
+<div
+    class={classNames(
+        'border-smooth relative -mb-24 border-t py-32',
+        'bg-[url("/images/bgs/building-blocks.webp")] [background-size:50%] bg-right-bottom bg-no-repeat',
+        'before:absolute before:top-0 before:left-0 before:z-0 before:block before:h-80 before:w-full before:bg-[radial-gradient(at_25%_0%,_hsla(343,_98%,_60%,_0.05)_0px,_transparent_73%,_transparent_100%)] md:before:w-1/2',
+        'after:absolute after:top-0 after:right-0 after:z-0 after:hidden after:h-80 after:w-1/2 after:bg-[radial-gradient(at_100%_0%,_hsla(177,_53%,_69%,_0.1)_0px,_transparent_73%,_transparent_100%)] after:md:block md:after:block'
+    )}
+>
+    <div class="relative container grid grid-cols-1 place-items-center md:grid-cols-2">
+        <section class="flex flex-col gap-4">
+            <h2 class="text-display font-aeonik-pro text-primary max-w-[600px]">
+                Become a Technology Partner
+            </h2>
+            <p class="text-body font-medium">
+                Join our Technology Partners program to integrate your solutions with Appwrite’s
+                API, enhancing functionality and expanding your reach.
+            </p>
+            <a href="/integrations/technology-partner" class="web-button mt-4">
+                <span class="text">Get Started</span>
+            </a>
+        </section>
+    </div>
+</div>