| null>(null);
+
+ useEffect(() => {
+ prevOnAirRef.current = null;
+ }, [sessionId]);
+
+ useEffect(() => {
+ const eid = eventId.trim();
+ const sid = sessionId.trim();
+ if (!enabled || !eid || !sid || loading) return;
+
+ const onAir = onAirManualOrQuizMasterIds(items);
+ const onAirSet = new Set(onAir);
+ const prev = prevOnAirRef.current;
+ const current = currentQuizPollId?.trim() || null;
+
+ if (prev == null) {
+ prevOnAirRef.current = onAirSet;
+ const target = firstQuizMasterOrManualVisibleId(items);
+ if (!target) return;
+ if (current && onAirSet.has(current)) return;
+ navigate(quizPollTakePath(eid, sid, target), { replace: true });
+ return;
+ }
+
+ const newlyEntered = onAir.filter((id) => !prev.has(id));
+ prevOnAirRef.current = onAirSet;
+
+ const switchTo = newlyEntered.find((id) => id !== current) ?? newlyEntered[0];
+ if (switchTo && switchTo !== current) {
+ navigate(quizPollTakePath(eid, sid, switchTo), { replace: true });
+ return;
+ }
+
+ if (current && !onAirSet.has(current)) {
+ const fallback = firstQuizMasterOrManualVisibleId(items);
+ if (fallback && fallback !== current) {
+ navigate(quizPollTakePath(eid, sid, fallback), { replace: true });
+ }
+ }
+ }, [enabled, eventId, sessionId, loading, items, currentQuizPollId, navigate]);
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 440083b..fefe81a 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -792,6 +792,7 @@ export type PublicQuizPollPresentation = {
isLive?: boolean;
liveQuestionId?: string | null;
showCorrectAnswer?: boolean;
+ showLeaderboard?: boolean;
showResults?: boolean;
};
questions: PublicQuizPollPresentationQuestion[];
@@ -871,6 +872,31 @@ export async function getPublicQuizPollQuestionStats(
return (body as { data: PublicQuizPollQuestionStats }).data;
}
+export type PublicQuizPollLeaderboardEntry = {
+ rank: number;
+ participantId: string;
+ displayName: string;
+ correctCount: number;
+ totalQuestions: number;
+ timeTakenSec: number;
+ totalScore: number;
+};
+
+export type PublicQuizPollLeaderboard = {
+ totalQuestions: number;
+ entries: PublicQuizPollLeaderboardEntry[];
+};
+
+export async function getPublicQuizPollLeaderboard(token: string): Promise
{
+ const base = getBaseUrl();
+ const url = `${base}/api/public/quiz-polls/present/${encodeURIComponent(token)}/leaderboard`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PublicQuizPollLeaderboard }).data;
+}
+
async function postPublicPresentationControl(
token: string,
pathSuffix: string,
@@ -903,3 +929,171 @@ export async function setPublicLiveQuestion(
): Promise {
return postPublicPresentationControl(token, "/live-question", { questionId });
}
+
+export type PhotoWallPublicFormField = {
+ label?: string;
+ name?: string;
+ type?: string;
+ required?: boolean;
+ options?: string[];
+ placeholder?: string;
+ mapsTo?: string;
+};
+
+export type PhotoWallEventHeaderDisplay = {
+ showLogo?: boolean;
+ showBanner?: boolean;
+ showTitle?: boolean;
+ showDateRange?: boolean;
+ showEventType?: boolean;
+ showLocationType?: boolean;
+ showVenue?: boolean;
+};
+
+export type PhotoWallPublicEvent = {
+ _id?: string;
+ name: string;
+ subtitle?: string;
+ eventType?: string;
+ startDate?: string | null;
+ endDate?: string | null;
+ location?: string;
+ locationType?: string;
+ logoUrl?: string | null;
+ imageUrl?: string | null;
+};
+
+export type PhotoWallSharePlatforms = {
+ linkedin?: boolean;
+ facebook?: boolean;
+ instagram?: boolean;
+ snapchat?: boolean;
+ x?: boolean;
+ whatsapp?: boolean;
+};
+
+export type PhotoWallUploadMeta = {
+ eventId: string;
+ eventName: string;
+ event?: PhotoWallPublicEvent | null;
+ eventHeader?: PhotoWallEventHeaderDisplay | null;
+ accessMode: "open" | "login";
+ collectDetails: boolean;
+ createParticipant: boolean;
+ moderationMode: "auto" | "approval";
+ showUploaderNameOnWall?: boolean;
+ requireUploadCrop?: boolean;
+ askUploaderName?: boolean;
+ maxPhotoWidth?: number;
+ maxPhotoHeight?: number;
+ frameEnabled?: boolean;
+ allowFramedDownload?: boolean;
+ sharePlatforms?: PhotoWallSharePlatforms;
+ form: {
+ _id: string;
+ title?: string;
+ description?: string;
+ type?: string;
+ fields: PhotoWallPublicFormField[];
+ settings?: { thankYouMessage?: string; isActive?: boolean };
+ } | null;
+};
+
+export type PhotoWallPresentData = {
+ eventId: string;
+ eventName: string;
+ photosPerRow: number;
+ maxPhotoWidth: number;
+ maxPhotoHeight: number;
+ gapPx: number;
+ showUploaderNameOnWall?: boolean;
+ frameEnabled?: boolean;
+ frameCanvasWidth?: number;
+ frameCanvasHeight?: number;
+ photos: Array<{ _id: string; url: string; createdAt?: string; displayName?: string | null }>;
+};
+
+export async function getPhotoWallUploadMeta(uploadToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-wall/upload/${encodeURIComponent(uploadToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PhotoWallUploadMeta }).data;
+}
+
+export async function uploadPhotoWallSelfie(
+ uploadToken: string,
+ file: File,
+ formData?: Record,
+ options?: { displayName?: string },
+): Promise<{
+ awaitingApproval: boolean;
+ previewUrl: string | null;
+ /** API proxy URL — use for download/share fetch (CORS-safe). */
+ fileUrl: string | null;
+ framed: boolean;
+ photoId: string | null;
+ photoUrl: string | null;
+ framedUrl: string | null;
+}> {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-wall/upload/${encodeURIComponent(uploadToken)}`;
+ const fd = new FormData();
+ fd.append("file", file, file.name);
+ if (formData && Object.keys(formData).length) {
+ fd.append("formData", JSON.stringify(formData));
+ }
+ if (options?.displayName?.trim()) {
+ fd.append("displayName", options.displayName.trim());
+ }
+ const headers: Record = {};
+ const token = getAttendeeToken();
+ if (token) headers.Authorization = `Bearer ${token}`;
+ const res = await fetch(url, { method: "POST", headers, body: fd });
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ const data = (
+ body as {
+ data: {
+ awaitingApproval?: boolean;
+ previewUrl?: string;
+ fileUrl?: string;
+ framed?: boolean;
+ photo?: { _id?: string; url?: string; framedUrl?: string | null };
+ };
+ }
+ ).data;
+ const photoUrl = data?.photo?.url || null;
+ const framedUrl = data?.photo?.framedUrl || null;
+ const photoId = data?.photo?._id ? String(data.photo._id) : null;
+ const fileUrlRelative = data?.fileUrl || null;
+ const fileUrl = fileUrlRelative
+ ? fileUrlRelative.startsWith("http")
+ ? fileUrlRelative
+ : `${base}${fileUrlRelative.startsWith("/") ? "" : "/"}${fileUrlRelative}`
+ : photoId
+ ? `${base}/api/public/photo-wall/upload/${encodeURIComponent(uploadToken)}/photos/${encodeURIComponent(photoId)}/file`
+ : null;
+ return {
+ awaitingApproval: Boolean(data?.awaitingApproval),
+ previewUrl: data?.previewUrl || framedUrl || photoUrl,
+ fileUrl,
+ framed: Boolean(data?.framed || framedUrl),
+ photoId,
+ photoUrl,
+ framedUrl,
+ };
+}
+
+export async function getPhotoWallPresent(presentToken: string): Promise {
+ const base = getBaseUrl();
+ const url = `${base}/api/public/photo-wall/present/${encodeURIComponent(presentToken)}`;
+ const res = await fetch(url);
+ const body = await parseJson(res);
+ if (!res.ok) throw new Error(messageFromBody(body));
+ if (!body || typeof body !== "object" || !("data" in body)) throw new Error("Invalid response");
+ return (body as { data: PhotoWallPresentData }).data;
+}
diff --git a/src/lib/cropImage.ts b/src/lib/cropImage.ts
new file mode 100644
index 0000000..d2c2eef
--- /dev/null
+++ b/src/lib/cropImage.ts
@@ -0,0 +1,64 @@
+import type { Area } from "react-easy-crop";
+
+export function loadImage(src: string): Promise {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.addEventListener("load", () => resolve(img));
+ img.addEventListener("error", () => reject(new Error("Failed to load image")));
+ img.src = src;
+ });
+}
+
+export async function getImageNaturalSize(file: File): Promise<{ width: number; height: number }> {
+ const url = URL.createObjectURL(file);
+ try {
+ const img = await loadImage(url);
+ return { width: img.naturalWidth, height: img.naturalHeight };
+ } finally {
+ URL.revokeObjectURL(url);
+ }
+}
+
+export function ratiosMatch(
+ imageWidth: number,
+ imageHeight: number,
+ targetWidth: number,
+ targetHeight: number,
+ tolerance = 0.02,
+): boolean {
+ if (!imageWidth || !imageHeight || !targetWidth || !targetHeight) return true;
+ const imageRatio = imageWidth / imageHeight;
+ const targetRatio = targetWidth / targetHeight;
+ return Math.abs(imageRatio - targetRatio) / targetRatio <= tolerance;
+}
+
+export async function getCroppedImageFile(
+ imageSrc: string,
+ crop: Area,
+ fileName = "photo.jpg",
+ mimeType = "image/jpeg",
+): Promise {
+ const image = await loadImage(imageSrc);
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ if (!ctx) throw new Error("Canvas not supported");
+
+ const w = Math.max(1, Math.round(crop.width));
+ const h = Math.max(1, Math.round(crop.height));
+ canvas.width = w;
+ canvas.height = h;
+
+ ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, w, h);
+
+ const blob = await new Promise((resolve, reject) => {
+ canvas.toBlob(
+ (b) => (b ? resolve(b) : reject(new Error("Failed to crop image"))),
+ mimeType,
+ 0.92,
+ );
+ });
+
+ const base = fileName.replace(/\.[^.]+$/, "") || "photo";
+ const ext = mimeType === "image/png" ? "png" : "jpg";
+ return new File([blob], `${base}.${ext}`, { type: mimeType });
+}
diff --git a/src/lib/photoWallShare.ts b/src/lib/photoWallShare.ts
new file mode 100644
index 0000000..7525a2c
--- /dev/null
+++ b/src/lib/photoWallShare.ts
@@ -0,0 +1,172 @@
+/** Download + social share helpers for photo-wall visitor success screen.
+ *
+ * Platform buttons open that app (or its web share intent) — not the iOS system share sheet.
+ * Instagram / Snapchat cannot receive an image via web intent, so we save the photo,
+ * copy the caption, then open the app.
+ */
+
+export type PhotoWallSharePlatform =
+ | "linkedin"
+ | "facebook"
+ | "instagram"
+ | "snapchat"
+ | "x"
+ | "whatsapp";
+
+export type SharePhotoWallResult = "shared" | "downloaded" | "cancelled";
+
+const PLATFORM_APP_HOME: Record = {
+ linkedin: "https://www.linkedin.com/feed/",
+ facebook: "https://www.facebook.com/",
+ instagram: "instagram://app",
+ snapchat: "snapchat://",
+ x: "https://x.com/compose/post",
+ whatsapp: "https://wa.me/",
+};
+
+function isMobileUa(): boolean {
+ if (typeof navigator === "undefined") return false;
+ return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+}
+
+async function fetchImageFile(url: string, filename = "photo-wall.jpg"): Promise {
+ const res = await fetch(url, { mode: "cors" });
+ if (!res.ok) throw new Error("Could not load image for sharing");
+ const blob = await res.blob();
+ const type = blob.type && blob.type.startsWith("image/") ? blob.type : "image/jpeg";
+ const ext = type.includes("png") ? "png" : type.includes("webp") ? "webp" : "jpg";
+ const name = filename.replace(/\.\w+$/, "") + `.${ext}`;
+ return new File([blob], name, { type });
+}
+
+export async function downloadImageFromUrl(url: string, filename = "photo-wall.jpg") {
+ const file = await fetchImageFile(url, filename);
+ const objectUrl = URL.createObjectURL(file);
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = file.name;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(objectUrl);
+}
+
+async function copyText(text: string): Promise {
+ try {
+ if (navigator.clipboard?.writeText) {
+ await navigator.clipboard.writeText(text);
+ return true;
+ }
+ } catch {
+ /* fall through */
+ }
+ try {
+ const el = document.createElement("textarea");
+ el.value = text;
+ el.setAttribute("readonly", "");
+ el.style.position = "fixed";
+ el.style.left = "-9999px";
+ document.body.appendChild(el);
+ el.select();
+ const ok = document.execCommand("copy");
+ el.remove();
+ return ok;
+ } catch {
+ return false;
+ }
+}
+
+function openUrl(url: string) {
+ // Prefer same-tab navigation on mobile so deep links / app handoff work more reliably.
+ if (isMobileUa()) {
+ window.location.assign(url);
+ return;
+ }
+ window.open(url, "_blank", "noopener,noreferrer");
+}
+
+function platformShareUrl(
+ platform: PhotoWallSharePlatform,
+ imageUrl: string,
+ text: string,
+): string | null {
+ const encodedText = encodeURIComponent(text);
+ const encodedUrl = encodeURIComponent(imageUrl);
+ const textWithUrl = encodeURIComponent(`${text}\n${imageUrl}`);
+
+ switch (platform) {
+ case "whatsapp":
+ // wa.me opens the WhatsApp app on phones and WhatsApp Web on desktop
+ return `https://wa.me/?text=${textWithUrl}`;
+ case "facebook":
+ return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
+ case "x":
+ return `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
+ case "linkedin":
+ return `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
+ case "instagram":
+ case "snapchat":
+ return null;
+ default:
+ return null;
+ }
+}
+
+async function saveImageAndOpenApp(
+ platform: PhotoWallSharePlatform,
+ file: File,
+ text: string,
+): Promise {
+ const objectUrl = URL.createObjectURL(file);
+ try {
+ const a = document.createElement("a");
+ a.href = objectUrl;
+ a.download = file.name;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ } finally {
+ URL.revokeObjectURL(objectUrl);
+ }
+
+ await copyText(text);
+
+ // Prefer native schemes on mobile; fall back to https homes.
+ if (platform === "instagram") {
+ openUrl(isMobileUa() ? "instagram://app" : "https://www.instagram.com/");
+ } else if (platform === "snapchat") {
+ openUrl(isMobileUa() ? "snapchat://" : "https://www.snapchat.com/");
+ } else {
+ openUrl(PLATFORM_APP_HOME[platform]);
+ }
+
+ return "downloaded";
+}
+
+/**
+ * Share to a specific platform. Does NOT use navigator.share (that always opens the
+ * iOS system sheet and ignores which button was tapped).
+ */
+export async function sharePhotoWallImage(options: {
+ platform: PhotoWallSharePlatform;
+ imageUrl: string;
+ title?: string;
+ text?: string;
+}): Promise {
+ const title = options.title || "EventBuzz";
+ const text = options.text || `Check out my photo from ${title}!`;
+ const imageUrl = options.imageUrl;
+ const platform = options.platform;
+
+ const intent = platformShareUrl(platform, imageUrl, text);
+ if (intent) {
+ // Copy caption so users can paste if the app only receives the URL.
+ await copyText(`${text}\n${imageUrl}`);
+ openUrl(intent);
+ return "shared";
+ }
+
+ // Instagram / Snapchat: save file locally, copy caption, open the app.
+ const file = await fetchImageFile(imageUrl, "photo-wall.jpg");
+ return saveImageAndOpenApp(platform, file, text);
+}
diff --git a/src/lib/sessionPresentationRtdb.ts b/src/lib/sessionPresentationRtdb.ts
new file mode 100644
index 0000000..33018db
--- /dev/null
+++ b/src/lib/sessionPresentationRtdb.ts
@@ -0,0 +1,42 @@
+import { ref, onValue, type Unsubscribe } from "firebase/database";
+import { getRtdb } from "./firebaseClient";
+
+export type SessionPresentFocus = "questions" | null;
+
+export type SessionPresentationState = {
+ focus: SessionPresentFocus;
+ updatedAt: string | null;
+};
+
+function readPresentation(raw: unknown): SessionPresentationState {
+ if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+ return { focus: null, updatedAt: null };
+ }
+ const o = raw as Record;
+ const focus = o.focus === "questions" ? "questions" : null;
+ const updatedAt = o.updatedAt != null ? String(o.updatedAt) : null;
+ return { focus, updatedAt };
+}
+
+/** Subscribe to `sessions/{sessionId}/presentation` present-screen focus. */
+export function subscribeSessionPresentation(
+ sessionId: string,
+ onData: (state: SessionPresentationState) => void,
+ onError?: (e: Error) => void,
+): Unsubscribe {
+ const db = getRtdb();
+ const r = ref(db, `sessions/${sessionId}/presentation`);
+ return onValue(
+ r,
+ (snap) => {
+ try {
+ onData(readPresentation(snap.val()));
+ } catch (e) {
+ onError?.(e instanceof Error ? e : new Error(String(e)));
+ }
+ },
+ (err) => {
+ onError?.(err instanceof Error ? err : new Error(String(err)));
+ },
+ );
+}
diff --git a/src/lib/sessionQuizPollsRtdb.ts b/src/lib/sessionQuizPollsRtdb.ts
index 01c1b4a..aacf66a 100644
--- a/src/lib/sessionQuizPollsRtdb.ts
+++ b/src/lib/sessionQuizPollsRtdb.ts
@@ -18,6 +18,8 @@ export type RtdbQuizPollSettings = {
liveQuestionId?: string | null;
/** quiz_master: projector shows correct answer highlight */
showCorrectAnswer?: boolean;
+ /** quiz_master: projector switches to Leaderboard tab */
+ showLeaderboard?: boolean;
};
/** Normalize status from RTDB; legacy nodes without status are treated as active. */
@@ -49,6 +51,24 @@ export function firstQuizMasterOrManualVisibleId(
return null;
}
+/** Visible quiz_master / manual activity ids (audience on-air set). */
+export function onAirManualOrQuizMasterIds(visibleQuizPolls: RtdbQuizPollListItem[]): string[] {
+ return visibleQuizPolls
+ .filter((item) => {
+ const mode = settingsDisplayMode(item.settings);
+ return mode === "quiz_master" || mode === "manual";
+ })
+ .map((item) => item._id);
+}
+
+export function quizPollTakePath(eventId: string, sessionId: string, quizPollId: string): string {
+ return `/quiz-poll?${new URLSearchParams({
+ event_id: eventId,
+ session_id: sessionId,
+ quiz_poll_id: quizPollId,
+ }).toString()}`;
+}
+
/**
* Session list & take-page visibility (aligned with dashboard display modes).
*
@@ -140,7 +160,21 @@ function readSettings(raw: Record): RtdbQuizPollSettings {
? String(o.liveQuestionId).trim()
: null;
const showCorrectAnswer = o.showCorrectAnswer === true || o.showCorrectAnswer === "true";
- return { isLive, startTime, endTime, displayMode, status, timeRestricted, timeLimit, showResults, allowMultipleAttempts, liveQuestionId, showCorrectAnswer };
+ const showLeaderboard = o.showLeaderboard === true || o.showLeaderboard === "true";
+ return {
+ isLive,
+ startTime,
+ endTime,
+ displayMode,
+ status,
+ timeRestricted,
+ timeLimit,
+ showResults,
+ allowMultipleAttempts,
+ liveQuestionId,
+ showCorrectAnswer,
+ showLeaderboard,
+ };
}
function mapOptions(raw: unknown): RtdbQuizPollOption[] {
diff --git a/src/pages/CodeEntryPage.tsx b/src/pages/CodeEntryPage.tsx
index 9919a9a..a172966 100644
--- a/src/pages/CodeEntryPage.tsx
+++ b/src/pages/CodeEntryPage.tsx
@@ -4,7 +4,7 @@ import { AuthShell } from "../components/auth/AuthShell";
import { normalizeJoinCodeInput, resolveJoinCodeAndNavigate } from "../lib/joinCodeNavigation";
/**
- * Handles https://join.eventbuzz.live/code/{code} — same resolve flow as the homepage join strip.
+ * Handles https://join.eventbuzz.live/code/{code} — same resolve flow as the homepage join form.
*/
export function CodeEntryPage() {
const { code: codeParam } = useParams<{ code: string }>();
diff --git a/src/pages/FeedbackPage.tsx b/src/pages/FeedbackPage.tsx
index 3510dc2..17d5e47 100644
--- a/src/pages/FeedbackPage.tsx
+++ b/src/pages/FeedbackPage.tsx
@@ -3,6 +3,7 @@ import { Link, useSearchParams } from "react-router-dom";
import { HeaderMobile } from "../components/HeaderMobile";
import { MobileShell } from "../components/MobileShell";
import { DynamicFeedbackForm } from "../components/DynamicFeedbackForm";
+import { useAutoNavigateToLiveQuizPoll } from "../hooks/useAutoNavigateToLiveQuizPoll";
import { useEventRegistrationSettings } from "../hooks/useEventRegistrationSettings";
import {
getVisitorFeedbackFormSchema,
@@ -21,6 +22,12 @@ export function FeedbackPage() {
const eventId = urlEventId || ctx?.eventId || "";
const sessionId = urlSessionId || ctx?.sessionId || "";
+ useAutoNavigateToLiveQuizPoll({
+ eventId,
+ sessionId,
+ enabled: Boolean(eventId && sessionId),
+ });
+
const [eventSnapshot, setEventSnapshot] = useState(
ctx?.eventId === eventId && ctx.event ? ctx.event : null,
);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index dfa8a1d..0c07d51 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,418 +1,71 @@
-import { useCallback, useState, type ReactNode } from "react";
-import {
- BarChart3,
- CalendarClock,
- ClipboardList,
- Facebook,
- Gamepad2,
- Mail,
- MessageCircle,
- MessageCircleQuestion,
- Network,
- Phone,
- Youtube,
-} from "lucide-react";
-import { Link } from "react-router-dom";
-import aboutBanner from "../assets/about-banner.png";
-import { JoinCodeTopStrip } from "../components/marketing/JoinCodeTopStrip";
-import { MarketingFooter } from "../components/marketing/MarketingFooter";
-import { MarketingHeader } from "../components/marketing/MarketingHeader";
-import { MarketingHeroSection } from "../components/marketing/MarketingHeroSection";
-import {
- MARKETING_HEADER_SCROLL_MARGIN,
- scrollToId,
- shellX,
-} from "../components/marketing/marketingLayout";
-import { PORTAL_LOGIN_URL, PORTAL_REGISTER_URL } from "../constants/portalUrls";
+import { Ticket } from "lucide-react";
+import { AuthShell } from "../components/auth/AuthShell";
+import { useJoinEventCode } from "../hooks/useJoinEventCode";
-const featureItems = [
- {
- title: "Live Q&A",
- body: "Engage your audience with real-time questions and answers during sessions.",
- Icon: MessageCircleQuestion,
- },
- {
- title: "Quizzes",
- body: "Make learning fun with interactive quizzes.",
- Icon: ClipboardList,
- },
- {
- title: "Gamification",
- body: "Boosts event engagement by turning participation into a rewarding experience.",
- Icon: Gamepad2,
- },
- {
- title: "Interactive Polls",
- body: "Capture instant feedback with live polls and see results in real-time.",
- Icon: BarChart3,
- },
- {
- title: "Event Agenda",
- body: "Keep attendees informed with detailed session schedules and speaker info.",
- Icon: CalendarClock,
- },
- {
- title: "Multi-Track Events",
- body: "Manage complex events with multiple tracks and concurrent sessions.",
- Icon: Network,
- },
-] as const;
-
-/** Marketing homepage (default route `/`) */
+/** Join entry page (default route `/`) — enter event or session code. */
export function Home() {
- const [captcha, setCaptcha] = useState(() => randomCaptcha());
- const [captchaInput, setCaptchaInput] = useState("");
-
- const reloadCaptcha = useCallback(() => {
- setCaptcha(randomCaptcha());
- setCaptchaInput("");
- }, []);
-
- function handleContactSubmit(e: React.FormEvent) {
- e.preventDefault();
- reloadCaptcha();
- }
+ const { code, setCode, submitting, joinError, handleJoin } = useJoinEventCode();
return (
-
-
+
+
+
+
-
-
-
-
- {/* Features */}
-
-
-
-
- Everything you need to create{" "}
- engaging
- {" and "}
- interactive events
-
-
- Our platform enables real-time interaction through live Q&A sessions, instant polls,
- engaging quizzes, and much more.
-
-
-
- {featureItems.map(({ title, body, Icon }) => (
- -
+
+
-
-
-
-
-
- {title}
-
-
- {body}
-
-
-
- ))}
-
-
-
-
- {/* About + stats */}
-
-
-
-
- About eventbuzz
-
-
- EventBuzz is a comprehensive event engagement platform designed to transform how
- organizers connect with their audience. Whether you're hosting a conference,
- workshop, training session, or corporate event, EventBuzz provides the tools you need
- to create memorable experiences.
-
-
- Our platform enables real-time interaction through live Q&A sessions, instant polls,
- engaging quizzes, and much more.
-
-
-
-
-
-
+
+
+
+
+ Join with your code
+
+
+ Enter the code provided by the event organiser — you’ll usually find it in your
+ invite, on the event screen, or on a poster at the venue.
+
+
-
- {[
- { n: "1000+", l: "Events Hosted" },
- { n: "50K+", l: "Attendees" },
- { n: "96%", l: "Satisfaction" },
- ].map((row) => (
-
-
- {row.n}
-
-
- {row.l}
-
-
- ))}
-
-
-
- Contact Us
-
-
- Have questions? We'd love to hear from you. Send us a message!
-
-
-
-
- Ready to Engage Your Audience?
-
-
- Get started with EventBuzz today and transform your events into interactive
- experiences.
-
-
-
-
- Start free trial
-
-
-
-
-
- {children}
-
- );
-}
-
-function randomCaptcha() {
- const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
- return Array.from({ length: 4 }, () => chars[Math.floor(Math.random() * chars.length)]).join(
- " ",
- );
-}
-
-function CaptchaRow({
- captcha,
- value,
- onChange,
- onReload,
-}: {
- captcha: string;
- value: string;
- onChange: (v: string) => void;
- onReload: () => void;
-}) {
- return (
-
-
-
- {captcha}
-
-
-
onChange(e.target.value)}
- placeholder="Enter Captcha"
- className="h-[51px] w-full rounded-lg border border-[rgba(116,112,112,0.3)] bg-[rgba(157,157,172,0.07)] px-4 font-inter text-sm text-[#24282f] lg:h-[59px] lg:self-end lg:rounded-xl lg:p-4"
- aria-label="Enter captcha"
- />
-
+ Loading wall…
+
+ );
+ }
+
+ if (!data) {
+ return (
+
+
Photo wall unavailable
+
{err}
+
+
+
Photo Wall
+
{data.eventName}
+
+
+ {data.photos.length === 0 ? (
+
+ Waiting for photos…
+
+ ) : (
+
+ {data.photos.map((p) => (
+
+
+ {showNames && p.displayName ? (
+
+ {p.displayName}
+
+ ) : null}
+
+ ))}
+
+ )}
+
Missing upload link
+
+
+ );
+ }
+
+ if (loading) {
+ return (
+
+
+ Loading…
+
+
+ );
+ }
+
+ if (err && !meta) {
+ return (
+
+
+ {err}
+
+
+ );
+ }
+
+ if (done) {
+ const canDownload = Boolean(meta?.allowFramedDownload && (done.fileUrl || done.previewUrl));
+ const showShare = Boolean((done.fileUrl || done.previewUrl) && enabledSharePlatforms.length > 0);
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+
+ {done.framed ? "Your framed photo" : "Photo uploaded"}
+
+
+ {done.awaitingApproval
+ ? "Thanks! Your photo is waiting for approval."
+ : done.framed
+ ? "Here’s your generated photo. You can edit, download, or share it."
+ : "Thanks! Your photo was added to the wall."}
+
+ {(done.fileUrl || done.previewUrl) ? (
+
+
{
+ const img = e.currentTarget;
+ if (done.previewUrl && img.src !== done.previewUrl) {
+ img.src = done.previewUrl;
+ }
+ }}
+ />
+
+
+ {canDownload ? (
+
+ ) : null}
+
+ {showShare ? (
+
+
+ Share
+
+
+ {enabledSharePlatforms.map((item) => (
+
+ ))}
+
+
{actionMsg}
: null}
+
+
+ );
+ }
+
+ return (
+
+
+ {meta?.event ? (
+
+ ) : null}
+ Upload your photo
+
+ {meta?.form?.description || "Add a selfie to the event photo wall."}
+
+
+ {meta?.accessMode === "login" && !loggedIn ? (
+
+
Sign in to upload your photo for this event.
+
+
+ 
+