fix: move BMB announcement to custom Banner component (#23)

Starlight banner config doesn't render with custom Header. Added
announcement row to Banner.astro and removed unused config.

Author: bmadcode

website/astro.config.mjs

@@ -41,10 +41,6 @@ export default defineConfig({
       title: 'Creative Intelligence Suite',
       tagline: 'Innovation, brainstorming, and problem-solving agents for the BMad Method.',
 
-      banner: {
-        content: 'Build your own BMad modules and share them with the community! <a href="https://bmad-builder-docs.bmad-method.org/tutorials/build-your-first-module/">Get started</a> or <a href="https://bmad-builder-docs.bmad-method.org/how-to/distribute-your-module/">submit to the marketplace</a>.',
-      },
-
       favicon: '/favicon.ico',
 
       // Social links

website/src/components/Banner.astro

@@ -7,9 +7,13 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
 <div class="ai-banner">
   <span>🤖 AI-optimized docs: <a href={llmsFullUrl}>llms-full.txt</a></span>
 </div>
+<div class="announce-banner">
+  <span>🚀 Build your own BMad modules and share them with the community! <a href="https://bmad-builder-docs.bmad-method.org/tutorials/build-your-first-module/">Get started</a> or <a href="https://bmad-builder-docs.bmad-method.org/how-to/distribute-your-module/">submit to the marketplace</a>.</span>
+</div>
 
 <style>
-  .ai-banner {
+  .ai-banner,
+  .announce-banner {
     width: 100vw;
     margin-left: calc(-50vw + 50%);
     height: var(--ai-banner-height, 2.75rem);
@@ -25,31 +29,41 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
     font-family: 'Inter', system-ui, sans-serif;
   }
 
-  .ai-banner span {
+  .ai-banner span,
+  .announce-banner span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
   }
-  .ai-banner a {
+  .ai-banner a,
+  .announce-banner a {
     color: #3b82f6;
     text-decoration: none;
     font-weight: 600;
   }
-  .ai-banner a:hover {
+  .ai-banner a:hover,
+  .announce-banner a:hover {
     color: #fafafa;
     text-decoration: underline;
   }
 
+  .announce-banner {
+    background: #1a2332;
+    border-bottom: 1px solid #1e3a5f;
+  }
+
   @media (min-width: 50rem) {
-    .ai-banner {
+    .ai-banner,
+    .announce-banner {
       padding-left: 2.5rem;
       padding-right: 2.5rem;
     }
   }
 
   @media (min-width: 72rem) {
-    .ai-banner {
+    .ai-banner,
+    .announce-banner {
       padding-left: 3rem;
       padding-right: 3rem;
     }