Update Join Us Page to Match New Figma Designs

[Rutjake]

✨ Enhancement Description

The goal of this issue is to update the Join Us page to fully align with the latest Figma designs. This includes structural changes to the layout, updated typography, and refined asset styling.

---

🌟 Benefits of the Enhancement

• Consistent Look & Feel: Ensures the Join Us page aligns with the visual language of the recently redesigned sections, creating a unified user experience across the platform.
• Enhanced User Experience: Implements modern UI patterns and improved spacing to make the page more intuitive and visually appealing.

---

🛠️ Proposed Implementation

Layout & Styling

• Apply the updated color palette, spacing (margins/padding), and typography as defined in Figma.
• Ensure the layout is fully responsive across mobile, tablet, and desktop breakpoints.
• SectionJoinUs: Refactor the container and block elements to match the specific grid/stacking behavior in the designs.

Components & Assets

• Typography: Update headers and body text to use the correct font tokens.
• Icons & Assets: Update social/link icons and ensure correct color filtering.
• External Links: Implement logic to display the "New Tab" icon only for links that open in an external page.

---

✅ Acceptance Criteria

• SectionJoinUs layout matches Figma sizing and spacing perfectly.
• Typography tokens (font-size, weight, line-height) are updated.
• Icons use the correct assets and colors.
• All links are verified to route to the correct destinations.
• "External link" icon visibility logic is functional (only shows for target="_blank").
• The page is responsive and looks correct on small screens.

---

📋 Action Items

• Request Assets: Contact the issue creator or team producer to confirm the final versions of the required icons and images.

---

🎨 UX Designer's Notes

CHANGES:

• Sidebars and page width have been updated to match the Design System (240px x 2 and 1920px).
• Renamed the page from "Join us!" to "Contact us"
• Combined "Contact us" and "Social Media" into a single box: "Get in touch and follow"
• Combined "Become a tester" and "Work with us" into a single box: "Community and opportunities"
• Updated "Are you a teacher?" box to "For education professionals"
• Replaced the 2x3 grid with a vertical (stacked) layout. This provides better "breathing room" for the page and more space for content within each box.
• Adjusted the search field position slightly upward to align it with the page header.
• Updated social media icon colors in the "Get in touch" box from #ffffff to #ffa100 to align with the Design System.
• Added icons to all boxes following a Z-layout
• Three icons were sourced from the web Design System (e.g., "Values"), while the "Sponge" icon was sourced from the game side of the Design System
• Added a missing "External link" icon next to the "Explore the teaching package" text link.

---

📎 Additional Information

• 🔗 Figma Designs

• 📷 Preview: