feat: update website header with new BMAD Method branding (#1352)

* docs: apply style guide to TEA Lite quickstart

- Remove duplicate H1 header (frontmatter provides title)
- Remove horizontal rules throughout
- Convert Prerequisites to admonition
- Add Quick Path TL;DR admonition
- Convert Key Takeaway to tip admonition
- Convert TEA Workflows list to Quick Reference table
- Convert Troubleshooting to Common Questions FAQ format
- Rename Need Help to Getting Help section
- Remove redundant Feedback section

Also adds missing @clack/prompts dependency from upstream merge.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* docs: spell out acronyms in TEA Lite quickstart

- MCP → Model Context Protocol
- E2E → End-to-end (also fix missing article)
- CI/CD → Continuous integration/continuous deployment
- ATDD → Acceptance Test-Driven Development
- TDD → Test-Driven Development
- NFR → non-functional requirements
- Remove inaccurate CRUD reference

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* docs: spell out TDD in ATDD link text

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: update branding with new wordmark logo and banner

- Add banner image to README header
- Replace website logo with wordmark, hiding title text
- Left-align logo with sidebar by reducing header padding

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* docs: update README banner to new design with waveform

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add banner to docs website welcome page

- Revert README to original banner
- Add waveform banner to docs site welcome page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: use waveform banner as website header logo

- Remove banner from welcome page content
- Update header logo to use banner-bmad-method2.png

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add separate logo for dark mode

Use banner-bmad-method-dark.png in dark mode for better blending

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: update header logos for light and dark modes

- Light mode: bmad-light.png (dark blue background with lightning)
- Dark mode: bmad-dark.png (light background variant)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* chore: clean up unused banner images and add readme2

- Remove unused banner-bmad-method2.png and bmad-wordmark.png
- Add readme2.md with upcoming features section
- Update banner-bmad-method-dark.png

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* chore: remove unused banner image variants

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: finalize header logo graphics

- Rename bmad-light2.png to bmad-light.png as final version
- Remove readme2.md draft

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Brian <bmadcode@gmail.com>

README.md

@@ -1,4 +1,4 @@
-# BMad Method
+![BMad Method](banner-bmad-method.png)
 
 [![Version](https://img.shields.io/npm/v/bmad-method?color=blue&label=version)](https://www.npmjs.com/package/bmad-method)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

docs/tutorials/getting-started/tea-lite-quickstart.md

@@ -13,17 +13,15 @@ By the end of this 30-minute tutorial, you'll have:
 - Passing tests for an existing demo app feature
 
 :::note[Prerequisites]
-- Node.js installed (v18 or later)
+- Node.js installed (v20 or later)
 - 30 minutes of focused time
-
+- We'll use TodoMVC (<https://todomvc.com/examples/react/>) as our demo app
-- We'll use TodoMVC (<https://todomvc.com/examples/react/dist/>) as our demo app
 :::
 
 :::tip[Quick Path]
 Load TEA (`*tea`) → scaffold framework (`*framework`) → create test plan (`*test-design`) → generate tests (`*automate`) → run with `npx playwright test`.
 :::
 
-
 ## TEA Approaches Explained
 
 Before we start, understand the three ways to use TEA:

website/astro.config.mjs

@@ -38,8 +38,10 @@ export default defineConfig({
       tagline: 'AI-driven agile development with specialized agents and workflows that scale from bug fixes to enterprise platforms.',
 
       logo: {
-        src: './public/img/logo.svg',
+        light: './public/img/bmad-light.png',
-        alt: 'BMAD Logo',
+        dark: './public/img/bmad-dark.png',
+        alt: 'BMAD Method',
+        replacesTitle: true,
       },
       favicon: '/favicon.ico',
 

website/src/styles/custom.css

@@ -222,6 +222,8 @@ header.header .header.sl-flex {
 
 .site-title {
   font-weight: 700;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 /* Logo sizing - constrain to reasonable size */
@@ -470,14 +472,14 @@ footer {
 /* Responsive padding on navbar row only - banner stays full-width */
 @media (min-width: 50rem) {
   header.header .header.sl-flex {
-    padding-left: 2.5rem;
+    padding-left: 1rem;
     padding-right: 2.5rem;
   }
 }
 
 @media (min-width: 72rem) {
   header.header .header.sl-flex {
-    padding-left: 3rem;
+    padding-left: 1rem;
     padding-right: 3rem;
   }
 }