From f68f2701dc406ff209d12911ed01140b88c90ede Mon Sep 17 00:00:00 2001
From: Aneeqa inbox <aneeqaa.chowdhury@gmail.com>
Date: Wed, 30 Jun 2021 00:32:22 +0800
Subject: [PATCH] - new register page design

---
 .../sections/LoginSectionComponent.vue        | 259 ++++++++++++++----
 .../accounts/authentication/login.blade.php   |   4 +-
 2 files changed, 208 insertions(+), 55 deletions(-)

diff --git a/resources/assets/vue/components/authentication/sections/LoginSectionComponent.vue b/resources/assets/vue/components/authentication/sections/LoginSectionComponent.vue
index ebe212ce..ab226fa1 100644
--- a/resources/assets/vue/components/authentication/sections/LoginSectionComponent.vue
+++ b/resources/assets/vue/components/authentication/sections/LoginSectionComponent.vue
@@ -2,67 +2,215 @@
     <div class="row">
         <div class="col p-r-0">
             <transition-component key="2" group enter-class="animated fadeInRightBig faster" leave-class="animated fadeOutUpBig" v-show="!$store.getters.isLoading('loginSection')">
-                <div class="row" key="1" v-show="!$store.getters.isShowing('loginForm') && !$store.getters.isShowing('registrationForm')">
-                    <div class="col p-r-0">
-                        <div class="row m-l-0">
-                            <div class="col p-l-50">
-                                <h5 class="font-lato light animated fadeInRightBig slow" style=" line-height: 50px; letter-spacing: 5px; ">Hi There!</h5>
-                            </div>
-                        </div>
-                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">
-                            <div class="col p-l-50">
-                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Enter your email address to <b>register</b>/<b>login</b>.</p>
-                            </div>
-                        </div>
-                        <div class="row no-margin">
-                            <div class="col">
-                                <div class="row m-b-20 animated fadeInUpBig fast" v-if="error">
-                                    <div class="col p-l-50">
-                                        <small class="bold fs-10 text-danger">{{error}}</small>
+<!--                <div class="row" key="1" v-show="!$store.getters.isShowing('loginForm') && !$store.getters.isShowing('registrationForm')">-->
+<!--                    <div class="col p-r-0">-->
+<!--                        <div class="row m-l-0">-->
+<!--                            <div class="col p-l-50">-->
+<!--                                <h5 class="font-lato light animated fadeInRightBig slow" style=" line-height: 50px; letter-spacing: 5px; ">Hi There!</h5>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">-->
+<!--                            <div class="col p-l-50">-->
+<!--                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Enter your email address to <b>register</b>/<b>login</b>.</p>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div class="row no-margin">-->
+<!--                            <div class="col">-->
+<!--                                <div class="row m-b-20 animated fadeInUpBig fast" v-if="error">-->
+<!--                                    <div class="col p-l-50">-->
+<!--                                        <small class="bold fs-10 text-danger">{{error}}</small>-->
+<!--                                    </div>-->
+<!--                                </div>-->
+<!--                                <div class="row animated fadeInDownBig">-->
+<!--                                    <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.email.$error}]" :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">-->
+<!--                                        <div class="row align-items-center">-->
+<!--                                            <div class="col pl-md-0 pr-md-0  bg-white">-->
+<!--                                                <div class="input-group transparent b-grey b-t b-b">-->
+<!--                                                    <span class="input-group-addon no-border">-->
+<!--                                                        <i class="fa fa-user-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>-->
+<!--                                                    </span>-->
+<!--                                                    <input placeholder="My Email Address" v-model.trim="parameters.email" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">-->
+<!--                                                    <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>-->
+<!--                                                </div>-->
+<!--                                            </div>-->
+<!--                                        </div>-->
+<!--                                    </div>-->
+<!--                                </div>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div class="row m-t-30 align-items-center">-->
+<!--                            <div class="col-auto animated fadeInLeftBig slow">-->
+<!--                                <div class="b-t b-b b-r b-primary bg-transparent all-caps text-primary p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer" style="letter-spacing: 8px;" @click="submit(route('api.account.authentication.authenticate.email.check'), 'post', section, false, false)">Next <i class="fa fa-chevron-right fs-13"></i></div>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                    <div class="row" key="2" v-show="$store.getters.isShowing('loginForm')" >-->
+<!--                    <div class="col all-caps">-->
+<!--                        <div class="row  m-l-0">-->
+<!--                            <div class="col p-l-50">-->
+<!--                                <h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Welcome Back!</h5>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">-->
+<!--                            <div class="col p-l-50">-->
+<!--                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Looks like you already have an account with us.</p>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <login-form-component section="loginSection" :email="parameters.email"></login-form-component>-->
+<!--                    </div>-->
+<!--                </div>-->
+
+                <!-- The first step  -->
+                <div class="col bg-light" key="3" v-show="!$store.getters.isShowing('registrationForm')">
+                    <div class="login d-flex align-items-center py-5">
+                        <!-- content-->
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-lg-10 col-xl-7 mx-auto">
+                                    <div class="mb-4 text-center">
+                                        <!--begin::Logo-->
+                                        <img
+                                            src="/images/cief-dark.png"
+                                            class="w-50 mb-4 py-2"
+                                            alt="img"
+                                        />
+                                        <!--end::Logo-->
+                                        <h3 class="bold text-danger-dark ">Register Your Account!</h3>
+                                        <p class="bold text-muted mb-4">If you are new user.</p>
                                     </div>
+                                    <form>
+                                        <div class="form-group mb-3">
+                                            <input id="inputEmail" type="email"
+                                                   placeholder="Email address"
+                                                   required="" autofocus=""
+                                                   class="form-control border-0 shadow-sm px-4">
+                                        </div>
+                                        <div class="form-group mb-3">
+                                            <input id="inputPassword" type="password"
+                                                   placeholder="Password" required=""
+                                                   class="form-control border-0 shadow-sm px-4 text-primary">
+                                        </div>
+                                        <div class="form-group clearfix">
+                                            <div
+                                                class="checkbox-custom  pull-left">
+                                                <input type="checkbox" id="inputCheckbox" name="remember">
+                                                <label for="inputCheckbox" class="fs-10 text-capitalize p-l-10" style="vertical-align: middle;">
+                                                    Click here to accept our <span class="text-danger">
+                                                    Terms & Privacy Policy
+                                                </span></label>
+                                            </div>
+                                        </div>
+                                        <!--begin::Action-->
+                                        <div class="text-center pt-4">
+                                            <button type="submit"
+                                                    class="btn btn-danger btn-lg mb-4 shadow-sm text-uppercase bold">
+                                                Sign up
+                                            </button>
+                                            <div class="mb-4 text-center text-muted fs-10">
+                                                <span>or</span>
+                                                <span>sign up with</span>
+                                            </div>
+                                            <div class="social">
+                                                <a class="btn btn-rounded" href="#">
+                                                    <i class="fa fa-facebook-f" aria-hidden="true"></i>
+                                                </a>
+                                                <a class="btn btn-rounded" href="#">
+                                                    <i class="fa fa-google" aria-hidden="true"></i>
+                                                </a>
+                                                <a class="btn btn-rounded" href="#">
+                                                    <i class="fa fa-linkedin" aria-hidden="true"></i>
+                                                </a>
+                                            </div>
+                                            <div
+                                                class="text-center justify-content-between mt-5">
+                                                <p class="fs-12">Already have an account? <a href="#" class="text-danger bold">Login here</a></p>
+                                            </div>
+                                        </div>
+                                        <!--end::Action-->
+                                    </form>
                                 </div>
-                                <div class="row animated fadeInDownBig">
-                                    <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.email.$error}]" :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
-                                        <div class="row align-items-center">
-                                            <div class="col pl-md-0 pr-md-0  bg-white">
-                                                <div class="input-group transparent b-grey b-t b-b">
-                                                    <span class="input-group-addon no-border">
-                                                        <i class="fa fa-user-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
-                                                    </span>
-                                                    <input placeholder="My Email Address" v-model.trim="parameters.email" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
-                                                    <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                            </div>
+                        </div><!-- End -->
+                    </div>
+                </div><!-- End -->
+
+                <!-- The second step  -->
+                <div class="col bg-light" key="3" v-show="!$store.getters.isShowing('registrationForm')">
+                    <div class="login d-flex align-items-center py-5">
+                        <!-- content-->
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-lg-10 mx-auto">
+
+                                    <div class="mb-4 text-center">
+                                        <h3 class="bold fs-15 text-danger-dark">Welcome on board, you’re just 5 minutes away from your order</h3>
+                                        <p class="bold text-muted mb-4">Please fill in the form below:</p>
+                                        <!--begin::account type-->
+                                        <p class="bold fs-12 text-secondary">Select an account type</p>
+                                        <div class="row justify-content-center">
+                                            <div class="col-auto mb-3">
+                                                <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 1, 'text-primary': parameters.type === 1, 'b-grey': parameters.type !== 1 }" @click="parameters.type = 1">
+                                                    <div class="m-b-15">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                             width="45" height="45"
+                                                             viewBox="0 0 172 172"
+                                                             style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M163.9375,5.375h-94.0625v43h-17.46875l-34.9375,13.4375v108.84375h61.8125v-4.03125h84.65625z" fill="#ffffff"></path><path d="M163.9375,170.65625c-2.28438,0 -4.03125,-1.74687 -4.03125,-4.03125v-157.21875h-86v157.21875c0,2.28438 -1.74688,4.03125 -4.03125,4.03125c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-161.25c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h94.0625c2.28438,0 4.03125,1.74687 4.03125,4.03125v161.25c0,2.28438 -1.74687,4.03125 -4.03125,4.03125z" fill="#444b54"></path><path d="M120.9375,170.65625h-8.0625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-24.1875c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h8.0625c2.28437,0 4.03125,1.74687 4.03125,4.03125v24.1875c0,2.28438 -1.74688,4.03125 -4.03125,4.03125zM48.375,170.65625h-8.0625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-24.1875c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h8.0625c2.28438,0 4.03125,1.74687 4.03125,4.03125v24.1875c0,2.28438 -1.74687,4.03125 -4.03125,4.03125zM17.46875,170.65625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-104.8125c0,-1.6125 1.075,-3.225 2.55312,-3.7625l34.9375,-13.4375c2.01563,-0.80625 4.43437,0.26875 5.24062,2.28438c0.80625,2.01563 -0.26875,4.43437 -2.28438,5.24062l-32.38437,12.49688v101.99063c0,2.28438 -1.74687,4.03125 -4.03125,4.03125z" fill="#444b54"></path><path d="M139.75,65.84375c-0.26875,0 -0.5375,0 -0.80625,-0.13438c-0.26875,0 -0.5375,-0.13437 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40313c-0.26875,-0.13437 -0.40312,-0.26875 -0.67187,-0.5375c-0.80625,-0.80625 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40312 0.5375,-0.67187c0.26875,-0.26875 0.40313,-0.40312 0.67188,-0.5375c0.26875,-0.13437 0.40313,-0.26875 0.67188,-0.40312c0.26875,-0.13437 0.5375,-0.13437 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13438 3.62813,1.075c0.13437,0.13438 0.40312,0.40312 0.5375,0.67188c0.13438,0.26875 0.26875,0.40312 0.40312,0.67188c0.13438,0.26875 0.13438,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,1.075 -0.40313,2.15 -1.20938,2.82187c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,0.26875 -0.80625,0.26875 -1.075,0.26875zM112.875,61.8125c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74687 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,65.84375c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.80625,-0.67188 -1.20938,-1.74688 -1.20938,-2.82188c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13437,-0.26875 0.26875,-0.40312 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13437 0.40313,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.13438,0.13438 -0.40313,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40313,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,-0.13438 -0.80625,-0.13438 -1.075,-0.13438zM139.75,45.6875c-0.26875,0 -0.5375,0 -0.80625,-0.13437c-0.26875,0 -0.5375,-0.13438 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40312c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.5375c-0.13438,-0.13437 -0.40312,-0.40312 -0.5375,-0.67187c-0.13437,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.26875,-0.26875 0.40312,-0.40313 0.67188,-0.5375c0.26875,-0.13438 0.40312,-0.26875 0.67188,-0.40313c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13437 3.62813,1.075c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67187c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.67188c-0.13438,0.13438 -0.40313,0.40312 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.13438,0.40313 -0.40313,0.40313 -0.67188,0.40313zM112.875,41.65625c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28438 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125zM94.0625,45.6875c-1.075,0 -2.15,-0.40312 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-1.075 0.40313,-2.15 1.20938,-2.82187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,1.075 -0.40312,2.15 -1.20938,2.82187c-0.13437,0.13437 -0.40312,0.40312 -0.5375,0.5375c-0.26875,0.13438 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.26875,-0.13437 -0.5375,-0.13437 -0.80625,-0.13437zM139.75,86c-0.26875,0 -0.5375,0 -0.80625,-0.13438c-0.26875,0 -0.5375,-0.13437 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40313c-0.26875,-0.13437 -0.40312,-0.26875 -0.67187,-0.5375c-0.13438,-0.13438 -0.40312,-0.40313 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40313 -0.40312,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.26875,-0.26875 0.40312,-0.40313 0.67188,-0.5375c0.26875,-0.13438 0.40312,-0.26875 0.67188,-0.40313c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c0.5375,-0.13438 1.075,-0.13438 1.6125,0c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13438 0.40312,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82188c-0.80625,0.94062 -1.88125,1.34375 -2.95625,1.34375zM112.875,81.96875c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,86c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.13437,-0.13438 -0.40313,-0.40313 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40312 -0.40313,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-1.075 0.40312,-2.15 1.20938,-2.82188c0.94062,-0.94062 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40313,0.67188c-0.13437,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c0,-0.13437 -0.26875,-0.13437 -0.5375,-0.13437z" fill="#71c2ff"></path><g fill="#71c2ff"><path d="M139.75,106.15625c-1.075,0 -2.15,-0.40313 -2.82188,-1.20938c-0.13437,-0.13437 -0.40312,-0.40312 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c1.47813,-1.47812 4.16563,-1.47812 5.64375,0c0.13438,0.13437 0.40312,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13438,0.5375 -0.26875,0.80625c-0.13438,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13438,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.67187,0.80625 -1.74688,1.20938 -2.82188,1.20938zM112.875,102.125c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,106.15625c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-1.075 0.40313,-2.15 1.20938,-2.82187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82187c0,1.075 -0.40312,2.15 -1.20938,2.82187c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path></g><g fill="#71c2ff"><path d="M139.75,126.3125c-1.075,0 -2.15,-0.40313 -2.82188,-1.20938c-0.13437,-0.13437 -0.40312,-0.40312 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c1.47813,-1.47812 4.16563,-1.47812 5.64375,0c0.80625,0.80625 1.20938,1.74687 1.20938,2.82187c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13437,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.5375,0.94062 -1.6125,1.34375 -2.6875,1.34375zM112.875,122.28125c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,126.3125c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13437,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13437 0.40313,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.94063,0.67188 -2.01562,1.075 -3.09063,1.075z"></path></g><g fill="#71c2ff"><path d="M139.75,146.46875c-1.075,0 -2.15,-0.40312 -2.82188,-1.20937c-0.13437,-0.13438 -0.40312,-0.40313 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40312 0.5375,-0.5375c0.26875,-0.13438 0.40313,-0.40312 0.67188,-0.5375c0.26875,-0.13438 0.40313,-0.26875 0.67188,-0.40312c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13438 3.62813,1.075c0.13437,0.13438 0.40312,0.40313 0.5375,0.5375c0.13438,0.26875 0.26875,0.40312 0.40312,0.67188c0.13438,0.26875 0.13438,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.80625,0.94063 -1.88125,1.34375 -2.95625,1.34375zM94.0625,146.46875c-1.075,0 -2.15,-0.40312 -2.82187,-1.20937c-0.80625,-0.80625 -1.20938,-1.74688 -1.20938,-2.82188c0,-1.075 0.40313,-2.15 1.20938,-2.82188c0.94062,-0.94062 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13438 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13438 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74687 1.20938,2.82187c0,1.075 -0.40312,2.15 -1.20938,2.82188c-0.13437,0.13437 -0.40312,0.40312 -0.5375,0.5375c-0.26875,0.13438 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path></g><g fill="#71c2ff"><path d="M44.34375,86c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.80625,-0.67187 -1.20938,-1.74688 -1.20938,-2.82188c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28438,-1.34375 3.62813,-1.075c0.26875,0 0.5375,0.13438 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13438 0.40312,0.26875 0.67188,0.5375c0.13438,0.13438 0.40312,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.13438,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,-0.13437 -0.80625,-0.13437 -1.075,-0.13437z"></path></g><g fill="#71c2ff"><path d="M44.34375,106.15625c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28438,-1.34375 3.62813,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.67188,0.5375c0.13438,0.13437 0.40312,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13438,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13438,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.13437,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.40313,-0.13438 -0.67187,-0.13438 -0.94063,-0.13438z"></path></g><g fill="#71c2ff"><path d="M44.34375,126.3125c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.13438,-0.13437 -0.40313,-0.40312 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40312 -0.40313,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40313,-0.67187c0.13437,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.67188,0.5375c0.13437,0.13437 0.40312,0.40313 0.5375,0.67188c0.13438,0.26875 0.26875,0.40313 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13438,0.26875 -0.26875,0.5375 -0.40313,0.67188c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.13438,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path></g></g></g></svg>
+                                                    </div>
+                                                    <p class="no-margin bold">Company</p>
+                                                </div>
+                                            </div>
+                                            <div class="col-auto">
+                                                <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 0, 'text-primary': parameters.type === 0, 'b-grey': parameters.type !== 0 }"  @click="parameters.type = 0">
+                                                    <div class="m-b-15">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                             width="45" height="45"
+                                                             viewBox="0 0 172 172"
+                                                             style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="`none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="Layer_1"><path d="M116.90625,80.22188c0,17.06563 -13.84063,30.90625 -30.90625,30.90625c-17.06562,0 -30.90625,-13.84062 -30.90625,-30.90625v-36.81875l61.8125,7.39063z" fill="#ffffff"></path><path d="M135.85313,155.3375c-9.94375,-17.33437 -28.4875,-29.025 -49.85313,-29.025v0c-21.36562,0 -39.90938,11.69063 -49.85312,29.025l0.13437,4.56875h99.4375z" fill="#dfe8f4"></path><path d="M36.14688,159.36875c-0.67187,0 -1.34375,-0.13438 -2.01562,-0.5375c-1.88125,-1.075 -2.55313,-3.49375 -1.47813,-5.50937c10.88438,-19.08125 31.30938,-31.04063 53.34688,-31.04063c22.0375,0 42.4625,11.95937 53.34688,31.04063c1.075,1.88125 0.40312,4.43437 -1.47813,5.50937c-1.88125,1.075 -4.43437,0.40312 -5.50937,-1.47812c-9.54063,-16.6625 -27.27813,-27.00938 -46.35938,-27.00938c-19.08125,0 -36.81875,10.34688 -46.35937,27.00938c-0.67187,1.20937 -2.01562,2.01563 -3.49375,2.01563zM104.275,39.10313l-0.5375,-0.80625c-3.89688,-5.50937 -10.34687,-8.86875 -17.06562,-8.86875h-11.42187c-17.06563,0 -30.90625,13.84063 -30.90625,30.90625v0c0,2.28437 1.74687,4.03125 4.03125,4.03125h6.9875c0.13437,0 0.13437,0 0.26875,0c15.45313,0 31.175,0 42.4625,-10.07812v0.13437c0.5375,-0.5375 1.075,-0.94063 1.47812,-1.47812c1.47812,-1.6125 4.03125,-1.88125 5.64375,-0.40313c1.74687,1.47813 1.88125,4.16563 0.26875,5.9125c-0.67187,0.67188 -1.20938,1.20938 -1.88125,1.88125c-1.74687,1.74687 -1.075,4.70312 1.20938,5.64375v0c1.34375,0.5375 2.82187,0.80625 4.3,0.94062c2.01563,0.26875 3.62813,1.88125 3.62813,4.03125v9.1375c0,14.24375 -10.75,26.47187 -24.99375,27.4125c-15.45313,1.075 -28.4875,-11.2875 -28.62188,-26.74062c0,-2.15 -1.6125,-4.03125 -3.7625,-4.16563c-2.28438,-0.13438 -4.3,1.74688 -4.3,4.03125c0,19.21563 15.72187,34.9375 34.9375,34.9375c18.67813,0 33.99688,-14.64688 34.9375,-33.19062c0,-0.13438 0,-0.26875 0,-0.40313v-18.8125v-4.03125v-1.34375c0,-9.675 -7.25625,-17.60312 -16.6625,-18.67813z" fill="#444b54"></path></g></g></svg>
+                                                    </div>
+                                                    <p class="no-margin bold">Personal</p>
                                                 </div>
                                             </div>
                                         </div>
-                                    </div>
+                                        <!--end::account type-->
+                                        </div>
+                                    <form>
+                                        <h4 class="bold border-bottom border-danger fs-12 mb-3 text-danger-dark">Personal Details</h4>
+                                        <div class="form-group mb-3">
+                                            <label for="inputName" style="text-transform: none;">Full Name As Per ID</label>
+                                            <input id="inputName" type="name"
+                                                   required="" autofocus=""
+                                                   class="form-control border-0 shadow-sm px-4">
+                                        </div>
+                                        <div class="form-row mb-3">
+                                            <div class="form-group col-md-6">
+                                                <label for="inputPhone" style="text-transform: none;">Phone No.</label>
+                                                <input type="text" class="form-control" id="inputPhone" >
+                                            </div>
+                                            <div class="form-group col-md-6">
+                                                <label for="inputwechat" style="text-transform: none;">Wechat ID</label>
+                                                <input type="text" class="form-control" id="inputwechat">
+                                            </div>
+                                        </div>
+                                        <!--begin::Action-->
+                                        <div class="text-center pt-4">
+                                            <button type="submit"
+                                                    class="btn btn-danger btn-lg mb-4 shadow-sm text-uppercase bold">
+                                                Next
+                                            </button>
+                                        </div>
+                                        <!--end::Action-->
+                                    </form>
                                 </div>
                             </div>
-                        </div>
-                        <div class="row m-t-30 align-items-center">
-                            <div class="col-auto animated fadeInLeftBig slow">
-                                <div class="b-t b-b b-r b-primary bg-transparent all-caps text-primary p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer" style="letter-spacing: 8px;" @click="submit(route('api.account.authentication.authenticate.email.check'), 'post', section, false, false)">Next <i class="fa fa-chevron-right fs-13"></i></div>
-                            </div>
-                        </div>
+                        </div><!-- End -->
                     </div>
-                </div>
-                <div class="row" key="2" v-show="$store.getters.isShowing('loginForm')" >
+                </div><!-- End -->
+
+                <!-- The original wizard don't touch  -->
+                    <div class="row m-t-30" key="3" v-show="!$store.getters.isShowing('registrationForm')" >
                     <div class="col all-caps">
-                        <div class="row  m-l-0">
-                            <div class="col p-l-50">
-                                <h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Welcome Back!</h5>
-                            </div>
-                        </div>
-                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">
-                            <div class="col p-l-50">
-                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Looks like you already have an account with us.</p>
-                            </div>
-                        </div>
-                        <login-form-component section="loginSection" :email="parameters.email"></login-form-component>
-                    </div>
-                </div>
-                <div class="row m-t-30" key="3" v-show="$store.getters.isShowing('registrationForm')" >
-                    <div class="col all-caps">
-                        <div class="row m-b-20">
+                        <div class="row m-b-20 ">
                             <div class="col p-l-50">
                                 <div class="row  m-l-0 align-items-center justify-content-center">
                                     <div class="col">
@@ -79,6 +227,11 @@
                         <registration-form-component ref="registration" :email="parameters.email" section="loginSection"></registration-form-component>
                     </div>
                 </div>
+
+
+
+
+<!--                dont-tocuh anything here -->
             </transition-component>
         </div>
     </div>
@@ -118,4 +271,4 @@
         mixins: [request]
     }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/views/pages/accounts/authentication/login.blade.php b/resources/views/pages/accounts/authentication/login.blade.php
index 1a217cac..e5ce7f50 100644
--- a/resources/views/pages/accounts/authentication/login.blade.php
+++ b/resources/views/pages/accounts/authentication/login.blade.php
@@ -17,7 +17,7 @@
                                     <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
                                     <transition-component key="2" group enter-class="animated fadeInRightBig faster" leave-class="animated fadeOutUpBig" v-show="!$store.getters.isLoading('loginSection')">
                                         <div class="row" key="1" v-show="!$store.getters.isShowing('forgetPassword')" >
-                                            <div class="col all-caps">
+                                            <div class="col">
                                                 <login-section-component section="loginSection"></login-section-component>
                                             </div>
                                         </div>
@@ -90,4 +90,4 @@
             </div>
         </div>
     </transition-component>
-@endsection
\ No newline at end of file
+@endsection