[Component] Implement Page Headers

[niculistana]

Summary

As a design system engineer, I would like to have a Banner/Callout component so I can use it on my website.

Eng. Notes

1. Copy over philippines/aboutindex.tsx#L44-L67 from BetterGov and create Header with image component
2. Copy over philippines/Hotlines.tsx#L105-L112 from BetterGov and create Header with search and filter function component
3. Copy over travel/visa/index.tsx#L445-L482 and create Header with background color, CTA and search component
4. Copy over [pages/flood-control-projects/index.tsx#L736-L749] https://github.com/adobocorp/bettergov/blob/main/src/pages/flood-control-projects/index.tsx#L736-L749 and create Header with CTA and tab component
5. Create Storybook file and add stories
6. Test different browsers & viewports

NOTE: Please import lucide & shadcn components where needed as much as possible.

Design Notes

Design system audit: https://www.figma.com/board/JekPEzqjScujR6ELwRzTVg/Design-Audit?node-id=133-1147&t=Ml1nbIXfE6FlO6Lh-0

What to do
Define a consistent patten for the page header (excluding homepage hero)
What we current have
A: Header with image
B: Header with search and filter function
C: Header with background color, CTA and search
D: Header with CTA and tab
Recommendation:
Header with the ff properties:
Title (required, H1)
Alignment (left/center)
Description text (boolean)
Disclaimer text (boolean)
Background image/color (boolean)
Search & pill-filter (boolean)
Page configuration (boolean)
CTA (boolean)
Tabs (boolean)

TBD: Do we allow two column layout (see C)

[github-actions]

Stale issue message