3. Update Central Layout (Points: 7)

For this challenge, your team needs to improve the “Central Layout”.

Checkout: client/src/layouts/Central/Central.tsx to get started.

The “Central Layout” is used by all of the pages themed to look like Carleton Central.

This means that any change may to this file will modify the look of all over pages using this layout.

In the example below, children is the contents of other pages being passed into this layout to be rendered.

function Central({ title, children }: Props) {
  return (
    <Base>
      <Banner />
      <div className="Central__page">
        <HeaderLinks />
        <Navigation />
        <h2 className="Central__page__title">{title}</h2>
        <Divider />
        <div className="Central__page__content">{children}</div>
        <Divider />
        <div className="Central__page__footer">
          <div className="Central__page__footer__release">Release: 8.10.1</div>
          <div className="Central__page__footer__copyright">
            © 2024 Ellucian Company L.P. and its affiliates.
          </div>
        </div>
      </div>
    </Base>
  );
}

Acceptance Criteria:

The new layout must satisfy (3) of the (5) following criteria

• Modify the Carleton Central <Banner /> to look “better”, such as…
  • change the image
  • add a better title
  • anything you think would be cool or funny
• Add icons to <HeaderLinks /> icons that represent their intended goals
• Improve the “page title” styling (see Central__page__title)
• Create an improved footer (see Central__page__footer)
• Update the colors used in the layout (see client/src/globals.scss)