icon revamp homepage

public/index.html

@@ -26,19 +26,14 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <!-- CSS Stylesheets -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-  <link rel="stylesheet" href="css/style.css">
 
   <!-- Font Awesome -->
-  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 
   <!-- Bootstrap Scripts -->
-  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      
     <title>Locaft</title>

src/components/Footer.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFacebook, faTwitter, faInstagram  } from "@fortawesome/free-brands-svg-icons";
-import  { faEnvelope }  from "@fortawesome/free-solid-svg-icons";
 import { Facebook,Twitter, Instagram } from "@styled-icons/fa-brands";
 import { Envelope } from "@styled-icons/fa-solid";
 
@@ -33,7 +30,6 @@ const InstagramIcon = styled(Instagram)`
     margin: 20px 10px;
     width: 16px;
     height: 16px;
-    color:#66bfbf;
 `;
 const EnvelopeIcon = styled(Envelope)`
     margin: 20px 10px;

src/components/HomePage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import '../homepage.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import NavBar from './NavBar';
+import Footer from './Footer';
 import { useHistory } from "react-router-dom";
 import {
   Container,
@@ -12,6 +13,48 @@ import {
 
 } from "react-bootstrap";
 import styled from 'styled-components';
+import { Apple, GooglePlay } from '@styled-icons/fa-brands';
+import {CheckCircle,Heart,AddressCard,ChartLine } from '@styled-icons/fa-solid';
+import { Bullseye } from "@styled-icons/fa-solid";
+const IconApple = styled(Apple)`
+
+  width: 30px;
+  height: 30px;
+`;
+const IconGooglePlay = styled(GooglePlay)`
+  width: 26px;
+  height: 26px;
+`
+const IconCheckCircle = styled(CheckCircle)`
+  width: 50px;
+  height: 50px;
+  color: #66bfbf;
+`;
+const IconBullseye = styled(Bullseye)`
+  width: 50px;
+  height: 50px;
+  color: #66bfbf;
+
+`;
+const IconHeart = styled(Heart)`
+  width: 50px;
+  height: 50px;
+  color: #66bfbf;
+
+`;
+const IconAddressCard = styled(AddressCard)`
+  width: 50px;
+  height: 50px;
+  color: #66bfbf;
+
+
+`;
+const IconChartLine = styled(ChartLine)`
+  width: 50px;
+  height: 50px;
+  color: #66bfbf;
+
+`;
 
 const ITag = styled.i`
   
@@ -29,7 +72,11 @@ const BigHeading = styled.h1`
   font-size: 3.5rem;
   line-height: 1.5;
 `;
+const FeatureTitle = styled.h3`
+  font-size: 1.5rem;
+  color:#8f8f8f;
           
+`;
 
 export default function HomePage() {
   const history = useHistory();
@@ -56,7 +103,7 @@ export default function HomePage() {
             </Col>
 
             <Col lg="6">
-              <img className="title-image" src="/locaft.png" alt="locaft-mockup" />
+              <img className="title-image" src="/locaft.jpg" alt="locaft-mockup" />
             </Col>
 
           </Row>
@@ -68,20 +115,20 @@ export default function HomePage() {
 
           <Row>
             <div className="feature-box col-lg-4">
-              <i className="icon fas fa-check-circle fa-4x"></i>
+              <IconCheckCircle />
-              <h3 className="feature-title">Easy to use.</h3>
+              <FeatureTitle>Easy to use.</FeatureTitle>
               <p>Get relocated.We'll take care of everything.</p>
             </div>
 
             <div className="feature-box col-lg-4">
-              <i className="icon fas fa-bullseye fa-4x"></i>
+              <IconBullseye />
-              <h3 className="feature-title">Efficient</h3>
+              <FeatureTitle>Efficient</FeatureTitle>
               <p>Get highest number of services for lowest cost possible.</p>
             </div>
 
             <div className="feature-box col-lg-4">
-              <i className="icon fas fa-heart fa-4x"></i>
+              <IconHeart />
-              <h3 className="feature-title">Relax</h3>
+              <FeatureTitle>Relax</FeatureTitle>
               <p>Sit back , we'll do the dirty work.</p>
             </div>
           </Row>
@@ -124,20 +171,20 @@ export default function HomePage() {
 
           <div className="row">
             <div className="feature-box col-lg-4">
-              <i className="icon fas fa-address-card fa-4x"></i>
+              <IconAddressCard />
-              <h2 className="feature-title">About Us</h2>
+              <FeatureTitle>About Us</FeatureTitle>
               <p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
             </div>
 
             <div className="feature-box col-lg-4">
-              <i className="icon fas fa-bullseye fa-4x"></i>
+              <IconBullseye />
-              <h2 className="feature-title">Vision</h2>
+              <FeatureTitle>Vision</FeatureTitle>
               <p>Bringing all the basic amenities to the new place before your arrival.</p>
             </div>
 
             <div className="feature-box col-lg-4">
-              <i className="icon fas fa-chart-line fa-4x"></i>
+              <IconChartLine />
-              <h2 className="feature-title">Mission</h2>
+              <FeatureTitle>Mission</FeatureTitle>
               <p>Getting adapted and familiar to the new place made easy.</p>
             </div>
           </div>
@@ -151,29 +198,14 @@ export default function HomePage() {
         <div className="container-fluid">
 
           <h3 className="big-heading">Recommend us to your friends !</h3>
-          <button className="download-button btn btn-lg btn-dark" type="button"><i className="fab fa-apple"></i> Download</button>
+          <button className="download-button btn btn-lg btn-dark" type="button"><IconApple /> Download</button>
-          <button className="download-button btn btn-lg brn-light" type="button"><i className="fab fa-google-play"></i> Download</button>
+          &nbsp;
+          <button className="download-button btn btn-lg btn-dark" type="button"><IconGooglePlay /> Download</button>
         </div>
 
-        <div className="container-fluid">
-          <h2>Any comments ?</h2>
-          <p>Your comments are what help us improve.</p>
-
-        </div>
       </section>
 
-
+      <Footer />
-      <footer className="white-section" id="footer">
-        <div className="container-fluid">
-          <i className="social-icon fab fa-facebook-f"></i>
-          <i className="social-icon fab fa-twitter"></i>
-          <i className="social-icon fab fa-instagram"></i>
-          <i className="social-icon fas fa-envelope"></i>
-          <p>© Copyright 2020 Locaft</p>
-          <p><a href="/tc">Terms and Conditions</a></p>
-          <p><a href="/pp">Privacy Policy</a></p>
-        </div>
-      </ footer>