From 0650f14f66b6deb845dd6e724cfdac9f341cbb41 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Tue, 31 Mar 2026 16:37:53 +0200
Subject: [PATCH 1/8] green poc

---
 src/app.css                                   | 39 ++++++++-
 src/app.html                                  |  2 +-
 src/lib/components/FooterNav.svelte           | 10 ++-
 src/lib/components/PromptBanner.svelte        |  6 +-
 src/lib/components/fancy/gradient-text.svelte |  3 +-
 src/lib/components/layout/site-footer.svelte  | 10 ++-
 src/lib/layouts/Main.svelte                   | 21 ++++-
 .../(marketing)/(components)/hero.svelte      | 12 ++-
 .../(marketing)/(components)/map.svelte       | 18 +++-
 .../(marketing)/(components)/pricing.svelte   |  2 +-
 src/routes/(marketing)/+page.svelte           | 74 ++++++++++-------
 src/routes/+layout.svelte                     | 83 +++++++++++++++++++
 src/routes/docs/+layout.svelte                |  4 +-
 src/routes/pricing/+page.svelte               | 48 ++++++-----
 src/scss/1-css-variables/_colors.scss         | 41 ++++++++-
 src/scss/6-elements/_button.scss              | 60 +++++++-------
 src/scss/6-elements/_card.scss                | 12 ++-
 src/scss/6-elements/_hero-banner-button.scss  |  4 +-
 src/scss/7-components/_side-nav.scss          |  5 +-
 src/scss/abstract/mixins/_checked-badge.scss  |  9 +-
 static/images/logos/appwrite-green.svg        | 13 +++
 static/images/logos/appwrite-light-green.svg  | 13 +++
 static/images/logos/logo-green.svg            |  8 ++
 23 files changed, 387 insertions(+), 110 deletions(-)
 create mode 100644 static/images/logos/appwrite-green.svg
 create mode 100644 static/images/logos/appwrite-light-green.svg
 create mode 100644 static/images/logos/logo-green.svg

diff --git a/src/app.css b/src/app.css
index b5856796e4..32354554e4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -451,9 +451,10 @@
     /* pink polyfills */
     --transition: 0.2s;
 
-    /* color hues */
-    --color-pink-hue: 343;
-    --color-secondary-hue: 351;
+    /* color hues (green by default) */
+    --color-pink-hue: 151;
+    --color-secondary-hue: 165;
+    --brand-accent-rgb: 17 197 115;
     --color-red-hue: 3;
     --color-orange-hue: 18;
     --color-mint-hue: 177;
@@ -478,6 +479,38 @@
     --color-subtle: var(--color-greyscale-850);
 }
 
+body.brand-green {
+    --color-pink-hue: 151;
+    --color-secondary-hue: 165;
+    --color-pink-500: hsl(151 72% 38%);
+    --color-pink-600: hsl(151 66% 32%);
+    --color-accent: var(--color-pink-500);
+    --color-accent-darker: var(--color-pink-600);
+    --brand-accent-rgb: 15 166 95;
+}
+
+body.brand-green .light {
+    --color-pink-hue: 151;
+    --color-secondary-hue: 165;
+    --color-pink-500: hsl(151 72% 38%);
+    --color-pink-600: hsl(151 66% 32%);
+    --color-accent: var(--color-pink-500);
+    --color-accent-darker: var(--color-pink-600);
+    --brand-accent-rgb: 15 166 95;
+}
+
+body.brand-pink {
+    --color-pink-hue: 343;
+    --color-secondary-hue: 351;
+    --brand-accent-rgb: 253 54 110;
+}
+
+body.brand-pink .light {
+    --color-pink-hue: 343;
+    --color-secondary-hue: 351;
+    --brand-accent-rgb: 253 54 110;
+}
+
 .dark {
     --color-primary: var(--color-greyscale-100);
     --color-secondary: var(--color-greyscale-300);
diff --git a/src/app.html b/src/app.html
index 362d674ba4..0d274c20b7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="twitter:site" content="@appwrite" />
-        <link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
+        <link rel="icon" type="image/svg+xml" href="/images/logos/logo-green.svg" />
 
         <!-- apple touch icons -->
         <link
diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
index d9b2f60fde..7e53473d12 100644
--- a/src/lib/components/FooterNav.svelte
+++ b/src/lib/components/FooterNav.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     import { slide } from 'svelte/transition';
+    import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { createAccordion, melt } from '@melt-ui/svelte';
 
     export let noBorder = false;
+    let logoSrc = '/images/logos/appwrite-green.svg';
 
     const {
         elements: { content, heading, item, root, trigger },
@@ -107,6 +109,12 @@
                 { label: 'Security', href: '/docs/advanced/security' }
             ]
         };
+
+    onMount(() => {
+        if (document.body.classList.contains('brand-pink')) {
+            logoSrc = '/images/logos/appwrite.svg';
+        }
+    });
 </script>
 
 <nav
@@ -114,7 +122,7 @@
     class="web-footer-nav relative mt-24"
     class:web-u-sep-block-start={!noBorder}
 >
-    <img class="web-logo" src="/images/logos/appwrite.svg" alt="appwrite" height="24" width="130" />
+    <img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
     <ul class="web-footer-nav-main-list" use:melt={$root}>
         {#each Object.entries(links) as [title, items]}
             <li class="web-footer-nav-main-item web-is-not-mobile">
diff --git a/src/lib/components/PromptBanner.svelte b/src/lib/components/PromptBanner.svelte
index 37e19a435a..60284cf9b7 100644
--- a/src/lib/components/PromptBanner.svelte
+++ b/src/lib/components/PromptBanner.svelte
@@ -83,7 +83,7 @@
     <div class="ai-banner">
         <div class="ai-banner_content">
             <div class="ai-banner_title">
-                <AiPromptIcon class="text-primary" aria-hidden="true" />
+                <AiPromptIcon class="ai-banner-prompt-icon text-primary" aria-hidden="true" />
                 <span class="text-primary text-sub-body"
                     >Use this pre-built prompt to get started faster</span
                 >
@@ -313,4 +313,8 @@
         padding-right: 10px;
         gap: 4px;
     }
+
+    :global(body.brand-green .ai-banner .ai-banner-prompt-icon) {
+        filter: var(--web-color-image-accent-filter);
+    }
 </style>
diff --git a/src/lib/components/fancy/gradient-text.svelte b/src/lib/components/fancy/gradient-text.svelte
index 59e7a58cd5..3b856c1aa7 100644
--- a/src/lib/components/fancy/gradient-text.svelte
+++ b/src/lib/components/fancy/gradient-text.svelte
@@ -13,9 +13,10 @@
 
 <span
     class={cn(
-        '-mb-1 block bg-linear-145 from-[#f8a1ba] to-white to-50% bg-clip-text pb-1 text-transparent',
+        '-mb-1 block bg-clip-text pb-1 text-transparent',
         className
     )}
+    style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 62%, transparent) 0%, #fff 50%);"
     {...rest}
 >
     {@render children()}
diff --git a/src/lib/components/layout/site-footer.svelte b/src/lib/components/layout/site-footer.svelte
index 26d6625ced..1adbde20bb 100644
--- a/src/lib/components/layout/site-footer.svelte
+++ b/src/lib/components/layout/site-footer.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import { createAccordion, melt } from '@melt-ui/svelte';
+    import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
     export let noBorder = false;
+    let logoSrc = '/images/logos/appwrite-green.svg';
 
     const {
         elements: { content, heading, item, root, trigger },
@@ -91,6 +93,12 @@
                 { label: 'Assets', href: '/assets' }
             ]
         };
+
+    onMount(() => {
+        if (document.body.classList.contains('brand-pink')) {
+            logoSrc = '/images/logos/appwrite.svg';
+        }
+    });
 </script>
 
 <nav
@@ -101,7 +109,7 @@
     <div class="web-footer-nav container">
         <img
             class="web-logo"
-            src="/images/logos/appwrite.svg"
+            src={logoSrc}
             alt="appwrite"
             height="24"
             width="130"
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 665623f62e..3b4a89f7a4 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -27,6 +27,14 @@
     export let omitMainId = false;
     export let hideNavigation = false;
     let theme: 'light' | 'dark' | null = 'dark';
+    let brandTheme: 'pink' | 'green' = 'green';
+
+    $: darkLogoSrc =
+        brandTheme === 'green' ? '/images/logos/appwrite-green.svg' : '/images/logos/appwrite.svg';
+    $: lightLogoSrc =
+        brandTheme === 'green'
+            ? '/images/logos/appwrite-light-green.svg'
+            : '/images/logos/appwrite-light.svg';
 
     function setupThemeObserver() {
         const handleVisibility = () => {
@@ -95,6 +103,11 @@
         setTimeout(() => {
             $initialized = true;
         }, 1000);
+
+        if (document.body.classList.contains('brand-pink')) {
+            brandTheme = 'pink';
+        }
+
         return setupThemeObserver();
     });
 
@@ -177,14 +190,14 @@
             <a href="/">
                 <img
                     class="web-logo web-u-only-dark"
-                    src="/images/logos/appwrite.svg"
+                    src={darkLogoSrc}
                     alt="appwrite"
                     height="24"
                     width="130"
                 />
                 <img
                     class="web-logo web-u-only-light"
-                    src="/images/logos/appwrite-light.svg"
+                    src={lightLogoSrc}
                     alt="appwrite"
                     height="24"
                     width="130"
@@ -218,14 +231,14 @@
                 <a href="/">
                     <img
                         class="web-logo web-u-only-dark"
-                        src="/images/logos/appwrite.svg"
+                        src={darkLogoSrc}
                         alt="appwrite"
                         height="24"
                         width="130"
                     />
                     <img
                         class="web-logo web-u-only-light"
-                        src="/images/logos/appwrite-light.svg"
+                        src={lightLogoSrc}
                         alt="appwrite"
                         height="24"
                         width="130"
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index 99eb4229df..d51aaa6f34 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -23,9 +23,9 @@
     <div
         class={cn(
             'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
-            'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
             'bg-position-[0%_0%]'
         )}
+        style="background-image: radial-gradient(ellipse 390px 50px at 10% 30%, rgba(254, 149, 103, 0.2) 0%, rgba(254, 149, 103, 0) 70%), radial-gradient(ellipse 1100px 170px at 15% 40%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%), radial-gradient(ellipse 1200px 180px at 30% 30%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%);"
     ></div>
 
     <div
@@ -60,7 +60,9 @@
                 <AppwriteIn100Seconds />
             </div>
         </div>
-        <Dashboard />
+        <div class="brand-dashboard">
+            <Dashboard />
+        </div>
         <!--
         Console image variation (disabled for now)
         <div
@@ -81,3 +83,9 @@
         -->
     </div>
 </div>
+
+<style>
+    :global(body.brand-green .brand-dashboard) {
+        filter: hue-rotate(155deg) saturate(1.06) brightness(0.98);
+    }
+</style>
diff --git a/src/routes/(marketing)/(components)/map.svelte b/src/routes/(marketing)/(components)/map.svelte
index d251155040..5181048435 100644
--- a/src/routes/(marketing)/(components)/map.svelte
+++ b/src/routes/(marketing)/(components)/map.svelte
@@ -21,9 +21,25 @@
             Pick one of our many cloud regions or edges to meet your project's needs and reduce
             latency.
         </p>
-        <Button variant="secondary" href="/the-appwrite-network"
+        <Button variant="secondary" href="/the-appwrite-network" class="network-map-cta"
             >More about the Appwrite Network</Button
         >
     </div>
     <TheAppwriteNetwork {theme} />
 </div>
+
+<style lang="scss">
+    :global(.network-map-cta.web-button.is-secondary) {
+        background: hsl(var(--web-color-button-primary) / 0.16);
+        color: hsl(var(--web-color-button-primary));
+        border: 1px solid hsl(var(--web-color-button-primary) / 0.42);
+    }
+
+    :global(.network-map-cta.web-button.is-secondary:hover) {
+        background: hsl(var(--web-color-button-primary) / 0.22);
+    }
+
+    :global(.network-map-cta.web-button.is-secondary:focus-visible) {
+        box-shadow: 0 0 0 4px hsl(var(--web-color-button-primary) / 0.24);
+    }
+</style>
diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
index 18f248a70f..10458f2ab8 100644
--- a/src/routes/(marketing)/(components)/pricing.svelte
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -65,9 +65,9 @@
         <div
             class={cn(
                 'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
-                'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
                 'bg-position-[0%_0%]'
             )}
+            style="background-image: radial-gradient(ellipse 390px 50px at 10% 30%, rgba(254, 149, 103, 0.2) 0%, rgba(254, 149, 103, 0) 70%), radial-gradient(ellipse 1100px 170px at 15% 40%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%), radial-gradient(ellipse 1200px 180px at 30% 30%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%);"
         ></div>
 
         <div
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index 0b053c5da5..c6cbc26f22 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -21,42 +21,54 @@
 />
 
 <Main>
-    <Hero
-        title="Build like a team of hundreds"
-        subtitle="Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place."
-    />
-    <Platforms headline="Designed for the tools you work with" />
-    <LogoList class="border-smooth border-b" title="Loved by startups and world leaders" />
-    <Bento />
-    <Pullquote
-        name="Phil McCluskey"
-        title="App Manager, Majik Kids"
-        avatar="/images/testimonials/phil.jpg"
-    >
-        <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
-        that you need with Appwrite.</Pullquote
-    >
-    <Ai />
-    <CaseStudies />
-    <Features theme="light" />
-    <div class="light bg-[#EDEDF0]">
-        <Map theme="light" />
-        <Scale
-            testimonial={{
-                name: 'Ryan O’Connor',
-                title: 'Founder',
-                company: 'K-Collect',
-                image: '/images/testimonials/ryan-oconner-testimonial.png'
-            }}
+    <div class="homepage-brandable">
+        <Hero
+            title="Build like a team of hundreds"
+            subtitle="Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place."
+        />
+        <Platforms headline="Designed for the tools you work with" />
+        <LogoList class="border-smooth border-b" title="Loved by startups and world leaders" />
+        <Bento />
+        <Pullquote
+            name="Phil McCluskey"
+            title="App Manager, Majik Kids"
+            avatar="/images/testimonials/phil.jpg"
         >
-            The switch to using Appwrite brought
-            <span class="text-primary">infinite value that I'm still discovering today.</span>
-        </Scale>
+            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
+            that you need with Appwrite.</Pullquote
+        >
+        <Ai />
+        <CaseStudies />
+        <Features theme="light" />
+        <div class="light bg-[#EDEDF0]">
+            <Map theme="light" />
+            <Scale
+                testimonial={{
+                    name: 'Ryan O’Connor',
+                    title: 'Founder',
+                    company: 'K-Collect',
+                    image: '/images/testimonials/ryan-oconner-testimonial.png'
+                }}
+            >
+                The switch to using Appwrite brought
+                <span class="text-primary">infinite value that I'm still discovering today.</span>
+            </Scale>
+        </div>
+        <Pricing />
     </div>
-    <Pricing />
 </Main>
 
 <div class="container">
     <FooterNav />
     <MainFooter />
 </div>
+
+<style>
+    :global(body.brand-green .homepage-brandable img[src*='/images/icons/']) {
+        filter: var(--web-color-image-accent-filter);
+    }
+
+    :global(body.brand-green .homepage-brandable img[src*='/images/backgrounds/']) {
+        filter: var(--web-color-image-background-filter);
+    }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c33e9ef8e0..b2d55fb91a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script lang="ts" module>
     import { type Reo, loadReoScript } from '$lib/reodotdev';
+    import { env } from '$env/dynamic/public';
     import { derived as storeDerived, writable } from 'svelte/store';
 
     export type Theme = 'dark' | 'light' | 'system';
+    export type BrandTheme = 'pink' | 'green';
     export const currentTheme = (() => {
         const store = writable<Theme>(getPreferredTheme());
 
@@ -42,6 +44,24 @@
 
         return theme;
     }
+
+    function isBrandTheme(theme: unknown): theme is BrandTheme {
+        return ['pink', 'green'].includes(theme as BrandTheme);
+    }
+
+    function getPreferredBrandTheme(): BrandTheme {
+        if (!browser) {
+            return 'green';
+        }
+
+        const storedTheme = localStorage.getItem('brand-theme');
+        if (isBrandTheme(storedTheme)) {
+            return storedTheme;
+        }
+
+        const envTheme = env.PUBLIC_BRAND_THEME?.toLowerCase();
+        return isBrandTheme(envTheme) ? envTheme : 'green';
+    }
 </script>
 
 <script lang="ts">
@@ -70,6 +90,13 @@
         document.body.classList.add(className);
     }
 
+    function applyBrandTheme(theme: BrandTheme) {
+        if (!browser) return;
+
+        document.body.classList.remove('brand-pink', 'brand-green');
+        document.body.classList.add(`brand-${theme}`);
+    }
+
     const thresholds = [0.25, 0.5, 0.75];
     const tracked = new Set();
 
@@ -80,6 +107,7 @@
         const initialTheme = page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
 
         applyTheme(initialTheme);
+        applyBrandTheme(getPreferredBrandTheme());
 
         saveReferrerAndUtmSource(page.url);
     });
@@ -183,4 +211,59 @@
     :global(html) {
         color-scheme: dark;
     }
+
+    /* Recolor docs + pricing visual assets in green theme without replacing files */
+    :global(
+        body.brand-green
+            .docs-brandable
+            img[src*='/images/icons/']:not([src*='/images/icons/frameworks/'])
+    ),
+    :global(
+        body.brand-green
+            .pricing-brandable
+            img[src*='/images/icons/']:not([src*='/images/logos/'])
+    ),
+    :global(
+        body.brand-green
+            .docs-brandable
+            img[src*='/images/docs/']:not([src*='/images/docs/frameworks/'])
+    ),
+    :global(
+        body.brand-green
+            .pricing-brandable
+            img[src*='/images/docs/']:not([src*='/images/logos/'])
+    ),
+    :global(
+        body.brand-green
+            .docs-brandable
+            img[src*='/images/products/']:not([src*='/images/products/frameworks/'])
+    ),
+    :global(
+        body.brand-green
+            .pricing-brandable
+            img[src*='/images/products/']:not([src*='/images/logos/'])
+    ) {
+        filter: var(--web-color-image-accent-filter);
+    }
+
+    :global(body.brand-green .docs-brandable img[src*='/images/background']),
+    :global(
+        body.brand-green
+            .pricing-brandable
+            img[src*='/images/background']:not([src*='/images/logos/'])
+    ),
+    :global(body.brand-green .docs-brandable img[src*='/images/docs/tutorials/']),
+    :global(body.brand-green .docs-brandable img[src*='/images/docs/quick-starts/']),
+    :global(body.brand-green .docs-brandable [style*='background-image']),
+    :global(body.brand-green .pricing-brandable [style*='background-image']) {
+        filter: var(--web-color-image-background-filter);
+    }
+
+    :global(
+        body.brand-green
+            .pricing-brandable
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/'])
+    ) {
+        filter: var(--web-color-image-background-filter);
+    }
 </style>
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
index 2829c00a88..6b85dadf9f 100644
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -12,4 +12,6 @@
     });
 </script>
 
-{@render children()}
+<div class="docs-brandable">
+    {@render children()}
+</div>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index a072468d52..6b350c739d 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -34,19 +34,20 @@
     <meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<div
-    class="web-location-for-mobile absolute overflow-hidden"
-    style:pointer-events="none"
-    style:inline-size="100%"
->
-    <enhanced:img
-        src={BG}
-        alt=""
-        style="margin-inline:auto; display:block; width: 1369px; height: auto;"
-    />
-</div>
+<div class="pricing-brandable">
+    <div
+        class="web-location-for-mobile absolute overflow-hidden"
+        style:pointer-events="none"
+        style:inline-size="100%"
+    >
+        <enhanced:img
+            src={BG}
+            alt=""
+            style="margin-inline:auto; display:block; width: 1369px; height: auto;"
+        />
+    </div>
 
-<Main>
+    <Main>
     <div class="web-big-padding-section mt-2">
         <div class="dark pt-8">
             <div class="web-big-padding-section-level-2">
@@ -54,14 +55,14 @@
                     <div class="web-hero">
                         <h1
                             class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
-                            style="background: linear-gradient(90deg, #F47298 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+                            style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
                         >
                             Everything your app needs,<br />one subscription
                         </h1>
                         <p
                             class="text-description max-w-xl self-center text-center opacity-90"
-                            style="background: linear-gradient(90deg, #F47298 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+                            style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
                         >
                             Build, deploy, and observe your app from one platform, all under one
@@ -142,7 +143,7 @@
                                 >
                                     <article
                                         class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
-                                        style="background: linear-gradient(180deg, rgba(253, 54, 110, 0.12) 38.59%, rgba(253, 54, 110, 0) 99.04%);"
+                                        style="background: linear-gradient(180deg, hsl(var(--web-color-pink-500) / 0.12) 38.59%, hsl(var(--web-color-pink-500) / 0) 99.04%);"
                                     >
                                         <header class="web-pricing-cards-header">
                                             <header class="flex gap-3">
@@ -422,7 +423,8 @@
             </div>
         </div>
     </div>
-</Main>
+    </Main>
+</div>
 
 <style lang="scss">
     @use '$scss/abstract/mixins/border-gradient' as gradients;
@@ -465,8 +467,8 @@
         background:
             radial-gradient(
                 120% 80% at 100% 0%,
-                rgba(253, 54, 110, 0.14) 0%,
-                rgba(253, 54, 110, 0) 60%
+                hsl(var(--web-color-pink-500) / 0.14) 0%,
+                hsl(var(--web-color-pink-500) / 0) 60%
             ),
             radial-gradient(
                 140% 90% at 0% 100%,
@@ -518,8 +520,12 @@
     }
 
     .stack-state-card--after {
-        border-color: rgba(253, 54, 110, 0.35);
-        background: linear-gradient(180deg, rgba(253, 54, 110, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
+        border-color: hsl(var(--web-color-pink-500) / 0.35);
+        background: linear-gradient(
+            180deg,
+            hsl(var(--web-color-pink-500) / 0.1) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+        );
     }
 
     .stack-state-card__label {
@@ -560,7 +566,7 @@
     }
 
     .stack-state-card--after .stack-state-card__list li::before {
-        background: rgba(253, 54, 110, 0.8);
+        background: hsl(var(--web-color-pink-500) / 0.8);
     }
 
     .stack-card__helper {
diff --git a/src/scss/1-css-variables/_colors.scss b/src/scss/1-css-variables/_colors.scss
index 0c163db3ea..fd4b946c73 100644
--- a/src/scss/1-css-variables/_colors.scss
+++ b/src/scss/1-css-variables/_colors.scss
@@ -35,8 +35,8 @@
     --web-color-border: var(--web-color-subtle);
   }
   
-  /* pink */
-  --web-color-pink-hue: 343;
+  /* brand accent (green by default) */
+  --web-color-pink-hue: 151;
   --web-color-pink-200: var(--web-color-pink-hue) 98% 84%;
   --web-color-pink-500: var(--web-color-pink-hue) 98% 60%; /* #FD366E */
   --web-color-pink-600: var(--web-color-pink-hue) 65% 48%;
@@ -79,9 +79,17 @@
   --web-color-blue-700: calc(var(--web-color-blue-hue) - 1) 42%  42%;
 
   /* secondary */
-  --web-color-secondary-hue: 351;
+  --web-color-secondary-hue: 165;
   --web-color-secondary-100: var(--web-color-secondary-hue) 99% 66%; /* #FE536D */
 
+  /* brand helpers for glow, gradients and image tinting */
+  --web-color-brand-rgb: 17 197 115;
+  --web-color-brand-soft-rgb: 56 214 140;
+  --web-color-image-accent-filter: none;
+  --web-color-image-background-filter: none;
+  --web-color-button-primary: var(--web-color-pink-500);
+  --web-color-button-secondary: var(--web-color-secondary-100);
+
   /* greyscale */
   --web-color-white:    0 0% 100%;
   --web-color-greyscale-25:   240 11% 98%;
@@ -105,6 +113,33 @@
   #{$theme-dark} { @include color-dark; }
 }
 
+body.brand-pink {
+  --web-color-pink-hue: 343;
+  --web-color-secondary-hue: 351;
+  --web-color-brand-rgb: 253 54 110;
+  --web-color-brand-soft-rgb: 255 64 120;
+  --web-color-image-accent-filter: none;
+  --web-color-image-background-filter: none;
+  --web-color-button-primary: var(--web-color-pink-500);
+  --web-color-button-secondary: var(--web-color-secondary-100);
+}
+
+body.brand-green {
+  --web-color-pink-hue: 151;
+  --web-color-secondary-hue: 165;
+  --web-color-pink-500: 151 72% 38%;
+  --web-color-pink-600: 151 66% 32%;
+  --web-color-accent: var(--web-color-pink-500);
+  --web-color-accent-darker: var(--web-color-pink-600);
+  --web-color-accent-click: var(--web-color-pink-500);
+  --web-color-brand-rgb: 15 166 95;
+  --web-color-brand-soft-rgb: 56 214 140;
+  --web-color-image-accent-filter: hue-rotate(155deg) saturate(1.08) brightness(0.98);
+  --web-color-image-background-filter: hue-rotate(155deg) saturate(1.04) brightness(0.96);
+  --web-color-button-primary: 151 74% 36%;
+  --web-color-button-secondary: 165 78% 42%;
+}
+
 .#{$p}-u-color-text-primary { color:hsl(var(--web-color-primary))!important; }
 .#{$p}-u-color-text-secondary { color:hsl(var(--web-color-secondary))!important; }
 .#{$p}-u-color-text-tertiary { color:hsl(var(--web-color-tertiary))!important; }
diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss
index 93ab1a1097..685f18b644 100644
--- a/src/scss/6-elements/_button.scss
+++ b/src/scss/6-elements/_button.scss
@@ -4,7 +4,7 @@
   --m-border-radius: var(--border-radius-small, #{pxToRem(8)});
   --m-border-size: #{pxToRem(1)};
 
-  background: linear-gradient(135deg, hsl(var(--web-color-pink-500)) 0%, hsl(var(--web-color-pink-500)) 61%, hsl(var(--web-color-secondary-100)) 100%);
+  background: linear-gradient(135deg, hsl(var(--web-color-button-primary)) 0%, hsl(var(--web-color-button-primary)) 61%, hsl(var(--web-color-button-secondary)) 100%);
   background-origin: border-box;
   display:flex; inline-size:fit-content; justify-content:center; align-items:center; gap:pxToRem(8);
   padding-inline:pxToRem(14); padding-block:pxToRem(7); min-block-size:pxToRem(40);
@@ -17,17 +17,17 @@
   .#{$p}-inline-tag { margin-inline-end:pxToRem(-2); background:rgba(255, 255, 255, 0.24); }
 
   &:where(:hover):where(:not(#{$disabled})) {
-    box-shadow:0 0 pxToRem(32) 0 rgba(253, 54, 110, 0.32);
+    box-shadow:0 0 pxToRem(32) 0 hsl(var(--web-color-button-primary) / 0.32);
   }
 
   &:where(:active):where(:not(#{$disabled})) {
-    box-shadow:0 0 pxToRem(32) 0 rgba(253, 54, 110, 0.24);
+    box-shadow:0 0 pxToRem(32) 0 hsl(var(--web-color-button-primary) / 0.24);
   }
 
   &:where(:focus-visible) {
-    box-shadow: 0 0 0 pxToRem(4) rgba(253, 54, 110, 0.24);
+    box-shadow: 0 0 0 pxToRem(4) hsl(var(--web-color-button-primary) / 0.24);
     #{$theme-dark} {
-      box-shadow: 0 0 0 pxToRem(4) rgba(253, 54, 110, 0.48);
+      box-shadow: 0 0 0 pxToRem(4) hsl(var(--web-color-button-primary) / 0.48);
     }
   }
   &:where(#{$disabled}) { opacity:0.4; cursor:initial; }
@@ -40,26 +40,26 @@
     @include border-gradient;
 
     .#{$p}-inline-tag {
-      background:rgba(255, 64, 120, 0.10);
-      color:hsl(var(--web-color-pink-500));
+      background:hsl(var(--web-color-secondary-100) / 0.10);
+      color:hsl(var(--web-color-button-primary));
     }
 
 
     @mixin dark-mode {
-      background: rgba(253, 54, 110, 0.04);
+      background: hsl(var(--web-color-button-primary) / 0.04);
       color: hsl(var(--web-color-greyscale-100));
-      box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
-      [class*="icon"] { color:hsl(var(--web-color-pink-500)); }
+      box-shadow: 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
+      [class*="icon"] { color:hsl(var(--web-color-button-primary)); }
       .#{$p}-inline-tag {
-        background:rgba(255, 64, 120, 0.24);
+        background:hsl(var(--web-color-secondary-100) / 0.24);
         color:hsl(var(--web-color-greyscale-50));
       }
 
 
         --m-border-gradient-before: linear-gradient(
           to bottom,
-          rgba(253, 54, 110, 0.48) 0%,
-          rgba(253, 54, 110, 0) 180%
+          hsl(var(--web-color-button-primary) / 0.48) 0%,
+          hsl(var(--web-color-button-primary) / 0) 180%
         );
 
 
@@ -72,11 +72,11 @@
 
 
       &:where(:hover):not(:disabled) {
-        background: rgba(253, 54, 110, 0.10);
-        box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
+        background: hsl(var(--web-color-button-primary) / 0.10);
+        box-shadow: 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
         --m-border-gradient-before: linear-gradient(
-        180deg, rgba(253, 54, 110, 0.64) 0%,
-        rgba(253, 54, 110, 0.00) 163.1%
+        180deg, hsl(var(--web-color-button-primary) / 0.64) 0%,
+        hsl(var(--web-color-button-primary) / 0.00) 163.1%
         );
         --m-border-gradient-after: radial-gradient(
           42.86% 42.86% at 50.55% 0%,
@@ -87,33 +87,33 @@
       }
 
       &:where(:active):not(:disabled) {
-        background: rgba(253, 54, 110, 0.16);
-        box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
+        background: hsl(var(--web-color-button-primary) / 0.16);
+        box-shadow: 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
         --m-border-gradient-before:
-        linear-gradient(180deg, rgba(253, 54, 110, 0.64) 0%, rgba(253, 54, 110, 0.00) 163.1%);
+        linear-gradient(180deg, hsl(var(--web-color-button-primary) / 0.64) 0%, hsl(var(--web-color-button-primary) / 0.00) 163.1%);
         --m-border-gradient-after:
         radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.00) 100%);
       }
 
       &:where(:focus-visible):not(:disabled) {
-        background: rgba(253, 54, 110, 0.04);
-        box-shadow: 0px 0px 0px 4px rgba(253, 54, 110, 0.16), 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
+        background: hsl(var(--web-color-button-primary) / 0.04);
+        box-shadow: 0px 0px 0px 4px hsl(var(--web-color-button-primary) / 0.16), 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
       }
     }
 
 
     @mixin light-mode {
-      background: hsla(343, 98%, 60%, 0.08);
+      background: hsl(var(--web-color-button-primary) / 0.08);
       box-shadow: none;
       color: hsl(var(--web-color-accent-click));
       .#{$p}-inline-tag {
-        background:rgba(255, 64, 120, 0.10);
-        color:hsl(var(--web-color-pink-500));
+        background:hsl(var(--web-color-secondary-100) / 0.10);
+        color:hsl(var(--web-color-button-primary));
       }
 
 
         --m-border-gradient-before:
-        linear-gradient(180deg, rgba(253, 54, 110, 0.19) 0%, rgba(253, 54, 110, 0.48) 100%);
+        linear-gradient(180deg, hsl(var(--web-color-button-primary) / 0.19) 0%, hsl(var(--web-color-button-primary) / 0.48) 100%);
 
 
 
@@ -122,15 +122,15 @@
 
 
       &:where(:hover):not(:disabled) {
-        background: rgba(253, 54, 110, 0.10);
+        background: hsl(var(--web-color-button-primary) / 0.10);
       }
 
       &:where(:active):not(:disabled) {
-        background: rgba(253, 54, 110, 0.12);
+        background: hsl(var(--web-color-button-primary) / 0.12);
       }
 
       &:where(:focus-visible):not(:disabled) {
-        box-shadow: 0px 0px 0px 4px rgba(253, 54, 110, 0.24);
+        box-shadow: 0px 0px 0px 4px hsl(var(--web-color-button-primary) / 0.24);
       }
     }
     @include light-mode;
@@ -279,7 +279,7 @@
         flex-shrink:0;
 
         #{$theme-light} & {
-          color:hsl(var(--web-color-pink-500));
+          color:hsl(var(--web-color-button-primary));
         }
 
         #{$theme-dark} & {
diff --git a/src/scss/6-elements/_card.scss b/src/scss/6-elements/_card.scss
index c669745eb6..e995655458 100644
--- a/src/scss/6-elements/_card.scss
+++ b/src/scss/6-elements/_card.scss
@@ -63,7 +63,11 @@
     -webkit-backdrop-filter:blur(pxToRem(100));
     backdrop-filter:blur(pxToRem(100));
     &-pink {
-      background: linear-gradient(180deg, rgba(253, 54, 110, 0.04) 61.28%, rgba(253, 54, 110, 0.00) 100%);
+      background: linear-gradient(
+        180deg,
+        hsl(var(--web-color-pink-500) / 0.04) 61.28%,
+        hsl(var(--web-color-pink-500) / 0.00) 100%
+      );
       border-color:hsl(var(--web-color-pink-500) / 0.5);
     }
   }
@@ -94,7 +98,11 @@
     --m-border-gradient-before: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
 
     &.is-transparent-pink {
-      --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, 0.48) 0%, rgba(253, 54, 110, 0.00) 100%);
+      --m-border-gradient-before: linear-gradient(
+        180deg,
+        hsl(var(--web-color-pink-500) / 0.48) 0%,
+        hsl(var(--web-color-pink-500) / 0.00) 100%
+      );
       --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%);
     }
   }
diff --git a/src/scss/6-elements/_hero-banner-button.scss b/src/scss/6-elements/_hero-banner-button.scss
index b7b6cbad8a..5ff862b8e1 100644
--- a/src/scss/6-elements/_hero-banner-button.scss
+++ b/src/scss/6-elements/_hero-banner-button.scss
@@ -4,8 +4,8 @@
   @include border-gradient;
   --m-border-gradient-before: linear-gradient(
     to bottom,
-    rgba(253, 54, 110, 0.48) 0%,
-    rgba(253, 54, 110, 0) 180%
+    hsl(var(--web-color-pink-500) / 0.48) 0%,
+    hsl(var(--web-color-pink-500) / 0) 180%
   );
   --m-border-gradient-after: radial-gradient(
     42.86% 42.86% at 50.55% -0%,
diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
index 51a4422cbf..4c31a352ef 100644
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -12,7 +12,10 @@
   --p-side-nav-item-bg-color-hover: var(--web-color-greyscale-50);
 
   --p-side-nav-item-text-color-selected: var(--web-color-primary);
-  --p-side-nav-item-icon-color-selected: linear-gradient( hsla(343, 98%, 60%, 1), hsla(22, 98%, 60%, 1) );
+  --p-side-nav-item-icon-color-selected: linear-gradient(
+    hsl(var(--web-color-accent)),
+    hsl(var(--web-color-secondary-100))
+  );
 
   --p-side-nav-bg-color: var(--p-body-bg-color);
 
diff --git a/src/scss/abstract/mixins/_checked-badge.scss b/src/scss/abstract/mixins/_checked-badge.scss
index c3abc071b3..1d5de62f75 100644
--- a/src/scss/abstract/mixins/_checked-badge.scss
+++ b/src/scss/abstract/mixins/_checked-badge.scss
@@ -4,9 +4,12 @@
   display:block;
   inline-size:pxToRem(20);
   min-inline-size:pxToRem(20);
-  block-size:pxToRem(24);
+  block-size:pxToRem(20);
+  border-radius: 50%;
+  background-color: hsl(var(--web-color-pink-500) / 0.08);
+  border: solid pxToRem(1.2) hsl(var(--web-color-pink-500) / 0.32);
   background-repeat: no-repeat;
   background-size: contain;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgZmlsbD0iI0ZEMzY2RSIgZmlsbC1vcGFjaXR5PSIwLjA4IiBzdHJva2U9IiNGRDM2NkUiIHN0cm9rZS1vcGFjaXR5PSIwLjMyIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02LjI1IDExLjVMOC43NSAxMy41TDEzLjc1IDciIHN0cm9rZT0iI0U0RTRFNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
-  background-position-y: center;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjI1IDUuNUwzLjc1IDcuNUw4Ljc1IDEiIHN0cm9rZT0iI0U0RTRFNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
+  background-position: center;
 }
\ No newline at end of file
diff --git a/static/images/logos/appwrite-green.svg b/static/images/logos/appwrite-green.svg
new file mode 100644
index 0000000000..0c8ddc4381
--- /dev/null
+++ b/static/images/logos/appwrite-green.svg
@@ -0,0 +1,13 @@
+<svg width="132" height="24" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.5573 19.495C40.7162 19.495 41.8075 18.3817 42.282 17.6238H42.4955C42.5904 18.4291 43.1598 19.1871 44.2749 19.1871H46.3864V16.8185H45.8407C45.4611 16.8185 45.2713 16.6053 45.2713 16.2737V6.77565H42.4718V8.29155H42.2583C41.7126 7.5336 40.5738 6.46773 38.4861 6.46773C35.1646 6.46773 32.6973 9.2153 32.6973 12.9814C32.6973 16.7474 35.2121 19.495 38.5573 19.495ZM39.0555 16.7948C37.0863 16.7948 35.5442 15.3499 35.5442 13.005C35.5442 10.7075 37.0389 9.14424 39.0317 9.14424C40.9297 9.14424 42.5193 10.5417 42.5193 13.005C42.5193 15.1131 41.167 16.7948 39.0555 16.7948Z" fill="#EDEDF0"/>
+<path d="M48.0392 23.9998H50.8387V17.6238H51.0522C51.5742 18.3817 52.6893 19.495 54.8956 19.495C58.2171 19.495 60.637 16.7 60.637 12.9814C60.637 9.23899 58.051 6.46773 54.7058 6.46773C52.5706 6.46773 51.5267 7.62834 51.0285 8.26786H50.815V6.77565H48.0392V23.9998ZM54.3025 16.8658C52.3808 16.8658 50.7913 15.4447 50.7913 12.9814C50.7913 10.8733 52.1436 9.09687 54.2551 9.09687C56.2242 9.09687 57.7663 10.6365 57.7663 12.9814C57.7663 15.2789 56.2717 16.8658 54.3025 16.8658Z" fill="#EDEDF0"/>
+<path d="M62.0816 23.9998H64.8811V17.6238H65.0946C65.6165 18.3817 66.7316 19.495 68.938 19.495C72.2594 19.495 74.4487 16.7 74.4487 12.9814C74.4487 9.23899 72.0934 6.46773 68.7482 6.46773C66.613 6.46773 65.5691 7.62834 65.0709 8.26786H64.8573V6.77565H62.0816V23.9998ZM68.3449 16.8658C66.4232 16.8658 64.8336 15.4447 64.8336 12.9814C64.8336 10.8733 66.1859 9.09687 68.2974 9.09687C70.2666 9.09687 71.8087 10.6365 71.8087 12.9814C71.8087 15.2789 70.314 16.8658 68.3449 16.8658Z" fill="#EDEDF0"/>
+<path d="M78.1493 19.4753H82.1114L84.3652 9.74037H84.5076L86.7614 19.4753H90.6997L93.8533 7.06386H91.0318L88.778 16.8225H88.5645L86.3106 7.06386H82.5858L80.3083 16.8225H80.0948L77.8647 7.06386H74.8754L78.1493 19.4753Z" fill="#EDEDF0"/>
+<path d="M95.2716 19.4753H98.0711V13.3406C98.0711 10.9957 99.1624 9.55088 101.203 9.55088H102.436V6.75594H101.511C99.9216 6.75594 98.7117 7.84549 98.2372 8.88767H98.0474V7.06386H95.2716V19.4753Z" fill="#EDEDF0"/>
+<path d="M116.329 19.4753H118.512V16.9883H116.353C115.499 16.9883 115.143 16.6093 115.143 15.7329V9.52719H118.654V7.06386H115.143V3.58203H112.486V7.06386H110.161V9.52719H112.32V15.7566C112.32 18.3857 113.909 19.4753 116.329 19.4753Z" fill="#EDEDF0"/>
+<path d="M126.022 19.495C128.608 19.495 130.886 18.2159 131.692 15.6342L129.13 15.0183C128.679 16.3921 127.375 17.1027 125.999 17.1027C123.958 17.1027 122.606 15.7763 122.582 13.6919H132.001V12.9103C132.001 9.2153 129.7 6.46773 125.904 6.46773C122.558 6.46773 119.688 9.09687 119.688 13.005C119.688 16.7948 122.226 19.495 126.022 19.495ZM122.606 11.6549C122.772 10.1627 124.124 8.90738 125.904 8.90738C127.612 8.90738 129.012 9.97325 129.154 11.6549H122.606Z" fill="#EDEDF0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.916 19.4753H106.116V9.52719H103.934V7.06386H108.916V19.4753Z" fill="#EDEDF0"/>
+<path d="M107.309 5.3412C108.329 5.3412 109.088 4.58325 109.088 3.58845C109.088 2.61732 108.329 1.85938 107.309 1.85938C106.288 1.85938 105.529 2.61732 105.529 3.58845C105.529 4.58325 106.288 5.3412 107.309 5.3412Z" fill="#EDEDF0"/>
+<path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#11C573"/>
+<path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#11C573"/>
+</svg>
diff --git a/static/images/logos/appwrite-light-green.svg b/static/images/logos/appwrite-light-green.svg
new file mode 100644
index 0000000000..a5341cfaf4
--- /dev/null
+++ b/static/images/logos/appwrite-light-green.svg
@@ -0,0 +1,13 @@
+<svg width="132" height="24" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.5573 19.4953C40.7162 19.4953 41.8075 18.3821 42.282 17.6242H42.4955C42.5904 18.4295 43.1598 19.1874 44.2749 19.1874H46.3864V16.8188H45.8407C45.4611 16.8188 45.2713 16.6057 45.2713 16.2741V6.77602H42.4718V8.29191H42.2583C41.7126 7.53397 40.5738 6.4681 38.4861 6.4681C35.1646 6.4681 32.6973 9.21567 32.6973 12.9817C32.6973 16.7478 35.2121 19.4953 38.5573 19.4953ZM39.0555 16.7952C37.0863 16.7952 35.5442 15.3503 35.5442 13.0054C35.5442 10.7079 37.0389 9.14461 39.0317 9.14461C40.9297 9.14461 42.5193 10.5421 42.5193 13.0054C42.5193 15.1135 41.167 16.7952 39.0555 16.7952Z" fill="#19191C"/>
+<path d="M48.0392 24.0001H50.8387V17.6242H51.0522C51.5742 18.3821 52.6893 19.4953 54.8956 19.4953C58.2171 19.4953 60.637 16.7004 60.637 12.9817C60.637 9.23935 58.051 6.4681 54.7058 6.4681C52.5706 6.4681 51.5267 7.62871 51.0285 8.26823H50.815V6.77602H48.0392V24.0001ZM54.3025 16.8662C52.3808 16.8662 50.7913 15.4451 50.7913 12.9817C50.7913 10.8737 52.1436 9.09724 54.2551 9.09724C56.2242 9.09724 57.7663 10.6368 57.7663 12.9817C57.7663 15.2793 56.2717 16.8662 54.3025 16.8662Z" fill="#19191C"/>
+<path d="M62.0816 24.0001H64.8811V17.6242H65.0946C65.6165 18.3821 66.7316 19.4953 68.938 19.4953C72.2594 19.4953 74.4487 16.7004 74.4487 12.9817C74.4487 9.23935 72.0934 6.4681 68.7482 6.4681C66.613 6.4681 65.5691 7.62871 65.0709 8.26823H64.8573V6.77602H62.0816V24.0001ZM68.3449 16.8662C66.4232 16.8662 64.8336 15.4451 64.8336 12.9817C64.8336 10.8737 66.1859 9.09724 68.2974 9.09724C70.2666 9.09724 71.8087 10.6368 71.8087 12.9817C71.8087 15.2793 70.314 16.8662 68.3449 16.8662Z" fill="#19191C"/>
+<path d="M78.1493 19.4756H82.1114L84.3652 9.74073H84.5076L86.7614 19.4756H90.6997L93.8533 7.06423H91.0318L88.778 16.8228H88.5645L86.3106 7.06423H82.5858L80.3083 16.8228H80.0948L77.8647 7.06423H74.8754L78.1493 19.4756Z" fill="#19191C"/>
+<path d="M95.2716 19.4756H98.0711V13.341C98.0711 10.9961 99.1624 9.55125 101.203 9.55125H102.436V6.75631H101.511C99.9216 6.75631 98.7117 7.84586 98.2372 8.88804H98.0474V7.06422H95.2716V19.4756Z" fill="#19191C"/>
+<path d="M116.329 19.4756H118.512V16.9886H116.353C115.499 16.9886 115.143 16.6096 115.143 15.7333V9.52756H118.654V7.06422H115.143V3.5824H112.486V7.06422H110.161V9.52756H112.32V15.757C112.32 18.3861 113.909 19.4756 116.329 19.4756Z" fill="#19191C"/>
+<path d="M126.022 19.4953C128.608 19.4953 130.886 18.2163 131.692 15.6345L129.13 15.0187C128.679 16.3925 127.375 17.1031 125.999 17.1031C123.958 17.1031 122.606 15.7767 122.582 13.6923H132.001V12.9107C132.001 9.21567 129.7 6.4681 125.904 6.4681C122.558 6.4681 119.688 9.09724 119.688 13.0054C119.688 16.7952 122.226 19.4953 126.022 19.4953ZM122.606 11.6553C122.772 10.1631 124.124 8.90775 125.904 8.90775C127.612 8.90775 129.012 9.97361 129.154 11.6553H122.606Z" fill="#19191C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.916 19.4756H106.116V9.52756H103.934V7.06422H108.916V19.4756Z" fill="#19191C"/>
+<path d="M107.309 5.34169C108.329 5.34169 109.088 4.58374 109.088 3.58893C109.088 2.61781 108.329 1.85986 107.309 1.85986C106.288 1.85986 105.529 2.61781 105.529 3.58893C105.529 4.58374 106.288 5.34169 107.309 5.34169Z" fill="#19191C"/>
+<path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#11C573"/>
+<path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#11C573"/>
+</svg>
diff --git a/static/images/logos/logo-green.svg b/static/images/logos/logo-green.svg
new file mode 100644
index 0000000000..96ed2b3d4f
--- /dev/null
+++ b/static/images/logos/logo-green.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
+    fill="#0FA65F" />
+  <path
+    d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
+    fill="#0FA65F" />
+</svg>

From 422399e21e455463fb4b6dfa8b8e0d7ed7826862 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Tue, 31 Mar 2026 17:59:32 +0200
Subject: [PATCH 2/8] Refactor BlogCta background color to use HSL, add global
 blur filter for PreFooter, introduce 'mongo' icon type, and update HeroBanner
 component with new title and icon options. Enhance Docs layout with dynamic
 logo sources based on brand theme.

---
 src/lib/components/BlogCta.svelte             |  2 +-
 src/lib/components/PreFooter.svelte           |  4 +++
 .../components/ui/icon/sprite/sprite.svelte   |  8 ++++++
 src/lib/components/ui/icon/types.ts           |  1 +
 src/lib/layouts/Docs.svelte                   | 25 ++++++++++++++----
 src/markdoc/layouts/Post.svelte               |  2 +-
 .../(components)/hero-banner.svelte           | 26 ++++++++++++++++---
 .../(marketing)/(components)/hero.svelte      |  2 +-
 src/routes/+layout.svelte                     |  4 +++
 src/routes/blog/[[page]]/+page.svelte         |  2 +-
 src/routes/docs/+page.svelte                  |  2 +-
 11 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/BlogCta.svelte b/src/lib/components/BlogCta.svelte
index f4fed20019..fb8bb574da 100644
--- a/src/lib/components/BlogCta.svelte
+++ b/src/lib/components/BlogCta.svelte
@@ -39,7 +39,7 @@
             z-index: -1;
             background-image: radial-gradient(
                 ellipse at center,
-                rgba(253, 54, 110, 0.09),
+                hsl(var(--web-color-pink-500) / 0.09),
                 transparent 85%
             );
         }
diff --git a/src/lib/components/PreFooter.svelte b/src/lib/components/PreFooter.svelte
index 388cfd9bc2..f9c903d619 100644
--- a/src/lib/components/PreFooter.svelte
+++ b/src/lib/components/PreFooter.svelte
@@ -162,4 +162,8 @@
         max-block-size: unset;
         filter: blur(100px);
     }
+
+    :global(body.brand-green .web-pre-footer-bg) {
+        filter: blur(100px) var(--web-color-image-background-filter);
+    }
 </style>
diff --git a/src/lib/components/ui/icon/sprite/sprite.svelte b/src/lib/components/ui/icon/sprite/sprite.svelte
index 905b80b55f..fd69fc81bd 100644
--- a/src/lib/components/ui/icon/sprite/sprite.svelte
+++ b/src/lib/components/ui/icon/sprite/sprite.svelte
@@ -97,6 +97,14 @@
             fill-rule="evenodd"
         ></path>
     </symbol>
+    <symbol id="mongo" stroke="currentColor" viewBox="0 0 120 258">
+        <path
+            d="M83.009 28.756 C 72.133 15.909,62.767 2.861,60.854 0.151 C 60.653 -0.050,60.350 -0.050,60.149 0.151 C 58.236 2.861,48.870 15.909,37.994 28.756 C -55.359 147.292,52.697 227.287,52.697 227.287 L 53.603 227.889 C 54.409 240.235,56.423 258.000,56.423 258.000 L 60.451 258.000 L 64.479 258.000 C 64.479 258.000,66.493 240.335,67.299 227.889 L 68.205 227.187 C 68.306 227.187,176.362 147.292,83.009 28.756 M60.451 225.480 C 60.451 225.480,55.617 221.365,54.308 219.257 L 54.308 219.057 L 60.149 89.981 C 60.149 89.580,60.753 89.580,60.753 89.981 L 66.594 219.057 L 66.594 219.257 C 65.285 221.365,60.451 225.480,60.451 225.480 Z"
+            fill="currentColor"
+            stroke="none"
+            fill-rule="evenodd"
+        ></path>
+    </symbol>
     <symbol id="divider-vertical" stroke="currentColor" viewBox="0 0 20 20">
         <path
             d="M9.750 3.463 C 9.591 3.536,9.520 3.610,9.451 3.775 C 9.406 3.884,9.400 4.585,9.400 10.009 L 9.400 16.119 9.475 16.268 C 9.696 16.705,10.304 16.705,10.525 16.268 L 10.600 16.119 10.599 10.001 C 10.599 4.136,10.596 3.878,10.537 3.750 C 10.464 3.591,10.390 3.520,10.225 3.451 C 10.064 3.384,9.914 3.388,9.750 3.463 "
diff --git a/src/lib/components/ui/icon/types.ts b/src/lib/components/ui/icon/types.ts
index b23a1e419c..2eebf5e7a2 100644
--- a/src/lib/components/ui/icon/types.ts
+++ b/src/lib/components/ui/icon/types.ts
@@ -11,6 +11,7 @@ export type IconType =
     | 'github'
     | 'ticket'
     | 'sparkle'
+    | 'mongo'
     | 'divider-vertical'
     | 'nuxt'
     | 'chevron-up'
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 26e8871f78..6425c943ac 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -41,7 +41,7 @@
 <script lang="ts">
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
-    import { getContext, setContext } from 'svelte';
+    import { getContext, onMount, setContext } from 'svelte';
     import { SOCIAL_STATS } from '$lib/constants';
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
@@ -55,6 +55,7 @@
     }
 
     let { variant = 'default', isReferences = false, children }: Props = $props();
+    let brandTheme: 'pink' | 'green' = 'green';
 
     const variantClasses: Record<DocsLayoutVariant, string> = {
         default: 'web-grid-side-nav max-w-[90rem] mx-auto',
@@ -63,6 +64,14 @@
     };
 
     let variantClass = $derived(variantClasses[variant]);
+    let darkLogoSrc = $derived(
+        brandTheme === 'green' ? '/images/logos/appwrite-green.svg' : '/images/logos/appwrite.svg'
+    );
+    let lightLogoSrc = $derived(
+        brandTheme === 'green'
+            ? '/images/logos/appwrite-light-green.svg'
+            : '/images/logos/appwrite-light.svg'
+    );
 
     $effect(() => {
         $layoutState.currentVariant = variant;
@@ -77,6 +86,12 @@
         document.body.style.overflow = '';
     });
 
+    onMount(() => {
+        if (document.body.classList.contains('brand-pink')) {
+            brandTheme = 'pink';
+        }
+    });
+
     const key = page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
     setContext(key, true);
 
@@ -100,14 +115,14 @@
             <a href="/" aria-label="homepage">
                 <img
                     class="web-logo web-u-only-dark"
-                    src="/images/logos/appwrite.svg"
+                    src={darkLogoSrc}
                     alt="appwrite"
                     height="24"
                     width="130"
                 />
                 <img
                     class="web-logo web-u-only-light"
-                    src="/images/logos/appwrite-light.svg"
+                    src={lightLogoSrc}
                     alt="appwrite"
                     height="24"
                     width="130"
@@ -140,14 +155,14 @@
                 <a href="/" aria-label="homepage">
                     <img
                         class="web-logo web-u-only-dark"
-                        src="/images/logos/appwrite.svg"
+                        src={darkLogoSrc}
                         alt="appwrite"
                         height="24"
                         width="130"
                     />
                     <img
                         class="web-logo web-u-only-light"
-                        src="/images/logos/appwrite-light.svg"
+                        src={lightLogoSrc}
                         alt="appwrite"
                         height="24"
                         width="130"
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index 7812ce6966..cc6b8013b0 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -161,7 +161,7 @@
                         </div>
                     {/if}
 
-                    <div class="web-article-content prose prose-large mt-8 flex flex-col gap-8">
+                    <div class="web-article-content prose prose-large blog-content-images mt-8 flex flex-col gap-8">
                         {#if lastUpdated}
                             <span class="text-main-body last-updated-text font-medium">
                                 Updated:
diff --git a/src/routes/(marketing)/(components)/hero-banner.svelte b/src/routes/(marketing)/(components)/hero-banner.svelte
index a0010965e6..9fc9a0a674 100644
--- a/src/routes/(marketing)/(components)/hero-banner.svelte
+++ b/src/routes/(marketing)/(components)/hero-banner.svelte
@@ -1,19 +1,39 @@
 <script lang="ts">
     import { Icon } from '$lib/components/ui';
+    import type { IconType } from '$lib/components/ui/icon/types';
 
     type Props = {
         title: string;
         href: string;
+        icon?: Extract<IconType, 'mongo' | 'sparkle'>;
         class?: string;
     };
 
-    const { title, href }: Props = $props();
+    const { title, href, icon = 'mongo' }: Props = $props();
 </script>
 
 <a {href} class="web-hero-banner-button relative mb-4 flex items-center!">
-    <Icon name="sparkle" class="shrink-0" aria-hidden="true" />
-    <span class="text-caption shrink-0 font-medium">New</span>
+    {#if icon === 'mongo'}
+        <span class="mongo-icon-badge shrink-0" aria-hidden="true">
+            <Icon name="mongo" style="width: 0.75rem; height: 1.125rem; color: #00ED64;" />
+        </span>
+    {:else}
+        <Icon name="sparkle" class="shrink-0" aria-hidden="true" />
+    {/if}
     <div class="web-hero-banner-button-sep"></div>
     <span class="text-caption web-u-trim-1">{title}</span>
     <Icon name="arrow-right" class="shrink-0" aria-hidden="true" />
 </a>
+
+<style>
+    .mongo-icon-badge {
+        width: 1.375rem;
+        height: 1.375rem;
+        padding: 0.0625rem;
+        border-radius: 9999px;
+        background-color: #001e2b;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index d51aaa6f34..cde9d9db90 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -35,7 +35,7 @@
             class="animate-blur-in flex flex-col gap-4 [animation-delay:150ms] [animation-duration:1000ms] md:ml-12 lg:ml-0"
         >
             <HeroBanner
-                title="Introducing Appwrite Arena"
+                title="Appwrite partners with the world's best database company"
                 href="/blog/post/announcing-appwrite-arena"
             />
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b2d55fb91a..188b109afc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -266,4 +266,8 @@
     ) {
         filter: var(--web-color-image-background-filter);
     }
+
+    :global(body.brand-green .blog-content-images img:not(.no-brand-filter)) {
+        filter: var(--web-color-image-background-filter);
+    }
 </style>
diff --git a/src/routes/blog/[[page]]/+page.svelte b/src/routes/blog/[[page]]/+page.svelte
index 33abadeaeb..3fd709219c 100644
--- a/src/routes/blog/[[page]]/+page.svelte
+++ b/src/routes/blog/[[page]]/+page.svelte
@@ -204,7 +204,7 @@
                             gradientTransform="translate(-2.5 629.739) rotate(90) scale(289.261 362.5)"
                         >
                             <stop offset="0.281696" stop-color="#FE9567" />
-                            <stop offset="0.59375" stop-color="#FD366E" />
+                            <stop offset="0.59375" stop-color="hsl(var(--web-color-pink-500))" />
                         </radialGradient>
                     </defs>
                 </svg>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index 54244c1474..1b87b0d4d1 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -87,7 +87,7 @@
         </div>
 
         <section class="web-hero is-align-start e-hero-docs relative">
-            <HeroBanner title="MCP Server" href="/docs/tooling/mcp" />
+            <HeroBanner title="MCP Server" href="/docs/tooling/mcp" icon="sparkle" />
             <h1 class="text-display font-aeonik-pro text-primary max-w-[600px]">
                 Docs<span class="web-u-color-text-accent">_ </span>
             </h1>

From c619e4f68ff7566a9207d0c5665b7b8ab951d198 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Tue, 31 Mar 2026 18:18:14 +0200
Subject: [PATCH 3/8] Update brand theme colors and logo sources; change
 default brand theme to pink, adjust CSS variables for pink hues, and
 synchronize logo display based on theme changes.

---
 src/app.css                                  |  8 ++++----
 src/app.html                                 |  2 +-
 src/lib/components/FooterNav.svelte          | 19 +++++++++++++++----
 src/lib/components/layout/site-footer.svelte | 19 +++++++++++++++----
 src/lib/layouts/Docs.svelte                  | 17 +++++++++++++----
 src/lib/layouts/Main.svelte                  | 20 +++++++++++++++-----
 src/routes/+layout.svelte                    | 15 ++++++++++++---
 src/scss/1-css-variables/_colors.scss        | 10 +++++-----
 8 files changed, 80 insertions(+), 30 deletions(-)

diff --git a/src/app.css b/src/app.css
index 32354554e4..a99b1a8624 100644
--- a/src/app.css
+++ b/src/app.css
@@ -451,10 +451,10 @@
     /* pink polyfills */
     --transition: 0.2s;
 
-    /* color hues (green by default) */
-    --color-pink-hue: 151;
-    --color-secondary-hue: 165;
-    --brand-accent-rgb: 17 197 115;
+    /* color hues (pink by default) */
+    --color-pink-hue: 343;
+    --color-secondary-hue: 351;
+    --brand-accent-rgb: 253 54 110;
     --color-red-hue: 3;
     --color-orange-hue: 18;
     --color-mint-hue: 177;
diff --git a/src/app.html b/src/app.html
index 0d274c20b7..362d674ba4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="twitter:site" content="@appwrite" />
-        <link rel="icon" type="image/svg+xml" href="/images/logos/logo-green.svg" />
+        <link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
 
         <!-- apple touch icons -->
         <link
diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
index 7e53473d12..bbed50aae0 100644
--- a/src/lib/components/FooterNav.svelte
+++ b/src/lib/components/FooterNav.svelte
@@ -5,7 +5,7 @@
     import { createAccordion, melt } from '@melt-ui/svelte';
 
     export let noBorder = false;
-    let logoSrc = '/images/logos/appwrite-green.svg';
+    let logoSrc = '/images/logos/appwrite.svg';
 
     const {
         elements: { content, heading, item, root, trigger },
@@ -110,10 +110,21 @@
             ]
         };
 
+    const syncBrandLogo = () => {
+        logoSrc = document.body.classList.contains('brand-pink')
+            ? '/images/logos/appwrite.svg'
+            : '/images/logos/appwrite-green.svg';
+    };
+
     onMount(() => {
-        if (document.body.classList.contains('brand-pink')) {
-            logoSrc = '/images/logos/appwrite.svg';
-        }
+        syncBrandLogo();
+
+        const brandObserver = new MutationObserver(syncBrandLogo);
+        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+        return () => {
+            brandObserver.disconnect();
+        };
     });
 </script>
 
diff --git a/src/lib/components/layout/site-footer.svelte b/src/lib/components/layout/site-footer.svelte
index 1adbde20bb..80e522b9f8 100644
--- a/src/lib/components/layout/site-footer.svelte
+++ b/src/lib/components/layout/site-footer.svelte
@@ -4,7 +4,7 @@
     import { slide } from 'svelte/transition';
 
     export let noBorder = false;
-    let logoSrc = '/images/logos/appwrite-green.svg';
+    let logoSrc = '/images/logos/appwrite.svg';
 
     const {
         elements: { content, heading, item, root, trigger },
@@ -94,10 +94,21 @@
             ]
         };
 
+    const syncBrandLogo = () => {
+        logoSrc = document.body.classList.contains('brand-pink')
+            ? '/images/logos/appwrite.svg'
+            : '/images/logos/appwrite-green.svg';
+    };
+
     onMount(() => {
-        if (document.body.classList.contains('brand-pink')) {
-            logoSrc = '/images/logos/appwrite.svg';
-        }
+        syncBrandLogo();
+
+        const brandObserver = new MutationObserver(syncBrandLogo);
+        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+        return () => {
+            brandObserver.disconnect();
+        };
     });
 </script>
 
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 6425c943ac..7a81b47e71 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -55,7 +55,7 @@
     }
 
     let { variant = 'default', isReferences = false, children }: Props = $props();
-    let brandTheme: 'pink' | 'green' = 'green';
+    let brandTheme = $state<'pink' | 'green'>('pink');
 
     const variantClasses: Record<DocsLayoutVariant, string> = {
         default: 'web-grid-side-nav max-w-[90rem] mx-auto',
@@ -86,10 +86,19 @@
         document.body.style.overflow = '';
     });
 
+    const syncBrandTheme = () => {
+        brandTheme = document.body.classList.contains('brand-pink') ? 'pink' : 'green';
+    };
+
     onMount(() => {
-        if (document.body.classList.contains('brand-pink')) {
-            brandTheme = 'pink';
-        }
+        syncBrandTheme();
+
+        const brandObserver = new MutationObserver(syncBrandTheme);
+        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+        return () => {
+            brandObserver.disconnect();
+        };
     });
 
     const key = page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 3b4a89f7a4..266a7235e1 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -27,7 +27,7 @@
     export let omitMainId = false;
     export let hideNavigation = false;
     let theme: 'light' | 'dark' | null = 'dark';
-    let brandTheme: 'pink' | 'green' = 'green';
+    let brandTheme: 'pink' | 'green' = 'pink';
 
     $: darkLogoSrc =
         brandTheme === 'green' ? '/images/logos/appwrite-green.svg' : '/images/logos/appwrite.svg';
@@ -99,16 +99,26 @@
         return 'dark';
     }
 
+    function syncBrandTheme() {
+        brandTheme = document.body.classList.contains('brand-pink') ? 'pink' : 'green';
+    }
+
     onMount(() => {
         setTimeout(() => {
             $initialized = true;
         }, 1000);
 
-        if (document.body.classList.contains('brand-pink')) {
-            brandTheme = 'pink';
-        }
+        syncBrandTheme();
+
+        const brandObserver = new MutationObserver(syncBrandTheme);
+        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
 
-        return setupThemeObserver();
+        const disposeThemeObserver = setupThemeObserver();
+
+        return () => {
+            brandObserver.disconnect();
+            disposeThemeObserver();
+        };
     });
 
     $: navLinks = [
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 188b109afc..f9009a69ee 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -50,8 +50,13 @@
     }
 
     function getPreferredBrandTheme(): BrandTheme {
+        const envTheme = env.PUBLIC_BRAND_THEME?.toLowerCase();
+        if (isBrandTheme(envTheme)) {
+            return envTheme;
+        }
+
         if (!browser) {
-            return 'green';
+            return 'pink';
         }
 
         const storedTheme = localStorage.getItem('brand-theme');
@@ -59,8 +64,7 @@
             return storedTheme;
         }
 
-        const envTheme = env.PUBLIC_BRAND_THEME?.toLowerCase();
-        return isBrandTheme(envTheme) ? envTheme : 'green';
+        return 'pink';
     }
 </script>
 
@@ -95,6 +99,11 @@
 
         document.body.classList.remove('brand-pink', 'brand-green');
         document.body.classList.add(`brand-${theme}`);
+
+        const favicon = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
+        if (favicon) {
+            favicon.href = theme === 'green' ? '/images/logos/logo-green.svg' : '/images/logos/logo.svg';
+        }
     }
 
     const thresholds = [0.25, 0.5, 0.75];
diff --git a/src/scss/1-css-variables/_colors.scss b/src/scss/1-css-variables/_colors.scss
index fd4b946c73..0070094dd2 100644
--- a/src/scss/1-css-variables/_colors.scss
+++ b/src/scss/1-css-variables/_colors.scss
@@ -35,8 +35,8 @@
     --web-color-border: var(--web-color-subtle);
   }
   
-  /* brand accent (green by default) */
-  --web-color-pink-hue: 151;
+  /* brand accent (pink by default) */
+  --web-color-pink-hue: 343;
   --web-color-pink-200: var(--web-color-pink-hue) 98% 84%;
   --web-color-pink-500: var(--web-color-pink-hue) 98% 60%; /* #FD366E */
   --web-color-pink-600: var(--web-color-pink-hue) 65% 48%;
@@ -79,12 +79,12 @@
   --web-color-blue-700: calc(var(--web-color-blue-hue) - 1) 42%  42%;
 
   /* secondary */
-  --web-color-secondary-hue: 165;
+  --web-color-secondary-hue: 351;
   --web-color-secondary-100: var(--web-color-secondary-hue) 99% 66%; /* #FE536D */
 
   /* brand helpers for glow, gradients and image tinting */
-  --web-color-brand-rgb: 17 197 115;
-  --web-color-brand-soft-rgb: 56 214 140;
+  --web-color-brand-rgb: 253 54 110;
+  --web-color-brand-soft-rgb: 255 64 120;
   --web-color-image-accent-filter: none;
   --web-color-image-background-filter: none;
   --web-color-button-primary: var(--web-color-pink-500);

From c737f660fc3f8485419dcc25d863dd67aec69cab Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Tue, 31 Mar 2026 18:48:42 +0200
Subject: [PATCH 4/8] tag update

---
 src/routes/(marketing)/(components)/pricing.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
index 10458f2ab8..ed0caa5ef1 100644
--- a/src/routes/(marketing)/(components)/pricing.svelte
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -105,10 +105,7 @@
                     <div class="flex items-center gap-2.5">
                         <span class="text-description text-secondary font-medium">{name}</span>
                         {#if label}
-                            <span
-                                class="bg-accent-200 text-caption rounded-lg px-1.5 py-0.5 font-medium text-white"
-                                >{label}</span
-                            >
+                            <div class="web-inline-tag is-pink text-caption font-medium">{label}</div>
                         {/if}
                     </div>
                     <div class="flex flex-1 flex-col">

From 10bf917aececd9c871baaa82d795d3d139ab159c Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Tue, 31 Mar 2026 20:58:09 +0200
Subject: [PATCH 5/8] Enhance product and marketing components with new styles
 and filters for brand consistency. Update image classes to apply
 brand-specific filters, refactor background styles for hero sections, and
 improve layout responsiveness across various product pages.

---
 .../marketing/open-source-alternative.svelte  | 12 ++-
 src/lib/components/marketing/platforms.svelte |  2 +-
 src/lib/components/product-pages/hero.svelte  | 44 +++++++++-
 .../product-pages/product-cards.svelte        | 14 +++-
 src/lib/layouts/Main.svelte                   |  2 +
 src/routes/+layout.svelte                     | 84 +++++++++++++++++--
 .../products/auth/(components)/Hero.svelte    | 39 ++++++++-
 .../auth/(components)/OpenSource.svelte       | 12 ++-
 .../functions/(components)/Hero.svelte        | 36 +++++++-
 .../functions/(components)/OpenSource.svelte  | 12 ++-
 .../products/sites/(components)/hero.svelte   | 33 +++++++-
 .../sites/offer-300/(components)/hero.svelte  | 33 +++++++-
 .../(components)/hero.svelte                  | 33 +++++++-
 .../storage/(components)/OpenSource.svelte    | 14 +++-
 .../storage/(components)/ProductShot.svelte   |  9 +-
 src/routes/products/storage/+page.svelte      | 39 ++++++++-
 src/scss/6-elements/_badges.scss              | 20 +++--
 src/scss/7-components/_side-nav.scss          | 14 ++++
 18 files changed, 405 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/marketing/open-source-alternative.svelte b/src/lib/components/marketing/open-source-alternative.svelte
index 41f29eee86..84fcea2e4f 100644
--- a/src/lib/components/marketing/open-source-alternative.svelte
+++ b/src/lib/components/marketing/open-source-alternative.svelte
@@ -95,7 +95,11 @@
                 <div
                     class="border-smooth py-10 text-center font-medium last-of-type:border-0 md:border-r md:px-10 md:py-0"
                 >
-                    <img src={item.icon} alt={item.title} class="mx-auto" />
+                    <img
+                        src={item.icon}
+                        alt={item.title}
+                        class="open-source-alternative-icon mx-auto"
+                    />
                     <h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
                     <p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
                 </div>
@@ -103,3 +107,9 @@
         </div>
     </div>
 </div>
+
+<style>
+    :global(body.brand-green .open-source-alternative-icon) {
+        filter: var(--web-color-image-accent-filter);
+    }
+</style>
diff --git a/src/lib/components/marketing/platforms.svelte b/src/lib/components/marketing/platforms.svelte
index 4d573d3082..5ee763a9b5 100644
--- a/src/lib/components/marketing/platforms.svelte
+++ b/src/lib/components/marketing/platforms.svelte
@@ -122,7 +122,7 @@
                                         <img
                                             src={platform.icon}
                                             alt={platform.name}
-                                            class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
+                                            class="no-brand-filter h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
                                         />
 
                                         <div
diff --git a/src/lib/components/product-pages/hero.svelte b/src/lib/components/product-pages/hero.svelte
index 11158b5c91..fb8a1c558d 100644
--- a/src/lib/components/product-pages/hero.svelte
+++ b/src/lib/components/product-pages/hero.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <div
-    class="border-smooth box-content flex items-center border-b bg-[url(/images/bgs/mobile-hero.png)] bg-cover bg-bottom px-5 py-12 md:bg-[url(/images/bgs/hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
+    class="product-page-hero-bg border-smooth box-content flex items-center border-b px-5 py-12 md:pt-32 md:pb-40 lg:px-8 xl:px-16"
 >
     <div class="mx-auto grid max-w-[75rem] items-center gap-16 md:grid-cols-2">
         <div class="space-y-8">
@@ -76,9 +76,47 @@
                 {/if}
             </div>
         </div>
-        <img class={cn({ 'hidden md:block': mobileImage })} src={image.url} alt={image.alt ?? ''} />
+        <img
+            class={cn('no-brand-filter', { 'hidden md:block': mobileImage })}
+            src={image.url}
+            alt={image.alt ?? ''}
+        />
         {#if mobileImage}
-            <img class="block md:hidden" src={mobileImage.url} alt={mobileImage.alt ?? ''} />
+            <img
+                class="no-brand-filter block md:hidden"
+                src={mobileImage.url}
+                alt={mobileImage.alt ?? ''}
+            />
         {/if}
     </div>
 </div>
+
+<style>
+    .product-page-hero-bg {
+        position: relative;
+        isolation: isolate;
+    }
+
+    .product-page-hero-bg::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        pointer-events: none;
+        background-image: url('/images/bgs/mobile-hero.png');
+        background-size: cover;
+        background-position: bottom;
+        background-repeat: no-repeat;
+    }
+
+    @media (min-width: 48rem) {
+        .product-page-hero-bg::before {
+            background-image: url('/images/bgs/hero.png');
+            background-position: center;
+        }
+    }
+
+    :global(body.brand-green .product-page-hero-bg::before) {
+        filter: var(--web-color-image-background-filter);
+    }
+</style>
diff --git a/src/lib/components/product-pages/product-cards.svelte b/src/lib/components/product-pages/product-cards.svelte
index 61095fd6e9..fada6ecf02 100644
--- a/src/lib/components/product-pages/product-cards.svelte
+++ b/src/lib/components/product-pages/product-cards.svelte
@@ -65,7 +65,13 @@
                         class="web-u-padding-inline-8 web-u-padding-block-end-8 flex flex-col gap-2"
                     >
                         <div class="flex items-center gap-2">
-                            <img src={product.icon} alt="auth" width="32" height="32" />
+                            <img
+                                src={product.icon}
+                                alt="auth"
+                                width="32"
+                                height="32"
+                                class="products-explore-card-icon"
+                            />
                             <h4 class="text-main-body text-primary">{product.title}</h4>
                             <span class="web-icon-arrow-right ml-auto" aria-hidden="true"></span>
                         </div>
@@ -78,3 +84,9 @@
         </div>
     </div>
 </section>
+
+<style>
+    :global(body.brand-green .products-brandable .products-explore-card-icon) {
+        filter: var(--web-color-image-accent-filter) !important;
+    }
+</style>
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 266a7235e1..3128d24e19 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -178,6 +178,7 @@
     $: ($isHeaderHidden, updateSideNav());
 
     $: isOfferPage = page.route.id?.includes('/offer-300') ?? false;
+    $: isProductsPage = page.route.id?.startsWith('/products') ?? false;
 
     $: mobileButtonHref = isOfferPage ? 'https://apwr.dev/DCMWDSw' : getAppwriteDashboardUrl();
     $: mobileButtonEvent = isOfferPage
@@ -281,6 +282,7 @@
 
     <main
         class="relative space-y-6"
+        class:products-brandable={isProductsPage}
         class:invisible={$isMobileNavOpen}
         id={omitMainId ? undefined : 'main'}
     >
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f9009a69ee..7313963e88 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -230,7 +230,9 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/'])
+            img[src*='/images/icons/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
+                [src*='/images/frameworks/']
+            ):not([src*='/images/companies/']):not([src*='/images/company/'])
     ),
     :global(
         body.brand-green
@@ -240,7 +242,9 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/'])
+            img[src*='/images/docs/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
+                [src*='/images/frameworks/']
+            ):not([src*='/images/companies/']):not([src*='/images/company/'])
     ),
     :global(
         body.brand-green
@@ -250,33 +254,101 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/products/']:not([src*='/images/logos/'])
+            img[src*='/images/products/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
+    ),
+    :global(
+        body.brand-green img[src*='/images/icons/illustrated/']:not(.no-brand-filter):not(
+                [src*='/images/logos/']
+            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
+                [src*='/images/companies/']
+            ):not([src*='/images/company/'])
+    ),
+    :global(
+        body.brand-green
+            .products-brandable
+            img[src*='/images/icons/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
+                [src*='/images/frameworks/']
+            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+    ),
+    :global(
+        body.brand-green
+            .products-brandable
+            img[src*='/images/docs/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
+                [src*='/images/frameworks/']
+            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+    ),
+    :global(
+        body.brand-green
+            .products-brandable
+            img[src*='/images/products/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ) {
         filter: var(--web-color-image-accent-filter);
     }
 
     :global(body.brand-green .docs-brandable img[src*='/images/background']),
+    :global(body.brand-green .docs-brandable img[src*='/images/bgs/']),
+    :global(
+        body.brand-green
+            img[src*='/images/bgs/']:not(.no-brand-filter):not([src*='/images/logos/']):not(
+                [src*='/images/avatars/']
+            )
+    ),
     :global(
         body.brand-green
             .pricing-brandable
             img[src*='/images/background']:not([src*='/images/logos/'])
     ),
+    :global(
+        body.brand-green
+            .products-brandable
+            img[src*='/images/background']:not([src*='/images/logos/'])
+    ),
+    :global(body.brand-green .products-brandable img[src*='/images/bgs/']),
     :global(body.brand-green .docs-brandable img[src*='/images/docs/tutorials/']),
     :global(body.brand-green .docs-brandable img[src*='/images/docs/quick-starts/']),
+    :global(body.brand-green .docs-brandable img[src*='/images/tutorials/']),
     :global(body.brand-green .docs-brandable [style*='background-image']),
-    :global(body.brand-green .pricing-brandable [style*='background-image']) {
+    :global(body.brand-green .pricing-brandable [style*='background-image']),
+    :global(body.brand-green .products-brandable [style*='background-image']) {
         filter: var(--web-color-image-background-filter);
     }
 
     :global(
         body.brand-green
             .pricing-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/'])
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
+    ),
+    :global(
+        body.brand-green
+            .products-brandable
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ) {
         filter: var(--web-color-image-background-filter);
     }
 
-    :global(body.brand-green .blog-content-images img:not(.no-brand-filter)) {
+    :global(
+        body.brand-green
+            .blog-content-images
+            img:not(.no-brand-filter):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
+                [src*='/images/companies/']
+            ):not([src*='/images/company/'])
+    ) {
         filter: var(--web-color-image-background-filter);
     }
 </style>
diff --git a/src/routes/products/auth/(components)/Hero.svelte b/src/routes/products/auth/(components)/Hero.svelte
index 863dd6dc44..18f18f93fa 100644
--- a/src/routes/products/auth/(components)/Hero.svelte
+++ b/src/routes/products/auth/(components)/Hero.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-    class="border-smooth box-content flex items-center border-b bg-[url(/images/bgs/mobile-auth-hero.png)] bg-cover bg-bottom px-5 pt-20 pb-20 md:bg-[url(/images/bgs/auth-hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
+    class="product-auth-hero-bg border-smooth box-content flex items-center border-b px-5 pt-20 pb-20 md:pt-32 md:pb-40 lg:px-8 xl:px-16"
 >
     <div class="mx-auto grid max-w-[75rem] items-center gap-16 md:grid-cols-2">
         <div class="space-y-4">
@@ -43,14 +43,47 @@
             </div>
         </div>
         <img
-            class="hidden md:block"
+            class="no-brand-filter hidden md:block"
             src={Phone}
             alt="Phone screen alongside of a users table and a code snippet that controls Appwrite's messaging."
         />
         <img
-            class="block md:hidden"
+            class="no-brand-filter block md:hidden"
             src={PhoneMobile}
             alt="Phone screen alongside of a users table and a code snippet that controls Appwrite's messaging."
         />
     </div>
 </div>
+
+<style>
+    .product-auth-hero-bg {
+        position: relative;
+    }
+
+    .product-auth-hero-bg::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: url('/images/bgs/mobile-auth-hero.png');
+        background-size: cover;
+        background-position: bottom;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    @media (min-width: 48rem) {
+        .product-auth-hero-bg::before {
+            background-image: url('/images/bgs/auth-hero.png');
+            background-position: center;
+        }
+    }
+
+    :global(body.brand-green .product-auth-hero-bg::before) {
+        filter: var(--web-color-image-background-filter);
+    }
+
+    .product-auth-hero-bg > * {
+        position: relative;
+        z-index: 1;
+    }
+</style>
diff --git a/src/routes/products/auth/(components)/OpenSource.svelte b/src/routes/products/auth/(components)/OpenSource.svelte
index 0e5b8ba940..479a8ba15e 100644
--- a/src/routes/products/auth/(components)/OpenSource.svelte
+++ b/src/routes/products/auth/(components)/OpenSource.svelte
@@ -74,7 +74,11 @@
         <div class="mx-auto grid place-items-center gap-8 md:grid-cols-3">
             {#each items as item}
                 <div class="max-w-[275px] text-center">
-                    <img src={item.icon} alt={item.title} class="mx-auto" />
+                    <img
+                        src={item.icon}
+                        alt={item.title}
+                        class="open-source-alternative-icon mx-auto"
+                    />
                     <h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
                     <p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
                 </div>
@@ -82,3 +86,9 @@
         </div>
     </div>
 </section>
+
+<style>
+    :global(body.brand-green .products-brandable .open-source-alternative-icon) {
+        filter: var(--web-color-image-accent-filter);
+    }
+</style>
diff --git a/src/routes/products/functions/(components)/Hero.svelte b/src/routes/products/functions/(components)/Hero.svelte
index 8227b8db03..a5d9c4897f 100644
--- a/src/routes/products/functions/(components)/Hero.svelte
+++ b/src/routes/products/functions/(components)/Hero.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-    class="box-content flex items-center bg-[url(/images/bgs/mobile-auth-hero.png)] bg-cover bg-bottom px-5 pt-20 pb-20 md:bg-[url(/images/bgs/auth-hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
+    class="product-functions-hero-bg box-content flex items-center px-5 pt-20 pb-20 md:pt-32 md:pb-40 lg:px-8 xl:px-16"
 >
     <div class="grid items-center gap-16 md:grid-cols-2">
         <div class="space-y-6">
@@ -29,8 +29,42 @@
             </div>
         </div>
         <img
+            class="no-brand-filter"
             src={Phone}
             alt="Phone screen alongside of a users table and a code snippet that controls Appwrite's functions."
         />
     </div>
 </div>
+
+<style>
+    .product-functions-hero-bg {
+        position: relative;
+    }
+
+    .product-functions-hero-bg::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: url('/images/bgs/mobile-auth-hero.png');
+        background-size: cover;
+        background-position: bottom;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    @media (min-width: 48rem) {
+        .product-functions-hero-bg::before {
+            background-image: url('/images/bgs/auth-hero.png');
+            background-position: center;
+        }
+    }
+
+    :global(body.brand-green .product-functions-hero-bg::before) {
+        filter: var(--web-color-image-background-filter);
+    }
+
+    .product-functions-hero-bg > * {
+        position: relative;
+        z-index: 1;
+    }
+</style>
diff --git a/src/routes/products/functions/(components)/OpenSource.svelte b/src/routes/products/functions/(components)/OpenSource.svelte
index e2a0e855d5..e3a833f95b 100644
--- a/src/routes/products/functions/(components)/OpenSource.svelte
+++ b/src/routes/products/functions/(components)/OpenSource.svelte
@@ -75,7 +75,11 @@
         <div class="mx-auto grid place-items-center gap-8 md:grid-cols-3">
             {#each items as item}
                 <div class="max-w-[275px] text-center">
-                    <img src={item.icon} alt={item.title} class="mx-auto" />
+                    <img
+                        src={item.icon}
+                        alt={item.title}
+                        class="open-source-alternative-icon mx-auto"
+                    />
                     <h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
                     <p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
                 </div>
@@ -83,3 +87,9 @@
         </div>
     </div>
 </section>
+
+<style>
+    :global(body.brand-green .products-brandable .open-source-alternative-icon) {
+        filter: var(--web-color-image-accent-filter);
+    }
+</style>
diff --git a/src/routes/products/sites/(components)/hero.svelte b/src/routes/products/sites/(components)/hero.svelte
index 01427d9b6c..a5ae7d6d80 100644
--- a/src/routes/products/sites/(components)/hero.svelte
+++ b/src/routes/products/sites/(components)/hero.svelte
@@ -9,9 +9,7 @@
 
 <div
     class={cn(
-        'relative flex flex-col items-center',
-        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
-        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(248,_99%,_70%,_0.2)_0px,_transparent_40%)]'
+        'sites-hero-gradient relative flex flex-col items-center'
     )}
 >
     <div
@@ -45,7 +43,7 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="col-span-full lg:col-span-7" />
+        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -56,3 +54,30 @@
     </div>
     <Platforms class="mt-auto mb-0 w-full" headline="Host your favorite web frameworks" />
 </div>
+
+<style>
+    .sites-hero-gradient::before,
+    .sites-hero-gradient::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -10;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .sites-hero-gradient::before {
+        left: 0;
+        background: radial-gradient(
+            circle at -15% -10%,
+            rgb(var(--brand-accent-rgb) / 0.2) 0px,
+            transparent 40%
+        );
+    }
+
+    .sites-hero-gradient::after {
+        right: 0;
+        margin-block: auto 0;
+        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+    }
+</style>
diff --git a/src/routes/products/sites/offer-300/(components)/hero.svelte b/src/routes/products/sites/offer-300/(components)/hero.svelte
index 7ec36f368e..ec8d540e7c 100644
--- a/src/routes/products/sites/offer-300/(components)/hero.svelte
+++ b/src/routes/products/sites/offer-300/(components)/hero.svelte
@@ -8,9 +8,7 @@
 
 <div
     class={cn(
-        'relative flex flex-col items-center',
-        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
-        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(248,_99%,_70%,_0.2)_0px,_transparent_40%)]'
+        'sites-hero-gradient relative flex flex-col items-center'
     )}
 >
     <div
@@ -44,7 +42,7 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="col-span-full lg:col-span-7" />
+        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -55,3 +53,30 @@
     </div>
     <Platforms class="mt-auto mb-0 w-full" headline="Host your favorite web frameworks" />
 </div>
+
+<style>
+    .sites-hero-gradient::before,
+    .sites-hero-gradient::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -10;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .sites-hero-gradient::before {
+        left: 0;
+        background: radial-gradient(
+            circle at -15% -10%,
+            rgb(var(--brand-accent-rgb) / 0.2) 0px,
+            transparent 40%
+        );
+    }
+
+    .sites-hero-gradient::after {
+        right: 0;
+        margin-block: auto 0;
+        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+    }
+</style>
diff --git a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
index 318a1ecb67..3e1258932b 100644
--- a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
+++ b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
@@ -8,9 +8,7 @@
 
 <div
     class={cn(
-        'relative flex flex-col items-center',
-        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
-        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(248,_99%,_70%,_0.2)_0px,_transparent_40%)]'
+        'sites-hero-gradient relative flex flex-col items-center'
     )}
 >
     <div
@@ -41,7 +39,7 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="col-span-full lg:col-span-7" />
+        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -52,3 +50,30 @@
     </div>
     <Platforms class="mt-auto mb-0 w-full" headline="Host your favorite web frameworks" />
 </div>
+
+<style>
+    .sites-hero-gradient::before,
+    .sites-hero-gradient::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -10;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .sites-hero-gradient::before {
+        left: 0;
+        background: radial-gradient(
+            circle at -15% -10%,
+            rgb(var(--brand-accent-rgb) / 0.2) 0px,
+            transparent 40%
+        );
+    }
+
+    .sites-hero-gradient::after {
+        right: 0;
+        margin-block: auto 0;
+        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+    }
+</style>
diff --git a/src/routes/products/storage/(components)/OpenSource.svelte b/src/routes/products/storage/(components)/OpenSource.svelte
index cc2225abb9..5d4f17f892 100644
--- a/src/routes/products/storage/(components)/OpenSource.svelte
+++ b/src/routes/products/storage/(components)/OpenSource.svelte
@@ -53,7 +53,13 @@
                             'relative flex flex-col items-center justify-center px-11 text-center md:-mr-8 md:max-w-[290px] md:px-0 md:pr-8'
                         )}
                     >
-                        <img src={icon} width="40" height="40" alt="" />
+                        <img
+                            src={icon}
+                            width="40"
+                            height="40"
+                            alt=""
+                            class="open-source-alternative-icon"
+                        />
                         <h3 class="text-sub-body text-primary mt-4 mb-1 font-medium">
                             {title}
                         </h3>
@@ -64,3 +70,9 @@
         </div>
     </div>
 </div>
+
+<style>
+    :global(body.brand-green .open-source-alternative-icon) {
+        filter: var(--web-color-image-accent-filter);
+    }
+</style>
diff --git a/src/routes/products/storage/(components)/ProductShot.svelte b/src/routes/products/storage/(components)/ProductShot.svelte
index 5fad76797b..e7dab83c62 100644
--- a/src/routes/products/storage/(components)/ProductShot.svelte
+++ b/src/routes/products/storage/(components)/ProductShot.svelte
@@ -136,10 +136,7 @@
                                     type="checkbox"
                                     aria-label={`role ${label} ${headings[i].toLowerCase()}`}
                                     checked={option}
-                                    class={cn(
-                                        'checkbox peer size-4 cursor-pointer appearance-none rounded-sm border-0 bg-white/12 backdrop-blur-lg transition-all duration-100 md:size-5 md:rounded',
-                                        'checked:bg-pink-500'
-                                    )}
+                                    class="checkbox peer size-4 cursor-pointer appearance-none rounded-sm border-0 bg-white/12 backdrop-blur-lg transition-all duration-100 md:size-5 md:rounded"
                                     on:change={() => {
                                         permissions.update((permissions) => {
                                             permissions[index].options[i] =
@@ -180,5 +177,9 @@
             hsl(0, 0%, 100%, 0.16),
             hsl(0, 0%, 100%, 0)
         );
+
+        &:checked {
+            background-color: hsl(var(--web-color-pink-500));
+        }
     }
 </style>
diff --git a/src/routes/products/storage/+page.svelte b/src/routes/products/storage/+page.svelte
index a607e8d0b8..c76866779a 100644
--- a/src/routes/products/storage/+page.svelte
+++ b/src/routes/products/storage/+page.svelte
@@ -62,7 +62,7 @@
             }}
         />
 
-        <div class="!mb-0 bg-right-top bg-no-repeat md:bg-[url(/images/bgs/mint-gradient.png)]">
+        <div class="storage-mint-bg !mb-0 bg-right-top bg-no-repeat">
             <PreviewFiles />
             <div
                 class="relative bg-[url('/images/pages/storage/pattern-1.png')] [background-size:1200px] [background-position:center_bottom_-50%] bg-no-repeat md:[background-size:1350px] md:[background-position:center_bottom]"
@@ -160,9 +160,7 @@
                 </div>
             </div>
         </div>
-        <div
-            class="web-big-padding-section-level-1 web-white-section light bg-[url(/images/bgs/purple-gradient.png)] bg-left bg-no-repeat pb-20"
-        >
+        <div class="storage-purple-bg web-big-padding-section-level-1 web-white-section light pb-20">
             <div class="!my-0 py-24 md:py-20">
                 <div class="container">
                     <div class="grid grid-cols-1 gap-16 lg:grid-cols-2">
@@ -208,4 +206,37 @@
     .l-drop-shadow {
         filter: drop-shadow(0 16px 32px rgb(55 59 77 / 0.04));
     }
+
+    .storage-mint-bg,
+    .storage-purple-bg {
+        position: relative;
+        isolation: isolate;
+    }
+
+    .storage-mint-bg::before,
+    .storage-purple-bg::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        pointer-events: none;
+        background-repeat: no-repeat;
+    }
+
+    @media (min-width: 48rem) {
+        .storage-mint-bg::before {
+            background-image: url('/images/bgs/mint-gradient.png');
+            background-position: right top;
+        }
+    }
+
+    .storage-purple-bg::before {
+        background-image: url('/images/bgs/purple-gradient.png');
+        background-position: left;
+    }
+
+    :global(body.brand-green .storage-mint-bg::before),
+    :global(body.brand-green .storage-purple-bg::before) {
+        filter: var(--web-color-image-background-filter);
+    }
 </style>
diff --git a/src/scss/6-elements/_badges.scss b/src/scss/6-elements/_badges.scss
index b1180d7b7e..04395f0252 100644
--- a/src/scss/6-elements/_badges.scss
+++ b/src/scss/6-elements/_badges.scss
@@ -1,14 +1,18 @@
 @use '../abstract' as *;
 
 .#{$p}-badges {
-  --p-badges-shadow-bg-color: #f2c8d6;
-  --p-badges-shadow-border-color: #f69db7;
+  --p-badges-shadow-bg-color: hsl(var(--web-color-pink-500) / 0.22);
+  --p-badges-shadow-border-color: hsl(var(--web-color-pink-500) / 0.38);
   --p-badges-shadowopacity: 0.4;
 
   align-self:center; color:hsl(var(--color-neutral-0));
   padding-block:pxToRem(6); padding-inline:pxToRem(12); border-radius:pxToRem(6);
-  // background: linear-gradient(175deg, hsl(var(--web-color-pink-500)) 25.03%, hsl(var(--web-color-secondary-100)) 100%);
-  background: radial-gradient(98.13% 199.7% at 98.13% 100%, #FE6947 0%, #FD366E 41.6%, #FD366E 100%);
+  background: radial-gradient(
+    98.13% 199.7% at 98.13% 100%,
+    hsl(var(--web-color-pink-600)) 0%,
+    hsl(var(--web-color-pink-500)) 41.6%,
+    hsl(var(--web-color-pink-500)) 100%
+  );
 
   -webkit-backdrop-filter:blur(pxToRem(40));
   backdrop-filter:blur(pxToRem(40));
@@ -22,14 +26,14 @@
 
 
   #{$theme-dark} & {
-    --p-badges-shadow-bg-color: #2c2c2f;
-    --p-badges-shadow-border-color: #39393c;
+    --p-badges-shadow-bg-color: hsl(var(--web-color-pink-500) / 0.16);
+    --p-badges-shadow-border-color: hsl(var(--web-color-pink-500) / 0.28);
     --p-badges-shadowopacity: 0.13;
   }
 
   #{$theme-light} &{
-    --p-badges-shadow-bg-color: #f2c8d6;
-    --p-badges-shadow-border-color: #f69db7;
+    --p-badges-shadow-bg-color: hsl(var(--web-color-pink-500) / 0.22);
+    --p-badges-shadow-border-color: hsl(var(--web-color-pink-500) / 0.38);
     --p-badges-shadowopacity: 0.4;
   }
 
diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
index 4c31a352ef..c23f0eaf2f 100644
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -102,4 +102,18 @@
   #{$theme-dark} & {
     --p-side-nav-item-bg-color-hover: var(--web-color-white) / 0.08;
   }
+}
+
+body.brand-green {
+  .#{$p}-side-nav {
+    --p-side-nav-item-text-color-selected: var(--web-color-pink-500);
+    --p-side-nav-item-icon-color-selected: linear-gradient(
+      hsl(var(--web-color-pink-500)),
+      hsl(var(--web-color-pink-600))
+    );
+  }
+
+  .#{$p}-side-nav-button.is-selected {
+    background-color: hsl(var(--web-color-pink-500) / 0.12);
+  }
 }
\ No newline at end of file

From 43e118d8317c4fe46e9aba516cc2a2ba8b0bf369 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Tue, 31 Mar 2026 22:01:59 +0200
Subject: [PATCH 6/8] format

---
 src/lib/components/fancy/gradient-text.svelte |   5 +-
 src/lib/components/layout/site-footer.svelte  |   8 +-
 src/markdoc/layouts/Post.svelte               |   4 +-
 .../(marketing)/(components)/pricing.svelte   |   4 +-
 src/routes/(marketing)/+page.svelte           |   4 +-
 src/routes/+layout.svelte                     |  64 +-
 src/routes/pricing/+page.svelte               | 640 +++++++++---------
 .../products/sites/(components)/hero.svelte   |  18 +-
 .../sites/offer-300/(components)/hero.svelte  |  18 +-
 .../(components)/hero.svelte                  |  18 +-
 src/routes/products/storage/+page.svelte      |   4 +-
 11 files changed, 410 insertions(+), 377 deletions(-)

diff --git a/src/lib/components/fancy/gradient-text.svelte b/src/lib/components/fancy/gradient-text.svelte
index 3b856c1aa7..f93ed76125 100644
--- a/src/lib/components/fancy/gradient-text.svelte
+++ b/src/lib/components/fancy/gradient-text.svelte
@@ -12,10 +12,7 @@
 </script>
 
 <span
-    class={cn(
-        '-mb-1 block bg-clip-text pb-1 text-transparent',
-        className
-    )}
+    class={cn('-mb-1 block bg-clip-text pb-1 text-transparent', className)}
     style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 62%, transparent) 0%, #fff 50%);"
     {...rest}
 >
diff --git a/src/lib/components/layout/site-footer.svelte b/src/lib/components/layout/site-footer.svelte
index 80e522b9f8..9c58f8738a 100644
--- a/src/lib/components/layout/site-footer.svelte
+++ b/src/lib/components/layout/site-footer.svelte
@@ -118,13 +118,7 @@
     class:web-u-sep-block-start={!noBorder}
 >
     <div class="web-footer-nav container">
-        <img
-            class="web-logo"
-            src={logoSrc}
-            alt="appwrite"
-            height="24"
-            width="130"
-        />
+        <img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
         <ul class="web-footer-nav-main-list" use:melt={$root}>
             {#each Object.entries(links) as [title, items], i (i)}
                 <li class="web-footer-nav-main-item web-is-not-mobile">
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index cc6b8013b0..c948bfa5fa 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -161,7 +161,9 @@
                         </div>
                     {/if}
 
-                    <div class="web-article-content prose prose-large blog-content-images mt-8 flex flex-col gap-8">
+                    <div
+                        class="web-article-content prose prose-large blog-content-images mt-8 flex flex-col gap-8"
+                    >
                         {#if lastUpdated}
                             <span class="text-main-body last-updated-text font-medium">
                                 Updated:
diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
index ed0caa5ef1..f77b2253f9 100644
--- a/src/routes/(marketing)/(components)/pricing.svelte
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -105,7 +105,9 @@
                     <div class="flex items-center gap-2.5">
                         <span class="text-description text-secondary font-medium">{name}</span>
                         {#if label}
-                            <div class="web-inline-tag is-pink text-caption font-medium">{label}</div>
+                            <div class="web-inline-tag is-pink text-caption font-medium">
+                                {label}
+                            </div>
                         {/if}
                     </div>
                     <div class="flex flex-1 flex-col">
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index c6cbc26f22..cfdb3138c3 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -34,8 +34,8 @@
             title="App Manager, Majik Kids"
             avatar="/images/testimonials/phil.jpg"
         >
-            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
-            that you need with Appwrite.</Pullquote
+            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the
+            tools that you need with Appwrite.</Pullquote
         >
         <Ai />
         <CaseStudies />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7313963e88..0ada0dc952 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -102,7 +102,8 @@
 
         const favicon = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
         if (favicon) {
-            favicon.href = theme === 'green' ? '/images/logos/logo-green.svg' : '/images/logos/logo.svg';
+            favicon.href =
+                theme === 'green' ? '/images/logos/logo-green.svg' : '/images/logos/logo.svg';
         }
     }
 
@@ -230,9 +231,11 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/icons/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
@@ -242,9 +245,11 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/docs/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
@@ -261,7 +266,8 @@
             )
     ),
     :global(
-        body.brand-green img[src*='/images/icons/illustrated/']:not(.no-brand-filter):not(
+        body.brand-green
+            img[src*='/images/icons/illustrated/']:not(.no-brand-filter):not(
                 [src*='/images/logos/']
             ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
                 [src*='/images/companies/']
@@ -270,16 +276,20 @@
     :global(
         body.brand-green
             .products-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/icons/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
             .products-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/docs/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
@@ -324,20 +334,20 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not(
+                [src*='/images/avatars/']
+            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
+                [src*='/images/companies/']
+            ):not([src*='/images/company/'])
     ),
     :global(
         body.brand-green
             .products-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not(
+                [src*='/images/avatars/']
+            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
+                [src*='/images/companies/']
+            ):not([src*='/images/company/'])
     ) {
         filter: var(--web-color-image-background-filter);
     }
@@ -345,9 +355,9 @@
     :global(
         body.brand-green
             .blog-content-images
-            img:not(.no-brand-filter):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
-                [src*='/images/companies/']
-            ):not([src*='/images/company/'])
+            img:not(.no-brand-filter):not([src*='/images/platforms/']):not(
+                [src*='/images/frameworks/']
+            ):not([src*='/images/companies/']):not([src*='/images/company/'])
     ) {
         filter: var(--web-color-image-background-filter);
     }
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 6b350c739d..523156107b 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -48,207 +48,138 @@
     </div>
 
     <Main>
-    <div class="web-big-padding-section mt-2">
-        <div class="dark pt-8">
-            <div class="web-big-padding-section-level-2">
-                <section class="container">
-                    <div class="web-hero">
-                        <h1
-                            class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
-                            style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+        <div class="web-big-padding-section mt-2">
+            <div class="dark pt-8">
+                <div class="web-big-padding-section-level-2">
+                    <section class="container">
+                        <div class="web-hero">
+                            <h1
+                                class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
+                                style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
-                        >
-                            Everything your app needs,<br />one subscription
-                        </h1>
-                        <p
-                            class="text-description max-w-xl self-center text-center opacity-90"
-                            style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+                            >
+                                Everything your app needs,<br />one subscription
+                            </h1>
+                            <p
+                                class="text-description max-w-xl self-center text-center opacity-90"
+                                style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
+                            >
+                                Build, deploy, and observe your app from one platform, all under one
+                                subscription.
+                            </p>
+                        </div>
+                    </section>
+                </div>
+                <div class="web-big-padding-section-level-2">
+                    <section class="container">
+                        <div
+                            class="web-pricing-cards"
+                            style:--columns-template={SHOW_SCALE_PLAN
+                                ? 'repeat(4, 1fr)'
+                                : 'repeat(3, 1fr)'}
                         >
-                            Build, deploy, and observe your app from one platform, all under one
-                            subscription.
-                        </p>
-                    </div>
-                </section>
-            </div>
-            <div class="web-big-padding-section-level-2">
-                <section class="container">
-                    <div
-                        class="web-pricing-cards"
-                        style:--columns-template={SHOW_SCALE_PLAN
-                            ? 'repeat(4, 1fr)'
-                            : 'repeat(3, 1fr)'}
-                    >
-                        <ul class="web-pricing-cards-list">
-                            <li>
-                                <article
-                                    class="web-card is-transparent has-border-gradient h-full"
-                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
-                                >
-                                    <div class="web-pricing-cards-item">
-                                        <header class="web-pricing-cards-header">
-                                            <h2
-                                                id="starter"
-                                                class="text-label text-primary font-aeonik-pro"
-                                            >
-                                                Free
-                                            </h2>
-                                            <div
-                                                class="text-title font-aeonik-pro text-primary mt-12 -mb-6"
-                                            >
-                                                $0
-                                            </div>
-                                            <div class="mt-1">&nbsp;</div>
-                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                A great fit for passion projects and small
-                                                applications.
-                                            </p>
-                                            <Button
-                                                variant="secondary"
-                                                class="is-full-width mt-8"
-                                                href={getAppwriteDashboardUrl('/register')}
-                                                event="pricing-cards-free-click"
-                                            >
-                                                <span class="text-sub-body font-medium"
-                                                    >Start building</span
-                                                >
-                                            </Button>
-                                        </header>
-                                        <div class="web-pricing-cards-content">
-                                            <ul class="web-checked-list-circle">
-                                                <li><span>5GB bandwidth</span></li>
-                                                <li><span>2GB storage</span></li>
-                                                <li><span>750K executions</span></li>
-                                                <li><span>75K monthly active users</span></li>
-                                                <li><span>Community support</span></li>
-                                                <li>
-                                                    <span
-                                                        >1 Database, 1 Bucket, 2 Functions per
-                                                        project</span
-                                                    >
-                                                </li>
-                                            </ul>
-                                            <p class="text-caption text-secondary mt-4">
-                                                Free projects are paused after 1 week of inactivity.
-                                                Limit of 2 projects.
-                                            </p>
-                                        </div>
-                                    </div>
-                                </article>
-                            </li>
-                            <li>
-                                <div
-                                    class="web-card is-transparent has-border-gradient is-transparent-pink -m-1 h-full p-1! backdrop-blur-none!"
-                                    style:--m-border-radius="1.25rem"
-                                >
+                            <ul class="web-pricing-cards-list">
+                                <li>
                                     <article
-                                        class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
-                                        style="background: linear-gradient(180deg, hsl(var(--web-color-pink-500) / 0.12) 38.59%, hsl(var(--web-color-pink-500) / 0) 99.04%);"
+                                        class="web-card is-transparent has-border-gradient h-full"
+                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
                                     >
-                                        <header class="web-pricing-cards-header">
-                                            <header class="flex gap-3">
+                                        <div class="web-pricing-cards-item">
+                                            <header class="web-pricing-cards-header">
                                                 <h2
-                                                    id="pro"
+                                                    id="starter"
                                                     class="text-label text-primary font-aeonik-pro"
                                                 >
-                                                    Pro
+                                                    Free
                                                 </h2>
-                                                <div class="web-inline-tag is-pink">
-                                                    Most popular
-                                                </div>
-                                            </header>
-                                            <div class="mt-4 flex flex-col gap-2">
-                                                <span class="-mb-4">From</span>
-                                                <div class="flex items-end gap-2">
-                                                    <div
-                                                        class="text-title font-aeonik-pro text-primary mt-3"
-                                                    >
-                                                        $25
-                                                    </div>
-                                                    <div class="mt-1">/month</div>
+                                                <div
+                                                    class="text-title font-aeonik-pro text-primary mt-12 -mb-6"
+                                                >
+                                                    $0
                                                 </div>
-                                            </div>
-                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                For production applications that need powerful
-                                                functionality and resources to scale.
-                                            </p>
-                                            <Button
-                                                href={getAppwriteDashboardUrl(
-                                                    '/console?type=create&plan=tier-1'
-                                                )}
-                                                class="is-full-width mt-11"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                event="pricing-cards-pro-click"
-                                            >
-                                                <span class="text-sub-body font-medium"
-                                                    >Start building</span
+                                                <div class="mt-1">&nbsp;</div>
+                                                <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                    A great fit for passion projects and small
+                                                    applications.
+                                                </p>
+                                                <Button
+                                                    variant="secondary"
+                                                    class="is-full-width mt-8"
+                                                    href={getAppwriteDashboardUrl('/register')}
+                                                    event="pricing-cards-free-click"
                                                 >
-                                            </Button>
-                                        </header>
-                                        <div class="web-pricing-cards-content">
-                                            <p>Dedicated resources per project:</p>
-                                            <ul class="web-checked-list-circle">
-                                                <li><span>2TB bandwidth</span></li>
-                                                <li><span>150GB storage</span></li>
-                                                <li><span>3.5M executions</span></li>
-                                                <li><span>200K monthly active users</span></li>
-                                                <li><span>Organization roles</span></li>
-                                                <li><span>Email support</span></li>
-                                                <li>
-                                                    <span>Daily backups stored for 7 days</span>
-                                                </li>
-                                                <li><span>Add-ons</span></li>
-                                                <li>
-                                                    <span
-                                                        >Unlimited Databases, Buckets, and Functions</span
+                                                    <span class="text-sub-body font-medium"
+                                                        >Start building</span
                                                     >
-                                                </li>
-                                            </ul>
+                                                </Button>
+                                            </header>
+                                            <div class="web-pricing-cards-content">
+                                                <ul class="web-checked-list-circle">
+                                                    <li><span>5GB bandwidth</span></li>
+                                                    <li><span>2GB storage</span></li>
+                                                    <li><span>750K executions</span></li>
+                                                    <li><span>75K monthly active users</span></li>
+                                                    <li><span>Community support</span></li>
+                                                    <li>
+                                                        <span
+                                                            >1 Database, 1 Bucket, 2 Functions per
+                                                            project</span
+                                                        >
+                                                    </li>
+                                                </ul>
+                                                <p class="text-caption text-secondary mt-4">
+                                                    Free projects are paused after 1 week of
+                                                    inactivity. Limit of 2 projects.
+                                                </p>
+                                            </div>
                                         </div>
                                     </article>
-                                </div>
-                            </li>
-                            {#if SHOW_SCALE_PLAN}
+                                </li>
                                 <li>
-                                    <article
-                                        class="web-card is-transparent has-border-gradient h-full"
-                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                    <div
+                                        class="web-card is-transparent has-border-gradient is-transparent-pink -m-1 h-full p-1! backdrop-blur-none!"
+                                        style:--m-border-radius="1.25rem"
                                     >
-                                        <div class="web-pricing-cards-item">
+                                        <article
+                                            class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
+                                            style="background: linear-gradient(180deg, hsl(var(--web-color-pink-500) / 0.12) 38.59%, hsl(var(--web-color-pink-500) / 0) 99.04%);"
+                                        >
                                             <header class="web-pricing-cards-header">
-                                                <h2
-                                                    id="scale"
-                                                    class="text-label text-primary font-aeonik-pro"
-                                                >
-                                                    Scale
-                                                </h2>
-
+                                                <header class="flex gap-3">
+                                                    <h2
+                                                        id="pro"
+                                                        class="text-label text-primary font-aeonik-pro"
+                                                    >
+                                                        Pro
+                                                    </h2>
+                                                    <div class="web-inline-tag is-pink">
+                                                        Most popular
+                                                    </div>
+                                                </header>
                                                 <div class="mt-4 flex flex-col gap-2">
                                                     <span class="-mb-4">From</span>
                                                     <div class="flex items-end gap-2">
                                                         <div
                                                             class="text-title font-aeonik-pro text-primary mt-3"
                                                         >
-                                                            $599
+                                                            $25
                                                         </div>
                                                         <div class="mt-1">/month</div>
                                                     </div>
                                                 </div>
-
                                                 <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                    For teams that handle more complex and large
-                                                    projects and need more control and support.
+                                                    For production applications that need powerful
+                                                    functionality and resources to scale.
                                                 </p>
                                                 <Button
-                                                    variant="secondary"
                                                     href={getAppwriteDashboardUrl(
-                                                        '/console?type=create&plan=tier-2'
+                                                        '/console?type=create&plan=tier-1'
                                                     )}
-                                                    event="pricing-cards-scale-click"
-                                                    class="is-full-width mt-10"
+                                                    class="is-full-width mt-11"
                                                     target="_blank"
                                                     rel="noopener noreferrer"
+                                                    event="pricing-cards-pro-click"
                                                 >
                                                     <span class="text-sub-body font-medium"
                                                         >Start building</span
@@ -256,15 +187,155 @@
                                                 </Button>
                                             </header>
                                             <div class="web-pricing-cards-content">
-                                                <p>Everything in Pro, plus:</p>
+                                                <p>Dedicated resources per project:</p>
                                                 <ul class="web-checked-list-circle">
-                                                    <li><span>Unlimited seats</span></li>
-                                                    <li><span>SOC-2</span></li>
-                                                    <li><span>BAA</span></li>
-                                                    <li><span>Network logs</span></li>
-                                                    <li><span>28-day log retention</span></li>
+                                                    <li><span>2TB bandwidth</span></li>
+                                                    <li><span>150GB storage</span></li>
+                                                    <li><span>3.5M executions</span></li>
+                                                    <li><span>200K monthly active users</span></li>
+                                                    <li><span>Organization roles</span></li>
+                                                    <li><span>Email support</span></li>
+                                                    <li>
+                                                        <span>Daily backups stored for 7 days</span>
+                                                    </li>
+                                                    <li><span>Add-ons</span></li>
+                                                    <li>
+                                                        <span
+                                                            >Unlimited Databases, Buckets, and
+                                                            Functions</span
+                                                        >
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </article>
+                                    </div>
+                                </li>
+                                {#if SHOW_SCALE_PLAN}
+                                    <li>
+                                        <article
+                                            class="web-card is-transparent has-border-gradient h-full"
+                                            style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                        >
+                                            <div class="web-pricing-cards-item">
+                                                <header class="web-pricing-cards-header">
+                                                    <h2
+                                                        id="scale"
+                                                        class="text-label text-primary font-aeonik-pro"
+                                                    >
+                                                        Scale
+                                                    </h2>
+
+                                                    <div class="mt-4 flex flex-col gap-2">
+                                                        <span class="-mb-4">From</span>
+                                                        <div class="flex items-end gap-2">
+                                                            <div
+                                                                class="text-title font-aeonik-pro text-primary mt-3"
+                                                            >
+                                                                $599
+                                                            </div>
+                                                            <div class="mt-1">/month</div>
+                                                        </div>
+                                                    </div>
+
+                                                    <p
+                                                        class="text-main-body mt-4 h-[5rem] font-medium"
+                                                    >
+                                                        For teams that handle more complex and large
+                                                        projects and need more control and support.
+                                                    </p>
+                                                    <Button
+                                                        variant="secondary"
+                                                        href={getAppwriteDashboardUrl(
+                                                            '/console?type=create&plan=tier-2'
+                                                        )}
+                                                        event="pricing-cards-scale-click"
+                                                        class="is-full-width mt-10"
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                    >
+                                                        <span class="text-sub-body font-medium"
+                                                            >Start building</span
+                                                        >
+                                                    </Button>
+                                                </header>
+                                                <div class="web-pricing-cards-content">
+                                                    <p>Everything in Pro, plus:</p>
+                                                    <ul class="web-checked-list-circle">
+                                                        <li><span>Unlimited seats</span></li>
+                                                        <li><span>SOC-2</span></li>
+                                                        <li><span>BAA</span></li>
+                                                        <li><span>Network logs</span></li>
+                                                        <li><span>28-day log retention</span></li>
+                                                        <li>
+                                                            <span>Custom organization roles</span>
+                                                        </li>
+                                                        <li><span>SSO</span></li>
+                                                        <li><span>Activity logs</span></li>
+                                                        <li><span>Custom backup policies</span></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </article>
+                                    </li>
+                                {/if}
+                                <li>
+                                    <article
+                                        class="web-card is-transparent has-border-gradient u-height-100-percent"
+                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                    >
+                                        <div class="web-pricing-cards-item">
+                                            <header class="web-pricing-cards-header">
+                                                <h2
+                                                    id="enterprise"
+                                                    class="text-label text-primary font-aeonik-pro"
+                                                >
+                                                    Enterprise
+                                                </h2>
+                                                <div
+                                                    class="text-title font-aeonik-pro text-primary mt-10 -mb-6"
+                                                >
+                                                    Custom
+                                                </div>
+                                                <div class="mt-1">&nbsp;</div>
+                                                <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                    For enterprises that need more power, premium
+                                                    support, and advanced security features.
+                                                </p>
+                                                <Button
+                                                    variant="secondary"
+                                                    href="/contact-us/enterprise"
+                                                    class="is-full-width mt-10"
+                                                    rel="noopener noreferrer"
+                                                    event="pricing-cards-enterprise-click"
+                                                >
+                                                    <!-- <span class="web-sub-body-500">Start trial</span> -->
+                                                    <span class="web-sub-body-500">Contact us</span>
+                                                </Button>
+                                            </header>
+                                            <div class="web-pricing-cards-content">
+                                                <p>
+                                                    Everything in {SHOW_SCALE_PLAN
+                                                        ? 'Scale'
+                                                        : 'Pro'}, plus:
+                                                </p>
+                                                <ul class="web-checked-list-circle">
+                                                    <li><span>Uptime SLAs</span></li>
+                                                    <li><span>Designated Success Manager</span></li>
+                                                    <li><span>Up to 24/7 support</span></li>
+                                                    <li>
+                                                        <span>Option for private Slack channel</span
+                                                        >
+                                                    </li>
+                                                    <li><span>Volume discounts</span></li>
+                                                    <li><span>Log drains</span></li>
+                                                    <li><span>90-day log retention</span></li>
+                                                    <li><span>Advanced observability</span></li>
+                                                    <li><span>Bring your own Cloud</span></li>
+                                                    <li>
+                                                        <span>SOC-2, HIPAA, and BAA</span>
+                                                    </li>
                                                     <li><span>Custom organization roles</span></li>
-                                                    <li><span>SSO</span></li>
+                                                    <li><span>Single Sign-On (SSO)</span></li>
                                                     <li><span>Activity logs</span></li>
                                                     <li><span>Custom backup policies</span></li>
                                                 </ul>
@@ -272,157 +343,100 @@
                                         </div>
                                     </article>
                                 </li>
-                            {/if}
-                            <li>
-                                <article
-                                    class="web-card is-transparent has-border-gradient u-height-100-percent"
-                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
-                                >
-                                    <div class="web-pricing-cards-item">
-                                        <header class="web-pricing-cards-header">
-                                            <h2
-                                                id="enterprise"
-                                                class="text-label text-primary font-aeonik-pro"
-                                            >
-                                                Enterprise
-                                            </h2>
-                                            <div
-                                                class="text-title font-aeonik-pro text-primary mt-10 -mb-6"
-                                            >
-                                                Custom
-                                            </div>
-                                            <div class="mt-1">&nbsp;</div>
-                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                For enterprises that need more power, premium
-                                                support, and advanced security features.
-                                            </p>
-                                            <Button
-                                                variant="secondary"
-                                                href="/contact-us/enterprise"
-                                                class="is-full-width mt-10"
-                                                rel="noopener noreferrer"
-                                                event="pricing-cards-enterprise-click"
-                                            >
-                                                <!-- <span class="web-sub-body-500">Start trial</span> -->
-                                                <span class="web-sub-body-500">Contact us</span>
-                                            </Button>
-                                        </header>
-                                        <div class="web-pricing-cards-content">
-                                            <p>
-                                                Everything in {SHOW_SCALE_PLAN ? 'Scale' : 'Pro'},
-                                                plus:
-                                            </p>
-                                            <ul class="web-checked-list-circle">
-                                                <li><span>Uptime SLAs</span></li>
-                                                <li><span>Designated Success Manager</span></li>
-                                                <li><span>Up to 24/7 support</span></li>
-                                                <li>
-                                                    <span>Option for private Slack channel</span>
-                                                </li>
-                                                <li><span>Volume discounts</span></li>
-                                                <li><span>Log drains</span></li>
-                                                <li><span>90-day log retention</span></li>
-                                                <li><span>Advanced observability</span></li>
-                                                <li><span>Bring your own Cloud</span></li>
-                                                <li>
-                                                    <span>SOC-2, HIPAA, and BAA</span>
-                                                </li>
-                                                <li><span>Custom organization roles</span></li>
-                                                <li><span>Single Sign-On (SSO)</span></li>
-                                                <li><span>Activity logs</span></li>
-                                                <li><span>Custom backup policies</span></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </article>
-                            </li>
-                        </ul>
-                    </div>
+                            </ul>
+                        </div>
 
-                    <section class="mt-20">
-                        <article class="cta-card stack-card p-6 md:p-8">
-                            <div class="stack-card__header">
-                                <h3
-                                    class="text-display text-primary font-aeonik-pro stack-card__title"
-                                >
-                                    One platform. One subscription.
-                                </h3>
-                                <div class="stack-card__badge">
-                                    1 vendor • 1 subscription • 1 bill
+                        <section class="mt-20">
+                            <article class="cta-card stack-card p-6 md:p-8">
+                                <div class="stack-card__header">
+                                    <h3
+                                        class="text-display text-primary font-aeonik-pro stack-card__title"
+                                    >
+                                        One platform. One subscription.
+                                    </h3>
+                                    <div class="stack-card__badge">
+                                        1 vendor • 1 subscription • 1 bill
+                                    </div>
                                 </div>
-                            </div>
-                            <p class="text-main-body text-secondary/90 mt-4 max-w-3xl">
-                                Replace fragmented backend, hosting, storage, and delivery tooling
-                                with a single platform built for the full application lifecycle.
-                                Reduce integration surface area, simplify procurement, and give your
-                                team one system to operate and scale.
-                            </p>
-                            <div class="stack-card__compare mt-6">
-                                <div class="stack-state-card">
-                                    <p class="stack-state-card__label">Before</p>
-                                    <ul class="stack-state-card__list">
-                                        <li>Multiple tools with overlapping responsibilities</li>
-                                        <li>
-                                            Separate subscriptions, invoices, and renewal cycles
-                                        </li>
-                                        <li>
-                                            More integration, maintenance, and ownership overhead
-                                        </li>
-                                    </ul>
+                                <p class="text-main-body text-secondary/90 mt-4 max-w-3xl">
+                                    Replace fragmented backend, hosting, storage, and delivery
+                                    tooling with a single platform built for the full application
+                                    lifecycle. Reduce integration surface area, simplify
+                                    procurement, and give your team one system to operate and scale.
+                                </p>
+                                <div class="stack-card__compare mt-6">
+                                    <div class="stack-state-card">
+                                        <p class="stack-state-card__label">Before</p>
+                                        <ul class="stack-state-card__list">
+                                            <li>
+                                                Multiple tools with overlapping responsibilities
+                                            </li>
+                                            <li>
+                                                Separate subscriptions, invoices, and renewal cycles
+                                            </li>
+                                            <li>
+                                                More integration, maintenance, and ownership
+                                                overhead
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="stack-state-card stack-state-card--after">
+                                        <p class="stack-state-card__label">After</p>
+                                        <ul class="stack-state-card__list">
+                                            <li>One platform across the app lifecycle</li>
+                                            <li>
+                                                One subscription with simpler billing and
+                                                procurement
+                                            </li>
+                                            <li>
+                                                Fewer systems to integrate, secure, and maintain
+                                            </li>
+                                        </ul>
+                                    </div>
                                 </div>
-                                <div class="stack-state-card stack-state-card--after">
-                                    <p class="stack-state-card__label">After</p>
-                                    <ul class="stack-state-card__list">
-                                        <li>One platform across the app lifecycle</li>
-                                        <li>
-                                            One subscription with simpler billing and procurement
-                                        </li>
-                                        <li>Fewer systems to integrate, secure, and maintain</li>
-                                    </ul>
+                                <div class="mt-6 flex flex-wrap items-center gap-4">
+                                    <Button
+                                        href="#compare-plans"
+                                        variant="secondary"
+                                        event="pricing-cards-stack_consolidation-see_included-click"
+                                    >
+                                        See what's included
+                                    </Button>
+                                    <span class="stack-card__helper text-caption text-secondary">
+                                        Compare plan limits, included capabilities, and scaling
+                                        options.
+                                    </span>
                                 </div>
-                            </div>
-                            <div class="mt-6 flex flex-wrap items-center gap-4">
-                                <Button
-                                    href="#compare-plans"
-                                    variant="secondary"
-                                    event="pricing-cards-stack_consolidation-see_included-click"
-                                >
-                                    See what's included
-                                </Button>
-                                <span class="stack-card__helper text-caption text-secondary">
-                                    Compare plan limits, included capabilities, and scaling options.
-                                </span>
-                            </div>
-                        </article>
+                            </article>
+                        </section>
                     </section>
-                </section>
+                </div>
             </div>
-        </div>
 
-        <div id="compare-plans">
-            <ComparePlans />
-        </div>
+            <div id="compare-plans">
+                <ComparePlans />
+            </div>
 
-        <div class="dark relative overflow-hidden pt-10">
-            <div class="web-big-padding-section-level-2 relative">
-                <div class="relative container" style:z-index="10">
-                    <section class="web-grid-4-6">
-                        <header>
-                            <div class="text-display font-aeonik-pro text-primary">FAQ</div>
-                        </header>
-                        <Faq />
-                    </section>
+            <div class="dark relative overflow-hidden pt-10">
+                <div class="web-big-padding-section-level-2 relative">
+                    <div class="relative container" style:z-index="10">
+                        <section class="web-grid-4-6">
+                            <header>
+                                <div class="text-display font-aeonik-pro text-primary">FAQ</div>
+                            </header>
+                            <Faq />
+                        </section>
+                    </div>
                 </div>
-            </div>
-            <div class="web-big-padding-section-level-2 relative !mb-0">
-                <div class="container">
-                    <PreFooter />
-                    <FooterNav />
-                    <MainFooter />
+                <div class="web-big-padding-section-level-2 relative !mb-0">
+                    <div class="container">
+                        <PreFooter />
+                        <FooterNav />
+                        <MainFooter />
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
     </Main>
 </div>
 
diff --git a/src/routes/products/sites/(components)/hero.svelte b/src/routes/products/sites/(components)/hero.svelte
index a5ae7d6d80..1f509b9ada 100644
--- a/src/routes/products/sites/(components)/hero.svelte
+++ b/src/routes/products/sites/(components)/hero.svelte
@@ -7,11 +7,7 @@
     import ProductHuntBadge from '../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div
-    class={cn(
-        'sites-hero-gradient relative flex flex-col items-center'
-    )}
->
+<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -43,7 +39,11 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
+        <img
+            src={Illustration}
+            alt="Illustration"
+            class="no-brand-filter col-span-full lg:col-span-7"
+        />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -78,6 +78,10 @@
     .sites-hero-gradient::after {
         right: 0;
         margin-block: auto 0;
-        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+        background: radial-gradient(
+            circle at 120% 125%,
+            hsl(248 99% 70% / 0.2) 0px,
+            transparent 40%
+        );
     }
 </style>
diff --git a/src/routes/products/sites/offer-300/(components)/hero.svelte b/src/routes/products/sites/offer-300/(components)/hero.svelte
index ec8d540e7c..cb707fa547 100644
--- a/src/routes/products/sites/offer-300/(components)/hero.svelte
+++ b/src/routes/products/sites/offer-300/(components)/hero.svelte
@@ -6,11 +6,7 @@
     import ProductHuntBadge from '../../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div
-    class={cn(
-        'sites-hero-gradient relative flex flex-col items-center'
-    )}
->
+<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -42,7 +38,11 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
+        <img
+            src={Illustration}
+            alt="Illustration"
+            class="no-brand-filter col-span-full lg:col-span-7"
+        />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -77,6 +77,10 @@
     .sites-hero-gradient::after {
         right: 0;
         margin-block: auto 0;
-        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+        background: radial-gradient(
+            circle at 120% 125%,
+            hsl(248 99% 70% / 0.2) 0px,
+            transparent 40%
+        );
     }
 </style>
diff --git a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
index 3e1258932b..c103421c94 100644
--- a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
+++ b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
@@ -6,11 +6,7 @@
     import ProductHuntBadge from '../../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div
-    class={cn(
-        'sites-hero-gradient relative flex flex-col items-center'
-    )}
->
+<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -39,7 +35,11 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
+        <img
+            src={Illustration}
+            alt="Illustration"
+            class="no-brand-filter col-span-full lg:col-span-7"
+        />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -74,6 +74,10 @@
     .sites-hero-gradient::after {
         right: 0;
         margin-block: auto 0;
-        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+        background: radial-gradient(
+            circle at 120% 125%,
+            hsl(248 99% 70% / 0.2) 0px,
+            transparent 40%
+        );
     }
 </style>
diff --git a/src/routes/products/storage/+page.svelte b/src/routes/products/storage/+page.svelte
index c76866779a..84fb04bf04 100644
--- a/src/routes/products/storage/+page.svelte
+++ b/src/routes/products/storage/+page.svelte
@@ -160,7 +160,9 @@
                 </div>
             </div>
         </div>
-        <div class="storage-purple-bg web-big-padding-section-level-1 web-white-section light pb-20">
+        <div
+            class="storage-purple-bg web-big-padding-section-level-1 web-white-section light pb-20"
+        >
             <div class="!my-0 py-24 md:py-20">
                 <div class="container">
                     <div class="grid grid-cols-1 gap-16 lg:grid-cols-2">

From f1aeaab8e45760df47e81775133f8ca18654d681 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 1 Apr 2026 11:10:25 +0530
Subject: [PATCH 7/8] format and change default to green

---
 src/app.html                                  |   9 +-
 src/lib/components/fancy/gradient-text.svelte |   5 +-
 src/lib/components/layout/site-footer.svelte  |   8 +-
 src/lib/layouts/Docs.svelte                   |   2 +-
 src/lib/layouts/Main.svelte                   |   2 +-
 src/markdoc/layouts/Post.svelte               |   4 +-
 .../(components)/hero-banner.svelte           |  26 +-
 .../(marketing)/(components)/hero.svelte      |   2 +-
 .../(marketing)/(components)/pricing.svelte   |   4 +-
 src/routes/(marketing)/+page.svelte           |   4 +-
 src/routes/+layout.svelte                     |  68 +-
 src/routes/pricing/+page.svelte               | 640 +++++++++---------
 .../products/sites/(components)/hero.svelte   |  18 +-
 .../sites/offer-300/(components)/hero.svelte  |  18 +-
 .../(components)/hero.svelte                  |  18 +-
 src/routes/products/storage/+page.svelte      |   4 +-
 16 files changed, 426 insertions(+), 406 deletions(-)

diff --git a/src/app.html b/src/app.html
index 362d674ba4..32bd894f5c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -42,7 +42,7 @@
         />
         %sveltekit.head%
     </head>
-    <body class="dark group/body antialiased" data-sveltekit-preload-data="hover">
+    <body class="dark brand-green group/body antialiased" data-sveltekit-preload-data="hover">
         <script>
             // Theme
             const isDocs = window.location.pathname.startsWith('/docs');
@@ -64,6 +64,13 @@
                 }
             }
 
+            // Brand theme
+            var brandTheme = localStorage.getItem('brand-theme');
+            if (brandTheme === 'pink' || brandTheme === 'green') {
+                document.body.classList.remove('brand-pink', 'brand-green');
+                document.body.classList.add('brand-' + brandTheme);
+            }
+
             // Progressive enhancement
             document.body.dataset.jsEnabled = '';
 
diff --git a/src/lib/components/fancy/gradient-text.svelte b/src/lib/components/fancy/gradient-text.svelte
index 3b856c1aa7..f93ed76125 100644
--- a/src/lib/components/fancy/gradient-text.svelte
+++ b/src/lib/components/fancy/gradient-text.svelte
@@ -12,10 +12,7 @@
 </script>
 
 <span
-    class={cn(
-        '-mb-1 block bg-clip-text pb-1 text-transparent',
-        className
-    )}
+    class={cn('-mb-1 block bg-clip-text pb-1 text-transparent', className)}
     style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 62%, transparent) 0%, #fff 50%);"
     {...rest}
 >
diff --git a/src/lib/components/layout/site-footer.svelte b/src/lib/components/layout/site-footer.svelte
index 80e522b9f8..9c58f8738a 100644
--- a/src/lib/components/layout/site-footer.svelte
+++ b/src/lib/components/layout/site-footer.svelte
@@ -118,13 +118,7 @@
     class:web-u-sep-block-start={!noBorder}
 >
     <div class="web-footer-nav container">
-        <img
-            class="web-logo"
-            src={logoSrc}
-            alt="appwrite"
-            height="24"
-            width="130"
-        />
+        <img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
         <ul class="web-footer-nav-main-list" use:melt={$root}>
             {#each Object.entries(links) as [title, items], i (i)}
                 <li class="web-footer-nav-main-item web-is-not-mobile">
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 7a81b47e71..694e21918c 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -55,7 +55,7 @@
     }
 
     let { variant = 'default', isReferences = false, children }: Props = $props();
-    let brandTheme = $state<'pink' | 'green'>('pink');
+    let brandTheme = $state<'pink' | 'green'>('green');
 
     const variantClasses: Record<DocsLayoutVariant, string> = {
         default: 'web-grid-side-nav max-w-[90rem] mx-auto',
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 3128d24e19..f8e71466d1 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -27,7 +27,7 @@
     export let omitMainId = false;
     export let hideNavigation = false;
     let theme: 'light' | 'dark' | null = 'dark';
-    let brandTheme: 'pink' | 'green' = 'pink';
+    let brandTheme: 'pink' | 'green' = 'green';
 
     $: darkLogoSrc =
         brandTheme === 'green' ? '/images/logos/appwrite-green.svg' : '/images/logos/appwrite.svg';
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index cc6b8013b0..c948bfa5fa 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -161,7 +161,9 @@
                         </div>
                     {/if}
 
-                    <div class="web-article-content prose prose-large blog-content-images mt-8 flex flex-col gap-8">
+                    <div
+                        class="web-article-content prose prose-large blog-content-images mt-8 flex flex-col gap-8"
+                    >
                         {#if lastUpdated}
                             <span class="text-main-body last-updated-text font-medium">
                                 Updated:
diff --git a/src/routes/(marketing)/(components)/hero-banner.svelte b/src/routes/(marketing)/(components)/hero-banner.svelte
index 9fc9a0a674..a0010965e6 100644
--- a/src/routes/(marketing)/(components)/hero-banner.svelte
+++ b/src/routes/(marketing)/(components)/hero-banner.svelte
@@ -1,39 +1,19 @@
 <script lang="ts">
     import { Icon } from '$lib/components/ui';
-    import type { IconType } from '$lib/components/ui/icon/types';
 
     type Props = {
         title: string;
         href: string;
-        icon?: Extract<IconType, 'mongo' | 'sparkle'>;
         class?: string;
     };
 
-    const { title, href, icon = 'mongo' }: Props = $props();
+    const { title, href }: Props = $props();
 </script>
 
 <a {href} class="web-hero-banner-button relative mb-4 flex items-center!">
-    {#if icon === 'mongo'}
-        <span class="mongo-icon-badge shrink-0" aria-hidden="true">
-            <Icon name="mongo" style="width: 0.75rem; height: 1.125rem; color: #00ED64;" />
-        </span>
-    {:else}
-        <Icon name="sparkle" class="shrink-0" aria-hidden="true" />
-    {/if}
+    <Icon name="sparkle" class="shrink-0" aria-hidden="true" />
+    <span class="text-caption shrink-0 font-medium">New</span>
     <div class="web-hero-banner-button-sep"></div>
     <span class="text-caption web-u-trim-1">{title}</span>
     <Icon name="arrow-right" class="shrink-0" aria-hidden="true" />
 </a>
-
-<style>
-    .mongo-icon-badge {
-        width: 1.375rem;
-        height: 1.375rem;
-        padding: 0.0625rem;
-        border-radius: 9999px;
-        background-color: #001e2b;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index cde9d9db90..d51aaa6f34 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -35,7 +35,7 @@
             class="animate-blur-in flex flex-col gap-4 [animation-delay:150ms] [animation-duration:1000ms] md:ml-12 lg:ml-0"
         >
             <HeroBanner
-                title="Appwrite partners with the world's best database company"
+                title="Introducing Appwrite Arena"
                 href="/blog/post/announcing-appwrite-arena"
             />
 
diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
index ed0caa5ef1..f77b2253f9 100644
--- a/src/routes/(marketing)/(components)/pricing.svelte
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -105,7 +105,9 @@
                     <div class="flex items-center gap-2.5">
                         <span class="text-description text-secondary font-medium">{name}</span>
                         {#if label}
-                            <div class="web-inline-tag is-pink text-caption font-medium">{label}</div>
+                            <div class="web-inline-tag is-pink text-caption font-medium">
+                                {label}
+                            </div>
                         {/if}
                     </div>
                     <div class="flex flex-1 flex-col">
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index c6cbc26f22..cfdb3138c3 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -34,8 +34,8 @@
             title="App Manager, Majik Kids"
             avatar="/images/testimonials/phil.jpg"
         >
-            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
-            that you need with Appwrite.</Pullquote
+            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the
+            tools that you need with Appwrite.</Pullquote
         >
         <Ai />
         <CaseStudies />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7313963e88..848823769c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -56,7 +56,7 @@
         }
 
         if (!browser) {
-            return 'pink';
+            return 'green';
         }
 
         const storedTheme = localStorage.getItem('brand-theme');
@@ -64,7 +64,7 @@
             return storedTheme;
         }
 
-        return 'pink';
+        return 'green';
     }
 </script>
 
@@ -102,7 +102,8 @@
 
         const favicon = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
         if (favicon) {
-            favicon.href = theme === 'green' ? '/images/logos/logo-green.svg' : '/images/logos/logo.svg';
+            favicon.href =
+                theme === 'green' ? '/images/logos/logo-green.svg' : '/images/logos/logo.svg';
         }
     }
 
@@ -230,9 +231,11 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/icons/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
@@ -242,9 +245,11 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/docs/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
@@ -261,7 +266,8 @@
             )
     ),
     :global(
-        body.brand-green img[src*='/images/icons/illustrated/']:not(.no-brand-filter):not(
+        body.brand-green
+            img[src*='/images/icons/illustrated/']:not(.no-brand-filter):not(
                 [src*='/images/logos/']
             ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
                 [src*='/images/companies/']
@@ -270,16 +276,20 @@
     :global(
         body.brand-green
             .products-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/icons/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
             .products-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/']):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
+            img[src*='/images/docs/']:not([src*='/images/logos/']):not(
+                [src*='/images/platforms/']
+            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
+                [src*='/images/company/']
+            )
     ),
     :global(
         body.brand-green
@@ -324,20 +334,20 @@
     :global(
         body.brand-green
             .pricing-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not(
+                [src*='/images/avatars/']
+            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
+                [src*='/images/companies/']
+            ):not([src*='/images/company/'])
     ),
     :global(
         body.brand-green
             .products-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not([src*='/images/avatars/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
+            img:not(.no-brand-filter):not([src*='/images/logos/']):not(
+                [src*='/images/avatars/']
+            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
+                [src*='/images/companies/']
+            ):not([src*='/images/company/'])
     ) {
         filter: var(--web-color-image-background-filter);
     }
@@ -345,9 +355,9 @@
     :global(
         body.brand-green
             .blog-content-images
-            img:not(.no-brand-filter):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
-                [src*='/images/companies/']
-            ):not([src*='/images/company/'])
+            img:not(.no-brand-filter):not([src*='/images/platforms/']):not(
+                [src*='/images/frameworks/']
+            ):not([src*='/images/companies/']):not([src*='/images/company/'])
     ) {
         filter: var(--web-color-image-background-filter);
     }
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 6b350c739d..523156107b 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -48,207 +48,138 @@
     </div>
 
     <Main>
-    <div class="web-big-padding-section mt-2">
-        <div class="dark pt-8">
-            <div class="web-big-padding-section-level-2">
-                <section class="container">
-                    <div class="web-hero">
-                        <h1
-                            class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
-                            style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+        <div class="web-big-padding-section mt-2">
+            <div class="dark pt-8">
+                <div class="web-big-padding-section-level-2">
+                    <section class="container">
+                        <div class="web-hero">
+                            <h1
+                                class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
+                                style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
-                        >
-                            Everything your app needs,<br />one subscription
-                        </h1>
-                        <p
-                            class="text-description max-w-xl self-center text-center opacity-90"
-                            style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+                            >
+                                Everything your app needs,<br />one subscription
+                            </h1>
+                            <p
+                                class="text-description max-w-xl self-center text-center opacity-90"
+                                style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
+                            >
+                                Build, deploy, and observe your app from one platform, all under one
+                                subscription.
+                            </p>
+                        </div>
+                    </section>
+                </div>
+                <div class="web-big-padding-section-level-2">
+                    <section class="container">
+                        <div
+                            class="web-pricing-cards"
+                            style:--columns-template={SHOW_SCALE_PLAN
+                                ? 'repeat(4, 1fr)'
+                                : 'repeat(3, 1fr)'}
                         >
-                            Build, deploy, and observe your app from one platform, all under one
-                            subscription.
-                        </p>
-                    </div>
-                </section>
-            </div>
-            <div class="web-big-padding-section-level-2">
-                <section class="container">
-                    <div
-                        class="web-pricing-cards"
-                        style:--columns-template={SHOW_SCALE_PLAN
-                            ? 'repeat(4, 1fr)'
-                            : 'repeat(3, 1fr)'}
-                    >
-                        <ul class="web-pricing-cards-list">
-                            <li>
-                                <article
-                                    class="web-card is-transparent has-border-gradient h-full"
-                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
-                                >
-                                    <div class="web-pricing-cards-item">
-                                        <header class="web-pricing-cards-header">
-                                            <h2
-                                                id="starter"
-                                                class="text-label text-primary font-aeonik-pro"
-                                            >
-                                                Free
-                                            </h2>
-                                            <div
-                                                class="text-title font-aeonik-pro text-primary mt-12 -mb-6"
-                                            >
-                                                $0
-                                            </div>
-                                            <div class="mt-1">&nbsp;</div>
-                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                A great fit for passion projects and small
-                                                applications.
-                                            </p>
-                                            <Button
-                                                variant="secondary"
-                                                class="is-full-width mt-8"
-                                                href={getAppwriteDashboardUrl('/register')}
-                                                event="pricing-cards-free-click"
-                                            >
-                                                <span class="text-sub-body font-medium"
-                                                    >Start building</span
-                                                >
-                                            </Button>
-                                        </header>
-                                        <div class="web-pricing-cards-content">
-                                            <ul class="web-checked-list-circle">
-                                                <li><span>5GB bandwidth</span></li>
-                                                <li><span>2GB storage</span></li>
-                                                <li><span>750K executions</span></li>
-                                                <li><span>75K monthly active users</span></li>
-                                                <li><span>Community support</span></li>
-                                                <li>
-                                                    <span
-                                                        >1 Database, 1 Bucket, 2 Functions per
-                                                        project</span
-                                                    >
-                                                </li>
-                                            </ul>
-                                            <p class="text-caption text-secondary mt-4">
-                                                Free projects are paused after 1 week of inactivity.
-                                                Limit of 2 projects.
-                                            </p>
-                                        </div>
-                                    </div>
-                                </article>
-                            </li>
-                            <li>
-                                <div
-                                    class="web-card is-transparent has-border-gradient is-transparent-pink -m-1 h-full p-1! backdrop-blur-none!"
-                                    style:--m-border-radius="1.25rem"
-                                >
+                            <ul class="web-pricing-cards-list">
+                                <li>
                                     <article
-                                        class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
-                                        style="background: linear-gradient(180deg, hsl(var(--web-color-pink-500) / 0.12) 38.59%, hsl(var(--web-color-pink-500) / 0) 99.04%);"
+                                        class="web-card is-transparent has-border-gradient h-full"
+                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
                                     >
-                                        <header class="web-pricing-cards-header">
-                                            <header class="flex gap-3">
+                                        <div class="web-pricing-cards-item">
+                                            <header class="web-pricing-cards-header">
                                                 <h2
-                                                    id="pro"
+                                                    id="starter"
                                                     class="text-label text-primary font-aeonik-pro"
                                                 >
-                                                    Pro
+                                                    Free
                                                 </h2>
-                                                <div class="web-inline-tag is-pink">
-                                                    Most popular
-                                                </div>
-                                            </header>
-                                            <div class="mt-4 flex flex-col gap-2">
-                                                <span class="-mb-4">From</span>
-                                                <div class="flex items-end gap-2">
-                                                    <div
-                                                        class="text-title font-aeonik-pro text-primary mt-3"
-                                                    >
-                                                        $25
-                                                    </div>
-                                                    <div class="mt-1">/month</div>
+                                                <div
+                                                    class="text-title font-aeonik-pro text-primary mt-12 -mb-6"
+                                                >
+                                                    $0
                                                 </div>
-                                            </div>
-                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                For production applications that need powerful
-                                                functionality and resources to scale.
-                                            </p>
-                                            <Button
-                                                href={getAppwriteDashboardUrl(
-                                                    '/console?type=create&plan=tier-1'
-                                                )}
-                                                class="is-full-width mt-11"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                event="pricing-cards-pro-click"
-                                            >
-                                                <span class="text-sub-body font-medium"
-                                                    >Start building</span
+                                                <div class="mt-1">&nbsp;</div>
+                                                <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                    A great fit for passion projects and small
+                                                    applications.
+                                                </p>
+                                                <Button
+                                                    variant="secondary"
+                                                    class="is-full-width mt-8"
+                                                    href={getAppwriteDashboardUrl('/register')}
+                                                    event="pricing-cards-free-click"
                                                 >
-                                            </Button>
-                                        </header>
-                                        <div class="web-pricing-cards-content">
-                                            <p>Dedicated resources per project:</p>
-                                            <ul class="web-checked-list-circle">
-                                                <li><span>2TB bandwidth</span></li>
-                                                <li><span>150GB storage</span></li>
-                                                <li><span>3.5M executions</span></li>
-                                                <li><span>200K monthly active users</span></li>
-                                                <li><span>Organization roles</span></li>
-                                                <li><span>Email support</span></li>
-                                                <li>
-                                                    <span>Daily backups stored for 7 days</span>
-                                                </li>
-                                                <li><span>Add-ons</span></li>
-                                                <li>
-                                                    <span
-                                                        >Unlimited Databases, Buckets, and Functions</span
+                                                    <span class="text-sub-body font-medium"
+                                                        >Start building</span
                                                     >
-                                                </li>
-                                            </ul>
+                                                </Button>
+                                            </header>
+                                            <div class="web-pricing-cards-content">
+                                                <ul class="web-checked-list-circle">
+                                                    <li><span>5GB bandwidth</span></li>
+                                                    <li><span>2GB storage</span></li>
+                                                    <li><span>750K executions</span></li>
+                                                    <li><span>75K monthly active users</span></li>
+                                                    <li><span>Community support</span></li>
+                                                    <li>
+                                                        <span
+                                                            >1 Database, 1 Bucket, 2 Functions per
+                                                            project</span
+                                                        >
+                                                    </li>
+                                                </ul>
+                                                <p class="text-caption text-secondary mt-4">
+                                                    Free projects are paused after 1 week of
+                                                    inactivity. Limit of 2 projects.
+                                                </p>
+                                            </div>
                                         </div>
                                     </article>
-                                </div>
-                            </li>
-                            {#if SHOW_SCALE_PLAN}
+                                </li>
                                 <li>
-                                    <article
-                                        class="web-card is-transparent has-border-gradient h-full"
-                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                    <div
+                                        class="web-card is-transparent has-border-gradient is-transparent-pink -m-1 h-full p-1! backdrop-blur-none!"
+                                        style:--m-border-radius="1.25rem"
                                     >
-                                        <div class="web-pricing-cards-item">
+                                        <article
+                                            class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
+                                            style="background: linear-gradient(180deg, hsl(var(--web-color-pink-500) / 0.12) 38.59%, hsl(var(--web-color-pink-500) / 0) 99.04%);"
+                                        >
                                             <header class="web-pricing-cards-header">
-                                                <h2
-                                                    id="scale"
-                                                    class="text-label text-primary font-aeonik-pro"
-                                                >
-                                                    Scale
-                                                </h2>
-
+                                                <header class="flex gap-3">
+                                                    <h2
+                                                        id="pro"
+                                                        class="text-label text-primary font-aeonik-pro"
+                                                    >
+                                                        Pro
+                                                    </h2>
+                                                    <div class="web-inline-tag is-pink">
+                                                        Most popular
+                                                    </div>
+                                                </header>
                                                 <div class="mt-4 flex flex-col gap-2">
                                                     <span class="-mb-4">From</span>
                                                     <div class="flex items-end gap-2">
                                                         <div
                                                             class="text-title font-aeonik-pro text-primary mt-3"
                                                         >
-                                                            $599
+                                                            $25
                                                         </div>
                                                         <div class="mt-1">/month</div>
                                                     </div>
                                                 </div>
-
                                                 <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                    For teams that handle more complex and large
-                                                    projects and need more control and support.
+                                                    For production applications that need powerful
+                                                    functionality and resources to scale.
                                                 </p>
                                                 <Button
-                                                    variant="secondary"
                                                     href={getAppwriteDashboardUrl(
-                                                        '/console?type=create&plan=tier-2'
+                                                        '/console?type=create&plan=tier-1'
                                                     )}
-                                                    event="pricing-cards-scale-click"
-                                                    class="is-full-width mt-10"
+                                                    class="is-full-width mt-11"
                                                     target="_blank"
                                                     rel="noopener noreferrer"
+                                                    event="pricing-cards-pro-click"
                                                 >
                                                     <span class="text-sub-body font-medium"
                                                         >Start building</span
@@ -256,15 +187,155 @@
                                                 </Button>
                                             </header>
                                             <div class="web-pricing-cards-content">
-                                                <p>Everything in Pro, plus:</p>
+                                                <p>Dedicated resources per project:</p>
                                                 <ul class="web-checked-list-circle">
-                                                    <li><span>Unlimited seats</span></li>
-                                                    <li><span>SOC-2</span></li>
-                                                    <li><span>BAA</span></li>
-                                                    <li><span>Network logs</span></li>
-                                                    <li><span>28-day log retention</span></li>
+                                                    <li><span>2TB bandwidth</span></li>
+                                                    <li><span>150GB storage</span></li>
+                                                    <li><span>3.5M executions</span></li>
+                                                    <li><span>200K monthly active users</span></li>
+                                                    <li><span>Organization roles</span></li>
+                                                    <li><span>Email support</span></li>
+                                                    <li>
+                                                        <span>Daily backups stored for 7 days</span>
+                                                    </li>
+                                                    <li><span>Add-ons</span></li>
+                                                    <li>
+                                                        <span
+                                                            >Unlimited Databases, Buckets, and
+                                                            Functions</span
+                                                        >
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </article>
+                                    </div>
+                                </li>
+                                {#if SHOW_SCALE_PLAN}
+                                    <li>
+                                        <article
+                                            class="web-card is-transparent has-border-gradient h-full"
+                                            style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                        >
+                                            <div class="web-pricing-cards-item">
+                                                <header class="web-pricing-cards-header">
+                                                    <h2
+                                                        id="scale"
+                                                        class="text-label text-primary font-aeonik-pro"
+                                                    >
+                                                        Scale
+                                                    </h2>
+
+                                                    <div class="mt-4 flex flex-col gap-2">
+                                                        <span class="-mb-4">From</span>
+                                                        <div class="flex items-end gap-2">
+                                                            <div
+                                                                class="text-title font-aeonik-pro text-primary mt-3"
+                                                            >
+                                                                $599
+                                                            </div>
+                                                            <div class="mt-1">/month</div>
+                                                        </div>
+                                                    </div>
+
+                                                    <p
+                                                        class="text-main-body mt-4 h-[5rem] font-medium"
+                                                    >
+                                                        For teams that handle more complex and large
+                                                        projects and need more control and support.
+                                                    </p>
+                                                    <Button
+                                                        variant="secondary"
+                                                        href={getAppwriteDashboardUrl(
+                                                            '/console?type=create&plan=tier-2'
+                                                        )}
+                                                        event="pricing-cards-scale-click"
+                                                        class="is-full-width mt-10"
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                    >
+                                                        <span class="text-sub-body font-medium"
+                                                            >Start building</span
+                                                        >
+                                                    </Button>
+                                                </header>
+                                                <div class="web-pricing-cards-content">
+                                                    <p>Everything in Pro, plus:</p>
+                                                    <ul class="web-checked-list-circle">
+                                                        <li><span>Unlimited seats</span></li>
+                                                        <li><span>SOC-2</span></li>
+                                                        <li><span>BAA</span></li>
+                                                        <li><span>Network logs</span></li>
+                                                        <li><span>28-day log retention</span></li>
+                                                        <li>
+                                                            <span>Custom organization roles</span>
+                                                        </li>
+                                                        <li><span>SSO</span></li>
+                                                        <li><span>Activity logs</span></li>
+                                                        <li><span>Custom backup policies</span></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </article>
+                                    </li>
+                                {/if}
+                                <li>
+                                    <article
+                                        class="web-card is-transparent has-border-gradient u-height-100-percent"
+                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                    >
+                                        <div class="web-pricing-cards-item">
+                                            <header class="web-pricing-cards-header">
+                                                <h2
+                                                    id="enterprise"
+                                                    class="text-label text-primary font-aeonik-pro"
+                                                >
+                                                    Enterprise
+                                                </h2>
+                                                <div
+                                                    class="text-title font-aeonik-pro text-primary mt-10 -mb-6"
+                                                >
+                                                    Custom
+                                                </div>
+                                                <div class="mt-1">&nbsp;</div>
+                                                <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                    For enterprises that need more power, premium
+                                                    support, and advanced security features.
+                                                </p>
+                                                <Button
+                                                    variant="secondary"
+                                                    href="/contact-us/enterprise"
+                                                    class="is-full-width mt-10"
+                                                    rel="noopener noreferrer"
+                                                    event="pricing-cards-enterprise-click"
+                                                >
+                                                    <!-- <span class="web-sub-body-500">Start trial</span> -->
+                                                    <span class="web-sub-body-500">Contact us</span>
+                                                </Button>
+                                            </header>
+                                            <div class="web-pricing-cards-content">
+                                                <p>
+                                                    Everything in {SHOW_SCALE_PLAN
+                                                        ? 'Scale'
+                                                        : 'Pro'}, plus:
+                                                </p>
+                                                <ul class="web-checked-list-circle">
+                                                    <li><span>Uptime SLAs</span></li>
+                                                    <li><span>Designated Success Manager</span></li>
+                                                    <li><span>Up to 24/7 support</span></li>
+                                                    <li>
+                                                        <span>Option for private Slack channel</span
+                                                        >
+                                                    </li>
+                                                    <li><span>Volume discounts</span></li>
+                                                    <li><span>Log drains</span></li>
+                                                    <li><span>90-day log retention</span></li>
+                                                    <li><span>Advanced observability</span></li>
+                                                    <li><span>Bring your own Cloud</span></li>
+                                                    <li>
+                                                        <span>SOC-2, HIPAA, and BAA</span>
+                                                    </li>
                                                     <li><span>Custom organization roles</span></li>
-                                                    <li><span>SSO</span></li>
+                                                    <li><span>Single Sign-On (SSO)</span></li>
                                                     <li><span>Activity logs</span></li>
                                                     <li><span>Custom backup policies</span></li>
                                                 </ul>
@@ -272,157 +343,100 @@
                                         </div>
                                     </article>
                                 </li>
-                            {/if}
-                            <li>
-                                <article
-                                    class="web-card is-transparent has-border-gradient u-height-100-percent"
-                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
-                                >
-                                    <div class="web-pricing-cards-item">
-                                        <header class="web-pricing-cards-header">
-                                            <h2
-                                                id="enterprise"
-                                                class="text-label text-primary font-aeonik-pro"
-                                            >
-                                                Enterprise
-                                            </h2>
-                                            <div
-                                                class="text-title font-aeonik-pro text-primary mt-10 -mb-6"
-                                            >
-                                                Custom
-                                            </div>
-                                            <div class="mt-1">&nbsp;</div>
-                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                For enterprises that need more power, premium
-                                                support, and advanced security features.
-                                            </p>
-                                            <Button
-                                                variant="secondary"
-                                                href="/contact-us/enterprise"
-                                                class="is-full-width mt-10"
-                                                rel="noopener noreferrer"
-                                                event="pricing-cards-enterprise-click"
-                                            >
-                                                <!-- <span class="web-sub-body-500">Start trial</span> -->
-                                                <span class="web-sub-body-500">Contact us</span>
-                                            </Button>
-                                        </header>
-                                        <div class="web-pricing-cards-content">
-                                            <p>
-                                                Everything in {SHOW_SCALE_PLAN ? 'Scale' : 'Pro'},
-                                                plus:
-                                            </p>
-                                            <ul class="web-checked-list-circle">
-                                                <li><span>Uptime SLAs</span></li>
-                                                <li><span>Designated Success Manager</span></li>
-                                                <li><span>Up to 24/7 support</span></li>
-                                                <li>
-                                                    <span>Option for private Slack channel</span>
-                                                </li>
-                                                <li><span>Volume discounts</span></li>
-                                                <li><span>Log drains</span></li>
-                                                <li><span>90-day log retention</span></li>
-                                                <li><span>Advanced observability</span></li>
-                                                <li><span>Bring your own Cloud</span></li>
-                                                <li>
-                                                    <span>SOC-2, HIPAA, and BAA</span>
-                                                </li>
-                                                <li><span>Custom organization roles</span></li>
-                                                <li><span>Single Sign-On (SSO)</span></li>
-                                                <li><span>Activity logs</span></li>
-                                                <li><span>Custom backup policies</span></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </article>
-                            </li>
-                        </ul>
-                    </div>
+                            </ul>
+                        </div>
 
-                    <section class="mt-20">
-                        <article class="cta-card stack-card p-6 md:p-8">
-                            <div class="stack-card__header">
-                                <h3
-                                    class="text-display text-primary font-aeonik-pro stack-card__title"
-                                >
-                                    One platform. One subscription.
-                                </h3>
-                                <div class="stack-card__badge">
-                                    1 vendor • 1 subscription • 1 bill
+                        <section class="mt-20">
+                            <article class="cta-card stack-card p-6 md:p-8">
+                                <div class="stack-card__header">
+                                    <h3
+                                        class="text-display text-primary font-aeonik-pro stack-card__title"
+                                    >
+                                        One platform. One subscription.
+                                    </h3>
+                                    <div class="stack-card__badge">
+                                        1 vendor • 1 subscription • 1 bill
+                                    </div>
                                 </div>
-                            </div>
-                            <p class="text-main-body text-secondary/90 mt-4 max-w-3xl">
-                                Replace fragmented backend, hosting, storage, and delivery tooling
-                                with a single platform built for the full application lifecycle.
-                                Reduce integration surface area, simplify procurement, and give your
-                                team one system to operate and scale.
-                            </p>
-                            <div class="stack-card__compare mt-6">
-                                <div class="stack-state-card">
-                                    <p class="stack-state-card__label">Before</p>
-                                    <ul class="stack-state-card__list">
-                                        <li>Multiple tools with overlapping responsibilities</li>
-                                        <li>
-                                            Separate subscriptions, invoices, and renewal cycles
-                                        </li>
-                                        <li>
-                                            More integration, maintenance, and ownership overhead
-                                        </li>
-                                    </ul>
+                                <p class="text-main-body text-secondary/90 mt-4 max-w-3xl">
+                                    Replace fragmented backend, hosting, storage, and delivery
+                                    tooling with a single platform built for the full application
+                                    lifecycle. Reduce integration surface area, simplify
+                                    procurement, and give your team one system to operate and scale.
+                                </p>
+                                <div class="stack-card__compare mt-6">
+                                    <div class="stack-state-card">
+                                        <p class="stack-state-card__label">Before</p>
+                                        <ul class="stack-state-card__list">
+                                            <li>
+                                                Multiple tools with overlapping responsibilities
+                                            </li>
+                                            <li>
+                                                Separate subscriptions, invoices, and renewal cycles
+                                            </li>
+                                            <li>
+                                                More integration, maintenance, and ownership
+                                                overhead
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="stack-state-card stack-state-card--after">
+                                        <p class="stack-state-card__label">After</p>
+                                        <ul class="stack-state-card__list">
+                                            <li>One platform across the app lifecycle</li>
+                                            <li>
+                                                One subscription with simpler billing and
+                                                procurement
+                                            </li>
+                                            <li>
+                                                Fewer systems to integrate, secure, and maintain
+                                            </li>
+                                        </ul>
+                                    </div>
                                 </div>
-                                <div class="stack-state-card stack-state-card--after">
-                                    <p class="stack-state-card__label">After</p>
-                                    <ul class="stack-state-card__list">
-                                        <li>One platform across the app lifecycle</li>
-                                        <li>
-                                            One subscription with simpler billing and procurement
-                                        </li>
-                                        <li>Fewer systems to integrate, secure, and maintain</li>
-                                    </ul>
+                                <div class="mt-6 flex flex-wrap items-center gap-4">
+                                    <Button
+                                        href="#compare-plans"
+                                        variant="secondary"
+                                        event="pricing-cards-stack_consolidation-see_included-click"
+                                    >
+                                        See what's included
+                                    </Button>
+                                    <span class="stack-card__helper text-caption text-secondary">
+                                        Compare plan limits, included capabilities, and scaling
+                                        options.
+                                    </span>
                                 </div>
-                            </div>
-                            <div class="mt-6 flex flex-wrap items-center gap-4">
-                                <Button
-                                    href="#compare-plans"
-                                    variant="secondary"
-                                    event="pricing-cards-stack_consolidation-see_included-click"
-                                >
-                                    See what's included
-                                </Button>
-                                <span class="stack-card__helper text-caption text-secondary">
-                                    Compare plan limits, included capabilities, and scaling options.
-                                </span>
-                            </div>
-                        </article>
+                            </article>
+                        </section>
                     </section>
-                </section>
+                </div>
             </div>
-        </div>
 
-        <div id="compare-plans">
-            <ComparePlans />
-        </div>
+            <div id="compare-plans">
+                <ComparePlans />
+            </div>
 
-        <div class="dark relative overflow-hidden pt-10">
-            <div class="web-big-padding-section-level-2 relative">
-                <div class="relative container" style:z-index="10">
-                    <section class="web-grid-4-6">
-                        <header>
-                            <div class="text-display font-aeonik-pro text-primary">FAQ</div>
-                        </header>
-                        <Faq />
-                    </section>
+            <div class="dark relative overflow-hidden pt-10">
+                <div class="web-big-padding-section-level-2 relative">
+                    <div class="relative container" style:z-index="10">
+                        <section class="web-grid-4-6">
+                            <header>
+                                <div class="text-display font-aeonik-pro text-primary">FAQ</div>
+                            </header>
+                            <Faq />
+                        </section>
+                    </div>
                 </div>
-            </div>
-            <div class="web-big-padding-section-level-2 relative !mb-0">
-                <div class="container">
-                    <PreFooter />
-                    <FooterNav />
-                    <MainFooter />
+                <div class="web-big-padding-section-level-2 relative !mb-0">
+                    <div class="container">
+                        <PreFooter />
+                        <FooterNav />
+                        <MainFooter />
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
     </Main>
 </div>
 
diff --git a/src/routes/products/sites/(components)/hero.svelte b/src/routes/products/sites/(components)/hero.svelte
index a5ae7d6d80..1f509b9ada 100644
--- a/src/routes/products/sites/(components)/hero.svelte
+++ b/src/routes/products/sites/(components)/hero.svelte
@@ -7,11 +7,7 @@
     import ProductHuntBadge from '../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div
-    class={cn(
-        'sites-hero-gradient relative flex flex-col items-center'
-    )}
->
+<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -43,7 +39,11 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
+        <img
+            src={Illustration}
+            alt="Illustration"
+            class="no-brand-filter col-span-full lg:col-span-7"
+        />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -78,6 +78,10 @@
     .sites-hero-gradient::after {
         right: 0;
         margin-block: auto 0;
-        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+        background: radial-gradient(
+            circle at 120% 125%,
+            hsl(248 99% 70% / 0.2) 0px,
+            transparent 40%
+        );
     }
 </style>
diff --git a/src/routes/products/sites/offer-300/(components)/hero.svelte b/src/routes/products/sites/offer-300/(components)/hero.svelte
index ec8d540e7c..cb707fa547 100644
--- a/src/routes/products/sites/offer-300/(components)/hero.svelte
+++ b/src/routes/products/sites/offer-300/(components)/hero.svelte
@@ -6,11 +6,7 @@
     import ProductHuntBadge from '../../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div
-    class={cn(
-        'sites-hero-gradient relative flex flex-col items-center'
-    )}
->
+<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -42,7 +38,11 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
+        <img
+            src={Illustration}
+            alt="Illustration"
+            class="no-brand-filter col-span-full lg:col-span-7"
+        />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -77,6 +77,10 @@
     .sites-hero-gradient::after {
         right: 0;
         margin-block: auto 0;
-        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+        background: radial-gradient(
+            circle at 120% 125%,
+            hsl(248 99% 70% / 0.2) 0px,
+            transparent 40%
+        );
     }
 </style>
diff --git a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
index 3e1258932b..c103421c94 100644
--- a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
+++ b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
@@ -6,11 +6,7 @@
     import ProductHuntBadge from '../../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div
-    class={cn(
-        'sites-hero-gradient relative flex flex-col items-center'
-    )}
->
+<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -39,7 +35,11 @@
                 </a>
             </div>
         </div>
-        <img src={Illustration} alt="Illustration" class="no-brand-filter col-span-full lg:col-span-7" />
+        <img
+            src={Illustration}
+            alt="Illustration"
+            class="no-brand-filter col-span-full lg:col-span-7"
+        />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -74,6 +74,10 @@
     .sites-hero-gradient::after {
         right: 0;
         margin-block: auto 0;
-        background: radial-gradient(circle at 120% 125%, hsl(248 99% 70% / 0.2) 0px, transparent 40%);
+        background: radial-gradient(
+            circle at 120% 125%,
+            hsl(248 99% 70% / 0.2) 0px,
+            transparent 40%
+        );
     }
 </style>
diff --git a/src/routes/products/storage/+page.svelte b/src/routes/products/storage/+page.svelte
index c76866779a..84fb04bf04 100644
--- a/src/routes/products/storage/+page.svelte
+++ b/src/routes/products/storage/+page.svelte
@@ -160,7 +160,9 @@
                 </div>
             </div>
         </div>
-        <div class="storage-purple-bg web-big-padding-section-level-1 web-white-section light pb-20">
+        <div
+            class="storage-purple-bg web-big-padding-section-level-1 web-white-section light pb-20"
+        >
             <div class="!my-0 py-24 md:py-20">
                 <div class="container">
                     <div class="grid grid-cols-1 gap-16 lg:grid-cols-2">

From 58ea1308244d90d40386de049361daba37e17ad1 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 1 Apr 2026 11:31:13 +0530
Subject: [PATCH 8/8] diagnostics

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

diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index 1b87b0d4d1..54244c1474 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -87,7 +87,7 @@
         </div>
 
         <section class="web-hero is-align-start e-hero-docs relative">
-            <HeroBanner title="MCP Server" href="/docs/tooling/mcp" icon="sparkle" />
+            <HeroBanner title="MCP Server" href="/docs/tooling/mcp" />
             <h1 class="text-display font-aeonik-pro text-primary max-w-[600px]">
                 Docs<span class="web-u-color-text-accent">_ </span>
             </h1>