Upside down tab component that contains multiple input sets. This component should utilize the input fields created in #2.

Refer to this file for the design: https://www.figma.com/file/rFq0urIUDQUWMYjVoZNKWA/zotmetrics?type=design&node-id=6%3A2&mode=design&t=N6y3jOA0Ky0dmgHZ-1

When working on this issue, do not try to match the styling of the Figma file. Only use the Figma file as a guide on how to lay out the page. We'll work on colors and component styling separately to help reduce merge conflicts.

Main input field components (quarter, year, department, etc.). This component should be a separate component and not directly in the +page.svelte file.

Colocate this component in the src/routes folder, then import it into the +page.svelte file.

Refer to this file for the design: https://www.figma.com/file/rFq0urIUDQUWMYjVoZNKWA/zotmetrics?type=design&node-id=6%3A2&mode=design&t=N6y3jOA0Ky0dmgHZ-1

When working on this issue, do not try to match the styling of the Figma file. Only use the Figma file as a guide on how to lay out the page. We'll work on colors and component styling separately to help reduce merge conflicts.

Create a header component with the logo, name, and nav elements (notes, faq, and feedback). This component should be a separate component and not directly in the +layout.svelte file.

Colocate this component in the src/routes folder.

Refer to this file for the design: https://www.figma.com/file/rFq0urIUDQUWMYjVoZNKWA/zotmetrics?type=design&node-id=6%3A2&mode=design&t=N6y3jOA0Ky0dmgHZ-1

When working on this issue, do not try to match the styling of the Figma file. Only use the Figma file as a guide on how to lay out the page. We'll work on colors and component styling separately to help reduce merge conflicts.