Add new header

[nikhilwoodruff]

Fixes #633

🤖 Generated by Copilot at d6acf05

Summary

🎨🧮📱

This pull request implements a redesign of the PolicyEngine component and its subcomponents, which is the main component of the app. It also improves the app's responsiveness on different screen sizes by adding a tablet display category and a new ResponsiveComponent component. Additionally, it updates the Google Fonts stylesheet link to include the optical size axis for Roboto Serif, which enhances the readability and aesthetics of the text. The changes affect the files src/layout/Responsive.jsx, public/index.html, src/index.js, src/redesign/PolicyEngine.jsx, and src/style/App.css.

Oh we're the crew of the PolicyEngine
We make the app look good and clean
We use Roboto Serif and HoverBackground
And we heave away on the count of three

Walkthrough

• Update the PolicyEngine component to use a redesigned version that renders a responsive HeaderBar with different elements based on the display category (link, link)
• Add a tablet category to the DisplaySize object and the determineDisplayCategory function to improve the responsiveness of the app on different devices (link, link)
• Create a useDisplayCategory custom hook and a ResponsiveComponent component to simplify the logic of rendering different components based on the display category (link)
• Import the Google Fonts stylesheet with the optical size axis for Roboto Serif to improve the readability and aesthetics of the text (link, link)
• Use the HoverBackground component to create a color transition effect on hover for the HeaderBar elements (link)