From 331b927bb1cc705ddbf7dc6d5a4e11fdb9904e88 Mon Sep 17 00:00:00 2001
From: geoxhacker <mukisageophrey@gmail.com>
Date: Sat, 5 Sep 2026 12:11:40 +0000
Subject: [PATCH 1/3] feat(hero): embed JSK Dev Quiz Night 2026 recap YouTube
 video

---
 app/page.tsx | 90 ++++++++++++++++++++++++++++------------------------
 1 file changed, 48 insertions(+), 42 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 9f21779..7d9778b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,37 +5,26 @@ import Link from 'next/link';
 import {
   ArrowRight, Calendar, Zap, Github, CheckCircle, Ticket, MapPin,
   Terminal, Activity, Users, Monitor, Play,
-  Star, GitFork
+  Star, GitFork, X
 } from 'lucide-react';
 import { Button, Section, Card, Heading, Badge } from '../components/UI';
 import { EVENTS, BLOG_POSTS, SPONSORS, PROJECTS } from '../data';
 import SponsorsComponent from '@/components/sponsers';
 
 const HeroVideo = () => {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
 
-  const togglePlayback = () => {
-    const video = videoRef.current;
-    if (!video) return;
-    if (video.paused) {
-      video.play().catch(() => {}); // handle autoplay block gracefully
-    } else {
-      video.pause();
-    }
-  };
-
   return (
     <div className="w-full h-full bg-[#050505] relative flex flex-col overflow-hidden border-l border-gray-800 my-4">
       {/* Header bar – slightly more compact on mobile */}
       <div className="h-14 sm:h-16 border-b border-gray-800 bg-[#0a0a0a] flex items-center justify-between px-4 sm:px-6 relative z-20">
         <div className="flex flex-col">
           <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest mb-0.5">Spotlight</span>
-          <div className="text-xs font-mono uppercase tracking-widest text-js-yellow">Community Reel</div>
+          <div className="text-xs font-mono uppercase tracking-widest text-js-yellow">JSK Dev Quiz Night Recap</div>
         </div>
         <div className="text-right hidden xs:block">
-          <div className="text-[10px] font-mono text-gray-500 uppercase tracking-widest mb-0.5">Runtime</div>
-          <div className="text-js-yellow font-bold font-mono text-sm">02:34</div>
+          <div className="text-[10px] font-mono text-gray-500 uppercase tracking-widest mb-0.5">Source</div>
+          <div className="text-js-yellow font-bold font-mono text-sm">YouTube</div>
         </div>
       </div>
 
@@ -43,44 +32,61 @@ const HeroVideo = () => {
       <div className="grow relative bg-[#080808] flex items-center justify-center p-3 sm:p-4 lg:p-6 h-125">
         <div className="absolute inset-0 z-30 flex items-center justify-center bg-black/70 backdrop-blur-sm">
           <div className="w-full max-w-[min(94%,1200px)] mx-auto h-full sm:h-auto aspect-[9/16] xs:aspect-[4/5] sm:aspect-video bg-[#0b0b0b] border border-gray-800 shadow-[0_0_60px_rgba(247,223,30,0.12)] relative overflow-hidden">
-            {/* Video wrapper with gradient overlay */}
-            <div className="relative w-full h-full">
-              <video
-                ref={videoRef}
-                className="absolute inset-0 w-full h-full object-cover"
- src="/web-api/iframe-proxy?url=https://github.com/test-video.mp4"
-                preload="metadata"
-                playsInline
-                muted
-                onPlay={() => setIsPlaying(true)}
-                onPause={() => setIsPlaying(false)}
-                onClick={togglePlayback}
-              />
-              <div className="absolute inset-0 bg-linear-to-br from-black/55 via-transparent to-black/75 pointer-events-none" />
+            {isPlaying ? (
+              <div className="relative w-full h-full">
+                <iframe
+                  className="w-full h-full absolute inset-0 border-0"
+ src="/web-api/iframe-proxy?url=https://www.youtube-nocookie.com/embed/YH0t-0MbSoI?autoplay=1&rel=0&modestbranding=1"
+                  title="JSK Dev Quiz Night 2026 Recap"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                />
+                <button
+                  type="button"
+                  onClick={() => setIsPlaying(false)}
+                  className="absolute top-3 right-3 z-40 bg-black/80 hover:bg-js-yellow hover:text-black text-white p-1.5 border border-gray-800 text-xs transition-colors"
+                  aria-label="Close video player"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+            ) : (
+              <div className="relative w-full h-full group">
+                <img
+                  className="absolute inset-0 w-full h-full object-cover brightness-85 group-hover:scale-105 transition-transform duration-500"
+ src="/web-api/iframe-proxy?url=https://i.ytimg.com/vi/YH0t-0MbSoI/maxresdefault.jpg"
+                  alt="JSK Dev Quiz Night 2026 Recap"
+                  loading="lazy"
+                />
+                <div className="absolute inset-0 bg-linear-to-br from-black/55 via-transparent to-black/75 pointer-events-none" />
 
-              {!isPlaying && (
                 <button
-                  className="absolute inset-0 flex flex-col items-center justify-center group touch-manipulation"
-                  aria-label="Play community reel"
-                  onClick={togglePlayback}
+                  type="button"
+                  className="absolute inset-0 flex flex-col items-center justify-center group touch-manipulation cursor-pointer"
+                  aria-label="Play JSK Dev Quiz Night recap"
+                  onClick={() => setIsPlaying(true)}
                 >
                   <div className="w-20 h-20 xs:w-24 xs:h-24 sm:w-28 sm:h-28 bg-js-yellow rounded-full flex items-center justify-center shadow-[0_0_50px_rgba(247,223,30,0.4)] group-hover:scale-105 group-active:scale-95 transition-transform duration-200">
                     <Play size={40} className="text-black ml-1.5 fill-black xs:size-12 sm:size-[52px]" />
                   </div>
                   <div className="mt-5 xs:mt-6 text-js-yellow font-mono text-xs xs:text-sm uppercase tracking-[0.3em] text-center px-5 sm:px-0">
-                    Watch The Network
+                    Watch Recap Video
                   </div>
                 </button>
-              )}
-            </div>
 
-            <div className="absolute left-0 right-0 bottom-0 px-4 sm:px-6 py-3.5 sm:py-4 border-t border-gray-800 flex items-center justify-between bg-black/65 backdrop-blur-md">
-              <div>
-                <div className="text-white font-black uppercase tracking-widest text-sm sm:text-base">Kampala JS</div>
-                <div className="text-gray-400 text-[11px] sm:text-xs font-mono uppercase tracking-widest mt-0.5">Community Reel</div>
+                <div className="absolute left-0 right-0 bottom-0 px-4 sm:px-6 py-3.5 sm:py-4 border-t border-gray-800 flex items-center justify-between bg-black/65 backdrop-blur-md">
+                  <div>
+                    <div className="text-white font-black uppercase tracking-widest text-sm sm:text-base">
+                      JSK Dev Quiz Night
+                    </div>
+                    <div className="text-gray-400 text-[11px] sm:text-xs font-mono uppercase tracking-widest mt-0.5">
+                      2026 Community Recap
+                    </div>
+                  </div>
+                  <Badge color="yellow">FEATURED</Badge>
+                </div>
               </div>
-              <Badge color="yellow">FEATURED</Badge>
-            </div>
+            )}
           </div>
         </div>
       </div>

From 43cc595593d86797ada544894ebc18591ddad32e Mon Sep 17 00:00:00 2001
From: geoxhacker <mukisageophrey@gmail.com>
Date: Sat, 5 Sep 2026 12:47:45 +0000
Subject: [PATCH 2/3] feat(events): add Kampala Coders' Cup 2026 event and
 dynamic detail page

---
 app/events/[slug]/page.tsx | 363 +++++++++++++++++++++++++++++++++++++
 app/events/page.tsx        |  55 ++++--
 app/page.tsx               |  22 ++-
 data.ts                    |  82 ++++++++-
 types.ts                   |  20 ++
 5 files changed, 520 insertions(+), 22 deletions(-)
 create mode 100644 app/events/[slug]/page.tsx

diff --git a/app/events/[slug]/page.tsx b/app/events/[slug]/page.tsx
new file mode 100644
index 0000000..b303ed7
--- /dev/null
+++ b/app/events/[slug]/page.tsx
@@ -0,0 +1,363 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { Section, Badge, Button } from '../../../components/UI';
+import { EVENTS } from '../../../data';
+import {
+  ArrowLeft, Calendar, Clock, MapPin, Ticket, ShieldAlert,
+  Swords, Trophy, Users, ExternalLink, AlertTriangle
+} from 'lucide-react';
+
+interface EventPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function EventDetailPage({ params }: EventPageProps) {
+  const { slug } = await params;
+  const event = EVENTS.find((e) => e.slug === slug);
+
+  if (!event) {
+    notFound();
+  }
+
+  const isTournament = Boolean(event.rules && event.rules.length > 0);
+
+  return (
+    <article className="min-h-screen bg-js-black text-white">
+      {/* Hero Banner */}
+      <div className="bg-[#060606] border-b border-gray-800 pt-28 sm:pt-32 pb-16 relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-96 h-96 bg-js-yellow/5 rounded-full blur-3xl pointer-events-none" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(247,223,30,0.06),transparent_50%)] pointer-events-none" />
+
+        <Section noPadding>
+          <div className="max-w-5xl mx-auto px-4 sm:px-6">
+            <Link
+ href="/web-api/iframe-proxy?url=https://github.com/events"
+              className="inline-flex items-center text-gray-400 hover:text-js-yellow mb-8 text-xs uppercase tracking-widest font-mono font-bold border border-gray-800 px-4 py-2 hover:border-js-yellow transition-colors bg-black/60 backdrop-blur-sm"
+            >
+              <ArrowLeft size={14} className="mr-2" /> All Events
+            </Link>
+
+            <div className="flex flex-wrap items-center gap-2.5 mb-6">
+              <Badge color="yellow">{event.status === 'upcoming' ? 'Upcoming Event' : 'Past Event'}</Badge>
+              {isTournament && (
+                <span className="bg-red-500/10 border border-red-500/40 text-red-400 text-[10px] font-black uppercase tracking-widest px-2.5 py-1 flex items-center gap-1.5">
+                  <Swords size={12} /> Live 1v1 Knockout
+                </span>
+              )}
+              {event.tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="border border-gray-800 text-gray-400 text-[10px] px-2 py-1 uppercase font-mono tracking-widest bg-black/40"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+
+            <h1 className="text-3xl sm:text-5xl lg:text-6xl font-black text-white uppercase leading-[0.95] tracking-tight mb-8">
+              {event.title}
+            </h1>
+
+            <p className="text-gray-300 text-base sm:text-lg font-light leading-relaxed max-w-3xl mb-10 border-l-2 border-js-yellow pl-5">
+              {event.description}
+            </p>
+
+            {/* Quick Metadata Bar */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 border-t border-gray-800 pt-8 font-mono">
+              <div className="flex items-center gap-3 bg-[#0c0c0c] border border-gray-800/80 p-4">
+                <div className="w-10 h-10 bg-js-yellow/10 border border-js-yellow/30 flex items-center justify-center text-js-yellow shrink-0">
+                  <Calendar size={18} />
+                </div>
+                <div>
+                  <div className="text-[10px] uppercase tracking-widest text-gray-500">Date</div>
+                  <div className="text-sm font-bold text-white">
+                    {new Date(event.date).toLocaleDateString('en-UG', {
+                      weekday: 'short',
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric',
+                      timeZone: 'Africa/Kampala'
+                    })}
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3 bg-[#0c0c0c] border border-gray-800/80 p-4">
+                <div className="w-10 h-10 bg-js-yellow/10 border border-js-yellow/30 flex items-center justify-center text-js-yellow shrink-0">
+                  <Clock size={18} />
+                </div>
+                <div>
+                  <div className="text-[10px] uppercase tracking-widest text-gray-500">Time</div>
+                  <div className="text-sm font-bold text-white">{event.time} EAT</div>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3 bg-[#0c0c0c] border border-gray-800/80 p-4 sm:col-span-2 lg:col-span-1">
+                <div className="w-10 h-10 bg-js-yellow/10 border border-js-yellow/30 flex items-center justify-center text-js-yellow shrink-0">
+                  <MapPin size={18} />
+                </div>
+                <div>
+                  <div className="text-[10px] uppercase tracking-widest text-gray-500">Venue</div>
+                  <div className="text-sm font-bold text-white">{event.venue}</div>
+                  <div className="text-xs text-gray-400">{event.address}</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            {event.ticketsUrl && (
+              <div className="flex flex-wrap items-center gap-4 mt-8 pt-4">
+                <Button href={event.ticketsUrl} icon={Ticket} className="text-sm font-black px-8 py-4">
+                  Get Free Spectator Pass
+                </Button>
+                {event.videoUrl && (
+                  <a
+                    href={event.videoUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 border border-gray-700 bg-black/60 hover:border-js-yellow hover:text-js-yellow text-white px-6 py-4 text-xs font-mono uppercase tracking-widest transition-colors"
+                  >
+                    Format Demo Video <ExternalLink size={14} />
+                  </a>
+                )}
+              </div>
+            )}
+          </div>
+        </Section>
+      </div>
+
+      <Section className="max-w-5xl mx-auto py-16 px-4 sm:px-6">
+        <div className="space-y-16">
+          {/* Rules & Integrity Policy (Special for Tournament) */}
+          {event.rules && event.rules.length > 0 && (
+            <div>
+              <div className="flex items-center gap-3 mb-3">
+                <ShieldAlert size={22} className="text-js-yellow" />
+                <h2 className="text-2xl sm:text-3xl font-black uppercase tracking-tight">
+                  Tournament Rules &amp; Battle Code
+                </h2>
+              </div>
+              <p className="text-gray-400 text-sm font-mono uppercase tracking-wider mb-8">
+                Strict adherence is required for all competitors. Violations lead to immediate disqualification.
+              </p>
+
+              <div className="grid sm:grid-cols-2 gap-6">
+                {event.rules.map((rule, idx) => (
+                  <div
+                    key={rule.title}
+                    className={`p-6 border ${
+                      idx === 1
+                        ? 'border-red-500/50 bg-red-950/10 shadow-[0_0_25px_rgba(239,68,68,0.1)]'
+                        : 'border-gray-800 bg-[#0c0c0c]'
+                    } flex flex-col justify-between`}
+                  >
+                    <div>
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-[10px] font-mono uppercase tracking-widest text-js-yellow font-bold">
+                          Rule #{idx + 1}
+                        </span>
+                        {rule.highlight && (
+                          <span
+                            className={`text-[10px] font-mono uppercase font-black px-2 py-0.5 ${
+                              idx === 1 ? 'bg-red-500 text-black' : 'bg-js-yellow text-black'
+                            }`}
+                          >
+                            {rule.highlight}
+                          </span>
+                        )}
+                      </div>
+                      <h3 className="text-lg font-black text-white uppercase tracking-tight mb-2">
+                        {rule.title}
+                      </h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        {rule.description}
+                      </p>
+                    </div>
+
+                    {idx === 1 && (
+                      <div className="mt-4 pt-3 border-t border-red-500/30 flex items-center gap-2 text-red-400 text-xs font-mono">
+                        <AlertTriangle size={14} /> Zero tolerance: AI tools disabled on all devices.
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Knockout Bracket Visualizer */}
+          {event.bracket && event.bracket.length > 0 && (
+            <div className="border border-gray-800 bg-[#080808] p-6 sm:p-8">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 border-b border-gray-800 pb-6">
+                <div>
+                  <div className="text-[10px] font-mono text-js-yellow uppercase tracking-widest mb-1 flex items-center gap-1.5">
+                    <Trophy size={14} /> Championship Pathway
+                  </div>
+                  <h2 className="text-2xl sm:text-3xl font-black uppercase tracking-tight">
+                    Knockout Tournament Tree
+                  </h2>
+                </div>
+                <div className="text-xs font-mono text-gray-500 uppercase tracking-widest">
+                  8 Coders &bull; Single Elimination
+                </div>
+              </div>
+
+              {/* Bracket Grid */}
+              <div className="grid lg:grid-cols-3 gap-6 font-mono text-xs">
+                {/* Quarterfinals */}
+                <div className="space-y-4">
+                  <div className="text-[11px] font-bold text-gray-400 uppercase tracking-widest border-b border-gray-800 pb-2">
+                    Quarterfinals (10m Sprint)
+                  </div>
+                  {event.bracket.slice(0, 4).map((m) => (
+                    <div key={m.id} className="border border-gray-800 bg-[#111] p-3 hover:border-js-yellow transition-colors">
+                      <div className="text-[10px] text-gray-500 uppercase mb-2">{m.round}</div>
+                      <div className="flex items-center justify-between py-1 border-b border-gray-800/60">
+                        <span className="text-white font-bold">{m.player1}</span>
+                        <span className="text-[10px] text-gray-500">TBD</span>
+                      </div>
+                      <div className="flex items-center justify-between py-1 pt-1.5">
+                        <span className="text-white font-bold">{m.player2}</span>
+                        <span className="text-[10px] text-gray-500">TBD</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Semifinals */}
+                <div className="space-y-4 lg:pt-8">
+                  <div className="text-[11px] font-bold text-gray-400 uppercase tracking-widest border-b border-gray-800 pb-2">
+                    Semifinals (15m Deep Dive)
+                  </div>
+                  {event.bracket.slice(4, 6).map((m) => (
+                    <div key={m.id} className="border border-gray-800 bg-[#111] p-4 lg:my-8 hover:border-js-yellow transition-colors">
+                      <div className="text-[10px] text-gray-500 uppercase mb-2">{m.round}</div>
+                      <div className="flex items-center justify-between py-1.5 border-b border-gray-800/60">
+                        <span className="text-white font-bold">{m.player1}</span>
+                        <span className="text-[10px] text-gray-500">TBD</span>
+                      </div>
+                      <div className="flex items-center justify-between py-1.5 pt-2">
+                        <span className="text-white font-bold">{m.player2}</span>
+                        <span className="text-[10px] text-gray-500">TBD</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Grand Final */}
+                <div className="space-y-4 lg:pt-16">
+                  <div className="text-[11px] font-bold text-js-yellow uppercase tracking-widest border-b border-gray-800 pb-2 flex items-center gap-1.5">
+                    <Trophy size={14} /> Grand Final (20m Duel)
+                  </div>
+                  {event.bracket.slice(6, 7).map((m) => (
+                    <div key={m.id} className="border-2 border-js-yellow bg-js-yellow/5 p-5 shadow-[0_0_30px_rgba(247,223,30,0.1)]">
+                      <div className="text-[10px] font-bold uppercase tracking-widest text-js-yellow mb-3">
+                        Championship Match
+                      </div>
+                      <div className="flex items-center justify-between py-2 border-b border-gray-800">
+                        <span className="text-white font-black text-sm">{m.player1}</span>
+                        <span className="text-xs text-js-yellow font-bold">FINALIST 1</span>
+                      </div>
+                      <div className="flex items-center justify-between py-2 pt-3">
+                        <span className="text-white font-black text-sm">{m.player2}</span>
+                        <span className="text-xs text-js-yellow font-bold">FINALIST 2</span>
+                      </div>
+                      <div className="mt-4 pt-3 border-t border-gray-800 text-center text-[10px] text-gray-400 uppercase tracking-widest">
+                        Winner receives the 2026 Coders&apos; Cup Trophy
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Agenda Timeline */}
+          {event.agenda && event.agenda.length > 0 && (
+            <div>
+              <div className="flex items-center gap-3 mb-6">
+                <Clock size={22} className="text-js-yellow" />
+                <h2 className="text-2xl sm:text-3xl font-black uppercase tracking-tight">
+                  Battle Schedule (2:00 PM – 5:00 PM)
+                </h2>
+              </div>
+
+              <div className="border border-gray-800 divide-y divide-gray-800 bg-[#090909]">
+                {event.agenda.map((item, idx) => (
+                  <div
+                    key={idx}
+                    className="p-4 sm:p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-3 hover:bg-[#111] transition-colors"
+                  >
+                    <div className="flex items-start sm:items-center gap-4">
+                      <div className="font-mono text-xs font-bold text-js-yellow bg-js-yellow/10 border border-js-yellow/30 px-3 py-1.5 shrink-0">
+                        {item.time}
+                      </div>
+                      <div className="text-base font-bold text-white uppercase tracking-tight">
+                        {item.title}
+                      </div>
+                    </div>
+                    {item.speaker && (
+                      <div className="text-xs font-mono text-gray-400 sm:text-right shrink-0">
+                        {item.speaker}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Venue & Host Section */}
+          <div className="border border-gray-800 bg-[#090909] p-6 sm:p-8">
+            <div className="flex flex-col lg:flex-row gap-8 items-start justify-between">
+              <div className="space-y-4 max-w-xl">
+                <div className="text-[10px] font-mono text-js-yellow uppercase tracking-widest">
+                  Host &amp; Venue Partner
+                </div>
+                <h2 className="text-3xl font-black uppercase tracking-tight text-white">
+                  Africa&apos;s Talking Uganda Office
+                </h2>
+                <p className="text-gray-400 text-sm leading-relaxed">
+                  Join us in-person at Africa&apos;s Talking Office. Experience the intense action with live high-definition code screens, live audio commentary, and direct networking with Uganda&apos;s top software engineers and architects.
+                </p>
+                <div className="font-mono text-xs text-gray-300 space-y-1 pt-2">
+                  <div className="flex items-center gap-2">
+                    <MapPin size={14} className="text-js-yellow shrink-0" />
+                    <span>{event.address}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Users size={14} className="text-js-yellow shrink-0" />
+                    <span>In-person spectator seating limited to registered attendees.</span>
+                  </div>
+                </div>
+              </div>
+
+              {event.ticketsUrl && (
+                <div className="w-full lg:w-auto shrink-0 bg-black border border-gray-800 p-6 flex flex-col gap-4 text-center">
+                  <div className="text-xs font-mono uppercase text-gray-400 tracking-widest">
+                    Admission
+                  </div>
+                  <div className="text-2xl font-black text-js-yellow uppercase">
+                    Free RSVP
+                  </div>
+                  <p className="text-[11px] text-gray-500 font-mono max-w-xs">
+                    Tickets managed through TicketDaddy. Secure your seat before room capacity is reached.
+                  </p>
+                  <Button href={event.ticketsUrl} icon={Ticket} className="w-full justify-center">
+                    Reserve on TicketDaddy
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </Section>
+    </article>
+  );
+}
+
+export function generateStaticParams() {
+  return EVENTS.map((event) => ({
+    slug: event.slug,
+  }));
+}
diff --git a/app/events/page.tsx b/app/events/page.tsx
index b2f1841..17895f2 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -1,6 +1,7 @@
+import Link from 'next/link';
 import { Section, Heading, Badge, Button } from '../../components/UI';
 import { EVENTS } from '../../data';
-import { Calendar, MapPin, Ticket, Clock } from 'lucide-react';
+import { Calendar, MapPin, Ticket, Clock, Swords, ArrowRight } from 'lucide-react';
 
 export default function Events() {
   const upcomingEvents = EVENTS.filter(e => e.status === 'upcoming');
@@ -19,7 +20,7 @@ export default function Events() {
               <span className="text-transparent bg-clip-text bg-none stroke-white" style={{WebkitTextStroke: '1px white'}}>Events</span>
             </h1>
             <p className="text-xl text-gray-400 font-light max-w-2xl leading-relaxed border-l-4 border-js-yellow pl-6">
-              Join us for meetups, workshops, and conferences. Build skills, make connections, and grow your network.
+              Join us for meetups, workshops, and tournaments. Build skills, make connections, and test your code under pressure.
             </p>
           </div>
         </Section>
@@ -35,15 +36,22 @@ export default function Events() {
                 <div className="flex flex-col lg:flex-row gap-8">
                   {event.coverImage && (
                     <div className="lg:w-1/3">
-                      <img
-                        src={event.coverImage}
-                        alt={event.title}
-                        className="w-full h-48 object-cover grayscale group-hover:grayscale-0 transition-all"
-                      />
+                      <Link href={`/events/${event.slug}`}>
+                        <img
+                          src={event.coverImage}
+                          alt={event.title}
+                          className="w-full h-48 object-cover grayscale group-hover:grayscale-0 transition-all"
+                        />
+                      </Link>
                     </div>
                   )}
                   <div className="flex-1">
-                    <div className="flex flex-wrap gap-2 mb-4">
+                    <div className="flex flex-wrap items-center gap-2 mb-4">
+                      {event.format && (
+                        <span className="bg-red-500/10 border border-red-500/40 text-red-400 text-[10px] px-2.5 py-1 uppercase font-bold tracking-widest flex items-center gap-1.5">
+                          <Swords size={12} /> Live 1v1 Tournament
+                        </span>
+                      )}
                       {event.tags.map(tag => (
                         <span key={tag} className="border border-gray-700 text-gray-400 text-[10px] px-2 py-1 uppercase font-bold tracking-widest">
                           {tag}
@@ -51,13 +59,21 @@ export default function Events() {
                       ))}
                     </div>
                     <h3 className="text-2xl font-black text-white uppercase mb-4 group-hover:text-js-yellow transition-colors">
-                      {event.title}
+                      <Link href={`/events/${event.slug}`}>
+                        {event.title}
+                      </Link>
                     </h3>
                     <p className="text-gray-400 mb-6">{event.description}</p>
-                    <div className="flex flex-wrap gap-6 text-sm text-gray-500 mb-6">
+                    <div className="flex flex-wrap gap-6 text-sm text-gray-500 mb-6 font-mono">
                       <div className="flex items-center gap-2">
                         <Calendar size={16} className="text-js-yellow" />
-                        {new Date(event.date).toLocaleDateString()}
+                        {new Date(event.date).toLocaleDateString('en-UG', {
+                          weekday: 'short',
+                          year: 'numeric',
+                          month: 'short',
+                          day: 'numeric',
+                          timeZone: 'Africa/Kampala'
+                        })}
                       </div>
                       <div className="flex items-center gap-2">
                         <Clock size={16} className="text-js-yellow" />
@@ -68,11 +84,16 @@ export default function Events() {
                         {event.venue}
                       </div>
                     </div>
-                    {event.ticketsUrl && (
-                      <Button href={event.ticketsUrl} icon={Ticket}>
-                        Get Tickets
+                    <div className="flex flex-wrap gap-4">
+                      {event.ticketsUrl && (
+                        <Button href={event.ticketsUrl} icon={Ticket}>
+                          Reserve Seat
+                        </Button>
+                      )}
+                      <Button variant="outline" href={`/events/${event.slug}`} icon={ArrowRight}>
+                        Rules &amp; Match Intel
                       </Button>
-                    )}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -102,7 +123,9 @@ export default function Events() {
                     </span>
                   ))}
                 </div>
-                <h3 className="text-lg font-bold text-white uppercase mb-2">{event.title}</h3>
+                <h3 className="text-lg font-bold text-white uppercase mb-2 hover:text-js-yellow transition-colors">
+                  <Link href={`/events/${event.slug}`}>{event.title}</Link>
+                </h3>
                 <div className="text-xs text-gray-500 font-mono">
                   {new Date(event.date).toLocaleDateString()} • {event.venue}
                 </div>
diff --git a/app/page.tsx b/app/page.tsx
index 7d9778b..996629c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -215,8 +215,15 @@ const FeaturedEvent = () => {
       <div className="grid lg:grid-cols-2 min-h-150">
         {/* Text Content Left */}
         <div className="p-12 lg:p-24 flex flex-col justify-center bg-[#080808]">
-          <div className="mb-8 flex items-center gap-3">
-            <Badge color="yellow">Upcoming Summit</Badge>
+          <div className="mb-8 flex flex-wrap items-center gap-3">
+            <Badge color="yellow">
+              {nextEvent.format ? "Upcoming Tournament" : "Upcoming Event"}
+            </Badge>
+            {nextEvent.rules && (
+              <span className="bg-red-500/10 border border-red-500/40 text-red-400 text-[10px] font-mono uppercase font-bold tracking-widest px-2.5 py-1">
+                Live 1v1 • Zero AI
+              </span>
+            )}
             <span className="text-gray-500 font-mono text-xs uppercase tracking-wider">
               Don&apos;t miss out
             </span>
@@ -236,8 +243,12 @@ const FeaturedEvent = () => {
                 </div>
                 <div className="text-white text-lg font-bold">
                   {new Date(nextEvent.date).toLocaleDateString("en-UG", {
+                    weekday: "short",
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
                     timeZone: "Africa/Kampala",
-                  })}
+                  })}{" "}
                   — {nextEvent.time}
                 </div>
               </div>
@@ -253,6 +264,9 @@ const FeaturedEvent = () => {
                 <div className="text-white text-lg font-bold">
                   {nextEvent.venue}
                 </div>
+                <div className="text-xs text-gray-400 font-mono">
+                  {nextEvent.address}
+                </div>
               </div>
             </div>
           </div>
@@ -270,7 +284,7 @@ const FeaturedEvent = () => {
               href={`/events/${nextEvent.slug}`}
               className="w-full sm:w-auto"
             >
-              Event Details
+              Tournament Intel &amp; Rules
             </Button>
           </div>
         </div>
diff --git a/data.ts b/data.ts
index a47b3f0..a32781f 100644
--- a/data.ts
+++ b/data.ts
@@ -1,6 +1,76 @@
 import { BlogPost, Event, GalleryItem, Leader, Sponsor, Project } from './types';
 
 export const EVENTS: Event[] = [
+  {
+    slug: 'kampala-coders-cup-2026',
+    title: "Kampala Coders' Cup 2026: Live 1v1 Algorithmic Showdown",
+    date: '2026-11-07T14:00:00+03:00',
+    time: '02:00 PM - 05:00 PM',
+    venue: "Africa's Talking Office",
+    address: 'Victoria Park, Block B, Kampala',
+    city: 'Kampala',
+    status: 'upcoming',
+    format: 'Live 1v1 Knockout Cup (Single Elimination)',
+    description: "East Africa's premier live 1v1 competitive programming tournament inspired by the HackSussex Coders' Cup. 8 elite coders clash head-to-head on the big screen in front of a live audience. Solve algorithmic challenges under extreme time pressure in any programming language of your choice. Strictly zero AI tools permitted.",
+    tags: ['Competition', 'Live Tournament', 'Algorithms', 'No-AI', 'Polyglot'],
+    ticketsUrl: 'https://www.ticketdaddy.io/',
+    videoUrl: 'https://youtu.be/EJPkNt7HbZM',
+    coverImage: 'https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&q=80&w=2070',
+    rules: [
+      {
+        title: 'Polyglot Playground (Any Language)',
+        highlight: 'Freedom of Choice',
+        description: 'Competitors can write solutions in ANY programming language (TypeScript, JavaScript, Python, Go, Rust, C++, Java, etc.). You bring your language mastery; we provide the standard test harnesses.'
+      },
+      {
+        title: 'Zero AI Usage Policy',
+        highlight: 'Strictly Enforced',
+        description: 'No GitHub Copilot, Cursor, ChatGPT, Claude, tab autocompletions, or generative assistants of any kind are permitted. All solutions must be reasoned and authored from pure human cognition.'
+      },
+      {
+        title: '1v1 Head-to-Head Knockout',
+        highlight: 'HackSussex Format',
+        description: 'Live bracket single-elimination battles. Code editor feeds projected side-by-side with live test suite progress, live shoutcasters, and spectator hype.'
+      },
+      {
+        title: 'Instant Automated Test Harness',
+        highlight: 'Live Evaluation',
+        description: 'Deterministic test cases run live on screen. The first competitor to pass 100% of test cases (or highest passing rate when the timer expires) advances to the next round.'
+      }
+    ],
+    bracket: [
+      { id: 'm1', round: 'Quarterfinal 1', player1: 'Seed 1', player2: 'Seed 8' },
+      { id: 'm2', round: 'Quarterfinal 2', player1: 'Seed 4', player2: 'Seed 5' },
+      { id: 'm3', round: 'Quarterfinal 3', player1: 'Seed 2', player2: 'Seed 7' },
+      { id: 'm4', round: 'Quarterfinal 4', player1: 'Seed 3', player2: 'Seed 6' },
+      { id: 'm5', round: 'Semifinal 1', player1: 'Winner QF 1', player2: 'Winner QF 2' },
+      { id: 'm6', round: 'Semifinal 2', player1: 'Winner QF 3', player2: 'Winner QF 4' },
+      { id: 'm7', round: 'Grand Final', player1: 'Winner SF 1', player2: 'Winner SF 2' }
+    ],
+    speakers: [
+      {
+        name: 'Tournament Cast & Commentary Team',
+        role: "JS Kampala & Africa's Talking",
+        topic: 'Live Match Casting, Play-by-Play & Edge-Case Analysis',
+        avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=200'
+      },
+      {
+        name: 'Arbitration & Benchmarking Jury',
+        role: 'Technical Lead Judges',
+        topic: 'Polyglot Test Runner & Strict Zero-AI Auditing',
+        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=200'
+      }
+    ],
+    agenda: [
+      { time: '02:00 PM', title: 'Arrival, Environment Setup & Bracket Reveal' },
+      { time: '02:25 PM', title: 'Opening Remarks & Code-of-Combat Rules Briefing' },
+      { time: '02:35 PM', title: 'Quarterfinals: 1v1 Speed Rounds (4 Matches • 10m sprints)' },
+      { time: '03:25 PM', title: "Halftime Break & Africa's Talking Tech Spotlight" },
+      { time: '03:40 PM', title: 'Semifinals: Deep Algorithmic Duels (2 Matches • 15m deep dives)' },
+      { time: '04:20 PM', title: 'Grand Final: The Championship Duel (20m Showdown)' },
+      { time: '04:45 PM', title: 'Awards Ceremony, Trophy Presentation & Networking Mixer' }
+    ]
+  },
   {
     slug: 'js-kampala-summit-2025',
     title: 'JS Kampala Summit 2025: The Future of Web',
@@ -9,7 +79,7 @@ export const EVENTS: Event[] = [
     venue: 'Kampala Serena Hotel',
     address: 'Kintu Road, Kampala',
     city: 'Kampala',
-    status: 'upcoming',
+    status: 'past',
     description: 'The premier engineering conference in East Africa. Join 500+ developers for a full day of deep dives into React Server Components, AI Engineering, and Cloud Architecture.',
     tags: ['Conference', 'Architecture', 'AI'],
     ticketsUrl: 'https://eventbrite.com',
@@ -43,7 +113,7 @@ export const EVENTS: Event[] = [
     venue: 'Innovation Village',
     address: 'Ntinda Complex',
     city: 'Kampala',
-    status: 'upcoming',
+    status: 'past',
     description: 'A deep dive into designing scalable distributed systems. Perfect for Senior Engineers looking to level up.',
     tags: ['System Design', 'Backend', 'Workshop'],
     coverImage: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=2000',
@@ -139,6 +209,14 @@ export const SPONSORS: Sponsor[] = [
     logo: 'https://upload.wikimedia.org/wikipedia/commons/4/4b/Andela_logo.png',
     url: 'https://www.andela.com/',
     description: 'Connecting talent.'
+  },
+  {
+    id: '5',
+    name: "Africa's Talking",
+    tier: 'Gold',
+    logo: 'https://africastalking.com/img/favicon.png',
+    url: 'https://africastalking.com/',
+    description: 'Powering communication & cloud infrastructure across Africa.'
   }
 ];
 
diff --git a/types.ts b/types.ts
index 6c7e665..abef957 100644
--- a/types.ts
+++ b/types.ts
@@ -13,6 +13,21 @@ export interface AgendaItem {
   speaker?: string;
 }
 
+export interface TournamentMatch {
+  id: string;
+  round: string;
+  player1: string;
+  player2: string;
+  winner?: string;
+  score?: string;
+}
+
+export interface TournamentRule {
+  title: string;
+  description: string;
+  highlight?: string;
+}
+
 export interface Event {
   slug: string;
   title: string;
@@ -28,6 +43,11 @@ export interface Event {
   tags: string[];
   status: 'upcoming' | 'past';
   description: string;
+  format?: string;
+  rules?: TournamentRule[];
+  bracket?: TournamentMatch[];
+  videoUrl?: string;
+  venueMapUrl?: string;
 }
 
 export interface BlogPost {

From 6a707915c5ed6c79d845ed5aa17677349ae55270 Mon Sep 17 00:00:00 2001
From: geoxhacker <mukisageophrey@gmail.com>
Date: Sat, 5 Sep 2026 13:40:44 +0000
Subject: [PATCH 3/3] feat(events): rename upcoming event to JSK Code Wars
 Edition 2

---
 app/events/[slug]/page.tsx | 2 +-
 data.ts                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/events/[slug]/page.tsx b/app/events/[slug]/page.tsx
index b303ed7..a8e6089 100644
--- a/app/events/[slug]/page.tsx
+++ b/app/events/[slug]/page.tsx
@@ -263,7 +263,7 @@ export default async function EventDetailPage({ params }: EventPageProps) {
                         <span className="text-xs text-js-yellow font-bold">FINALIST 2</span>
                       </div>
                       <div className="mt-4 pt-3 border-t border-gray-800 text-center text-[10px] text-gray-400 uppercase tracking-widest">
-                        Winner receives the 2026 Coders&apos; Cup Trophy
+                        Winner receives the JSK Code Wars Edition 2 Trophy
                       </div>
                     </div>
                   ))}
diff --git a/data.ts b/data.ts
index a32781f..e70cab7 100644
--- a/data.ts
+++ b/data.ts
@@ -2,8 +2,8 @@ import { BlogPost, Event, GalleryItem, Leader, Sponsor, Project } from './types'
 
 export const EVENTS: Event[] = [
   {
-    slug: 'kampala-coders-cup-2026',
-    title: "Kampala Coders' Cup 2026: Live 1v1 Algorithmic Showdown",
+    slug: 'jsk-code-wars-edition-2',
+    title: "JSK Code Wars Edition 2",
     date: '2026-11-07T14:00:00+03:00',
     time: '02:00 PM - 05:00 PM',
     venue: "Africa's Talking Office",