8 features

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -1,8 +1,14 @@
 import React from 'react';
 import Hero from "./components/Hero/Hero";
+import Features from "./components/Features/Features"
+import Bring from "./components/Bring/Bring";
+import Footer from "./components/Footer/Footer";
 
 export default () => (
   <div className="App">
     <Hero />
+    <Features />
+    <Bring />
+    <Footer />
   </div>
 );

src/components/Bring/Bring.css

@@ -0,0 +1,179 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+.bring {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #F4F4F6;
+    padding: 10% 0;
+}
+
+.bring-title, .bring-text {
+    text-align: center;
+}
+
+.bring-title, .services, .bring-text {
+    width: 70%;
+    margin: 5% 0;
+}
+
+.bring-title {
+    font-size: 2rem;
+}
+
+.services {
+    display: flex;
+    margin: 0 auto;
+}
+
+.services-icon {
+    width: 20%;
+    margin: 0 2%;
+}
+
+.services-icon__demo {
+    width: 100%;
+}
+
+.services-phone {
+    width: 50%;
+    margin: 0 2%;
+}
+
+.services-phone__demo{
+    width: 100%;
+}
+
+.bring-text {
+    padding: 0 8%;
+    color: grey;
+}
+
+.bring-subtitle {
+    font-size: 1.3rem;
+    margin-bottom: 3%;
+}
+
+.bring-parag {
+    font-size: 0.8rem;
+    line-height: 1.3rem;
+}
+
+/* FORM */
+
+.invite {
+    display: flex;
+    justify-content: center;
+    width: 60%;
+    height: 30px;
+}
+.invite__input {
+    padding: 2% 4%;
+    border-radius: 8px 0 0 8px;
+    border-style: none;
+    font-size: 0.7rem;
+}
+.invite__button {
+    min-width: 30%;
+    padding: 2% 4%;
+    border-radius: 0 8px 8px 0;
+    border-style: none;
+    color: white;
+    background: #51D67B;
+    font-size: 0.7rem;
+}
+
+@media screen and (min-width: 768px) {
+
+    .bring-title {
+        font-size: 3rem;
+    }
+    .bring-subtitle {
+        font-size: 1.7rem;
+    }
+    .bring-parag {
+        font-size: 1rem; 
+    }
+    .invite {
+        height: 40px;
+    }
+
+    .invite__input, .invite__button {
+        font-size: 0.8rem;
+    }
+
+    .invite__input {
+        width: 60%;
+    }
+
+    .invite__button {
+        width: 40%;
+    }
+}
+
+@media screen and (min-width: 992px) {
+
+    .services {
+        width: 95%;
+        align-items: center;
+    }
+
+    .services-icon {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 40%;
+        justify-content: center;
+    }
+
+    .services-icon__demo {
+        width: 32%;
+        height: 100%;
+        margin: 3% 6%;
+    }
+
+    .services-icon__demo--1 {
+        order: 1; 
+    }
+
+    .services-icon__demo--2 {
+        order: 2; 
+    }
+
+    .services-icon__demo--3 {
+        order: 3; 
+    }
+
+    .services-icon__demo--4 {
+        order: 4; 
+    }
+
+    .services-phone {
+        width: 35%;
+        margin: 0;
+    }
+
+    .invite {
+        width: 40%;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+
+    .services-icon__demo {
+        width: 30%;
+        margin: 4% 8%;
+    }
+
+}

src/components/Bring/Bring.js

@@ -0,0 +1,56 @@
+import React from "react";
+import imgService1 from "./icon1.png";
+import imgService2 from "./icon2.png";
+import imgService3 from "./icon3.png";
+import imgService4 from "./icon4.png";
+import imgService5 from "./icon5.png";
+import imgService6 from "./icon6.png";
+import imgService7 from "./icon7.png";
+import imgService8 from "./icon8.png";
+import imgPhone from "./phone.png";
+import "./Bring.css"
+
+var bring = {
+    title: "Bring Your Own Business",
+    subtitle:"Flexible Platform",
+    description: "We are an industry agnostic platform. If you can track it, you can Progress it! Progress makes it easy for service providers to connect directly with their customers."
+};
+
+export default (props) => (
+    <section className="bring">
+        <h1 className="bring-title">
+            {bring.title}
+        </h1>
+        <div className="services">
+            <div className="services-icon services-icon--left">
+                <img className="services-icon__demo services-icon__demo--1" src={imgService1} alt="icon detail"/>
+                <img className="services-icon__demo services-icon__demo--2" src={imgService2} alt="icon flower"/>
+                <img className="services-icon__demo services-icon__demo--4" src={imgService3} alt="icon grave"/>
+                <img className="services-icon__demo services-icon__demo--3" src={imgService4} alt="icon pc"/>
+            </div>
+            <div className="services-phone">
+                <img className="services-phone__demo" src={imgPhone} alt="phone"/>
+            </div>
+            <div className="services-icon services-icon--right">
+                <img className="services-icon__demo services-icon__demo--2" src={imgService5} alt="icon bug"/>
+                <img className="services-icon__demo services-icon__demo--1" src={imgService6} alt="icon tool"/>
+                <img className="services-icon__demo services-icon__demo--3" src={imgService7} alt="icon mech"/>
+                <img className="services-icon__demo services-icon__demo--4" src={imgService8} alt="icon garden"/>
+            </div>
+        </div>
+
+        <div className="bring-text">
+            <h2 className="bring-subtitle">
+                {bring.subtitle}
+            </h2>
+            <p className="bring-parag">
+                {bring.description}
+            </p>
+        </div>
+
+        <form className="invite">
+            <input className="invite__input" type="email" placeholder="Add your email address"/>
+            <button className="invite__button">Invite me</button>
+        </form>
+    </section>
+);

src/components/Features/Features.css

@@ -0,0 +1,79 @@
+.feature {
+    width: 90%;
+    padding: 2rem 0 2rem 0;
+    margin: 0 auto;
+}
+
+.feature-info {
+    padding: 0 2.5rem 0 2.5rem;
+}
+
+.feature-info__title {
+    font-weight: 700;
+    color: #2b3541;
+    text-align: center;
+    line-height: 2;
+    font-size: 1.25rem;
+}
+
+.feature-info__text {
+    color: #a8b1b8;
+    text-align: center;
+    line-height: 1.5;
+}
+
+.feature__demo {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 1.75rem;
+    padding-bottom: 1.75rem;
+    width: 75%;
+    max-width: 300px;
+}
+
+@media screen and (min-width: 768px) {
+    .feature {
+        margin: auto;
+        overflow: hidden;
+    }
+    .feature-info {
+        width: 50%;
+        padding: 0;
+        align-self: center;
+    }
+    .feature-info__title {
+        text-align: left;
+        max-width: 360px;
+    }
+    .feature-info__text {
+        text-align: left;
+        max-width: 300px;
+    }
+    .feature__demo {
+        margin: 0 0 0 auto;
+    }
+    .feature__demo--float {
+        float: right;
+        padding-top: 3.5rem;
+    }
+    .feature__demo--floatLeft {
+        float: left;
+    }
+    .flex__reverse {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+    }
+}
+@media screen and (min-width: 992px) {
+    .max-size-global {
+        max-width: 1150px;
+        margin: auto;
+    }
+    .feature__demo {
+        max-width: 400px;
+    }
+}
+@media screen and (min-width: 1200px) {
+}

src/components/Features/Features.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "./Features.css";
+import ComunicationImg from "./codeMobile.PNG";
+import EstimateImg from "./tableMobile.PNG";
+
+var features = {
+    title1: "Tracks projects easily",
+    description1: "Providers can give updates, share status, request updates, and require payments in one efficient tool. Simple, easy, progress.",
+    title2: "Clear communication",
+    description2: "Progress allow direct communication between the consumer and service provider. No more waiting for call backs, missing emails, or lost paperwork.",
+    altComunication: "imagem de duas conversas de monitoramento de serviços"
+}
+
+var features2 = {
+    title: "Estimate, approve, pay",
+    description: "The major steps of a service job are made simple with Progress. in one location, information and updateson project estimates and scopes of work are shared between provider and consumer.",
+    altEstimate: "tabela com custos dos serviços"
+}
+
+export default (props) => (
+    <section className="max-size-global">
+        <article className="feature">
+            <div className="feature-info feature__demo--float">
+                <h2 className="feature-info__title">{features.title1}</h2>
+                <p className="feature-info__text">{features.description1}</p>
+            </div>
+            <img alt={features.altComunication} className="feature__demo feature__demo--floatLeft" src={ComunicationImg} />
+            <div className="feature-info feature__demo--float">
+                <h2 className="feature-info__title">{features.title2}</h2>
+                <p className="feature-info__text">{features.description2}</p>
+            </div>
+        </article>
+        <article className="feature flex__reverse">
+            <img alt={features2.altEstimate} className="feature__demo" src={EstimateImg} />
+            <div className="feature-info">
+                <h2 className="feature-info__title">{features2.title}</h2>
+                <p className="feature-info__text">{features2.description}</p>
+            </div>
+        </article>
+    </section> 
+);