**For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Create a reusable, glassy-styled Announcement Banner component and integrate it at the top of the homepage to feature the new Cohorts graphic.
+
+**Architecture:** A standalone React server/client component (`components/ui/announcement-banner.tsx`) using Next.js `next/image` for the banner graphic and Tailwind CSS for styling. It will be imported into `app/page.tsx` and placed immediately inside the main content flow, styled to fit the site's `max-w-7xl` container and sit naturally behind the fixed navigation.
+
+**Tech Stack:** Next.js (App Router), React, Tailwind CSS, Lucide React (icons)
+
+---
+
+### Task 1: Create the AnnouncementBanner Component
+
+**Files:**
+- Create: `components/ui/announcement-banner.tsx`
+
+- [ ] **Step 1: Write the component implementation**
+
+Write the complete code for the reusable banner component. Since the project does not have automated unit tests configured (based on `package.json`), this will be visually verified.
+
+```tsx
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface AnnouncementBannerProps {
+ imageUrl: string;
+ imageAlt?: string;
+ ctaText: string;
+ ctaLink: string;
+ className?: string;
+}
+
+export function AnnouncementBanner({
+ imageUrl,
+ imageAlt = "Announcement",
+ ctaText,
+ ctaLink,
+ className,
+}: AnnouncementBannerProps) {
+ return (
+
+ {/* Image Container - Grows to take available space */}
+
+
+
+
+ {/* CTA Button Container - Shrinks to fit content */}
+
+
+ {ctaText}
+
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add components/ui/announcement-banner.tsx
+git commit -m "feat: create reusable AnnouncementBanner component"
+```
+
+---
+
+### Task 2: Integrate Banner into Homepage
+
+**Files:**
+- Modify: `app/page.tsx`
+
+- [ ] **Step 1: Import the component in `app/page.tsx`**
+
+Add the import at the top of the file, around line 17:
+
+```tsx
+import { AnnouncementBanner } from "@/components/ui/announcement-banner";
+```
+
+- [ ] **Step 2: Insert the banner into the main layout**
+
+Find the `Home` component export (around line 52) and modify the main `
` content to include the banner inside a `max-w-7xl` wrapper, directly above `HeroFuturistic`. Wait to insert it exactly here to ensure it sits behind the fixed `MiniNavbar` and lines up with the content padding:
+
+```tsx
+export default function Home() {
+ return (
+ <>
+
+
+ {/* Added Announcement Banner Container */}
+
+
+
+
+
+```
+
+- [ ] **Step 3: Run dev server to verify visually**
+
+Run: `npm run dev` or `pnpm dev`
+Expected: The banner appears at the top of the homepage content, underneath the floating header when scrolled to the top, and displays the banner image next to a right-aligned CTA button.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add app/page.tsx
+git commit -m "feat: integrate cohorts announcement banner on homepage"
+```
diff --git a/docs/superpowers/specs/2026-04-07-announcement-banner-design.md b/docs/superpowers/specs/2026-04-07-announcement-banner-design.md
new file mode 100644
index 0000000..cb8bf48
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-07-announcement-banner-design.md
@@ -0,0 +1,47 @@
+# Announcement Banner System Design
+
+## 1. Purpose and Context
+Bits&Bytes frequently hosts new cohorts, hackathons, and events. To support these ongoing announcements without rewriting code, we are implementing a reusable `AnnouncementBanner` component. This component will provide a consistent, easily updatable way to feature high-priority announcements (such as the new Bits&Bytes Cohorts) at the top of pages.
+
+## 2. Component Architecture
+
+### Component Definition
+- **File Location**: `components/ui/announcement-banner.tsx`
+- **Name**: `AnnouncementBanner`
+
+### Props Interface
+```typescript
+interface AnnouncementBannerProps {
+ /** Path or URL to the banner graphic (e.g., "/banners/cohorts_banner.png") */
+ imageUrl: string;
+ /** Accessible alt text for the image */
+ imageAlt?: string;
+ /** Text to display inside the Call-To-Action button */
+ ctaText: string;
+ /** URL the Call-To-Action button should navigate to */
+ ctaLink: string;
+ /** Optional className for overriding styles on specific pages */
+ className?: string;
+}
+```
+
+## 3. Visual Design and Layout
+
+- **Aesthetic**: The banner will utilize a "glassy" aesthetic to match the site's existing modern style (`bg-white/5`, `backdrop-blur-md`, `border border-white/10`, `rounded-2xl`).
+- **Sizing**:
+ - Width: It will span the full width of its parent container (constrained by the site's standard `max-w-7xl` wrapper).
+ - Height: Determined by the image's aspect ratio to ensure it fits perfectly (`w-full`, `h-auto`, `object-contain`).
+- **Internal Layout (Flexbox)**:
+ - The banner is a horizontal flex container (`flex-row`, `items-center`, `justify-between`).
+ - **Left / Center area**: The image will take up the primary space, vertically centered.
+ - **Right area**: The Call-To-Action (CTA) button will be aligned to the far right. The button will use the existing `