Add About Us page first section

[mariana-caldas]

As a user, I want to learn more about the project's purpose on the About Us page. To do so, the first section should be added to that page as per the mockup (and attached). The section will contain:

• A new component , the Title.js, that will wrap the contents "About Web Dev Path" and later "Our goals". That component will be wrapped by the Container.js to ensure margin consistency.
• New SVG components for the attached .svg files.
• 2 TwoColum.js components.
• Instead of the "#", we are using the attached brackets that will simulate an empty JS array "[ ]" in the first section.
• All the components will be added to the About Us page wrapped by a RevealContentContainer.js to ensure they are revealed on scrolling.

---

Once you have the most up-to-date master branch locally (git pull from your local master branch), create a new branch git checkout -b feature/about-us-first-section to get started. Check out our Wikipedia page to learn more about that process.

---

Please, keep in mind that once you assign this task to yourself you'll need to complete it in 10 days.

---

Acceptance Criteria:

• Ensure the new first section is added to the About Us page while replacing the content placeholder.
• Test the feature in many screen sizes, you can use the Inspect tool for that.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• Update the CHANGELOG.md file.

[cherylli]

So to clarify,

 <RevealContentContainer>
    <Container>
    <Title>
      <Container>
        <TwoColumn title="About Web Dev Path" .../>
        <TwoColumn title="Our goals" ...>       
    </Title>
</Container>    
</RevealContentContainer>

Also, am I allowed to combine to two square brackets svgs into one? or convert them into png?

[mariana-caldas]

So to clarify,

 <RevealContentContainer>
    <Container>
    <Title>
      <Container>
        <TwoColumn title="About Web Dev Path" .../>
        <TwoColumn title="Our goals" ...>       
    </Title>
</Container>    
</RevealContentContainer>

Also, am I allowed to combine to two square brackets svgs into one? or convert them into png?

1. I visualized something like this, @cherylli . Pls let m know if that makes sense and feel free to adapt the idea :

 <RevealContentContainer>
    <Container>
      <Title>About Web Dev Path</Title>(div made with an <h2/>)
      <TwoColumn>
        {image}{content}
      </TwoColumn>
      <TwoColumn>
        {content}{image}
     </TwoColumn> 
  </Container>    
</RevealContentContainer>

The "Our goals" Title would be part of another block just below we're adding later.

2. Yes, ideally we should combine those SVG array elements into one single SVG. If you try it and find it hard, please ping @jomaira-rgb and @rebecatschiedel at ou #design=gate channel to check if we can export it as a single SVG entity, pls.