pricing plan styled revamp

auth/config/connectToDb.js

@@ -1,5 +1,6 @@
 const mongoose = require("mongoose");
 const config = require('config');
+
 const connectToDb = async () => {
     try{
         await mongoose.connect(

auth/routes/users.js

@@ -10,7 +10,7 @@ router.post("/register", async (req, res) => {
   try {
     let { username,email,phonenumber,password} = req.body;
 
-    // validate
+    
 
     if (!email || !password )
       return res.status(400).json({ msg: "Not all fields have been entered." });

src/components/Error404.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom'
 import styled from 'styled-components';
 import Lottie from 'react-lottie';
 import animationData from '../lottie/box_error';

src/components/HomePage.js

@@ -111,7 +111,7 @@ export default function HomePage() {
                 history.push("/user/login")
               }} className="btn btn-info login mr-1">Log In</button>
 
-              <button type="button" onClick={() => history.push("/user/register")} >Sign Up</button>
+              <button type="button"  className="btn btn-info login mr-1" onClick={() => history.push("/user/register")} >Sign Up</button>
 
             </FeatureCol>
 
@@ -154,19 +154,21 @@ export default function HomePage() {
         </ContainerPadded>
       </WhiteSection>
       <ColoredSection>
+      <br/>
+      <br/>
 
         <Carousel>
           <Carousel.Item>
             <Carousel.Caption>
             </Carousel.Caption>
               <TestimonalTitle>I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</TestimonalTitle>
-              <p>Nishant, Pune</p>
+              <p style={{'text-align':'center'}}>Nishant, Pune</p>
           </Carousel.Item>
           <Carousel.Item >
             <Carousel.Caption>
             </Carousel.Caption>
-              <h3>Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h3>
+              <TestimonalTitle>Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</TestimonalTitle>
-              <p>Mani, Hyderabad</p>
+              <p style={{'text-align': 'center'}}>Mani, Hyderabad</p>
           </Carousel.Item>
 
         </Carousel>

src/components/NavBar.js

@@ -84,9 +84,7 @@ export default function NavBar() {
     <div className="navbar">
       <Header sticky = {scrolled} >
         <input type="checkbox" id="check" />
-        <label htmlFor="check" className="checkbtn">
+       
-          <i className="fas fa-bars" id="btn"></i>
-        </label>
         <a href="/" className="logo">locaft</a>
         <ul>
           <li><a href="/">Home</a></li>
@@ -97,8 +95,6 @@ export default function NavBar() {
             <React.Fragment>
             <li><Link onClick={logout}>{userData.user.username}</Link></li>
             </React.Fragment>
-
-           
             
           ) : (
               <React.Fragment>

src/components/PricingPlan.js

@@ -2,6 +2,80 @@ import React, { Component } from 'react';
 import '../pricing-plan.css';
 import NavBar from './NavBar';
 import Footer from './Footer';
+import styles from 'styled-components';
+
+const WhiteContainer = styled.div`
+    background: white;
+
+`;
+const PricingPlanContainer = styled.div`
+
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+`;
+
+const PricingPlan = styled.section`
+
+    background: white;
+    width:300px;
+    border-radius: 25px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    overflow: hidden;
+    font-family: sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #555555;
+    margin: 15px;
+
+    &:hover &:active {
+        box-shadow: 0 0 15px rgba(0,0,0,0.4);
+        transform: scale(1.05);
+
+
+    }
+`;
+const Text = styled.p`
+    font-size: 0.9em;
+    text-align: center;
+    margin: 0 0 10px 0;
+`;
+const Currency = styled.p`
+
+    margin: 0;
+    text-align: center;
+    font-size: 2em;
+    color:#000000;
+
+
+`;
+const Title = styled.h1`
+    font-size:1.5em;
+    font-weight: 400;
+`;
+
+
+const Header = styled.div`
+
+    padding:25px;
+    background: #009578;
+    color: #ffffff;
+
+`;
+
+const PricingPlan_SpecialText = styled.div`
+
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    color: #ffffff;
+    background: #007c64;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
+
+`;
+const 
+
 class PricingPlan extends Component {
 
     render(){
@@ -11,6 +85,7 @@ class PricingPlan extends Component {
                 <br />
                 <br />
                 <br />
+                    <h1 style={{'color':'#66bfbf','margin-left':'20px'}}>Pricing Plan</h1>
                 <div class='pricing-plan-container'>
 
                 <section class='pricing-plan '>
@@ -66,8 +141,8 @@ class PricingPlan extends Component {
                         <ul class='pricing-plan__list'>
                             <li class='pricing-plan__feature'>Feature #1</li>
                             <li class='pricing-plan__feature'>Feature #2</li>
-                            <li class='pricing-plan__feature'>Feature #3</li>
+                            <li class='pricing-plan__feature'>Serv</li>
-                            <li class='pricing-plan__feature'>Feature #4</li>
+                            <li class='pricing-plan__feature'>Feng shu consultancy free</li>
                         </ul>
                     </div>
                     < div class='pricing-plan__actions'>

src/components/Stepper.js

@@ -1,6 +1,7 @@
 import React  from 'react';
 import Footer from './Footer';
 import  '../stepper.css';
+import NavBar from './NavBar';
 
 export default function Stepper() {
 
@@ -11,7 +12,7 @@ export default function Stepper() {
     children = list.children,
     completed = 0;
 
-// simulate activating a node
+//  activating a node button
 next.addEventListener('click', function() {
     
     // count the number of completed nodes.
@@ -46,6 +47,7 @@ clear.addEventListener('click', function() {
 
   return (
     <div className="container">
+      < NavBar />
       <h1 className ="relocheading">Relocation Status</h1>
       <br />
       <br />

src/pricing-plan.css

@@ -4,40 +4,19 @@
     background: white;
 }
 .pricing-plan {
-    background: white;
-    width:300px;
-    border-radius: 25px;
-    box-shadow: 0 0 5px rgba(0,0,0,0.2);
-    overflow: hidden;
-    font-family: sans-serif;
-    font-size: 16px;
-    line-height: 1.5;
-    color: #555555;
-    margin: 15px;
 
 }
 
-.pricing-plan:hover{
+.pricing-plan:hover .pricing-plan:active {
 
-    box-shadow: 0 0 15px rgba(0,0,0,0.4);
-    transform: scale(1.05);
 }
     
 .pricing-plan__header{
 
-    padding:25px;
-    background: #009578;
-    color: #ffffff;
 
 }
 .pricing-plan__special-text {
 
-    padding: 10px;
-    text-align: center;
-    font-weight: bold;
-    color: #ffffff;
-    background: #007c64;
-    box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
 }
 
 .pricing-plan__title,.pricing-plan__summary{
@@ -125,23 +104,12 @@
 }
 .pricing-plan__cost{
 
-    margin: 0;
-    text-align: center;
-    font-size: 2em;
-    color:#000000;
 }
 .pricing-plan__text {
 
-    font-size: 0.9em;
-    text-align: center;
-    margin: 0 0 10px 0;
 
 }
 
 .pricing-plan-container{
 
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
 }