Recruit 2026 team: join section, form link, unified dark theme

src/app/admin/dashboard/page.tsx

@@ -9,7 +9,7 @@ export default function AdminDashboard() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
-          <p className="text-muted-foreground">TEDxUW 2025 ticket management</p>
+          <p className="text-muted-foreground">TEDxUW 2026 ticket management</p>
         </div>
       </div>
 

src/app/buy_ticket/page.tsx

@@ -36,7 +36,7 @@ const renderPaymentUI = (loading: boolean, handleBuyTicket: (type: 'event' | 'ev
             <li>• Full access to all TEDx talks</li>
             <li>• Live performances and presentations</li>
             <li>• Complimentary lunch and snacks</li>
-            <li>• Exclusive TEDxUW 2025 water bottle</li>
+            <li>• Exclusive TEDxUW 2026 water bottle</li>
             <li>• Networking session with attendees</li>
           </ul>
           <button 

src/app/impact/page.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { motion, useInView } from "framer-motion";
+import SectionHeader from "@/components/section-header";
+import { useInView } from "framer-motion";
 import React, { useRef } from "react";
 import CounterRow from "@/components/counter_row";
 
@@ -23,20 +24,8 @@ const ImpactPage: React.FC = () => {
         trigger={isInView}
       />
 
-      <div className="my-12 w-full max-w-none px-8 sm:px-16">
-        <motion.div
-          initial={{ scale: 0.01, opacity: 0 }}
-          animate={isInView ? { scale: 1, opacity: 1 } : {}}
-          transition={{ duration: 0.6, ease: "easeOut" }}
-          className="flex justify-between text-[#E50609] text-[14vw] md:text-[16vw] font-extrabold leading-none tracking-tight select-none uppercase"
-        >
-          <span>I</span>
-          <span>M</span>
-          <span>P</span>
-          <span>A</span>
-          <span>C</span>
-          <span>T</span>
-        </motion.div>
+      <div className="my-14">
+        <SectionHeader eyebrow="By the numbers" title="Our Impact" />
       </div>
 
       <CounterRow

src/app/layout.tsx

@@ -15,7 +15,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "TEDxUW 2025 | Waterloo, ON",
+  title: "TEDxUW 2026 | Waterloo, ON",
   description: "TEDxUW speaker events | TEDx affiliated with University of Waterloo talks",
 };
 

src/app/page.tsx

@@ -4,15 +4,12 @@ import HeroSection from "@/components/hero-2";
 import Timeline from "@/components/timeline";
 import Mission from "@/components/mission";
 import PastTalks from "@/components/pastTalks";
-import Theme from "@/components/theme";
+import JoinSection from "@/components/join-section";
 import WhatIsTed from "@/components/whatIsTed";
 import ImpactPage from "./impact/page";
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 
 export default function Home() {
-  const router = useRouter();
-
   useEffect(() => {
     if ("scrollRestoration" in window.history) {
       window.history.scrollRestoration = "manual";
@@ -21,40 +18,17 @@ export default function Home() {
 
   return (
     <div className="font-[family-name:var(--font-sans)]">
-      <div className="sticky top-20 z-50 text-red-500 shadow-sm p-4">
-        <button
-          onClick={() => {
-            const themeSection = document.getElementById("theme");
-            if (themeSection) {
-              themeSection.scrollIntoView({ behavior: "smooth" });
-            }
-          }}
-          className="cursor-pointer bg-white px-4 py-2 rounded-xl hover:underline text-red-600 font-medium"
-        >
-          Go to theme -{`>`}
-        </button>
-      </div>
       <div className="">
         <HeroSection />
       </div>
-      <div className="" id="theme">
-        <Theme />
-      </div>
+      <JoinSection />
       <WhatIsTed />
       <PastTalks />
       <div className="mt-20"></div>
       <ImpactPage />
       <div className="mt-20"></div>
       <Mission />
       <Timeline />
-      <button
-        className="fixed z-50 bottom-5 left-1/2 -translate-x-1/2 sm:bottom-6 sm:right-6 sm:left-auto sm:translate-x-0 bg-gradient-to-b from-[#d41408] to-[#bd1104] text-white rounded-[20px] sm:rounded-3xl px-6 py-3 sm:px-7 sm:py-4 text-base sm:text-lg font-semibold shadow-[0_8px_32px_rgb(189,17,4,0.6),0_2px_8px_rgba(0,0,0,0.3)] sm:shadow-[0_6px_24px_rgb(189,17,4,0.35),0_2px_8px_rgba(0,0,0,0.2)] w-auto whitespace-nowrap transition-all duration-300 hover:scale-[1.05] hover:shadow-[0_10px_40px_rgb(189,17,4,0.7),0_4px_12px_rgba(0,0,0,0.4)] active:scale-95 backdrop-blur-xl border border-white/10"
-        style={{ width: "auto" }}
-        onClick={() => router.push("/buy_ticket")}
-      >
-        <span className="sm:hidden">Buy Tickets • Nov 2nd</span>
-        <span className="hidden sm:inline">Buy Tickets &bull; Nov 2nd, 2025 &bull; Humanities Theatre</span>
-      </button>
     </div>
   );
 }

src/components/footer.tsx

@@ -122,7 +122,7 @@ export default function Footer() {
         </div>
         {/* Copyright */}
         <p className="text-center mt-5 w-[70%] text-sm md:text-base xl:text-xs">
-          @ 2025 TEDxUW. All righs reserved. This independent TEDx event is
+          @ 2026 TEDxUW. All righs reserved. This independent TEDx event is
           operated under licence from TED
         </p>
       </div>

src/components/hero-2.tsx

@@ -15,10 +15,10 @@ export default function HeroSection() {
 
   // Text content for each section
   const sections: Section[] = [
-    { title: "Step into a world of ideas worth spreading at TEDxUW 2025." },
-    { title: "Discover voices that challenge convention and ignite curiosity." },
-    { title: "Experience talks that connect passion, purpose, and possibility." },
-    { title: "Join the movement. Inspire change. Be part of something bigger." }
+    { title: "TEDxUW is back. Ideas worth spreading return to Waterloo in 2026." },
+    { title: "The club has started again, and we're building this year's team." },
+    { title: "Organizers, designers, creators, and storytellers: we need you." },
+    { title: "Join the team. Help make TEDxUW 2026 happen." }
   ];
 
   // Intersection observer for active section

src/components/join-section.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { joinHref, JOIN_FORM_URL } from "@/lib/links";
+
+const teams = [
+  { name: "Internals", desc: "Keep the team connected, organized, and thriving." },
+  { name: "Speaker Relations", desc: "Find and coach the voices on our 2026 stage." },
+  { name: "Corporate Relations", desc: "Build the partnerships that make the event possible." },
+  { name: "Marketing", desc: "Shape how TEDxUW looks, sounds, and spreads." },
+  { name: "Logistics", desc: "Run the day, from venue to volunteers." },
+  { name: "Production", desc: "Bring the stage, sound, and screens to life." },
+  { name: "Software", desc: "Build the website, ticketing, and tools behind TEDxUW." },
+  { name: "Finance", desc: "Plan the budget and keep the event on solid ground." },
+];
+
+export default function JoinSection() {
+  const external = Boolean(JOIN_FORM_URL);
+  return (
+    <section id="join" className="bg-black text-white px-6 md:px-16 py-24 scroll-mt-24">
+      <div className="max-w-6xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, ease: "easeOut" }}
+          viewport={{ once: true, amount: 0.3 }}
+          className="text-center"
+        >
+          <span className="inline-block rounded-full border border-[#d41408] text-[#ff4a3d] px-4 py-1 text-sm font-semibold tracking-wide uppercase">
+            Now recruiting &bull; 2026
+          </span>
+          <h2 className="mt-6 text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
+            TEDxUW is <span className="text-[#d41408]">back</span>.
+          </h2>
+          <p className="mt-6 max-w-2xl mx-auto text-lg md:text-xl text-gray-300 leading-relaxed">
+            The club has started again, and we&apos;re putting together the team
+            for our 2026 event. Join a team, or apply for a VP role. About 5 to 10 hours a week,
+            and a real hand in bringing ideas worth spreading to Waterloo.
+          </p>
+          <a
+            href={joinHref}
+            {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+            className="mt-10 inline-block rounded-2xl bg-gradient-to-b from-[#d41408] to-[#bd1104] px-8 py-4 text-lg font-semibold shadow-[0_6px_24px_rgb(189,17,4,0.35)] transition hover:scale-[1.04] active:scale-95"
+          >
+            Apply to join the team
+          </a>
+        </motion.div>
+
+        <div className="mt-20 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {teams.map((t, i) => (
+            <motion.div
+              key={t.name}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: i * 0.08 }}
+              viewport={{ once: true }}
+              className="rounded-2xl border border-white/10 bg-white/5 p-6"
+            >
+              <h3 className="text-xl font-semibold">{t.name}</h3>
+              <p className="mt-2 text-gray-400">{t.desc}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/mission.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useState } from "react";
+import SectionHeader from "@/components/section-header";
 import { useMediaQuery } from "@/components/year";
 
 export default function Mission() {
@@ -12,21 +13,18 @@ export default function Mission() {
     }
   };
   return (
-    <div className="w-full h-full p-10 flex justify-center items-center bg-white">
-      <div className="grid grid-cols-[auto_1fr_auto] grid-rows-[auto_1fr_auto] text-black font-bold text-lg sm:text-xl md:text-2xl xl:text-3xl sm:gap-2 md:gap-4 xl:gap-8">
-        {/* top text */}
-        <div className="col-span-3 row-start-1 h-16 md:h-20 xl:h-24 flex justify-center items-center">
-          Our Mission
-        </div>
-
+    <div className="w-full bg-black pt-24 pb-20 flex flex-col items-center gap-12">
+      <SectionHeader eyebrow="Why we exist" title="Our Mission" />
+      <div className="p-10">
+      <div className="grid grid-cols-[auto_1fr_auto] grid-rows-[1fr] text-white font-bold text-lg sm:text-xl md:text-2xl xl:text-3xl sm:gap-2 md:gap-4 xl:gap-8">
         {/* left text */}
-        <div className="col-start-1 row-start-2 w-12 sm:w-16 md:w-20 xl:w-24 flex justify-center items-center">
+        <div className="col-start-1 row-start-1 w-12 sm:w-16 md:w-20 xl:w-24 flex justify-center items-center">
           <h1 className="transform -rotate-90 whitespace-nowrap">Hover Me</h1>
         </div>
 
         {/* center image & flip animation*/}
         <div
-          className="col-start-2 row-start-2 aspect-square w-[250px] h-[250px] sm:w-[300px] sm:h-[300px] md:w-[400px] md:h-[400px] xl:w-[500px] xl:h-[500px] cursor-pointer group [perspective:1000px]"
+          className="col-start-2 row-start-1 aspect-square w-[250px] h-[250px] sm:w-[300px] sm:h-[300px] md:w-[400px] md:h-[400px] xl:w-[500px] xl:h-[500px] cursor-pointer group [perspective:1000px]"
           onClick={toggleFlip}
         >
           <div
@@ -40,12 +38,12 @@ export default function Mission() {
           >
             {/* Front Face */}
             <img
-              className="w-full h-full object-cover shadow-lg shadow-gray-500"
+              className="w-full h-full object-cover shadow-[0_0_60px_rgba(212,20,8,0.35)]"
               src="mission.svg"
               alt="our mission"
             />
             {/* Back Face */}
-            <div className="absolute inset-0 h-full w-full p-4 sm:p-6 md:p-8 xl:p-10 [transform:rotateY(180deg)] [backface-visibility:hidden] bg-black text-white flex flex-col items-center">
+            <div className="absolute inset-0 h-full w-full p-4 sm:p-6 md:p-8 xl:p-10 [transform:rotateY(180deg)] [backface-visibility:hidden] bg-[#111] border border-[#d41408]/40 text-white flex flex-col items-center">
               <h1 className="text-sm sm:text-lg md:text-2xl xl:text-3xl font-bold text-[#e50409] xl:py-3">
                 Our Mission
               </h1>
@@ -66,16 +64,12 @@ export default function Mission() {
           </div>
         </div>
 
-        {/* bottom text */}
-        <div className="col-span-3 row-start-3 h-16 md:h-20 xl:h-24 flex justify-center items-center">
-          Our Mission
-        </div>
-
         {/* right text */}
-        <div className="col-start-3 row-start-2 w-12 sm:w-16 md:w-20 xl:w-24 flex justify-center items-center">
+        <div className="col-start-3 row-start-1 w-12 sm:w-16 md:w-20 xl:w-24 flex justify-center items-center">
           <h1 className="transform rotate-90 whitespace-nowrap">Hover Me</h1>
         </div>
       </div>
+      </div>
     </div>
   );
 }

src/components/nav.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
+import { joinHref, JOIN_FORM_URL } from "@/lib/links";
 import Link from "next/link";
 import Image from "next/image";
 import { motion, type Variants } from "framer-motion";
@@ -171,12 +172,12 @@ export default function NavBar() {
             ))}
             <div className="mt-4 w-full">
               <Link
-                href="/buy_ticket"
+                href={joinHref} {...(JOIN_FORM_URL ? { target: "_blank" } : {})}
                 className="block mb-4"
                 onClick={toggleMenu}
               >
                 <button className="w-full bg-white text-black py-3 rounded-md font-medium">
-                  Buy Tickets
+                  Join the Team
                 </button>
               </Link>
             </div>
@@ -221,11 +222,11 @@ export default function NavBar() {
           ))}
         </div>
         <div className="flex flex-row gap-8">
-          <Link href="/buy_ticket">
+          <Link href={joinHref} {...(JOIN_FORM_URL ? { target: "_blank" } : {})}>
             <button
               className={`rounded-lg border-2 px-4 py-2 bg-white border-white hover:bg-white/10 hover:text-white transition ease-in-out text-black`}
             >
-              Buy Tickets
+              Join the Team
             </button>
           </Link>
         </div>

src/components/pastTalks.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import SectionHeader from "@/components/section-header";
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import Image from "next/image";
 import PastTalkCard from "./pastTalkCard";
@@ -111,11 +112,9 @@ const PastTalks: React.FC = () => {
 
   return (
     <div>
-      <section className="relative flex flex-col items-center justify-center w-full min-h-[700px] pt-8 md:pt-10 pb-10 bg-white overflow-hidden p-10">
-        {/* White gradient overlay for title readability */}
-        <div className="absolute top-0 left-0 w-full h-32 md:h-40 z-10 bg-gradient-to-b from-white via-white/95 to-transparent pointer-events-none" />
+      <section className="relative flex flex-col items-center justify-center w-full min-h-[700px] pt-8 md:pt-10 pb-16 bg-black overflow-hidden p-10">
         {/* Background image */}
-        <div className="absolute inset-x-0 w-full h-full z-0 flex items-start justify-center pointer-events-none select-none mt-16 md:mt-20 xl:mt-24">
+        <div className="absolute inset-x-0 w-full h-full z-0 opacity-15 flex items-start justify-center pointer-events-none select-none mt-16 md:mt-20 xl:mt-24">
           <Image
             src="/pastTalkBG.png"
             alt="Past Talks Background"
@@ -128,15 +127,7 @@ const PastTalks: React.FC = () => {
         {/* Content overlay */}
         <div className="relative z-10 flex flex-col items-center w-full max-w-6xl mx-auto">
           <div className="h-16 md:h-20 xl:h-24 flex items-center justify-center w-full mb-16 md:mb-24 xl:mb-32">
-            <motion.h2
-              className="text-lg sm:text-xl md:text-2xl xl:text-3xl font-bold text-black text-center w-full"
-              initial={fadeUp.initial}
-              whileInView={fadeUp.whileInView}
-              transition={fadeUp.transition}
-              viewport={{ once: true }}
-            >
-              Past Talks
-            </motion.h2>
+            <SectionHeader eyebrow="From our stages" title="Past Talks" />
           </div>
 
           {/* Carousel */}
@@ -285,7 +276,7 @@ const PastTalks: React.FC = () => {
             transition={{ ...fadeUp.transition, delay: 0.2 }}
             viewport={{ once: true }}
           >
-            <div className="text-lg md:text-xl text-black font-bold text-center max-w-fit shadow-sm">
+            <div className="text-lg md:text-xl text-white font-bold text-center max-w-fit shadow-sm">
               and{" "}
               <a
                 href="https://www.youtube.com/@TEDx"

src/components/section-cards.tsx

@@ -87,7 +87,7 @@ export function SectionCards() {
         </CardHeader>
         <CardFooter className="flex-col items-start gap-1 text-sm">
           <div className="text-muted-foreground">
-            TEDxUW 2025
+            TEDxUW 2026
           </div>
         </CardFooter>
       </Card>

src/components/section-header.tsx

@@ -0,0 +1,27 @@
+import { motion } from "framer-motion";
+
+export default function SectionHeader({
+  eyebrow,
+  title,
+}: {
+  eyebrow: string;
+  title: string;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, ease: "easeOut" }}
+      viewport={{ once: true, amount: 0.5 }}
+      className="text-center px-6"
+    >
+      <span className="text-sm font-semibold uppercase tracking-[0.2em] text-[#ff4a3d]">
+        {eyebrow}
+      </span>
+      <h2 className="mt-3 text-4xl sm:text-5xl md:text-6xl font-bold text-white">
+        {title}
+      </h2>
+      <div className="mx-auto mt-5 h-1 w-16 rounded-full bg-[#d41408]" />
+    </motion.div>
+  );
+}