Merge branch 'master' into Profile-table-item

исправлен отступ у логотипа

src/App.jsx

@@ -79,6 +79,10 @@ import AvatarPage from './pages/component/AvatarPage';
 import TooltipPage from './pages/component/TooltipPage';
 import AccordionPage from './pages/component/AccordionPage';
 import IconsPage from './pages/component/IconsPage';
+import Onboarding1 from "./pages/Onboarding1";
+import Onboarding2 from "./pages/Onboarding2";
+import Onboarding3 from "./pages/Onboarding3";
+import Onboarding4 from "./pages/Onboarding4";
 
 function App() {
 
@@ -149,6 +153,10 @@ function App() {
         <Route path="/onboarding-02" element={<Onboarding02 />} />
         <Route path="/onboarding-03" element={<Onboarding03 />} />
         <Route path="/onboarding-04" element={<Onboarding04 />} />
+        <Route path="/onboarding-1" element={<Onboarding1 />} />
+        <Route path="/onboarding-2" element={<Onboarding2 />} />
+        <Route path="/onboarding-3" element={<Onboarding3 />} />
+        <Route path="/onboarding-4" element={<Onboarding4 />} />
         <Route path="/component/button" element={<ButtonPage />} />
         <Route path="/component/form" element={<FormPage />} />
         <Route path="/component/dropdown" element={<DropdownPage />} />

src/css/tailwind.config.js

@@ -20,10 +20,12 @@ module.exports = {
         inter: ['Inter', 'sans-serif'],
       },
       fontSize: {
+        xxs: ['0.625rem', { lineHeight: '0.75' }],
         xs: ['0.75rem', { lineHeight: '1.5' }],
         sm: ['0.875rem', { lineHeight: '1.5715' }],
         base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
+        validateLg: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }],
         xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
         '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],

src/images/GenerateOnboardingSvg/GenerateSvg.js

@@ -0,0 +1,95 @@
+function createBlob(options) {
+
+    let points = [];
+    let slice = (Math.PI * 2) / options.numPoints;
+    let startAngle = 0;
+
+    for (let i = 0; i < options.subkey.length; i++) {
+        let angle = startAngle + i * slice;
+        let rnd = Number("0x"+options.subkey.substring(i+0,i+1));
+        let point = {
+            x: options.centerX + Math.cos(angle) * (options.radius + rnd),
+            y: options.centerY + Math.sin(angle) * (options.radius + rnd)
+        };
+        points.push(point);
+    }
+
+    let size = points.length;
+    let path = "M" + points[0].x + " " + points[0].y + " C";
+
+    for (let i = 0; i < size; i++) {
+        let p0 = points[(i - 1 + size) % size];
+        let p1 = points[i];
+        let p2 = points[(i + 1) % size];
+        let p3 = points[(i + 2) % size];
+
+        let x1 = p1.x + (p2.x - p0.x) / 6;
+        let y1 = p1.y + (p2.y - p0.y) / 6;
+
+        let x2 = p2.x - (p3.x - p1.x) / 6;
+        let y2 = p2.y - (p3.y - p1.y) / 6;
+
+        path += " " + x1 + " " + y1 + " " + x2 + " " + y2 + " " + p2.x + " " + p2.y;
+    }
+
+    return path + "z";
+}
+
+export var generateSvgAvatar = (function () {
+    return function (seed, raw) {
+        let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
+        //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
+        if (!localStorage.getItem('svgKey')) {
+            localStorage.setItem('svgKey', `${pubKey}`)
+        }
+        let particles = [];
+        let gradients = ['#000000'];
+        let defs = [];
+
+        for (let a = 0; a<64; a = a + 8) {
+            let blob = createBlob({
+                numPoints: 8,
+                centerX: 256,
+                centerY: 256-a*4,
+                radius: 16,
+                subkey: pubKey.substring(a,a + 8)
+            });
+
+            let color =  "#" + pubKey.substring(a+2,a+8);
+            let width = Number("0x"+pubKey.substring(a,a+1));
+            let opacity = Number("0x"+pubKey.substring(a+1,a+2))/8;
+
+            gradients.push(color);
+            defs.push(`<radialGradient id="a-${a}" cx="0" cy="0" r="0.75" fx="0.35" fy="0.5" spreadMethod="reflect"><stop offset="0%" stop-color="${gradients[gradients.length-1]}"/><stop offset="100%" stop-color="${gradients[gradients.length]}"/></radialGradient>`);
+            particles.push(`<path d="${blob}" stroke="url(#a-${a})" stroke-width="${width}" stroke-opacity = "${opacity}" fill="transparent"/>`);
+
+        }
+
+        let ph = "";
+        let off = 4 + Number("0x"+pubKey.substring(0,1));
+        let rotate = 0;
+        for (var i = 0; i < off; i++){
+            ph = ph + `<use xlink:href="#pattern-${pubKey}" mask="url(#mask)" class="segment" style="transform-origin:center center;transform: scaleY(1) rotate(${rotate}deg)"></use>,` + "\n";
+            rotate = rotate + 360/off;
+        }
+
+        var svg = [
+            '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" preserveAspectRatio="xMidYMid slice" viewBox="0 0 512 512">',
+            '<defs>',
+            '<radialGradient id="e" cx="0" cy="0" r="0.75" fx="0.35" fy="0.5" spreadMethod="reflect">',
+            '<stop offset="0%" stop-color="red"/>',
+            '<stop offset="100%" stop-color="blue"/>',
+            '</radialGradient>',defs.join('\n'),
+            '</defs>',
+            '<symbol id="pattern-' + pubKey + '">',
+            particles.join(''),
+            '</symbol>',
+            '<g style="transform-origin:center center; transform: rotate(' + pubKey + 'deg)">',
+            ph,
+            '</g>',
+            '</svg>',
+        ].join('');
+        return raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg);
+    };
+
+})();

src/images/profile-icon.svg

@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="18" cy="18" r="18" fill="#E1E1F7"/>
+<rect x="6" y="6" width="24" height="24" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_21_1525" transform="scale(0.0125)"/>
+</pattern>
+<image id="image0_21_1525" width="80" height="80" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

src/pages/Dashboard.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
@@ -19,7 +19,9 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10';
 import DashboardCard11 from '../partials/dashboard/DashboardCard11';
 
 function Dashboard() {
-
+  useEffect(() => {
+    localStorage.setItem('svgKey', '')
+  }, [])
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (

src/pages/Onboarding1.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import OnboardingImage from '../images/onboarding-image.jpg';
+import OnboardingDecoration from '../images/auth-decoration.png';
+import Logo from "../images/logo.png";
+
+function Onboarding1() {
+  return (
+    <main className="bg-white">
+
+      <div className="relative flex">
+
+        {/* Content */}
+        <div className="w-full md:w-1/2">
+
+          <div className="min-h-screen h-full flex flex-col after:flex-1">
+
+            <div className="flex-1">
+
+              {/* Header */}
+              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                {/* Logo */}
+                <Link className="block" to="/">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
+                </Link>
+                <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>
+
+              {/* Progress bar */}
+              <div className="px-4 pt-12 pb-8">
+                <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>
+                      </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>
+                      </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-3">3</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-4">4</Link>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <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>
+                {/* Form */}
+                <form>
+                  <div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
+                    <label className="flex-1 relative block cursor-pointer">
+                      <input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
+                      <div className="h-full text-center bg-white px-4 py-6 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
+                        <svg className="inline-flex w-10 h-10 shrink-0 fill-current mb-2" viewBox="0 0 40 40">
+                          <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="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>
+                    </label>
+                    <label className="flex-1 relative block cursor-pointer">
+                      <input type="radio" name="radio-buttons" className="peer sr-only" />
+                      <div className="h-full text-center bg-white px-4 py-6 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
+                        <svg className="inline-flex w-10 h-10 shrink-0 fill-current mb-2" viewBox="0 0 40 40">
+                          <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" />
+                          <circle className="text-indigo-100" cx="20" cy="20" r="20" />
+                          <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="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>
+                    </label>
+                  </div>
+                  <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>
+                    <div className="flex items-center">
+                      <div className="form-switch">
+                        <input type="checkbox" id="switch" className="sr-only" defaultChecked />
+                        <label className="bg-slate-400" htmlFor="switch">
+                          <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                          <span className="sr-only">Switch label</span>
+                        </label>
+                      </div>
+                    </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>
+                  </div>
+                </form>
+
+              </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={OnboardingImage} width="760" height="1024" alt="Onboarding" />
+          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={OnboardingDecoration} width="218" height="224" alt="Authentication decoration" />
+        </div>
+
+      </div>
+
+    </main>
+  );
+}
+
+export default Onboarding1;

src/pages/Onboarding2.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import OnboardingImage from '../images/onboarding-image.jpg';
+import OnboardingDecoration from '../images/auth-decoration.png';
+import Logo from "../images/logo.png";
+
+function Onboarding2() {
+  return (
+    <main className="bg-white">
+
+      <div className="relative flex">
+
+        {/* Content */}
+        <div className="w-full md:w-1/2">
+
+          <div className="min-h-screen h-full flex flex-col after:flex-1">
+
+            <div className="flex-1">
+
+              {/* Header */}
+              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                {/* Logo */}
+                <Link className="block" to="/">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
+                </Link>
+                <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>
+
+              {/* Progress bar */}
+              <div className="px-4 pt-12 pb-8">
+                <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>
+                      </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>
+                      </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-3">3</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-4">4</Link>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="px-4 py-8">
+              <div className="max-w-sm 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>
+                      <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">Gender <span className="text-rose-500">*</span></label>
+                      <select id="role" className="form-select w-full">
+                        <option>male</option>
+                        <option>feemale</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium mb-1" htmlFor="password">Date of birth <span className="text-rose-500">*</span></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="/onboarding-3">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>
+
+        </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={OnboardingImage} width="760" height="1024" alt="Onboarding" />
+          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={OnboardingDecoration} width="218" height="224" alt="Authentication decoration" />
+        </div>
+
+      </div>
+
+    </main>
+  );
+}
+
+export default Onboarding2;

src/pages/Onboarding3.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import Logo from "../images/logo.png";
+
+function Onboarding3() {
+  const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
+  return (
+    <main className="bg-white">
+
+      <div className="relative flex">
+
+        {/* Content */}
+        <div className="w-full md:w-1/2">
+
+          <div className="min-h-screen h-full flex flex-col after:flex-1">
+
+            <div className="flex-1">
+
+              {/* Header */}
+              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                {/* Logo */}
+                <Link className="block" to="/">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
+                </Link>
+                <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>
+
+              {/* Progress bar */}
+              <div className="px-4 pt-12 pb-8">
+                <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>
+                      </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>
+                      </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-3">3</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-4">4</Link>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="px-4 mt-20 py-8">
+              <div className="max-w-fit mx-auto flex flex-col gap-y-36">
+
+                <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">
+                    {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">
+                    <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
+                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
+                      </svg>
+                      <span className="ml-2">Paste</span>
+                    </button>
+                    <button className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
+                      <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
+                        <path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
+                      </svg>
+                      <span className="ml-2">Generate</span>
+                    </button>
+                  </div>
+                </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>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        {/* Image */}
+        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+          <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">Your generated Digital ID</span>
+          </div>
+        </div>
+
+      </div>
+
+    </main>
+  );
+}
+
+export default Onboarding3;

src/pages/Onboarding4.jsx

@@ -0,0 +1,102 @@
+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() {
+  return (
+    <main className="bg-white">
+
+      <div className="relative flex">
+
+        {/* Content */}
+        <div className="w-full md:w-1/2">
+
+          <div className="min-h-screen h-full flex flex-col after:flex-1">
+
+            <div className="flex-1">
+
+              {/* Header */}
+              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                {/* Logo */}
+                <Link className="block" to="/">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
+                </Link>
+                <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>
+
+              {/* Progress bar */}
+              <div className="px-4 pt-12 pb-8">
+                <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>
+                      </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>
+                      </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-3">3</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-4">4</Link>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="px-4 mt-40 py-8">
+              <div className=" flex flex-col items-center gap-20 max-w-md mx-auto">
+
+                <div className="text-center">
+                  <svg className="inline-flex w-16 h-16 fill-current mb-6" viewBox="0 0 64 64">
+                    <circle className="text-emerald-100" cx="32" cy="32" r="32" />
+                    <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="/settings/account">Go To Profile -&gt;</Link>
+                </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">I understand that Idntty cannot recover pass phrase</span>
+                    </label>
+                    <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
+                      </div>
+                    </label>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        {/* Image */}
+        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+          <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">Your generated Digital ID</span>
+          </div>
+        </div>
+
+      </div>
+
+    </main>
+  );
+}
+
+export default Onboarding4;

src/pages/Signin.jsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 
 function Signin() {
+  useEffect(() => {
+    localStorage.setItem('svgKey', '')
+  }, [])
   return (
     <main className="bg-white">
 

src/pages/digitalId/ProfileId.jsx

@@ -2,31 +2,57 @@ import React, { useState } from 'react';
 
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';
+import Avatar01 from '../../images/avatar-01.jpg';
+import Avatar02 from '../../images/avatar-02.jpg';
+import Avatar03 from '../../images/avatar-03.jpg';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  const data = {
+      id: '0',
+      image: ProfileIcon,
+      value: 'Passport',
+      property: 'Document type',
+      status: 'Progress',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    };
+
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
         <main>
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-
             {/* Page header */}
             <div className="mb-8">
               {/* Title */}
               <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
             </div>
+             {/* Table */}
+             <table className="w-[828px]">
+                <tbody className="text-sm">
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                  />
+                </tbody>
+              </table>
           </div>
         </main>
-
       </div>
     </div>
   )

src/pages/digitalId/Validate.jsx

@@ -10,15 +10,12 @@ function Validate () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
         <main>
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-
             {/* Page header */}
             <div className="mb-8">
               {/* Title */}
@@ -26,8 +23,6 @@ function Validate () {
             </div>
           </div>
         </main>
-
-      </div>
       </div>
   )
 }

src/pages/digitalId/ValidationLog.jsx

@@ -10,15 +10,12 @@ function ValidationLog () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
         <main>
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-
             {/* Page header */}
             <div className="mb-8">
               {/* Title */}
@@ -26,8 +23,6 @@ function ValidationLog () {
             </div>
           </div>
         </main>
-
-      </div>
       </div>
   )
 }

src/pages/digitalId/Verify.jsx

@@ -10,15 +10,12 @@ function Verify () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
         <main>
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-
             {/* Page header */}
             <div className="mb-8">
               {/* Title */}
@@ -26,7 +23,6 @@ function Verify () {
             </div>
           </div>
         </main>
-
       </div>
     </div>
   )

src/pages/settings/Account.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
@@ -6,7 +6,9 @@ import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import AccountPanel from '../../partials/settings/AccountPanel';
 
 function Account() {
-
+  useEffect(() => {
+    localStorage.setItem('svgKey', '')
+  }, [])
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (

src/partials/Sidebar.jsx

@@ -14,7 +14,6 @@ function Sidebar({
 
   const trigger = useRef(null);
   const sidebar = useRef(null);
-
   const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
   const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true');
 
@@ -1433,6 +1432,34 @@ function Sidebar({
                               </span>
                             </NavLink>
                           </li>
+                          <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>
                         </ul>
                       </div>
                     </React.Fragment>

src/partials/digitalId/ProfileTableItem.jsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+
+function ProfileTableItem(props) {
+  const [descriptionOpen, setDescriptionOpen] = useState(false);
+
+  return (
+    <>
+      <tr className="bg-[#eaf0f6]">
+        <td className="pl-4 pr-4 py-3 whitespace-nowrap w-px">
+          <div className="flex items-center">
+            <label className="inline-flex">
+              <span className="sr-only">Select</span>
+              <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+            </label>
+          </div>
+        </td>
+        <td className="py-3 whitespace-nowrap">
+          <div className="flex">
+            <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
+              <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
+            </div>
+            <div className="flex flex-col w-60"> 
+              <div className="font-semibold text-slate-800 text-base">{props.value}</div>
+              <div className="font-normal text-xxs">{props.property}</div>
+            </div>
+          </div>
+        </td>
+        <td className="py-3 whitespace-nowrap w-px">
+          <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
+            {(props.status === 'Progress') ? (
+                <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>) : 
+              (props.status === 'Stored') ? (
+                <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>) :
+              (props.status === 'Completed') ? (
+                <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>) : (
+                <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>)
+            }
+          </div>
+        </td>
+        <td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
+          <div className="flex flex-wrap items-center -m-1.5 justify-center">
+            <div className="flex -space-x-3 -ml-0.5">
+              {(props.avatars) ? (
+                props.avatars.map((avatar, index) => (
+                  <img className="rounded-full border-2 border-slate-100 box-content" key={index} src={avatar} width="32" height="32" alt="Avatar" />
+                ))
+              ): null}
+              <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
+                  <span className="sr-only">Add avatar</span>
+                  <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                    <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+                  </svg>
+              </button>
+            </div>
+          </div>
+        </td>
+        <td className="px-1 py-3 whitespace-nowrap w-px">
+          {/* Button */}
+          <div className="flex items-center">
+            <button className="text-slate-400 hover:text-slate-500 rounded-full">
+              <span className="sr-only">Link</span>
+              <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
+                <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
+              </svg>
+            </button>
+          </div>
+        </td>
+        <td className="py-3 whitespace-nowrap w-px pr-1.5">
+            <div className="flex items-center">
+              <button
+                className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+                aria-expanded={descriptionOpen}
+                onClick={() => setDescriptionOpen(!descriptionOpen)}
+                aria-controls={`description-${props.id}`}
+              >
+                <span className="sr-only">Show more</span>
+                <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                  <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+                </svg>
+              </button>
+            </div>
+          </td>
+      </tr>
+      <tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }>
+        <td colSpan="10" className="px-12 py-3.5">
+          <div className="flex items-center gap-x-5">
+            <div>
+              <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
+              <input id="placeholder" className="form-input w-[396px] bg-white" type="text" placeholder="2342423423423234223" />
+            </div>
+            <div>
+              <span className="block text-sm font-medium mb-1">Transaction</span>
+              <a href="" className="w-[396px] text-slate-400 font-normal text-sm underline">0x12831823791203192418234841238468</a>
+            </div>
+          </div>
+          {/* Progress validation bar */}
+          <div className="pt-[18px] pb-8">
+            <div className="h-full max-w-md w-full flex flex-row">
+              <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">Today</h2>
+              </div>
+              <div>
+                <ul className="-my-2">
+                  {/* List item */}
+                  {props.transactions.map((data, index) => (
+                    <li className="relative py-2" key={index}>
+                      <div className="flex items-center mb-2.5">
+                        {(props.transactions[index+1]) ? (
+                          <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>
+                        ) : null}
+                        <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                          <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                            <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+                          </svg>
+                        </div>
+                        <h3 className="pl-9 whitespace-nowrap">
+                          <span className="text-validateLg font-bold text-slate-800">Validate by </span>
+                          <a href="" className="font-bold text-validateLg underline text-indigo-500">{data}</a>
+                        </h3>
+                      </div>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data}</a>
+                        <span className="block text-xxs font-normal mb-1">Transactions ID</span>
+                      </div>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data.slice(2, data.length)}</a>
+                        <span className="block text-xxs font-normal mb-1">Validated data</span>
+                      </div>
+                      <div className="pl-9 pt-[14px]">
+                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                          Explore -&gt;
+                        </a>
+                      </div>
+                    </li>     
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </td>
+       </tr>
+   </>
+  );
+}
+
+export default ProfileTableItem;