Add Office Space gallery page with all 23 images

- Create gallery.mdx showcasing all Office Space images organized by scene
- Add Cinema Enthusiast flair badge for gallery visitors
- Create cinema.svg badge (film reel design)
- Update flair count to 13 badges
- Add gallery to sidebar navigation with "New" badge

Features Peter, Lumbergh, The Bobs, the printer destruction scene,
Milton's stapler, Chotchkie's flair, and more iconic moments.

astro.config.mjs

@@ -99,6 +99,7 @@ export default defineConfig({
 				{
 					label: 'Community',
 					items: [
+						{ label: 'The Gallery', slug: 'community/gallery', badge: { text: 'New', variant: 'success' } },
 						{ label: 'Feedback', slug: 'community/feedback' },
 						{ label: 'Flair Leaderboard', slug: 'community/leaderboard' },
 						{ label: 'Credits', slug: 'community/credits' },

public/flair/cinema.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="filmGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e"/>
+      <stop offset="100%" style="stop-color:#16213e"/>
+    </linearGradient>
+    <linearGradient id="reelGold" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f59e0b"/>
+      <stop offset="100%" style="stop-color:#d97706"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Badge background -->
+  <circle cx="50" cy="50" r="48" fill="url(#filmGradient)" stroke="#f59e0b" stroke-width="3"/>
+
+  <!-- Film reel -->
+  <circle cx="50" cy="50" r="30" fill="none" stroke="url(#reelGold)" stroke-width="4"/>
+  <circle cx="50" cy="50" r="8" fill="url(#reelGold)"/>
+
+  <!-- Film reel holes -->
+  <circle cx="50" cy="28" r="5" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="2"/>
+  <circle cx="50" cy="72" r="5" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="2"/>
+  <circle cx="28" cy="50" r="5" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="2"/>
+  <circle cx="72" cy="50" r="5" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="2"/>
+
+  <!-- Diagonal holes -->
+  <circle cx="34.5" cy="34.5" r="4" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="1.5"/>
+  <circle cx="65.5" cy="34.5" r="4" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="1.5"/>
+  <circle cx="34.5" cy="65.5" r="4" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="1.5"/>
+  <circle cx="65.5" cy="65.5" r="4" fill="#1a1a2e" stroke="url(#reelGold)" stroke-width="1.5"/>
+
+  <!-- Film strip accents -->
+  <rect x="10" y="85" width="8" height="6" rx="1" fill="url(#reelGold)" opacity="0.8"/>
+  <rect x="22" y="85" width="8" height="6" rx="1" fill="url(#reelGold)" opacity="0.8"/>
+  <rect x="70" y="85" width="8" height="6" rx="1" fill="url(#reelGold)" opacity="0.8"/>
+  <rect x="82" y="85" width="8" height="6" rx="1" fill="url(#reelGold)" opacity="0.8"/>
+</svg>

src/content/docs/community/gallery.mdx

@@ -0,0 +1,212 @@
+---
+title: The Gallery
+description: A tribute to the film that inspired it all.
+---
+
+import { Aside, Card, CardGrid } from '@astrojs/starlight/components';
+
+> *"I'd say in a given week I probably only do about fifteen minutes of real, actual work."*
+
+Welcome to the mcwaddams gallery — a loving tribute to Office Space (1999), the film that understands corporate life better than any management consultant ever could.
+
+---
+
+## The Initech Crew
+
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
+
+<div style="text-align: center;">
+  <img src="/Peter.webp" alt="Peter Gibbons" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"I did nothing. I did absolutely nothing, and it was everything I thought it could be."</p>
+  <small>Peter Gibbons</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/peter-zen.webp" alt="Peter in his zen state" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"I don't like my job, and I don't think I'm gonna go anymore."</p>
+  <small>Post-hypnotherapy Peter</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/Peter-Computing-Surprised.webp" alt="Peter surprised at computer" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"I have eight different bosses right now."</p>
+  <small>The moment of realization</small>
+</div>
+
+</div>
+
+---
+
+## Management
+
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
+
+<div style="text-align: center;">
+  <img src="/Peter-Lumberg-At-Cubicle.webp" alt="Lumbergh at Peter's cubicle" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Yeahhh, I'm gonna need you to come in on Saturday..."</p>
+  <small>Bill Lumbergh</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/TheBobs.webp" alt="The Bobs" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"What would you say... you do here?"</p>
+  <small>The Bobs — efficiency experts</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/management-disapproval.webp" alt="Management disapproval" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"We're gonna have to go ahead and move you downstairs into Storage B."</p>
+  <small>The look of corporate disappointment</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/Lumbergh-cake-sign.webp" alt="Lumbergh with cake sign" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Hello Peter, what's happening?"</p>
+  <small>Passive-aggressive celebration</small>
+</div>
+
+</div>
+
+---
+
+## The Iconic Scenes
+
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
+
+<div style="text-align: center;">
+  <img src="/Printer.webp" alt="The printer destruction scene" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"PC LOAD LETTER? What the f*** does that mean?!"</p>
+  <small>The printer gets what it deserves</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/stapler-theft.webp" alt="Milton's stapler" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"I believe you have my stapler..."</p>
+  <small>The red Swingline</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/Ohface.webp" alt="The O-Face" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"O-O-O-OHHHHH!"</p>
+  <small>Drew's... moment</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/Cakepass.webp" alt="The cake scene" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Milton, we're gonna need you to move your desk again..."</p>
+  <small>Another office milestone ignored</small>
+</div>
+
+</div>
+
+---
+
+## Chotchkie's & The Flair
+
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
+
+<div style="text-align: center;">
+  <img src="/Stan.webp" alt="Stan the manager" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"We need to talk about your flair."</p>
+  <small>Stan — the flair enforcer</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/box-of-flair.webp" alt="Box of flair" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"You know, the Nazis had pieces of flair they made the Jews wear."</p>
+  <small>The official flair collection</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/fu-Flair.webp" alt="Joanna's statement" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"There's my flair."</p>
+  <small>Joanna's final day at Chotchkie's</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/chotchkies-logo.webp" alt="Chotchkie's logo" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Sounds like somebody's got a case of the Mondays."</p>
+  <small>Where dreams go to die</small>
+</div>
+
+</div>
+
+---
+
+## The Supporting Cast
+
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
+
+<div style="text-align: center;">
+  <img src="/Lawrence.webp" alt="Lawrence" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Hey Peter, man, check out Channel 9!"</p>
+  <small>Lawrence — the neighbor</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/Lawrence-couch.webp" alt="Lawrence on the couch" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Two chicks at the same time, man."</p>
+  <small>Lawrence's dream</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/Nina.webp" alt="Nina" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Uh-oh. Sounds like somebody's got a case of the Mondays."</p>
+  <small>Nina — the cheerful coworker</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/peter-hard-hat-samir-michael-GroupPic.webp" alt="Peter, Samir, and Michael Bolton" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Why should I change? He's the one who sucks."</p>
+  <small>The crew at work</small>
+</div>
+
+</div>
+
+---
+
+## Initech
+
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
+
+<div style="text-align: center;">
+  <img src="/Initech.webp" alt="Initech building" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Corporate accounts payable, Nina speaking. Just a moment."</p>
+  <small>Initech — where TPS reports are born</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/peter-initech-sign.webp" alt="Peter arriving at Initech" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"Every single day of my life has been worse than the day before it."</p>
+  <small>Another day at Initech</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/empty-office.webp" alt="Empty Initech office" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"I'd like to move us right along to a Peter Gibbons."</p>
+  <small>The cubicle farm</small>
+</div>
+
+<div style="text-align: center;">
+  <img src="/burned-stapler-recover.webp" alt="Milton's stapler recovered" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
+  <p style="margin-top: 0.5rem; font-style: italic;">"I could set the building on fire..."</p>
+  <small>The stapler survived</small>
+</div>
+
+</div>
+
+---
+
+<Aside type="note" title="Attribution">
+All images are from Office Space (1999), directed by Mike Judge. Copyright © 20th Century Fox. Used for educational and tribute purposes. mcwaddams is not affiliated with 20th Century Fox.
+</Aside>
+
+<div style="text-align: center; margin-top: 2rem; font-style: italic; opacity: 0.7;">
+
+*"I don't like my job, and I don't think I'm gonna go anymore."*
+
+<br/>
+
+<small>— Peter Gibbons, speaking for all of us</small>
+
+</div>

src/content/docs/community/leaderboard.mdx

@@ -19,7 +19,7 @@ We don't require 37 pieces of flair like Brian. Just the minimum — but we enco
 
 Click the **flair counter** in the bottom-right corner of any page to see your collection. Badges are earned by spending 15+ seconds reading each page.
 
-## Available Flair (12 Badges)
+## Available Flair (13 Badges)
 
 <CardGrid>
   <Card title="📄 I Was Told There Would Be Extraction" icon="document">
@@ -58,13 +58,16 @@ Click the **flair counter** in the bottom-right corner of any page to see your c
   <Card title="🎖️ 37 Pieces of Flair" icon="external">
     Discover the flair leaderboard
   </Card>
+  <Card title="🎬 Cinema Enthusiast" icon="star">
+    Explore the Office Space gallery
+  </Card>
 </CardGrid>
 
 ---
 
 ## The Goal
 
-Collect all 12 pieces of flair. Brian from accounting has 37, but we only ask for the minimum.
+Collect all 13 pieces of flair. Brian from accounting has 37, but we only ask for the minimum.
 
 <Aside type="tip" title="Persistence">
 Your flair collection is stored in localStorage — it persists across sessions but stays on your device.

src/data/flair-config.json

@@ -97,6 +97,14 @@
       "placeholder": "🎖️",
       "image": "/flair/flair-badge.svg",
       "description": "Discovered the flair leaderboard"
+    },
+    {
+      "id": "gallery",
+      "path": "/community/gallery/",
+      "name": "Cinema Enthusiast",
+      "placeholder": "🎬",
+      "image": "/flair/cinema.svg",
+      "description": "Explored the Office Space gallery"
     }
   ],
   "completionMessage": "You've got more than the minimum 15 pieces of flair!",