From a7f234e5f614fbe68521af268b3552bc450a5bdc Mon Sep 17 00:00:00 2001
From: Paul Ochieng Levi <ochiengpaul442@gmail.com>
Date: Mon, 13 Jul 2026 18:54:51 +0300
Subject: [PATCH 1/6] feat: add QrCodeButton component and integrate into
 Leaderboard, Quiz, and Selfies screens

- Implemented QrCodeButton component with updated styles and functionality.
- Integrated QrCodeButton into LeaderboardScreen, QuizScreen, and SelfiesScreen for enhanced user interaction.
- Adjusted layout and styles for better responsiveness and visual consistency across screens.
- Added new Selfies route and screen to display user-submitted selfies from the Africa Clean Air Forum.
---
 .../selfies/page.tsx                          |  15 +
 .../clean-air-forum-2026/QrCodeButton.tsx     |   8 +-
 src/website/src/components/layout/Footer.tsx  |   1 +
 .../screens/LeaderboardScreen.tsx             |  11 +-
 .../screens/QuizScreen.tsx                    |  16 +-
 .../screens/SelfiesScreen.tsx                 | 867 ++++++++++++++++++
 .../FacesOfCleanAirPage.tsx                   |  10 +-
 7 files changed, 907 insertions(+), 21 deletions(-)
 create mode 100644 src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsx
 create mode 100644 src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx

diff --git a/src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsx b/src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsx
new file mode 100644
index 0000000000..21dd65188b
--- /dev/null
+++ b/src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsx
@@ -0,0 +1,15 @@
+import SelfiesScreen from '@/features/clean-air-forum-2026/screens/SelfiesScreen';
+import { generateMetadata } from '@/lib/metadata';
+
+export const metadata = generateMetadata({
+  title: 'Selfies | Faces of Clean Air',
+  description:
+    'View selfies shared by attendees of the Africa Clean Air Forum showcasing air quality readings from their locations.',
+  keywords:
+    'Faces of Clean Air selfies, Africa Clean Air Forum photos, air quality advocates, PM2.5 readings Africa, clean air community',
+  url: '/africa-clean-air-forum-2026/selfies',
+});
+
+export default function SelfiesRoute() {
+  return <SelfiesScreen />;
+}
diff --git a/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx b/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
index fcabb70268..0b57210e63 100644
--- a/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
+++ b/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
@@ -15,20 +15,20 @@ export default function QrCodeButton({ src = QR_IMAGE_SRC }: { src?: string }) {
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="absolute bottom-4 right-3 z-20 hidden cursor-pointer sm:bottom-8 sm:right-6 sm:block lg:bottom-10 lg:right-8"
+        className="absolute right-3 top-4 z-20 hidden cursor-pointer sm:right-6 sm:top-6 sm:block lg:right-8 lg:top-8"
         aria-label="Open QR code in full view"
       >
         <div className="flex flex-col items-center gap-1">
-          <div className="overflow-hidden rounded-lg border-2 border-white/30 bg-white/10 p-1 shadow-lg backdrop-blur-sm transition-transform hover:scale-105 sm:border-white/40 sm:p-1.5 lg:p-2">
+          <div className="overflow-hidden rounded-lg border border-white/25 bg-white/10 p-1 shadow-lg backdrop-blur-sm transition-transform hover:scale-105 sm:border-white/30 sm:p-1.5">
             <Image
               src={src}
               alt="Clean Air Forum QR Code"
               width={60}
               height={60}
-              className="h-[50px] w-[50px] object-contain sm:h-[65px] sm:w-[65px] lg:h-[80px] lg:w-[80px]"
+              className="h-[44px] w-[44px] object-contain sm:h-[52px] sm:w-[52px] lg:h-[60px] lg:w-[60px]"
             />
           </div>
-          <span className="text-[8px] font-medium text-white/80 sm:text-[10px] lg:text-xs">
+          <span className="text-[7px] font-medium text-white/70 sm:text-[9px]">
             Scan to participate
           </span>
         </div>
diff --git a/src/website/src/components/layout/Footer.tsx b/src/website/src/components/layout/Footer.tsx
index 14841fcd19..fab9d7e783 100644
--- a/src/website/src/components/layout/Footer.tsx
+++ b/src/website/src/components/layout/Footer.tsx
@@ -43,6 +43,7 @@ const footerLinks = {
       label: 'Faces of Clean Air',
       href: '/africa-clean-air-forum-2026/faces-of-clean-air',
     },
+    { label: 'Selfies', href: '/africa-clean-air-forum-2026/selfies' },
     { label: 'Air Quality Quiz', href: '/africa-clean-air-forum-2026/quiz' },
     {
       label: 'Quiz Leaderboard',
diff --git a/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
index c891da44f7..8a5a8cfb03 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
@@ -15,6 +15,7 @@ import AmbientBackground from '@/components/clean-air-forum-2026/AmbientBackgrou
 import LeaderboardEmptyState from '@/components/clean-air-forum-2026/LeaderboardEmptyState';
 import LeaderboardRowsBlock from '@/components/clean-air-forum-2026/LeaderboardRowsBlock';
 import LeaderboardToggles from '@/components/clean-air-forum-2026/LeaderboardToggles';
+import QrCodeButton from '@/components/clean-air-forum-2026/QrCodeButton';
 import { fetchCleanAirForum2026Leaderboard } from '@/features/clean-air-forum-2026/lib/learn-progress';
 import type { CleanAirForum2026LeaderboardEntry } from '@/features/clean-air-forum-2026/types/learn';
 import { usePollingWithVisibility } from '@/hooks/usePollingWithVisibility';
@@ -289,12 +290,12 @@ export default function LeaderboardScreen() {
             </Link>
           </motion.div>
 
-          <div className="min-w-0">
+          <div className="min-w-0 overflow-hidden">
             <motion.h1
               variants={headerItemVariants}
               className="whitespace-nowrap text-left leading-none text-white"
             >
-              <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+              <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                 {LEADERBOARD_TITLE}
               </span>
             </motion.h1>
@@ -320,12 +321,12 @@ export default function LeaderboardScreen() {
           </motion.div>
         </motion.header>
 
-        <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col items-center justify-center pt-6 sm:pt-10">
+        <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col items-center justify-center overflow-hidden pt-6 sm:pt-10">
           {status === 'error' && entries.length === 0 ? (
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              className="rounded-2xl border border-white/20 bg-white/15 px-8 py-10 text-center backdrop-blur-xl"
+              className="w-full max-w-[520px] rounded-2xl border border-white/20 bg-white/15 px-5 py-8 text-center backdrop-blur-xl sm:px-8 sm:py-10"
             >
               <p className="text-lg font-bold text-white">
                 Unable to load leaderboard
@@ -396,6 +397,8 @@ export default function LeaderboardScreen() {
             </section>
           )}
         </main>
+
+        <QrCodeButton />
       </div>
     </div>
   );
diff --git a/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
index 1408bb3ea4..16389ee4c0 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
@@ -449,12 +449,12 @@ export default function QuizScreen() {
             </Link>
           </motion.div>
 
-          <div className="min-w-0">
+          <div className="min-w-0 overflow-hidden">
             <motion.h1
               variants={headerItemVariants}
               className="whitespace-nowrap text-left leading-none text-white"
             >
-              <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+              <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                 Air Quality Quiz
               </span>
             </motion.h1>
@@ -488,7 +488,7 @@ export default function QuizScreen() {
     return (
       <Screen className="caf-2026-screen relative overflow-hidden">
         <AmbientBackground variant="quiz" />
-        <section className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1600px] px-5 py-10 sm:px-8 sm:py-12 md:px-12 lg:px-16 lg:py-16">
+        <section className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1200px] px-5 py-10 sm:px-8 sm:py-12 md:px-12 lg:px-16 lg:py-16">
           <div className="flex w-full flex-col items-center">
             <motion.header
               variants={headerContainerVariants}
@@ -513,12 +513,12 @@ export default function QuizScreen() {
                 </Link>
               </motion.div>
 
-              <div className="min-w-0">
+              <div className="min-w-0 overflow-hidden">
                 <motion.h1
                   variants={headerItemVariants}
                   className="whitespace-nowrap text-left leading-none text-white"
                 >
-                  <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+                  <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                     Air Quality Quiz
                   </span>
                 </motion.h1>
@@ -597,7 +597,7 @@ export default function QuizScreen() {
   return (
     <Screen className="caf-2026-screen relative overflow-hidden">
       <AmbientBackground variant="quiz" />
-      <section className="relative z-10 caf-2026-quiz-stage mx-auto flex min-h-screen w-full max-w-[1600px] px-5 py-10 sm:px-8 sm:py-12 md:px-12 lg:px-16 lg:py-16">
+      <section className="relative z-10 caf-2026-quiz-stage mx-auto flex min-h-screen w-full max-w-[1200px] px-5 py-10 sm:px-8 sm:py-12 md:px-12 lg:px-16 lg:py-16">
         <div className="caf-2026-quiz-shell flex w-full flex-col items-center">
           <motion.header
             variants={headerContainerVariants}
@@ -622,12 +622,12 @@ export default function QuizScreen() {
               </Link>
             </motion.div>
 
-            <div className="min-w-0">
+            <div className="min-w-0 overflow-hidden">
               <motion.h1
                 variants={headerItemVariants}
                 className="whitespace-nowrap text-left leading-none text-white"
               >
-                <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+                <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                   Air Quality Quiz
                 </span>
               </motion.h1>
diff --git a/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
new file mode 100644
index 0000000000..769bc4a315
--- /dev/null
+++ b/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
@@ -0,0 +1,867 @@
+'use client';
+
+import {
+  AnimatePresence,
+  motion,
+  type PanInfo,
+  type Variants,
+} from 'framer-motion';
+import { useReducedMotion } from 'framer-motion';
+import Image from 'next/image';
+import Link from 'next/link';
+import {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { FiCamera } from 'react-icons/fi';
+
+import AmbientBackground from '@/components/clean-air-forum-2026/AmbientBackground';
+import QrCodeButton from '@/components/clean-air-forum-2026/QrCodeButton';
+import {
+  CLEAN_AIR_FORUM_CURRENT_EVENT_ID,
+  CLEAN_AIR_FORUM_WALL_ACTIVE_POLL_INTERVAL_MS,
+} from '@/config/cleanAirForumConfig';
+import { usePollingWithVisibility } from '@/hooks/usePollingWithVisibility';
+import { facesOfCleanAirService } from '@/services/external';
+import type { CleanAirSubmissionWithId } from '@/services/external/faces-of-clean-air.service';
+
+const AIRQO_LOGO_URL = '/assets/images/white-logo.png';
+const EVENT_LABEL = 'Africa Clean Air Forum';
+const EVENT_LOCATION_AND_YEAR = 'Pretoria 2026';
+const CAROUSEL_INTERVAL_MS = 7600;
+const SWIPE_DISTANCE_THRESHOLD = 70;
+const SWIPE_VELOCITY_THRESHOLD = 500;
+const MOBILE_MEDIA_QUERY = '(max-width: 639px)';
+const DESKTOP_CARDS_PER_PAGE = 8;
+
+const headerContainerVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: {
+      delayChildren: 0.1,
+      staggerChildren: 0.16,
+    },
+  },
+};
+
+const headerItemVariants: Variants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.78, ease: [0.22, 1, 0.36, 1] },
+  },
+};
+
+const cardVariants: Variants = {
+  enter: { opacity: 0, y: 28, scale: 0.94 },
+  center: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: -16, scale: 0.96 },
+};
+
+type FetchState = 'idle' | 'loading' | 'success' | 'error';
+
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    const updateMatch = () => setMatches(mediaQuery.matches);
+    updateMatch();
+    mediaQuery.addEventListener('change', updateMatch);
+    return () => mediaQuery.removeEventListener('change', updateMatch);
+  }, [query]);
+
+  return matches;
+}
+
+function FaceCard({
+  submission,
+  priority,
+  reduceMotion,
+}: {
+  submission: CleanAirSubmissionWithId;
+  priority: boolean;
+  reduceMotion: boolean | null;
+}) {
+  const displayName =
+    submission.displayName?.trim() ||
+    submission.locationName?.trim() ||
+    'Clean Air Champion';
+
+  const location =
+    submission.locationName?.trim() || 'Pretoria, Gauteng, South Africa';
+
+  return (
+    <motion.article
+      layout
+      variants={cardVariants}
+      transition={{
+        duration: reduceMotion ? 0 : 0.68,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      whileHover={
+        reduceMotion
+          ? undefined
+          : {
+              y: -8,
+              scale: 1.015,
+              transition: { type: 'spring', stiffness: 240, damping: 24 },
+            }
+      }
+      whileTap={reduceMotion ? undefined : { scale: 0.986 }}
+      className="group relative aspect-square w-full overflow-hidden rounded-xl border border-white/15 bg-[#005257] shadow-[0_28px_70px_-35px_rgba(2,6,23,0.95)] [transform-style:preserve-3d] will-change-transform"
+    >
+      <Image
+        src={submission.imageUrl}
+        alt={`${displayName} at ${location}`}
+        fill
+        priority={priority}
+        unoptimized
+        className="object-contain transition-transform duration-1000 ease-out sm:group-hover:scale-[1.05]"
+        sizes="(max-width: 639px) 86vw, (max-width: 1023px) 42vw, (max-width: 1279px) 25vw, 22vw"
+      />
+    </motion.article>
+  );
+}
+
+function SkeletonCard({
+  index,
+  reduceMotion,
+}: {
+  index: number;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 24, scale: 0.96 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{
+        duration: reduceMotion ? 0 : 0.62,
+        delay: reduceMotion ? 0 : index * 0.075,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="relative aspect-square w-full overflow-hidden rounded-xl border border-white/15 bg-white/20 shadow-[0_24px_60px_-32px_rgba(2,6,23,0.8)] backdrop-blur-md"
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-white/30 via-[#39BFC7]/15 to-[#39BFC7]/20" />
+
+      {!reduceMotion && (
+        <motion.div
+          className="absolute inset-y-0 -left-[75%] w-[65%] skew-x-[-18deg] bg-gradient-to-r from-transparent via-white/45 to-transparent"
+          animate={{ x: ['0%', '330%'] }}
+          transition={{
+            duration: 2.15,
+            delay: index * 0.1,
+            repeat: Infinity,
+            repeatDelay: 0.7,
+            ease: 'easeInOut',
+          }}
+        />
+      )}
+
+      <div className="absolute left-3 top-3 flex items-center gap-2">
+        <div className="h-6 w-10 rounded-full bg-white/35" />
+        <div className="space-y-1">
+          <div className="h-2 w-16 rounded-full bg-white/35" />
+          <div className="h-2 w-12 rounded-full bg-white/25" />
+        </div>
+      </div>
+
+      <div className="absolute inset-x-0 bottom-0 h-[50%] bg-gradient-to-t from-[#005257]/80 via-[#39BFC7]/50 to-transparent" />
+
+      <div className="absolute inset-x-3 bottom-3 space-y-2">
+        <div className="h-5 w-3/4 rounded-full bg-white/45" />
+        <div className="h-2 w-1/2 rounded-full bg-white/30" />
+        <div className="flex items-end gap-2">
+          <div className="h-8 w-16 rounded-lg bg-white/45" />
+          <div className="h-4 w-14 rounded-full bg-white/35" />
+        </div>
+        <div className="flex justify-between border-t border-white/15 pt-2">
+          <div className="h-4 w-24 rounded-full bg-white/35" />
+          <div className="h-3 w-20 rounded-full bg-white/25" />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+function EmptyState({ reduceMotion }: { reduceMotion: boolean | null }) {
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 26, scale: 0.96 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -16, scale: 0.97 }}
+      transition={{
+        duration: reduceMotion ? 0 : 0.68,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
+    >
+      <div className="relative mb-4 flex h-14 w-14 items-center justify-center sm:mb-5 sm:h-16 sm:w-16">
+        {!reduceMotion && (
+          <>
+            <motion.span
+              className="absolute inset-0 rounded-full border border-white/25"
+              animate={{ scale: [1, 1.65], opacity: [0.55, 0] }}
+              transition={{
+                duration: 2.6,
+                repeat: Infinity,
+                ease: 'easeOut',
+              }}
+            />
+            <motion.span
+              className="absolute inset-0 rounded-full border border-[#39BFC7]/30"
+              animate={{ scale: [1, 1.45], opacity: [0.45, 0] }}
+              transition={{
+                duration: 2.6,
+                delay: 0.9,
+                repeat: Infinity,
+                ease: 'easeOut',
+              }}
+            />
+          </>
+        )}
+
+        <motion.div
+          animate={
+            reduceMotion ? undefined : { y: [0, -4, 0], rotate: [0, -2, 2, 0] }
+          }
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+          className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border border-white/25 bg-white/20 shadow-lg backdrop-blur-md sm:h-14 sm:w-14"
+        >
+          <FiCamera className="h-6 w-6 text-white sm:h-7 sm:w-7" />
+        </motion.div>
+      </div>
+
+      <h2 className="text-lg font-bold text-white sm:text-xl">
+        No selfies yet
+      </h2>
+
+      <p className="mt-2 max-w-sm text-xs leading-5 text-[#072b31]/70 sm:text-sm sm:leading-6">
+        Be the first to share an air quality selfie from the Africa Clean Air
+        Forum.
+      </p>
+    </motion.div>
+  );
+}
+
+function ErrorState({
+  onRetry,
+  reduceMotion,
+}: {
+  onRetry: () => void;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 22, scale: 0.97 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -14, scale: 0.98 }}
+      role="alert"
+      transition={{
+        duration: reduceMotion ? 0 : 0.64,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
+    >
+      <h2 className="text-lg font-bold text-white sm:text-xl">
+        Could not load selfies
+      </h2>
+
+      <p className="mt-2 text-xs leading-5 text-[#072b31]/70 sm:text-sm sm:leading-6">
+        Please check the connection and try again.
+      </p>
+
+      <motion.button
+        type="button"
+        onClick={onRetry}
+        whileHover={reduceMotion ? undefined : { scale: 1.04, y: -2 }}
+        whileTap={reduceMotion ? undefined : { scale: 0.96 }}
+        className="mt-5 rounded-lg bg-[#39BFC7] px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-[#005257]/20 transition-colors hover:bg-[#39BFC7]/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#39BFC7]"
+      >
+        Try again
+      </motion.button>
+    </motion.div>
+  );
+}
+
+function DesktopPagination({
+  page,
+  totalPages,
+  isPaused,
+  reduceMotion,
+  onPageChange,
+}: {
+  page: number;
+  totalPages: number;
+  isPaused: boolean;
+  reduceMotion: boolean | null;
+  onPageChange: (page: number) => void;
+}) {
+  return (
+    <nav
+      className="mt-8 hidden items-center justify-center gap-3 sm:flex"
+      aria-label="Selfie carousel pages"
+    >
+      {Array.from({ length: totalPages }).map((_, index) => {
+        const isActive = index === page;
+
+        return (
+          <motion.button
+            layout
+            key={index}
+            type="button"
+            onClick={() => onPageChange(index)}
+            aria-label={`Show selfie page ${index + 1} of ${totalPages}`}
+            aria-current={isActive ? 'page' : undefined}
+            whileHover={reduceMotion ? undefined : { scale: 1.1, y: -1 }}
+            whileTap={reduceMotion ? undefined : { scale: 0.92 }}
+            transition={{ type: 'spring', stiffness: 320, damping: 30 }}
+            className={`relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent ${
+              isActive
+                ? 'w-11 bg-white/30'
+                : 'w-2.5 bg-white/30 hover:bg-white/50'
+            }`}
+          >
+            {isActive && (
+              <>
+                <motion.span
+                  layoutId="active-selfies-indicator"
+                  className="absolute inset-0 rounded-full bg-[#39BFC7]/20"
+                  transition={{
+                    type: 'spring',
+                    stiffness: 320,
+                    damping: 32,
+                  }}
+                />
+
+                {!reduceMotion && !isPaused && (
+                  <motion.span
+                    key={`desktop-progress-${page}`}
+                    initial={{ scaleX: 0 }}
+                    animate={{ scaleX: 1 }}
+                    transition={{
+                      duration: CAROUSEL_INTERVAL_MS / 1000,
+                      ease: 'linear',
+                    }}
+                    className="absolute inset-0 origin-left rounded-full bg-[#39BFC7]"
+                  />
+                )}
+
+                {(reduceMotion || isPaused) && (
+                  <span className="absolute inset-0 rounded-full bg-[#39BFC7]" />
+                )}
+              </>
+            )}
+          </motion.button>
+        );
+      })}
+    </nav>
+  );
+}
+
+function MobilePagination({
+  page,
+  totalPages,
+  reduceMotion,
+}: {
+  page: number;
+  totalPages: number;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <div
+      className="mt-3 flex items-center justify-center gap-3 sm:hidden"
+      aria-label={`Selfie ${page + 1} of ${totalPages}`}
+    >
+      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/20">
+        <motion.div
+          key={`mobile-progress-${page}`}
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{
+            duration: reduceMotion ? 0 : CAROUSEL_INTERVAL_MS / 1000,
+            ease: 'linear',
+          }}
+          className="h-full origin-left rounded-full bg-white"
+        />
+      </div>
+
+      <span className="min-w-[38px] text-center text-[11px] font-semibold tabular-nums text-white/85">
+        {page + 1}/{totalPages}
+      </span>
+    </div>
+  );
+}
+
+export default function SelfiesScreen() {
+  const shouldReduceMotion = useReducedMotion();
+  const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);
+
+  const [submissions, setSubmissions] = useState<CleanAirSubmissionWithId[]>(
+    [],
+  );
+  const [fetchState, setFetchState] = useState<FetchState>('idle');
+  const [page, setPage] = useState(0);
+  const [direction, setDirection] = useState(1);
+  const [isPaused, setIsPaused] = useState(false);
+
+  const hasLoadedRef = useRef(false);
+
+  const fetchSubmissions = useCallback(async () => {
+    if (!hasLoadedRef.current) {
+      setFetchState('loading');
+    }
+
+    try {
+      const data = await facesOfCleanAirService.getSubmissions(
+        CLEAN_AIR_FORUM_CURRENT_EVENT_ID,
+      );
+      setSubmissions(Array.isArray(data) ? data : []);
+      setFetchState('success');
+      hasLoadedRef.current = true;
+    } catch (error) {
+      console.error('Failed to load selfies:', error);
+      if (!hasLoadedRef.current) {
+        setFetchState('error');
+      }
+    }
+  }, []);
+
+  usePollingWithVisibility(
+    fetchSubmissions,
+    CLEAN_AIR_FORUM_WALL_ACTIVE_POLL_INTERVAL_MS,
+  );
+
+  const totalSlides = useMemo(() => {
+    if (isMobile) {
+      return Math.max(1, submissions.length);
+    }
+    return Math.max(1, Math.ceil(submissions.length / DESKTOP_CARDS_PER_PAGE));
+  }, [isMobile, submissions.length]);
+
+  const visibleItems = useMemo(() => {
+    if (isMobile) {
+      return submissions.slice(page, page + 1);
+    }
+    const startIndex = page * DESKTOP_CARDS_PER_PAGE;
+    return submissions.slice(startIndex, startIndex + DESKTOP_CARDS_PER_PAGE);
+  }, [isMobile, page, submissions]);
+
+  useEffect(() => {
+    setPage(0);
+    setDirection(1);
+    setIsPaused(false);
+  }, [isMobile]);
+
+  useEffect(() => {
+    setPage((currentPage) => Math.min(currentPage, totalSlides - 1));
+  }, [totalSlides]);
+
+  const goToPage = useCallback(
+    (nextPage: number) => {
+      if (nextPage === page || nextPage < 0 || nextPage >= totalSlides) {
+        return;
+      }
+      setDirection(nextPage > page ? 1 : -1);
+      setPage(nextPage);
+    },
+    [page, totalSlides],
+  );
+
+  const goToRelativePage = useCallback(
+    (offset: number) => {
+      if (totalSlides <= 1) {
+        return;
+      }
+      const nextPage = (page + offset + totalSlides) % totalSlides;
+      setDirection(offset > 0 ? 1 : -1);
+      setPage(nextPage);
+    },
+    [page, totalSlides],
+  );
+
+  useEffect(() => {
+    if (fetchState !== 'success' || isPaused || shouldReduceMotion) {
+      return;
+    }
+
+    const carouselTimer = window.setTimeout(() => {
+      if (totalSlides > 1 && page < totalSlides - 1) {
+        goToRelativePage(1);
+        return;
+      }
+      goToRelativePage(1);
+    }, CAROUSEL_INTERVAL_MS);
+
+    return () => {
+      window.clearTimeout(carouselTimer);
+    };
+  }, [
+    fetchState,
+    goToRelativePage,
+    isPaused,
+    page,
+    shouldReduceMotion,
+    totalSlides,
+  ]);
+
+  const handleCarouselKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (totalSlides <= 1) {
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        goToRelativePage(1);
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        goToRelativePage(-1);
+      }
+    },
+    [goToRelativePage, totalSlides],
+  );
+
+  const handleDragEnd = useCallback(
+    (
+      _event: MouseEvent | TouchEvent | globalThis.PointerEvent,
+      info: PanInfo,
+    ) => {
+      if (totalSlides <= 1) {
+        return;
+      }
+      const movedLeft =
+        info.offset.x < -SWIPE_DISTANCE_THRESHOLD ||
+        info.velocity.x < -SWIPE_VELOCITY_THRESHOLD;
+      const movedRight =
+        info.offset.x > SWIPE_DISTANCE_THRESHOLD ||
+        info.velocity.x > SWIPE_VELOCITY_THRESHOLD;
+
+      if (movedLeft) {
+        goToRelativePage(1);
+      } else if (movedRight) {
+        goToRelativePage(-1);
+      }
+    },
+    [goToRelativePage, totalSlides],
+  );
+
+  const pageVariants: Variants = {
+    enter: (slideDirection: number) => ({
+      x: shouldReduceMotion
+        ? 0
+        : slideDirection > 0
+          ? isMobile
+            ? 78
+            : 120
+          : isMobile
+            ? -78
+            : -120,
+      rotateY: shouldReduceMotion
+        ? 0
+        : isMobile
+          ? slideDirection > 0
+            ? 9
+            : -9
+          : 0,
+      opacity: 0,
+      scale: isMobile ? 0.92 : 0.96,
+    }),
+    center: {
+      x: 0,
+      rotateY: 0,
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: shouldReduceMotion ? 0 : isMobile ? 0.82 : 0.74,
+        ease: [0.22, 1, 0.36, 1],
+        staggerChildren: shouldReduceMotion ? 0 : isMobile ? 0 : 0.08,
+        delayChildren: shouldReduceMotion ? 0 : isMobile ? 0 : 0.07,
+      },
+    },
+    exit: (slideDirection: number) => ({
+      x: shouldReduceMotion
+        ? 0
+        : slideDirection > 0
+          ? isMobile
+            ? -72
+            : -100
+          : isMobile
+            ? 72
+            : 100,
+      rotateY: shouldReduceMotion
+        ? 0
+        : isMobile
+          ? slideDirection > 0
+            ? -8
+            : 8
+          : 0,
+      opacity: 0,
+      scale: isMobile ? 0.94 : 0.972,
+      transition: {
+        duration: shouldReduceMotion ? 0 : isMobile ? 0.56 : 0.46,
+        ease: [0.4, 0, 1, 1],
+        staggerChildren: shouldReduceMotion ? 0 : isMobile ? 0 : 0.035,
+        staggerDirection: -1,
+      },
+    }),
+  };
+
+  const isInitialLoading = fetchState === 'idle' || fetchState === 'loading';
+  const showError = fetchState === 'error' && submissions.length === 0;
+  const showEmpty = fetchState === 'success' && submissions.length === 0;
+  const skeletonCount = isMobile ? 1 : DESKTOP_CARDS_PER_PAGE;
+
+  return (
+    <div
+      className="relative min-h-[100svh] overflow-hidden"
+      style={{
+        background:
+          'linear-gradient(180deg, #005257 0%, #39BFC7 50%, #FFFFFF 100%)',
+      }}
+    >
+      <AmbientBackground />
+
+      <div className="relative mx-auto flex min-h-[100svh] w-full max-w-[1400px] flex-col px-4 pb-12 pt-4 sm:px-8 sm:pt-8 lg:px-12">
+        <motion.header
+          variants={headerContainerVariants}
+          initial="hidden"
+          animate="visible"
+          className="mx-auto grid w-full max-w-[1200px] flex-none grid-cols-[52px_minmax(0,1fr)] items-center gap-3 sm:grid-cols-[76px_minmax(0,1fr)_190px] sm:gap-6"
+        >
+          <motion.div
+            variants={headerItemVariants}
+            className="flex justify-start"
+          >
+            <Link href="/home" aria-label="Go to the AirQo homepage">
+              <Image
+                src={AIRQO_LOGO_URL}
+                alt="AirQo"
+                width={78}
+                height={51}
+                priority
+                unoptimized
+                className="h-auto w-[50px] drop-shadow-[0_10px_24px_rgba(0,0,0,0.18)] sm:w-[72px]"
+              />
+            </Link>
+          </motion.div>
+
+          <div className="min-w-0 overflow-hidden">
+            <motion.h1
+              variants={headerItemVariants}
+              className="whitespace-nowrap text-left leading-none text-white"
+            >
+              <span
+                className="text-[clamp(1.2rem,2.6vw,2.6rem)] font-normal tracking-[-0.05em]"
+                style={{
+                  fontFamily:
+                    '"Brush Script MT", "Segoe Script", "URW Chancery L", cursive',
+                }}
+              >
+                Faces of{' '}
+              </span>
+              <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
+                Air Quality
+              </span>
+            </motion.h1>
+
+            <motion.div
+              variants={headerItemVariants}
+              className="mt-1 text-[9px] leading-tight text-white/85 sm:hidden"
+            >
+              <span className="font-bold">{EVENT_LABEL}</span>
+              <span aria-hidden="true"> • </span>
+              <span className="italic">{EVENT_LOCATION_AND_YEAR}</span>
+            </motion.div>
+          </div>
+
+          <motion.div
+            variants={headerItemVariants}
+            className="hidden text-left text-white sm:block"
+          >
+            <p className="text-[13px] font-bold leading-tight">{EVENT_LABEL}</p>
+            <p className="mt-0.5 text-[13px] italic text-white/85">
+              {EVENT_LOCATION_AND_YEAR}
+            </p>
+          </motion.div>
+        </motion.header>
+
+        <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col items-center justify-center overflow-hidden pt-6 sm:pt-10">
+          <section
+            tabIndex={0}
+            aria-label="Faces of Air Quality selfie carousel"
+            aria-roledescription="carousel"
+            className="flex w-full flex-col items-center"
+            onKeyDown={handleCarouselKeyDown}
+            onMouseEnter={() => {
+              if (!isMobile) setIsPaused(true);
+            }}
+            onMouseLeave={() => {
+              if (!isMobile) setIsPaused(false);
+            }}
+            onFocusCapture={() => {
+              if (!isMobile) setIsPaused(true);
+            }}
+            onBlurCapture={() => {
+              if (!isMobile) setIsPaused(false);
+            }}
+          >
+            <AnimatePresence mode="wait" initial={false}>
+              {isInitialLoading && (
+                <motion.div
+                  key="loading"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0, scale: 0.985 }}
+                  transition={{
+                    duration: shouldReduceMotion ? 0 : 0.64,
+                  }}
+                  className={
+                    isMobile
+                      ? 'flex w-full items-center justify-center'
+                      : 'grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
+                  }
+                >
+                  {Array.from({ length: skeletonCount }).map((_, index) => (
+                    <div
+                      key={index}
+                      className={
+                        isMobile
+                          ? 'w-full'
+                          : 'w-full max-w-[320px] lg:max-w-[360px] xl:max-w-[400px]'
+                      }
+                      style={
+                        isMobile
+                          ? {
+                              width: 'min(86vw, calc(100svh - 205px), 360px)',
+                            }
+                          : undefined
+                      }
+                    >
+                      <SkeletonCard
+                        index={index}
+                        reduceMotion={shouldReduceMotion}
+                      />
+                    </div>
+                  ))}
+                </motion.div>
+              )}
+
+              {showError && (
+                <ErrorState
+                  key="error"
+                  reduceMotion={shouldReduceMotion}
+                  onRetry={() => void fetchSubmissions()}
+                />
+              )}
+
+              {showEmpty && (
+                <EmptyState key="empty" reduceMotion={shouldReduceMotion} />
+              )}
+
+              {!isInitialLoading && !showError && !showEmpty ? (
+                <motion.div
+                  key="content"
+                  initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -12 }}
+                  transition={{
+                    duration: shouldReduceMotion ? 0 : 0.68,
+                    ease: [0.22, 1, 0.36, 1],
+                  }}
+                  className="flex w-full flex-col items-center"
+                >
+                  <AnimatePresence
+                    initial={false}
+                    mode="wait"
+                    custom={direction}
+                  >
+                    <motion.div
+                      key={`${isMobile ? 'mobile' : 'desktop'}-${page}`}
+                      custom={direction}
+                      variants={pageVariants}
+                      initial="enter"
+                      animate="center"
+                      exit="exit"
+                      aria-live="polite"
+                      drag={
+                        totalSlides > 1 && !shouldReduceMotion ? 'x' : false
+                      }
+                      dragConstraints={{ left: 0, right: 0 }}
+                      dragElastic={isMobile ? 0.2 : 0.14}
+                      dragMomentum={false}
+                      onDragEnd={handleDragEnd}
+                      style={{ transformPerspective: 1200 }}
+                      className={
+                        isMobile
+                          ? 'flex touch-pan-y cursor-grab items-center justify-center active:cursor-grabbing'
+                          : 'grid touch-pan-y cursor-grab grid-cols-1 justify-items-center gap-4 active:cursor-grabbing sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
+                      }
+                    >
+                      {visibleItems.map((submission, index) => (
+                        <div
+                          key={submission.id}
+                          className={
+                            isMobile
+                              ? 'w-full'
+                              : 'w-full max-w-[320px] lg:max-w-[360px] xl:max-w-[400px]'
+                          }
+                          style={
+                            isMobile
+                              ? {
+                                  width:
+                                    'min(86vw, calc(100svh - 205px), 360px)',
+                                }
+                              : undefined
+                          }
+                        >
+                          <FaceCard
+                            submission={submission}
+                            priority={
+                              isMobile ? page === 0 : page === 0 && index < 3
+                            }
+                            reduceMotion={shouldReduceMotion}
+                          />
+                        </div>
+                      ))}
+                    </motion.div>
+                  </AnimatePresence>
+
+                  {totalSlides > 1 && (
+                    <>
+                      <MobilePagination
+                        page={page}
+                        totalPages={totalSlides}
+                        reduceMotion={shouldReduceMotion}
+                      />
+
+                      <DesktopPagination
+                        page={page}
+                        totalPages={totalSlides}
+                        isPaused={isPaused}
+                        reduceMotion={shouldReduceMotion}
+                        onPageChange={goToPage}
+                      />
+                    </>
+                  )}
+                </motion.div>
+              ) : null}
+            </AnimatePresence>
+          </section>
+        </main>
+
+        <QrCodeButton src="/clean-air-forum-2026/cleanair.jpeg" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
index bd196974a8..ef0d5059be 100644
--- a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
+++ b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
@@ -1101,19 +1101,19 @@ export default function FacesOfCleanAirPage() {
             </Link>
           </motion.div>
 
-          <div className="min-w-0">
+          <div className="min-w-0 overflow-hidden">
             <motion.h1
               variants={headerItemVariants}
               className="whitespace-nowrap text-left leading-none text-white"
             >
               {isLeaderboardStage ? (
-                <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+                <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                   {LEADERBOARD_TITLE}
                 </span>
               ) : (
                 <>
                   <span
-                    className="text-[25px] font-normal tracking-[-0.05em] sm:text-[42px]"
+                    className="text-[clamp(1.2rem,2.6vw,2.6rem)] font-normal tracking-[-0.05em]"
                     style={{
                       fontFamily:
                         '"Brush Script MT", "Segoe Script", "URW Chancery L", cursive',
@@ -1121,7 +1121,7 @@ export default function FacesOfCleanAirPage() {
                   >
                     {FACES_TITLE_PREFIX}
                   </span>{' '}
-                  <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+                  <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                     {FACES_TITLE_MAIN}
                   </span>
                 </>
@@ -1150,7 +1150,7 @@ export default function FacesOfCleanAirPage() {
           </motion.div>
         </motion.header>
 
-        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
+        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center overflow-hidden pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
           <section
             tabIndex={0}
             aria-label={

From 77bec0b7f3c4014b78771a9f69dd864107230982 Mon Sep 17 00:00:00 2001
From: Paul Ochieng Levi <ochiengpaul442@gmail.com>
Date: Mon, 13 Jul 2026 20:08:28 +0300
Subject: [PATCH 2/6] feat: add selfie components for Clean Air Forum 2026 and
 enhance leaderboard title styling

---
 .../clean-air-forum-2026/QrCodeButton.tsx     |   2 +-
 .../selfie-components.tsx                     | 465 +++++++++++++
 src/website/src/components/layout/Footer.tsx  |   2 +-
 .../screens/LandingScreen.tsx                 |   3 -
 .../screens/LeaderboardScreen.tsx             |   2 +-
 .../screens/QuizScreen.tsx                    |   4 -
 .../screens/SelfiesScreen.tsx                 | 634 ++++--------------
 .../FacesOfCleanAirPage.tsx                   |   2 +-
 8 files changed, 581 insertions(+), 533 deletions(-)
 create mode 100644 src/website/src/components/clean-air-forum-2026/selfie-components.tsx

diff --git a/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx b/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
index 0b57210e63..dc7cb35c73 100644
--- a/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
+++ b/src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
@@ -15,7 +15,7 @@ export default function QrCodeButton({ src = QR_IMAGE_SRC }: { src?: string }) {
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="absolute right-3 top-4 z-20 hidden cursor-pointer sm:right-6 sm:top-6 sm:block lg:right-8 lg:top-8"
+        className="absolute bottom-4 right-3 z-20 hidden cursor-pointer sm:bottom-8 sm:right-6 sm:block lg:bottom-10 lg:right-8"
         aria-label="Open QR code in full view"
       >
         <div className="flex flex-col items-center gap-1">
diff --git a/src/website/src/components/clean-air-forum-2026/selfie-components.tsx b/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
new file mode 100644
index 0000000000..6c165416ae
--- /dev/null
+++ b/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
@@ -0,0 +1,465 @@
+'use client';
+
+import {
+  motion,
+  type PanInfo,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  type Variants,
+} from 'framer-motion';
+import Image from 'next/image';
+import {
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { FiCamera } from 'react-icons/fi';
+
+import type { CleanAirSubmissionWithId } from '@/services/external/faces-of-clean-air.service';
+
+export const CAROUSEL_INTERVAL_MS = 7600;
+export const SWIPE_DISTANCE_THRESHOLD = 70;
+export const SWIPE_VELOCITY_THRESHOLD = 500;
+export const MOBILE_MEDIA_QUERY = '(max-width: 639px)';
+export const DESKTOP_CARDS_PER_PAGE = 8;
+
+const SMOOTH_SPRING = { stiffness: 150, damping: 25, mass: 0.9 };
+
+export const headerContainerVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: { delayChildren: 0.1, staggerChildren: 0.16 },
+  },
+};
+
+export const headerItemVariants: Variants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.78, ease: [0.22, 1, 0.36, 1] },
+  },
+};
+
+const cardVariants: Variants = {
+  enter: { opacity: 0, y: 28, scale: 0.94 },
+  center: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: -16, scale: 0.96 },
+};
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    const updateMatch = () => setMatches(mediaQuery.matches);
+    updateMatch();
+    mediaQuery.addEventListener('change', updateMatch);
+    return () => mediaQuery.removeEventListener('change', updateMatch);
+  }, [query]);
+
+  return matches;
+}
+
+export function FaceCard({
+  submission,
+  priority,
+  reduceMotion,
+}: {
+  submission: CleanAirSubmissionWithId;
+  priority: boolean;
+  reduceMotion: boolean | null;
+}) {
+  const pointerX = useMotionValue(0.5);
+  const pointerY = useMotionValue(0.5);
+
+  const transformedRotateX = useTransform(pointerY, [0, 1], [5, -5]);
+  const transformedRotateY = useTransform(pointerX, [0, 1], [-5, 5]);
+
+  const rotateX = useSpring(transformedRotateX, SMOOTH_SPRING);
+  const rotateY = useSpring(transformedRotateY, SMOOTH_SPRING);
+
+  const displayName =
+    submission.displayName?.trim() ||
+    submission.locationName?.trim() ||
+    'Clean Air Champion';
+
+  const location =
+    submission.locationName?.trim() || 'Pretoria, Gauteng, South Africa';
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLElement>) => {
+      if (reduceMotion || event.pointerType !== 'mouse') return;
+
+      const cardBounds = event.currentTarget.getBoundingClientRect();
+      const relativeX = (event.clientX - cardBounds.left) / cardBounds.width;
+      const relativeY = (event.clientY - cardBounds.top) / cardBounds.height;
+
+      pointerX.set(Math.min(Math.max(relativeX, 0), 1));
+      pointerY.set(Math.min(Math.max(relativeY, 0), 1));
+    },
+    [pointerX, pointerY, reduceMotion],
+  );
+
+  const resetPointerPosition = useCallback(() => {
+    pointerX.set(0.5);
+    pointerY.set(0.5);
+  }, [pointerX, pointerY]);
+
+  return (
+    <motion.article
+      layout
+      variants={cardVariants}
+      transition={{
+        duration: reduceMotion ? 0 : 0.68,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      whileHover={
+        reduceMotion
+          ? undefined
+          : {
+              y: -8,
+              scale: 1.015,
+              transition: { type: 'spring', stiffness: 240, damping: 24 },
+            }
+      }
+      whileTap={reduceMotion ? undefined : { scale: 0.986 }}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={resetPointerPosition}
+      style={{
+        rotateX: reduceMotion ? 0 : rotateX,
+        rotateY: reduceMotion ? 0 : rotateY,
+        transformPerspective: 1000,
+      }}
+      className="group relative aspect-square w-full overflow-hidden rounded-xl border border-white/15 bg-[#005257] shadow-[0_28px_70px_-35px_rgba(2,6,23,0.95)] [transform-style:preserve-3d] will-change-transform"
+    >
+      <Image
+        src={submission.imageUrl}
+        alt={`${displayName} at ${location}`}
+        fill
+        priority={priority}
+        unoptimized
+        className="object-contain transition-transform duration-1000 ease-out sm:group-hover:scale-[1.05]"
+        sizes="(max-width: 639px) 86vw, (max-width: 1023px) 42vw, (max-width: 1279px) 25vw, 22vw"
+      />
+    </motion.article>
+  );
+}
+
+export function SkeletonCard({
+  index,
+  reduceMotion,
+}: {
+  index: number;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 24, scale: 0.96 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{
+        duration: reduceMotion ? 0 : 0.62,
+        delay: reduceMotion ? 0 : index * 0.075,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="relative aspect-square w-full overflow-hidden rounded-xl border border-white/15 bg-white/20 shadow-[0_24px_60px_-32px_rgba(2,6,23,0.8)] backdrop-blur-md"
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-white/30 via-[#39BFC7]/15 to-[#39BFC7]/20" />
+
+      {!reduceMotion && (
+        <motion.div
+          className="absolute inset-y-0 -left-[75%] w-[65%] skew-x-[-18deg] bg-gradient-to-r from-transparent via-white/45 to-transparent"
+          animate={{ x: ['0%', '330%'] }}
+          transition={{
+            duration: 2.15,
+            delay: index * 0.1,
+            repeat: Infinity,
+            repeatDelay: 0.7,
+            ease: 'easeInOut',
+          }}
+        />
+      )}
+
+      <div className="absolute left-3 top-3 flex items-center gap-2">
+        <div className="h-6 w-10 rounded-full bg-white/35" />
+        <div className="space-y-1">
+          <div className="h-2 w-16 rounded-full bg-white/35" />
+          <div className="h-2 w-12 rounded-full bg-white/25" />
+        </div>
+      </div>
+
+      <div className="absolute inset-x-0 bottom-0 h-[50%] bg-gradient-to-t from-[#005257]/80 via-[#39BFC7]/50 to-transparent" />
+
+      <div className="absolute inset-x-3 bottom-3 space-y-2">
+        <div className="h-5 w-3/4 rounded-full bg-white/45" />
+        <div className="h-2 w-1/2 rounded-full bg-white/30" />
+        <div className="flex items-end gap-2">
+          <div className="h-8 w-16 rounded-lg bg-white/45" />
+          <div className="h-4 w-14 rounded-full bg-white/35" />
+        </div>
+        <div className="flex justify-between border-t border-white/15 pt-2">
+          <div className="h-4 w-24 rounded-full bg-white/35" />
+          <div className="h-3 w-20 rounded-full bg-white/25" />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export function SelfieEmptyState({
+  reduceMotion,
+}: {
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 26, scale: 0.96 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -16, scale: 0.97 }}
+      transition={{
+        duration: reduceMotion ? 0 : 0.68,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
+    >
+      <div className="relative mb-4 flex h-14 w-14 items-center justify-center sm:mb-5 sm:h-16 sm:w-16">
+        {!reduceMotion && (
+          <>
+            <motion.span
+              className="absolute inset-0 rounded-full border border-white/25"
+              animate={{ scale: [1, 1.65], opacity: [0.55, 0] }}
+              transition={{ duration: 2.6, repeat: Infinity, ease: 'easeOut' }}
+            />
+            <motion.span
+              className="absolute inset-0 rounded-full border border-[#39BFC7]/30"
+              animate={{ scale: [1, 1.45], opacity: [0.45, 0] }}
+              transition={{
+                duration: 2.6,
+                delay: 0.9,
+                repeat: Infinity,
+                ease: 'easeOut',
+              }}
+            />
+          </>
+        )}
+
+        <motion.div
+          animate={
+            reduceMotion ? undefined : { y: [0, -4, 0], rotate: [0, -2, 2, 0] }
+          }
+          transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
+          className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border border-white/25 bg-white/20 shadow-lg backdrop-blur-md sm:h-14 sm:w-14"
+        >
+          <FiCamera className="h-6 w-6 text-white sm:h-7 sm:w-7" />
+        </motion.div>
+      </div>
+
+      <h2 className="text-lg font-bold text-white sm:text-xl">No faces yet</h2>
+
+      <p className="mt-2 max-w-sm text-xs leading-5 text-[#072b31]/70 sm:text-sm sm:leading-6">
+        Be the first to share an air quality selfie from the Africa Clean Air
+        Forum.
+      </p>
+    </motion.div>
+  );
+}
+
+export function SelfieErrorState({
+  onRetry,
+  reduceMotion,
+}: {
+  onRetry: () => void;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 22, scale: 0.97 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -14, scale: 0.98 }}
+      role="alert"
+      transition={{
+        duration: reduceMotion ? 0 : 0.64,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
+    >
+      <h2 className="text-lg font-bold text-white sm:text-xl">
+        Could not load selfies
+      </h2>
+
+      <p className="mt-2 text-xs leading-5 text-[#072b31]/70 sm:text-sm sm:leading-6">
+        Please check the connection and try again.
+      </p>
+
+      <motion.button
+        type="button"
+        onClick={onRetry}
+        whileHover={reduceMotion ? undefined : { scale: 1.04, y: -2 }}
+        whileTap={reduceMotion ? undefined : { scale: 0.96 }}
+        className="mt-5 rounded-lg bg-[#39BFC7] px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-[#005257]/20 transition-colors hover:bg-[#39BFC7]/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#39BFC7]"
+      >
+        Try again
+      </motion.button>
+    </motion.div>
+  );
+}
+
+export function SelfieDesktopPagination({
+  page,
+  totalPages,
+  isPaused,
+  reduceMotion,
+  onPageChange,
+  layoutId = 'active-carousel-indicator',
+}: {
+  page: number;
+  totalPages: number;
+  isPaused: boolean;
+  reduceMotion: boolean | null;
+  onPageChange: (page: number) => void;
+  layoutId?: string;
+}) {
+  return (
+    <nav
+      className="mt-8 hidden items-center justify-center gap-3 sm:flex"
+      aria-label="Selfie carousel pages"
+    >
+      {Array.from({ length: totalPages }).map((_, index) => {
+        const isActive = index === page;
+
+        return (
+          <motion.button
+            layout
+            key={index}
+            type="button"
+            onClick={() => onPageChange(index)}
+            aria-label={`Show selfie page ${index + 1} of ${totalPages}`}
+            aria-current={isActive ? 'page' : undefined}
+            whileHover={reduceMotion ? undefined : { scale: 1.1, y: -1 }}
+            whileTap={reduceMotion ? undefined : { scale: 0.92 }}
+            transition={{ type: 'spring', stiffness: 320, damping: 30 }}
+            className={`relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent ${
+              isActive
+                ? 'w-11 bg-white/30'
+                : 'w-2.5 bg-white/30 hover:bg-white/50'
+            }`}
+          >
+            {isActive && (
+              <>
+                <motion.span
+                  layoutId={layoutId}
+                  className="absolute inset-0 rounded-full bg-[#39BFC7]/20"
+                  transition={{
+                    type: 'spring',
+                    stiffness: 320,
+                    damping: 32,
+                  }}
+                />
+
+                {!reduceMotion && !isPaused && (
+                  <motion.span
+                    key={`desktop-progress-${page}`}
+                    initial={{ scaleX: 0 }}
+                    animate={{ scaleX: 1 }}
+                    transition={{
+                      duration: CAROUSEL_INTERVAL_MS / 1000,
+                      ease: 'linear',
+                    }}
+                    className="absolute inset-0 origin-left rounded-full bg-[#39BFC7]"
+                  />
+                )}
+
+                {(reduceMotion || isPaused) && (
+                  <span className="absolute inset-0 rounded-full bg-[#39BFC7]" />
+                )}
+              </>
+            )}
+          </motion.button>
+        );
+      })}
+    </nav>
+  );
+}
+
+export function SelfieMobilePagination({
+  page,
+  totalPages,
+  reduceMotion,
+}: {
+  page: number;
+  totalPages: number;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <div
+      className="mt-3 flex items-center justify-center gap-3 sm:hidden"
+      aria-label={`Selfie ${page + 1} of ${totalPages}`}
+    >
+      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/20">
+        <motion.div
+          key={`mobile-progress-${page}`}
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{
+            duration: reduceMotion ? 0 : CAROUSEL_INTERVAL_MS / 1000,
+            ease: 'linear',
+          }}
+          className="h-full origin-left rounded-full bg-white"
+        />
+      </div>
+
+      <span className="min-w-[38px] text-center text-[11px] font-semibold tabular-nums text-white/85">
+        {page + 1}/{totalPages}
+      </span>
+    </div>
+  );
+}
+
+export function useSelfieCarouselKeyboard(
+  totalSlides: number,
+  goToRelativePage: (offset: number) => void,
+) {
+  return useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (totalSlides <= 1) return;
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        goToRelativePage(1);
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        goToRelativePage(-1);
+      }
+    },
+    [goToRelativePage, totalSlides],
+  );
+}
+
+export function useSelfieDragEnd(
+  totalSlides: number,
+  goToRelativePage: (offset: number) => void,
+) {
+  return useCallback(
+    (
+      _event: MouseEvent | TouchEvent | globalThis.PointerEvent,
+      info: PanInfo,
+    ) => {
+      if (totalSlides <= 1) return;
+
+      const movedLeft =
+        info.offset.x < -SWIPE_DISTANCE_THRESHOLD ||
+        info.velocity.x < -SWIPE_VELOCITY_THRESHOLD;
+      const movedRight =
+        info.offset.x > SWIPE_DISTANCE_THRESHOLD ||
+        info.velocity.x > SWIPE_VELOCITY_THRESHOLD;
+
+      if (movedLeft) goToRelativePage(1);
+      else if (movedRight) goToRelativePage(-1);
+    },
+    [goToRelativePage, totalSlides],
+  );
+}
diff --git a/src/website/src/components/layout/Footer.tsx b/src/website/src/components/layout/Footer.tsx
index fab9d7e783..f89b01a375 100644
--- a/src/website/src/components/layout/Footer.tsx
+++ b/src/website/src/components/layout/Footer.tsx
@@ -43,7 +43,7 @@ const footerLinks = {
       label: 'Faces of Clean Air',
       href: '/africa-clean-air-forum-2026/faces-of-clean-air',
     },
-    { label: 'Selfies', href: '/africa-clean-air-forum-2026/selfies' },
+    { label: 'Clean Air Faces', href: '/africa-clean-air-forum-2026/selfies' },
     { label: 'Air Quality Quiz', href: '/africa-clean-air-forum-2026/quiz' },
     {
       label: 'Quiz Leaderboard',
diff --git a/src/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsx
index 1ad1c39297..d428062f07 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsx
@@ -7,7 +7,6 @@ import { useRouter } from 'next/navigation';
 import { FormEvent, useState } from 'react';
 
 import AmbientBackground from '@/components/clean-air-forum-2026/AmbientBackground';
-import QrCodeButton from '@/components/clean-air-forum-2026/QrCodeButton';
 import Screen from '@/components/clean-air-forum-2026/Screen';
 import { Button } from '@/components/ui/button';
 import {
@@ -220,8 +219,6 @@ export default function LandingScreen() {
             </motion.form>
           </main>
         </div>
-
-        <QrCodeButton />
       </div>
     </Screen>
   );
diff --git a/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
index 8a5a8cfb03..b62d5c8c8e 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
@@ -295,7 +295,7 @@ export default function LeaderboardScreen() {
               variants={headerItemVariants}
               className="whitespace-nowrap text-left leading-none text-white"
             >
-              <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
+              <span className="block truncate text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                 {LEADERBOARD_TITLE}
               </span>
             </motion.h1>
diff --git a/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
index 16389ee4c0..ddc3155659 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
@@ -7,7 +7,6 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 
 import AmbientBackground from '@/components/clean-air-forum-2026/AmbientBackground';
-import QrCodeButton from '@/components/clean-air-forum-2026/QrCodeButton';
 import Screen from '@/components/clean-air-forum-2026/Screen';
 import { Button } from '@/components/ui/button';
 import {
@@ -479,7 +478,6 @@ export default function QuizScreen() {
             </p>
           </motion.div>
         </motion.header>
-        <QrCodeButton />
       </Screen>
     );
   }
@@ -589,7 +587,6 @@ export default function QuizScreen() {
             </div>
           </div>
         </section>
-        <QrCodeButton />
       </Screen>
     );
   }
@@ -759,7 +756,6 @@ export default function QuizScreen() {
           </div>
         </div>
       </section>
-      <QrCodeButton />
     </Screen>
   );
 }
diff --git a/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
index 769bc4a315..9ff748484c 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
@@ -1,26 +1,29 @@
 'use client';
 
-import {
-  AnimatePresence,
-  motion,
-  type PanInfo,
-  type Variants,
-} from 'framer-motion';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
 import { useReducedMotion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
-import {
-  type KeyboardEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { FiCamera } from 'react-icons/fi';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import AmbientBackground from '@/components/clean-air-forum-2026/AmbientBackground';
 import QrCodeButton from '@/components/clean-air-forum-2026/QrCodeButton';
+import {
+  CAROUSEL_INTERVAL_MS,
+  DESKTOP_CARDS_PER_PAGE,
+  FaceCard,
+  headerContainerVariants,
+  headerItemVariants,
+  MOBILE_MEDIA_QUERY,
+  SelfieDesktopPagination,
+  SelfieEmptyState,
+  SelfieErrorState,
+  SelfieMobilePagination,
+  SkeletonCard,
+  useMediaQuery,
+  useSelfieCarouselKeyboard,
+  useSelfieDragEnd,
+} from '@/components/clean-air-forum-2026/selfie-components';
 import {
   CLEAN_AIR_FORUM_CURRENT_EVENT_ID,
   CLEAN_AIR_FORUM_WALL_ACTIVE_POLL_INTERVAL_MS,
@@ -32,377 +35,9 @@ import type { CleanAirSubmissionWithId } from '@/services/external/faces-of-clea
 const AIRQO_LOGO_URL = '/assets/images/white-logo.png';
 const EVENT_LABEL = 'Africa Clean Air Forum';
 const EVENT_LOCATION_AND_YEAR = 'Pretoria 2026';
-const CAROUSEL_INTERVAL_MS = 7600;
-const SWIPE_DISTANCE_THRESHOLD = 70;
-const SWIPE_VELOCITY_THRESHOLD = 500;
-const MOBILE_MEDIA_QUERY = '(max-width: 639px)';
-const DESKTOP_CARDS_PER_PAGE = 8;
-
-const headerContainerVariants: Variants = {
-  hidden: {},
-  visible: {
-    transition: {
-      delayChildren: 0.1,
-      staggerChildren: 0.16,
-    },
-  },
-};
-
-const headerItemVariants: Variants = {
-  hidden: { opacity: 0, y: -20 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.78, ease: [0.22, 1, 0.36, 1] },
-  },
-};
-
-const cardVariants: Variants = {
-  enter: { opacity: 0, y: 28, scale: 0.94 },
-  center: { opacity: 1, y: 0, scale: 1 },
-  exit: { opacity: 0, y: -16, scale: 0.96 },
-};
 
 type FetchState = 'idle' | 'loading' | 'success' | 'error';
 
-function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false);
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    const updateMatch = () => setMatches(mediaQuery.matches);
-    updateMatch();
-    mediaQuery.addEventListener('change', updateMatch);
-    return () => mediaQuery.removeEventListener('change', updateMatch);
-  }, [query]);
-
-  return matches;
-}
-
-function FaceCard({
-  submission,
-  priority,
-  reduceMotion,
-}: {
-  submission: CleanAirSubmissionWithId;
-  priority: boolean;
-  reduceMotion: boolean | null;
-}) {
-  const displayName =
-    submission.displayName?.trim() ||
-    submission.locationName?.trim() ||
-    'Clean Air Champion';
-
-  const location =
-    submission.locationName?.trim() || 'Pretoria, Gauteng, South Africa';
-
-  return (
-    <motion.article
-      layout
-      variants={cardVariants}
-      transition={{
-        duration: reduceMotion ? 0 : 0.68,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      whileHover={
-        reduceMotion
-          ? undefined
-          : {
-              y: -8,
-              scale: 1.015,
-              transition: { type: 'spring', stiffness: 240, damping: 24 },
-            }
-      }
-      whileTap={reduceMotion ? undefined : { scale: 0.986 }}
-      className="group relative aspect-square w-full overflow-hidden rounded-xl border border-white/15 bg-[#005257] shadow-[0_28px_70px_-35px_rgba(2,6,23,0.95)] [transform-style:preserve-3d] will-change-transform"
-    >
-      <Image
-        src={submission.imageUrl}
-        alt={`${displayName} at ${location}`}
-        fill
-        priority={priority}
-        unoptimized
-        className="object-contain transition-transform duration-1000 ease-out sm:group-hover:scale-[1.05]"
-        sizes="(max-width: 639px) 86vw, (max-width: 1023px) 42vw, (max-width: 1279px) 25vw, 22vw"
-      />
-    </motion.article>
-  );
-}
-
-function SkeletonCard({
-  index,
-  reduceMotion,
-}: {
-  index: number;
-  reduceMotion: boolean | null;
-}) {
-  return (
-    <motion.div
-      initial={reduceMotion ? false : { opacity: 0, y: 24, scale: 0.96 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      transition={{
-        duration: reduceMotion ? 0 : 0.62,
-        delay: reduceMotion ? 0 : index * 0.075,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      className="relative aspect-square w-full overflow-hidden rounded-xl border border-white/15 bg-white/20 shadow-[0_24px_60px_-32px_rgba(2,6,23,0.8)] backdrop-blur-md"
-      aria-hidden="true"
-    >
-      <div className="absolute inset-0 bg-gradient-to-br from-white/30 via-[#39BFC7]/15 to-[#39BFC7]/20" />
-
-      {!reduceMotion && (
-        <motion.div
-          className="absolute inset-y-0 -left-[75%] w-[65%] skew-x-[-18deg] bg-gradient-to-r from-transparent via-white/45 to-transparent"
-          animate={{ x: ['0%', '330%'] }}
-          transition={{
-            duration: 2.15,
-            delay: index * 0.1,
-            repeat: Infinity,
-            repeatDelay: 0.7,
-            ease: 'easeInOut',
-          }}
-        />
-      )}
-
-      <div className="absolute left-3 top-3 flex items-center gap-2">
-        <div className="h-6 w-10 rounded-full bg-white/35" />
-        <div className="space-y-1">
-          <div className="h-2 w-16 rounded-full bg-white/35" />
-          <div className="h-2 w-12 rounded-full bg-white/25" />
-        </div>
-      </div>
-
-      <div className="absolute inset-x-0 bottom-0 h-[50%] bg-gradient-to-t from-[#005257]/80 via-[#39BFC7]/50 to-transparent" />
-
-      <div className="absolute inset-x-3 bottom-3 space-y-2">
-        <div className="h-5 w-3/4 rounded-full bg-white/45" />
-        <div className="h-2 w-1/2 rounded-full bg-white/30" />
-        <div className="flex items-end gap-2">
-          <div className="h-8 w-16 rounded-lg bg-white/45" />
-          <div className="h-4 w-14 rounded-full bg-white/35" />
-        </div>
-        <div className="flex justify-between border-t border-white/15 pt-2">
-          <div className="h-4 w-24 rounded-full bg-white/35" />
-          <div className="h-3 w-20 rounded-full bg-white/25" />
-        </div>
-      </div>
-    </motion.div>
-  );
-}
-
-function EmptyState({ reduceMotion }: { reduceMotion: boolean | null }) {
-  return (
-    <motion.div
-      initial={reduceMotion ? false : { opacity: 0, y: 26, scale: 0.96 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      exit={{ opacity: 0, y: -16, scale: 0.97 }}
-      transition={{
-        duration: reduceMotion ? 0 : 0.68,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
-    >
-      <div className="relative mb-4 flex h-14 w-14 items-center justify-center sm:mb-5 sm:h-16 sm:w-16">
-        {!reduceMotion && (
-          <>
-            <motion.span
-              className="absolute inset-0 rounded-full border border-white/25"
-              animate={{ scale: [1, 1.65], opacity: [0.55, 0] }}
-              transition={{
-                duration: 2.6,
-                repeat: Infinity,
-                ease: 'easeOut',
-              }}
-            />
-            <motion.span
-              className="absolute inset-0 rounded-full border border-[#39BFC7]/30"
-              animate={{ scale: [1, 1.45], opacity: [0.45, 0] }}
-              transition={{
-                duration: 2.6,
-                delay: 0.9,
-                repeat: Infinity,
-                ease: 'easeOut',
-              }}
-            />
-          </>
-        )}
-
-        <motion.div
-          animate={
-            reduceMotion ? undefined : { y: [0, -4, 0], rotate: [0, -2, 2, 0] }
-          }
-          transition={{
-            duration: 4,
-            repeat: Infinity,
-            ease: 'easeInOut',
-          }}
-          className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border border-white/25 bg-white/20 shadow-lg backdrop-blur-md sm:h-14 sm:w-14"
-        >
-          <FiCamera className="h-6 w-6 text-white sm:h-7 sm:w-7" />
-        </motion.div>
-      </div>
-
-      <h2 className="text-lg font-bold text-white sm:text-xl">
-        No selfies yet
-      </h2>
-
-      <p className="mt-2 max-w-sm text-xs leading-5 text-[#072b31]/70 sm:text-sm sm:leading-6">
-        Be the first to share an air quality selfie from the Africa Clean Air
-        Forum.
-      </p>
-    </motion.div>
-  );
-}
-
-function ErrorState({
-  onRetry,
-  reduceMotion,
-}: {
-  onRetry: () => void;
-  reduceMotion: boolean | null;
-}) {
-  return (
-    <motion.div
-      initial={reduceMotion ? false : { opacity: 0, y: 22, scale: 0.97 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      exit={{ opacity: 0, y: -14, scale: 0.98 }}
-      role="alert"
-      transition={{
-        duration: reduceMotion ? 0 : 0.64,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
-    >
-      <h2 className="text-lg font-bold text-white sm:text-xl">
-        Could not load selfies
-      </h2>
-
-      <p className="mt-2 text-xs leading-5 text-[#072b31]/70 sm:text-sm sm:leading-6">
-        Please check the connection and try again.
-      </p>
-
-      <motion.button
-        type="button"
-        onClick={onRetry}
-        whileHover={reduceMotion ? undefined : { scale: 1.04, y: -2 }}
-        whileTap={reduceMotion ? undefined : { scale: 0.96 }}
-        className="mt-5 rounded-lg bg-[#39BFC7] px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-[#005257]/20 transition-colors hover:bg-[#39BFC7]/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#39BFC7]"
-      >
-        Try again
-      </motion.button>
-    </motion.div>
-  );
-}
-
-function DesktopPagination({
-  page,
-  totalPages,
-  isPaused,
-  reduceMotion,
-  onPageChange,
-}: {
-  page: number;
-  totalPages: number;
-  isPaused: boolean;
-  reduceMotion: boolean | null;
-  onPageChange: (page: number) => void;
-}) {
-  return (
-    <nav
-      className="mt-8 hidden items-center justify-center gap-3 sm:flex"
-      aria-label="Selfie carousel pages"
-    >
-      {Array.from({ length: totalPages }).map((_, index) => {
-        const isActive = index === page;
-
-        return (
-          <motion.button
-            layout
-            key={index}
-            type="button"
-            onClick={() => onPageChange(index)}
-            aria-label={`Show selfie page ${index + 1} of ${totalPages}`}
-            aria-current={isActive ? 'page' : undefined}
-            whileHover={reduceMotion ? undefined : { scale: 1.1, y: -1 }}
-            whileTap={reduceMotion ? undefined : { scale: 0.92 }}
-            transition={{ type: 'spring', stiffness: 320, damping: 30 }}
-            className={`relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent ${
-              isActive
-                ? 'w-11 bg-white/30'
-                : 'w-2.5 bg-white/30 hover:bg-white/50'
-            }`}
-          >
-            {isActive && (
-              <>
-                <motion.span
-                  layoutId="active-selfies-indicator"
-                  className="absolute inset-0 rounded-full bg-[#39BFC7]/20"
-                  transition={{
-                    type: 'spring',
-                    stiffness: 320,
-                    damping: 32,
-                  }}
-                />
-
-                {!reduceMotion && !isPaused && (
-                  <motion.span
-                    key={`desktop-progress-${page}`}
-                    initial={{ scaleX: 0 }}
-                    animate={{ scaleX: 1 }}
-                    transition={{
-                      duration: CAROUSEL_INTERVAL_MS / 1000,
-                      ease: 'linear',
-                    }}
-                    className="absolute inset-0 origin-left rounded-full bg-[#39BFC7]"
-                  />
-                )}
-
-                {(reduceMotion || isPaused) && (
-                  <span className="absolute inset-0 rounded-full bg-[#39BFC7]" />
-                )}
-              </>
-            )}
-          </motion.button>
-        );
-      })}
-    </nav>
-  );
-}
-
-function MobilePagination({
-  page,
-  totalPages,
-  reduceMotion,
-}: {
-  page: number;
-  totalPages: number;
-  reduceMotion: boolean | null;
-}) {
-  return (
-    <div
-      className="mt-3 flex items-center justify-center gap-3 sm:hidden"
-      aria-label={`Selfie ${page + 1} of ${totalPages}`}
-    >
-      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/20">
-        <motion.div
-          key={`mobile-progress-${page}`}
-          initial={{ scaleX: 0 }}
-          animate={{ scaleX: 1 }}
-          transition={{
-            duration: reduceMotion ? 0 : CAROUSEL_INTERVAL_MS / 1000,
-            ease: 'linear',
-          }}
-          className="h-full origin-left rounded-full bg-white"
-        />
-      </div>
-
-      <span className="min-w-[38px] text-center text-[11px] font-semibold tabular-nums text-white/85">
-        {page + 1}/{totalPages}
-      </span>
-    </div>
-  );
-}
-
 export default function SelfiesScreen() {
   const shouldReduceMotion = useReducedMotion();
   const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);
@@ -418,9 +53,7 @@ export default function SelfiesScreen() {
   const hasLoadedRef = useRef(false);
 
   const fetchSubmissions = useCallback(async () => {
-    if (!hasLoadedRef.current) {
-      setFetchState('loading');
-    }
+    if (!hasLoadedRef.current) setFetchState('loading');
 
     try {
       const data = await facesOfCleanAirService.getSubmissions(
@@ -431,9 +64,7 @@ export default function SelfiesScreen() {
       hasLoadedRef.current = true;
     } catch (error) {
       console.error('Failed to load selfies:', error);
-      if (!hasLoadedRef.current) {
-        setFetchState('error');
-      }
+      if (!hasLoadedRef.current) setFetchState('error');
     }
   }, []);
 
@@ -443,16 +74,12 @@ export default function SelfiesScreen() {
   );
 
   const totalSlides = useMemo(() => {
-    if (isMobile) {
-      return Math.max(1, submissions.length);
-    }
+    if (isMobile) return Math.max(1, submissions.length);
     return Math.max(1, Math.ceil(submissions.length / DESKTOP_CARDS_PER_PAGE));
   }, [isMobile, submissions.length]);
 
   const visibleItems = useMemo(() => {
-    if (isMobile) {
-      return submissions.slice(page, page + 1);
-    }
+    if (isMobile) return submissions.slice(page, page + 1);
     const startIndex = page * DESKTOP_CARDS_PER_PAGE;
     return submissions.slice(startIndex, startIndex + DESKTOP_CARDS_PER_PAGE);
   }, [isMobile, page, submissions]);
@@ -469,9 +96,7 @@ export default function SelfiesScreen() {
 
   const goToPage = useCallback(
     (nextPage: number) => {
-      if (nextPage === page || nextPage < 0 || nextPage >= totalSlides) {
-        return;
-      }
+      if (nextPage === page || nextPage < 0 || nextPage >= totalSlides) return;
       setDirection(nextPage > page ? 1 : -1);
       setPage(nextPage);
     },
@@ -480,9 +105,7 @@ export default function SelfiesScreen() {
 
   const goToRelativePage = useCallback(
     (offset: number) => {
-      if (totalSlides <= 1) {
-        return;
-      }
+      if (totalSlides <= 1) return;
       const nextPage = (page + offset + totalSlides) % totalSlides;
       setDirection(offset > 0 ? 1 : -1);
       setPage(nextPage);
@@ -491,9 +114,7 @@ export default function SelfiesScreen() {
   );
 
   useEffect(() => {
-    if (fetchState !== 'success' || isPaused || shouldReduceMotion) {
-      return;
-    }
+    if (fetchState !== 'success' || isPaused || shouldReduceMotion) return;
 
     const carouselTimer = window.setTimeout(() => {
       if (totalSlides > 1 && page < totalSlides - 1) {
@@ -503,9 +124,7 @@ export default function SelfiesScreen() {
       goToRelativePage(1);
     }, CAROUSEL_INTERVAL_MS);
 
-    return () => {
-      window.clearTimeout(carouselTimer);
-    };
+    return () => window.clearTimeout(carouselTimer);
   }, [
     fetchState,
     goToRelativePage,
@@ -515,46 +134,11 @@ export default function SelfiesScreen() {
     totalSlides,
   ]);
 
-  const handleCarouselKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      if (totalSlides <= 1) {
-        return;
-      }
-      if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        goToRelativePage(1);
-      }
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        goToRelativePage(-1);
-      }
-    },
-    [goToRelativePage, totalSlides],
-  );
-
-  const handleDragEnd = useCallback(
-    (
-      _event: MouseEvent | TouchEvent | globalThis.PointerEvent,
-      info: PanInfo,
-    ) => {
-      if (totalSlides <= 1) {
-        return;
-      }
-      const movedLeft =
-        info.offset.x < -SWIPE_DISTANCE_THRESHOLD ||
-        info.velocity.x < -SWIPE_VELOCITY_THRESHOLD;
-      const movedRight =
-        info.offset.x > SWIPE_DISTANCE_THRESHOLD ||
-        info.velocity.x > SWIPE_VELOCITY_THRESHOLD;
-
-      if (movedLeft) {
-        goToRelativePage(1);
-      } else if (movedRight) {
-        goToRelativePage(-1);
-      }
-    },
-    [goToRelativePage, totalSlides],
+  const handleCarouselKeyDown = useSelfieCarouselKeyboard(
+    totalSlides,
+    goToRelativePage,
   );
+  const handleDragEnd = useSelfieDragEnd(totalSlides, goToRelativePage);
 
   const pageVariants: Variants = {
     enter: (slideDirection: number) => ({
@@ -624,7 +208,7 @@ export default function SelfiesScreen() {
 
   return (
     <div
-      className="relative min-h-[100svh] overflow-hidden"
+      className="relative h-[100svh] overflow-hidden sm:h-auto sm:min-h-[100svh]"
       style={{
         background:
           'linear-gradient(180deg, #005257 0%, #39BFC7 50%, #FFFFFF 100%)',
@@ -632,7 +216,7 @@ export default function SelfiesScreen() {
     >
       <AmbientBackground />
 
-      <div className="relative mx-auto flex min-h-[100svh] w-full max-w-[1400px] flex-col px-4 pb-12 pt-4 sm:px-8 sm:pt-8 lg:px-12">
+      <div className="relative mx-auto flex h-full w-full max-w-[1400px] flex-col px-4 pb-3 pt-4 sm:min-h-[100svh] sm:px-8 sm:pb-12 sm:pt-8 lg:px-12">
         <motion.header
           variants={headerContainerVariants}
           initial="hidden"
@@ -696,25 +280,17 @@ export default function SelfiesScreen() {
           </motion.div>
         </motion.header>
 
-        <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col items-center justify-center overflow-hidden pt-6 sm:pt-10">
+        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center overflow-hidden pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
           <section
             tabIndex={0}
             aria-label="Faces of Air Quality selfie carousel"
             aria-roledescription="carousel"
-            className="flex w-full flex-col items-center"
+            className="flex h-full w-full min-h-0 flex-col justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-4 focus-visible:ring-offset-transparent sm:block sm:h-auto"
             onKeyDown={handleCarouselKeyDown}
-            onMouseEnter={() => {
-              if (!isMobile) setIsPaused(true);
-            }}
-            onMouseLeave={() => {
-              if (!isMobile) setIsPaused(false);
-            }}
-            onFocusCapture={() => {
-              if (!isMobile) setIsPaused(true);
-            }}
-            onBlurCapture={() => {
-              if (!isMobile) setIsPaused(false);
-            }}
+            onMouseEnter={() => !isMobile && setIsPaused(true)}
+            onMouseLeave={() => !isMobile && setIsPaused(false)}
+            onFocusCapture={() => !isMobile && setIsPaused(true)}
+            onBlurCapture={() => !isMobile && setIsPaused(false)}
           >
             <AnimatePresence mode="wait" initial={false}>
               {isInitialLoading && (
@@ -723,12 +299,10 @@ export default function SelfiesScreen() {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0, scale: 0.985 }}
-                  transition={{
-                    duration: shouldReduceMotion ? 0 : 0.64,
-                  }}
+                  transition={{ duration: shouldReduceMotion ? 0 : 0.64 }}
                   className={
                     isMobile
-                      ? 'flex w-full items-center justify-center'
+                      ? 'flex h-full min-h-0 w-full flex-1 items-center justify-center'
                       : 'grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
                   }
                 >
@@ -758,7 +332,7 @@ export default function SelfiesScreen() {
               )}
 
               {showError && (
-                <ErrorState
+                <SelfieErrorState
                   key="error"
                   reduceMotion={shouldReduceMotion}
                   onRetry={() => void fetchSubmissions()}
@@ -766,7 +340,10 @@ export default function SelfiesScreen() {
               )}
 
               {showEmpty && (
-                <EmptyState key="empty" reduceMotion={shouldReduceMotion} />
+                <SelfieEmptyState
+                  key="empty"
+                  reduceMotion={shouldReduceMotion}
+                />
               )}
 
               {!isInitialLoading && !showError && !showEmpty ? (
@@ -779,78 +356,91 @@ export default function SelfiesScreen() {
                     duration: shouldReduceMotion ? 0 : 0.68,
                     ease: [0.22, 1, 0.36, 1],
                   }}
-                  className="flex w-full flex-col items-center"
+                  className={
+                    isMobile
+                      ? 'flex h-full min-h-0 flex-col items-center justify-center'
+                      : undefined
+                  }
                 >
-                  <AnimatePresence
-                    initial={false}
-                    mode="wait"
-                    custom={direction}
+                  <div
+                    className={
+                      isMobile
+                        ? 'flex min-h-0 w-full flex-1 items-center justify-center'
+                        : undefined
+                    }
                   >
-                    <motion.div
-                      key={`${isMobile ? 'mobile' : 'desktop'}-${page}`}
+                    <AnimatePresence
+                      initial={false}
+                      mode="wait"
                       custom={direction}
-                      variants={pageVariants}
-                      initial="enter"
-                      animate="center"
-                      exit="exit"
-                      aria-live="polite"
-                      drag={
-                        totalSlides > 1 && !shouldReduceMotion ? 'x' : false
-                      }
-                      dragConstraints={{ left: 0, right: 0 }}
-                      dragElastic={isMobile ? 0.2 : 0.14}
-                      dragMomentum={false}
-                      onDragEnd={handleDragEnd}
-                      style={{ transformPerspective: 1200 }}
-                      className={
-                        isMobile
-                          ? 'flex touch-pan-y cursor-grab items-center justify-center active:cursor-grabbing'
-                          : 'grid touch-pan-y cursor-grab grid-cols-1 justify-items-center gap-4 active:cursor-grabbing sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
-                      }
                     >
-                      {visibleItems.map((submission, index) => (
-                        <div
-                          key={submission.id}
-                          className={
-                            isMobile
-                              ? 'w-full'
-                              : 'w-full max-w-[320px] lg:max-w-[360px] xl:max-w-[400px]'
-                          }
-                          style={
-                            isMobile
-                              ? {
-                                  width:
-                                    'min(86vw, calc(100svh - 205px), 360px)',
-                                }
-                              : undefined
-                          }
-                        >
-                          <FaceCard
-                            submission={submission}
-                            priority={
-                              isMobile ? page === 0 : page === 0 && index < 3
+                      <motion.div
+                        key={`${isMobile ? 'mobile' : 'desktop'}-${page}`}
+                        custom={direction}
+                        variants={pageVariants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        aria-live="polite"
+                        drag={
+                          totalSlides > 1 && !shouldReduceMotion ? 'x' : false
+                        }
+                        dragConstraints={{ left: 0, right: 0 }}
+                        dragElastic={isMobile ? 0.2 : 0.14}
+                        dragMomentum={false}
+                        onDragEnd={handleDragEnd}
+                        style={{ transformPerspective: 1200 }}
+                        className={
+                          isMobile
+                            ? 'flex touch-pan-y cursor-grab items-center justify-center active:cursor-grabbing'
+                            : 'grid touch-pan-y cursor-grab grid-cols-1 justify-items-center gap-4 active:cursor-grabbing sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
+                        }
+                      >
+                        {visibleItems.map((submission, index) => (
+                          <div
+                            key={submission.id}
+                            className={
+                              isMobile
+                                ? 'w-full'
+                                : 'w-full max-w-[320px] lg:max-w-[360px] xl:max-w-[400px]'
+                            }
+                            style={
+                              isMobile
+                                ? {
+                                    width:
+                                      'min(86vw, calc(100svh - 205px), 360px)',
+                                  }
+                                : undefined
                             }
-                            reduceMotion={shouldReduceMotion}
-                          />
-                        </div>
-                      ))}
-                    </motion.div>
-                  </AnimatePresence>
+                          >
+                            <FaceCard
+                              submission={submission}
+                              priority={
+                                isMobile ? page === 0 : page === 0 && index < 3
+                              }
+                              reduceMotion={shouldReduceMotion}
+                            />
+                          </div>
+                        ))}
+                      </motion.div>
+                    </AnimatePresence>
+                  </div>
 
                   {totalSlides > 1 && (
                     <>
-                      <MobilePagination
+                      <SelfieMobilePagination
                         page={page}
                         totalPages={totalSlides}
                         reduceMotion={shouldReduceMotion}
                       />
 
-                      <DesktopPagination
+                      <SelfieDesktopPagination
                         page={page}
                         totalPages={totalSlides}
                         isPaused={isPaused}
                         reduceMotion={shouldReduceMotion}
                         onPageChange={goToPage}
+                        layoutId="active-selfies-indicator"
                       />
                     </>
                   )}
diff --git a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
index ef0d5059be..90fb00dc7c 100644
--- a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
+++ b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
@@ -1107,7 +1107,7 @@ export default function FacesOfCleanAirPage() {
               className="whitespace-nowrap text-left leading-none text-white"
             >
               {isLeaderboardStage ? (
-                <span className="text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
+                <span className="block truncate text-[clamp(1.1rem,2.5vw,2.5rem)] font-extrabold tracking-[-0.045em]">
                   {LEADERBOARD_TITLE}
                 </span>
               ) : (

From 57a25f987122dba3a37ba4a11928dc161cfcd2a9 Mon Sep 17 00:00:00 2001
From: Paul Ochieng Levi <ochiengpaul442@gmail.com>
Date: Mon, 13 Jul 2026 20:19:20 +0300
Subject: [PATCH 3/6] update

---
 .../src/components/clean-air-forum-2026/selfie-components.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/website/src/components/clean-air-forum-2026/selfie-components.tsx b/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
index 6c165416ae..23a5884df3 100644
--- a/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
+++ b/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
@@ -88,7 +88,7 @@ export function FaceCard({
     'Clean Air Champion';
 
   const location =
-    submission.locationName?.trim() || 'Pretoria, Gauteng, South Africa';
+    submission.locationName?.trim() || 'the Africa Clean Air Forum';
 
   const handlePointerMove = useCallback(
     (event: ReactPointerEvent<HTMLElement>) => {

From f4288c886d061f7ad4284bcb66108d10e7178bc9 Mon Sep 17 00:00:00 2001
From: Paul Ochieng Levi <ochiengpaul442@gmail.com>
Date: Mon, 13 Jul 2026 21:47:56 +0300
Subject: [PATCH 4/6] fix: streamline display name logic and adjust main
 container styling in Selfies and FacesOfCleanAir pages

---
 .../components/clean-air-forum-2026/selfie-components.tsx    | 5 +----
 .../features/clean-air-forum-2026/screens/SelfiesScreen.tsx  | 4 ++--
 .../src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/website/src/components/clean-air-forum-2026/selfie-components.tsx b/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
index 23a5884df3..98eea43a14 100644
--- a/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
+++ b/src/website/src/components/clean-air-forum-2026/selfie-components.tsx
@@ -82,10 +82,7 @@ export function FaceCard({
   const rotateX = useSpring(transformedRotateX, SMOOTH_SPRING);
   const rotateY = useSpring(transformedRotateY, SMOOTH_SPRING);
 
-  const displayName =
-    submission.displayName?.trim() ||
-    submission.locationName?.trim() ||
-    'Clean Air Champion';
+  const displayName = submission.displayName?.trim() || 'Clean Air Champion';
 
   const location =
     submission.locationName?.trim() || 'the Africa Clean Air Forum';
diff --git a/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx b/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
index 9ff748484c..2a88164fcf 100644
--- a/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
+++ b/src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx
@@ -280,12 +280,12 @@ export default function SelfiesScreen() {
           </motion.div>
         </motion.header>
 
-        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center overflow-hidden pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
+        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
           <section
             tabIndex={0}
             aria-label="Faces of Air Quality selfie carousel"
             aria-roledescription="carousel"
-            className="flex h-full w-full min-h-0 flex-col justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-4 focus-visible:ring-offset-transparent sm:block sm:h-auto"
+            className="flex h-full w-full min-h-0 flex-col justify-center overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-4 focus-visible:ring-offset-transparent sm:block sm:h-auto"
             onKeyDown={handleCarouselKeyDown}
             onMouseEnter={() => !isMobile && setIsPaused(true)}
             onMouseLeave={() => !isMobile && setIsPaused(false)}
diff --git a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
index 90fb00dc7c..f12361094c 100644
--- a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
+++ b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
@@ -1150,7 +1150,7 @@ export default function FacesOfCleanAirPage() {
           </motion.div>
         </motion.header>
 
-        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center overflow-hidden pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
+        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
           <section
             tabIndex={0}
             aria-label={
@@ -1159,7 +1159,7 @@ export default function FacesOfCleanAirPage() {
                 : 'Air quality quiz leaderboard carousel'
             }
             aria-roledescription="carousel"
-            className="flex h-full w-full min-h-0 flex-col justify-center rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-4 focus-visible:ring-offset-transparent sm:block sm:h-auto"
+            className="flex h-full w-full min-h-0 flex-col justify-center overflow-hidden rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-4 focus-visible:ring-offset-transparent sm:block sm:h-auto"
             onKeyDown={handleCarouselKeyDown}
             onMouseEnter={() => {
               if (!isMobile) {

From abe67ecfeae640fa10e94d8c870897f3c8d65bbd Mon Sep 17 00:00:00 2001
From: OlukaGibson <gibsonoluka7@gmail.com>
Date: Mon, 13 Jul 2026 22:44:27 +0300
Subject: [PATCH 5/6] routing issue

---
 .../components/providers/auth-provider.tsx    | 25 ++++++++++++++++++-
 src/beacon/middleware.ts                      |  6 +++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/beacon/components/providers/auth-provider.tsx b/src/beacon/components/providers/auth-provider.tsx
index d2e8b1387a..ccddcc7005 100644
--- a/src/beacon/components/providers/auth-provider.tsx
+++ b/src/beacon/components/providers/auth-provider.tsx
@@ -8,6 +8,12 @@ import authService from '@/services/api-service';
 function AuthEffect({ children }: { children: ReactNode }) {
   const { data: session, status } = useSession();
   const [handoffProcessed, setHandoffProcessed] = useState(false);
+  const [isHandlingHandoff, setIsHandlingHandoff] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.location.hash.includes('token=');
+    }
+    return false;
+  });
 
   useEffect(() => {
     if (status === 'authenticated' && session) {
@@ -29,11 +35,15 @@ function AuthEffect({ children }: { children: ReactNode }) {
           role: (rawUser as any).privilege || 'user',
         });
       }
+      
+      if (isHandlingHandoff) {
+        setIsHandlingHandoff(false);
+      }
     } else if (status === 'unauthenticated') {
       authService.setToken(null);
       authService.setUserData(null);
     }
-  }, [session, status]);
+  }, [session, status, isHandlingHandoff]);
 
   useEffect(() => {
     if (handoffProcessed) return;
@@ -50,9 +60,22 @@ function AuthEffect({ children }: { children: ReactNode }) {
         redirect: true,
         callbackUrl: callbackUrl,
       });
+    } else {
+      setIsHandlingHandoff(false);
     }
   }, [handoffProcessed]);
 
+  if (isHandlingHandoff || (status === 'unauthenticated' && typeof window !== 'undefined' && window.location.hash.includes('token='))) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
+        <div className="w-16 h-16 border-4 border-blue-200 rounded-full mb-4 relative">
+          <div className="absolute top-0 left-0 w-16 h-16 border-4 border-blue-600 rounded-full border-t-transparent animate-spin"></div>
+        </div>
+        <div className="text-gray-900 text-xl font-semibold mb-2">Completing sign in...</div>
+      </div>
+    );
+  }
+
   return <>{children}</>;
 }
 
diff --git a/src/beacon/middleware.ts b/src/beacon/middleware.ts
index 5d40d0fb04..5e05706dc4 100644
--- a/src/beacon/middleware.ts
+++ b/src/beacon/middleware.ts
@@ -37,9 +37,11 @@ export default withAuth(
       typeof token?.airqoExp === 'number' && Date.now() / 1000 > token.airqoExp;
     const isAuthenticated = !!token && !isAirqoTokenExpired;
     const isPublicRoute = PUBLIC_ROUTES.some(route => pathname.startsWith(route))
+    const isOAuthCallback = request.nextUrl.searchParams.has('success') || request.nextUrl.searchParams.has('token')
     
-    // Redirect unauthenticated users to login
-    if (!isAuthenticated && !isPublicRoute) {
+    // Redirect unauthenticated users to login, unless it's an OAuth callback
+    // (We need to let the client handle OAuth callbacks to preserve the URL hash fragment)
+    if (!isAuthenticated && !isPublicRoute && !isOAuthCallback) {
       const loginUrl = new URL('/login', request.url)
       loginUrl.searchParams.set('from', pathname)
       return NextResponse.redirect(loginUrl)

From 43d4b46d646c5d9e0e66229a4f1ed296234d2ced Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:31:48 +0200
Subject: [PATCH 6/6] Update beacon staging image tag to
 stage-5417f56a-1783974410

---
 k8s/beacon/k8s-aks/airqo-beacon/values-stage.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/k8s/beacon/k8s-aks/airqo-beacon/values-stage.yaml b/k8s/beacon/k8s-aks/airqo-beacon/values-stage.yaml
index 67491e474c..679db9102f 100644
--- a/k8s/beacon/k8s-aks/airqo-beacon/values-stage.yaml
+++ b/k8s/beacon/k8s-aks/airqo-beacon/values-stage.yaml
@@ -1,7 +1,7 @@
 replicaCount: 2
 image:
   repository: airqoacr.azurecr.io/airqo-stage-beacon
-  tag: stage-28ed4fb6-1783946212
+  tag: stage-5417f56a-1783974410
   pullPolicy: IfNotPresent
 imagePullSecrets: []
 nameOverride: ''