- {/* Main Container - Responsive Height & Mobile Stacking */}
-
+
+ {/* Fills the viewport — the two halves split it rather than a floating card.
+ Text only on mobile; an even side-by-side split from md up. */}
+
{/* Left Content Half */}
-
-
-
- {/* Flex Row: Icon + Title */}
-
- {StepIcon && (
-
+
-
- )}
- - {stepData.title} -
-
+
+
+ {/* Centred with auto margins rather than justify-center, which can
+ clip the top of a step that overflows. The fixed min height
+ keeps the heading still as bullet counts change. */}
+
{/* Locked Footer Controls */}
- + {stepData.title} +
{/* Clean Bullets */}-
{stepData.description.map((bullet, idx) => (
- - + {bullet} @@ -142,7 +103,7 @@ export default function OnboardingCarousel({
+
{/* Dots */}
- {sessionTitle}
+
diff --git a/src/constants/onboarding.ts b/src/constants/onboarding.ts
index bddf16c..4bfa127 100644
--- a/src/constants/onboarding.ts
+++ b/src/constants/onboarding.ts
@@ -4,49 +4,36 @@ export interface OnboardingStep {
/** Optional hero image under `public/` (e.g. `/images/onboarding/foo.svg`). */
image?: string;
altText: string;
- icon: string;
}
export const STUDENT_ONBOARDING_STEPS: OnboardingStep[] = [
{
title: "Welcome to AskEasy",
description: [
- "When your professor starts a lecture, it will appear as a live session on your dashboard.",
- 'Just click "Join" on any live lecture to enter the Q&A room.',
+ "Post a question and get answered in real-time during lectures.",
+ "TAs reply directly, so you get answers without disrupting the lecture.",
],
- image: "/images/onboarding/onboard-welcome.jpg",
- altText: "Joining a live lecture session",
- icon: "LogIn",
- },
- {
- title: "Ask & Get Answers Live",
- description: [
- "Post your question during lecture and it appears in the live feed instantly.",
- "TAs and your professor can reply directly, so you get answers without disrupting the lecture.",
- ],
- image: "/images/onboarding/onboard-answers.jpg",
+ image: "/images/onboarding/question.png",
altText: "Live Q&A feed with questions and replies",
- icon: "MessageSquarePlus",
},
{
- title: "Upvote & Track Questions",
+ title: "Upvote Questions",
description: [
- "See a question you also have? Upvote it. The most popular questions rise to the top.",
- "Questions are marked as resolved once answered. Filter between unresolved and resolved to find what you need.",
+ "The most upvoted unresolved questions rise to the top.",
+ "Everyone can mark their own question as resolved.",
+ "Only TAs and professors can mark other people's questions as resolved.",
],
- image: "/images/onboarding/onboard-upvotes.jpg",
+ image: "/images/onboarding/upvote-rank.png",
altText: "Questions ranked by upvotes with resolution filters",
- icon: "MessageCircleReply",
},
{
title: "Stay Anonymous",
description: [
- "Toggle Anonymous Mode to hide your name from other students.",
- "TAs and professors can still see who you are to prevent misuse, but your classmates won't know.",
+ "Toggle Anonymous Mode to hide your name.",
+ "TAs and professors can still find you if misused.",
],
- image: "/images/onboarding/onboard-anon.jpg",
+ image: "/images/onboarding/anon.png",
altText: "Anonymous mode toggle hiding your identity",
- icon: "Ghost",
},
];
@@ -59,7 +46,6 @@ export const PROF_ONBOARDING_STEPS: OnboardingStep[] = [
],
image: "/images/onboarding/onboard-classes.jpg",
altText: "Starting a live session with slides and chat",
- icon: "MonitorUp",
},
{
title: "Engage With Your Class",
@@ -69,7 +55,6 @@ export const PROF_ONBOARDING_STEPS: OnboardingStep[] = [
],
image: "/images/onboarding/onboard-engage.jpg",
altText: "Professor replying to student questions in real time",
- icon: "Presentation",
},
{
title: "Manage & Export",
@@ -79,6 +64,5 @@ export const PROF_ONBOARDING_STEPS: OnboardingStep[] = [
],
image: "/images/onboarding/onboard-end.jpg",
altText: "Session management tools and chat export",
- icon: "BookOpen",
},
];
{Array.from({ length: totalSteps }).map((_, idx) => (
@@ -160,7 +121,7 @@ export default function OnboardingCarousel({
@@ -171,7 +132,7 @@ export default function OnboardingCarousel({
className={`flex items-center justify-center gap-1.5 sm:gap-2 px-5 sm:px-6 h-10 sm:h-12 rounded-md font-bold transition-all duration-200 text-sm sm:text-base ${
isLastStep
? "bg-green-600 hover:bg-green-700 text-white shadow-md hover:shadow-lg shadow-green-500/20"
- : "bg-gray-400 hover:bg-gray-500 text-white shadow-md hover:shadow-lg"
+ : "bg-stone-900 hover:bg-stone-800 text-stone-50 shadow-md hover:shadow-lg"
} disabled:opacity-50 disabled:pointer-events-none disabled:shadow-none`}
>
{isLastStep ? "Get Started" : "Next"}
@@ -182,29 +143,14 @@ export default function OnboardingCarousel({
{/* Right visual: illustration image */}
-
-
- {showHeroPhoto ? (
- <>
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
setHeroFailedAtIndex(currentStepIndex)}
- />
-
- ) : (
-
diff --git a/src/app/room/classChat/ChatHeader.tsx b/src/app/room/classChat/ChatHeader.tsx
index 1408316..324267b 100644
--- a/src/app/room/classChat/ChatHeader.tsx
+++ b/src/app/room/classChat/ChatHeader.tsx
@@ -9,6 +9,9 @@ import { SlideUpdateContext } from "../SlideUpdateContext";
import { useRoom } from "../RoomContext";
import type { Role } from "@/utils/types";
+/** Course names are cut to this many characters so the header controls keep their room. */
+const TITLE_MAX_CHARS = 6;
+
interface ChatHeaderProps {
role: Role;
answerMode: "all" | "instructors_only";
@@ -116,8 +119,8 @@ export default function ChatHeader({
)}
{sessionTitle && (
-
- {StepIcon && (
-
+
-
- )}
- - {stepData.altText} -
-
+ {heroSrc && (
+ /* eslint-disable-next-line @next/next/no-img-element */
+
)}