#70 Implement FOI Guide Page

[Yurika-Kan]

This PR adds implementation for the FOI Guide page using the Education templates, with frontend hover + animation functionality on the map.

Summary of Component Structure:

• Edited EducationInitiativeWrapper & InitiativeDescription templates: added consistent colors, flexible template properties, and slight edits to match updated Figma

• Implemented MapButtonsPanel: displays interactive buttons and the SVG map (hover over button or hover over state --> button + state highlighted)

• Implemented NewEnglandMap: holds & renders the SVG of New England states with hover-based color changes, memoized

• Implemented StateShape: wrapper for elements in SVG, memoized

• Implemented HoverButton: logic & styling for hovering over & clicking on button functionality (hover --> highlight, click -->link)

Template / Layout Updates:

• Created an education/index.tsx page for the Education landing view using InitiativeDescription

• Created education/foi-guide.tsx to display the FOI map interface with MapButtonsPanel

Rendering Optimization Notes:

• Memoization: multiple components are wrapped in React.memo() with a custom comparison to re-render only when hovered state changed - this prevents unnecessary rerendering of all states when only one is hovered.
• Decoupled all components to not have a monolith file that would take longer to render as well.
• Tried react map library but was outdated & not compatible with React 19, which we are on.

Future Notes:

• Implement stub Education page (currently using Education Initiatives - Upcoming Events #50's template)
• Replace stub links that the buttons lead to once implemented
• Still needs work to make it responsive!

Page:

Hovered Button + Component:

Hovered Button + No Component:

Screen.Recording.2025-06-21.at.5.13.01.AM.mov

[builderpepc]

Hi @Yurika-Kan! Looks great overall!

Aside from the minor comments in my review, I would suggest taking a look at responsiveness on mobile and/or other desktop screen sizes. I have a somewhat large monitor at home, but even on more normal-sized screens, the positioning of the map looks a little off. In this video I started out with a normal laptop screen size and then adjusted to show some other possible sizes, plus what it looks like on mobile:

2025-06-28.15-45-42.mp4

In particular, on mobile, you should probably hide the map entirely and just show the buttons.

One other thing I wanted to point out is this effect with the buttons:

Recording.2025-06-28.155305.mp4

On medium/smaller desktop sizes, the blue part of the button extends all the way to the black side on the right when hovered over. But on larger screens, that white gap appears. I think this is not essential to fix (again, I have a rather large screen), but if you have an easy solution for it, I would include that in this PR.

[builderpepc]

Thanks for making note of ambiguous colors in the comments. We will revisit that problem in #91.

[builderpepc]

The visual bug with the hover state of the buttons persists with screen sizes above 1600px in width, but that does not need to hold up this PR. The bug is now tracked in #95.