changing structure of main page and adding new colors

[devpato]

⚠️ Click preview button above ⚠️

PR Template

1. Apply relevant labels.
2. Self-review code and PR.
3. Request review from a team member.
4. Wait for the code review.
5. Take the bits that apply to your PR and delete the rest of template.

---

Fixes #.

Solution

• Describe how your solution works and solves the problem. Speak to your design and the approach taken in the implementation.
• Call out any assumptions and key decisions made while solving the issue.
• Call out changes that may lead to deployment failure
  • new or updated test specs
  • dependency and other package updates (use label and link to dependency docs)
  • new migrations (use label)
  • devOps changes (use label)

###### Thing your're calling out

The thing being called out. Use a list when it makes sense.

Testing

Provide a test plan made up of a sorted list of discrete steps with expected outcomes the reviewer should expect. If the functionality that needs to be tested seems complicated to explain, including a short video in the resources section or offer to pair on the review.

1. Install the new depedency by running, `yarn`
2. Start the app, `yarn dev`
3. Submit a request to some endpoint
4. Observe stuff works!

Resources

Provide supporing content to help the reviewer review your PR. Content can include a mix of videos, gifs, images, and deep links (e.g., figma design resource, code snippets, messages, etc).

###### Short description of video

[video](#video/)

###### Short description of Gif

![gif](#gif/)

###### Short description of image

![image](#url/)

###### Short description of code snippet

Github perma link will be rendered as a code snippet

### Links

Bulleted list of deep links to things like figma, messages,

- [Short description of deep link](#deep-link/)
- [Designs in Figma](#figma-deep-link)
- [Something in Gdrive](#gdrive-link)
- [Get the idea?](#deep-link)

### References

Bulleted list of references used to implement the solution presented in this PR.

- [Short description of what's being linked to](#the-link/)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ngosi	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 8:06PM (UTC)

[Yohanan-Negash]

@devpato Can you please work on the communication side of this PR? Reviewing this PR is hard since there is no explanation and no testing steps. You can use the template above ☝🏾 to demonstrate what you did 👍