Work Welcome

[rahulshamkuwar]

Description

This issue will migrate the WorkWelcome component from the old website. The folder for the component can be found from the old website's structure at /src/components/landing/WorkWelcome.

Technical Requirements

• React
• Next.js
• Styled Components (more so CSS than Styled Components)
• TailwindCSS.

Branching

When making a branch for this issue, please branch off from feature-18-landing-components. Also ensure that your branch name follows the naming convention in the README.md.

Tasks

• Convert styles.js to Individual React Components:

  • Each styled component should be implemented in its own file. The naming convention must be in PascalCase while any properties would be in camelCase.
  • In order to convert the styled component to a React component, it is generally a good idea to have the root HTML tag in the React component match the styled component tag (i.e. styled.div would be a <div> tag or styled.span would be a <span> tag).
  • Any styles should be implemented using TailwindCSS.
  • If the styled component uses the ThemeContext provider, typically denoted as theme in the file, refer to TailwindCSS's documentation on dark mode.
  • Refer to tailwind.config.ts for any named themes that have already been migrated. If there is a theme that is used often but not migrated already, please ensure to add it to the file and use it.

• Refactor index.jsx:

  • You can ignore the Helmet and Header tags for this issue.
  • Before importing any new dependencies, check if there is a way to implement it already in Next.js.
  • ThemeContext has already been implemented, so any TailwindCSS components that need to know if the theme is light or dark will already know.
  • Replace the usage of styled components with the newly created React components.
  • Ensure that the layout, spacing, and overall design remain consistent with the original.
  • Test the index.js file for any visual discrepancies or issues.

• Migrate data:

  • If there is a JSON file in the old website's folder that is not already the /src/data folder of the new website, please copy the data over and use it in this manner.

Notes

• If there is a component for this issue that depends on another issue, please let @Blueprint-Boulder/core-website know about this ASAP.
• No pages have been migrated yet, so we only have the default page that comes with Next.js. If you would like to test the component, feel free to create a page to test it out, however, do not commit this page.
• While converting, if there's any uncertainty about the conversion or if you believe a certain style cannot be replicated accurately using Tailwind, please flag it for review.