🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•
Nexus
Layout Components

Announcement Bar

Scrolling announcement banner with infinite marquee animation

Live Preview

🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•🎯 Nexus teaches Next.js from foundations to professional systems•⚡ App Router, React 19, and Tailwind v4 in one learning path•🧩 Inspect real components, layouts, and reusable patterns•🛠️ Build production discipline, not just polished demos•📚 Tracks, references, and design studies in one place•

Installation

// Copy the AnnouncementBar component from
src/components/layout/AnnouncementBar.tsx

Usage

import { AnnouncementBar } from '@/components/layout/AnnouncementBar'


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AnnouncementBar />
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  )
}

CSS Animation

The component uses CSS keyframe animation for the infinite marquee effect:

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}


.animate-marquee {
  animation: marquee 35s linear infinite;
}

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Tweak only product-specific copy or data after the first generation pass.

Props

This component has no props.

This component uses BRAND_NAME constant from lib/constants.ts

Features

  • ✓Teal background
  • ✓Infinite CSS marquee animation (35s)
  • ✓Messages duplicated 4x for seamless loop
  • ✓Bullet separators between messages
  • ✓Non-selectable text
  • ✓5 announcement messages
← Back to Layout Components