feat: blog route and launch notification

app/posts/helpers.ts

@@ -0,0 +1,43 @@
+import path from 'node:path';
+
+const deployUrl = process.env.BOAT_DEPLOY_URL ?? process.env.VERCEL_URL;
+
+export const POSTS_DIRECTORY = path.join(process.cwd(), 'src/content/posts');
+export const POSTS_SITE_ORIGIN = deployUrl ? `https://${deployUrl}` : 'https://monarchlend.xyz';
+
+export type PostListItem = {
+  slug: string;
+  title: string;
+  publishedDate: string | null;
+  excerpt: string;
+  sortTime: number;
+};
+
+export const formatSlugTitle = (slug: string): string =>
+  slug
+    .replace(/^\d{4}-\d{2}-\d{2}-/, '')
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+
+export const parseDateFromSlug = (slug: string): { label: string | null; time: number } => {
+  const match = slug.match(/^(\d{4})-(\d{2})-(\d{2})-/);
+  if (!match) {
+    return { label: null, time: 0 };
+  }
+
+  const [_, year, month, day] = match;
+  const date = new Date(`${year}-${month}-${day}T00:00:00Z`);
+  if (Number.isNaN(date.getTime())) {
+    return { label: null, time: 0 };
+  }
+
+  return {
+    label: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'UTC',
+    }),
+    time: date.getTime(),
+  };
+};

app/posts/page.tsx

@@ -0,0 +1,141 @@
+import { promises as fs, type Dirent } from 'node:fs';
+import path from 'node:path';
+import Link from 'next/link';
+import Header from '@/components/layout/header/Header';
+import { Breadcrumbs } from '@/components/shared/breadcrumbs';
+import { generateMetadata } from '@/utils/generateMetadata';
+import { POSTS_DIRECTORY, POSTS_SITE_ORIGIN, formatSlugTitle, parseDateFromSlug, type PostListItem } from './helpers';
+
+const getPostPreview = (markdown: string, fallbackTitle: string): { title: string; excerpt: string } => {
+  const lines = markdown.replaceAll('\r\n', '\n').split('\n');
+  let title = fallbackTitle;
+  let excerpt = 'Product update and announcement.';
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) {
+      continue;
+    }
+
+    const headingMatch = trimmed.match(/^#\s+(.+)$/);
+    if (headingMatch && title === fallbackTitle) {
+      title = headingMatch[1];
+      continue;
+    }
+
+    if (
+      !trimmed.startsWith('#') &&
+      !trimmed.startsWith('![') &&
+      !trimmed.startsWith('```') &&
+      !trimmed.startsWith('---') &&
+      !trimmed.match(/^[-*]\s+/) &&
+      !trimmed.match(/^\d+\.\s+/)
+    ) {
+      excerpt = trimmed.replace(/^>\s*/, '');
+      break;
+    }
+  }
+
+  return { title, excerpt };
+};
+
+const getAllPosts = async (): Promise<PostListItem[]> => {
+  let entries: Dirent[];
+  try {
+    entries = await fs.readdir(POSTS_DIRECTORY, { withFileTypes: true });
+  } catch (error: unknown) {
+    const fsError = error as NodeJS.ErrnoException;
+    if (fsError.code === 'ENOENT') {
+      return [];
+    }
+
+    throw error;
+  }
+
+  const markdownFiles = entries.filter((entry) => entry.isFile() && entry.name.endsWith('.md'));
+
+  const posts = await Promise.all(
+    markdownFiles.map(async (entry) => {
+      const slug = entry.name.replace(/\.md$/, '');
+      const fallbackTitle = formatSlugTitle(slug);
+      const filePath = path.join(POSTS_DIRECTORY, entry.name);
+      const markdown = await fs.readFile(filePath, 'utf8');
+      const { title, excerpt } = getPostPreview(markdown, fallbackTitle);
+      const { label, time } = parseDateFromSlug(slug);
+
+      return {
+        slug,
+        title,
+        excerpt,
+        publishedDate: label,
+        sortTime: time,
+      };
+    }),
+  );
+
+  return posts.sort((first, second) => {
+    if (first.sortTime !== second.sortTime) {
+      return second.sortTime - first.sortTime;
+    }
+
+    return second.slug.localeCompare(first.slug);
+  });
+};
+
+export const metadata = generateMetadata({
+  title: 'Posts | Monarch',
+  description: 'Monarch announcements and product updates',
+  images: 'themes.png',
+  url: POSTS_SITE_ORIGIN,
+  pathname: '/posts',
+});
+
+export default async function PostsPage() {
+  const posts = await getAllPosts();
+
+  return (
+    <div className="flex flex-col justify-between font-zen">
+      <Header />
+      <div className="container h-full gap-8 pb-12">
+        <div className="mt-10 min-h-10 flex items-center md:mt-12">
+          <Breadcrumbs
+            items={[
+              { label: 'Home', href: '/' },
+              { label: 'Posts', isCurrent: true },
+            ]}
+          />
+        </div>
+
+        <section className="mt-4 w-full pb-4">
+          <header className="pb-2">
+            <p className="text-xs uppercase tracking-[0.12em] text-secondary">Announcements</p>
+            <h1 className="!pb-0 !pt-2 text-2xl font-normal sm:text-3xl">Posts</h1>
+          </header>
+
+          <div className="mt-3 flex flex-col gap-3">
+            {posts.length === 0 ? (
+              <p className="py-4 text-sm text-secondary">No posts published yet.</p>
+            ) : (
+              posts.map((post) => (
+                <Link
+                  key={post.slug}
+                  href={`/posts/${post.slug}`}
+                  className="no-underline rounded-lg px-4 py-4 transition-colors hover:bg-hovered"
+                >
+                  <div className="mb-2 flex flex-wrap items-center gap-2">
+                    <span className="inline-flex rounded border border-primary/20 px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-primary/80">
+                      Product Update
+                    </span>
+                    {post.publishedDate && <span className="text-xs text-secondary">{post.publishedDate}</span>}
+                  </div>
+                  <h2 className="text-lg font-normal text-primary">{post.title}</h2>
+                  <p className="mt-1 text-sm text-secondary">{post.excerpt}</p>
+                </Link>
+              ))
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

public/posts/2026-03-06-leverage/.gitkeep

@@ -0,0 +1 @@
+

src/components/layout/notification-banner.tsx

@@ -22,33 +22,45 @@ export function NotificationBanner() {
   const action = currentNotification.action;
 
   return (
-    <div className="relative w-full bg-primary overflow-hidden">
-      {/* Grid background overlay */}
+    <div className="relative w-full overflow-hidden border-b border-dashed border-[var(--grid-cell-muted)] bg-main">
+      {/* Soft primary tint */}
+      <div
+        className="absolute inset-0 bg-primary"
+        style={{ opacity: 0.16 }}
+        aria-hidden="true"
+      />
+
+      {/* Grid background overlays */}
       <GridAccent
         position="top-strip"
         variant="dots"
-        className="opacity-40"
+        className="opacity-32"
+      />
+      <GridAccent
+        position="top-strip"
+        variant="lines"
+        className="opacity-18"
       />
 
       {/* Content container - same height as header */}
-      <div className="relative flex h-[48px] items-center md:h-[56px]">
+      <div className="relative z-10 flex h-[48px] items-center md:h-[56px]">
         <div className="container mx-auto flex items-center justify-center gap-4 px-4 sm:px-6 md:px-8">
           {/* Badge for multiple notifications */}
-          {totalCount > 1 && <span className="font-zen text-xs text-primary-foreground/80">1/{totalCount}</span>}
+          {totalCount > 1 && <span className="font-zen text-xs text-secondary">1/{totalCount}</span>}
 
           {/* Custom icon if provided */}
-          {currentNotification.icon && <span className="text-primary-foreground">{currentNotification.icon}</span>}
+          {currentNotification.icon && <span className="text-primary">{currentNotification.icon}</span>}
 
           {/* Message */}
-          <p className="font-zen text-sm text-primary-foreground">{currentNotification.message}</p>
+          <p className="font-zen text-sm text-primary">{currentNotification.message}</p>
 
           {/* Action button */}
           {action &&
             (action.href ? (
               <Link
                 href={action.href}
                 onClick={handleDismiss}
-                className="font-zen text-xs text-primary-foreground underline-offset-2 transition-colors hover:underline"
+                className="font-zen text-xs text-primary underline-offset-2 transition-colors hover:underline"
               >
                 {action.label}
               </Link>
@@ -59,7 +71,7 @@ export function NotificationBanner() {
                   action.onClick?.();
                   handleDismiss();
                 }}
-                className="font-zen text-xs text-primary-foreground underline-offset-2 transition-colors hover:underline"
+                className="font-zen text-xs text-primary underline-offset-2 transition-colors hover:underline"
               >
                 {action.label}
               </button>
@@ -69,7 +81,7 @@ export function NotificationBanner() {
           <button
             type="button"
             onClick={handleDismiss}
-            className="absolute right-4 z-10 p-1 text-primary-foreground/80 transition-colors hover:text-primary-foreground sm:right-6 md:right-8"
+            className="absolute right-4 z-10 p-1 text-secondary transition-colors hover:text-primary sm:right-6 md:right-8"
             aria-label="Dismiss notification"
           >
             <Cross2Icon className="h-5 w-5" />

src/config/notifications.ts

@@ -36,17 +36,14 @@ export type NotificationConfig = {
  */
 export const NOTIFICATIONS: NotificationConfig[] = [
   {
-    id: 'position-history-chart-2026-02-01',
-    message: "💎 New feature: Position History Graph — analyze any account's allocation changes over time!",
-    type: 'info',
+    id: 'leverage-live-2026-03-06-v2',
+    message: '🚀 Leverage is now live on Monarch. See what is new and how to get started.',
+    type: 'success',
     category: 'global',
-    expiresAt: new Date('2026-02-10'),
-  },
-  {
-    id: 'custom-tags-2026-02',
-    message: '💎 New feature: Custom Tags — create your own tags on market flow metrics! Try it in Settings → Experimental',
-    type: 'info',
-    category: 'global',
-    expiresAt: new Date('2026-02-10'),
+    action: {
+      label: 'Read update',
+      href: '/posts/2026-03-06-leverage',
+    },
+    expiresAt: new Date('2026-03-10T23:59:59.999Z'),
   },
 ];

src/content/posts/2026-03-06-leverage.md

@@ -0,0 +1,59 @@
+# Leverage Is Live on Monarch
+
+Leverage is now available in Monarch for all markets.
+
+This launch includes two execution paths:
+- Swap-based leverage for general collateral/loan pairs
+- ERC4626 vault-token leverage when the collateral vault underlying matches the market loan asset
+
+
+## What this release enables
+
+You can open leveraged positions in one bundled transaction flow, start from supported collateral or loan-asset input (depending on route), review projected collateral, borrow amount, and fee before confirming, and use the same interface for leverage and deleverage.
+
+- Click the market action dropdown from any table, or go to a specific market page and click the Borrow dropdown.
+
+## How routing works
+
+When you open leverage, Monarch picks the available route for that market and chain.
+
+1. ERC4626 deterministic route: If the collateral token is a vault share token whose underlying is the loan asset, Monarch uses the ERC4626 route.
+2. Swap-backed route: If that ERC4626 route is not available, Monarch uses a swap route powered by Velora (ParaSwap).
+
+## Swap-based leverage (Velora + Bundler3)
+
+For swap routes, the action is executed as one bundled transaction. (You need to sign a one-time authorization for Morpho's [official Bundler3 contract](https://morpho.org/blog/introducing-bundler3/) if you haven't used it before.)
+
+If you inspect the transaction flow, the core steps are:
+- Move your input into the leverage flow
+- Take a flash loan in the market loan asset
+- Swap loan asset to collateral through Velora
+- Supply collateral to Morpho
+- Borrow loan asset to close the loop and settle the flash loan
+- Apply the displayed fee
+
+All of that happens in one transaction path so you do not have to manually chain steps.
+
+
+![Leverage overview](/posts/2026-03-06-leverage/leverage-overview.png)
+
+
+## ERC4626 vault-token leverage
+
+For vault-share collateral where the vault underlying equals the market loan asset, Monarch switches to ERC4626 mode automatically. This route use the existing BundlerV2, so no extra authorization is needed for existing users.
+
+That path avoids a DEX swap leg in the leverage loop and uses vault conversion steps instead. In practice, this is the clean route for vault-token-to-underlying pairs. For example, markets like USDC/yoUSD below.
+
+![ERC4626 route details](/posts/2026-03-06-leverage/erc4626-route.png)
+
+P.S. If you know any active incentive campaign on a vault token like yoUSD above, get in touch so we can support showing this APY on the leverage preview.  
+
+## Fee model
+
+Current leverage fee is 0.0075% (0.75 bps) of added collateral, capped at $5 per transaction. Fee is shown in preview before execution.
+
+## Risk note
+
+Leverage increases liquidation risk as effective LTV rises. Use conservative multipliers and review projected post-action metrics before signing.
+
+Happy looping.

src/hooks/useActiveNotifications.ts

@@ -36,15 +36,9 @@ export type ActiveNotificationsResult = {
  */
 export const useActiveNotifications = (): ActiveNotificationsResult => {
   const dismissedIds = useNotificationStore((s) => s.dismissedIds);
-  const hasHydrated = useNotificationStore((s) => s._hasHydrated);
   const conditions = useNotificationConditions();
 
   const { activeNotifications, isLoading } = useMemo(() => {
-    // Don't show any notifications until the store has hydrated from localStorage
-    // This prevents dismissed notifications from flashing briefly on page load
-    if (!hasHydrated) {
-      return { activeNotifications: [], isLoading: true };
-    }
     const now = new Date();
     let hasLoadingCondition = false;
 
@@ -54,7 +48,6 @@ export const useActiveNotifications = (): ActiveNotificationsResult => {
         return false;
       }
 
-      // Check if dismissed
       if (dismissedIds.includes(notification.id)) {
         return false;
       }
@@ -87,7 +80,7 @@ export const useActiveNotifications = (): ActiveNotificationsResult => {
       activeNotifications: active,
       isLoading: hasLoadingCondition,
     };
-  }, [dismissedIds, conditions, hasHydrated]);
+  }, [dismissedIds, conditions]);
 
   const currentNotification = activeNotifications[0] ?? null;
   const totalCount = activeNotifications.length;