Added the announcement banner for the weekly Office Hours

[chidiadi01]

What kind of change does this PR introduce?

This PR adds the announcement banner that was requested in #2401 to notify people that the Office Hours will now be done weekly.

Issue Number:

• Closes Weekly office hour change : create a banner that runs in all screen #2401

Screenshots/videos:

Screen.Recording.2026-05-24.181759.mp4

Summary

Does this PR introduce a breaking change?

No, it didn't. I ust added a component.

Checklist

• There's an animation once a page is opened, but the information stays static after the initial animation.

• The banner stays at the top of every page, i.e it is above the navlink bg.

• The "Join us" links to ; https://github.com/orgs/json-schema-org/discussions/34

• The banner color is the same blue as in the color of "getting started"., "join slack" and search" button bg-color.
  Here's a sample design for how the banner looks and note, do not zoom in the main website content as in the design below, only see how the banner should be displayed.

• Read, understood, and followed the contributing guidelines.

[github-actions]

Hi @chidiadi01! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: completed checklist items

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	9ec531d

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (463a579) to head (9ec531d).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2404   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        31    +1     
  Lines          672       695   +23     
  Branches       211       215    +4     
=========================================
+ Hits           672       695   +23     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[chidiadi01]

@Honyii, please review my PR.

[Honyii]

@chidiadi01 thanks for working on this issue, at first glance I can see that there's a white space at the top of the newly added banner which should be so- could you fix that?

[chidiadi01]

@chidiadi01 thanks for working on this issue, at first glance I can see that there's a white space at the top of the newly added banner which should be so- could you fix that?

I just checked again. I do not see that problem on my development build locally, so I can't be sure what the problem is. I'll check the preview generated by the CI/CD pipeline.

[chidiadi01]

Preview

I did not see any space in the preview. Check again with the latest preview.

[Utkarsh-123github]

Hi @chidiadi01
Great work!, but before we merge please address this:

Clean up setTimeout to prevent memory leaks
If this component unmounts before the 100ms or 400ms timers finish (e.g., the user navigates away instantly), the timeouts will still fire and attempt to update the state of an unmounted component. We should return a cleanup function in that useEffect to clear the intervals.

[github-actions]

Congratulations, @chidiadi01 for your first pull request merge in this repository! 🎉🎉. Thanks for your contribution to JSON Schema!