From 8180ebf4302534009a95a2eb921a4f3be7d05604 Mon Sep 17 00:00:00 2001
From: Edmond <edghimakoll@gmail.com>
Date: Fri, 14 Aug 2026 17:06:24 +0100
Subject: [PATCH] Add PyCon Cameroon 2026 countdown banner

Adds a fixed banner above the navbar that counts down to the September
17 event and links to cm.pycon.org. It disappears once the countdown
reaches zero and the page layout shifts to avoid any overlap.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/App.css                    |   2 +
 src/components/PyConBanner.tsx | 103 +++++++++++++++++++++++++++++++++
 src/layouts/Navbar.tsx         |   3 +
 3 files changed, 108 insertions(+)
 create mode 100644 src/components/PyConBanner.tsx

diff --git a/src/App.css b/src/App.css
index f7c95b5..4db9e8d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -126,6 +126,8 @@
 
     body {
         @apply bg-background text-foreground font-space-mono;
+        padding-top: var(--pycon-banner-height, 0px);
+        transition: padding-top 0.2s ease;
     }
 
     h1,
diff --git a/src/components/PyConBanner.tsx b/src/components/PyConBanner.tsx
new file mode 100644
index 0000000..922a55b
--- /dev/null
+++ b/src/components/PyConBanner.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from "react";
+import { PartyPopper } from "lucide-react";
+
+const PYCON_URL = "https://cm.pycon.org";
+const EVENT_START = new Date("2026-09-17T00:00:00+01:00");
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+const getTimeLeft = (): TimeLeft => {
+  const diff = Math.max(0, EVENT_START.getTime() - Date.now());
+  return {
+    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((diff / (1000 * 60)) % 60),
+    seconds: Math.floor((diff / 1000) % 60),
+  };
+};
+
+const TimeUnit = ({ value, label }: { value: number; label: string }) => (
+  <div className="flex flex-col items-center leading-none">
+    <span className="text-sm sm:text-base font-bold tabular-nums">
+      {String(value).padStart(2, "0")}
+    </span>
+    <span className="text-[9px] sm:text-[10px] uppercase tracking-wide opacity-80">
+      {label}
+    </span>
+  </div>
+);
+
+export const PyConBanner = () => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(getTimeLeft);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTimeLeft(getTimeLeft()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const visible = Date.now() < EVENT_START.getTime();
+
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!visible || !el) {
+      document.documentElement.style.setProperty("--pycon-banner-height", "0px");
+      return;
+    }
+
+    const updateHeight = () =>
+      document.documentElement.style.setProperty(
+        "--pycon-banner-height",
+        `${el.offsetHeight}px`
+      );
+
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+      document.documentElement.style.setProperty("--pycon-banner-height", "0px");
+    };
+  }, [visible]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      ref={rootRef}
+      className="relative w-full bg-gradient-to-r from-primary to-secondary text-white dark:text-black"
+    >
+      <a
+        href={PYCON_URL}
+        target="_blank"
+        rel="noreferrer noopener"
+        className="container flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 py-2 text-xs sm:text-sm hover:opacity-90 transition-opacity"
+      >
+        <span className="flex items-center gap-1.5 font-semibold whitespace-nowrap">
+          <PartyPopper className="h-4 w-4" />
+          PyCon Cameroon 2026 · Sept 17–19
+        </span>
+
+        <div className="flex items-center gap-2 sm:gap-3">
+          <TimeUnit value={timeLeft.days} label="days" />
+          <span className="opacity-60">:</span>
+          <TimeUnit value={timeLeft.hours} label="hrs" />
+          <span className="opacity-60">:</span>
+          <TimeUnit value={timeLeft.minutes} label="min" />
+          <span className="opacity-60">:</span>
+          <TimeUnit value={timeLeft.seconds} label="sec" />
+        </div>
+
+        <span className="rounded-full bg-white/20 px-3 py-1 font-medium whitespace-nowrap">
+          Learn more →
+        </span>
+      </a>
+    </div>
+  );
+};
diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
index 87e1c19..4ffdb62 100644
--- a/src/layouts/Navbar.tsx
+++ b/src/layouts/Navbar.tsx
@@ -18,6 +18,7 @@ import { Menu } from "lucide-react";
 import { ModeToggle } from "@/components/mode-toggle";
 import { LogoIcon } from "@/components/Icons";
 import { LanguageSwitcher } from "@/components/language"; // Import Language Switcher
+import { PyConBanner } from "@/components/PyConBanner";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface RouteProps {
@@ -122,6 +123,8 @@ export const Navbar = () => {
       animate={{ y: 0 }}
       transition={{ duration: 0.3 }}
     >
+      <PyConBanner />
+
       {/* Background glow effect */}
       <div className="absolute inset-0 -z-10 overflow-hidden">
         <div