onboarding start

app/Livewire/Onboarding.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Onboarding extends Component
+{
+    #[Layout('layouts.frontend')]
+    public function render()
+    {
+        return view('livewire.onboarding');
+    }
+}

public/assets/css/style.css

@@ -3234,6 +3234,11 @@ fieldset:disabled .btn {
     color: var(--bs-btn-hover-color);
 }
 
+.btn-large {
+    width: 200px;
+    max-width: 100%;
+}
+
 .btn-lg,
 .btn-group-lg > .btn {
     --bs-btn-padding-y: 0.5rem;
@@ -12260,7 +12265,7 @@ fieldset:disabled .btn {
 ==========================**/
 body {
     font-family: "Roboto", sans-serif;
-    font-size: 14px;
+    font-size: 16px;
     color: var(--body-font-color);
     background-color: transparent !important;
     overflow-x: hidden;
@@ -46433,14 +46438,23 @@ pre {
 }
 .show-hide span {
     cursor: pointer;
-    font-size: 13px;
+    font-size: 18px;
     color: var(--theme-default);
+    font-family: 'iconly' !important;
+    speak: never;
+    font-style: normal;
+    font-variant: normal;
+    text-transform: none;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 300;
 }
 .show-hide span.show:before {
-    content: "show";
+    content: "\e950";
 }
 .show-hide span:before {
-    content: "hide";
+    content: "\e932";
 }
 
 .needs-validation.was-validated .invalid-feedback {

resources/views/layouts/admin.blade.php

@@ -46,8 +46,6 @@
 		<script src="/assets/js/vendors/font-awesome/fontawesome-min.js"></script>
 		<!-- password_show-->
 		<script src="/assets/js/password.js"></script>
-		<!-- form validation -->
-		<script src="/assets/js/form-validation-custom.js"></script>
 		<!-- custom script -->
 		<script src="/assets/js/script.js"></script>
 

resources/views/livewire/login.blade.php

@@ -5,7 +5,7 @@
                 <div>
                     <div class="login-main bg-primary d-flex justify-content-center">
                         <div class="login-inner w-100">
-                            <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo_white.png" alt="looginpage" />
+                            <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo_white.png" alt="logo" />
                             <form class="theme-form" name="login" method="POST" action="#">
                                 <div class="row">
                                     <div class="col-md-12 mb-3">
@@ -30,8 +30,8 @@
                                     </div>
                                 </div>
                                 <div class="form-group mb-0 checkbox-checked">
-                                    <div class="text-center mt-5">
-                                        <button class="btn btn-secondary btn-block text-uppercase w-50 fw-bold" type="submit">Accedi</button>
+                                    <div class="text-center mt-4">
+                                        <button class="btn btn-secondary btn-block text-uppercase fw-bold btn-large" type="submit">Accedi</button>
                                     </div>
                                 </div>
                                 <div class="text-center mt-3">

resources/views/livewire/onboarding.blade.php

@@ -0,0 +1,83 @@
+<div class="container-fluid p-0">
+    <div class="row m-0">
+        <div class="col-12 p-0">
+            <div class="registration-card">
+                <div>
+                    <div class="registration-main d-flex justify-content-center">
+                        <div class="registration-inner w-100">
+                            <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
+                            <form class="theme-form form-wizard" id="onboarding" method="POST" action="#">
+                                <div class="tab">
+                                    <div class="row">
+                                        <div class="col-xs-12 mb-3">
+                                            <p class="text-center">Benvenuto! Iniziamo configurando le informazioni base della tua azienda.</p>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="firstname">Nome</label>
+                                                <input class="form-control" id="firstname" name="firstname" type="text" placeholder="Inserisci" required>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="lastname">Cognome</label>
+                                                <input class="form-control" id="lastname" name="lastname" type="text" placeholder="Inserisci" required>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="company">Nome azienda</label>
+                                                <input class="form-control" id="company" name="company" type="text" placeholder="Inserisci" required>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="email">Email</label>
+                                                <input class="form-control" id="email" name="email" type="email" placeholder="Inserisci" required>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="password">Password</label>
+                                                <div class="form-input position-relative">
+                                                    <input class="form-control" id="password" name="password" type="password" placeholder="Inserisci" required />
+                                                    <div class="show-hide"><span class="show"> </span></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="confirm_password">Conferma password</label>
+                                                <div class="form-input position-relative">
+                                                    <input class="form-control" id="confirm_password" name="confirm_password" type="password" placeholder="Inserisci" required />
+                                                    <div class="show-hide"><span class="show"> </span></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                                <div>
+                                    <div class="text-end btn-mb">
+                                        {{-- <button class="btn btn-secondary" id="prevBtn" type="button" onclick="nextPrev(-1)">Previous</button> --}}
+                                        <button class="btn btn-primary" id="nextBtn" type="button" onclick="nextPrev(1)">Avanti</button>
+                                    </div>
+                                </div>
+                                <!-- Circles which indicates the steps of the form:-->
+                                <div class="text-center"><span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span></div>
+                                <!-- Circles which indicates the steps of the form:-->
+                                <!-- Container-fluid Ends-->
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+<!-- form wizard JS -->
+<script src="../assets/js/form-wizard/form-wizard.js"></script>
+@endpush

resources/views/livewire/registration.blade.php

@@ -5,7 +5,7 @@
                 <div>
                     <div class="registration-main d-flex justify-content-center">
                         <div class="registration-inner w-100">
-                            <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="looginpage" />
+                            <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
                             <form class="theme-form" id="registration" method="POST" action="#">
                                 <div class="row">
                                     <div class="col-md-6 col-xs-12 mb-3">
@@ -38,7 +38,6 @@
                                             <div class="form-input position-relative">
                                                 <input class="form-control" id="password" name="password" type="password" placeholder="Inserisci" required />
                                                 <div class="show-hide"><span class="show"> </span></div>
-                                                <div class="invalid-feedback">Compila il campo</div>
                                             </div>
                                         </div>
                                     </div>
@@ -48,14 +47,13 @@
                                             <div class="form-input position-relative">
                                                 <input class="form-control" id="confirm_password" name="confirm_password" type="password" placeholder="Inserisci" required />
                                                 <div class="show-hide"><span class="show"> </span></div>
-                                                <div class="invalid-feedback">Compila il campo</div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="form-group mb-0 checkbox-checked">
-                                    <div class="text-center mt-5">
-                                        <button class="btn btn-primary btn-block text-uppercase w-50 fw-bold" type="submit">Registrati</button>
+                                    <div class="text-center mt-4">
+                                        <button class="btn btn-primary btn-block text-uppercase fw-bold btn-large" type="submit">Registrati</button>
                                     </div>
                                 </div>
                                 <div class="text-center mt-3">
@@ -68,9 +66,4 @@
             </div>
         </div>
     </div>
-</div>
-
-@push('scripts')
-<!-- form wizard JS -->
-<script src="/assets/js/form-wizard/form-wizard.js"></script>
-@endpush
+</div>

routes/web.php

@@ -4,4 +4,5 @@ use Illuminate\Support\Facades\Route;
 
 Route::get('/', \App\Livewire\Index::class);
 Route::get('/login', \App\Livewire\Login::class);
-Route::get('/registration', \App\Livewire\Registration::class);
+Route::get('/registration', \App\Livewire\Registration::class);
+Route::get('/onboarding', \App\Livewire\Onboarding::class);