Merge pull request #39 from caronae/feat/car-15

feat: home responsiveness

src/components/Apoiadores/style.css

@@ -23,7 +23,8 @@
   font-weight: 400;
   margin-top: 20px;
 }
-.logosLinha1 {
+.logosLinha1,
+.logosLinha2 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,12 +34,38 @@
   margin-top: 25px;
 }
 
-.logosLinha2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .logosLinha2 > img {
   padding: 0vw 4vw 0vw 4vw;
 }
+
+@media (max-width: 1100px) {
+  .apoiadores {
+    max-width: 50%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .apoiadoresTitulo {
+    font-size: 24px;
+  }
+
+  .apoiadoresParagrafo {
+    max-width: 50%;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .logosLinha1,
+  .logosLinha2 {
+    flex-direction: column;
+  }
+
+  .logosLinha1 > img,
+  .logosLinha2 > img {
+    padding: 2vw 4vw 5px 4vw;
+    margin-top: 25px;
+  }
+}

src/components/Buttons/Button/index.jsx

@@ -6,7 +6,7 @@ const Button = props => {
     <div>
       <BasicButton
         textContent={props.textContent}
-        fontSize="25px"
+        fontSize={props.fontSize ?? '25px'}
         backgroundColor={props.backgroundColor}
         lineHeigth="30px"
         color={props.color}

src/components/Falae/index.jsx

@@ -1,10 +1,15 @@
 import './styles.css';
 import { Link } from 'react-router-dom';
 import falaeImg from '../../assets/falae-img.jpg';
+import useWindowDimensions from '../../hooks/UseWindowDimensions';
 import ImagePill from './../ImagePill';
 import MailIcon from './../MailIcon';
 
 const Falae = () => {
+
+  const { width } = useWindowDimensions();
+  const isGreatSize = (width >= 1100);
+
   return (
     <div className="falae-container">
       <div className="texts">
@@ -33,8 +38,8 @@ const Falae = () => {
       <div className="images">
         <div className="falae-rectangle"></div>
         <div className="falae-icon-img">
-          <MailIcon backgroundColor="#17b270" size="160px" />
-          <ImagePill width="345px" height="160px" src={falaeImg} />
+          <MailIcon backgroundColor="#17b270" size={isGreatSize ? '160px' : '105px'} />
+          <ImagePill width={isGreatSize ? '345px' : '230px'} height={isGreatSize ? '160px' : '100px'} src={falaeImg} />
         </div>
       </div>
     </div>

src/components/Falae/styles.css

@@ -93,3 +93,71 @@
 .texts {
   margin-right: 10vw;
 }
+
+@media (max-width: 1100px) {
+  .falae-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    margin-top: 150px;
+    margin-bottom: 100px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .texts {
+    margin-right: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .falae-heading {
+    font-size: 32px;
+  }
+
+  .falae-text {
+    font-size: 14px;
+    font-weight: 600;
+    max-width: 320px;
+  }
+
+  .falae-links {
+    max-width: 320px;
+    margin-bottom: 50px;
+  }
+
+  .falae-duvida {
+    width: 200px;
+    height: 45px;
+    font-size: 14px;
+  }
+
+  .falae-contato {
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .images {
+    margin: 0 auto;
+    max-width: 320px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .falae-rectangle {
+    width: 95%;
+    height: 100px;
+  }
+
+  .falae-icon-img {
+    align-items: center;
+  }
+
+  .falae-icon-img div {
+    margin-right: 10px;
+  }
+}

src/components/HeroSection/index.jsx

@@ -1,39 +1,47 @@
 import './styles.css';
 import criancasCarro from '../../assets/criancas-carro.png';
-import estradaEsq from '../../assets/estrada-1.png';
-import estradaDir from '../../assets/estrada-2.png';
+import estradaDir from '../../assets/estrada-1.png';
+import estradaEsq from '../../assets/estrada-2.png';
 import carro from '../../assets/Jeep.png';
 import naturalPeople from '../../assets/nature-people.png';
 import Button from '../Buttons/Button';
 import IconForm from '../IconForm';
 
 const HeroSection = () => {
+
+  const screenSize = window.screen.width;
+
   return (
     <div className="hero-section">
-      <div id="street1" className="street">
-        {' '}
-        <img alt="estrada" src={estradaDir} />
+      <div className="street">
+        <img alt="estrada" src={estradaEsq} />
       </div>
       <div className="main">
-        <div className="text">
+        <div>
           <div className="row">
-            <span className="main-text">Faça da sua</span>
-            <IconForm src={criancasCarro} margin="10px" image />
-            <span className="main-text">carona</span>
+            <span className="main-text">Faça da sua carona</span>
+            <IconForm
+              src={criancasCarro}
+              width={screenSize > 600 ? '' : '200px'}
+              height={screenSize > 600 ? '74px' : '80px'}
+            />
           </div>
           <div className="row">
             <span className="main-text">uma ação</span>
             <IconForm
               src={carro}
-              widht="153px"
-              height="74px"
-              margin="10px"
+              width={screenSize > 600 ? '' : '120px'}
+              height={screenSize > 600 ? '74px' : '50px'}
+              margin="15px"
+              className="car-icon"
               backgroundColor="#ED8024"
               wide
             />
             <span className="main-text">sustentável</span>
             <IconForm
               src={naturalPeople}
+              width={screenSize > 600 ? '' : '50px'}
+              height={screenSize > 600 ? '' : '50px'}
               margin="10px"
               backgroundColor="#17B270"
               shadow="#6E361F"
@@ -53,9 +61,8 @@ const HeroSection = () => {
           />
         </div>
       </div>
-      <div id="street2" className="street">
-        {' '}
-        <img alt="estrada" src={estradaEsq} />
+      <div className="street">
+        <img alt="estrada" src={estradaDir} />
       </div>
     </div>
   );

src/components/HeroSection/styles.css

@@ -7,37 +7,37 @@
   color: #000000;
 }
 
-body {
-  overflow-x: hidden;
-}
-
 .hero-section {
+  width: 100vw;
   display: flex;
   margin-top: 100px;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 }
-.main {
-  translate: 0 2rem;
-  align-self: flex-end;
-  flex-direction: column;
-  width: 100%;
-  overflow-x: auto;
+
+.street {
+  max-width: 70%;
 }
 
-.div text {
-  padding: 0px 0px 0px 0px;
+.main {
+  text-align: center;
+  max-width: 80%;
 }
 
 .row {
-  margin-top: 0.5rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
 }
-.street {
-  align-self: center;
+
+.row
+.main-text {
+  font-size: 64px;
+  font-weight: 700;
+  line-height: 74.82px;
 }
 
 .subtext {
@@ -56,3 +56,29 @@ body {
   margin-top: 40px;
   margin-bottom: 80px;
 }
+
+@media (max-width: 1100px) {
+  .street {
+    display: none;
+  }
+
+  .hero-section {
+    margin: 0 auto;
+    width: 100vw;
+    display: block;
+    margin-top: 50px;
+  }
+
+  .row
+  .main-text {
+    font-size: 30px;
+  }
+
+  .main {
+    margin: 0 auto;
+  }
+
+  .subtext {
+    font-size: 16px;
+  }
+}