From 8489fa3d2febc6fbd58fc3b54c15979ff9774dd4 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 26 Aug 2026 22:08:59 +0530
Subject: [PATCH 1/2] feat: Init announcement top banner

---
 .../components/InitAnnouncementBanner.svelte  | 56 +++++++++++++++++++
 src/lib/constants.ts                          |  6 +-
 src/lib/layouts/Main.svelte                   |  2 +
 src/scss/7-components/_top-banner.scss        | 44 ++++++++++++++-
 4 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/InitAnnouncementBanner.svelte

diff --git a/src/lib/components/InitAnnouncementBanner.svelte b/src/lib/components/InitAnnouncementBanner.svelte
new file mode 100644
index 00000000000..19ab766ae68
--- /dev/null
+++ b/src/lib/components/InitAnnouncementBanner.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+</script>
+
+<div class="web-top-banner web-top-banner--init">
+    <div class="web-top-banner-content">
+        <a
+            href="https://new.appwrite.io/init"
+            target="_blank"
+            rel="noopener noreferrer"
+            onclick={() => trackEvent('top-banner_init-click')}
+        >
+            <svg
+                class="web-init-banner-logo"
+                viewBox="-1 -82.4 185 92.4"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                role="img"
+                aria-label="init"
+            >
+                <g>
+                    <path
+                        fill="currentColor"
+                        d="M19.4 -62.6Q15.4 -62.6 12.9 -65.05Q10.4 -67.5 10.4 -71.3Q10.4 -75.6 13.4 -78.5Q16.4 -81.4 20.7 -81.4Q24.7 -81.4 27.2 -78.95Q29.7 -76.5 29.7 -72.7Q29.7 -68.4 26.7 -65.5Q23.7 -62.6 19.4 -62.6ZM0 -7.2 9.1 -58.8H26.5L17.4 -7.2Z"
+                    />
+                </g>
+                <g transform="translate(24 0)">
+                    <path
+                        fill="currentColor"
+                        d="M39.3 -59.4Q46.9 -59.4 52.3 -55.15Q57.7 -50.9 57.7 -41.4Q57.7 -38 57 -34.2L52.2 -7.2H34.9L39.7 -34.3Q40.2 -37.3 40.2 -39.1Q40.2 -45.6 33.2 -45.6Q24.1 -45.6 21.9 -33.3L17.3 -7.2H0L9.1 -58.8H24.2L24.4 -53.3Q30.8 -59.4 39.3 -59.4Z"
+                    />
+                </g>
+                <g transform="translate(82 0)">
+                    <path
+                        fill="currentColor"
+                        d="M19.4 -62.6Q15.4 -62.6 12.9 -65.05Q10.4 -67.5 10.4 -71.3Q10.4 -75.6 13.4 -78.5Q16.4 -81.4 20.7 -81.4Q24.7 -81.4 27.2 -78.95Q29.7 -76.5 29.7 -72.7Q29.7 -68.4 26.7 -65.5Q23.7 -62.6 19.4 -62.6ZM0 -7.2 9.1 -58.8H26.5L17.4 -7.2Z"
+                    />
+                </g>
+                <g transform="translate(106 0)">
+                    <path
+                        fill="currentColor"
+                        d="M6.3 -23.3 10.1 -44.5H2L4.5 -58.8H12.6L15.2 -73.3H32.5L29.9 -58.8H41L38.5 -44.5H27.4L24.1 -26.2Q23.9 -25 23.9 -24.2Q23.9 -21.5 27.5 -21.5H34.4L31.9 -7.2H20.5Q13.6 -7.2 9.75 -10.3Q5.9 -13.4 5.9 -19.4Q5.9 -20.5 6.3 -23.3Z"
+                    />
+                </g>
+                <g transform="translate(141.7 0)">
+                    <path fill="#FD366E" d="M38.5 9H-2.9L-0.1 -6.6H41.3Z" />
+                </g>
+            </svg>
+            Init is happening August 31 - September 4.
+            <span class="web-init-banner-cta">
+                Claim your ticket
+                <span class="web-icon-arrow-right" aria-hidden="true"></span>
+            </span>
+        </a>
+    </div>
+</div>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 4598b73ebd6..04758c3d5d4 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -41,7 +41,7 @@ export const SOCIAL_STATS: SocialStats = {
     }
 };
 
-export const BANNER_KEY: Banners = 'mongodb-partnership-banner-01'; // Change key to force banner to show again
+export const BANNER_KEY: Banners = 'init-banner-03'; // Change key to force banner to show again
 
 export const BLOG_POSTS_PER_PAGE = 12;
 
@@ -51,12 +51,14 @@ export const BLOG_POSTS_PER_PAGE = 12;
  * init-banner-02
  * pricing-banner-01
  * mongodb-partnership-banner-01
+ * init-banner-03
  */
 type Banners =
     | 'discord-banner-01'
     | 'init-banner-02'
     | 'pricing-banner-01'
-    | 'mongodb-partnership-banner-01';
+    | 'mongodb-partnership-banner-01'
+    | 'init-banner-03';
 
 export type Social = {
     icon: string;
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 3544aeb8c24..82505f71d7e 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -17,6 +17,7 @@
     import ProductsMobileSubmenu from '$lib/components/ProductsMobileSubmenu.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import MainNav from '$lib/components/MainNav.svelte';
+    import InitAnnouncementBanner from '$lib/components/InitAnnouncementBanner.svelte';
     import { page } from '$app/stores';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button, Icon, InlineTag } from '$lib/components/ui';
@@ -180,6 +181,7 @@
 </script>
 
 <div class="relative contents h-full">
+    <InitAnnouncementBanner />
     <section
         class="web-mobile-header flex! xl:hidden! {resolvedTheme}"
         class:is-transparent={browser && !$isMobileNavOpen}
diff --git a/src/scss/7-components/_top-banner.scss b/src/scss/7-components/_top-banner.scss
index 933a0e1db3d..aa09560c622 100644
--- a/src/scss/7-components/_top-banner.scss
+++ b/src/scss/7-components/_top-banner.scss
@@ -44,6 +44,48 @@
       }
     }
   }
+
+  &--init {
+    /* Init theme: black bar, white copy, brand underscore in wordmark */
+    background: #000;
+    padding-block: pxToRem(14);
+    padding-inline: pxToRem(20);
+
+    .#{$p}-top-banner-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: pxToRem(8);
+      color: #fff;
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        gap: pxToRem(8);
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+          opacity: 0.9;
+        }
+
+        .web-init-banner-logo {
+          block-size: pxToRem(22);
+          inline-size: auto;
+          flex-shrink: 0;
+        }
+
+        .web-init-banner-cta {
+          display: inline-flex;
+          align-items: center;
+          gap: pxToRem(4);
+          white-space: nowrap;
+          border-block-end: 1px solid currentColor;
+          line-height: 1.2;
+        }
+      }
+    }
+  }
 }
 
 .#{$p}-top-banner-2 {
@@ -65,4 +107,4 @@
     opacity:0.12;
 
   }
-}
\ No newline at end of file
+}

From a6d1abb86f44a1a4d55e0415f30831b1cc4714cb Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 26 Aug 2026 22:38:38 +0530
Subject: [PATCH 2/2] feat: Init hero pill, banner console bg and separator

---
 .../(components)/hero-banner.svelte           | 37 ++++++++++++++++++-
 .../(marketing)/(components)/hero.svelte      | 12 +++---
 src/scss/7-components/_top-banner.scss        | 10 +++--
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/routes/(marketing)/(components)/hero-banner.svelte b/src/routes/(marketing)/(components)/hero-banner.svelte
index f58706b3334..2fb75ba4c37 100644
--- a/src/routes/(marketing)/(components)/hero-banner.svelte
+++ b/src/routes/(marketing)/(components)/hero-banner.svelte
@@ -5,7 +5,7 @@
     type Props = {
         title: string;
         href: string;
-        icon?: Extract<IconType, 'mongo' | 'sparkle'> | 'claude' | 'presences';
+        icon?: Extract<IconType, 'mongo' | 'sparkle'> | 'claude' | 'presences' | 'init';
         class?: string;
     };
 
@@ -34,6 +34,35 @@
         </span>
     {:else if icon === 'presences'}
         <span class="icon-status-online presences-icon-glyph shrink-0" aria-hidden="true"></span>
+    {:else if icon === 'init'}
+        <svg
+            class="init-icon-wordmark shrink-0"
+            viewBox="-1 -82.4 185 92.4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+        >
+            <path
+                fill="currentColor"
+                d="M19.4 -62.6Q15.4 -62.6 12.9 -65.05Q10.4 -67.5 10.4 -71.3Q10.4 -75.6 13.4 -78.5Q16.4 -81.4 20.7 -81.4Q24.7 -81.4 27.2 -78.95Q29.7 -76.5 29.7 -72.7Q29.7 -68.4 26.7 -65.5Q23.7 -62.6 19.4 -62.6ZM0 -7.2 9.1 -58.8H26.5L17.4 -7.2Z"
+            />
+            <path
+                fill="currentColor"
+                transform="translate(24 0)"
+                d="M39.3 -59.4Q46.9 -59.4 52.3 -55.15Q57.7 -50.9 57.7 -41.4Q57.7 -38 57 -34.2L52.2 -7.2H34.9L39.7 -34.3Q40.2 -37.3 40.2 -39.1Q40.2 -45.6 33.2 -45.6Q24.1 -45.6 21.9 -33.3L17.3 -7.2H0L9.1 -58.8H24.2L24.4 -53.3Q30.8 -59.4 39.3 -59.4Z"
+            />
+            <path
+                fill="currentColor"
+                transform="translate(82 0)"
+                d="M19.4 -62.6Q15.4 -62.6 12.9 -65.05Q10.4 -67.5 10.4 -71.3Q10.4 -75.6 13.4 -78.5Q16.4 -81.4 20.7 -81.4Q24.7 -81.4 27.2 -78.95Q29.7 -76.5 29.7 -72.7Q29.7 -68.4 26.7 -65.5Q23.7 -62.6 19.4 -62.6ZM0 -7.2 9.1 -58.8H26.5L17.4 -7.2Z"
+            />
+            <path
+                fill="currentColor"
+                transform="translate(106 0)"
+                d="M6.3 -23.3 10.1 -44.5H2L4.5 -58.8H12.6L15.2 -73.3H32.5L29.9 -58.8H41L38.5 -44.5H27.4L24.1 -26.2Q23.9 -25 23.9 -24.2Q23.9 -21.5 27.5 -21.5H34.4L31.9 -7.2H20.5Q13.6 -7.2 9.75 -10.3Q5.9 -13.4 5.9 -19.4Q5.9 -20.5 6.3 -23.3Z"
+            />
+            <path fill="#FD366E" transform="translate(141.7 0)" d="M38.5 9H-2.9L-0.1 -6.6H41.3Z" />
+        </svg>
     {:else}
         <Icon name="sparkle" class="shrink-0" aria-hidden="true" />
     {/if}
@@ -76,4 +105,10 @@
         font-size: 1rem;
         line-height: 1;
     }
+
+    .init-icon-wordmark {
+        height: 0.875rem;
+        width: auto;
+        display: block;
+    }
 </style>
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index 3c16d4c5d99..a8282c6774e 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -152,16 +152,16 @@
         >
             {#if layoutAside}
                 <HeroBanner
-                    title="State of Appwrite Cloud: Take the survey"
-                    href="https://forms.gle/5cvWxTwhonoDCWsi7"
-                    icon="sparkle"
+                    title="Init is happening August 31 - September 4"
+                    href="https://new.appwrite.io/init"
+                    icon="init"
                 />
             {:else}
                 <div class="flex w-full justify-center">
                     <HeroBanner
-                        title="State of Appwrite Cloud: Take the survey"
-                        href="https://forms.gle/5cvWxTwhonoDCWsi7"
-                        icon="sparkle"
+                        title="Init is happening August 31 - September 4"
+                        href="https://new.appwrite.io/init"
+                        icon="init"
                     />
                 </div>
             {/if}
diff --git a/src/scss/7-components/_top-banner.scss b/src/scss/7-components/_top-banner.scss
index aa09560c622..de18eaf012c 100644
--- a/src/scss/7-components/_top-banner.scss
+++ b/src/scss/7-components/_top-banner.scss
@@ -46,8 +46,10 @@
   }
 
   &--init {
-    /* Init theme: black bar, white copy, brand underscore in wordmark */
-    background: #000;
+    /* Init theme: new console dark grey bar, white copy, brand underscore in wordmark */
+    /* new console dark bg + separator */
+    background: #19191c;
+    border-block-end: 1px solid rgba(255, 255, 255, 0.12);
     padding-block: pxToRem(14);
     padding-inline: pxToRem(20);
 
@@ -56,7 +58,7 @@
       align-items: center;
       justify-content: center;
       gap: pxToRem(8);
-      color: #fff;
+      color: oklch(0.705 0.015 286.067); /* new console --muted-foreground */
 
       a {
         display: inline-flex;
@@ -73,12 +75,14 @@
           block-size: pxToRem(22);
           inline-size: auto;
           flex-shrink: 0;
+          color: #fff;
         }
 
         .web-init-banner-cta {
           display: inline-flex;
           align-items: center;
           gap: pxToRem(4);
+          color: #fff;
           white-space: nowrap;
           border-block-end: 1px solid currentColor;
           line-height: 1.2;