Merge pull request #31 from caronae/feature/cae-94

Feature/cae 94
caronae · May 31, 2024 · ec09a83 · ec09a83
2 parents dafadaf + 7cb8ea9
commit ec09a83
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 48 deletions.
diff --git a/src/components/SeInteressouPeloProjeto/index.jsx b/src/components/SeInteressouPeloProjeto/index.jsx
@@ -4,58 +4,65 @@ import { TextInput, TextArea, SubmitButton } from '../Form';
 import ImagePill from '../ImagePill';
 import MailIcon from '../MailIcon';
 
-export default function SeInteressouPeloProjeto() {
+export default function SeInteressouPeloProjeto({
+  withDecoration = true
+}) {
   return (
     <div className="se-interessou-container">
       <SeInteressouHeading />
       <SeInteressouForm />
 
-      <MarginDecoration
-        element={
-          <Pill
-            width="400px"
-            height="130px"
-            backgroundColor="rgba(23, 178, 112, 1)"
+      { withDecoration ?
+        (
+        <>
+          <MarginDecoration
+            element={
+              <Pill
+                width="400px"
+                height="130px"
+                backgroundColor="rgba(23, 178, 112, 1)"
+              />
+            }
+            rotation="-25deg"
+            left="-300px"
+            top="-140px"
           />
-        }
-        rotation="-25deg"
-        left="-300px"
-        top="-140px"
-      />
 
-      <MarginDecoration
-        element={<MailIcon size="140px" backgroundColor="#2B388A" />}
-        rotation="30deg"
-        left="-200px"
-        top="100px"
-      />
+          <MarginDecoration
+            element={<MailIcon size="140px" backgroundColor="#2B388A" />}
+            rotation="30deg"
+            left="-200px"
+            top="100px"
+          />
 
-      <MarginDecoration
-        element={<MailIcon size="140px" backgroundColor="#EB3D38" />}
-        rotation="-20deg"
-        right="-100px"
-        top="-180px"
-      />
+          <MarginDecoration
+            element={<MailIcon size="140px" backgroundColor="#EB3D38" />}
+            rotation="-20deg"
+            right="-100px"
+            top="-180px"
+          />
 
-      <MarginDecoration
-        element={
-          <Pill
-            width="400px"
-            height="130px"
-            backgroundColor="rgba(110, 54, 31, 1)"
+          <MarginDecoration
+            element={
+              <Pill
+                width="400px"
+                height="130px"
+                backgroundColor="rgba(110, 54, 31, 1)"
+              />
+            }
+            rotation="25deg"
+            right="-450px"
+            top="80px"
           />
-        }
-        rotation="25deg"
-        right="-450px"
-        top="80px"
-      />
 
-      <MarginDecoration
-        element={<MailIcon size="175px" backgroundColor="#ED8024" />}
-        rotation="30deg"
-        right="-250px"
-        bottom="0px"
-      />
+          <MarginDecoration
+            element={<MailIcon size="175px" backgroundColor="#ED8024" />}
+            rotation="30deg"
+            right="-250px"
+            bottom="0px"
+          />
+        </>
+      ) : null}
     </div>
   );
 }

diff --git a/src/components/SeInteressouPeloProjeto/styles.css b/src/components/SeInteressouPeloProjeto/styles.css
@@ -3,8 +3,8 @@
   display: flex;
   flex-direction: row;
   gap: 100px;
-  justify-content: space-between;
-  margin-top: 200px;
+  justify-content: space-around;
+  margin: 200px 0px 100px 0px;
   height: 400px;
   width: 100%;
 }

diff --git a/src/components/SejaUmMotorista/SejaUmMotorista.module.css b/src/components/SejaUmMotorista/SejaUmMotorista.module.css
@@ -3,10 +3,10 @@
 .sejaUmMotorista {
     position: relative;
     display: flex;
-    width: 1250px;
+    width: 100%;
     height: 467px;
-    margin-bottom: 100px;
-    margin-top: 100px;
+    margin: 180px 0px;
+    justify-content: space-around;
 }
 
 .cards {

diff --git a/src/components/SejaUmMotorista/index.jsx b/src/components/SejaUmMotorista/index.jsx
@@ -39,7 +39,7 @@ const Cards = () => {
 const Content = () => {
   return (
     <div className={ styles.content }>
-      <h1>Viage com mais vantagens</h1>
+      <h1>Viaje com mais vantagens</h1>
       <h2>Seja um motorista ou passageiro do Caronaê!</h2>
       <p>
            Se você é motorista, pode economizar dinheiro dividindo os custos

diff --git a/src/pages/MobileApp/index.jsx b/src/pages/MobileApp/index.jsx
@@ -1,15 +1,19 @@
 import ComoOAppFunciona from '../../components/ComoOAppFunciona';
+import Footer from '../../components/Footer';
 import Navbar from '../../components/Navbar';
+import SeInteressouPeloProjeto from '../../components/SeInteressouPeloProjeto';
 import SejaUmMotorista from '../../components/SejaUmMotorista';
 import VaDeCaronae from '../../components/VaDeCaronae';
 
 const MobileApp = () => {
   return (
     <>
     <Navbar />
-    <SejaUmMotorista />
     <VaDeCaronae />
+    <SejaUmMotorista />
     <ComoOAppFunciona />
+    <SeInteressouPeloProjeto withDecoration={false} />
+    <Footer/>
     </>
   );
 };