fix: add actionable links to Ways to Engage cards on Community page

[NjeriCodeCraft]

Proposed change

Resolves #4546

The Ways to Engage section on /community displayed 4 cards with no clickable links.
Visitors had no way to navigate directly from the cards.

Changes made:

• Added href property to each object in the engagementWays array in utils/communityData.ts
• Updated the map in community/page.tsx to use Next.js Link component instead of a plain div
• External link (OWASP Slack) opens in a new tab with target="_blank" and rel="noopener noreferrer"
• Added hover styles and chevron arrow matching the existing Explore Resources cards

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 111f97f8-b3ef-4e72-bfdd-136f7cb1e482

📥 Commits

Reviewing files that changed from the base of the PR and between 02e7084 and cfae175.

📒 Files selected for processing (2)

• frontend/src/app/community/page.tsx
• frontend/src/utils/communityData.ts

---

Summary by CodeRabbit

Release Notes

• New Features
  • Community engagement section is now fully interactive with direct links to local chapters, member connections, project contributions, and Slack discussions.
  • Enhanced visual design with improved hover effects, smooth transitions, and navigation indicators for better usability.

Walkthrough

The PR converts the "Ways to Engage" engagement cards on the community page from static div elements to navigable Link components, adding href properties to the underlying data structure for internal routes (/chapters, /members, /contribute) and an external Slack invite link, with conditional external link attributes.

Changes

Cohort / File(s)	Summary
Community Page Navigation frontend/src/app/community/page.tsx	Replaced static div cards with Link elements driven by way.href, conditionally applying target="_blank" and rel="noopener noreferrer" for external links. Added right-chevron icon to titles and applied group-based hover styling with transition effects.
Community Data frontend/src/utils/communityData.ts	Added href field to each engagement item: /chapters, /members, /contribute, and external Slack invite URL (https://owasp.org/slack/invite).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• PR 4159: Implements identical conditional pattern for applying target="_blank" and rel="noopener noreferrer" only to external links in Link elements.
• PR 4552: Contains Playwright e2e tests asserting the exact hrefs and external link attributes being added in this PR.
• PR 3787: Also adds rel="noopener noreferrer" to external Link elements opening in new tabs.

Suggested reviewers

• arkid15r
• kasya

🚥 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 summarizes the main change: adding actionable links to the Ways to Engage cards on the Community page, which is the primary objective of this PR.
Description check	✅ Passed	The description is well-detailed and directly related to the changeset, explaining the problem, changes made, and linking to issue #4546.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue #4546: added href properties to engagementWays entries with correct routes, converted cards to clickable Link components, configured external Slack link with target="_blank" and rel="noopener noreferrer", and added hover styles with chevron icon.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue #4546 objective of adding actionable links to Ways to Engage cards. No out-of-scope modifications were introduced.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud