Delete Onboarding and Component from Sidebar

Update Validate Panel

src/App.jsx

@@ -27,12 +27,14 @@ import Onboarding3 from "./pages/Onboarding3";
 import Onboarding4 from "./pages/Onboarding4";
 import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
-import Signup from "./pages/Signup";
 import Signin from "./pages/Signin";
 
 function App() {
 
   const location = useLocation();
+  useEffect(()=> {
+    localStorage.setItem('svgAvatar', '')
+  },[])
 
   useEffect(() => {
     document.querySelector('html').style.scrollBehavior = 'auto'
@@ -43,7 +45,8 @@ function App() {
   return (
     <>
       <Routes>
-        <Route exact path="/" element={<Dashboard />} />
+        <Route exact path="/" element={<Onboarding1 />} />
+        <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/dashboard/analytics" element={<Analytics />} />
         <Route path="/dashboard/fintech" element={<Fintech />} />
         <Route path="/digitalId/profile-id" element={<ProfileId />} />
@@ -51,7 +54,6 @@ function App() {
         <Route path="/digitalId/validation-log" element={<ValidationLog />} />
         <Route path="/digitalId/verify" element={<Verify />} />
         <Route path="/messages" element={<Messages />} />
-        <Route path="/onboarding-1" element={<Onboarding1 />} />
         <Route path="/onboarding-2" element={<Onboarding2 />} />
         <Route path="/onboarding-3" element={<Onboarding3 />} />
         <Route path="/onboarding-4" element={<Onboarding4 />} />
@@ -61,7 +63,6 @@ function App() {
         <Route path="/component/accordion" element={<AccordionPage />} />
         <Route path="/reset-password" element={<ResetPassword />} />
         <Route path="/signin" element={<Signin />} />
-        <Route path="/signup" element={<Signup />} />
       </Routes>
     </>
   );

src/components/DropdownProfile.jsx

@@ -75,7 +75,7 @@ function DropdownProfile({
             <li>
               <Link
                 className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
-                to="/"
+                to="/dashboard"
                 onClick={() => setDropdownOpen(!dropdownOpen)}
               >
                 Settings
@@ -84,7 +84,7 @@ function DropdownProfile({
             <li>
               <Link
                 className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
-                to="/"
+                to="/dashboard"
                 onClick={() => setDropdownOpen(!dropdownOpen)}
               >
                 Sign Out

src/pages/Onboarding1.jsx

@@ -21,7 +21,7 @@ function Onboarding1() {
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
@@ -30,13 +30,13 @@ function Onboarding1() {
               </div>
 
               {/* Progress bar */}
-              <div className="px-4 pt-12 pb-8">
+              <div className="px-4 pt-12 pb-[142px]">
                 <div className="max-w-md mx-auto w-full">
                   <div className="relative">
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
                       </li>
                       <li>
                         <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link>
@@ -56,7 +56,7 @@ function Onboarding1() {
             <div className="px-4 py-8">
               <div className="max-w-md mx-auto">
 
-                <h1 className="text-3xl text-slate-800 font-bold mb-6">Tell us about your company ✨</h1>
+                <h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
                 {/* Form */}
                 <form>
                   <div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
@@ -67,7 +67,7 @@ function Onboarding1() {
                           <circle className="text-indigo-100" cx="20" cy="20" r="20" />
                           <path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
                         </svg>
-                        <div className="font-medium text-slate-800 mb-1">Individual</div>
+                        <div className="font-semibold text-slate-800 mb-1">Individual</div>
                         <div className="text-sm">Lorem ipsum is place text commonly used.</div>
                       </div>
                       <div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -82,7 +82,7 @@ function Onboarding1() {
                           <path className="text-indigo-300" d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z" />
                           <path className="text-indigo-500" d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
                         </svg>
-                        <div className="font-medium text-slate-800 mb-1">Organization</div>
+                        <div className="font-semibold text-slate-800 mb-1">Organization</div>
                         <div className="text-sm">Lorem ipsum is place text commonly used.</div>
                       </div>
                       <div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -91,7 +91,7 @@ function Onboarding1() {
                   <div className="flex items-center justify-between space-x-6 mb-8">
                     <div>
                       <div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</div>
-                      <div className="text-xs">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
+                      <div className="text-xs font-normal leading-6">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
                     </div>
                     <div className="flex items-center">
                       <div className="form-switch">
@@ -104,7 +104,9 @@ function Onboarding1() {
                     </div>
                   </div>
                   <div className="flex items-center justify-between">
-                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-2">Next Step -&gt;</Link>
+                    <button className="font-medium btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
+                      <Link to="/onboarding-2">Next Step -&gt;</Link>
+                    </button>
                   </div>
                 </form>
 

src/pages/Onboarding2.jsx

@@ -21,7 +21,7 @@ function Onboarding2() {
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
@@ -30,13 +30,13 @@ function Onboarding2() {
               </div>
 
               {/* Progress bar */}
-              <div className="px-4 pt-12 pb-8">
+              <div className="px-4 pt-12 pb-[59px]">
                 <div className="max-w-md mx-auto w-full">
                   <div className="relative">
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
                       </li>
                       <li>
                         <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -54,17 +54,17 @@ function Onboarding2() {
             </div>
 
             <div className="px-4 py-8">
-              <div className="max-w-sm mx-auto">
+              <div className="max-w-[344px] mx-auto">
                 <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
                 {/* Form */}
                 <form>
                   <div className="space-y-4 mb-8">
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="email">First name <span className="text-rose-500">*</span></label>
                       <input id="email" className="form-input w-full" type="email" />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="name">Last name <span className="text-rose-500">*</span></label>
                       <input id="name" className="form-input w-full" type="text" />
                     </div>
                     <div>
@@ -86,13 +86,15 @@ function Onboarding2() {
                         <span className="text-sm ml-2">Email me about product news.</span>
                       </label>
                     </div>
-                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/onboarding-3">Sign Up</Link>
+                    <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
+                      <Link to="/onboarding-3">Sign Up</Link>
+                    </button>
                   </div>
                 </form>
                 {/* Footer */}
                 <div className="pt-5 mt-6 border-t border-slate-200">
                   <div className="text-sm">
-                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-2">Sign In</Link>
+                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
                   </div>
                 </div>
               </div>

src/pages/Onboarding3.jsx

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 
 function Onboarding3() {
+
+  useEffect(()=>{
+    return ()=>{
+      localStorage.setItem('svgAvatar', generateSvgAvatar())
+    }
+  }, [])
+
   const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
   return (
     <main className="bg-white">
@@ -20,7 +27,7 @@ function Onboarding3() {
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
@@ -35,7 +42,7 @@ function Onboarding3() {
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
                       </li>
                       <li>
                         <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -58,14 +65,14 @@ function Onboarding3() {
                 <div className="gap-0.5">
                   <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                   {/* htmlForm */}
-                  <div className="grid grid-cols-4 gap-2.5 mb-14">
+                  <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
                     {arrayBadges.map(tag => (
                       <button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
                         <span className="text-sm font-medium">{tag}</span>
                       </button>
                     ))}
                   </div>
-                  <div className="flex justify-center gap-x-5">
+                  <div className="flex pl-7 gap-x-5">
                     <button className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
                       <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
                         <path
@@ -84,7 +91,9 @@ function Onboarding3() {
                 </div>
                 <div className="flex items-center justify-between">
                   <Link className="text-sm underline hover:no-underline" to="/onboarding-2">&lt;- Back</Link>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-4">Next Step -&gt;</Link>
+                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
+                    <Link to="/onboarding-4">Next Step -&gt;</Link>
+                  </button>
                 </div>
 
               </div>

src/pages/Onboarding4.jsx

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 
 function Onboarding4() {
+
+  useEffect(()=>{
+    return ()=>{
+      localStorage.setItem('svgAvatar', generateSvgAvatar())
+    }
+  }, [])
+
   return (
     <main className="bg-white">
 
@@ -19,7 +26,7 @@ function Onboarding4() {
               {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                   <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
@@ -28,13 +35,13 @@ function Onboarding4() {
               </div>
 
               {/* Progress bar */}
-              <div className="px-4 pt-12 pb-8">
+              <div className="px-4 pt-12 pb-[85px]">
                 <div className="max-w-md mx-auto w-full">
                   <div className="relative">
                     <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                     <ul className="relative flex justify-between w-full">
                       <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</Link>
                       </li>
                       <li>
                         <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
@@ -60,10 +67,12 @@ function Onboarding4() {
                     <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
                   </svg>
                   <h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Go To Profile -&gt;</Link>
+                  <button className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
+                    <Link to="/dashboard">Go To Profile -&gt;</Link>
+                  </button>
                 </div>
 
-                <div className="flex items-center justify-between mt-6">
+                <div className="flex items-center justify-between">
                   <div className="mr-1">
                     <label className="flex items-center">
                       <input type="checkbox" className="form-checkbox" />
@@ -72,7 +81,7 @@ function Onboarding4() {
                     <label className="flex items-center">
                       <input type="checkbox" className="form-checkbox" />
                       <div className="text-sm ml-2">
-                        <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">I store my pharse</Link> very carefuly
+                        I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
                       </div>
                     </label>
                   </div>

src/pages/ResetPassword.jsx

@@ -18,7 +18,7 @@ function ResetPassword() {
             <div className="flex-1">
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                   <svg width="32" height="32" viewBox="0 0 32 32">
                     <defs>
                       <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">

src/pages/SharedData.jsx

@@ -55,9 +55,6 @@ function SharedData() {
       ]
     };
 
-  function saveDigitalId() {
-    localStorage.setItem('svgAvatar', generateSvgAvatar())
-  }
   return (
     <main className="bg-white">
 
@@ -92,7 +89,7 @@ function SharedData() {
           <div className="flex mt-40 flex-col items-center gap-2.5">
             <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
             <span className="text-sm">{sharedDataItems.data}</span>
-            <Link onClick={()=>saveDigitalId()} className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link>
+            <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/dashboard">Get my digital ID</Link>
           </div>
         </div>
 

src/pages/Signin.jsx

@@ -21,7 +21,7 @@ function Signin() {
             <div className="flex-1">
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                   <svg width="32" height="32" viewBox="0 0 32 32">
                     <defs>
                       <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
@@ -60,13 +60,13 @@ function Signin() {
                   <div className="mr-1">
                     <Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
                   </div>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/">Sign In</Link>
+                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/dashboard">Sign In</Link>
                 </div>
               </form>
               {/* Footer */}
               <div className="pt-5 mt-6 border-t border-slate-200">
                 <div className="text-sm">
-                  Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signup">Sign Up</Link>
+                  Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
                 </div>
                 {/* Warning */}
                 <div className="mt-5">

src/pages/Signup.jsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import AuthImage from '../images/auth-image.jpg';
-import AuthDecoration from '../images/auth-decoration.png';
-
-function Signup() {
-  return (
-    <main className="bg-white">
-
-      <div className="relative md:flex">
-
-        {/* Content */}
-        <div className="md:w-1/2">
-          <div className="min-h-screen h-full flex flex-col after:flex-1">
-
-            {/* Header */}
-            <div className="flex-1">
-              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
-                {/* Logo */}
-                <Link className="block" to="/">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
-                </Link>
-              </div>
-            </div>
-
-            <div className="max-w-sm mx-auto px-4 py-8">
-              <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
-              {/* Form */}
-              <form>
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
-                    <input id="email" className="form-input w-full" type="email" />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
-                    <input id="name" className="form-input w-full" type="text" />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="role">Your Role <span className="text-rose-500">*</span></label>
-                    <select id="role" className="form-select w-full">
-                      <option>Designer</option>
-                      <option>Developer</option>
-                      <option>Accountant</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
-                    <input id="password" className="form-input w-full" type="password" autoComplete="on" />
-                  </div>
-                </div>
-                <div className="flex items-center justify-between mt-6">
-                  <div className="mr-1">
-                    <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
-                      <span className="text-sm ml-2">Email me about product news.</span>
-                    </label>
-                  </div>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/">Sign Up</Link>
-                </div>
-              </form>
-              {/* Footer */}
-              <div className="pt-5 mt-6 border-t border-slate-200">
-                <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-
-        {/* Image */}
-        <div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
-          <img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
-          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
-        </div>
-
-      </div>
-
-    </main>
-  );
-}
-
-export default Signup;

src/pages/digitalId/Validate.jsx

@@ -73,7 +73,7 @@ function Validate () {
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main>
+        <main className="relative">
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
             <div className="w-fit">
             {/* Page header */}
@@ -107,8 +107,8 @@ function Validate () {
                 </ul>
               </div>
               <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
-              <div className="pb-8 border-b border-zinc-200 mt-12">
+              <div className="pb-8 border-b border-zinc-200 mt-[50px]">
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
               </div>
               {validateItems.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>

src/pages/digitalId/ValidationLog.jsx

@@ -123,17 +123,17 @@ function ValidationLog () {
               {/* Page header */}
               <div className="pb-8 border-b border-zinc-200">
                 {/* Title */}
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID transaction log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID transaction log ✨</h1>
               </div>
               {/*Psosts*/}
-              <div className="max-w-3xl m-auto mt-8">
+              <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
                   {logItems.map(item => {
                     return <ValidateRoadMap season={item} key={item.id} />
                   })}
                   {/* Post */}
-                  <article className="pt-6">
+                  <article className="pt-3">
                     <div className="xl:flex">
                       <div className="w-32 shrink-0">
                         <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Even earlier</h2>

src/pages/digitalId/Verify.jsx

@@ -144,8 +144,8 @@ function Verify () {
                   </div>
                   {/* Content */}
                   <div className='flex flex-col gap-y-[9px]'>
-                    {item.fields.map((elem) => (
+                    {item.fields.map((elem, index) => (
-                      <div className='flex gap-y-2'>
+                      <div key={index} className='flex gap-y-2'>
                         <div className='flex flex-col'>
                           <div className='flex flex-row items-center'>
                             <span className='font-semibold text-slate-800 text-base w-[204px]'>{elem.value}</span>

src/partials/Sidebar.jsx

@@ -47,10 +47,6 @@ function Sidebar({
     }
   }, [sidebarExpanded]);
 
-  function saveDigitalId () {
-    localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
-  }
-
   return (
     <div>
       {/* Sidebar backdrop (mobile only) */}
@@ -85,7 +81,7 @@ function Sidebar({
             </svg>
           </button>
           {/* Logo */}
-          <NavLink end to="/" className="block">
+          <NavLink end to="/dashboard" className="block">
             <img alt='logo' src={Logo} width="89" height="32"/>
           </NavLink>
         </div>
@@ -154,7 +150,7 @@ function Sidebar({
                           <li className="mb-1 last:mb-0">
                             <NavLink
                               end
-                              to="/"
+                              to="/dashboard"
                               className={({ isActive }) =>
                                 'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                               }
@@ -340,193 +336,6 @@ function Sidebar({
               </li>
             </ul>
           </div>
-          {/* More group */}
-          <div>
-            <h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
-              <span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
-                •••
-              </span>
-              <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">More</span>
-            </h3>
-            <ul className="mt-3">
-              {/* Onboarding */}
-              <SidebarLinkGroup>
-                {(handleClick, open) => {
-                  return (
-                    <React.Fragment>
-                      <a
-                        href="#0"
-                        className={`block text-slate-200 hover:text-white truncate transition duration-150 ${open && 'hover:text-slate-200'}`}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          sidebarExpanded ? handleClick() : setSidebarExpanded(true);
-                        }}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center">
-                            <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
-                              <path
-                                className="fill-current text-slate-600"
-                                d="M19 5h1v14h-2V7.414L5.707 19.707 5 19H4V5h2v11.586L18.293 4.293 19 5Z"
-                              />
-                              <path
-                                className="fill-current text-slate-400"
-                                d="M5 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM5 23a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"
-                              />
-                            </svg>
-                            <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                              Onboarding
-                            </span>
-                          </div>
-                          {/* Icon */}
-                          <div className="flex shrink-0 ml-2">
-                            <svg
-                              className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
-                              viewBox="0 0 12 12"
-                            >
-                              <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
-                            </svg>
-                          </div>
-                        </div>
-                      </a>
-                      <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
-                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink end to="/onboarding-1" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Step 1
-                              </span>
-                            </NavLink>
-                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink end to="/onboarding-2" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Step 2
-                              </span>
-                            </NavLink>
-                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink end to="/onboarding-3" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Step 3
-                              </span>
-                            </NavLink>
-                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink end to="/onboarding-4" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Step 4
-                              </span>
-                            </NavLink>
-                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink onClick={()=>saveDigitalId()} end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Shared Data
-                              </span>
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                    </React.Fragment>
-                  );
-                }}
-              </SidebarLinkGroup>
-              {/* Components */}
-              <SidebarLinkGroup activecondition={pathname.includes('component')}>
-                {(handleClick, open) => {
-                  return (
-                    <React.Fragment>
-                      <a
-                        href="#0"
-                        className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
-                          pathname.includes('component') && 'hover:text-slate-200'
-                        }`}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          sidebarExpanded ? handleClick() : setSidebarExpanded(true);
-                        }}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center">
-                            <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
-                              <circle
-                                className={`fill-current text-slate-600 ${pathname.includes('component') && 'text-indigo-500'}`}
-                                cx="16"
-                                cy="8"
-                                r="8"
-                              />
-                              <circle
-                                className={`fill-current text-slate-400 ${pathname.includes('component') && 'text-indigo-300'}`}
-                                cx="8"
-                                cy="16"
-                                r="8"
-                              />
-                            </svg>
-                            <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                              Components
-                            </span>
-                          </div>
-                          {/* Icon */}
-                          <div className="flex shrink-0 ml-2">
-                            <svg
-                              className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
-                              viewBox="0 0 12 12"
-                            >
-                              <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
-                            </svg>
-                          </div>
-                        </div>
-                      </a>
-                      <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
-                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink
-                              end
-                              to="/component/button"
-                              className={({ isActive }) =>
-                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
-                              }
-                            >
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Button
-                              </span>
-                            </NavLink>
-                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink
-                              end
-                              to="/component/badge"
-                              className={({ isActive }) =>
-                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
-                              }
-                            >
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Badge
-                              </span>
-                            </NavLink>
-                          </li>
-                          <li className="mb-1 last:mb-0">
-                            <NavLink
-                              end
-                              to="/component/accordion"
-                              className={({ isActive }) =>
-                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
-                              }
-                            >
-                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
-                                Accordion
-                              </span>
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                    </React.Fragment>
-                  );
-                }}
-              </SidebarLinkGroup>
-            </ul>
-          </div>
         </div>
 
         {/* Expand / collapse button */}

src/partials/validate/ValidateItem.jsx

@@ -19,8 +19,8 @@ function ValidateTableItem(props) {
   }
 
   return (
-      <tr className="hover:bg-[#E2E8F0] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
+      <tr className="hover:bg-[#eaf0f6] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
               <span className="sr-only">Select</span>

src/partials/validate/ValidatePanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 import Image from '../../images/transactions-image-04.svg';
 
@@ -7,38 +7,13 @@ function TransactionPanel({
   setValidatePanelOpen
 }) {
 
-  const closeBtn = useRef(null);
-  const panelContent = useRef(null);
-
-  // close on click outside
-  useEffect(() => {
-    const clickHandler = ({ target }) => {
-      if (!validatePanelOpen || panelContent.current.contains(target) || closeBtn.current.contains(target)) return;
-      setValidatePanelOpen(false);
-    };
-    document.addEventListener('click', clickHandler);
-    return () => document.removeEventListener('click', clickHandler);
-  });
-
-  // close if the esc key is pressed
-  useEffect(() => {
-    const keyHandler = ({ keyCode }) => {
-      if (!validatePanelOpen || keyCode !== 27) return;
-      setValidatePanelOpen(false);
-    };
-    document.addEventListener('keydown', keyHandler);
-    return () => document.removeEventListener('keydown', keyHandler);
-  });
-
   return (
       <div
-          ref={panelContent}
           className={`absolute inset-0 sm:left-auto z-20 transition-transform duration-200 ease-in-out ${
               validatePanelOpen ? 'translate-x-' : 'translate-x-full'
           }`}>
-        <div className="sticky top-16 bg-gradient-to-b from-[#E2E8F0] via-slate-100 to-white  overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-[calc(100vh-64px)]">
+        <div className="top-16 bg-gradient-to-b from-[#e4eaf0] to-white shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-fit">
           <button
-              ref={closeBtn}
               onClick={() => setValidatePanelOpen(false)}
               className="absolute top-0 right-0 mt-6 mr-6 group p-2"
           >
@@ -83,38 +58,38 @@ function TransactionPanel({
                     <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
                   </div>
                   <div className="flex justify-between space-x-1">
-                    <span className="italic">Transacion::</span>
+                    <span className="italic">Transaction:</span>
                     <span className="font-medium text-slate-700 text-right">145 bytes</span>
                   </div>
                 </div>
               </div>
               {/* Receipts */}
               <div className="mt-6">
-                <div className="text-sm font-semibold text-slate-800 mb-2">Receipts</div>
+                <div className="text-sm font-medium text-slate-800 mb-2">Private Data</div>
-                <form className="rounded bg-slate-100 border border-dashed border-slate-300 text-center px-5 py-8">
+                <form className="rounded bg-slate-50 border border-dashed border-slate-300 text-center px-5 py-8">
                   <svg className="inline-flex w-4 h-4 fill-slate-400 mb-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                     <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
                   </svg>
-                  <label htmlFor="upload" className="block text-sm text-slate-500 italic">Upload exported JSON data</label>
+                  <label htmlFor="upload" className="block text-sm text-slate-400 italic">Upload exported JSON data</label>
                   <input className="sr-only" id="upload" type="file" />
                 </form>
               </div>
               {/* Notes */}
               <div className="mt-6">
-                <div className="text-sm font-semibold text-slate-800 mb-2">Notes</div>
+                <div className="text-sm font-medium text-slate-800 mb-2">Notes</div>
                 <form>
                   <label className="sr-only" htmlFor="notes">Write a note</label>
-                  <textarea id="notes" className="form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
+                  <textarea id="notes" className="resize-none form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
                 </form>
               </div>
               {/* Download / Report */}
-              <div className="flex items-center space-x-3 mt-6">
+              <div className="flex items-center space-x-3 mt-[84px]">
                 <div className="w-1/2">
                   <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">
                     <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                       <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
                     </svg>
-                    <span className="ml-2">Validate</span>
+                    <span className="ml-2 text-sm font-medium">Validate</span>
                   </button>
                 </div>
                 <div className="w-1/2">
@@ -122,7 +97,7 @@ function TransactionPanel({
                     <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                       <path d="M7.001 3h2v4h-2V3Zm1 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM15 16a1 1 0 0 1-.6-.2L10.667 13H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1ZM2 11h9a1 1 0 0 1 .6.2L14 13V2H2v9Z" />
                     </svg>
-                    <span className="ml-2">Invalidate</span>
+                    <span className="ml-2 text-sm font-medium">Invalidate</span>
                   </button>
                 </div>
               </div>

src/partials/validate/ValidateTable.jsx

@@ -83,7 +83,7 @@ function ValidateTable({
               {/* Table header */}
               <thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200">
               <tr>
-                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                <th className="first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
                   <div className="flex items-center">
                     <label className="inline-flex">
                       <span className="sr-only">Select all</span>

src/partials/validationlog/ValidateRoadMap.jsx

@@ -6,7 +6,7 @@ import ValidationUsersImg from "./ValidationUsersImg";
 function ValidateRoadMap({ season }) {
 
   return (
-      <article className="pt-6">
+      <article className="pt-3">
         <div className="xl:flex">
           <div className="w-32 shrink-0">
             <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{season.name}</h2>

src/partials/validationlog/ValidationSeasonItem.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 function ValidationSeasonItem({ length, item, index }) {
   return (
-      <li className="relative py-2">
+      <li className="relative pt-2 pb-2.5">
-        <div className="flex items-center mb-1">
+        <div className="flex items-center mb-2.5">
           {length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
           <div className={`absolute left-0 rounded-full ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} aria-hidden="true">
             <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
@@ -16,11 +16,11 @@ function ValidationSeasonItem({ length, item, index }) {
         </div>
         <div className="block text-slate-800 w-fit pl-9">
           <div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
-          <span className="font-normal text-[10px]">Transactions ID</span>
+          <span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
         </div>
         <div className="mb-3.5 block text-slate-800 w-fit pl-9">
           <div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
-          <span className="font-normal text-[10px]">Validated data</span>
+          <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
         </div>
         <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
       </li>