logo optimize

src/components/Footer.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Facebook,Twitter, Instagram } from "@styled-icons/fa-brands";
+import { Facebook, Twitter, Instagram } from "@styled-icons/fa-brands";
 import { Envelope } from "@styled-icons/fa-solid";
+import { StyledIconBase } from '@styled-icons/styled-icon'
 
 import {
     Container
@@ -14,12 +15,25 @@ const ContainerPadded = styled(Container)`
 `;
 
 const WhiteSection = styled.footer`
-    background: ${ props => props.background || "white"};
+    background: ${props => props.background || "white"};
     
 `;
 const ContainerCentered = styled.div`
     text-align: center;
 `;
+const IconStyler = styled.div`
+  ${StyledIconBase} {
+    width: ${props => props.width ? props.width : 26}px;
+    height: ${props => props.height ? props.height : 26};
+    color: ${props => props.color ? props.color : "white"};
+
+    
+  }
+  margin: 20px 10px;
+
+
+`;
+
 const FacebookIcon = styled(Facebook)`
     margin: 20px 10px;
     width: 16px;
@@ -48,17 +62,21 @@ const Footer = (props) => {
         <WhiteSection>
             <ContainerPadded fluid>
                 <ContainerCentered>
-                <FacebookIcon />
+                    <IconStyler color="#66bfbf" width={16} height={16}<Facebook /></IconStyler>
-                <TwitterIcon />
+                    <IconStyler color="#66bfbf" width={16} height={16}<Twitter /></IconStyler>
-                <InstagramIcon />
+                    <IconStyler color="#66bfbf" width={16} height={16}<Instagram /></IconStyler>
-                <EnvelopeIcon />
+                    <IconStyler color="#66bfbf" width={16} height={16}<Envelope /></IconStyler >
+                    <FacebookIcon />
+                    <TwitterIcon />
+                    <InstagramIcon />
+                    <EnvelopeIcon />
 
-                <p>© Copyright 2020 Locaft</p>
+                    <p>© Copyright 2020 Locaft</p>
-                <p><a href="/tc">Terms and Conditions</a></p>
+                    <p><a href="/tc">Terms and Conditions</a></p>
-                <p><a href="/pp">Privacy Policy</a></p>
+                    <p><a href="/pp">Privacy Policy</a></p>
-           </ContainerCentered> 
+                </ContainerCentered >
-           </ContainerPadded>
+            </ContainerPadded >
-        </WhiteSection>
+        </WhiteSection >
     )
 
 }

src/components/HomePage.js

@@ -1,6 +1,5 @@
 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";
@@ -17,6 +16,7 @@ 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";
 import { StyledIconBase } from '@styled-icons/styled-icon'
+
 const IconStyler = styled.div`
   ${StyledIconBase} {
     width: ${props => props.width ? props.width : 26}px;
@@ -27,36 +27,6 @@ const IconStyler = styled.div`
   }
 
 
-`;
-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 ColoredSection = styled.section`  
@@ -187,7 +157,7 @@ export default function HomePage() {
             <Carousel.Caption>
             </Carousel.Caption>
               <h3>Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h3>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              <p>Mani, Hyderabad</p>
           </Carousel.Item>
 
         </Carousel>
@@ -209,19 +179,22 @@ export default function HomePage() {
 
           <Row>
             <FeatureCol lg="4">
-              <IconAddressCard />
+              <IconStyler color="#66bfbf" width={50} height={50}><AddressCard /></IconStyler>
+              <br />
               <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>
             </FeatureCol>
 
             <FeatureCol lg="4">
-              <IconBullseye />
+              <IconStyler color="#66bfbf" width={50} height={50}><Bullseye /></IconStyler>
+              <br />
               <FeatureTitle>Vision</FeatureTitle>
               <p>Bringing all the basic amenities to the new place before your arrival.</p>
             </FeatureCol>
 
             <FeatureCol lg="4">
-              <IconChartLine />
+              <IconStyler color="#66bfbf" width={50} height={50}><ChartLine /></IconStyler>
+              < br/>
               <FeatureTitle>Mission</FeatureTitle>
               <p>Getting adapted and familiar to the new place made easy.</p>
             </FeatureCol>

src/components/NavBar.js

@@ -1,10 +1,71 @@
-import React, {  useContext } from 'react';
+import React, {  useState,useContext, useRef, useCallback } from 'react';
 import { Link } from "react-router-dom";
 import '../navbar.css';
 import UserContext from "../context/UserContext";
+import styled,{ css } from 'styled-components';
 
+const Header = styled.header`
+  background: #66bfbf;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  transition: 0.6s;
+  padding: 10px 15px;
+  z-index: 100000;
+  font-family: Ubuntu;
+
+  ${ props => props.sticky && css`
+  padding: 3px 50px;
+  background: red;
+  opacity: 0.85;
+  `}
+
+  
+   & .logo {
+  font-family: "Ubuntu";
+  font-size: 2rem;
+  font-weight: bold;
+  position: relative;
+  color: #fff;
+  text-decoration: none;
+  text-transform: lowercase;
+  padding-left: 100px;
+  transition: 0.6s;
+
+   }
+`;
+const List = styled.ul`
+  ${Header};
+  & li {
+  position: relative;
+  list-style:none;
+
+  }
+  
+
+`;
+
+const RefCallback = () => {
+
+  const HeaderRef = useRef(null);
+  const setRef = useCallback(node => {
+    if(HeaderRef.current){
+
+    }
+    if( node ){
+      node.addEventListener()
+
+
+    }
+  })
+}
 export default function NavBar() {
   const { userData, setUserData } = useContext(UserContext);
+  const [ isSticky, setSticky ] = useState(false);
   const logout = () => {
     setUserData({
       token: undefined,
@@ -12,15 +73,19 @@ export default function NavBar() {
     });
     localStorage.setItem("auth-token", "");
   };
-  document.addEventListener('DOMContentLoaded', () => {
+  
+  
     window.addEventListener("scroll", () => {
-      var header = document.getElementById("navheader");
+      //header.classList.toggle("sticky", window.scrollY > 1);
-      header.classList.toggle("sticky", window.scrollY > 1);
+      if(window.scrollY > 1){
+        setSticky(isSticky => !isSticky);
+        console.log(isSticky);
+      }
     });
-  });
+  
   return (
     <div className="navbar">
-      <header id="navheader">
+      <Header sticky = {isSticky} >
         <input type="checkbox" id="check" />
         <label htmlFor="check" className="checkbtn">
           <i className="fas fa-bars" id="btn"></i>
@@ -68,7 +133,7 @@ export default function NavBar() {
             )}
         </ul>
 
-      </header>
+      </Header>
     </div>
 
   )

src/navbar.css

@@ -6,8 +6,7 @@
   text-decoration: none;
 }
 
-body {
+
-}
 
 header{
 background: #66bfbf;