feat: razaoTudo component

src/components/RazaoTudo/index.jsx

@@ -0,0 +1,59 @@
+import RazaoTudoLeafIcon from '../../assets/razao-tudo-leaf-icon.png';
+import RazaoTudoPicture from '../../assets/razao-tudo-picture.png';
+import './styles.css';
+
+export default function RazaoTudo() {
+    const numbersBoxData = Object.entries({
+        'Membros': '19',
+        'Caronas': '5K',
+        'Usuários': '+6K'
+    });
+
+    const textParagraphs = [
+        'Nossa maior preocupação é com as pessoas e o meio ambiente. \
+        Por isso, foi criado o Caronaê, a extensão que desenvolve uma alternativa inteligente e consciente para a mobilidade urbana.',
+        'Compartilhando as viagens, podemos reduzir a quantidade de \
+        carros nas ruas e diminuir a emissão de CO2 na natureza, fazendo a nossa parte pelo meio ambiente.',
+        'Além disso, o compartilhamento de caronas também incentiva o convívio social e a economia financeira para todos os usuários.'
+    ];
+
+  return (
+    <div className="razaoTudoMainContainer">
+        <div className="left">
+            <div className="pictureBox">
+                <img src={RazaoTudoPicture} alt="A razão de tudo - imagem 1" aria-description="Amigos se abraçando" />
+                <img src={RazaoTudoLeafIcon} alt="A razão de tudo - imagem 2" aria-description="Ícone de uma folha" />
+            </div>
+            <div className="numbersBox">
+                <h2 className="title">Números</h2>
+                <span className="dataBox">
+                    {
+                        numbersBoxData.map((item, index) => {
+                            return (
+                            <span className="main" key={index}>
+                                <h3 className="number">{item[1]}</h3>
+                                <h4 className="title">{item[0]}</h4>
+                            </span>
+                            );
+                        })
+                    }
+                </span>
+            </div>
+        </div>
+        <div className="right">
+            <div className="title">
+                <h1>A Razão de tudo</h1>
+            </div>
+            <div className="text">
+                {
+                    textParagraphs.map((item, index) => {
+                        return (
+                            <p className="textParagraph" key={index}>{item}</p>
+                        );
+                    })
+                }
+            </div>
+        </div>
+    </div>
+  );
+}

src/components/RazaoTudo/styles.css

@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lato&family=Poppins:wght@600&display=swap');
+
+.razaoTudoMainContainer {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 71rem;
+  height: 400px;
+  margin: 0 auto;
+  justify-content: space-between;
+}
+
+.razaoTudoMainContainer
+.left {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-right: 50px;
+  height: 250px;
+}
+
+.razaoTudoMainContainer
+.left
+.pictureBox {
+  display: flex;
+  flex-direction: row;
+  margin-left: 5%;
+}
+
+.razaoTudoMainContainer
+.left
+.pictureBox
+img {
+  margin-right: 20px;
+}
+
+.razaoTudoMainContainer
+.left
+.numbersBox {
+  display: flex;
+  align-items: last baseline;
+}
+
+.razaoTudoMainContainer
+.left
+.numbersBox
+h2 {
+  color: #171717;
+  font-family:  'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 22.69px;
+  line-height: 27.23px;
+  transform: rotate(-90deg);
+  margin-top: 15%;
+}
+
+.razaoTudoMainContainer
+.left
+.numbersBox
+.dataBox {
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.razaoTudoMainContainer
+.left
+.numbersBox
+.dataBox
+.main {
+  text-align: center;
+}
+
+.razaoTudoMainContainer
+.left
+.numbersBox
+.dataBox
+.main
+h3 {
+  color: #171717;
+  font-family:  'Lato', sans-serif;
+  font-size: 45.39px;
+  font-weight: 800;
+  line-height: 54.46px;
+}
+
+.razaoTudoMainContainer
+.left
+.numbersBox
+.dataBox
+.main
+h4 {
+  color: #171717;
+  font-family:  'Lato', sans-serif;
+  font-size: 22.69px;
+  font-weight: 600;
+  line-height: 27.23px;
+}
+
+.razaoTudoMainContainer
+.right {
+  width: 120%;
+  margin-left: 50px;
+}
+
+.razaoTudoMainContainer
+.right
+.title
+h1 {
+  color: #000000;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 48px;
+}
+
+.razaoTudoMainContainer
+.right
+.text {
+  padding: 0px;
+  width: 85%;
+}
+
+.razaoTudoMainContainer
+.right
+.text
+p {
+  color: #000000;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22.4px;
+  padding-bottom: 15px;
+}

src/pages/About/index.jsx

@@ -1,12 +1,14 @@
 import ConhecaProjeto from '../../components/ConhecaProjeto';
 import Navbar from '../../components/Navbar';
+import RazaoTudo from '../../components/RazaoTudo';
 import SeInteressouPeloProjeto from '../../components/SeInteressouPeloProjeto';
 
 const About = () => {
   return (
     <>
       <Navbar />
       <ConhecaProjeto/>
+      <RazaoTudo />
       <SeInteressouPeloProjeto/>
     </>
   );