feat(frontend): add blog banner component (#80)

* feat(frontend): add blog banner component

* fix(frontend): simplify blog banner text and add period

Author: Im-Madhur-Gupta

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">

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>
+          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"
+          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>
+  )
+}

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',