feat: shutdown banner

src/components/Navbar/index.tsx

@@ -382,12 +382,13 @@ export const Navbar: React.FC<NavbarProps> = ({
   return (
     <div
       className={cn(
-        'sticky top-0 z-50 w-full px-24',
+        'sticky z-50 w-full px-24',
         {
           fixed: variant === 'fixed',
         },
         wrapperClassName,
       )}
+      style={{ top: '60px' }}
     >
       <div className="absolute top-0 -z-1 -mx-24 h-80 w-full bg-gray-dark-1/70 backdrop-blur-sm [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0))]"></div>
       <nav

src/components/ShutdownBanner.tsx

@@ -0,0 +1,95 @@
+import Link, { Target } from '@components/Link';
+import { cn } from '@utils/cn';
+import { FaExclamationTriangle } from 'react-icons/fa';
+
+export const ShutdownBanner = () => {
+  return (
+    <div
+      className="fixed left-0 right-0 top-0 w-full px-16 py-12 sm:px-24"
+      style={{
+        zIndex: 9999,
+        backgroundColor: '#7f1d1d',
+        borderBottom: '1px solid #dc2626',
+      }}
+    >
+      <div className="mx-auto flex max-w-[1300px] items-center justify-center gap-12 text-center sm:gap-16">
+        <FaExclamationTriangle
+          className="hidden shrink-0 sm:block"
+          style={{ width: '20px', height: '20px', color: '#fbbf24' }}
+        />
+
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-8">
+          <div className="flex items-center gap-8 sm:hidden">
+            <FaExclamationTriangle
+              className="shrink-0"
+              style={{ width: '16px', height: '16px', color: '#fbbf24' }}
+            />
+            <span
+              className="tracking-wide font-plex-sans text-14 font-bold uppercase sm:text-15"
+              style={{ color: '#fbbf24' }}
+            >
+              Service Shutdown Notice
+            </span>
+          </div>
+
+          <span
+            className="tracking-wide hidden font-plex-sans text-14 font-bold uppercase sm:block sm:text-15"
+            style={{ color: '#fbbf24' }}
+          >
+            Service Shutdown Notice
+          </span>
+
+          <span
+            className="font-plex-sans text-13 font-medium leading-relaxed sm:text-14"
+            style={{ color: '#ffffff' }}
+          >
+            Fleek Hosting and Eliza Agents service will be permanently shut down
+            on{' '}
+            <span className="font-bold" style={{ color: '#fcd34d' }}>
+              January 31, 2026
+            </span>
+            . All data and access will cease. Migrate your services immediately.
+          </span>
+        </div>
+
+        <Link
+          href="https://resources.fleek.xyz/support/"
+          target={Target.Blank}
+          rel="noopener noreferrer"
+          className={cn(
+            'rounded-md hidden shrink-0 px-16 py-8',
+            'font-plex-sans text-13 font-bold transition-all',
+            'sm:block',
+          )}
+          style={{
+            backgroundColor: '#fbbf24',
+            border: '1px solid #fbbf24',
+            color: '#7f1d1d',
+          }}
+        >
+          Learn More
+        </Link>
+      </div>
+
+      {/* Mobile button */}
+      <div className="mt-12 flex justify-center sm:hidden">
+        <Link
+          href="https://fleek.xyz/support"
+          target={Target.Blank}
+          rel="noopener noreferrer"
+          className={cn(
+            'rounded-md px-20 py-10',
+            'font-plex-sans text-13 font-bold transition-all',
+          )}
+          style={{
+            backgroundColor: '#fbbf24',
+            border: '1px solid #fbbf24',
+            color: '#7f1d1d',
+          }}
+        >
+          Learn More
+        </Link>
+      </div>
+    </div>
+  );
+};

src/layouts/BaseHtml.astro

@@ -7,6 +7,7 @@ import settings from '@base/settings.json';
 import Trackers from '@components/Tracking/Trackers.astro';
 
 import { Announcement } from '@components/Announcement';
+import { ShutdownBanner } from '@components/ShutdownBanner';
 import Footer from '@components/Footer';
 import { Navbar } from '@components/Navbar';
 import SupportMenu from '@components/Support/SupportMenu';
@@ -257,6 +258,7 @@ const metaTitle = ogMeta['custom_title'] ?? ogMeta?.title;
       customBodyClass,
     )}
   >
+    {!singlePage && <ShutdownBanner />}
     {
       !singlePage && (
         <>
@@ -274,7 +276,8 @@ const metaTitle = ogMeta['custom_title'] ?? ogMeta?.title;
     }
     <div
       class={cn(
-        'relative w-full self-center px-24 py-32 xl:max-w-[1066px] 2xl:max-w-[1300px]',
+        'relative w-full self-center px-24 xl:max-w-[1066px] 2xl:max-w-[1300px]',
+        !singlePage ? 'pt-[120px] pb-32' : 'py-32',
         customContentWrapperClass,
       )}
     >

src/layouts/ElizaHtml.astro

@@ -6,6 +6,7 @@ import Trackers from '@components/Tracking/Trackers.astro';
 
 import { Navbar } from '@components/Navbar';
 import { generateCanonicalUrl } from '@utils/generateCanonicalUrl';
+import { ShutdownBanner } from '@components/ShutdownBanner';
 
 interface Props {
   title: string;
@@ -226,6 +227,7 @@ const metaTitle = ogMeta['custom_title'] ?? ogMeta?.title;
   <body
     class="relative flex min-h-dvh flex-col bg-black [scrollbar-gutter:stable]"
   >
+    <ShutdownBanner />
     <Navbar
       client:load
       pathname={Astro.url.pathname}
@@ -234,7 +236,7 @@ const metaTitle = ogMeta['custom_title'] ?? ogMeta?.title;
       variant="fixed"
     />
     <div
-      class="relative w-full max-w-[1300px] flex-1 self-center px-24 pt-[10rem] xl:max-w-[1066px] xl:px-0 2xl:max-w-[1300px]"
+      class="relative w-full max-w-[1300px] flex-1 self-center px-24 pt-[12rem] xl:max-w-[1066px] xl:px-0 2xl:max-w-[1300px]"
     >
       <slot />
     </div>

src/layouts/LandingPageHtml.astro

@@ -4,6 +4,7 @@ import { getSiteUrl } from '@utils/url';
 import settings from '@base/settings.json';
 import Trackers from '@components/Tracking/Trackers.astro';
 import { generateCanonicalUrl } from '@utils/generateCanonicalUrl';
+import { ShutdownBanner } from '@components/ShutdownBanner';
 
 const baseUrl = getSiteUrl();
 const canonicalUrl = generateCanonicalUrl();
@@ -206,6 +207,9 @@ const canonicalUrl = generateCanonicalUrl();
   <body
     class="relative flex flex-col bg-neutral-1 font-inter text-14 tracking-[-0.06em] text-gray-dark-11 [scrollbar-gutter:stable] selection:bg-yellow-dark-9 selection:text-black"
   >
-    <slot />
+    <ShutdownBanner />
+    <div class="mt-[60px] sm:mt-[70px]">
+      <slot />
+    </div>
   </body>
 </html>