From 522df4cd13c994f85b0b0e4930f1eac114dc0792 Mon Sep 17 00:00:00 2001
From: Madhur Gupta <madhurgupta107@gmail.com>
Date: Wed, 21 Jan 2026 17:43:02 +0530
Subject: [PATCH 1/2] feat(frontend): add blog banner component

---
 frontend/app/page.tsx                      |  2 ++
 frontend/components/common/blog-banner.tsx | 40 ++++++++++++++++++++++
 frontend/components/ui/button.tsx          |  1 +
 3 files changed, 43 insertions(+)
 create mode 100644 frontend/components/common/blog-banner.tsx

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 0971a85..4364969 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,5 +1,6 @@
 import { BlockStateTracker } from '@/components/block-state-tracker'
 import { BlockTimeExecutionTracker } from '@/components/block-time-tracker'
+import { BlogBanner } from '@/components/common/blog-banner'
 import { PageHeader } from '@/components/common/page-header'
 import { SectionSeparator } from '@/components/common/section-separator'
 import { HotAccountsBubbleMap } from '@/components/hot-accounts-bubble-map'
@@ -11,6 +12,7 @@ import { CornerDecorationsContainer } from '@/components/ui/corner-decorations-c
 export default function Home() {
   return (
     <div className="min-h-screen text-white font-sans">
+      <BlogBanner />
       <main className="py-6 px-4 max-w-7xl mx-auto sm:py-8 sm:px-6 md:py-12 flex flex-col">
         {/* Sections container with continuous left/right borders */}
         <CornerDecorationsContainer className="flex flex-col gap-20 border-zinc-800">
diff --git a/frontend/components/common/blog-banner.tsx b/frontend/components/common/blog-banner.tsx
new file mode 100644
index 0000000..2cea727
--- /dev/null
+++ b/frontend/components/common/blog-banner.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { X } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { ExternalLink } from '@/components/ui/external-link'
+
+const BLOG_POST_URL = 'https://blog.monad.xyz/blog/execution-events-sdk'
+
+export function BlogBanner() {
+  const [isVisible, setIsVisible] = useState(true)
+
+  if (!isVisible) return null
+
+  return (
+    <div className="w-full bg-brand-purple-primary">
+      <div className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white relative">
+        <span>
+          To learn how this app uses Monad Execution Events SDK, check out the
+          blog post{' '}
+          <ExternalLink
+            href={BLOG_POST_URL}
+            className="underline hover:text-white/80 transition-colors"
+          >
+            here
+          </ExternalLink>
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsVisible(false)}
+          className="absolute right-2 sm:right-4 p-0"
+          aria-label="Close banner"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 80bbbb7..d7b56d3 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -9,6 +9,7 @@ const buttonVariants = cva(
       variant: {
         primary: 'rounded-md text-white btn-primary',
         secondary: 'rounded-md text-white btn-secondary',
+        ghost: 'bg-transparent hover:opacity-70 rounded',
       },
       size: {
         default: 'h-9 px-4 py-2',

From e1e74ba8c3f54bc3ab8b9aeed88351b450bd685c Mon Sep 17 00:00:00 2001
From: Madhur Gupta <madhurgupta107@gmail.com>
Date: Wed, 21 Jan 2026 17:46:32 +0530
Subject: [PATCH 2/2] fix(frontend): simplify blog banner text and add period

---
 frontend/components/common/blog-banner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/common/blog-banner.tsx b/frontend/components/common/blog-banner.tsx
index 2cea727..cdb815e 100644
--- a/frontend/components/common/blog-banner.tsx
+++ b/frontend/components/common/blog-banner.tsx
@@ -16,14 +16,14 @@ export function BlogBanner() {
     <div className="w-full bg-brand-purple-primary">
       <div className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white relative">
         <span>
-          To learn how this app uses Monad Execution Events SDK, check out the
-          blog post{' '}
+          Built with the Monad Execution Events SDK. Read the blog post{' '}
           <ExternalLink
             href={BLOG_POST_URL}
             className="underline hover:text-white/80 transition-colors"
           >
             here
           </ExternalLink>
+          .
         </span>
         <Button
           variant="ghost"