Add competition section, sponsors, and hero call-to-action (#11)

- New Competition section linking the IAB × Glee competition, plus a
  Competition Organization Team block on the Organizers page.
- Sponsors section now lists Abaka AI and Contra Labs instead of TBA.
- Hero gains two flame-marked buttons (CFP, Competition) and the
  countdown moves up from the Important Dates table.
- Nav swaps the "Workshop @ NeurIPS 2026" text for the NeurIPS logo,
  trims News/Scope, adds Sponsors, and flags hot links with a flame.
- Advisory board and program committee render as a two-column list
  instead of an inline run of names; Mark Dredze added to the board.
- CFP notes that travel grants and paper awards will be available.


Claude-Session: https://claude.ai/code/session_01HRgSZXwx41gSBV4H8Uxd47

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: gaojie058

img/abaka-logo.svg

@@ -1,12 +1,17 @@
 import { Fragment, useEffect, useState } from 'react';
+import abakaLogo from '../img/abaka-logo.svg';
+import contraLabsLogo from '../img/contra-labs.png';
 import heroImage from '../img/hero.png';
+import FlameIcon from './components/FlameIcon';
 import Navigation from './components/Navigation';
 import PersonCard from './components/PersonCard';
 import TopicIcon from './components/TopicIcon';
 import { getPeopleByRole, PERSON_ROLE } from './data/peopleRepository';
 import {
   advisors,
   cfpCategories,
+  competitionTeam,
+  competitionUrl,
   ethicsNote,
   importantDates,
   neuripsReviewTrack,
@@ -38,8 +43,20 @@ function Hero() {
           <span className="venue-divider" aria-hidden="true">·</span>
           <span className="venue-location venue-location--full">International Convention Centre, Sydney, Australia</span>
           <span className="venue-location venue-location--short">ICC Sydney, Australia</span>
+          <span className="venue-divider" aria-hidden="true">·</span>
           <span className="venue-date">December 11–12, 2026</span>
         </div>
+        <div className="hero-actions">
+          <a className="hero-btn hero-btn--primary" href="#cfp">
+            <FlameIcon />
+            Call for Papers
+          </a>
+          <a className="hero-btn" href="#competition">
+            <FlameIcon />
+            Join IAB × Glee Competition
+          </a>
+        </div>
+        <Countdown variant="hero" />
       </div>
     </header>
   );
@@ -217,7 +234,6 @@ function CallForPapers() {
         </div>
 
         <h3 className="cfp-heading">Important Dates</h3>
-        <Countdown />
         <table className="dates-table">
           <tbody>
             {importantDates.map(({ label, value, key }) => (
@@ -234,6 +250,8 @@ function CallForPapers() {
           {ethicsNote.body}{' '}
           <a href={ethicsNote.url} target="_blank" rel="noopener noreferrer">{ethicsNote.linkText}</a> for details.
         </p>
+
+        <p className="lead cfp-note">Travel grants/paper awards will be available.</p>
       </div>
     </section>
   );
@@ -253,8 +271,9 @@ function timeLeft(deadline) {
   };
 }
 
-function Countdown() {
+function Countdown({ variant }) {
   const [left, setLeft] = useState(() => timeLeft(submissionDeadline));
+  const className = `countdown${variant === 'hero' ? ' countdown--hero' : ''}`;
 
   useEffect(() => {
     const timer = setInterval(() => setLeft(timeLeft(submissionDeadline)), 1000);
@@ -263,15 +282,15 @@ function Countdown() {
 
   if (!left) {
     return (
-      <div className="countdown">
+      <div className={className}>
         <div className="cd-label">Submissions are closed<strong>The deadline has passed.</strong></div>
       </div>
     );
   }
 
   return (
-    <div className="countdown">
-      <div className="cd-label">Submission deadline in<strong>{submissionDeadlineLabel}</strong></div>
+    <div className={className}>
+      <div className="cd-label">Paper submission deadline<strong>{submissionDeadlineLabel}</strong></div>
       <div className="cd-units">
         {[['Days', left.days], ['Hours', left.hours], ['Minutes', left.minutes], ['Seconds', left.seconds]].map(([unit, value]) => (
           <div className="cd-unit" key={unit}>
@@ -284,13 +303,31 @@ function Countdown() {
   );
 }
 
-function InlinePeople({ people, linked = false }) {
-  return people.map(([name, affiliation, url], index) => (
-    <span key={name}>
-      {linked && url ? <a href={url} target="_blank" rel="noopener noreferrer">{name}</a> : name} ({affiliation})
-      {index < people.length - 1 && <span aria-hidden="true"> · </span>}
-    </span>
-  ));
+function Competition() {
+  return (
+    <section id="competition">
+      <div className="container">
+        <h2>Competition</h2>
+        <p className="lead">We are preparing a community competition on interpreting agent behavior. Reports written by competition participants can be selected for presentation at the workshop. We will shortly update here on how to attend and how to present it in our workshop. Currently at a glance:</p>
+        <p className="lead"><a href={competitionUrl} target="_blank" rel="noopener noreferrer">{competitionUrl}</a></p>
+      </div>
+    </section>
+  );
+}
+
+function PeopleList({ people, linked = false }) {
+  return (
+    <ul className="people-list">
+      {people.map(([name, affiliation, url]) => (
+        <li key={name}>
+          <span className="pl-name">
+            {linked && url ? <a href={url} target="_blank" rel="noopener noreferrer">{name}</a> : name}
+          </span>
+          <span className="pl-affil">{affiliation}</span>
+        </li>
+      ))}
+    </ul>
+  );
 }
 
 function Organizers() {
@@ -304,12 +341,17 @@ function Organizers() {
         <div className="adv">
           <h3>Advisory Board</h3>
           <p className="adv-note">We thank the faculty and senior researchers who advise and support this workshop.</p>
-          <p><InlinePeople people={advisors} linked /></p>
+          <PeopleList people={advisors} linked />
+        </div>
+        <div className="adv">
+          <h3>Competition Organization Team</h3>
+          <p className="adv-note">We thank our team members who help us run the competition.</p>
+          {competitionTeam.length ? <PeopleList people={competitionTeam} linked /> : <p>To be announced</p>}
         </div>
         <div className="adv">
           <h3>Program Committee</h3>
           <p className="adv-note">We thank our program committee members from the NLP, HCI, and ML systems communities.</p>
-          <p><InlinePeople people={programCommittee} linked /></p>
+          <PeopleList people={programCommittee} linked />
         </div>
       </div>
     </section>
@@ -321,7 +363,15 @@ function Sponsors() {
     <section id="sponsors">
       <div className="container">
         <h2>Sponsors</h2>
-        <p className="muted-note">To be announced</p>
+        <p className="lead">We thank our sponsors for supporting the workshop.</p>
+        <div className="sponsor-grid">
+          <a className="sponsor-card" href="https://www.abaka.ai/" target="_blank" rel="noopener noreferrer">
+            <img src={abakaLogo} alt="Abaka AI" />
+          </a>
+          <a className="sponsor-card" href="https://contralabs.com/creative-human-data" target="_blank" rel="noopener noreferrer">
+            <img className="sponsor-logo--wordmark" src={contraLabsLogo} alt="Contra Labs" />
+          </a>
+        </div>
       </div>
     </section>
   );
@@ -348,6 +398,7 @@ export default function App() {
         <News />
         <Scope />
         <CallForPapers />
+        <Competition />
         <Speakers />
         <Schedule />
         <Organizers />

img/contra-labs.png

@@ -0,0 +1,14 @@
+export default function FlameIcon() {
+  return (
+    <svg className="flame" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path
+        className="flame-outer"
+        d="M13 1.6c.5 3.3-.9 4.7-2.6 6.6-1.9 2.1-3.4 4-3.4 6.4A6 6 0 0 0 13 20.6a6 6 0 0 0 6-6.3c0-2.8-1.5-4.7-3-6.4-.5 1.1-1.2 1.8-2.1 2 .8-2.9-.2-6-.9-8.3z"
+      />
+      <path
+        className="flame-inner"
+        d="M12.6 11.4c.4 1.7-.4 2.4-1.2 3.3-.7.8-1.1 1.5-1.1 2.3a2.7 2.7 0 0 0 2.8 2.7 2.7 2.7 0 0 0 2.7-2.8c0-1.6-1.3-2.8-3.2-5.5z"
+      />
+    </svg>
+  );
+}

img/neurips-logo.svg

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import logo from '../../img/iab-icon.svg';
+import neuripsLogo from '../../img/neurips-logo.svg';
+import FlameIcon from './FlameIcon';
 import { navLinks } from '../data/siteData';
 
 export default function Navigation() {
@@ -11,7 +13,7 @@ export default function Navigation() {
         <a className="nav-logo" href="#top" onClick={() => setIsOpen(false)}>
           <img className="logo-mark" src={logo} alt="" />
           IAB
-          <span>Workshop @ NeurIPS 2026</span>
+          <img className="neurips-mark" src={neuripsLogo} alt="Workshop at NeurIPS 2026" title="Workshop @ NeurIPS 2026" />
         </a>
         <button
           className={`nav-toggle${isOpen ? ' open' : ''}`}
@@ -26,8 +28,11 @@ export default function Navigation() {
           <span />
         </button>
         <div id="main-navigation-links" className={`nav-links${isOpen ? ' open' : ''}`}>
-          {navLinks.map(([label, id]) => (
-            <a key={id} href={`#${id}`} onClick={() => setIsOpen(false)}>{label}</a>
+          {navLinks.map(([label, id, hot]) => (
+            <a key={id} href={`#${id}`} className={hot ? 'hot' : undefined} onClick={() => setIsOpen(false)}>
+              {hot && <FlameIcon />}
+              {label}
+            </a>
           ))}
         </div>
       </div>

src/App.jsx

@@ -1,11 +1,12 @@
+// A third element marks the link as hot; the nav renders a flame before the label.
 export const navLinks = [
   ['About', 'about'],
-  ['News', 'news'],
-  ['Scope', 'topics'],
-  ['Call for Papers', 'cfp'],
+  ['Call for Papers', 'cfp', true],
+  ['Competition', 'competition', true],
   ['Speakers', 'speakers'],
   ['Schedule', 'schedule'],
   ['Organizers', 'organizers'],
+  ['Sponsors', 'sponsors'],
 ];
 
 export const speakerSection = Object.freeze({
@@ -135,6 +136,8 @@ export const submissionFormats = [
 
 export const openReviewUrl = 'https://openreview.net/group?id=NeurIPS.cc/2026/Workshop/IAB';
 
+export const competitionUrl = 'https://glee-competition.com/';
+
 export const neuripsReviewTrack = {
   title: 'Submission with NeurIPS reviews',
   intro: 'If your paper was reviewed at NeurIPS 2026, you can submit it here together with the reviews and your response. This is a second route into the workshop.',
@@ -166,6 +169,7 @@ export const ethicsNote = {
 
 export const advisors = [
   ['Ziang Xiao', 'Johns Hopkins University', 'https://www.cs.jhu.edu/faculty/ziang-xiao/'],
+  ['Mark Dredze', 'Johns Hopkins University', 'https://www.cs.jhu.edu/~mdredze/'],
   ['Toby Jia-Jun Li', 'Notre Dame', 'https://toby.li/'],
   ['Weiyan Shi', 'Northeastern', 'https://wyshi.github.io/'],
   ['Fan Bai', 'Bloomberg AI', 'https://bflashcp3f.github.io/'],
@@ -174,6 +178,13 @@ export const advisors = [
   ['Samuel Nathanson', 'xAI', 'https://www.linkedin.com/in/nathanson/'],
 ];
 
+export const competitionTeam = [
+  ['Eilam Shapira', 'Technion', 'https://eilamshapira.com/'],
+  ['Omer Madmon', 'Technion', 'https://sites.google.com/view/omer-madmon'],
+  ['Moshe Tennenholtz', 'Technion', 'https://moshet.net.technion.ac.il/'],
+  ['Roi Reichart', 'Technion', 'https://roireichart.com/'],
+];
+
 export const programCommittee = [
   ['Boyang Li', 'Kean University', 'https://www.liboyang.org/'],
   ['Lin Zhang', 'JHU', 'https://zlin0.github.io/'],