Home redesign / rebrand — plan + design assets (mirrors droidconKE)

.env.example

@@ -5,15 +5,15 @@ NEXT_PUBLIC_EVENT_SLUG=
 
 NEXT_PUBLIC_EVENT_READY=
 
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=
-
-NEXT_PUBLIC_FIREBASE_API_KEY=
-NEXT_PUBLIC_FIREBASE_MESSAGE_ID=
-NEXT_PUBLIC_FIREBASE_PUBLIC_KEY=
-NEXT_PUBLIC_FIREBASE_SERVER_KEY=
-NEXT_PUBLIC_FIREBASE_APP_ID=
-NEXT_PUBLIC_MESSAGING_TOPIC=
 NEXT_PUBLIC_GOOGLE_TAG=
 
 NEXT_PUBLIC_EVENT_SLUG_2024=
 NEXT_PUBLIC_EVENT_SLUG_2025=
+# --- Brand font (optional) ---
+# Rauschen B is a licensed font kept in a PRIVATE repo (not committed here).
+# It's fetched at build time (scripts/fetch-font.sh) into public/fonts/.
+# Leave blank and the app still builds/runs — it just falls back to Montserrat.
+# To render the real brand font, create a fine-grained PAT with
+# **Contents: Read-only** on droidconKE/private-fonts and paste it below.
+# Setup steps: https://github.com/droidconKE/private-fonts (see README)
+FONT_REPO_TOKEN=

.gitignore

@@ -48,3 +48,11 @@ yarn-error.log*
 
 *.swp
 *.swo
+
+# Licensed font archives (do not commit to public repo)
+docs/design/*.zip
+
+# Build-time injected licensed font (see scripts/fetch-font.sh)
+public/fonts/
+
+.claude/

components/about/Team.tsx

@@ -22,49 +22,50 @@ function Team({ organizers: unOrderedOrgs }: { organizers: Organizer[] }) {
   })
   return (
     <>
-      <section className="l-container mt-4 md:mt-10">
-        <div className="flex flex-wrap md:py-16">
-          <div className="w-full text-center mb-2 md:mb-0 mt-4 md:mt-0 items-center justify-center">
-            <h2 className="title lowercase dark:text-accent-dark pt-6 md:pt-0">
-              <span>organizing</span> <span className="font-medium">team</span>
-            </h2>
+      <section className="s-container mt-8 md:mt-12">
+        <div className="w-full bg-primary rounded-4xl md:rounded-5xl px-6 py-8 md:px-12 md:py-12 text-left">
+          <div className="flex items-center text-white/80 text-sm md:text-base font-medium mb-3">
+            <div className="w-6 h-px bg-white/80 mr-3" />
+            meet the team
           </div>
+          <h2 className="font-display capitalize text-accent text-3xl md:text-5xl">
+            <span>organizing</span> <span>team</span>
+          </h2>
+          <p className="mt-4 text-white text-lg md:text-xl leading-relaxed lg:w-10/12">
+            Fluttercon Kenya is a Codescape Limited product, organized by the
+            same seasoned team behind Droidcon Kenya, ensuring seamless
+            integration between the two conferences.
+          </p>
         </div>
-        <p className="mb-4 md:mb-0 text-xl justify-center text-center">
-          Fluttercon Kenya is a Codescape Limited product, organized by the same
-          seasoned team behind Droidcon Kenya, ensuring seamless integration
-          between the two conferences.
-        </p>
       </section>
-      <section className="s-container">
+      <section className="s-container mt-8 md:mt-10">
         <div>
           <div className="items-center flex flex-wrap">
-            <div className="w-full px-0 md:px-24 mr-auto mb-4 md:mb-0 pb-0 lg:pb-16">
-              <div className="w-full flex-wrap grid sm:grid-cols-4 md:grid-cols-5 grid-cols-3 gap-2 lg:gap-4">
+            <div className="w-full mr-auto mb-4 md:mb-0 pb-0 lg:pb-16">
+              <div className="w-full flex-wrap grid sm:grid-cols-4 md:grid-cols-5 grid-cols-3 gap-4 md:gap-6">
                 {organizers.map((org) => (
                   <a
                     key={org.created_at}
                     target="_blank"
                     href={org.link}
-                    className="text-center"
                     rel="noreferrer"
+                    className="group flex flex-col h-full rounded-2xl overflow-hidden bg-white dark:bg-darker-dark border border-primary dark:border-primary shadow-md hover:shadow-xl hover:border-accent transition-all duration-200"
                   >
-                    <div className="flex justify-center">
-                      <div className="w-24 h-24 md:w-44 md:h-44 p-2 md:p-4 bg-green-c-2 rounded">
-                        <img
-                          className="w-full p-0 flex rounded-lg border border-accent-2"
-                          src={
-                            org.photo === null ? '/images/icon.png' : org.photo
-                          }
-                          alt={org.name}
-                        />
-                      </div>
+                    <div className="relative overflow-hidden bg-blue-600">
+                      <img
+                        className="w-full aspect-square object-cover grayscale contrast-125 mix-blend-screen group-hover:scale-105 transition-transform duration-300"
+                        src={
+                          org.photo === null ? '/images/icon.png' : org.photo
+                        }
+                        alt={org.name}
+                      />
+                      <span className="pointer-events-none absolute inset-0 mix-blend-overlay [background-image:radial-gradient(rgba(255,255,255,0.3)_1px,transparent_1.4px)] [background-size:6px_6px]" />
                     </div>
-                    <div className="self-start">
-                      <p className="mt-2 w-full text-base md:text-xl">
+                    <div className="p-2 md:p-3 text-center flex-1 flex flex-col justify-center">
+                      <p className="text-xs md:text-base font-bold text-accent dark:text-accent">
                         {org.name}
                       </p>
-                      <p className="text-xs md:text-sm text-light dark:text-light">
+                      <p className="text-[10px] md:text-xs text-black dark:text-white-dark mt-0.5 line-clamp-2">
                         {org.tagline}
                       </p>
                     </div>

components/error/index.tsx

@@ -1,29 +1,30 @@
+import Link from 'next/link'
 import { ErrorInterface } from '../../types/types'
-import TitleComponent from './Title'
-import MessageComponent from './Message'
 
 const ErrorComponent = ({ message, status }: ErrorInterface) => {
-  return (
-    <div className="bg-lighter dark:bg-black flex flex-col h-screen justify-center">
-      <div className="absolute top-[32%] left-[15%] rotate-[340deg]">
-        <img
-          src="/images/svg/colored-x.svg"
-          className="w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h20 lg:w-28 lg:h-28"
-          alt="fluttercon colored-x icon"
-        />
-      </div>
-
-      <div className="absolute top-[70%] right-[5%] sm:right-[7%] md:top-96 md:right-[7%] lg:right-[7%] xl:right-[10%] 2xl:right-[15%]">
-        <img
-          src="/images/element_left.png"
-          className="w-14 sm:w-24 sm:h-20 md:w-28 md:h-24 lg:w-36 lg:h-32"
-          alt="fluttercon element-x icon"
-        />
-      </div>
+  // Short codes (404, 500) render huge; word statuses (OFFLINE) render smaller.
+  const isShort = String(status).length <= 4
 
-      <TitleComponent status={status} />
-
-      <MessageComponent message={message} />
+  return (
+    <div className="s-container min-h-[75vh] flex flex-col items-center justify-center text-center py-16 md:py-24">
+      <p className="text-primary dark:text-primary font-bold uppercase tracking-wide text-sm md:text-base mb-3">
+        ( Error )
+      </p>
+      <h1
+        className={`relative font-display text-black dark:text-white-dark leading-none break-words max-w-full ${
+          isShort ? 'text-8xl md:text-[11rem]' : 'text-5xl md:text-8xl'
+        }`}
+      >
+        {status}
+        {/* halftone accent behind the code */}
+        <span className="pointer-events-none absolute -top-4 -right-6 w-24 h-24 [background-image:radial-gradient(#F73EDE_1.5px,transparent_1.7px)] [background-size:10px_10px] [mask-image:radial-gradient(circle_at_top_right,#000,transparent_70%)] [-webkit-mask-image:radial-gradient(circle_at_top_right,#000,transparent_70%)]" />
+      </h1>
+      <p className="mt-6 text-base md:text-lg text-black dark:text-white-dark max-w-md">
+        {message}
+      </p>
+      <Link href="/" className="btn-primary uppercase mt-8">
+        Head back home
+      </Link>
     </div>
   )
 }

components/home/About.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+const statsBoxes = [
+  { value: '3RD', label: 'FLUTTERCON EDITION', isPrimary: true },
+  { value: '7TH', label: 'DROIDCON EDITION', isPrimary: false },
+  { value: '200+', label: 'SESSIONS', isPrimary: false },
+  { value: '3000+', label: 'ATTENDEES', isPrimary: false },
+]
+
+const About = () => {
+  return (
+    <section className="s-container ">
+      <div className="flex flex-col md:flex-row w-full rounded-3xl overflow-hidden shadow-xl">
+        {/* Left Column (Blue) */}
+        <div className="w-full md:w-[55%] bg-primary p-8 flex flex-col justify-center">
+          <div className="flex items-center text-white text-sm md:text-base font-medium mb-6">
+            <div className="w-6 h-px bg-white mr-3" />
+            About flutterconke
+          </div>
+          <h2 className="text-accent text-5xl md:text-7xl font-display leading-none mb-8">
+            About
+            <br />
+            FlutterconKE
+          </h2>
+          <p className="text-white text-lg md:text-xl leading-relaxed">
+            Now in its 3rd edition, FlutterconKE brings together Flutter and
+            Dart experts, Google Developer Experts, and hundreds of Mobile
+            developers from across the continent. Co-located with DroidconKE,
+            participants get an excellent chance to learn, network, and shape
+            the future of Mobile development in Africa.
+          </p>
+        </div>
+
+        {/* Right Column (Green) */}
+        <div className="w-full md:w-[45%] bg-accent p-6 md:p-10 lg:p-12">
+          <div className="grid grid-cols-2 gap-4 md:gap-6 h-full">
+            {statsBoxes.map((box) => (
+              <div
+                key={box.value}
+                className={`bg-accent-2 border ${
+                  box.isPrimary ? 'border-primary' : 'border-primary/30'
+                } p-4 md:p-6 lg:p-8 flex flex-col justify-center`}
+              >
+                <div className="text-primary text-3xl md:text-5xl lg:text-6xl font-display mb-2">
+                  {box.value}
+                </div>
+                <div className="text-primary text-[10px] md:text-xs uppercase">
+                  {box.label}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About