[STU-154] Landing page UX overhaul — copy, icons, and benefits section

[BAWES]

Summary

• Improved hero copy with clearer value proposition and inclusive CTAs
• Added role-specific emoji icons to portal grid cards for visual differentiation
• Replaced technical search signals section with user-facing benefit cards
• Removed dead CSS from an earlier landing page iteration

Context

Part of STU-154 landing page and login UX redesign. This cherry-picks the UX Designer's work that was completed in a worktree session.

Test plan

• Landing page renders at desktop (1440x900) and mobile (390x844)
• Portal cards show emoji icons
• Benefits section renders correctly
• Dark mode and light mode both work

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Landing page redesigned with updated hero messaging, revised calls-to-action, and new feature benefits section
  • Added visual icons to portal role options in the portal grid

• Tests

  • Added smoke test suite for landing page covering desktop and mobile viewport compatibility

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
studenthub-next	Error		May 21, 2026 9:12pm

[coderabbitai]

Caution

Review failed

Failed to post review comments

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

This PR updates the landing page with new role-to-icon mappings and a benefits grid, refreshes hero copy and CTAs, adds smoke test coverage for desktop and mobile, and adjusts certificate schema validation to remove unused fields and convert certificate type to boolean.

Changes

Landing Page Content Refresh

Layer / File(s)	Summary
Data structures: icons and benefits mappings src/app/page.tsx	Introduces portalIcons role-to-emoji mapping and a structured benefits array containing marketing content titles and descriptions used by downstream portal and benefits sections.
Hero section content and CTAs src/app/page.tsx	Updates hero mid-rail "find talent" headline/subheadline and replaces hero aside content with new actions, platform description, refreshed CTA links (Get started, Request demo), and updated landingHeroStats items.
Portal grid icon rendering src/app/page.tsx	Adds a <span> element displaying the corresponding portalIcons emoji inside each portal grid link.
Benefits section replacement src/app/page.tsx	Replaces the prior search-focused section with a new "Why StudentHub" benefits section that iterates over the benefits array to render a grid of 4 benefit cards with titles and descriptions.
Landing page smoke tests and assertions e2e/smoke/landing.spec.ts, scripts/smoke-test.mjs	Adds comprehensive Playwright landing page smoke test suite verifying hero text, presence of landing CTAs, platform highlights strip, portal grid with exactly 5 links and 5 aria-hidden icons, benefits section with eyebrow and 4 ordered benefit cards, and public navigation. Includes mobile viewport test. Updates scripts/smoke-test.mjs to assert homepage HTTP 200 and presence of key landing text ("Every role gets its own workspace.", "Why StudentHub", "Get started").

Certificate Schema Validation

Layer / File(s)	Summary
Certificate type schema transformation src/modules/candidates/actions.ts	In addCandidateCertificate, removes certificate_title and certificate_issuer from the Zod schema and redefines certificate_type as a string enum ("true" or "false") with a transform that converts the validated value to a boolean.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• BAWES/studenthub-codex#27: Updates addCandidateCertificate in src/modules/candidates/actions.ts with overlapping changes to certificate validation schema definition.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main changes: landing page UX improvements with hero copy updates, role-specific icons, and a new benefits section.
Description check	✅ Passed	The description includes summary, context, and test plan sections covering the key changes. However, it lacks the required template structure including explicit Type selection, full Checklist completion, and detailed Screenshots section.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/STU-154-landing-ux-improvements

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/app/page.tsx (1)

69-74: ⚡ Quick win

Fragile index-based logic for "PDF" vs "Live" determination.

The condition index === 1 hardcodes the assumption that "CV export" is always the second item. If the array order changes, this logic silently breaks. Consider using an explicit data structure or checking the item name.

♻️ Proposed refactor using explicit mapping

-{["Profile", "CV export", "Timesheet", "Payment"].map((item, index) => (
+{[
+  { label: "Profile", status: "Live" },
+  { label: "CV export", status: "PDF" },
+  { label: "Timesheet", status: "Live" },
+  { label: "Payment", status: "Live" },
+].map((item) => (
-  <div key={item}>
-    <span>{item}</span>
-    <strong>{index === 1 ? "PDF" : "Live"}</strong>
+  <div key={item.label}>
+    <span>{item.label}</span>
+    <strong>{item.status}</strong>
   </div>
 ))}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/page.tsx` around lines 69 - 74, The mapping over ["Profile", "CV
export", "Timesheet", "Payment"] uses fragile index-based logic (index === 1) to
decide "PDF" vs "Live"; update the rendering in the map so it derives the label
from the item itself (e.g., check the item string or use an explicit array of
objects like {name, mode}) instead of using index, and update the JSX in the map
callback (the inline map and the span/strong rendering) to use that property to
show "PDF" for CV export and "Live" for others.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/page.tsx`:
- Around line 9-15: The portalIcons map is currently typed as Record<string,
string>, causing unchecked indexed access against the specific portalRoles;
update types so keys are the exact union of roles and eliminate undefined on
portalIcons[role]. Derive a PortalRole from the existing portalRoles (e.g.,
using typeof portalRoles[number] or make portalRoles readonly with as const) and
then type portalIcons as Record<PortalRole, string> or recreate portalIcons
using the satisfies pattern so accesses like portalIcons[role] are typed as
string (refer to symbols portalRoles and portalIcons and the place where
portalIcons[role] is used).

---

Nitpick comments:
In `@src/app/page.tsx`:
- Around line 69-74: The mapping over ["Profile", "CV export", "Timesheet",
"Payment"] uses fragile index-based logic (index === 1) to decide "PDF" vs
"Live"; update the rendering in the map so it derives the label from the item
itself (e.g., check the item string or use an explicit array of objects like
{name, mode}) instead of using index, and update the JSX in the map callback
(the inline map and the span/strong rendering) to use that property to show
"PDF" for CV export and "Live" for others.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5cdd0556-5d99-473e-839c-740d6c08da92

📥 Commits

Reviewing files that changed from the base of the PR and between 11e0d1e and 1ba4f90.

📒 Files selected for processing (1)

• src/app/page.tsx

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

Strengthen typing to align with portalRoles and satisfy strict mode.

portalIcons is typed as Record<string, string>, but the keys are exactly the five roles defined in portalRoles (line 36). With noUncheckedIndexedAccess enabled (per coding guidelines), accessing portalIcons[role] at line 108 will return string | undefined, requiring a runtime check or type assertion.

Define a more precise type to ensure compile-time safety and eliminate the need for runtime guards.

🔒 Proposed fix to align types with portalRoles

+type PortalRole = typeof portalRoles[number];
+
-const portalIcons: Record<string, string> = {
+const portalIcons: Record<PortalRole, string> = {
   candidate: "🎓",
   staff: "📋",
   company: "🏭",
   admin: "⚙️",
   inspector: "🔍",
 };

Alternatively, use satisfies for inference while retaining safety:

-const portalIcons: Record<string, string> = {
+const portalIcons = {
   candidate: "🎓",
   staff: "📋",
   company: "🏭",
   admin: "⚙️",
   inspector: "🔍",
-};
+} satisfies Record<PortalRole, string>;

As per coding guidelines: "Strict mode enabled — no implicit any, no unchecked index access."

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const portalIcons: Record<string, string> = {
	candidate: "🎓",
	staff: "📋",
	company: "🏭",
	admin: "⚙️",
	inspector: "🔍",
	};
	type PortalRole = typeof portalRoles[number];
	const portalIcons: Record<PortalRole, string> = {
	candidate: "🎓",
	staff: "📋",
	company: "🏭",
	admin: "⚙️",
	inspector: "🔍",
	};

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/page.tsx` around lines 9 - 15, The portalIcons map is currently typed
as Record<string, string>, causing unchecked indexed access against the specific
portalRoles; update types so keys are the exact union of roles and eliminate
undefined on portalIcons[role]. Derive a PortalRole from the existing
portalRoles (e.g., using typeof portalRoles[number] or make portalRoles readonly
with as const) and then type portalIcons as Record<PortalRole, string> or
recreate portalIcons using the satisfies pattern so accesses like
portalIcons[role] are typed as string (refer to symbols portalRoles and
portalIcons and the place where portalIcons[role] is used).

[BAWES]

DevRel Review

Status: Approved — solid landing page improvements

Clean, single-file change to src/app/page.tsx. The new copy is more concrete and benefit-driven:

• Portal icons add visual differentiation
• "Why StudentHub" section with specific benefits replaces the vague "search signals"
• Copy is sharper: "find talent", "Send CVs" instead of placeholder "jaafar"
• Stats section is more specific: "5 role-specific portals" vs generic statements

This directly addresses GitHub issue #28 (landing page UX overhaul).

One note: the Vercel preview deploy should be checked to confirm the visual layout renders correctly.

[coderabbitai]

🧹 Nitpick comments (1)

e2e/smoke/landing.spec.ts (1)

81-81: 💤 Low value

Consider aligning test name with what's actually verified.

The test name mentions "without overflow" but only verifies element visibility. For a smoke test this is acceptable, but you could either:

1. Rename to something like "landing page renders key elements on mobile"
2. Add explicit overflow verification if that's a critical concern

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@e2e/smoke/landing.spec.ts` at line 81, The test named "landing page renders
on mobile without overflow" only asserts element visibility; either update the
test name to reflect what it actually checks (e.g., rename the test to "landing
page renders key elements on mobile") or add an explicit overflow assertion:
after the existing visibility checks, evaluate page-level overflow (for example
using page.evaluate to compare document.documentElement.scrollWidth to
window.innerWidth or check computed overflow/overflowX on body/html) and assert
no horizontal overflow; modify the test() declaration or append the overflow
expect accordingly so the name matches behavior or the behavior matches the
name.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@e2e/smoke/landing.spec.ts`:
- Line 81: The test named "landing page renders on mobile without overflow" only
asserts element visibility; either update the test name to reflect what it
actually checks (e.g., rename the test to "landing page renders key elements on
mobile") or add an explicit overflow assertion: after the existing visibility
checks, evaluate page-level overflow (for example using page.evaluate to compare
document.documentElement.scrollWidth to window.innerWidth or check computed
overflow/overflowX on body/html) and assert no horizontal overflow; modify the
test() declaration or append the overflow expect accordingly so the name matches
behavior or the behavior matches the name.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ec490af1-19d1-476a-a9a0-acfc181a04ba

📥 Commits

Reviewing files that changed from the base of the PR and between 1ba4f90 and 2722a47.

📒 Files selected for processing (2)

• e2e/smoke/landing.spec.ts
• scripts/smoke-test.mjs

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 24 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/khalid-proj?upgradeToPro=build-rate-limit