21 pedidoheader

src/App.js

@@ -1,16 +1,44 @@
 import React from 'react';
 import Hero from "./components/Hero/Hero";
 import Footer from "./components/Footer/Footer"
-
+import FollowAlong from "./components/Follow-along/Follow-along";
+import Footer from "./components/Footer/Footer";
+import ByobIcons from "./components/byob-icons/ByobIcons";
 
 var textos = [
   "Texto 1",
   "Texto 2"
 ];
 
+var empresa = {
+  nome: "Eurotech Mottors, LCC",
+  endereco: "555 Water Tower Court",
+  cidade: "Holland, MI 49242"
+}
+
+var vendedor = {
+  nome: "Jake Montgomery"
+}
+
+var veiculo = {
+  nome: "2010 Mini Cooper",
+  modelo: "S",
+  milhas: 31.209,
+  VIN: "000193HHAAO1I345"
+}
+
+var pedido = {
+  numero: 188801934,
+  codigo: 3110556
+} 
+
 export default () => (
   <div className="App">
     <Hero title="progress" textos={textos} />
     <Footer texto="Copyright" />
+    <Hero />  
+    <ByobIcons />
+    <FollowAlong description="Follow along on Twitter for all the lastest news!" />
+    <Footer text="2014 Shooting Brake Design" />
   </div>
 );

src/components/Button/button.css

@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css?family=Rubik');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body, App, #root {
+    width: 100%;
+    height: 100%;
+}
+
+.buttons {
+    display: flex;
+    justify-content:center;
+}
+
+
+/*__Botão sólido verde__*/
+.primary-button {
+    margin: 0.5em;    
+    padding: 0.8em 2em;
+    border-radius: 40px; 
+    border-style: solid;
+    font-family: 'Rubik', sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: none;
+    border-color: #61d988;
+    background-color: #61d988;
+    color: #fff;
+}
+
+/*__Botão sólido cinza__*/
+
+.secundary-button {
+    margin: 0.5em;    
+    padding: 0.8em 2em;
+    border-radius: 40px; 
+    border-style: solid;
+    font-family: 'Rubik', sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: none;
+    border-color: #d0d1d5;
+    background-color: #d0d1d5;
+    color: #fff;
+}
+

src/components/Button/button.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./button.css"
+
+export default (props) => (
+    <section className="buttons"> 
+        <a href="" className="primary-button">{props.primary}</a>
+        <a href="" className="secundary-button">{props.secundary}</a>
+    </section>
+);

src/components/Description/Description.css

@@ -0,0 +1,14 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.description {
+    padding: 15px;
+    flex: 1;
+    text-align: center;
+}
+
+.description__title, .description__paragraph {
+    padding: 10px;
+}

src/components/Description/Description.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Description.css"
+
+export default (props) => (
+    <article className="description">
+        <h2 className="description__title">{props.title}</h2>
+        <p className="description__paragraph">{props.paragraph}</p>
+    </article>
+);

src/components/Follow-along/Follow-along.css

@@ -0,0 +1,34 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+.follow-along {
+    background-color: #61D988;
+    color: #ffffff;
+    text-align: center;
+    padding: 6%;
+}
+
+.follow-along__description {
+    padding: 0 25%;
+    line-height: 140%; 
+}
+
+.follow-along__link {
+    font-weight: bold;
+    text-decoration: none;
+    font-family: 'Archivo Black', sans-serif; 
+    color: #ffffff;
+}
+
+@media screen and (min-width: 768px) {
+    .follow-along {
+        padding: 5%;
+    }
+
+    .follow-along__description {
+        padding: 0 5%;
+    }
+}

src/components/Follow-along/Follow-along.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Link from '../Link/Link';
+import './Follow-along.css';
+
+export default (props) => (
+    <section class="follow-along">
+        <p class="follow-along__description">{props.description}<a class="follow-along__link" href=""><Link link=" @Progress_App"></Link></a></p>
+    </section>
+  );

src/components/Footer/Footer.css

@@ -1,3 +1,29 @@
 .rodape {
     background: blue;
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+.footer {
+    width: 100%;
+    background-color: #2D333F;
+    color: #ccc;
+    text-align: center;
+    padding: 5% 0;
+}
+
+@media screen and (min-width: 768px) {
+    .footer {
+        text-align: left;
+        padding: 3% 5%;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .footer {
+        padding: 2% 5%;
+    }
 }

src/components/Footer/Footer.js

@@ -1,8 +1,9 @@
-import React from "react";
-import "./Footer.css";
+import React from 'react';
+import './Footer.css';
 
 export default (props) => (
-    <footer className="rodape">
-        {props.texto}
+    <footer class="footer">
+        <p><i class="fa fa-copyright" aria-hidden="true"></i>{props.text}</p>
     </footer>
-);
+  );
+

src/components/Hero/Hero.css

@@ -1,34 +1,106 @@
+html body {
+    margin: 0;
+    width: 100%;
+    font-family: 'Quicksand', sans-serif;
+
+}
+
 .hero {
-    color: #ffffff;
-    text-align: center;
-    padding: 1.5rem 1rem 0;
-    background-color: #55d87e;
+    padding: 1rem 3rem 0 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-size: 100%; 
+    background-color: #61d988;
+    color: #fff;
+}
+
+.hero__text {
+    font-size: 1.2rem;
+    text-align: center
 }
 
-.hero__icon {
-    display: block;
-    max-height: 200px;
-    margin: 0 auto;
+.hero__logo {
+    max-width: 13rem;
+    max-height: 8rem;
+    width: auto;
+    height: auto;     
 }
 
-@media(min-width: 768px) {
+.hero__phone {
+    padding-top: 1rem;
+    max-width: 15rem;
+    max-height: 20rem;
+    width: auto;
+    height: auto;
+}
+
+@media (min-width: 768px) {
+
     .hero {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        font-size: 1.5rem;
-        text-align: left;
+        padding: 1.3rem 1rem 0 1.5rem;
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .hero__title {
+        margin: 1rem 2rem 0.5rem 0;
+    }
+
+    .hero__logo {
+        max-width: 20rem;
+        max-height: 15rem;
     }
-
-    .hero__icon {
-        max-height: 300px;
+
+    .hero__text {
         margin: 0;
-        align-self: flex-end;
+        padding: 0 8rem 1.5rem 1rem;
+        font-size: 2rem;
+        text-align: left;
+    }
+
+    .hero__phone {
+        padding-top: 2rem;
+        max-width: 20rem;
+        max-height: 25rem;
     }
 }
 
-@media(min-width: 992px) {
-    .hero__icon {
-        max-height: 400px;
+@media (min-width: 992px) {
+
+    .hero__title {
+        margin: 5rem 1rem 0.5rem 0;
+    }
+
+    .hero__text {
+        padding: 0 6rem 1.5rem 1rem;
+    }
+
+    .hero__phone {
+        padding: 0;
+        max-width: 25rem;
+        max-height: 30rem;
+    }
+
+}
+
+@media (min-width: 1200px) {
+
+    .hero { 
+        justify-content: space-around;
+    }
+
+    .hero__title {
+        margin: 5rem 1rem 0.5rem 2rem;
+        max-width: 50%;
+    }
+
+    .hero__logo {
+        max-width: 23rem;
+        max-height: 20rem;
+    }
+
+    .hero__phone {
+        padding-right: 2rem;
     }
 }

src/components/Hero/Hero.js

@@ -3,26 +3,17 @@ import HeroIcon320 from "./hero-icon-320px.png";
 import HeroIcon768 from "./hero-icon-768px.png";
 import HeroIcon992 from "./hero-icon-992px.png";
 import HeroIcon1200 from "./hero-icon-1200px.png";
+import HeroLogo from "./logo-progress.png";
+import HeroIcon from "./icon-hero-desktop2.png";
+import "./Hero.css"
 
-import "./Hero.css";
-
-
-export default (props) => {
-    var textos = [];
-    for (var i = 0; i < props.textos.length; i++) {
-        textos.push(<p>{props.textos[i]}</p>);
-    }
-
-    return (
-        <header className="hero">
-            <div>
-                <h1 className="hero__title">{props.title}</h1>
-                {textos}
-            </div>
-            <img className="hero__icon" 
-                 srcset={`${HeroIcon320} 562w, ${HeroIcon768} 634w, ${HeroIcon992} 808w, ${HeroIcon1200} 886w`} 
-                 sizes="(min-width: 320px) 33.3vw, 100vw"
-                 alt="Celular com a tela inicial do aplicativo progress"/>
-        </header>
-    );
-};
+export default (props) => (
+    <header className="hero">
+        <div className="hero__title">
+            <img src={HeroLogo} alt="icone" class="hero__logo"/>
+            <p className="hero__text">{props.text}</p>
+        </div>
+        <img className="hero__phone" srcset={`${HeroIcon320} 562w, ${HeroIcon768} 634, ${HeroIcon992} 808, ${HeroIcon1200} 886`} sizes="50vw" 
+src={HeroIcon320} alt="Celular com a tela inicial do aplicativo progress"/>
+    </header>
+);