Variaveis

package.json

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

src/App.js

@@ -1,8 +1,55 @@
 import React from 'react';
 import Hero from "./components/Hero/Hero";
+import Features from "./components/Features/Features";
+import Services from "./components/Services/Services";
+import FlexiblePlatform from "./components/FlexiblePlatform/FlexiblePlatform";
+import Order from "./components/Order/Order";
+
+
+var empresa = {
+nome:'EuroTech Motors, LLC',
+endereco: '555. Water Town Court, Holland, MI 49242'
+};
+var vendedor = { nome_vendedor:'Jake Montgomery'};
+
+var service1 = {
+    description: "Tensioner",
+    qty: 1,
+    price: 45.00,
+    amount: 45.00
+};
+
+var service2 = {
+    description: "Oil Filter",
+    qty: 1,
+    price: 103.00,
+    amount: 103.00
+};
+
+var service3 = {
+    description: "Bilstein 5100 Shocks",
+    qty: 4,
+    price: 200.00,
+    amount: 800.00
+};
+
+var service4 = {
+    description: "Labor (per hour)",
+    qty: 14,
+    price: 70.00,
+    amount: 980.00
+};
+var subtotal = (service1.amount + service2.amount + service3.amount + service4.amount);
+var tax = (115.68);
+
+var total = (subtotal + tax);
+
 
 export default () => (
   <div className="App">
     <Hero />
+    <Features />
+    <Order  empresa={empresa} vendedor={vendedor}/>
+    <Services />
   </div>
 );

src/components/Features/Features.css

@@ -0,0 +1,70 @@
+.section-feature{
+    display: flex;
+    flex-direction: column;
+    align-items:center;
+    padding-bottom: 40px;
+    margin-top: 5%;
+}
+.feature > * {
+    width: 80%;
+    margin-top: 10%;
+    text-align: center;
+}
+.feature {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.feature h2{
+    font-size: 1.6em;
+    color: #2B3342;
+    padding-bottom: 10px;
+}
+.feature p{
+    font-size: 1.2em;
+    color: #81838c;
+    line-height: 1.4em;
+}
+
+@media (min-width: 768px) {
+
+.description {
+        text-align: start;
+        width: 30% !important; 
+    }
+    .feature:nth-child(1) img{
+        height: 100%;
+        width: auto;
+    }
+    .feature:nth-child(1) .description{
+        order: 2;
+    }
+    .feature:nth-child(2) > img {
+        width: auto;
+        /*max-width: 40%;*/
+        height: 100%;
+        order: 2;
+    }
+    .feature {
+        flex-direction: column;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-around;
+        height: 500px;
+    }
+
+    .feature > * {
+        width: auto;
+        margin-top: 0;
+    }
+
+    .feature:nth-child(2) {
+        justify-content: space-around;
+        margin-top: 5%;
+        flex-direction: column;
+    }
+}
+
+
+

src/components/Features/Features.js

@@ -0,0 +1,33 @@
+import React from "react";
+import Feature1 from "./feature1.png";
+import Feature2 from "./feature2.png";
+import "./Features.css"
+
+export default (props) => (
+
+    <section className="section-feature">
+        <article className="feature">
+            <div className="description">
+                <h2>Track projects easily</h2>
+                <p>Providers can give updates, share status, request updates, and require payments in one, efficient tool.
+                        Simples, easy, progress.</p>
+            </div>
+        </article>
+
+        <img src={Feature1} alt="chat feature" />
+        <div className="description">
+            <h2>Clear communication</h2>
+            <p>Progress allows direct communication bewtween the consumer and service provider. No more waiting for
+                        call backs, missing emails, or lost paperwork.</p>
+        </div>
+        <article className="feature">
+            <img src={Feature2} alt="chat feature" />
+            <div className="description">
+                <h2>Estimate, approve, pay</h2>
+                <p>The major steps of a service job are made simple with Progress. In one location, information and updates
+                        on project estimates and scopes of work are shared between provider and consumer.</p>
+            </div>
+        </article>
+    </section>
+
+);

src/components/FlexiblePlatform/FlexiblePlatform.css

@@ -0,0 +1,183 @@
+*{
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-sizing: border-box;
+}
+
+
+.flexible-platform{
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #f0f1f0;
+    display: flex;
+    flex-direction: column;
+}
+
+.flexible-platform__title{
+    width: 50%;
+    margin: 0 auto;
+    padding: 10px;
+    font-weight: 400;
+    color: #5b5b5b;
+    justify-content: center;
+}
+
+.flexible-platform__text{
+    width: 70%;
+    margin: 0 auto;
+    color: #9a9fa2;
+    text-align: center;
+    justify-content: center;
+}
+
+.form{
+    width: 79%;
+    padding: 1rem;
+    margin: 0 auto;
+    display: flex;
+}
+
+.form__input{
+    width: 150px;
+    padding: 5px;
+    border: none;
+    border-radius: 5px 0 0 5px;
+}
+
+.form__button{
+    width: 70px;
+    padding:5px;
+    background-color: #5dd682;
+    color: white;    
+    font-weight: 600;
+    border: none;
+    border-radius: 0 5px 5px 0px;
+}
+
+.twitter{
+    font-weight: 500;
+    background-color:#5dd682;
+    color: white;
+    justify-content: center;
+}
+
+.twitter__text{
+    width: 72%;
+    margin: 0 14%;
+    padding: 15px;
+    text-align: center;
+    justify-content: center     
+}
+
+.twitter__link{
+    color:white;    
+    text-decoration: none;
+    font-weight: bold;
+}
+
+
+@media screen and (min-width: 768px){
+    .flexible-platform__title{
+        width: 21%;
+        margin: 0 auto;
+        padding: 10px;
+        font-weight: 400;
+        color: #5b5b5b;
+        justify-content: center;
+    }
+
+    .flexible-platform__text{
+        width: 57%;
+        margin: 0 auto;
+        color: #9a9fa2;
+        text-align: center;
+       justify-content: center;
+    }
+
+    .form{
+        width: 34.5%;
+        padding: 0.7rem;
+        margin: 2% auto;
+        display: flex;
+
+    }
+
+    .form__input{
+        width: 160px;
+        padding: 10px;
+        border: none;
+        border-radius: 5px 0 0 5px;
+    }
+
+    .form__button{
+        width: 80px;
+        padding: 10px;
+        background-color: #5dd682;
+        color: white;    
+        font-weight: 600;
+        border: none;
+        border-radius: 0 5px 5px 0px;
+    }
+
+    .twitter{
+        padding: 30px;
+        font-weight: 500;
+        background-color:#5dd682;
+        color: white;
+        justify-content: center;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .flexible-platform__title{
+        width: 10%;
+        margin: 0 auto;
+        padding: 10px;
+        font-weight: 400;
+        color: #5b5b5b;
+        justify-content: center;
+    }
+
+    .flexible-platform__text{
+        width: 35.5%;
+        margin: 0 auto;
+        color: #9a9fa2;
+        text-align: center;
+       justify-content: center;
+    }
+
+    .form{
+        width: 17%;
+        padding: 1rem;
+        margin: 0 auto 3% auto;
+        display: flex;
+    }
+}
+
+@media screen and (min-width:2560px){
+    .flexible-platform__title{
+        width: 6.5%;
+        margin: 0 auto;
+        padding: 10px;
+        font-weight: 400;
+        color: #5b5b5b;
+        justify-content: center;
+    }
+
+    .flexible-platform__text{
+        width: 23.5%;
+        margin: 0 auto;
+        color: #9a9fa2;
+        text-align: center;
+        justify-content: center;
+    }
+
+    .form{
+        width: 10.5%;
+        padding: 0.7rem;
+        margin: 1.5% auto;
+        display: flex; 
+        flex-direction: row;
+    }
+
+}

src/components/FlexiblePlatform/FlexiblePlatform.js

@@ -0,0 +1,22 @@
+import React from "react";
+import "./FlexiblePlatform.css";
+
+export default (props) => (
+<section className="flexible-platform">
+        <h3 className="flexible-platform__title">Flexible Platform</h3>
+        <p className="flexible-platform__text">
+            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 costumes.
+        </p>
+        <form action="" className="form">
+            <input type="email" name="email" id="email" className="form__input" placeholder="Add your email address"/>
+            <button type="submit" className="form__button">invite me</button>
+        </form>
+
+        <div class="twitter">
+            <p class="twitter__text">
+                Follow along on Twitter for all the latest news! <a className="twitter__link" href="">@Progress_App</a>
+            </p>
+        </div>
+</section>
+);