resizing layout and components for landing page

[Blake-Larson]

Description

I have reworked the TailwindCSS classes for the landing page to better align with the web design by Natashka333.

• I reverted the custom media query breakpoints to the tailwind defaults. I believe this gives us greater control over the layouts and better aligns with the web design. I left a comment in the tailwindcss.config for beginners to more easily understand breakpoints.

• I made various changes to how some elements were spaced out by using Flexbox instead of static dimensions or padding.

• I removed some unnecessary divs.

Type of change

Please select everything applicable. Please, do not delete any lines.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update
• [ ] This change requires an update to testing

Issue

• [X] Is this related to a specific issue? If so, please specify: Resizing components on landing/onboarding page #335

Checklist:

(I was not able to run tests as I have an issue running Cypress on my WSL on Windows. No functionality should be changed.)

• [X] This PR is up to date with the main branch, and merge conflicts have been resolved
• [x] I have executed npm run test and all tests have passed successfully or I have included details within my PR on the failure.
• [x] I have executed npm run lint and resolved any outstanding errors. Most issues can be solved by executing npm run format
• [X] My code follows the style guidelines of this project
• [X] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [X] My changes generate no new warnings

[Caleb-Cohen]

LGTM, test/lint both ran success on my computer. Awaiting @Natashka333 approval.

[Natashka333]

@Blake-Larson thank you for contribution, this looks great! One thing what I would like to change after running, is the borders. Can we do a corner radius of 15 for every sections and nav divs?

[Blake-Larson]

Sure thing. I just made the changes to the border-radius for those items and pushed to this pull request. Let me know if anything else needs to be adjusted!

[Caleb-Cohen]

@Blake-Larson Great work!