feat: adicionou sesssão "viage com mais vantagens" na tela Aplicativo

src/components/SejaUmMotorista/SejaUmMotorista.module.css

@@ -0,0 +1,116 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu');
+
+.sejaUmMotorista {
+    position: relative;
+    display: flex;
+    width: 1250px;
+    height: 467px;
+    margin-bottom: 180px;
+}
+
+.cards {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+}
+
+.cardsRow {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: 25px;
+}
+
+.iconCard {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 223px;
+    height: 223px;
+    border-radius: 18px;
+}
+
+.imageTextCard {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 356px;
+    height: 223px;
+    border-radius: 18px;
+}
+
+.imageTextCard > h1, .textImageCard > h1 {
+    font-family: Ubuntu, sans-serif;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 600;
+    font-size: 24px;
+    margin: 20px;
+}
+
+.textImageCard {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 356px;
+    height: 223px;
+    border-radius: 18px;
+}
+
+.content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 480px;
+    margin: 80px;
+}
+
+.content > h1 {
+    position: relative;
+    font-size: 32px;
+    font-family: Poppins, sans-serif;
+    font-weight: 600;
+    color: rgba(0,0,0,1);
+    margin-bottom: 10px;
+}
+
+.content > h2 {
+    position: relative;
+    font-size: 14px;
+    font-family: Poppins, sans-serif;
+    font-weight: 600;
+    color: rgba(70,70,70,1);
+    margin-bottom: 30px;
+}
+
+.content > p {
+    position: relative;
+    font-family: Lato, sans-serif;
+    color: rgba(70,70,70,1);
+    margin-bottom: 14px;
+    font-weight: 500;
+    margin-bottom: 30px;
+    text-align: justify;
+    text-justify: inter-word;
+}
+
+button {
+    position: relative;
+    font-family: Karla, sans-serif;
+    font-weight: 800;
+    font-size: 12px;
+    width: 290px;
+    min-height: 50px;
+    border-radius: 200px;
+    background-color: rgba(43, 56, 138, 1);
+    color: rgba(254, 254, 254, 1);
+    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+}
+
+button:active {
+    top: 2px;
+}

src/components/SejaUmMotorista/index.jsx

@@ -0,0 +1,90 @@
+import { Link } from 'react-router-dom';
+import imgBusStop from '../../assets/bus-stop.svg';
+import iconCar from '../../assets/icon-car.svg';
+import iconPassageiro from '../../assets/icon-passageiro.svg';
+import imgMotorista from '../../assets/img-motorista.svg';
+import styles from './SejaUmMotorista.module.css';
+
+const SejaUmMotorista = () => {
+  return (
+      <section className={ styles.sejaUmMotorista }>
+        <Cards />
+        <Content />
+      </section>
+  );
+};
+
+const Cards = () => {
+  return (
+    <div className={ styles.cards }>
+
+      <div className={ styles.cardsRow }>
+        <ImageTextCard backgroundColor="rgba(43, 56, 138, 1)"
+                       imgSrc={ imgMotorista } />
+        <IconCard backgroundColor="rgba(235, 61, 56, 1)"
+                  imgSrc={ iconCar } />
+      </div>
+
+      <div className={ styles.cardsRow }>
+        <IconCard backgroundColor="rgba(237, 128, 36, 1)"
+                  imgSrc={ iconPassageiro } />
+        <TextImageCard backgroundColor="rgba(110, 54, 31, 1)"
+                       imgSrc={ imgBusStop } />
+      </div>
+
+    </div>
+  );
+};
+
+const Content = () => {
+  return (
+    <div className={ styles.content }>
+      <h1>Viage com mais vantagens</h1>
+      <h2>Seja um motorista ou passageiro do Caronaê!</h2>
+      <p>
+           Se você é motorista, pode economizar dinheiro dividindo os custos
+           da viagem e ainda contribuir para um ambiente mais sustentável.
+      </p>
+      <p>
+           Se você é passageiro, pode economizar dinheiro com as viagens
+           compartilhadas e, ao mesmo tempo, ter mais flexibilidade,
+           segurança e comodidade, escolhendo a melhor rota e horário
+           para sua viagem.
+      </p>
+      <Link style={{ textDecoration: 'none' }} to="/faq" >
+        <button>Como me torno um motorista do Caronaê?</button>
+      </Link>
+    </div>
+  );
+};
+
+const IconCard = ({ backgroundColor, imgSrc }) => {
+  return (
+    <div className={ styles.iconCard }
+         style={{ backgroundColor: backgroundColor }}>
+    <img src={ imgSrc } style={{ width: '80px' }} />
+    </div>
+  );
+};
+
+const ImageTextCard = ({ backgroundColor, imgSrc }) => {
+  return (
+    <div className={ styles.imageTextCard }
+         style={{ backgroundColor: backgroundColor }}>
+      <img src={ imgSrc} style={{ width: '190px' }} />
+      <h1>Motorista</h1>
+    </div>
+  );
+};
+
+const TextImageCard = ({ backgroundColor, imgSrc }) => {
+  return (
+    <div className={ styles.textImageCard }
+         style={{ backgroundColor: backgroundColor }}>
+    <h1>Passageiro</h1>
+    <img src={ imgSrc } style={{ width: '190px' }} />
+    </div>
+  );
+};
+
+export default SejaUmMotorista;