Feat/mostra mapa

src/Pages/Landing/index.js

@@ -21,6 +21,7 @@ import { openIDASignin } from '../../service/ida.lib';
 import Map from '../../components/Map/Map';
 import ReponsiveVideoPlayer from "../../components/ResponsiveVideoPlayer/ReponsiveVideoPlayer";
 import Slider from '../../components/Slider/Slider';
+import SimpleCard from '../../components/SimpleCard/SimpleCard';
 
 const iWant = (history, state) => {
   if (!state.auth) {
@@ -45,6 +46,30 @@ const Landing = ({ history }) => {
   }, [state.auth, state.user]);
 
 
+  const cardData = {
+    dataEvent1:{
+        img:'../../assets/imgCard1.png',
+        description:'Imagem da praia em Fortaleza - CE',
+        dateEvent:'30 jul',
+        titleEvent:'Reunião Aberta Mídia Ninja em Fortaleza',
+        placeEvent:'Fortaleza, CE',
+    },
+    dataEvent2:{
+        img:'../../assets/imgCard1.png',
+        description:'Imagem da praia em Fortaleza - CE',
+        dateEvent:'2 ago',
+        titleEvent:'Reunião Aberta Mídia Ninja em Fortaleza',
+        placeEvent:'Fortaleza, CE',
+    },
+    dataEvent3:{
+        img:'../../assets/imgCard1.png',
+        description:'Imagem da praia em Fortaleza - CE',
+        dateEvent:'5 ago',
+        titleEvent:'Reunião Aberta Mídia Ninja em Fortaleza',
+        placeEvent:'Fortaleza, CE',
+    },
+};
+const dataCardEvent =JSON.stringify(cardData);
     return (
       <div className="landing-container">
         <section className="landing">
@@ -79,6 +104,16 @@ const Landing = ({ history }) => {
             </p>
           </div>
         </section>
+<<<<<<< HEAD
+        <section className="event-calendar">
+            <p>Primeira rota lançada!</p>
+            <h2>República do Nordeste</h2>
+            <Slider>
+              <SimpleCard dataEvents={dataCardEvent}></SimpleCard>
+            </Slider>
+        </section>
+=======
+>>>>>>> 0acc27e272483f7e7acdd5a5dcfaa4881c5205d2
         <section className="activist-map">
           <div style={{ textAlign: "left" }}>
             <img className="map-img" src={mapImg} alt="Mapa Ativista" />

src/Pages/Landing/styles.css

@@ -31,6 +31,7 @@
     display: flex;
     flex-direction: column;
     font-size: 2rem;
+    font-weight: 700;
 }
 .heading-primary--white{
     color: var(--white);
@@ -131,7 +132,30 @@
     border: none;
     padding: .5rem 1.5rem;
 }
-
+.event-calendar{
+    font-family: Roboto;
+    font-style: normal;
+    line-height: 36px;
+    display: flex;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-align-items: flex-start;
+    -webkit-box-align: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+    width: 70%;
+    height: 60vh;
+    margin: 2.5rem auto;
+}
+.event-calendar p{
+    font-weight: normal;
+    font-size: 18px;
+}
+.event-calendar h2 {
+    font-weight: bold;
+    font-size: 27px;
+}
 .navegue {
     margin: 2rem 3rem;
     width: 70%;
@@ -481,8 +505,8 @@
         height: 40vh;
     }
     .pathImg{
-        top: -43px;
-        height: 44.8vh;
+        top: -14px;
+        height: 41.5vh;
     }
 
     .navegue {
@@ -497,13 +521,12 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-evenly;
-        height: 40vh;
-        height: 38vh;
+        height: 55vh;
     }
 
     .pathImg{
-        top: -77px;
-        height: 47.3vh;
+        top: -18px;
+        height: 57vh;
     }
 
       .navegue {

src/components/SimpleCard/SimpleCard.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card, DateEvent, Title, Place } from './simpleCard.style';
+
+
+function SimpleCard() {
+    const data = JSON.parse(this.props.cardData);
+    return(
+        <Card>
+            <img src={data.dataEvent1.img} alt={data.dataEvent1.description} />
+            <DateEvent>{data.dataEvent1.dateEvent}</DateEvent>
+            <Title>{data.dataEvent1.titleEvent}</Title>
+            <Place>{data.dataEvent1.placeEvent}</Place>
+        </Card>
+    );
+}
+
+export default SimpleCard;

src/components/SimpleCard/simpleCard.style.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const Card = styled.div`
+    background: var(--light-gray-card);
+    border-radius: 7px;
+    width: 230px;
+    height: 360px;
+`;
+
+export const DateEvent = styled.p`
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 30px;
+    color: rgba(59, 39, 55, 0.49);
+`;
+
+export const Title = styled.h3`
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 20px;
+    color: #3B2737;
+`;
+
+
+export const Place = styled.p`
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 13px;
+    color: rgba(59, 39, 55, 0.49);
+`;
+

src/components/Slider/Slider.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import { SliderWrapper } from './sliderCustom.style'
+import { SliderWrapper } from './sliderCustom.style';
 
 function Slider() {
+
     return(
         <SliderWrapper>
-            <p>Primeira rota lançada!
-            <h2>República do Nordeste</h2>
-            </p>
         </SliderWrapper>
     );
 }

src/components/Slider/sliderCustom.style.js

@@ -9,18 +9,4 @@ export const SliderWrapper = styled.div`
     margin: 2.5rem auto;
 `;
 
-export const Title = styled.div`
-    font-family: Roboto;
-    font-style: normal;
-    line-height: 36px;
-
-    p{
-        font-weight: normal;
-        font-size: 18px;
-    }
-    h2 {
-        font-weight: bold;
-        font-size: 27px;
-    }
-`;
 

src/global.css

@@ -21,6 +21,7 @@
     --off-white: #f9f9f9;
     --light-gray: #e0e0e0;
     --lighter-gray: #e5e5e5;
+    --light-gray-card: #F2F2F2;
     --gray: #888;
 }