make trustbadge container responsive phone, tablet

[toreylittlefield]

Make Responsive TrustBadgeContainer.js

I have updated TrustBadgeContainer.js and TrustBadgeContainerStyles.js to be responsive on all viewports including mobile & tablet sizes.

On mobile sizes their will be 1 column for the image containers in the grid
On tablet sizes, their will be 2 columns for the image containers in the grid

Additionally on size "sm" (tablet down to mobile screens) I have added a padding-bottom of 10vh. @EugeneGohh no idea if adding this CSS prop is considered good practice but at least it works for now. I left a message in Discord but I think we should try standardizing how we want containers to have margins or padding so that there is a nice visual spacing/separation between containers

[toreylittlefield]

2nd Commit: Refactor FirstContainer.js

@EugeneGohh I have gone into FirstContainer.js and refactored a lot of the code. I did change a lot, but if you don't like it or it wasn't what you intended then please feel free to discard or tweak any of the changes.

• I made the first container responsive to all media types/sizes
• added media queries & bottom and top padding for mobile|tablet sizes
• removed much of the custom styling from the FirstContainerStyles.js & added some CSS
• Removed the Box components and replaced them with Grid components and used the "item" prop to make them grid-items inside of the grid container (as is implemented in Material UI)

[EugeneGohh]

Overview of what I have made:

• Make height same for FirstContainer & SecondContainer.
• Deleted commented code.
• Readjust padding to be 20 so it would look something like this as in the picture.

We should talk about standardizing everything later on.

[toreylittlefield]

Overview of what I have made:

• Make height same for FirstContainer & SecondContainer.
• Deleted commented code.
• Readjust padding to be 20 so it would look something like this as in the picture.

We should talk about standardizing everything later on.

Looks good we just need to get the spacing between those items (each avatar/pic) in this container. That's what I was hoping to accomplish with the spacing={3} prop but maybe needs some customize CSS if it overflows. An alternative which is kinda ugly is to add overflowX: "hidden" to the grid container CSS, but Material UI discusses this issue here: Material UI: Grid - Limitations also you can see the issue on Github 24272

[EugeneGohh]

It has been a few days. I have cleaned up some code during my free time. Here is an overview of what I have done for the past few days working on this PR. It looks good for now our site.

• Add class in second container section.
• Removed & refactored useless code in newsletter section.
• Tweaked a little bit on particles component.
• Refactored code in footer section so it is responsive on mobile and looks compact.

I will reply as soon as possible to your Discord messages maybe tomorrow morning.