Bits&Bytes Cohorts Additions

components/ui/announcement-banner.tsx

@@ -0,0 +1,53 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { GlassContainer } from "@/components/ui/glass-container";
+
+interface AnnouncementBannerProps {
+  imageUrl: string;
+  imageAlt?: string;
+  ctaText: string;
+  ctaLink: string;
+  className?: string;
+}
+
+export function AnnouncementBanner({
+  imageUrl,
+  imageAlt = "Announcement",
+  ctaText,
+  ctaLink,
+  className,
+}: AnnouncementBannerProps) {
+  return (
+    <GlassContainer
+      containerClassName={cn("relative w-full shadow-lg", className)}
+      className="relative h-20 w-full p-0 sm:h-24 md:h-28"
+      glowColor="none"
+      animated={false}
+    >
+      <Image
+        src={imageUrl}
+        alt={imageAlt}
+        fill
+        className="object-cover object-center"
+        priority
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-black/15 to-black/40" />
+
+      <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-end p-3 sm:p-4">
+        <Button
+          asChild
+          variant="ghost"
+          className="pointer-events-auto h-10 rounded-full border border-white/35 bg-transparent px-5 text-sm font-black text-white backdrop-blur-md transition-all hover:bg-white/10 hover:text-white"
+        >
+          <Link href={ctaLink} className="inline-flex items-center gap-2">
+            {ctaText}
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+        </Button>
+      </div>
+    </GlassContainer>
+  );
+}

components/ui/hero-futuristic.tsx

@@ -18,6 +18,7 @@ const WebGLShader = dynamic(
 );
 import { Button } from "@/components/ui/button";
 import { GlassContainer } from "@/components/ui/glass-container";
+import { AnnouncementBanner } from "@/components/ui/announcement-banner";
 
 const stats = [
   { value: "200+", label: "Active members" },
@@ -68,7 +69,16 @@ export const HeroFuturistic = () => {
       <WebGLShader />
       <div className="absolute inset-0 bg-black/40 backdrop-blur-[2px]" />
 
-      <div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col gap-4 sm:gap-6 md:gap-8 lg:gap-12 px-4 pb-8 pt-20 sm:px-6 sm:pb-10 sm:pt-20 md:px-6 md:pb-16 md:pt-24 lg:pb-20 lg:pt-28 lg:flex-row lg:items-stretch lg:gap-16 box-border">
+      <div className="relative z-20 mx-auto w-full max-w-7xl px-4 sm:px-6 pt-20 sm:pt-20 lg:pt-24">
+        <AnnouncementBanner
+          imageUrl="/banners/cohorts_banner.png"
+          imageAlt="Introducing Bits&Bytes Cohorts"
+          ctaText="Apply now"
+          ctaLink="https://www.gobitsnbytes.org/join-cohort"
+        />
+      </div>
+
+      <div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col gap-4 sm:gap-6 md:gap-8 lg:gap-12 px-4 pb-8 pt-4 sm:px-6 sm:pb-10 sm:pt-6 md:px-6 md:pb-16 md:pt-8 lg:pb-20 lg:pt-10 lg:flex-row lg:items-stretch lg:gap-16 box-border">
         {/* Left content card */}
         <div className="flex-[1.2] min-w-0">
           <GlassContainer

docs/superpowers/plans/2026-04-07-announcement-banner.md

@@ -0,0 +1,133 @@
+# Announcement Banner Implementation Plan
+
+> **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 (
+    <div 
+      className={cn(
+        "relative w-full overflow-hidden rounded-2xl bg-white/5 backdrop-blur-md border border-white/10",
+        "flex flex-col sm:flex-row items-center justify-between p-4 sm:p-6 gap-4 sm:gap-6",
+        "shadow-lg",
+        className
+      )}
+    >
+      {/* Image Container - Grows to take available space */}
+      <div className="relative w-full sm:flex-1 h-16 sm:h-20 md:h-24 flex items-center justify-center sm:justify-start">
+        <Image
+          src={imageUrl}
+          alt={imageAlt}
+          fill
+          className="object-contain object-center sm:object-left"
+          priority
+        />
+      </div>
+
+      {/* CTA Button Container - Shrinks to fit content */}
+      <div className="flex-shrink-0 z-10 w-full sm:w-auto">
+        <Link
+          href={ctaLink}
+          className="flex w-full sm:w-auto items-center justify-center gap-2 whitespace-nowrap rounded-full bg-[var(--brand-pink)] px-6 py-2.5 text-sm font-black text-white transition-all hover:brightness-110 active:scale-95 shadow-md"
+        >
+          {ctaText}
+          <ArrowRight className="h-4 w-4" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **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 `<div>` 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 (
+    <>
+      <WebGLShader />
+      <div className="flex flex-col w-full max-w-full overflow-x-hidden">
+        {/* Added Announcement Banner Container */}
+        <div className="relative z-20 mx-auto w-full max-w-7xl px-4 sm:px-6 pt-24 sm:pt-28 pb-0 lg:pt-32 lg:pb-2">
+          <AnnouncementBanner
+            imageUrl="/banners/cohorts_banner.png"
+            imageAlt="Introducing Bits&Bytes Cohorts"
+            ctaText="Join Cohort"
+            ctaLink="https://www.gobitsnbytes.org/join-cohort"
+          />
+        </div>
+
+        <HeroFuturistic />
+```
+
+- [ ] **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"
+```

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 `<Button>` component or link styles with a high-contrast styling (e.g., `--brand-pink`) to stand out.
+
+## 4. Integration Details (Homepage)
+
+- **Placement**: The banner will be placed at the very top of the content in `app/page.tsx` (inside the `max-w-7xl` container, likely right before or directly inside the `HeroFuturistic` section).
+- **Z-Indexing**: It will sit organically in the document flow, rendering behind the fixed `MiniNavbar` so that it naturally scrolls up and away as the user scrolls down the page.
+- **Initial Content**:
+  - `imageUrl`: `"/banners/cohorts_banner.png"`
+  - `ctaText`: `"Join Cohort"`
+  - `ctaLink`: `"https://www.gobitsnbytes.org/join-cohort"`
+  - `imageAlt`: `"Introducing Bits&Bytes Cohorts"`