fix field on sidepanel

fix paddings
Merge pull request #11 from franze6/Shared_data_
2022-06-01 17:18:22 +03:00 · 2022-06-01 16:51:32 +03:00 · 2022-06-01 14:45:05 +03:00 · 2022-06-01 10:27:49 +03:00 · 2022-06-01 07:25:39 +03:00 · 2022-06-01 07:25:39 +03:00
162 changed files with 1974 additions and 23092 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -17,68 +17,18 @@ import ProfileId from './pages/digitalId/ProfileId';
 import Validate from './pages/digitalId/Validate';
 import ValidationLog from './pages/digitalId/ValidationLog';
 import Verify from './pages/digitalId/Verify';
 import Customers from './pages/ecommerce/Customers';
 import Orders from './pages/ecommerce/Orders';
 import Invoices from './pages/ecommerce/Invoices';
 import Shop from './pages/ecommerce/Shop';
 import Shop2 from './pages/ecommerce/Shop2';
 import Product from './pages/ecommerce/Product';
 import Cart from './pages/ecommerce/Cart';
 import Cart2 from './pages/ecommerce/Cart2';
 import Cart3 from './pages/ecommerce/Cart3';
 import Pay from './pages/ecommerce/Pay';
 import Campaigns from './pages/Campaigns';
 import UsersTabs from './pages/community/UsersTabs';
 import UsersTiles from './pages/community/UsersTiles';
 import Profile from './pages/community/Profile';
 import Feed from './pages/community/Feed';
 import Forum from './pages/community/Forum';
 import ForumPost from './pages/community/ForumPost';
 import Meetups from './pages/community/Meetups';
 import MeetupsPost from './pages/community/MeetupsPost';
 import CreditCards from './pages/finance/CreditCards';
 import Transactions from './pages/finance/Transactions';
 import TransactionDetails from './pages/finance/TransactionDetails';
 import JobListing from './pages/job/JobListing';
 import JobPost from './pages/job/JobPost';
 import CompanyProfile from './pages/job/CompanyProfile';
 import Messages from './pages/Messages';
 import TasksKanban from './pages/tasks/TasksKanban';
 import TasksList from './pages/tasks/TasksList';
 import Inbox from './pages/Inbox';
 import Calendar from './pages/Calendar';
 import Account from './pages/settings/Account';
 import Notifications from './pages/settings/Notifications';
 import Apps from './pages/settings/Apps';
 import Plans from './pages/settings/Plans';
 import Billing from './pages/settings/Billing';
 import Feedback from './pages/settings/Feedback';
 import Changelog from './pages/utility/Changelog';
 import Roadmap from './pages/utility/Roadmap';
 import Faqs from './pages/utility/Faqs';
 import EmptyState from './pages/utility/EmptyState';
 import PageNotFound from './pages/utility/PageNotFound';
 import KnowledgeBase from './pages/utility/KnowledgeBase';
 import Signin from './pages/Signin';
 import Signup from './pages/Signup';
 import ResetPassword from './pages/ResetPassword';
 import Onboarding01 from './pages/Onboarding01';
 import Onboarding02 from './pages/Onboarding02';
 import Onboarding03 from './pages/Onboarding03';
 import Onboarding04 from './pages/Onboarding04';
 import ButtonPage from './pages/component/ButtonPage';
 import FormPage from './pages/component/FormPage';
 import DropdownPage from './pages/component/DropdownPage';
 import AlertPage from './pages/component/AlertPage';
 import ModalPage from './pages/component/ModalPage';
 import PaginationPage from './pages/component/PaginationPage';
 import TabsPage from './pages/component/TabsPage';
 import BreadcrumbPage from './pages/component/BreadcrumbPage';
 import BadgePage from './pages/component/BadgePage';
 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";
 import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
 import Signup from "./pages/Signup";
 import Signin from "./pages/Signin";
 function App() {
@@ -100,69 +50,18 @@ function App() {
        <Route path="/digitalId/validate" element={<Validate />} />
        <Route path="/digitalId/validation-log" element={<ValidationLog />} />
        <Route path="/digitalId/verify" element={<Verify />} />
        <Route path="/ecommerce/customers" element={<Customers />} />
        <Route path="/ecommerce/orders" element={<Orders />} />
        <Route path="/ecommerce/invoices" element={<Invoices />} />
        <Route path="/ecommerce/shop" element={<Shop />} />
        <Route path="/ecommerce/shop-2" element={<Shop2 />} />
        <Route path="/ecommerce/product" element={<Product />} />
        <Route path="/ecommerce/cart" element={<Cart />} />
        <Route path="/ecommerce/cart-2" element={<Cart2 />} />
        <Route path="/ecommerce/cart-3" element={<Cart3 />} />
        <Route path="/ecommerce/pay" element={<Pay />} />
        <Route path="/campaigns" element={<Campaigns />} />
        <Route path="/community/users-tabs" element={<UsersTabs />} />
        <Route path="/community/users-tiles" element={<UsersTiles />} />
        <Route path="/community/profile" element={<Profile />} />
        <Route path="/community/feed" element={<Feed />} />
        <Route path="/community/forum" element={<Forum />} />
        <Route path="/community/forum-post" element={<ForumPost />} />
        <Route path="/community/meetups" element={<Meetups />} />
        <Route path="/community/meetups-post" element={<MeetupsPost />} />
        <Route path="/finance/cards" element={<CreditCards />} />
        <Route path="/finance/transactions" element={<Transactions />} />
        <Route path="/finance/transaction-details" element={<TransactionDetails />} />
        <Route path="/job/job-listing" element={<JobListing />} />
        <Route path="/job/job-post" element={<JobPost />} />
        <Route path="/job/company-profile" element={<CompanyProfile />} />
        <Route path="/messages" element={<Messages />} />
-        <Route path="/tasks/kanban" element={<TasksKanban />} />
+        <Route path="/onboarding-1" element={<Onboarding1 />} />
-        <Route path="/tasks/list" element={<TasksList />} />
+        <Route path="/onboarding-2" element={<Onboarding2 />} />
-        <Route path="/inbox" element={<Inbox />} />
+        <Route path="/onboarding-3" element={<Onboarding3 />} />
-        <Route path="/calendar" element={<Calendar />} />
+        <Route path="/onboarding-4" element={<Onboarding4 />} />
-        <Route path="/settings/account" element={<Account />} />
+        <Route path="/component/button" element={<ButtonPage />} />
-        <Route path="/settings/notifications" element={<Notifications />} />
+        <Route path="/shared-data" element={<SharedData />} />
-        <Route path="/settings/apps" element={<Apps />} />
+        <Route path="/component/badge" element={<BadgePage />} />
-        <Route path="/settings/plans" element={<Plans />} />
+        <Route path="/component/accordion" element={<AccordionPage />} />
-        <Route path="/settings/billing" element={<Billing />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
        <Route path="/settings/feedback" element={<Feedback />} />
        <Route path="/utility/changelog" element={<Changelog />} />
        <Route path="/utility/roadmap" element={<Roadmap />} />
        <Route path="/utility/faqs" element={<Faqs />} />
        <Route path="/utility/empty-state" element={<EmptyState />} />
        <Route path="/utility/404" element={<PageNotFound />} />
        <Route path="/utility/knowledge-base" element={<KnowledgeBase />} />
        <Route path="/signin" element={<Signin />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/reset-password" element={<ResetPassword />} />
        <Route path="/onboarding-01" element={<Onboarding01 />} />
        <Route path="/onboarding-02" element={<Onboarding02 />} />
        <Route path="/onboarding-03" element={<Onboarding03 />} />
        <Route path="/onboarding-04" element={<Onboarding04 />} />
        <Route path="/component/button" element={<ButtonPage />} />
        <Route path="/component/form" element={<FormPage />} />
        <Route path="/component/dropdown" element={<DropdownPage />} />
        <Route path="/component/alert" element={<AlertPage />} />
        <Route path="/component/modal" element={<ModalPage />} />
        <Route path="/component/pagination" element={<PaginationPage />} />
        <Route path="/component/tabs" element={<TabsPage />} />
        <Route path="/component/breadcrumb" element={<BreadcrumbPage />} />
        <Route path="/component/badge" element={<BadgePage />} />
        <Route path="/component/avatar" element={<AvatarPage />} />
        <Route path="/component/tooltip" element={<TooltipPage />} />
        <Route path="/component/accordion" element={<AccordionPage />} />
        <Route path="/component/icons" element={<IconsPage />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>
  );
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -1,79 +0,0 @@
 import React from 'react';
 function Banner({
  children,
  className,
  type,
  open,
  setOpen
 }) {
  const typeIcon = (type) => {
    switch (type) {
      case 'warning':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
          </svg>
        );
      case 'error':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
          </svg>
        );
      case 'success':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
          </svg>
        );
      default:
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
          </svg>
        );
    }
  };
  const typeColor = (type) => {
    switch (type) {
      case 'warning':
        return 'bg-amber-500';
      case 'error':
        return 'bg-rose-500';
      case 'success':
        return 'bg-emerald-500';
      default:
        return 'bg-indigo-500';
    }
  };
  return (
    <>
      {open &&
        <div className={className}>
          <div className={`px-4 py-2 rounded-sm text-sm text-white ${typeColor(type)}`}>
            <div className="flex w-full justify-between items-start">
              <div className="flex">
                {typeIcon(type)}
                <div className="font-medium">
                {children}
                </div>
              </div>
              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      }
    </>
  );
 }
 export default Banner;
--- a/src/components/Banner2.jsx
+++ b/src/components/Banner2.jsx
@@ -1,79 +0,0 @@
 import React from 'react';
 function Banner2({
  children,
  className,
  type,
  open,
  setOpen
 }) {
  const typeIcon = (type) => {
    switch (type) {
      case 'warning':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
          </svg>
        );
      case 'error':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
          </svg>
        );
      case 'success':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
          </svg>
        );
      default:
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
          </svg>
        );
    }
  };
  const typeColor = (type) => {
    switch (type) {
      case 'warning':
        return 'bg-amber-100 border-amber-200 text-amber-600';
      case 'error':
        return 'bg-rose-100 border-rose-200 text-rose-600';
      case 'success':
        return 'bg-emerald-100 border-emerald-200 text-emerald-600';
      default:
        return 'bg-indigo-100 border-indigo-200 text-indigo-500';
    }
  };
  return (
    <>
      {open &&
        <div className={className}>
          <div className={`px-4 py-2 rounded-sm text-sm border ${typeColor(type)}`}>
            <div className="flex w-full justify-between items-start">
              <div className="flex">
                {typeIcon(type)}
                <div>
                {children}
                </div>
              </div>
              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      }
    </>
  );
 }
 export default Banner2;
--- a/src/components/DateSelect.jsx
+++ b/src/components/DateSelect.jsx
@@ -1,116 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DateSelect() {
  const options = [
    {
      id: 0,
      period: 'Today'
    },
    {
      id: 1,
      period: 'Last 7 Days'
    },
    {
      id: 2,
      period: 'Last Month'
    },
    {
      id: 3,
      period: 'Last 12 Months'
    },
    {
      id: 4,
      period: 'All Time'
    }
  ];
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [selected, setSelected] = useState(2);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative">
      <button
        ref={trigger}
        className="btn justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
        aria-label="Select date range"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="flex items-center">
          <svg className="w-4 h-4 fill-current text-slate-500 shrink-0 mr-2" viewBox="0 0 16 16">
            <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
          </svg>
          <span>{options[selected].period}</span>
        </span>
        <svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
          <path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
        </svg>
      </button>
      <Transition
        show={dropdownOpen}
        tag="div"
        className="z-10 absolute top-full right-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
        enter="transition ease-out duration-100 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div
          ref={dropdown}
          className="font-medium text-sm text-slate-600"
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          {
            options.map(option => {
              return (
                <button
                  key={option.id}
                  tabIndex="0"
                  className={`flex items-center w-full hover:bg-slate-50 py-1 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
                  onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
                >
                  <svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
                    <path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
                  </svg>
                  <span>{option.period}</span>
                </button>
              )
            })
          }
        </div>
      </Transition>
    </div>
  );
 }
 export default DateSelect;
--- a/src/components/DropdownClassic.jsx
+++ b/src/components/DropdownClassic.jsx
@@ -1,113 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DropdownClassic() {
  const options = [
    {
      id: 0,
      period: 'Today'
    },
    {
      id: 1,
      period: 'Last 7 Days'
    },
    {
      id: 2,
      period: 'Last Month'
    },
    {
      id: 3,
      period: 'Last 12 Months'
    },
    {
      id: 4,
      period: 'All Time'
    }
  ];
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [selected, setSelected] = useState(2);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex">
      <button
        ref={trigger}
        className="btn justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
        aria-label="Select date range"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="flex items-center">
          <span>{options[selected].period}</span>
        </span>
        <svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
          <path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
        </svg>
      </button>
      <Transition
        show={dropdownOpen}
        tag="div"
        className="z-10 absolute top-full left-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
        enter="transition ease-out duration-100 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div
          ref={dropdown}
          className="font-medium text-sm text-slate-600"
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          {
            options.map(option => {
              return (
                <button
                  key={option.id}
                  tabIndex="0"
                  className={`flex items-center w-full hover:bg-slate-50 py-1 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
                  onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
                >
                  <svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
                    <path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
                  </svg>
                  <span>{option.period}</span>
                </button>
              )
            })
          }
        </div>
      </Transition>
    </div>
  );
 }
 export default DropdownClassic;
--- a/src/components/DropdownFull.jsx
+++ b/src/components/DropdownFull.jsx
@@ -1,109 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DropdownFull() {
  const options = [
    {
      id: 0,
      period: 'Most Popular'
    },
    {
      id: 1,
      period: 'Newest'
    },
    {
      id: 2,
      period: 'Lowest Price'
    },
    {
      id: 3,
      period: 'Highest Price'
    }
  ];
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [selected, setSelected] = useState(0);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex w-full">
      <button
        ref={trigger}
        className="btn w-full justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
        aria-label="Select date range"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="flex items-center">
          <span>{options[selected].period}</span>
        </span>
        <svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
          <path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
        </svg>
      </button>
      <Transition
        show={dropdownOpen}
        tag="div"
        className="z-10 absolute top-full left-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
        enter="transition ease-out duration-100 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div
          ref={dropdown}
          className="font-medium text-sm text-slate-600 divide-y divide-slate-200"
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          {
            options.map(option => {
              return (
                <button
                  key={option.id}
                  tabIndex="0"
                  className={`flex items-center justify-between w-full hover:bg-slate-50 py-2 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
                  onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
                  >
                  <span>{option.period}</span>
                  <svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
                    <path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
                  </svg>
                </button>
              )
            })
          }
        </div>
      </Transition>
    </div>
  );
 }
 export default DropdownFull;
--- a/src/components/DropdownProfile.jsx
+++ b/src/components/DropdownProfile.jsx
@@ -43,7 +43,7 @@ function DropdownProfile({
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
-        <img className="w-8 h-8 rounded-full" src={UserAvatar} width="32" height="32" alt="User" />
+        <img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
        <div className="flex items-center truncate">
          <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
@@ -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="/settings"
+                to="/"
                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="/signin"
+                to="/"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                Sign Out
--- a/src/components/DropdownSort.jsx
+++ b/src/components/DropdownSort.jsx
@@ -1,90 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DropdownSort({
  align
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex">
      <button
        ref={trigger}
        className="inline-flex justify-center items-center group"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <div className="flex items-center truncate">
          <span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">Newest</span>
          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
          </svg>
        </div>
      </button>
      <Transition
        className={`origin-top-right z-10 absolute top-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
          align === 'right' ? 'right-0' : 'left-0'
        }`}
        show={dropdownOpen}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div ref={dropdown} onFocus={() => setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
          <ul>
            <li>
              <a
                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
                href="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                Oldest
              </a>
            </li>
            <li>
              <a
                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
                href="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                Popular
              </a>
            </li>
          </ul>
        </div>
      </Transition>
    </div>
  );
 }
 export default DropdownSort;
--- a/src/components/DropdownSwitch.jsx
+++ b/src/components/DropdownSwitch.jsx
@@ -1,110 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 import DropdownImage from '../images/user-avatar-32.png';
 import DropdownImage01 from '../images/channel-01.png';
 import DropdownImage02 from '../images/channel-02.png';
 import DropdownImage03 from '../images/channel-03.png';
 function DropdownSwitch({
  align
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative">
      <button
        ref={trigger}
        className="grow flex items-center truncate"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <img className="w-8 h-8 rounded-full mr-2" src={DropdownImage} width="32" height="32" alt="Group 01" />
        <div className="truncate">
          <span className="text-sm font-medium">Acme Inc.</span>
        </div>
        <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
          <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
        </svg>
      </button>
      <Transition
        className={`origin-top-right z-10 absolute top-full min-w-60 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
        show={dropdownOpen}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <ul
          ref={dropdown}
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          <li>
            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
              <div className="flex items-center justify-between">
                <div className="grow flex items-center truncate">
                  <img className="w-7 h-7 rounded-full mr-2" src={DropdownImage01} width="28" height="28" alt="Channel 01" />
                  <div className="truncate">Acme Inc.</div>
                </div>
                <svg className="w-3 h-3 shrink-0 fill-current text-indigo-500 ml-1" viewBox="0 0 12 12">
                  <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
                </svg>
              </div>
            </a>
          </li>
          <li>
            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
              <div className="flex items-center justify-between">
                <div className="grow flex items-center truncate">
                  <img className="w-7 h-7 rounded-full mr-2" src={DropdownImage02} width="28" height="28" alt="Channel 02" />
                  <div className="truncate">Acme Limited</div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
              <div className="flex items-center justify-between">
                <div className="grow flex items-center truncate">
                  <img className="w-7 h-7 rounded-full mr-2" src={DropdownImage03} width="28" height="28" alt="Channel 03" />
                  <div className="truncate">Acme Srl</div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </Transition>
    </div>
  )
 }
 export default DropdownSwitch;
--- a/src/components/DropdownTransaction.jsx
+++ b/src/components/DropdownTransaction.jsx
@@ -1,90 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DropdownTransaction({
  align
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex">
      <button
        ref={trigger}
        className="inline-flex justify-center items-center group"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <div className="flex items-center truncate">
          <span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">My Personal Account</span>
          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
          </svg>
        </div>
      </button>
      <Transition
        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
          align === 'right' ? 'right-0' : 'left-0'
        }`}
        show={dropdownOpen}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div ref={dropdown} onFocus={() => setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
          <ul>
            <li>
              <a
                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
                href="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                Business Account
              </a>
            </li>
            <li>
              <a
                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
                href="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                Family Account
              </a>
            </li>
          </ul>
        </div>
      </Transition>
    </div>
  );
 }
 export default DropdownTransaction;
--- a/src/components/ModalAction.jsx
+++ b/src/components/ModalAction.jsx
@@ -1,80 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function ModalAction({
  children,
  id,
  modalOpen,
  setModalOpen
 }) {
  const modalContent = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!modalOpen || modalContent.current.contains(target)) return
      setModalOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!modalOpen || keyCode !== 27) return;
      setModalOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <>
      {/* Modal backdrop */}
      <Transition
        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
        show={modalOpen}
        enter="transition ease-out duration-200"
        enterStart="opacity-0"
        enterEnd="opacity-100"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
        aria-hidden="true"
      />
      {/* Modal dialog */}
      <Transition
        id={id}
        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
        role="dialog"
        aria-modal="true"
        show={modalOpen}
        enter="transition ease-in-out duration-200"
        enterStart="opacity-0 translate-y-4"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-in-out duration-200"
        leaveStart="opacity-100 translate-y-0"
        leaveEnd="opacity-0 translate-y-4"
      >
        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
          <div className="p-6">
            <div className="relative">
              {/* Close button */}
              <button className="absolute top-0 right-0 text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
              {children}
            </div>
          </div>
        </div>
      </Transition>
    </>
  );
 }
 export default ModalAction;
--- a/src/components/ModalBasic.jsx
+++ b/src/components/ModalBasic.jsx
@@ -1,82 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function ModalBasic({
  children,
  id,
  title,
  modalOpen,
  setModalOpen
 }) {
  const modalContent = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!modalOpen || modalContent.current.contains(target)) return
      setModalOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!modalOpen || keyCode !== 27) return;
      setModalOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <>
      {/* Modal backdrop */}
      <Transition
        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
        show={modalOpen}
        enter="transition ease-out duration-200"
        enterStart="opacity-0"
        enterEnd="opacity-100"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
        aria-hidden="true"
      />
      {/* Modal dialog */}
      <Transition
        id={id}
        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
        role="dialog"
        aria-modal="true"
        show={modalOpen}
        enter="transition ease-in-out duration-200"
        enterStart="opacity-0 translate-y-4"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-in-out duration-200"
        leaveStart="opacity-100 translate-y-0"
        leaveEnd="opacity-0 translate-y-4"
      >
        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
          {/* Modal header */}
          <div className="px-5 py-3 border-b border-slate-200">
            <div className="flex justify-between items-center">
              <div className="font-semibold text-slate-800">{title}</div>
              <button className="text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
          </div>
          {children}     
        </div>        
      </Transition>
    </>
  );
 }
 export default ModalBasic;
--- a/src/components/ModalBlank.jsx
+++ b/src/components/ModalBlank.jsx
@@ -1,69 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function ModalBlank({
  children,
  id,
  modalOpen,
  setModalOpen
 }) {
  const modalContent = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!modalOpen || modalContent.current.contains(target)) return
      setModalOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!modalOpen || keyCode !== 27) return;
      setModalOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <>
      {/* Modal backdrop */}
      <Transition
        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
        show={modalOpen}
        enter="transition ease-out duration-200"
        enterStart="opacity-0"
        enterEnd="opacity-100"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
        aria-hidden="true"
      />
      {/* Modal dialog */}
      <Transition
        id={id}
        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
        role="dialog"
        aria-modal="true"
        show={modalOpen}
        enter="transition ease-in-out duration-200"
        enterStart="opacity-0 translate-y-4"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-in-out duration-200"
        leaveStart="opacity-100 translate-y-0"
        leaveEnd="opacity-0 translate-y-4"
      >
        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
          {children}
        </div>
      </Transition>
    </>
  );
 }
 export default ModalBlank;
--- a/src/components/ModalCookies.jsx
+++ b/src/components/ModalCookies.jsx
@@ -1,84 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function ModalCookies({
  children,
  id,
  title,
  modalOpen,
  setModalOpen
 }) {
  const modalContent = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!modalOpen || modalContent.current.contains(target)) return
      setModalOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!modalOpen || keyCode !== 27) return;
      setModalOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <>
      {/* Modal backdrop */}
      <Transition
        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
        show={modalOpen}
        enter="transition ease-out duration-200"
        enterStart="opacity-0"
        enterEnd="opacity-100"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
        aria-hidden="true"
      />
      {/* Modal dialog */}
      <Transition
        id={id}
        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
        role="dialog"
        aria-modal="true"
        show={modalOpen}
        enter="transition ease-in-out duration-200"
        enterStart="opacity-0 translate-y-4"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-in-out duration-200"
        leaveStart="opacity-100 translate-y-0"
        leaveEnd="opacity-0 translate-y-4"
      >
        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
          <div className="p-5">
            {/* Modal header */}
            <div className="mb-2">
              <div className="flex justify-between items-center">
                <div className="text-lg font-semibold text-slate-800">{title}</div>
                <button className="text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
                  <div className="sr-only">Close</div>
                  <svg className="w-4 h-4 fill-current">
                    <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                  </svg>
                </button>
              </div>
            </div>
            {children}
          </div>
        </div>
      </Transition>
    </>
  );
 }
 export default ModalCookies;
--- a/src/components/Notification.jsx
+++ b/src/components/Notification.jsx
@@ -1,69 +0,0 @@
 import React from 'react';
 function Notification({
  children,
  className,
  type,
  open,
  setOpen
 }) {
  const typeIcon = (type) => {
    switch (type) {
      case 'warning':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
          </svg>
        );
      case 'error':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
          </svg>
        );
      case 'success':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
          </svg>
        );
      default:
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
          </svg>
        );
    }
  };
  return (
    <>
      {open &&
        <div className={className}>
          <div className="inline-flex flex-col max-w-lg px-4 py-2 rounded-sm text-sm bg-white shadow-lg border border-slate-200 text-slate-600">
            <div className="flex w-full justify-between items-start">
              <div className="flex">
                {typeIcon(type)}
                <div>
                  {children}
                </div>
              </div>
              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
            <div className="text-right mt-1">
              <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Action -&gt;</a>
            </div>
          </div>
        </div>
      }
    </>
  );
 }
 export default Notification;
--- a/src/components/PaginationClassic.jsx
+++ b/src/components/PaginationClassic.jsx
@@ -1,23 +0,0 @@
 import React from 'react';
 function PaginationClassic() {
  return (
    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <nav className="mb-4 sm:mb-0 sm:order-1" role="navigation" aria-label="Navigation">
        <ul className="flex justify-center">
          <li className="ml-3 first:ml-0">
            <a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;- Previous</a>
          </li>
          <li className="ml-3 first:ml-0">
            <a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0">Next -&gt;</a>
          </li>
        </ul>
      </nav>
      <div className="text-sm text-slate-500 text-center sm:text-left">
        Showing <span className="font-medium text-slate-600">1</span> to <span className="font-medium text-slate-600">10</span> of <span className="font-medium text-slate-600">467</span> results
      </div>
    </div>
  );
 }
 export default PaginationClassic;
--- a/src/components/PaginationNumeric.jsx
+++ b/src/components/PaginationNumeric.jsx
@@ -1,45 +0,0 @@
 import React from 'react';
 function PaginationNumeric() {
  return (
    <div className="flex justify-center">
      <nav className="flex" role="navigation" aria-label="Navigation">
        <div className="mr-2">
          <span className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white border border-slate-200 text-slate-300">
            <span className="sr-only">Previous</span><wbr />
            <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
              <path d="M9.4 13.4l1.4-1.4-4-4 4-4-1.4-1.4L4 8z" />
            </svg>
          </span>
        </div>
        <ul className="inline-flex text-sm font-medium -space-x-px shadow-sm">
          <li>
            <span className="inline-flex items-center justify-center rounded-l leading-5 px-3.5 py-2 bg-white border border-slate-200 text-indigo-500">1</span>
          </li>
          <li>
            <a className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">2</a>
          </li>
          <li>
            <a className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">3</a>
          </li>
          <li>
            <span className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white border border-slate-200 text-slate-400">…</span>
          </li>
          <li>
            <a className="inline-flex items-center justify-center rounded-r leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">9</a>
          </li>
        </ul>
        <div className="ml-2">
          <a href="#0" className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white shadow-sm">
            <span className="sr-only">Next</span><wbr />
            <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
              <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
            </svg>
          </a>
        </div>
      </nav>
    </div>
  );
 }
 export default PaginationNumeric;
--- a/src/components/PaginationNumeric2.jsx
+++ b/src/components/PaginationNumeric2.jsx
@@ -1,37 +0,0 @@
 import React from 'react';
 function PaginationNumeric2() {
  return (
    <div>
      <nav className="flex justify-between" role="navigation" aria-label="Navigation">
        <div className="flex-1 mr-2">
          <a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;-<span className="hidden sm:inline">&nbsp;Previous</span></a>
        </div>
        <div className="grow text-center">
          <ul className="inline-flex text-sm font-medium -space-x-px">
            <li>
              <span className="inline-flex items-center justify-center rounded-full leading-5 px-2 py-2 bg-white border border-slate-200 text-indigo-500 shadow-sm"><span className="w-5">1</span></span>
            </li>
            <li>
              <a className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">2</span></a>
            </li>
            <li>
              <a className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">3</span></a>
            </li>
            <li>
              <span className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-400">…</span>
            </li>
            <li>
              <a className="inline-flex items-center justify-center rounded-r leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">9</span></a>
            </li>
          </ul>
        </div>
        <div className="flex-1 text-right ml-2">
          <a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0"><span className="hidden sm:inline">Next&nbsp;</span>-&gt;</a>
        </div>
      </nav>
    </div>
  );
 }
 export default PaginationNumeric2;
--- a/src/components/Toast.jsx
+++ b/src/components/Toast.jsx
@@ -1,79 +0,0 @@
 import React from 'react';
 function Toast({
  children,
  className,
  type,
  open,
  setOpen
 }) {
  const typeIcon = (type) => {
    switch (type) {
      case 'warning':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
          </svg>
        );
      case 'error':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
          </svg>
        );
      case 'success':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
          </svg>
        );
      default:
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
          </svg>
        );
    }
  };
  const typeColor = (type) => {
    switch (type) {
      case 'warning':
        return 'bg-amber-500';
      case 'error':
        return 'bg-rose-500';
      case 'success':
        return 'bg-emerald-500';
      default:
        return 'bg-indigo-500';
    }
  };
  return (
    <>
      {open &&
        <div className={className}>
        <div className={`inline-flex min-w-80 px-4 py-2 rounded-sm text-sm text-white ${typeColor(type)}`}>
            <div className="flex w-full justify-between items-start">
              <div className="flex">
                {typeIcon(type)}
                <div className="font-medium">
                {children}
                </div>
              </div>
              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      }
    </>
  );
 }
 export default Toast;
--- a/src/components/Toast2.jsx
+++ b/src/components/Toast2.jsx
@@ -1,79 +0,0 @@
 import React from 'react';
 function Toast2({
  children,
  className,
  type,
  open,
  setOpen
 }) {
  const typeIcon = (type) => {
    switch (type) {
      case 'warning':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
          </svg>
        );
      case 'error':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
          </svg>
        );
      case 'success':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
          </svg>
        );
      default:
        return (
          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
          </svg>
        );
    }
  };
  const typeColor = (type) => {
    switch (type) {
      case 'warning':
        return 'bg-amber-100 border-amber-200 text-amber-600';
      case 'error':
        return 'bg-rose-100 border-rose-200 text-rose-600';
      case 'success':
        return 'bg-emerald-100 border-emerald-200 text-emerald-600';
      default:
        return 'bg-indigo-100 border-indigo-200 text-indigo-500';
    }
  };
  return (
    <>
      {open &&
        <div className={className}>
          <div className={`inline-flex min-w-80 px-4 py-2 rounded-sm text-sm border ${typeColor(type)}`}>
            <div className="flex w-full justify-between items-start">
              <div className="flex">
                {typeIcon(type)}
                <div>
                  {children}
                </div>
              </div>
              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      }
    </>
  );
 }
 export default Toast2;
--- a/src/components/Toast3.jsx
+++ b/src/components/Toast3.jsx
@@ -1,66 +0,0 @@
 import React from 'react';
 function Toast3({
  children,
  className,
  type,
  open,
  setOpen
 }) {
  const typeIcon = (type) => {
    switch (type) {
      case 'warning':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
          </svg>
        );
      case 'error':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
          </svg>
        );
      case 'success':
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
          </svg>
        );
      default:
        return (
          <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3" viewBox="0 0 16 16">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
          </svg>
        );
    }
  };
  return (
    <>
      {open &&
        <div className={className}>
          <div className="inline-flex min-w-80 px-4 py-2 rounded-sm text-sm bg-white shadow-lg border border-slate-200 text-slate-600">
            <div className="flex w-full justify-between items-start">
              <div className="flex">
                {typeIcon(type)}
                <div>
                {children}
                </div>
              </div>
              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
                <div className="sr-only">Close</div>
                <svg className="w-4 h-4 fill-current">
                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      }
    </>
  );
 }
 export default Toast3;
--- a/src/css/tailwind.config.js
+++ b/src/css/tailwind.config.js
@@ -20,10 +20,13 @@ module.exports = {
        inter: ['Inter', 'sans-serif'],
      },
      fontSize: {
        descriptionSize: ['0.75rem', { lineHeight: '1.25' }],
        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' }],
        validateSize: ['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' }],
--- a/src/images/GenerateOnboardingSvg/GenerateSvg.js
+++ b/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);
    };
 })();
--- a/src/images/profile-icon.svg
+++ b/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,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAUKADAAQAAAABAAAAUAAAAAAx4ExPAAAHHUlEQVR4Ae1bWYwVRRRlwBGXaBRxRQaMGvDDiAG/lCigjHEDE/VHPox8uGCi4o8mij/G6Iea6JcJ0TCSEDVKYhC3EOPglhgMGoMxKswQBRWXuG8snjNTd7xTr+u9qq7q9/pp3eRQ1bfvPffW7br9+r0eJkzIkiuQK5ArkCuQK5ArkCuQK5ArkCuQK5ArkCvw/6pAT5uWOw1xLgQWAWcCUw3+xrgL2ApsAJ4B/gJccixOLAb6gdnACQB1oTxw6Q45G2k+DewFDnhgGDaXA7acAcU6YB8Qw2Pz1vZ4MjJ7TC32d8yfB24B5gLckbQ5AmBxbgC2ACzOfuA2gNILPAroC8CdeitwDjAdeAt4FyDPjYDmoV3XyYnIWBbBwj0AsNVaCW8nKwEWkFgGvAGwqH8C24BBwJbNUGg9eW4HyMEd2w90jXBHvQ9w0Z8Ac4BQuQcOuk3/wPF5oSSwF54fMX8N4MU5Eqi1vIDsuHjuliklM50EvyFAF/ErHJ8LiLBtufNs0XofHtu/o8eXIDoXvQfoS5DJ4eBYAGwCyPsLMBug2G07qi3Wc9dtBHYDNo/4dXzkfecjk+CKxNlwJw0Y7rcjuMmzNgFPRApu13kmsSGMB7nNSp/hbmQbcwfpViahblseixTpuRv5wVbEI35B48Qga7fxEnNqPUY+cqSWX0G42pAutcj5acuC2FKk/wlG7xlDm8f2b+uxPG7wW0JVsgjELFRMGzO3VDzkSiafgomLOy0ZYyPRSSbGFxiL2pMePnrNQ58oSdXC8qDM+1RV8oMh5uNRUXvytI/+e8Vjpp0f5MZ8aIWpHAZu7nLeD2PkYDin4BnJIdUObMdVlQdz2YlSRJ+2FVuOfCak2Dyj2sB/UxVQkjkmMH6IuXDLxRJfn7YVW47ylGDzaJu2zzcjItviggojy6fn65Exzoc/c43lGUkj1Q78zixKdok5TDoIN3dOaNtq+2kmqyQ7MFUBd5qkTk5asvFk080hY4W2rbaXHCXn8VECj1J97Ro2cWcExg8xF+4hOPH3viKZX6SETuvlQgw5bIPUqXbgDhN1ZlD0MOM+Yy4XS7x1e4qOo0svxbR5tK/3PFUBvzQRZ3pHDjeUHbjLctXtqU+59EcZI5tH+7Z9/iwiHgA+rzDydhODb+5iJBVPTA4Nvj9DwwLyfUhVQm7GYCxXe/roNU90rqlaWD7RTo/OyE0g3Izlak8fveZxR2vzmUcQj7tjVYVxyc0YD0fGSMUTmcZ4d3kfwgUKxluUPxI+GS+2qHzali7iL6PNY9H6HaZqYX5Bvx+Q78SMzl89YkVzkPs+4GWL1Kdte5WPi0eZdHb6McLzKp+SII1TDRdfk8bIDDgzp1iehhxS7UBNLEnO0sqSc+EQTqHxbVuxf9xMbB45X3qsooDvmGyuKZ3Vv47CIZxyxqdtxZZjnzmwebRNbeb8eZ9/osY3YMdFZHU8fPnMRy7Oywpz4Ev5WJ6y8Uv5DcCL95znSnmPOq03HGsMR2jbiv06i8fQ1XvgHz3uMYnfXSLVe43vNxinGn/+aDto5npopudFJDSP9q31vB/Z8S+ruICHAjLlgzJ96HtRgJ9t+iAUKXhs3rYeX2YWwYX4Cm2JSwFpQ9vXR695bP9kx1V8CuvkNuiDwPmLsA/9tC2yJ09Xi+wE30WE2rt4U/G4+Ef0Ve/ApsEDT/q0bSBlvHmVBeTD66qIFOlLDpH9mHBX2eLSi53NI/pajj3Iir/MvALsA6SNQt4/0Fb8yPESUObT2OZhTsyNOdZO+HbvWuADQBbPv2FZAywAQnY6bekzAJBD+LZivgzoBXzamTwLAfLILiUXc2Suqd5Igqq8TIbrCmAHIAv9DPOVgLy8wbS0kOMOgO9ahH8Y873Aq4AtzR6qt8B4JyA82zFn7lxDR+RKRNUL4w65CuCVTy3kvBpgDF0AxgsR/r54HbANEB6ugWtpm8xCpE2AJPAh5lcAPUDVwhiMxZgSfzfm3Hm2NGtznlsKaB6uiWurVHgPkjdw32J+EzCp0ojF5Ix5M8AcWEje45YDWljUQa0wc623ebg23h+TC+8TqwG56k9hfnTyKOGEU+CyFpC8nsD8kHCakf8UpHm4Vq45iTAhPkowSX4qXg/UTZYjIfnEfhNz/S6FuTZrZ+5IEc2zEcoyF0O4xkZeVRbva+CsMW39JsyNOTJX7iAtLFKrdhb7Zjxi4z32w5IJ/QbUuXiyoDkmV+a8UJQlRs2zuIT/mAtfITKZO8c09Z/cZXLmT/i6PSVz33YWHt6+nDLReWb0xFxz/skWdnU6Lbn2IilefFv4ie2jF555NkHIMQMVBQvh6IRtqrxb8tTi+2AbKsy25c6bb8VqpbfMGw9bfXvoxt3XuMp4jbNOre6B8aEzQ65ArkCuQK5ArkCuQK5ArkCuQK5ArkCuQK5ArsB/qgL/AIxZGoBhTSTCAAAAAElFTkSuQmCC"/>
 </defs>
 </svg>
--- a/src/pages/Calendar.jsx
+++ b/src/pages/Calendar.jsx
@@ -1,461 +0,0 @@
 import React, { useState, useEffect } from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 function Calendar() {
  const today = new Date();
  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
  const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [month, setMonth] = useState(today.getMonth());
  // eslint-disable-next-line no-unused-vars
  const [year, setYear] = useState(today.getFullYear());
  const [daysInMonth, setDaysInMonth] = useState([])
  const [startingBlankDays, setStartingBlankDays] = useState([])
  const [endingBlankDays, setEndingBlankDays] = useState([])
  const events = [
    // Previous month
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 8, 3),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 8, 7),
      eventName: '⛱️ Relax for 2 at Marienbad',
      eventColor: 'indigo'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 12, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 12, 11),
      eventName: 'Team Catch-up',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 18, 2),
      eventEnd: '',
      eventName: '✍️ New Project (2)',
      eventColor: 'yellow'
    },
    // Current month
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 1, 11),
      eventName: 'Meeting w/ Patrick Lin',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1, 19),
      eventEnd: '',
      eventName: 'Reservation at La Ginestre',
      eventColor: 'indigo'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 3, 9),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 3, 10),
      eventName: '✍️ New Project',
      eventColor: 'yellow'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 7, 21),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 7, 22),
      eventName: '⚽ 2021 - Semi-final',
      eventColor: 'red'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 9, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 9, 11),
      eventName: 'Meeting w/Carolyn',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 9, 13),
      eventEnd: '',
      eventName: 'Pick up Marta at school',
      eventColor: 'emerald'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 9, 14),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 9, 15),
      eventName: 'Meeting w/ Patrick Lin',
      eventColor: 'emerald'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 9, 19),
      eventEnd: '',
      eventName: 'Reservation at La Ginestre',
      eventColor: 'indigo'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 11, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 11, 11),
      eventName: '⛱️ Relax for 2 at Marienbad',
      eventColor: 'indigo'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 11, 19),
      eventEnd: '',
      eventName: '⚽ 2021 - Semi-final',
      eventColor: 'red'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 14, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 14, 11),
      eventName: 'Team Catch-up',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 21, 2),
      eventEnd: '',
      eventName: 'Pick up Marta at school',
      eventColor: 'emerald'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 21, 3),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 21, 7),
      eventName: '✍️ New Project (2)',
      eventColor: 'yellow'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 22, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 22, 11),
      eventName: 'Team Catch-up',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 22, 19),
      eventEnd: '',
      eventName: '⚽ 2021 - Semi-final',
      eventColor: 'red'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 23, 0),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 23, 23),
      eventName: 'You stay at Meridiana B&B',
      eventColor: 'indigo'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 25, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 25, 11),
      eventName: 'Meeting w/ Kylie Joh',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth(), 29, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 29, 11),
      eventName: 'Call Request ->',
      eventColor: 'sky'
    },
    // Next month
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 2, 3),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 2, 7),
      eventName: '✍️ New Project (2)',
      eventColor: 'yellow'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 14, 10),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 14, 11),
      eventName: 'Team Catch-up',
      eventColor: 'sky'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 25, 2),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 25, 3),
      eventName: 'Pick up Marta at school',
      eventColor: 'emerald'
    },
    {
      eventStart: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 27, 21),
      eventEnd: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 27, 22),
      eventName: '⚽ 2021 - Semi-final',
      eventColor: 'red'
    },
  ];
  const isToday = (date) => {
    const day = new Date(year, month, date);
    return today.toDateString() === day.toDateString() ? true : false;
  }
  const getEvents = (date) => {
    return events.filter(e => new Date(e.eventStart).toDateString() === new Date(year, month, date).toDateString());
  }
  const eventColor = (color) => {
    switch (color) {
      case 'sky':
        return 'text-white bg-sky-500';
      case 'indigo':
        return 'text-white bg-indigo-500';
      case 'yellow':
        return 'text-white bg-amber-500';
      case 'emerald':
        return 'text-white bg-emerald-500';
      case 'red':
        return 'text-white bg-rose-400';
      default:
        return '';
    }
  };
  const getDays = () => {
    const days = new Date(year, month + 1, 0).getDate();
    // starting empty cells (previous month)
    const startingDayOfWeek = new Date(year, month).getDay();
    let startingBlankDaysArray = [];
    for (let i = 1; i <= startingDayOfWeek; i++) {
      startingBlankDaysArray.push(i);
    }
    // ending empty cells (next month)
    const endingDayOfWeek = new Date(year, month + 1, 0).getDay();
    let endingBlankDaysArray = [];
    for (let i = 1; i < 7 - endingDayOfWeek; i++) {
      endingBlankDaysArray.push(i);
    }
    // current month cells
    let daysArray = [];
    for (let i = 1; i <= days; i++) {
      daysArray.push(i);
    }
    setStartingBlankDays(startingBlankDaysArray);
    setEndingBlankDays(endingBlankDaysArray);
    setDaysInMonth(daysArray);
  }
  useEffect(() => {
    getDays();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  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="sm:flex sm:justify-between sm:items-center mb-4">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold"><span>{`${monthNames[month]} ${year}`}</span> ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Previous month button */}
                <button
                  className="btn px-2.5 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed"
                  disabled={month === 0 ? true : false}
                  onClick={() => {setMonth(month - 1);getDays();}}
                >
                  <span className="sr-only">Previous month</span><wbr />
                  <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
                    <path d="M9.4 13.4l1.4-1.4-4-4 4-4-1.4-1.4L4 8z" />
                  </svg>
                </button>
                {/* Next month button */}
                <button
                  className="btn px-2.5 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed"
                  disabled={month === 11 ? true : false}
                  onClick={() => {setMonth(month + 1);getDays();}}
                >
                  <span className="sr-only">Next month</span><wbr />
                  <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
                    <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
                  </svg>
                </button>
                <hr className="w-px h-full bg-slate-200 mx-1" />
                {/* Create event button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Create Event</span>
                </button>
              </div>
            </div>
            {/* Filters and view buttons */}
            <div className="sm:flex sm:justify-between sm:items-center mb-4">
              {/* Filters  */}
              <div className="mb-4 sm:mb-0 mr-2">
                <ul className="flex flex-wrap items-center -m-1">
                  <li className="m-1">
                    <button className="btn-sm bg-white border-slate-200 hover:border-slate-300 text-slate-500">
                      <div className="w-1 h-3.5 bg-sky-500 shrink-0"></div>
                      <span className="ml-1.5">Acme Inc.</span>
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="btn-sm bg-white border-slate-200 hover:border-slate-300 text-slate-500">
                      <div className="w-1 h-3.5 bg-emerald-500 shrink-0"></div>
                      <span className="ml-1.5">Life & Family</span>
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="btn-sm bg-white border-slate-200 hover:border-slate-300 text-slate-500">
                      <div className="w-1 h-3.5 bg-indigo-500 shrink-0"></div>
                      <span className="ml-1.5">Reservations</span>
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="btn-sm bg-white border-slate-200 hover:border-slate-300 text-slate-500">
                      <div className="w-1 h-3.5 bg-rose-400 shrink-0"></div>
                      <span className="ml-1.5">Events</span>
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="btn-sm bg-white border-slate-200 hover:border-slate-300 text-slate-500">
                      <div className="w-1 h-3.5 bg-amber-500 shrink-0"></div>
                      <span className="ml-1.5">Misc</span>
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="btn-sm bg-white border-slate-200 hover:border-slate-300 text-indigo-500">+Add New</button>
                  </li>
                </ul>
              </div>
              {/* View buttons (requires custom integration) */}
              <div className="flex flex-nowrap -space-x-px">
                <button className="btn bg-slate-50 border-slate-200 hover:bg-slate-50 text-indigo-500 rounded-none first:rounded-l last:rounded-r">Month</button>
                <button className="btn bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Week</button>
                <button className="btn bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Day</button>
              </div>
            </div>
            {/* Calendar table */}
            <div className="bg-white rounded-sm shadow overflow-hidden">
              {/* Days of the week */}
              <div className="grid grid-cols-7 gap-px border-b border-slate-200">
                {
                  dayNames.map(day => {      
                    return (          
                      <div className="px-1 py-3" key={day}>
                        <div className="text-slate-500 text-sm font-medium text-center lg:hidden">{day.substring(0,3)}</div>
                        <div className="text-slate-500 text-sm font-medium text-center hidden lg:block">{day}</div>
                      </div>
                    )
                  })
                }                
              </div>
              {/* Day cells */}
              <div className="grid grid-cols-7 gap-px bg-slate-200">
                {/* Diagonal stripes pattern */}
                <svg className="sr-only">
                  <defs>
                    <pattern id="stripes" patternUnits="userSpaceOnUse" width="5" height="5" patternTransform="rotate(135)">
                      <line className="stroke-current text-slate-200 opacity-50" x1="0" y="0" x2="0" y2="5" strokeWidth="2" />
                    </pattern>
                  </defs>
                </svg>
                {/* Empty cells (previous month) */}
                {
                  startingBlankDays.map(blankday => {      
                    return (          
                      <div className="bg-slate-50 h-20 sm:h-28 lg:h-36" key={blankday}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                          <rect width="100%" height="100%" fill="url(#stripes)" />
                        </svg>
                      </div>
                    )
                  })
                }                  
                {/* Days of the current month */}
                {
                  daysInMonth.map(day => {      
                    return ( 
                      <div className="relative bg-white h-20 sm:h-28 lg:h-36 overflow-hidden" key={day}>
                        <div className="h-full flex flex-col justify-between">
                          {/* Events */}
                          <div className="grow flex flex-col relative p-0.5 sm:p-1.5 overflow-hidden">
                            {
                              getEvents(day).map(event => {
                                return (
                                  <button className="relative w-full text-left mb-1" key={event.eventName}>
                                    <div className={`px-2 py-0.5 rounded overflow-hidden ${eventColor(event.eventColor)}`}>
                                      {/* Event name */}
                                      <div className="text-xs font-semibold truncate">{event.eventName}</div>
                                      {/* Event time */}
                                      <div className="text-xs uppercase truncate hidden sm:block">
                                        {/* Start date */}
                                        {event.eventStart &&        
                                          <span>{event.eventStart.toLocaleTimeString([], {hour12: true, hour: 'numeric', minute:'numeric'})}</span>
                                        }
                                        {/* End date */}
                                        {event.eventEnd &&  
                                          <span>
                                            - <span>{event.eventEnd.toLocaleTimeString([], {hour12: true, hour: 'numeric', minute:'numeric'})}</span>
                                          </span>
                                        }
                                      </div>
                                    </div>
                                  </button>                                  
                                )
                              })
                            }                                  
                            <div className="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-white to-transparent pointer-events-none" aria-hidden="true"></div>
                          </div>
                          {/* Cell footer */}
                          <div className="flex justify-between items-center p-0.5 sm:p-1.5">
                            {/* More button (if more than 2 events) */}
                            {getEvents(day).length > 2 &&
                              <button className="text-xs text-slate-500 font-medium whitespace-nowrap text-center sm:py-0.5 px-0.5 sm:px-2 border border-slate-200 rounded">
                                <span className="md:hidden">+</span><span>{getEvents(day).length - 2}</span> <span className="hidden md:inline">more</span>
                              </button>
                            }
                            {/* Day number */}
                            <button className={`inline-flex ml-auto w-6 h-6 items-center justify-center text-xs sm:text-sm font-medium text-center rounded-full hover:bg-indigo-100 ${isToday(day) && 'text-indigo-500'}`}>{day}</button>
                          </div>
                        </div>
                      </div>                      
                    )
                  })
                }                                         
                {/* Empty cells (next month) */}
                {
                  endingBlankDays.map(blankday => {
                    return (
                      <div className="bg-slate-50 h-20 sm:h-28 lg:h-36" key={blankday}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                          <rect width="100%" height="100%" fill="url(#stripes)" />
                        </svg>
                      </div>
                    )
                  })
                }
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Calendar;
--- a/src/pages/Campaigns.jsx
+++ b/src/pages/Campaigns.jsx
@@ -1,423 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 import SearchForm from '../partials/actions/SearchForm';
 import FilterButton from '../components/DropdownFilter';
 import CampaignsCard from '../partials/campaigns/CampaignsCard';
 import PaginationNumeric from '../components/PaginationNumeric';
 import Image01 from '../images/user-28-01.jpg';
 import Image02 from '../images/user-28-02.jpg';
 import Image03 from '../images/user-28-03.jpg';
 import Image04 from '../images/user-28-04.jpg';
 import Image05 from '../images/user-28-05.jpg';
 import Image06 from '../images/user-28-06.jpg';
 import Image07 from '../images/user-28-07.jpg';
 import Image08 from '../images/user-28-08.jpg';
 import Image09 from '../images/user-28-09.jpg';
 import Image10 from '../images/user-28-10.jpg';
 import Image11 from '../images/user-28-11.jpg';
 import Image12 from '../images/user-28-12.jpg';
 function Campaigns() {
  const items = [
    {
      id: 0,
      category: '1',
      members: [
        {
          name: 'User 01',
          image: Image01,
          link: '#0'
        },
        {
          name: 'User 02',
          image: Image02,
          link: '#0'
        },
        {
          name: 'User 03',
          image: Image03,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'One-Time'
    },
    {
      id: 1,
      category: '2',
      members: [
        {
          name: 'User 04',
          image: Image04,
          link: '#0'
        },
        {
          name: 'User 05',
          image: Image05,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'Off-Track'
    },
    {
      id: 3,
      category: '3',
      members: [
        {
          name: 'User 07',
          image: Image07,
          link: '#0'
        },
        {
          name: 'User 08',
          image: Image08,
          link: '#0'
        },
        {
          name: 'User 09',
          image: Image09,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'At Risk'
    },
    {
      id: 4,
      category: '1',
      members: [
        {
          name: 'User 10',
          image: Image10,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'At Risk'
    },
    {
      id: 5,
      category: '4',
      members: [
        {
          name: 'User 11',
          image: Image11,
          link: '#0'
        },
        {
          name: 'User 05',
          image: Image05,
          link: '#0'
        },
        {
          name: 'User 12',
          image: Image12,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'One-Time'
    },
    {
      id: 6,
      category: '2',
      members: [
        {
          name: 'User 07',
          image: Image07,
          link: '#0'
        },
        {
          name: 'User 04',
          image: Image04,
          link: '#0'
        },
        {
          name: 'User 11',
          image: Image11,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'At Risk'
    },
    {
      id: 7,
      category: '4',
      members: [
        {
          name: 'User 01',
          image: Image01,
          link: '#0'
        },
        {
          name: 'User 02',
          image: Image02,
          link: '#0'
        },
        {
          name: 'User 06',
          image: Image06,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'One-Time'
    },
    {
      id: 8,
      category: '1',
      members: [
        {
          name: 'User 09',
          image: Image09,
          link: '#0'
        },
        {
          name: 'User 01',
          image: Image01,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'Off-Track'
    },
    {
      id: 9,
      category: '3',
      members: [
        {
          name: 'User 07',
          image: Image07,
          link: '#0'
        },
        {
          name: 'User 08',
          image: Image08,
          link: '#0'
        },
        {
          name: 'User 09',
          image: Image09,
          link: '#0'
        },
        {
          name: 'User 06',
          image: Image06,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'One-Time'
    },
    {
      id: 10,
      category: '4',
      members: [
        {
          name: 'User 06',
          image: Image06,
          link: '#0'
        },
        {
          name: 'User 11',
          image: Image11,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'Off-Track'
    },
    {
      id: 11,
      category: '2',
      members: [
        {
          name: 'User 05',
          image: Image05,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'Off-Track'
    },
    {
      id: 12,
      category: '3',
      members: [
        {
          name: 'User 07',
          image: Image07,
          link: '#0'
        },
        {
          name: 'User 08',
          image: Image08,
          link: '#0'
        },
        {
          name: 'User 09',
          image: Image09,
          link: '#0'
        },
      ],
      title: 'Monitor progress in Real Time Value',
      link: '#0',
      content: 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.',
      dates: {
        from: 'Jan 20',
        to: 'Jan 27'
      },
      type: 'At Risk'
    },
  ];
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Campaigns ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Search form */}
                <SearchForm />
                {/* Filter button */}
                <FilterButton align="right" />
                {/* Create campaign button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Create Campaign</span>
                </button>
              </div>
            </div>
            {/* Cards */} 
            <div className="grid grid-cols-12 gap-6">
              {
                items.map(item => {
                  return (
                    <CampaignsCard
                      key={item.id}
                      id={item.id}
                      category={item.category}
                      members={item.members}
                      title={item.title}
                      link={item.link}
                      content={item.content}
                      dates={item.dates}
                      type={item.type}
                    />
                  )
                })
              }
            </div>
            {/* Pagination */}
            <div className="mt-8">
              <PaginationNumeric />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Campaigns;
--- a/src/pages/Dashboard.jsx
+++ b/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 (
--- a/src/pages/Inbox.jsx
+++ b/src/pages/Inbox.jsx
@@ -1,43 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 import InboxSidebar from '../partials/inbox/InboxSidebar';
 import InboxBody from '../partials/inbox/InboxBody';
 function Inbox() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [inboxSidebarOpen, setInboxSidebarOpen] = useState(false);
  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="relative flex">
            {/* Inbox sidebar */}
            <InboxSidebar inboxSidebarOpen={inboxSidebarOpen} setInboxSidebarOpen={setInboxSidebarOpen} />
            {/* Inbox body */}
            <InboxBody inboxSidebarOpen={inboxSidebarOpen} setInboxSidebarOpen={setInboxSidebarOpen} />
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Inbox;
--- a/src/pages/Onboarding01.jsx
+++ b/src/pages/Onboarding01.jsx
@@ -1,135 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 function Onboarding01() {
  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="/">
                  <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 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-01">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-02">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-03">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-04">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 what’s your situation ✨</h1>
                {/* Form */}
                <form>
                  <div className="space-y-3 mb-8">
                    <label className="relative block cursor-pointer">
                      <input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
                      <div className="flex items-center bg-white text-sm font-medium text-slate-800 p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                        <svg className="w-6 h-6 shrink-0 fill-current mr-4" viewBox="0 0 24 24">
                          <path className="text-indigo-500" d="m12 10.856 9-5-8.514-4.73a1 1 0 0 0-.972 0L3 5.856l9 5Z" />
                          <path className="text-indigo-300" d="m11 12.588-9-5V18a1 1 0 0 0 .514.874L11 23.588v-11Z" />
                          <path className="text-indigo-200" d="M13 12.588v11l8.486-4.714A1 1 0 0 0 22 18V7.589l-9 4.999Z" />
                        </svg>
                        <span>I have a company</span>
                      </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="relative block cursor-pointer">
                      <input type="radio" name="radio-buttons" className="peer sr-only" />
                      <div className="flex items-center bg-white text-sm font-medium text-slate-800 p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                        <svg className="w-6 h-6 shrink-0 fill-current mr-4" viewBox="0 0 24 24">
                          <path className="text-indigo-500" d="m12 10.856 9-5-8.514-4.73a1 1 0 0 0-.972 0L3 5.856l9 5Z" />
                          <path className="text-indigo-300" d="m11 12.588-9-5V18a1 1 0 0 0 .514.874L11 23.588v-11Z" />
                        </svg>
                        <span>I’m a freelance / contractor</span>
                      </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="relative block cursor-pointer">
                      <input type="radio" name="radio-buttons" className="peer sr-only" />
                      <div className="flex items-center bg-white text-sm font-medium text-slate-800 p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                        <svg className="w-6 h-6 shrink-0 fill-current mr-4" viewBox="0 0 24 24">
                          <path className="text-indigo-500" d="m12 10.856 9-5-8.514-4.73a1 1 0 0 0-.972 0L3 5.856l9 5Z" />
                        </svg>
                        <span>I’m just getting started</span>
                      </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">
                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-02">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 Onboarding01;
--- a/src/pages/Onboarding02.jsx
+++ b/src/pages/Onboarding02.jsx
@@ -3,8 +3,9 @@ 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 Onboarding02() {
+function Onboarding1() {
  return (
    <main className="bg-white">
@@ -21,22 +22,7 @@ function Onboarding02() {
              <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">
+                  <img alt='logo' src={Logo} width="89" height="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 className="text-sm">
                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -50,16 +36,16 @@ function Onboarding02() {
                    <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-01">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="/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-02">2</Link>
+                        <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-03">3</Link>
+                        <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-04">4</Link>
+                        <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>
@@ -118,8 +104,7 @@ function Onboarding02() {
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
-                    <Link className="text-sm underline hover:no-underline" to="/onboarding-01">&lt;- Back</Link>
+                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-2">Next Step -&gt;</Link>
                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-03">Next Step -&gt;</Link>
                  </div>
                </form>
@@ -142,4 +127,4 @@ function Onboarding02() {
  );
 }
-export default Onboarding02;
+export default Onboarding1;
--- a/src/pages/Onboarding03.jsx
+++ b/src/pages/Onboarding03.jsx
@@ -3,8 +3,9 @@ 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 Onboarding03() {
+function Onboarding2() {
  return (
    <main className="bg-white">
@@ -21,22 +22,7 @@ function Onboarding03() {
              <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">
+                  <img alt='logo' src={Logo} width="89" height="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 className="text-sm">
                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -50,16 +36,16 @@ function Onboarding03() {
                    <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-01">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="/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-02">2</Link>
+                        <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-03">3</Link>
+                        <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-04">4</Link>
+                        <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>
@@ -68,49 +54,47 @@ function Onboarding03() {
            </div>
            <div className="px-4 py-8">
-              <div className="max-w-md mx-auto">
+              <div className="max-w-sm mx-auto">
-
+                <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
-                <h1 className="text-3xl text-slate-800 font-bold mb-6">Company information ✨</h1>
+                {/* Form */}
                {/* htmlForm */}
                <form>
                  <div className="space-y-4 mb-8">
                    {/* Company Name */}
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="company-name">Company Name <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
-                      <input id="company-name" className="form-input w-full" type="text" />
+                      <input id="email" className="form-input w-full" type="email" />
                    </div>
                    {/* City and Postal Code */}
                    <div className="flex space-x-4">
                      <div className="flex-1">
                        <label className="block text-sm font-medium mb-1" htmlFor="city">City <span className="text-rose-500">*</span></label>
                        <input id="city" className="form-input w-full" type="text" />
                      </div>
                      <div className="flex-1">
                        <label className="block text-sm font-medium mb-1" htmlFor="postal-code">Postal Code <span className="text-rose-500">*</span></label>
                        <input id="postal-code" className="form-input w-full" type="text" />
                      </div>
                    </div>
                    {/* Street Address */}
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="street">Street Address <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
-                      <input id="street" className="form-input w-full" type="text" />
+                      <input id="name" className="form-input w-full" type="text" />
                    </div>
                    {/* Country */}
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="country">Country <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="role">Gender <span className="text-rose-500">*</span></label>
-                      <select id="country" className="form-select w-full">
+                      <select id="role" className="form-select w-full">
-                        <option>USA</option>
+                        <option>male</option>
-                        <option>Italy</option>
+                        <option>feemale</option>
                        <option>United Kingdom</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 className="flex items-center justify-between">
+                  </div>
-                    <Link className="text-sm underline hover:no-underline" to="/onboarding-02">&lt;- Back</Link>
+                  <div className="flex items-center justify-between mt-6">
-                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-04">Next Step -&gt;</Link>
+                    <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="/onboarding-2">Sign In</Link>
                  </div>
                </div>
              </div>
            </div>
@@ -130,4 +114,4 @@ function Onboarding03() {
  );
 }
-export default Onboarding03;
+export default Onboarding2;
--- a/src/pages/Onboarding3.jsx
+++ b/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;
--- a/src/pages/Onboarding04.jsx
+++ b/src/pages/Onboarding04.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
-import OnboardingImage from '../images/onboarding-image.jpg';
+function Onboarding4() {
 import OnboardingDecoration from '../images/auth-decoration.png';
 function Onboarding04() {
  return (
    <main className="bg-white">
@@ -21,22 +20,7 @@ function Onboarding04() {
              <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">
+                  <img alt='logo' src={Logo} width="89" height="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 className="text-sm">
                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -50,16 +34,16 @@ function Onboarding04() {
                    <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-01">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="/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-02">2</Link>
+                        <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-03">3</Link>
+                        <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-04">4</Link>
+                        <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>
@@ -67,16 +51,31 @@ function Onboarding04() {
              </div>
            </div>
-            <div className="px-4 py-8">
+            <div className="px-4 mt-40 py-8">
-              <div className="max-w-md mx-auto">
+              <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 have you, Acme Inc. 🙌</h1>
+                  <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 Dashboard -&gt;</Link>
+                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">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>
@@ -87,9 +86,11 @@ function Onboarding04() {
        </div>
        {/* Image */}
-        <div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+        <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">
-          <img className="object-cover object-center w-full h-full" src={OnboardingImage} width="760" height="1024" alt="Onboarding" />
+          <div className="flex mt-40 flex-col items-center gap-2.5">
-          <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" />
+            <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>
@@ -98,4 +99,4 @@ function Onboarding04() {
  );
 }
-export default Onboarding04;
+export default Onboarding4;
--- a/src/pages/SharedData.jsx
+++ b/src/pages/SharedData.jsx
@@ -0,0 +1,105 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import User06 from "../images/user-28-06.jpg";
 import User08 from "../images/user-28-08.jpg";
 import User09 from "../images/user-28-09.jpg";
 import SharedDataRoadMap from "../partials/shareddata/SharedDataRoadmap";
 function SharedData() {
  const sharedDataItems = {
      data: localStorage.getItem('digitalId'),
      items: [
        {
          dataShared: localStorage.getItem('digitalId'),
          id: '923',
          text: 'United Kindom',
          typeItem: 'Residence',
          usersImges: [
            {
              size: 32,
              img: User06,
              imgId: "90"
            },
            {
              size: 32,
              img: User08,
              imgId: "93"
            },
            {
              size: 32,
              img: User09,
              imgId: "89"
            },
          ],
        },
        {
          dataShared: localStorage.getItem('digitalId'),
          id: '401',
          text: 'A123B3143',
          typeItem: 'Document ID',
          usersImges: [
            {
              size: 32,
              img: User06,
              imgId: "67"
            },
            {
              size: 32,
              img: User08,
              imgId: "71"
            },
          ],
        },
      ]
    };
  function saveDigitalId() {
    localStorage.setItem('svgAvatar', generateSvgAvatar())
  }
  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="px-4 mt-16 py-9">
              <div className=" flex flex-col max-w-md mx-auto">
                <h1 className="text-3xl text-slate-800 font-bold mb-8">Shared data ✨</h1>
                <ul>
                  {sharedDataItems.items.map(item => {
                    return(
                        <li key={item.id}>
                          <SharedDataRoadMap data={item}/>
                        </li>
                    );
                  })}
                </ul>
              </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">{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>
          </div>
        </div>
      </div>
    </main>
  );
 }
 export default SharedData;
--- a/src/pages/Signin.jsx
+++ b/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">
--- a/src/pages/community/Feed.jsx
+++ b/src/pages/community/Feed.jsx
@@ -1,111 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import FeedLeftContent from '../../partials/community/FeedLeftContent';
 import FeedPosts from '../../partials/community/FeedPosts';
 import FeedRightContent from '../../partials/community/FeedRightContent';
 import Avatar from '../../images/user-40-02.jpg';
 function Feed() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 md:py-0 w-full max-w-9xl mx-auto">
            <div className="xl:flex">
              {/* Left + Middle content */}
              <div className="md:flex flex-1">
                {/* Left content */}
                <FeedLeftContent />
                {/* Middle content */}
                <div className="flex-1 md:ml-8 xl:mx-4 2xl:mx-8">
                  <div className="md:py-8">
                    {/* Blocks */}
                    <div className="space-y-4">
                      {/* Post Block */}
                      <div className="bg-white shadow-md rounded border border-slate-200 p-5">
                        <div className="flex items-center space-x-3 mb-5">
                          <img className="rounded-full shrink-0" src={Avatar} width="40" height="40" alt="User 02" />
                          <div className="grow">
                            <label htmlFor="status-input" className="sr-only">
                              What's happening, Mark?
                            </label>
                            <input
                              id="status-input"
                              className="form-input w-full bg-slate-100 border-transparent focus:bg-white focus:border-slate-300 placeholder-slate-500"
                              type="text"
                              placeholder="What's happening, Mark?"
                            />
                          </div>
                        </div>
                        <div className="flex justify-between items-center">
                          <div className="grow flex space-x-5">
                            <button className="inline-flex items-center text-sm font-medium text-slate-600 hover:text-slate-700">
                              <svg className="w-4 h-4 fill-indigo-400 mr-2" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 0h2v16H0V0Zm14 0h2v16h-2V0Zm-3 7H5c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1h6c.6 0 1 .4 1 1v5c0 .6-.4 1-1 1ZM6 5h4V2H6v3Zm5 11H5c-.6 0-1-.4-1-1v-5c0-.6.4-1 1-1h6c.6 0 1 .4 1 1v5c0 .6-.4 1-1 1Zm-5-2h4v-3H6v3Z" />
                              </svg>
                              <span>Media</span>
                            </button>
                            <button className="inline-flex items-center text-sm font-medium text-slate-600 hover:text-slate-700">
                              <svg className="w-4 h-4 fill-indigo-400 mr-2" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.974 14c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z" />
                              </svg>
                              <span>GIF</span>
                            </button>
                            <button className="inline-flex items-center text-sm font-medium text-slate-600 hover:text-slate-700">
                              <svg className="w-4 h-4 fill-indigo-400 mr-2" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.793 10.002a.5.5 0 0 1 .353.853l-1.792 1.793a.5.5 0 0 1-.708 0l-1.792-1.793a.5.5 0 0 1 .353-.853h3.586Zm5.014-4.63c1.178 2.497 1.833 5.647.258 7.928-1.238 1.793-3.615 2.702-7.065 2.702S2.173 15.092.935 13.3c-1.575-2.28-.92-5.431.258-7.927A2.962 2.962 0 0 1 0 3.002a3 3 0 0 1 3-3c.787 0 1.496.309 2.029.806a5.866 5.866 0 0 1 5.942 0A2.96 2.96 0 0 1 13 .002a3 3 0 0 1 3 3c0 .974-.472 1.827-1.193 2.37Zm-1.387 6.79c1.05-1.522.417-3.835-.055-5.078C12.915 5.89 11.192 2.002 8 2.002s-4.914 3.89-5.365 5.082c-.472 1.243-1.106 3.556-.055 5.079.843 1.22 2.666 1.839 5.42 1.839s4.577-.62 5.42-1.84ZM6.67 6.62c.113.443.102.68-.433 1.442-.535.761-1.06 1.297-1.658 1.297-.597 0-1.08-.772-1.07-1.483.01-.71.916-2.306 1.997-2.306.784 0 1.05.607 1.163 1.05Zm3.824-1.05c1.08 0 1.987 1.596 1.997 2.306.01.71-.473 1.483-1.07 1.483-.598 0-1.123-.536-1.658-1.297-.535-.762-.546-1-.432-1.442.113-.443.38-1.05 1.163-1.05Z" />
                              </svg>
                              <span>Emoji</span>
                            </button>
                          </div>
                          <div>
                            <button type="submit" className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">
                              Send -&gt;
                            </button>
                          </div>
                        </div>
                      </div>
                      {/* Posts */}
                      <FeedPosts />
                    </div>
                  </div>
                </div>                
              </div>
              {/* Right content */}
              <FeedRightContent />              
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Feed;
--- a/src/pages/community/Forum.jsx
+++ b/src/pages/community/Forum.jsx
@@ -1,86 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ForumLeftContent from '../../partials/community/ForumLeftContent';
 import ForumEntries from '../../partials/community/ForumEntries';
 import ForumRightContent from '../../partials/community/ForumRightContent';
 import Avatar from '../../images/user-40-02.jpg';
 function Forum() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 md:py-0 w-full max-w-9xl mx-auto">
            <div className="xl:flex">
              {/* Left + Middle content */}
              <div className="md:flex flex-1">
                {/* Left content */}
                <ForumLeftContent />
                {/* Middle content */}
                <div className="flex-1 md:ml-8 xl:mx-4 2xl:mx-8">
                  <div className="md:py-8">
                    {/* Buttons group */}
                    <div className="mb-4">
                      <div className="w-full flex flex-wrap -space-x-px">
                        <button className="btn grow bg-white border-slate-200 text-indigo-500 rounded-none first:rounded-l last:rounded-r">Popular</button>
                        <button className="btn grow bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Newest</button>
                        <button className="btn grow bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Following</button>
                      </div>
                    </div>
                    {/* Forum Entries */}
                    <div className="space-y-2">
                      <ForumEntries />
                    </div>
                    {/* Pagination */}
                    <div className="mt-6 text-right">
                      <nav className="inline-flex" role="navigation" aria-label="Navigation">
                        <ul className="flex justify-center">
                          <li className="ml-3 first:ml-0">
                            <a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;- Previous</a>
                          </li>
                          <li className="ml-3 first:ml-0">
                            <a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0">Next -&gt;</a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>                
              </div>
              {/* Right content */}
              <ForumRightContent />              
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Forum;
--- a/src/pages/community/ForumPost.jsx
+++ b/src/pages/community/ForumPost.jsx
@@ -1,59 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ForumLeftContent from '../../partials/community/ForumLeftContent';
 import ForumEntry from '../../partials/community/ForumEntry';
 import ForumRightContent from '../../partials/community/ForumPostRightContent';
 function ForumPost() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 md:py-0 w-full max-w-9xl mx-auto">
            <div className="xl:flex">
              {/* Left + Middle content */}
              <div className="md:flex flex-1">
                {/* Left content */}
                <ForumLeftContent />
                {/* Middle content */}
                <div className="flex-1 md:ml-8 xl:mx-4 2xl:mx-8">
                  <div className="md:py-8">
                    {/* Forum entry */}
                    <ForumEntry />
                  </div>
                </div>                
              </div>
              {/* Right content */}
              <ForumRightContent />              
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default ForumPost;
--- a/src/pages/community/Meetups.jsx
+++ b/src/pages/community/Meetups.jsx
@@ -1,104 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SearchForm from '../../partials/actions/SearchForm';
 import MeetupsPosts from '../../partials/community/MeetupsPosts';
 import PaginationNumeric from '../../components/PaginationNumeric';
 function Meetups() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="sm:flex sm:justify-between sm:items-center mb-5">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Discover Meetups ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Search form */}
                <SearchForm placeholder="Search…" />
                {/* Add meetup button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Add Meetup</span>
                </button>
              </div>
            </div>
            {/* Filters */}
            <div className="mb-5">
              <ul className="flex flex-wrap -m-1">
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                    View All
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    Online
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    Local
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    This Week
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    This Month
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    Following
                  </button>
                </li>
              </ul>
            </div>
            <div className="text-sm text-slate-500 italic mb-4">289 Meetups</div>
            {/* Content */}
            <MeetupsPosts />
            {/* Pagination */}
            <div className="mt-8">
              <PaginationNumeric />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Meetups;
--- a/src/pages/community/MeetupsPost.jsx
+++ b/src/pages/community/MeetupsPost.jsx
@@ -1,431 +0,0 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import MeetupImage from '../../images/meetup-image.jpg';
 import MeetupPhoto01 from '../../images/meetup-photo-01.jpg';
 import MeetupPhoto02 from '../../images/meetup-photo-02.jpg';
 import MeetupPhoto03 from '../../images/meetup-photo-03.jpg';
 import MeetupThumb from '../../images/meetups-thumb-02.jpg';
 import UserImage01 from '../../images/user-32-01.jpg';
 import UserImage02 from '../../images/user-32-02.jpg';
 import UserImage03 from '../../images/user-32-03.jpg';
 import UserImage04 from '../../images/user-32-04.jpg';
 import UserImage05 from '../../images/user-32-05.jpg';
 import UserImage06 from '../../images/user-32-06.jpg';
 import UserImage07 from '../../images/user-32-07.jpg';
 import UserImage08 from '../../images/user-32-08.jpg';
 import Avatar02 from '../../images/avatar-02.jpg';
 import Avatar03 from '../../images/avatar-03.jpg';
 import Avatar04 from '../../images/avatar-04.jpg';
 function MeetupsPost() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">
            {/* Page content */}
            <div className="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
              {/* Content */}
              <div>
                <div className="mb-6">
                  <Link className="btn-sm px-3 bg-white border-slate-200 hover:border-slate-300 text-slate-600" to="/community/meetups">
                    <svg className="fill-current text-slate-400 mr-2" width="7" height="12" viewBox="0 0 7 12">
                      <path d="M5.4.6 6.8 2l-4 4 4 4-1.4 1.4L0 6z" />
                    </svg>
                    <span>Back To Meetups</span>
                  </Link>
                </div>
                <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Mon 27 Dec, 2021 - 9:00 PM -&gt; 10:00 PM</div>
                <header className="mb-4">
                  {/* Title */}
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-2">The World of AI and Machine Learning — Open Chat</h1>
                  <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</p>
                </header>
                {/* Meta */}
                <div className="space-y-3 sm:flex sm:items-center sm:justify-between sm:space-y-0 mb-6">
                  {/* Author */}
                  <div className="flex items-center sm:mr-4">
                    <a className="block mr-2 shrink-0" href="#0">
                      <img className="rounded-full" src={UserImage07} width="32" height="32" alt="User 04" />
                    </a>
                    <div className="text-sm whitespace-nowrap">
                      Hosted by{' '}
                      <a className="font-semibold text-slate-800" href="#0">
                        Monica Fishkin
                      </a>
                    </div>
                  </div>
                  {/* Right side */}
                  <div className="flex flex-wrap items-center sm:justify-end space-x-2">
                    {/* Tags */}
                    <div className="text-xs inline-flex items-center font-medium bg-white text-slate-600 rounded-full text-center px-2.5 py-1">
                      <svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
                        <path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
                      </svg>
                      <span>Online Event</span>
                    </div>
                    <div className="text-xs inline-flex font-medium uppercase bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
                      Free
                    </div>
                  </div>
                </div>
                {/* Image */}
                <figure className="mb-6">
                  <img className="w-full rounded-sm" src={MeetupImage} width="640" height="360" alt="Meetup" />
                </figure>
                {/* Post content */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Meetup Details</h2>
                  <p className="mb-6">In the world of AI, behavioural predictions are leading the charge to better machine learning.</p>
                  <p className="mb-6">
                    There is so much happening in the AI space. Advances in the economic sectors have seen automated business practices rapidly
                    increasing economic value. While the realm of the human sciences has used the power afforded by computational capabilities to
                    solve many human based dilemmas. Even the art scene has adopted carefully selected ML applications to usher in the technological
                    movement.
                  </p>
                  <p className="mb-6">
                    Join us every second Wednesday as we host an open discussion about the amazing things happening in the world of AI and machine
                    learning. Feel free to share your experiences, ask questions, ponder the possibilities, or just listen as we explore new topics
                    and revisit old ones.
                  </p>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Photos */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Photos (3)</h2>
                  <div className="grid grid-cols-3 gap-4 my-6">
                    <a className="block" href="#0">
                      <img className="w-full rounded-sm" src={MeetupPhoto01} width="203" height="152" alt="Meetup photo 01" />
                    </a>
                    <a className="block" href="#0">
                      <img className="w-full rounded-sm" src={MeetupPhoto02} width="203" height="152" alt="Meetup photo 02" />
                    </a>
                    <a className="block" href="#0">
                      <img className="w-full rounded-sm" src={MeetupPhoto03} width="203" height="152" alt="Meetup photo 03" />
                    </a>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Comments */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Comments (3)</h2>
                  <ul className="space-y-5 my-6">
                    {/* Comment */}
                    <li className="flex items-start">
                      <a className="block mr-3 shrink-0" href="#0">
                        <img className="rounded-full" src={UserImage07} width="32" height="32" alt="User 07" />
                      </a>
                      <div className="grow">
                        <div className="text-sm font-semibold text-slate-800 mb-2">Taylor Nieman</div>
                        <div className="italic">
                          “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          Ut enim ad minim veniam.”
                        </div>
                      </div>
                    </li>
                    {/* Comment */}
                    <li className="flex items-start">
                      <a className="block mr-3 shrink-0" href="#0">
                        <img className="rounded-full" src={UserImage08} width="32" height="32" alt="User 08" />
                      </a>
                      <div className="grow">
                        <div className="text-sm font-semibold text-slate-800 mb-2">Meagan Loyst</div>
                        <div className="italic">
                          “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          Ut enim ad minim veniam.”
                        </div>
                      </div>
                    </li>
                    {/* Comment */}
                    <li className="flex items-start">
                      <a className="block mr-3 shrink-0" href="#0">
                        <img className="rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
                      </a>
                      <div className="grow">
                        <div className="text-sm font-semibold text-slate-800 mb-2">Frank Malik</div>
                        <div className="italic">
                          “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          Ut enim ad minim veniam.”
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Similar Meetups */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Similar Meetups</h2>
                  <div className="space-y-8 sm:space-y-5 my-6 lg:mb-0">
                    {/* Related item */}
                    <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
                      {/* Image */}
                      <a className="relative block w-24 sm:w-56 lg:sidebar-expanded:w-20 xl:sidebar-expanded:w-56 shrink-0" href="#0">
                        <img
                          className="absolute object-cover object-center w-full h-full"
                          src={MeetupThumb}
                          width="220"
                          height="236"
                          alt="Meetup 02"
                        />
                        {/* Like button */}
                        <button className="absolute top-0 right-0 mt-4 mr-4">
                          <div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
                            <span className="sr-only">Like</span>
                            <svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
                              <path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
                            </svg>
                          </div>
                        </button>
                      </a>
                      {/* Content */}
                      <div className="grow p-5 flex flex-col">
                        <div className='grow'>
                          <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Mon 27 Dec, 2021</div>
                          <a className="inline-flex mb-2" href="#0">
                            <h3 className="text-lg font-bold text-slate-800">New York &amp; New Jersey Virtual Retreat 2021</h3>
                          </a>
                          <div className="text-sm">
                            Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
                          </div>
                        </div>
                        {/* Footer */}
                        <div className="flex justify-between mt-3">
                          {/* Tag */}
                          <div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
                            <svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
                              <path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
                            </svg>
                            <span>Online Event</span>
                          </div>
                          {/* Avatars */}
                          <div className="flex items-center space-x-2">
                            <div className="flex -space-x-3 -ml-0.5">
                              <img className="rounded-full border-2 border-white box-content" src={Avatar02} width="28" height="28" alt="User 02" />
                              <img className="rounded-full border-2 border-white box-content" src={Avatar03} width="28" height="28" alt="User 03" />
                              <img className="rounded-full border-2 border-white box-content" src={Avatar04} width="28" height="28" alt="User 04" />
                            </div>
                            <div className="text-xs font-medium text-slate-400 italic">+132</div>
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
              {/* Sidebar */}
              <div className="space-y-4">
                {/* 1st block */}
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                  <div className="space-y-2">
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">
                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                        <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                      </svg>
                      <span className="ml-1">Attending</span>
                    </button>
                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">
                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                      </svg>
                      <span className="ml-2">Favorite</span>
                    </button>
                  </div>
                </div>
                {/* 2nd block */}
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                  <div className="flex justify-between space-x-1 mb-5">
                    <div className="text-sm text-slate-800 font-semibold">Attendees (127)</div>
                    <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      View All
                    </a>
                  </div>
                  <ul className="space-y-3">
                    <li>
                      <div className="flex justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage08} width="32" height="32" alt="User 08" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Carolyn McNeail</span>
                          </div>
                        </div>
                        <button className="text-slate-400 hover:text-slate-500 rounded-full">
                          <span className="sr-only">Menu</span>
                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                            <circle cx="16" cy="16" r="2" />
                            <circle cx="10" cy="16" r="2" />
                            <circle cx="22" cy="16" r="2" />
                          </svg>
                        </button>
                      </div>
                    </li>
                    <li>
                      <div className="flex justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Dominik Lamakani</span>
                          </div>
                        </div>
                        <button className="text-slate-400 hover:text-slate-500 rounded-full">
                          <span className="sr-only">Menu</span>
                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                            <circle cx="16" cy="16" r="2" />
                            <circle cx="10" cy="16" r="2" />
                            <circle cx="22" cy="16" r="2" />
                          </svg>
                        </button>
                      </div>
                    </li>
                    <li>
                      <div className="flex justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage03} width="32" height="32" alt="User 03" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Ivan Mesaros</span>
                          </div>
                        </div>
                        <button className="text-slate-400 hover:text-slate-500 rounded-full">
                          <span className="sr-only">Menu</span>
                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                            <circle cx="16" cy="16" r="2" />
                            <circle cx="10" cy="16" r="2" />
                            <circle cx="22" cy="16" r="2" />
                          </svg>
                        </button>
                      </div>
                    </li>
                    <li>
                      <div className="flex justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Maria Martinez</span>
                          </div>
                        </div>
                        <button className="text-slate-400 hover:text-slate-500 rounded-full">
                          <span className="sr-only">Menu</span>
                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                            <circle cx="16" cy="16" r="2" />
                            <circle cx="10" cy="16" r="2" />
                            <circle cx="22" cy="16" r="2" />
                          </svg>
                        </button>
                      </div>
                    </li>
                  </ul>
                </div>
                {/* 3rd block */}
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                  <div className="flex justify-between space-x-1 mb-5">
                    <div className="text-sm text-slate-800 font-semibold">Invite Friends</div>
                    <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      View All
                    </a>
                  </div>
                  <ul className="space-y-3">
                    <li>
                      <div className="flex items-center justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Haruki Masuno</span>
                          </div>
                        </div>
                        <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                          Invite
                        </button>
                      </div>
                    </li>
                    <li>
                      <div className="flex items-center justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Joe Huang</span>
                          </div>
                        </div>
                        <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                          Invite
                        </button>
                      </div>
                    </li>
                    <li>
                      <div className="flex items-center justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage06} width="32" height="32" alt="User 06" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Carolyn McNeail</span>
                          </div>
                        </div>
                        <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                          Invite
                        </button>
                      </div>
                    </li>
                    <li>
                      <div className="flex items-center justify-between">
                        <div className="grow flex items-center">
                          <div className="relative mr-3">
                            <img className="w-8 h-8 rounded-full" src={UserImage08} width="32" height="32" alt="User 08" />
                          </div>
                          <div className="truncate">
                            <span className="text-sm font-medium text-slate-800">Lisa Sitwala</span>
                          </div>
                        </div>
                        <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                          Invite
                        </button>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default MeetupsPost;
--- a/src/pages/community/Profile.jsx
+++ b/src/pages/community/Profile.jsx
@@ -1,43 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileSidebar from '../../partials/community/ProfileSidebar';
 import ProfileBody from '../../partials/community/ProfileBody';
 function Profile() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [profileSidebarOpen, setProfileSidebarOpen] = useState(false);
  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 bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="relative flex">
            {/* Profile sidebar */}
            <ProfileSidebar profileSidebarOpen={profileSidebarOpen} setProfileSidebarOpen={setProfileSidebarOpen} />
            {/* Profile body */}
            <ProfileBody profileSidebarOpen={profileSidebarOpen} setProfileSidebarOpen={setProfileSidebarOpen} />
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Profile;
--- a/src/pages/community/UsersTabs.jsx
+++ b/src/pages/community/UsersTabs.jsx
@@ -1,196 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SearchForm from '../../partials/actions/SearchForm';
 import UsersTabsCard from '../../partials/community/UsersTabsCard';
 import PaginationNumeric from '../../components/PaginationNumeric';
 import Image01 from '../../images/user-64-01.jpg';
 import Image02 from '../../images/user-64-02.jpg';
 import Image03 from '../../images/user-64-03.jpg';
 import Image04 from '../../images/user-64-04.jpg';
 import Image05 from '../../images/user-64-05.jpg';
 import Image06 from '../../images/user-64-06.jpg';
 import Image07 from '../../images/user-64-07.jpg';
 import Image08 from '../../images/user-64-08.jpg';
 import Image09 from '../../images/user-64-09.jpg';
 import Image10 from '../../images/user-64-10.jpg';
 import Image11 from '../../images/user-64-11.jpg';
 import Image12 from '../../images/user-64-12.jpg';
 function UsersTabs() {
  const items = [
    {
      id: 0,
      name: 'Dominik McNeail',
      image: Image01,
      link: '#0',
      location: '🇮🇹',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 1,
      name: 'Ivan Mesaros',
      image: Image02,
      link: '#0',
      location: '🇫🇷',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 2,
      name: 'Tisha Yanchev',
      image: Image03,
      link: '#0',
      location: '🇩🇪',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 3,
      name: 'Sergio Gonnelli',
      image: Image04,
      link: '#0',
      location: '🇮🇹',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 4,
      name: 'Jerzy Wierzy',
      image: Image05,
      link: '#0',
      location: '🇪🇸',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 5,
      name: 'Mirko Grubisic',
      image: Image06,
      link: '#0',
      location: '🇩🇪',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 6,
      name: 'Alisha Acharya',
      image: Image07,
      link: '#0',
      location: '🇬🇧',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 7,
      name: 'Brian Halligan',
      image: Image08,
      link: '#0',
      location: '🇺🇸',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 8,
      name: 'Patricia Semklo',
      image: Image09,
      link: '#0',
      location: '🇮🇳',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 9,
      name: 'Maria Martinez',
      image: Image10,
      link: '#0',
      location: '🇮🇹',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 10,
      name: 'Vedad Siljak',
      image: Image11,
      link: '#0',
      location: '🇮🇹🇨🇦',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 11,
      name: 'Dominik Lamakani',
      image: Image12,
      link: '#0',
      location: '🇧🇪',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
  ];
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Acme Inc. ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Search form */}
                <SearchForm />
                {/* Add member button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Add Member</span>
                </button>
              </div>
            </div>
            {/* Cards */}
            <div className="grid grid-cols-12 gap-6">
              {
                items.map(item => {
                  return (
                    <UsersTabsCard
                      key={item.id}
                      id={item.id}
                      name={item.name}
                      image={item.image}
                      link={item.link}
                      location={item.location}
                      content={item.content}
                    />
                  )
                })
              }
            </div>
            {/* Pagination */}
            <div className="mt-8">
              <PaginationNumeric />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default UsersTabs;
--- a/src/pages/community/UsersTiles.jsx
+++ b/src/pages/community/UsersTiles.jsx
@@ -1,196 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SearchForm from '../../partials/actions/SearchForm';
 import UsersTilesCard from '../../partials/community/UsersTilesCard';
 import PaginationNumeric from '../../components/PaginationNumeric';
 import Image01 from '../../images/user-64-01.jpg';
 import Image02 from '../../images/user-64-02.jpg';
 import Image03 from '../../images/user-64-03.jpg';
 import Image04 from '../../images/user-64-04.jpg';
 import Image05 from '../../images/user-64-05.jpg';
 import Image06 from '../../images/user-64-06.jpg';
 import Image07 from '../../images/user-64-07.jpg';
 import Image08 from '../../images/user-64-08.jpg';
 import Image09 from '../../images/user-64-09.jpg';
 import Image10 from '../../images/user-64-10.jpg';
 import Image11 from '../../images/user-64-11.jpg';
 import Image12 from '../../images/user-64-12.jpg';
 function UsersTiles() {
  const items = [
    {
      id: 0,
      name: 'Dominik McNeail',
      image: Image01,
      link: '#0',
      location: '🇮🇹',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 1,
      name: 'Ivan Mesaros',
      image: Image02,
      link: '#0',
      location: '🇫🇷',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 2,
      name: 'Tisha Yanchev',
      image: Image03,
      link: '#0',
      location: '🇩🇪',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 3,
      name: 'Sergio Gonnelli',
      image: Image04,
      link: '#0',
      location: '🇮🇹',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 4,
      name: 'Jerzy Wierzy',
      image: Image05,
      link: '#0',
      location: '🇪🇸',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 5,
      name: 'Mirko Grubisic',
      image: Image06,
      link: '#0',
      location: '🇩🇪',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 6,
      name: 'Alisha Acharya',
      image: Image07,
      link: '#0',
      location: '🇬🇧',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 7,
      name: 'Brian Halligan',
      image: Image08,
      link: '#0',
      location: '🇺🇸',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 8,
      name: 'Patricia Semklo',
      image: Image09,
      link: '#0',
      location: '🇮🇳',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 9,
      name: 'Maria Martinez',
      image: Image10,
      link: '#0',
      location: '🇮🇹',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 10,
      name: 'Vedad Siljak',
      image: Image11,
      link: '#0',
      location: '🇮🇹🇨🇦',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
    {
      id: 11,
      name: 'Dominik Lamakani',
      image: Image12,
      link: '#0',
      location: '🇧🇪',
      content: 'Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.',
    },
  ];
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Acme Inc. ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Search form */}
                <SearchForm />
                {/* Add member button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Add Member</span>
                </button>
              </div>
            </div>
            {/* Cards */}
            <div className="grid grid-cols-12 gap-6">
              {
                items.map(item => {
                  return (
                    <UsersTilesCard
                      key={item.id}
                      id={item.id}
                      name={item.name}
                      image={item.image}
                      link={item.link}
                      location={item.location}
                      content={item.content}
                    />
                  )
                })
              }
            </div>
            {/* Pagination */}
            <div className="mt-8">
              <PaginationNumeric />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default UsersTiles;
--- a/src/pages/component/AlertPage.jsx
+++ b/src/pages/component/AlertPage.jsx
@@ -1,226 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import Banner from '../../components/Banner';
 import Banner2 from '../../components/Banner2';
 import Toast from '../../components/Toast';
 import Toast2 from '../../components/Toast2';
 import Toast3 from '../../components/Toast3';
 import Notification from '../../components/Notification';
 function AlertPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [bannerWarningOpen, setBannerWarningOpen] = useState(true);
  const [bannerErrorOpen, setBannerErrorOpen] = useState(true);
  const [bannerSuccessOpen, setBannerSuccessOpen] = useState(true);
  const [bannerInfoOpen, setBannerInfoOpen] = useState(true);
  const [banner2WarningOpen, setBanner2WarningOpen] = useState(true);
  const [banner2ErrorOpen, setBanner2ErrorOpen] = useState(true);
  const [banner2SuccessOpen, setBanner2SuccessOpen] = useState(true);
  const [banner2InfoOpen, setBanner2InfoOpen] = useState(true);
  const [toastWarningOpen, setToastWarningOpen] = useState(true);
  const [toastErrorOpen, setToastErrorOpen] = useState(true);
  const [toastSuccessOpen, setToastSuccessOpen] = useState(true);
  const [toastInfoOpen, setToastInfoOpen] = useState(true);
  const [toast2WarningOpen, setToast2WarningOpen] = useState(true);
  const [toast2ErrorOpen, setToast2ErrorOpen] = useState(true);
  const [toast2SuccessOpen, setToast2SuccessOpen] = useState(true);
  const [toast2InfoOpen, setToast2InfoOpen] = useState(true);
  const [toast3WarningOpen, setToast3WarningOpen] = useState(true);
  const [toast3ErrorOpen, setToast3ErrorOpen] = useState(true);
  const [toast3SuccessOpen, setToast3SuccessOpen] = useState(true);
  const [toast3InfoOpen, setToast3InfoOpen] = useState(true);
  const [notificationWarningOpen, setNotificationWarningOpen] = useState(true);
  const [notificationErrorOpen, setNotificationErrorOpen] = useState(true);
  const [notificationSuccessOpen, setNotificationSuccessOpen] = useState(true);
  const [notificationInfoOpen, setNotificationInfoOpen] = useState(true);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Alert & Banner ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Banner */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Banner</h2>
                  <div className="space-y-3">
                    <Banner type="warning" open={bannerWarningOpen} setOpen={setBannerWarningOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner>
                    <Banner type="success" open={bannerSuccessOpen} setOpen={setBannerSuccessOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner>                  
                    <Banner type="error" open={bannerErrorOpen} setOpen={setBannerErrorOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner>
                    <Banner open={bannerInfoOpen} setOpen={setBannerInfoOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner>                                                      
                  </div>
                </div>
                {/* Banner 2 */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Banner 2</h2>
                  <div className="space-y-3">
                    <Banner2 type="warning" open={banner2WarningOpen} setOpen={setBanner2WarningOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner2>
                    <Banner2 type="success" open={banner2SuccessOpen} setOpen={setBanner2SuccessOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner2>                  
                    <Banner2 type="error" open={banner2ErrorOpen} setOpen={setBanner2ErrorOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner2>
                    <Banner2 open={banner2InfoOpen} setOpen={setBanner2InfoOpen}>
                      We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
                    </Banner2> 
                  </div>
                </div>
                {/* Toast */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Toast</h2>
                  <div className="space-y-3">
                    <Toast type="warning" open={toastWarningOpen} setOpen={setToastWarningOpen}>
                      A warning toast.
                    </Toast>
                    <Toast type="success" open={toastSuccessOpen} setOpen={setToastSuccessOpen}>
                      A successful toast.
                    </Toast>                  
                    <Toast type="error" open={toastErrorOpen} setOpen={setToastErrorOpen}>
                      A dangerous toast.
                    </Toast>
                    <Toast open={toastInfoOpen} setOpen={setToastInfoOpen}>
                      An informational toast.
                    </Toast> 
                  </div>
                </div>
                {/* Toast 2 */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Toast 2</h2>
                  <div className="space-y-3">
                    <Toast2 type="warning" open={toast2WarningOpen} setOpen={setToast2WarningOpen}>
                      A warning toast.
                    </Toast2>
                    <Toast2 type="success" open={toast2SuccessOpen} setOpen={setToast2SuccessOpen}>
                      A successful toast.
                    </Toast2>                  
                    <Toast2 type="error" open={toast2ErrorOpen} setOpen={setToast2ErrorOpen}>
                      A dangerous toast.
                    </Toast2>
                    <Toast2 open={toast2InfoOpen} setOpen={setToast2InfoOpen}>
                      An informational toast.
                    </Toast2> 
                  </div>
                </div>
                {/* Toast 3 */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Toast 3</h2>
                  <div className="space-y-3">
                    <Toast3 type="warning" open={toast3WarningOpen} setOpen={setToast3WarningOpen}>
                      A warning toast.
                    </Toast3>
                    <Toast3 type="success" open={toast3SuccessOpen} setOpen={setToast3SuccessOpen}>
                      A successful toast.
                    </Toast3>                  
                    <Toast3 type="error" open={toast3ErrorOpen} setOpen={setToast3ErrorOpen}>
                      A dangerous toast.
                    </Toast3>
                    <Toast3 open={toast3InfoOpen} setOpen={setToast3InfoOpen}>
                      An informational toast.
                    </Toast3>
                  </div>
                </div>
                {/* Notification */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Notification</h2>
                  <div className="space-y-3">
                    <Notification type="warning" open={notificationWarningOpen} setOpen={setNotificationWarningOpen}>
                      <div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
                      <div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
                    </Notification>
                    <Notification type="success" open={notificationSuccessOpen} setOpen={setNotificationSuccessOpen}>
                      <div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
                      <div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
                    </Notification>                  
                    <Notification type="error" open={notificationErrorOpen} setOpen={setNotificationErrorOpen}>
                      <div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
                      <div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
                    </Notification>
                    <Notification open={notificationInfoOpen} setOpen={setNotificationInfoOpen}>
                      <div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
                      <div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
                    </Notification>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default AlertPage;
--- a/src/pages/component/AvatarPage.jsx
+++ b/src/pages/component/AvatarPage.jsx
@@ -1,228 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import Avatar01 from '../../images/avatar-01.jpg';
 import Avatar02 from '../../images/avatar-02.jpg';
 import Avatar03 from '../../images/avatar-03.jpg';
 import Avatar04 from '../../images/avatar-04.jpg';
 import Avatar05 from '../../images/avatar-05.jpg';
 import Avatar06 from '../../images/avatar-06.jpg';
 function AvatarPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Avatar ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Basic Avatars */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Avatars</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <img className="rounded-full" src={Avatar01} width="24" height="24" alt="Avatar" />
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <img className="rounded-full" src={Avatar01} width="28" height="28" alt="Avatar" />
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <img className="rounded-full" src={Avatar01} width="32" height="32" alt="Avatar" />
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <img className="rounded-full" src={Avatar01} width="40" height="40" alt="Avatar" />
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <img className="rounded-full" src={Avatar01} width="64" height="64" alt="Avatar" />
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Avatars with Notification */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Avatars with Notification</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="relative">
                        <img className="rounded-full" src={Avatar01} width="24" height="24" alt="Avatar" />
                        <div className="absolute top-0 right-0 w-2 h-2 bg-rose-500 border-2 border-white rounded-full"></div>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="relative">
                        <img className="rounded-full" src={Avatar01} width="28" height="28" alt="Avatar" />
                        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="relative">
                        <img className="rounded-full" src={Avatar01} width="32" height="32" alt="Avatar" />
                        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-rose-500 border-2 border-white rounded-full"></div>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="relative">
                        <img className="rounded-full" src={Avatar01} width="40" height="40" alt="Avatar" />
                        <div className="absolute top-0 right-0 w-3 h-3 bg-emerald-500 border-2 border-white rounded-full"></div>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="relative">
                        <img className="rounded-full" src={Avatar01} width="64" height="64" alt="Avatar" />
                        <div className="absolute top-1 right-1 w-3 h-3 bg-rose-500 border-2 border-white rounded-full"></div>
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Avatars with Placeholder Icon */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Avatars with Placeholder Icon</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex items-center justify-center bg-slate-100 rounded-full w-6 h-6 text-[10px] font-semibold uppercase text-slate-500">MS</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex items-center justify-center bg-slate-100 rounded-full w-7 h-7 text-[10px] font-semibold uppercase text-slate-500">MS</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex items-center justify-center bg-slate-100 rounded-full w-8 h-8 text-xs font-semibold uppercase text-slate-500">MS</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex items-center justify-center bg-slate-100 rounded-full w-10 h-10 text-sm font-semibold uppercase text-slate-500">MS</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex items-center justify-center bg-slate-100 rounded-full w-16 h-16 text-lg font-semibold uppercase text-slate-500">MS</div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Avatars Groups */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Avatars Groups</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex -space-x-3 -ml-0.5">
                        <img className="rounded-full border-2 border-white box-content" src={Avatar02} width="24" height="24" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar03} width="24" height="24" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar04} width="24" height="24" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar05} width="24" height="24" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar06} width="24" height="24" alt="Avatar" />
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex -space-x-3 -ml-0.5">
                        <img className="rounded-full border-2 border-white box-content" src={Avatar02} width="28" height="28" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar03} width="28" height="28" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar04} width="28" height="28" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar05} width="28" height="28" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar06} width="28" height="28" alt="Avatar" />
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex -space-x-3 -ml-0.5">
                        <img className="rounded-full border-2 border-white box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar04} width="32" height="32" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar05} width="32" height="32" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar06} width="32" height="32" alt="Avatar" />
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex -space-x-4 -ml-0.5">
                        <img className="rounded-full border-2 border-white box-content" src={Avatar02} width="40" height="40" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar03} width="40" height="40" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar04} width="40" height="40" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar05} width="40" height="40" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar06} width="40" height="40" alt="Avatar" />
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex -space-x-7 -ml-0.5">
                        <img className="rounded-full border-2 border-white box-content" src={Avatar02} width="64" height="64" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar03} width="64" height="64" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar04} width="64" height="64" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar05} width="64" height="64" alt="Avatar" />
                        <img className="rounded-full border-2 border-white box-content" src={Avatar06} width="64" height="64" alt="Avatar" />
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default AvatarPage;
--- a/src/pages/component/BreadcrumbPage.jsx
+++ b/src/pages/component/BreadcrumbPage.jsx
@@ -1,120 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function BreadcrumbPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Breadcrumb ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* With Slashes */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">With Slashes</h2>
                  <div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
                    <div className="text-center">
                      {/* Start */}
                      <ul className="inline-flex flex-wrap text-sm font-medium">
                        <li className="after:content-['/'] last:after:hidden after:text-slate-400 after:px-2">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Home</a>
                        </li>
                        <li className="after:content-['/'] last:after:hidden after:text-slate-400 after:px-2">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Settings</a>
                        </li>
                        <li className="after:content-['/'] last:after:hidden after:text-slate-400 after:px-2">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Notifications</a>
                        </li>
                      </ul>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* With Dots */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">With Dots</h2>
                  <div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
                    <div className="text-center">
                      {/* Start */}
                      <ul className="inline-flex flex-wrap text-sm font-medium">
                        <li className="after:content-['·'] last:after:hidden after:text-slate-400 after:px-2">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Home</a>
                        </li>
                        <li className="after:content-['·'] last:after:hidden after:text-slate-400 after:px-2">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Settings</a>
                        </li>
                        <li className="after:content-['·'] last:after:hidden after:text-slate-400 after:px-2">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Notifications</a>
                        </li>
                      </ul>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* With Chevrons */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">With Chevrons</h2>
                  <div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
                    <div className="text-center">
                      {/* Start */}
                      <ul className="inline-flex flex-wrap text-sm font-medium">
                        <li className="flex items-center">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Home</a>
                          <svg className="h-4 w-4 fill-current text-slate-400 mx-3" viewBox="0 0 16 16">
                            <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
                          </svg>
                        </li>
                        <li className="flex items-center">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Settings</a>
                          <svg className="h-4 w-4 fill-current text-slate-400 mx-3" viewBox="0 0 16 16">
                            <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
                          </svg>
                        </li>
                        <li className="flex items-center">
                          <a className="text-slate-500 hover:text-indigo-500" href="#0">Notifications</a>
                        </li>
                      </ul>
                      {/* End */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default BreadcrumbPage;
--- a/src/pages/component/DropdownPage.jsx
+++ b/src/pages/component/DropdownPage.jsx
@@ -1,123 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import DropdownClassic from '../../components/DropdownClassic';
 import DropdownFull from '../../components/DropdownFull';
 import DropdownFilter from '../../components/DropdownFilter';
 import DropdownProfile from '../../components/DropdownProfile';
 import DropdownSwitch from '../../components/DropdownSwitch';
 import DropdownNotifications from '../../components/DropdownNotifications';
 import DropdownHelp from '../../components/DropdownHelp';
 import DropdownEditMenu from '../../components/DropdownEditMenu';
 import Datepicker from '../../components/Datepicker';
 function DropdownPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Dropdown ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8 mb-80">
                {/* Classic Dropdown */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Classic Dropdown</h2>
                  {/* Start */}
                  <DropdownClassic />
                  {/* End */}
                </div>
                {/* Full-width Dropdown */}
                <div className="w-80">
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Full-width Dropdown</h2>
                  <DropdownFull />
                </div>
                {/* Filter */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Filter</h2>
                  <DropdownFilter />
                </div>
                {/* Profile */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Profile</h2>
                  <DropdownProfile />
                </div>
                {/* Switch Account */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Switch Account</h2>
                  <DropdownSwitch />
                </div>
                {/* Notification */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Notification</h2>
                  <DropdownNotifications />
                </div>
                {/* Help Center */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Help Center</h2>
                  <DropdownHelp />
                </div>
                {/* Quick Selection */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Quick Selection</h2>
                  <DropdownEditMenu className="relative inline-flex">
                    <li>
                      <a className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" href="#0">Option 1</a>
                    </li>
                    <li>
                      <a className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" href="#0">Option 2</a>
                    </li>
                    <li>
                      <a className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
                    </li>
                  </DropdownEditMenu>
                </div>
                {/* Datepicker (built with flatpickr) */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Datepicker (built with <a className="underline hover:no-underline" href="https://github.com/flatpickr/flatpickr" target="_blank" rel="noreferrer">flatpickr</a>)</h2>
                  <Datepicker />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default DropdownPage;
--- a/src/pages/component/FormPage.jsx
+++ b/src/pages/component/FormPage.jsx
@@ -1,384 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import Tooltip from '../../components/Tooltip';
 function FormPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [toggle1, setToggle1] = useState(true);
  const [toggle2, setToggle2] = useState(false);
  const [toggle3, setToggle3] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Form ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Input Types */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Input Types</h2>
                  <div className="grid gap-5 md:grid-cols-3">
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="default">Default</label>
                        <input id="default" className="form-input w-full" type="text" />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <div className="flex items-center justify-between">
                          <label className="block text-sm font-medium mb-1" htmlFor="tooltip">W/ Tooltip</label>
                          <Tooltip className="ml-2" bg="dark" size="md">
                            <div className="text-sm text-slate-200">Excepteur sint occaecat cupidata non proident, sunt.</div>
                          </Tooltip>
                        </div>
                        <input id="tooltip" className="form-input w-full" type="text" />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Mandatory <span className="text-rose-500">*</span></label>
                        <input id="mandatory" className="form-input w-full" type="text" required />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="prefix">W/ Prefix</label>
                        <div className="relative">
                          <input id="prefix" className="form-input w-full pl-12" type="text" />
                          <div className="absolute inset-0 right-auto flex items-center pointer-events-none">
                            <span className="text-sm text-slate-400 font-medium px-3">USD</span>
                          </div>
                        </div>
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="suffix">W/ Suffix</label>
                        <div className="relative">
                          <input id="suffix" className="form-input w-full pr-8" type="text" />
                          <div className="absolute inset-0 left-auto flex items-center pointer-events-none">
                            <span className="text-sm text-slate-400 font-medium px-3">%</span>
                          </div>
                        </div>
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="placeholder">W/ Placeholder</label>
                        <input id="placeholder" className="form-input w-full" type="text" placeholder="Something cool..." />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <form>
                        <label className="block text-sm font-medium mb-1" htmlFor="icon">W/ Icon</label>
                        <div className="relative">
                          <input id="icon" className="form-input w-full pl-9" type="text" />
                          <div className="absolute inset-0 right-auto flex items-center pointer-events-none">
                            <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 ml-3 mr-2" 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" />
                            </svg>
                          </div>
                        </div>
                      </form>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <div>
                          <label className="block text-sm font-medium mb-1" htmlFor="supporting-text">W/ Supporting Text</label>
                          <input id="supporting-text" className="form-input w-full" type="text" />
                        </div>
                        <div className="text-xs mt-1">Supporting text goes here!</div>
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <form>
                        <label className="block text-sm font-medium mb-1" htmlFor="form-search">Search</label>
                        <div className="relative">
                          <input id="form-search" className="form-input w-full pl-9" type="search" />
                          <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                            <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                              <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                              <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                            </svg>
                          </button>
                        </div>
                      </form>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Input Sizes */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Input Sizes</h2>
                  <div className="grid gap-5 md:grid-cols-3">
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="small">Small</label>
                        <input id="small" className="form-input w-full px-2 py-1" type="text" />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="normal">Default</label>
                        <input id="normal" className="form-input w-full" type="text" />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="large">Large</label>
                        <input id="large" className="form-input w-full px-4 py-3" type="text" />
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Input States */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Input States</h2>
                  <div className="grid gap-5 md:grid-cols-3">
                    <div>
                      {/* Start */}
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="disabled">Disabled</label>
                        <input id="disabled" className="form-input w-full disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed" type="text" placeholder="Something cool..." disabled />
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <div>
                          <label className="block text-sm font-medium mb-1" htmlFor="error">Error <span className="text-rose-500">*</span></label>
                          <input id="error" className="form-input w-full border-rose-300" type="text" />
                        </div>
                        <div className="text-xs mt-1 text-rose-500">This field is required!</div>
                      </div>
                      {/* End */}
                    </div>
                    <div>
                      {/* Start */}
                      <div>
                        <div>
                          <label className="block text-sm font-medium mb-1" htmlFor="success">Success <span className="text-rose-500">*</span></label>
                          <input id="success" className="form-input w-full border-emerald-300" type="text" />
                        </div>
                        <div className="text-xs mt-1 text-emerald-500">Sounds good!</div>
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Select */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Select</h2>
                  <label className="block text-sm font-medium mb-1" htmlFor="country">Country</label>
                  <select id="country" className="form-select">
                    <option>Italy</option>
                    <option>USA</option>
                    <option>United Kingdom</option>
                  </select>
                </div>
                {/* Checkbox */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Checkbox</h2>
                  <div className="flex flex-wrap items-center -m-3">
                    <div className="m-3">
                      {/* Start */}
                      <label className="flex items-center">
                        <input type="checkbox" className="form-checkbox" />
                        <span className="text-sm ml-2">Active</span>
                      </label>
                      {/* End */}
                    </div>
                    <div className="m-3">
                      {/* Start */}
                      <label className="flex items-center">
                        <input type="checkbox" className="form-checkbox" />
                        <span className="text-sm ml-2">Selected</span>
                      </label>
                      {/* End */}
                    </div>
                    <div className="m-3">
                      {/* Start */}
                      <label className="flex items-center">
                        <input type="checkbox" className="form-checkbox disabled:bg-slate-50" disabled />
                        <span className="text-sm ml-2">Disabled</span>
                      </label>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Radio */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Radio</h2>
                  <div className="flex flex-wrap items-center -m-3">
                    <div className="m-3">
                      {/* Start */}
                      <label className="flex items-center">
                        <input type="radio" name="radio-buttons" className="form-radio" />
                        <span className="text-sm ml-2">Active</span>
                      </label>
                      {/* End */}
                    </div>
                    <div className="m-3">
                      {/* Start */}
                      <label className="flex items-center">
                        <input type="radio" name="radio-buttons" className="form-radio" />
                        <span className="text-sm ml-2">Selected</span>
                      </label>
                      {/* End */}
                    </div>
                    <div className="m-3">
                      {/* Start */}
                      <label className="flex items-center">
                        <input type="radio" name="radio-buttons" className="form-radio disabled:bg-slate-50" disabled />
                        <span className="text-sm ml-2">Disabled</span>
                      </label>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Toggle Switch */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Toggle Switch</h2>
                  <div className="flex flex-wrap items-center -m-3">
                    <div className="m-3 w-24">
                      {/* Start */}
                      <div className="flex items-center">
                        <div className="form-switch">
                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle1} onChange={() => setToggle1(!toggle1)} />
                          <label className="bg-slate-400" htmlFor="switch-1">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                            <span className="sr-only">Switch label</span>
                          </label>
                        </div>
                        <div className="text-sm text-slate-400 italic ml-2">{toggle1 ? 'On' : 'Off'}</div>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-3 w-24">
                      {/* Start */}
                      <div className="flex items-center">
                        <div className="form-switch">
                          <input type="checkbox" id="switch-2" className="sr-only" checked={toggle2} onChange={() => setToggle2(!toggle2)} />
                          <label className="bg-slate-400" htmlFor="switch-2">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                            <span className="sr-only">Switch label</span>
                          </label>
                        </div>
                        <div className="text-sm text-slate-400 italic ml-2">{toggle2 ? 'On' : 'Off'}</div>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-3 w-32">
                      {/* Start */}
                      <div className="flex items-center">
                        <div className="form-switch">
                          <input type="checkbox" id="switch-3" className="sr-only" checked={toggle3} onChange={() => setToggle3(!toggle3)} disabled />
                          <label className="bg-slate-400" htmlFor="switch-3">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                            <span className="sr-only">Switch label</span>
                          </label>
                        </div>
                        <div className="text-sm text-slate-400 italic ml-2">Disabled</div>
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default FormPage;
--- a/src/pages/component/IconsPage.jsx
+++ b/src/pages/component/IconsPage.jsx
@@ -1,79 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function IconsPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Icons ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                <div className="text-sm">If you need more icons than what we currently support in Mosaic, check out these great packs 👇</div>
                {/* Nucleo */}
                <div>
                  <div className="flex items-start space-x-3 mb-6">
                    <h2 className="text-2xl text-slate-800 font-bold">Nucleo</h2>
                    <div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Recommended</div>
                  </div>
                  <div className="px-6 py-8 bg-slate-800 rounded-sm text-center xl:text-left xl:flex xl:flex-wrap xl:justify-between xl:items-center">
                    <div className="text-slate-300 mb-4 xl:mb-0 max-w-lg mx-auto xl:mx-0 2xl:max-w-none">99% of the icons used in Mosaic come from Nucleo; a huge library of 3K+ vector icons!</div>
                    <div className="inline-flex space-x-3">
                      <a className="btn bg-indigo-500 hover:bg-indigo-600 text-white" href="https://nucleoapp.com/pricing" target="_blank" rel="noreferrer">Buy Nucleo</a>
                      <a className="btn bg-slate-700 hover:bg-slate-600 text-white" href="https://nucleoapp.com/free-icons" target="_blank" rel="noreferrer">Download Free Pack</a>
                    </div>
                  </div>
                </div>
                {/* Tabler Icons */}
                <div>
                  <div className="flex items-start space-x-3 mb-6">
                    <h2 className="text-2xl text-slate-800 font-bold">Tabler Icons</h2>
                    <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Free Alternative</div>
                  </div>
                  <div className="px-6 py-8 bg-slate-800 rounded-sm text-center xl:text-left xl:flex xl:flex-wrap xl:justify-between xl:items-center">
                    <div className="text-slate-300 mb-4 xl:mb-0 max-w-lg mx-auto xl:mx-0 2xl:max-w-none">A set of 1250+ icons that are visually consistent with the style used in Mosaic!</div>
                    <div className="inline-flex space-x-3">
                      <a className="btn bg-indigo-500 hover:bg-indigo-600 text-white" href="https://tablericons.com/" target="_blank" rel="noreferrer">Download Tabler Icons</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default IconsPage;
--- a/src/pages/component/ModalPage.jsx
+++ b/src/pages/component/ModalPage.jsx
@@ -1,575 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ModalBasic from '../../components/ModalBasic';
 import ModalCookies from '../../components/ModalCookies';
 import ModalBlank from '../../components/ModalBlank';
 import ModalAction from '../../components/ModalAction';
 import ModalSearch from '../../components/ModalSearch';
 import AnnouncementIcon from '../../images/announcement-icon.svg';
 import ModalImage from '../../images/modal-image.jpg';
 function ModalPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [basicModalOpen, setBasicModalOpen] = useState(false);
  const [scrollbarModalOpen, setScrollbarModalOpen] = useState(false)
  const [cookiesModalOpen, setCookiesModalOpen] = useState(false)
  const [successModalOpen, setSuccessModalOpen] = useState(false)
  const [dangerModalOpen, setDangerModalOpen] = useState(false)
  const [infoModalOpen, setInfoModalOpen] = useState(false)
  const [feedbackModalOpen, setFeedbackModalOpen] = useState(false)
  const [newsletterModalOpen, setNewsletterModalOpen] = useState(false)
  const [announcementModalOpen, setAnnouncementModalOpen] = useState(false)
  const [integrationModalOpen, setIntegrationModalOpen] = useState(false)
  const [newsModalOpen, setNewsModalOpen] = useState(false)
  const [planModalOpen, setPlanModalOpen] = useState(false)
  const [searchModalOpen, setSearchModalOpen] = useState(false)
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Modal ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Basic */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    {/* Basic Modal */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="basic-modal" onClick={(e) => { e.stopPropagation(); setBasicModalOpen(true); }}>Basic Modal</button>
                      <ModalBasic id="basic-modal" modalOpen={basicModalOpen} setModalOpen={setBasicModalOpen} title="Basic Modal">
                        {/* Modal content */}
                        <div className="px-5 pt-4 pb-1">
                          <div className="text-sm">
                            <div className="font-medium text-slate-800 mb-2">Let’s Talk Paragraph</div>
                            <div className="space-y-2">
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </div>
                          </div>
                        </div>
                        {/* Modal footer */}
                        <div className="px-5 py-4">
                          <div className="flex flex-wrap justify-end space-x-2">
                            <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setBasicModalOpen(false); }}>Close</button>
                            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">I Understand</button>
                          </div>
                        </div>
                      </ModalBasic>
                      {/* End */}
                    </div>
                    {/* Modal w/ Scroll Bar */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="scrollbar-modal" onClick={(e) => { e.stopPropagation(); setScrollbarModalOpen(true); }}>Modal w/ Scroll Bar</button>
                      <ModalBasic id="scrollbar-modal" modalOpen={scrollbarModalOpen} setModalOpen={setScrollbarModalOpen} title="Modal w/ Scroll Bar">
                        {/* Modal content */}
                        <div className="px-5 py-4">
                          <div className="text-sm">
                            <div className="font-medium text-slate-800 mb-2">Let’s Talk Paragraph</div>
                            <div className="space-y-2">
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                              <p>Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Mattis enim ut tellus elementum el fringilla est ullamcorper eget nulla. Enim eu turpis egestas pretium aenean pharetra magna. Aliquam id diam maecenas ultricies mi eget us mauris vitae ultricies leo integer t malesuada fames ac turpis egestas maecenas pharetra volutpat lacus laoreet non.</p>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                              <p>Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Mattis enim ut tellus elementum el fringilla est ullamcorper eget nulla. Enim eu turpis egestas pretium aenean pharetra magna. Aliquam id diam maecenas ultricies mi eget us mauris vitae ultricies leo integer t malesuada fames ac turpis egestas maecenas pharetra volutpat lacus laoreet non.</p>
                            </div>
                          </div>
                        </div>
                        {/* Modal footer */}
                        <div className="sticky bottom-0 px-5 py-4 bg-white border-t border-slate-200">
                          <div className="flex flex-wrap justify-end space-x-2">
                            <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setScrollbarModalOpen(false); }}>Close</button>
                            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">I Understand</button>
                          </div>
                        </div>
                      </ModalBasic>
                      {/* End */}
                    </div>
                    {/* Cookies */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="cookies-modal" onClick={(e) => { e.stopPropagation(); setCookiesModalOpen(true); }}>Cookies</button>
                      <ModalCookies id="cookies-modal" modalOpen={cookiesModalOpen} setModalOpen={setCookiesModalOpen} title="We use cookies 🍪">
                        {/* Modal content */}
                        <div className="text-sm mb-5">
                          <div className="space-y-2">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                          </div>
                        </div>
                        {/* Modal footer */}
                        <div className="flex flex-wrap justify-end space-x-2">
                          <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setCookiesModalOpen(false); }}>Decline</button>
                          <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white" onClick={(e) => { e.stopPropagation(); setCookiesModalOpen(false); }}>I Accept</button>
                        </div>
                      </ModalCookies>
                      {/* End */}
                    </div>                  
                  </div>
                </div>
                {/* Feedback */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Feedback</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    {/* Success Modal */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="success-modal" onClick={(e) => { e.stopPropagation(); setSuccessModalOpen(true); }}>Success Modal</button>
                      <ModalBlank id="success-modal" modalOpen={successModalOpen} setModalOpen={setSuccessModalOpen}>
                        <div className="p-5 flex space-x-4">
                          {/* Icon */}
                          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-emerald-100">
                            <svg className="w-4 h-4 shrink-0 fill-current text-emerald-500" viewBox="0 0 16 16">
                              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
                            </svg>
                          </div>
                          {/* Content */}
                          <div>
                            {/* Modal header */}
                            <div className="mb-2">
                              <div className="text-lg font-semibold text-slate-800">Upgrade your Subscription?</div>
                            </div>
                            {/* Modal content */}
                            <div className="text-sm mb-10">
                              <div className="space-y-2">
                                <p>Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.</p>
                              </div>
                            </div>
                            {/* Modal footer */}
                            <div className="flex flex-wrap justify-end space-x-2">
                              <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setSuccessModalOpen(false); }}>Cancel</button>
                              <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Yes, Upgrade it</button>
                            </div>
                          </div>
                        </div>
                      </ModalBlank>
                      {/* End */}
                    </div>
                    {/* Danger Modal */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="danger-modal" onClick={(e) => { e.stopPropagation(); setDangerModalOpen(true); }}>Danger Modal</button>
                      <ModalBlank id="danger-modal" modalOpen={dangerModalOpen} setModalOpen={setDangerModalOpen}>
                        <div className="p-5 flex space-x-4">
                          {/* Icon */}
                          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-rose-100">
                            <svg className="w-4 h-4 shrink-0 fill-current text-rose-500" viewBox="0 0 16 16">
                              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
                            </svg>
                          </div>
                          {/* Content */}
                          <div>
                            {/* Modal header */}
                            <div className="mb-2">
                              <div className="text-lg font-semibold text-slate-800">Delete 1 customer?</div>
                            </div>
                            {/* Modal content */}
                            <div className="text-sm mb-10">
                              <div className="space-y-2">
                                <p>Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.</p>
                              </div>
                            </div>
                            {/* Modal footer */}
                            <div className="flex flex-wrap justify-end space-x-2">
                              <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setDangerModalOpen(false); }}>Cancel</button>
                              <button className="btn-sm bg-rose-500 hover:bg-rose-600 text-white">Yes, Delete it</button>
                            </div>
                          </div>
                        </div>
                      </ModalBlank>
                      {/* End */}
                    </div>
                    {/* Info Modal */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="info-modal" onClick={(e) => { e.stopPropagation(); setInfoModalOpen(true); }}>Info Modal</button>
                      <ModalBlank id="info-modal" modalOpen={infoModalOpen} setModalOpen={setInfoModalOpen}>
                        <div className="p-5 flex space-x-4">
                          {/* Icon */}
                          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-indigo-100">
                            <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500" viewBox="0 0 16 16">
                              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
                            </svg>
                          </div>
                          {/* Content */}
                          <div>
                            {/* Modal header */}
                            <div className="mb-2">
                              <div className="text-lg font-semibold text-slate-800">Create new Event?</div>
                            </div>
                            {/* Modal content */}
                            <div className="text-sm mb-10">
                              <div className="space-y-2">
                                <p>Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.</p>
                              </div>
                            </div>
                            {/* Modal footer */}
                            <div className="flex flex-wrap justify-end space-x-2">
                              <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setInfoModalOpen(false); }}>Cancel</button>
                              <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Yes, Create it</button>
                            </div>
                          </div>
                        </div>
                      </ModalBlank>
                      {/* End */}
                    </div>                                    
                  </div>
                </div>
                {/* Product */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Product</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    {/* Send Feedback */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="feedback-modal" onClick={(e) => { e.stopPropagation(); setFeedbackModalOpen(true); }}>Send Feedback</button>
                      <ModalBasic id="feedback-modal" modalOpen={feedbackModalOpen} setModalOpen={setFeedbackModalOpen} title="Send Feedback">
                        {/* Modal content */}
                        <div className="px-5 py-4">
                          <div className="text-sm">
                            <div className="font-medium text-slate-800 mb-3">Let us know what you think 🙌</div>
                          </div>
                          <div className="space-y-3">
                            <div>
                              <label className="block text-sm font-medium mb-1" htmlFor="name">Name <span className="text-rose-500">*</span></label>
                              <input id="name" className="form-input w-full px-2 py-1" type="text" required />
                            </div>
                            <div>
                              <label className="block text-sm font-medium mb-1" htmlFor="email">Email <span className="text-rose-500">*</span></label>
                              <input id="email" className="form-input w-full px-2 py-1" type="email" required />
                            </div>
                            <div>
                              <label className="block text-sm font-medium mb-1" htmlFor="feedback">Message <span className="text-rose-500">*</span></label>
                              <textarea id="feedback" className="form-textarea w-full px-2 py-1" rows="4" required></textarea>
                            </div>
                          </div>
                        </div>
                        {/* Modal footer */}
                        <div className="px-5 py-4 border-t border-slate-200">
                          <div className="flex flex-wrap justify-end space-x-2">
                            <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setFeedbackModalOpen(false); }}>Cancel</button>
                            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Send</button>
                          </div>
                        </div>
                      </ModalBasic>
                      {/* End */}
                    </div>
                    {/* Newsletter */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="newsletter-modal" onClick={(e) => { e.stopPropagation(); setNewsletterModalOpen(true); }}>Newsletter</button>
                      <ModalAction id="newsletter-modal" modalOpen={newsletterModalOpen} setModalOpen={setNewsletterModalOpen}>
                        {/* Modal header */}
                        <div className="mb-2 text-center">
                          {/* Icon */}
                          <div className="mb-3">
                            <svg className="inline-flex w-12 h-12 rounded-full shrink-0 fill-current" viewBox="0 0 48 48">
                              <rect className="text-indigo-100" width="48" height="48" rx="24" />
                              <path className="text-indigo-300" d="M19 16h7a8 8 0 110 16h-7V16z" />
                              <path className="text-indigo-500" d="M26 24l-7-6v5h-8v2h8v5z" />
                            </svg>
                          </div>
                          <div className="text-lg font-semibold text-slate-800">Subscribe to the Newsletter!</div>
                        </div>
                        {/* Modal content */}
                        <div className="text-center">
                          <div className="text-sm mb-6">
                            Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.
                          </div>
                          {/* Submit form */}
                          <form className="flex max-w-sm m-auto">
                            <div className="grow mr-2">
                              <label htmlFor="subscribe-form" className="sr-only">Leave your Email</label>
                              <input id="subscribe-form" className="form-input w-full px-2 py-1" type="email" />
                            </div>
                            <button type="submit" className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Subscribe</button>
                          </form>
                          <div className="text-xs text-slate-500 italic mt-3">
                            I respect your privacy. No spam. Unsubscribe at any time!
                          </div>
                        </div>
                      </ModalAction>
                      {/* End */}
                    </div>
                    {/* Announcement */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="announcement-modal" onClick={(e) => { e.stopPropagation(); setAnnouncementModalOpen(true); }}>Announcement</button>
                      <ModalAction id="announcement-modal" modalOpen={announcementModalOpen} setModalOpen={setAnnouncementModalOpen}>
                        {/* Modal header */}
                        <div className="mb-2 text-center">
                          {/* Icon */}
                          <div className="inline-flex mb-2">
                            <img src={AnnouncementIcon} width="80" height="80" alt="Announcement" />
                          </div>
                          <div className="text-lg font-semibold text-slate-800">You Unlocked Level 2!</div>
                        </div>
                        {/* Modal content */}
                        <div className="text-center">
                          <div className="text-sm mb-5">
                            Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.
                          </div>
                          {/* CTAs */}
                          <div className="space-y-3">
                            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Claim your Reward -&gt;</button>
                            <div>
                              <a className="font-medium text-sm text-indigo-500 hover:text-indigo-600" href="#0" onClick={(e) => { e.preventDefault(); setAnnouncementModalOpen(true); }}>Not Now!</a>
                            </div>
                          </div>
                        </div>
                      </ModalAction>
                      {/* End */}
                    </div> 
                    {/* Integration */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="integration-modal" onClick={(e) => { e.stopPropagation(); setIntegrationModalOpen(true); }}>Integration</button>
                      <ModalAction id="integration-modal" modalOpen={integrationModalOpen} setModalOpen={setIntegrationModalOpen}>
                        {/* Modal header */}
                        <div className="mb-5 text-center">
                          {/* Icons */}
                          <div className="inline-flex items-center justify-center space-x-3 mb-4">
                            {/* Mosaic logo */}
                            <svg width="48" height="48" viewBox="0 0 32 32">
                              <defs>
                                <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="nl-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="nl-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(#nl-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(#nl-b)" />
                            </svg>
                            {/* Arrows */}
                            <svg className="h-4 w-4 fill-current text-slate-400" viewBox="0 0 16 16">
                              <path d="M5 3V0L0 4l5 4V5h8a1 1 0 000-2H5zM11 11H3a1 1 0 000 2h8v3l5-4-5-4v3z" />
                            </svg>
                            {/* Cruip logo */}
                            <svg width="48" height="48" viewBox="0 0 48 48">
                              <rect fill="#E0E7FF" width="48" height="48" rx="24" />
                              <path d="M34 24c0-1.38-1.126-2.5-2.515-2.5A2.507 2.507 0 0028.97 24c0 1.38 1.126 2.5 2.515 2.5A2.507 2.507 0 0034 24" fill="#34D399" />
                              <path d="M31.112 31.07a10.024 10.024 0 01-4.582 2.615c-.8.205-1.64.315-2.506.315a10.007 10.007 0 01-7.553-3.426A9.943 9.943 0 0114 24c0-2.517.932-4.816 2.471-6.574A10.007 10.007 0 0124.024 14a10.024 10.024 0 017.088 2.93l-3.544 3.535A5.003 5.003 0 0024.024 19a5.006 5.006 0 00-5.012 5l.001.13A5.007 5.007 0 0024.024 29c1.384 0 2.637-.56 3.544-1.465l3.544 3.536z" fill="#6366F1" />
                            </svg>
                          </div>
                          <div className="text-lg font-semibold text-slate-800">Connect Mosaic with your Cruip account</div>
                        </div>
                        {/* Modal content */}
                        <div className="text-sm mb-5">
                          <div className="font-medium text-slate-800 mb-3">Mosaic would like to:</div>
                          <ul className="space-y-2 mb-5">
                            <li className="flex items-center">
                              <svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
                                <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
                              </svg>
                              <div>Lorem ipsum dolor sit amet</div>
                            </li>
                            <li className="flex items-center">
                              <svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
                                <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
                              </svg>
                              <div>Semper eget duis at tellus at urna</div>
                            </li>
                            <li className="flex items-center">
                              <svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
                                <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
                              </svg>
                              <div>Lorem ipsum dolor sit amet</div>
                            </li>
                            <li className="flex items-center">
                              <svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
                                <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
                              </svg>
                              <div>Suspendisse faucibus interdum</div>
                            </li>
                          </ul>
                          <div className="text-xs text-slate-500">By clicking on Allow access, you authorize Mosaic to use your information in accordance with its <a className="text-indigo-500 hover:text-indigo-600" href="#0">Privacy Policy</a>. You can stop it at any time on the integrations page of your Mosaic account.</div>
                        </div>
                        {/* Modal footer */}
                        <div className="flex flex-wrap justify-end space-x-2">
                          <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setIntegrationModalOpen(false); }}>Cancel</button>
                          <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Allow Access</button>
                        </div>
                      </ModalAction>
                      {/* End */}
                    </div>
                    {/* What's New */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="news-modal" onClick={(e) => { e.stopPropagation(); setNewsModalOpen(true); }}>What's New</button>
                      <ModalBlank id="news-modal" modalOpen={newsModalOpen} setModalOpen={setNewsModalOpen}>
                        <div className="relative">
                          <img className="w-full" src={ModalImage} width="460" height="200" alt="New on Mosaic" />
                          {/* Close button */}
                          <button className="absolute top-0 right-0 mt-5 mr-5 text-slate-50 hover:text-white" onClick={(e) => { e.stopPropagation(); setNewsModalOpen(false); }}>
                            <div className="sr-only">Close</div>
                            <svg className="w-4 h-4 fill-current">
                              <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
                            </svg>
                          </button>
                        </div>
                        <div className="p-5">
                          {/* Modal header */}
                          <div className="mb-2">
                            <div className="mb-3">
                              <div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">New on Mosaic</div>
                            </div>
                            <div className="text-lg font-semibold text-slate-800">Help your team work faster with X 🏃‍♂️</div>
                          </div>
                          {/* Modal content */}
                          <div className="text-sm mb-5">
                            <div className="space-y-2">
                              <p>You might not be aware of this fact, but every frame, digital video, canvas, responsive design, and image often has a rectangular shape that is exceptionally precise in proportion (or ratio).</p>
                              <p>The ratio has to be well-defined to make shapes fit into different and distinct mediums, such as computer, movies, television and camera screens.</p>
                            </div>
                          </div>
                          {/* Modal footer */}
                          <div className="flex flex-wrap justify-end space-x-2">
                            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white" onClick={(e) => { e.stopPropagation(); setNewsModalOpen(false); }}>Cool, I Got it</button>
                          </div>
                        </div>                      
                      </ModalBlank>
                      {/* End */}
                    </div>
                    {/* Change your Plan */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="feedback-modal" onClick={(e) => { e.stopPropagation(); setPlanModalOpen(true); }}>Change your Plan</button>
                      <ModalBasic id="feedback-modal" modalOpen={planModalOpen} setModalOpen={setPlanModalOpen} title="Change your Plan">
                        {/* Modal content */}
                        <div className="px-5 pt-4 pb-1">
                          <div className="text-sm">
                            <div className="mb-4">Upgrade or downgrade your plan:</div>
                            {/* Options */}
                            <ul className="space-y-2 mb-4">
                              <li>
                                <button className="w-full h-full text-left py-3 px-4 rounded bg-white border-2 border-indigo-400 shadow-sm duration-150 ease-in-out">
                                  <div className="flex items-center">
                                    <div className="w-4 h-4 border-4 border-indigo-500 rounded-full mr-3"></div>
                                    <div className="grow">
                                      <div className="flex flex-wrap items-center justify-between mb-0.5">
                                        <span className="font-medium text-slate-800">Mosaic Light <span className="text-xs italic text-slate-500 align-top">Current Plan</span></span>
                                        <span><span className="font-medium text-emerald-600">$39.00</span>/mo</span>
                                      </div>
                                      <div className="text-sm">2 MB · 1 member · 500 block limits</div>
                                    </div>
                                  </div>
                                </button>
                              </li>
                              <li>
                                <button className="w-full h-full text-left py-3 px-4 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                                  <div className="flex items-center">
                                    <div className="w-4 h-4 border-2 border-slate-300 rounded-full mr-3"></div>
                                    <div className="grow">
                                      <div className="flex flex-wrap items-center justify-between mb-0.5">
                                        <span className="font-semibold text-slate-800">Mosaic Basic <span className="text-xs italic text-indigo-500 align-top">Best Value ✨</span></span>
                                        <span><span className="font-medium text-emerald-600">$59.00</span>/mo</span>
                                      </div>
                                      <div className="text-sm">5 MB · 2 members · 1000 block limits</div>
                                    </div>
                                  </div>
                                </button>
                              </li>
                              <li>
                                <button className="w-full h-full text-left py-3 px-4 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                                  <div className="flex items-center">
                                    <div className="w-4 h-4 border-2 border-slate-300 rounded-full mr-3"></div>
                                    <div className="grow">
                                      <div className="flex flex-wrap items-center justify-between mb-0.5">
                                        <span className="font-semibold text-slate-800">Mosaic Plus</span>
                                        <span><span className="font-medium text-emerald-600">$79.00</span>/mo</span>
                                      </div>
                                      <div className="text-sm">10 MB · 5 members · Unlimited block limits</div>
                                    </div>
                                  </div>
                                </button>
                              </li>
                            </ul>
                            <div className="text-xs text-slate-500">Your workspace’s Mosaic Light Plan is set to $39 per month and will renew on August 9, 2021.</div>
                          </div>
                        </div>
                        {/* Modal footer */}
                        <div className="px-5 py-4">
                          <div className="flex flex-wrap justify-end space-x-2">
                            <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setPlanModalOpen(false); }}>Cancel</button>
                            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Change Plan</button>
                          </div>
                        </div>
                      </ModalBasic>
                      {/* End */}
                    </div>
                    {/* Quick Find */}
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="quick-find-modal" onClick={(e) => { e.stopPropagation(); setSearchModalOpen(true); }}>Quick Find</button>
                      <ModalSearch id="quick-find-modal" searchId="quick-find" modalOpen={searchModalOpen} setModalOpen={setSearchModalOpen} />
                      {/* End */}
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default ModalPage;
--- a/src/pages/component/PaginationPage.jsx
+++ b/src/pages/component/PaginationPage.jsx
@@ -1,75 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import PaginationNumeric from '../../components/PaginationNumeric';
 import PaginationClassic from '../../components/PaginationClassic';
 import PaginationNumeric2 from '../../components/PaginationNumeric2';
 function PaginationPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Pagination ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Option 1 */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Option 1</h2>
                  <div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
                    <PaginationNumeric />
                  </div>
                </div>
                {/* Option 2 */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Option 2</h2>
                  <div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
                    <PaginationClassic />
                  </div>
                </div>
                {/* Option 3 */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Option 3</h2>
                  <div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
                    <PaginationNumeric2 />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default PaginationPage;
--- a/src/pages/component/TabsPage.jsx
+++ b/src/pages/component/TabsPage.jsx
@@ -1,176 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function TabsPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Tabs ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Simple */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Simple</h2>
                  {/* Start */}
                  <div className="mb-8 border-b border-slate-200">
                    <ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-indigo-500 whitespace-nowrap" href="#0">Account</a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Notifications</a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Integrations</a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Plans</a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Billing</a>
                      </li>
                    </ul>
                  </div>
                  {/* End */}
                </div>
                {/* With Underline */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">With Underline</h2>
                  {/* Start */}
                  <div className="relative mb-8">
                    <div className="absolute bottom-0 w-full h-px bg-slate-200" aria-hidden="true"></div>
                    <ul className="relative text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
                      <li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="block pb-3 text-indigo-500 whitespace-nowrap border-b-2 border-indigo-500" href="#0">Account</a>
                      </li>
                      <li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Notifications</a>
                      </li>
                      <li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Integrations</a>
                      </li>
                      <li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Plans</a>
                      </li>
                      <li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Billing</a>
                      </li>
                    </ul>
                  </div>
                  {/* End */}
                </div>
                {/* With Icons */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">With Icons</h2>
                  {/* Start */}
                  <div className="mb-8 border-b border-slate-200">
                    <ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-indigo-500 whitespace-nowrap flex items-center" href="#0">
                          <svg className="w-4 h-4 shrink-0 fill-current mr-2" viewBox=" 0 0 16 16">
                            <path d="M12.311 9.527c-1.161-.393-1.85-.825-2.143-1.175A3.991 3.991 0 0012 5V4c0-2.206-1.794-4-4-4S4 1.794 4 4v1c0 1.406.732 2.639 1.832 3.352-.292.35-.981.782-2.142 1.175A3.942 3.942 0 001 13.26V16h14v-2.74c0-1.69-1.081-3.19-2.689-3.733zM6 4c0-1.103.897-2 2-2s2 .897 2 2v1c0 1.103-.897 2-2 2s-2-.897-2-2V4zm7 10H3v-.74c0-.831.534-1.569 1.33-1.838 1.845-.624 3-1.436 3.452-2.422h.436c.452.986 1.607 1.798 3.453 2.422A1.943 1.943 0 0113 13.26V14z" />
                          </svg>
                          <span>Account</span>
                        </a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
                          <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
                            <path d="M14.3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8zM15 7c.6 0 1 .4 1 1 0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8c.6 0 1 .4 1 1s-.4 1-1 1C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6c0-.6.4-1 1-1z" />
                          </svg>
                          <span>Notifications</span>
                        </a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
                          <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
                            <path d="M3.414 2L9 7.586V16H7V8.414l-5-5V6H0V1a1 1 0 011-1h5v2H3.414zM15 0a1 1 0 011 1v5h-2V3.414l-3.172 3.172-1.414-1.414L12.586 2H10V0h5z" />
                          </svg>
                          <span>Integrations</span>
                        </a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
                          <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
                            <path d="M5 9h11v2H5V9zM0 9h3v2H0V9zm5 4h6v2H5v-2zm-5 0h3v2H0v-2zm5-8h7v2H5V5zM0 5h3v2H0V5zm5-4h11v2H5V1zM0 1h3v2H0V1z" />
                          </svg>
                          <span>Plans</span>
                        </a>
                      </li>
                      <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                        <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
                          <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
                            <path d="M15 4c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-1.7 0-3-1.3-3-3V3c0-1.7 1.3-3 3-3h7c.6 0 1 .4 1 1v3h4zM2 3v1h7V2H3c-.6 0-1 .4-1 1zm12 11V6H2v7c0 .6.4 1 1 1h11zm-3-5h2v2h-2V9z" />
                          </svg>
                          <span>Billing</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                  {/* End */}
                </div>
                {/* With Container */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">With Container</h2>
                  {/* Start */}
                  <ul className="flex flex-wrap -m-1">
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">Account</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Notifications</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Integrations</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Plans</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Billing</button>
                    </li>
                  </ul>
                  {/* End */}
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default TabsPage;
--- a/src/pages/component/TooltipPage.jsx
+++ b/src/pages/component/TooltipPage.jsx
@@ -1,203 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import Tooltip from '../../components/Tooltip';
 function TooltipPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Tooltip ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Tooltip Types */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Tooltip Types</h2>
                  <div className="flex flex-wrap items-center -m-4">
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip>
                          <div className="text-xs whitespace-nowrap">Just a tip</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Label White</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip bg="dark">
                          <div className="text-xs text-slate-200 whitespace-nowrap">Just a tip</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Label Dark</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip size="md">
                          <div className="text-xs">Excepteur sint occaecat cupidata non proident, sunt in.</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Basic White</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip size="md" bg="dark">
                          <div className="text-xs text-slate-200">Excepteur sint occaecat cupidata non proident, sunt in.</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Basic Dark</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip size="lg">
                          <div className="text-sm font-medium text-slate-500">Excepteur sint occaecat cupidata non proident, sunt in.</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Large White</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip size="lg" bg="dark">
                          <div className="text-sm font-medium text-slate-200">Excepteur sint occaecat cupidata non proident, sunt in.</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Large Dark</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip size="lg">
                          <div className="text-xs">
                            <div className="font-medium text-slate-800 mb-0.5">Let’s Talk Paragraph</div>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                          </div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Rich White</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip size="lg" bg="dark">
                          <div className="text-xs">
                            <div className="font-medium text-slate-200 mb-0.5">Let’s Talk Paragraph</div>
                            <div className="text-slate-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                          </div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Rich Dark</div>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Tooltip Position */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Tooltip Position</h2>
                  <div className="flex flex-wrap items-center -m-4">
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip>
                          <div className="text-xs whitespace-nowrap">Just a tip</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Top</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip position="bottom">
                          <div className="text-xs whitespace-nowrap">Just a tip</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Bottom</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip position="left">
                          <div className="text-xs whitespace-nowrap">Just a tip</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Left</div>
                      </div>
                    </div>
                    <div className="m-4">
                      <div className="flex items-center space-x-2">
                        {/* Start */}
                        <Tooltip position="right">
                          <div className="text-xs whitespace-nowrap">Just a tip</div>
                        </Tooltip>
                        {/* End */}
                        <div className="text-sm font-medium text-slate-500">Right</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default TooltipPage;
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -1,32 +1,392 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
 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 [buttonPanelOpen, setButtonPanelOpen] = useState(true);
  const [removePanelOpen, setRemovePanelOpen] = useState(false);
  const [changePanelOpen, setChangePanelOpen] = useState(false);
  const [toggle, setToggle] = useState(true);
  const [addPanelOpen, setAddPanelOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
    if (selectedItems.length > 0) {
      setButtonPanelOpen(false);
      setAddPanelOpen(false);
      setChangePanelOpen(true);
    }
    if (removePanelOpen === true) {
      setChangePanelOpen(false);
    }
    if (selectedItems.length === 0) {
      setRemovePanelOpen(false);
      setButtonPanelOpen(true);
      setChangePanelOpen(false);
    }
  };
  const openAddPanel = () => {
    setAddPanelOpen(true);
    setButtonPanelOpen(false);
  }
  const cancelAddPanel = () => {
    setAddPanelOpen(false);
    setButtonPanelOpen(true);
  }
  const openRemovePanel = () => {
    setRemovePanelOpen(true);
    setChangePanelOpen(false);
  }
  const applyRemovePanel = () => {
    setRemovePanelOpen(false);
    setButtonPanelOpen(true);
  }
  const userData = [
    {
      id: '0',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Dominik',
      property: 'First name',
      status: 'Completed',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
    {
      id: '1',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Lamakani',
      property: 'Second name',
      status: 'Progress',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '2',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '05.10.1983',
      property: 'Birthdate',
      status: 'Incorrect',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '3',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Male',
      property: 'Gender',
      status: 'Stored',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '4',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'United Kindom',
      property: 'Residence',
      status: 'Completed',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
    {
      id: '5',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Passport',
      property: 'Document type',
      status: 'Progress',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
    {
      id: '6',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'A123B3143',
      property: 'Document ID',
      status: 'Incorrect',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '7',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '05.10.2012',
      property: 'Issue date',
      status: 'Stored',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '8',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '05.10.2032',
      property: 'Expiry date',
      status: 'Stored',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '9',
      category: 'Social',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '@lamakani',
      property: 'Telegram',
      status: 'Completed',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '10',
      category: 'Social',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '@lamakani',
      property: 'Telegram',
      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">
+          <div className="pl-8 pr-[42px] py-8 w-full max-w-9xl mx-auto">
-
+            <div className="mx-auto flex flex-col lg:flex-row lg:space-x-8">
              {/* Page header */}
-            <div className="mb-8">
+              <div>
-              {/* Title */}
+                <div>
-              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
+                  <ul className="flex flex-wrap -m-1">
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                        View All
                      </button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                        Validated
                      </button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                        Blockchained
                      </button>
                    </li>
                  </ul>
                </div>
                {/* Table */}
                <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
              </div>
              {/* Left sidebar */}
              <div>
                {/* Button panel*/}
                <div className={`${!buttonPanelOpen && "hidden"} ml-2.5`}>
                  <div className="bg-white px-5 py-[43px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                    <button
                      className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white"
                      onClick={openAddPanel}
                    >
                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                        <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                      </svg>
                      <span className="ml-1">Add new field</span>
                    </button>
                  </div>
                </div>
                <div className="ml-2.5">
                  {/* Add panel */}
                  <div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
                    <div className="flex flex-col gap-y-3">
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
                        <input id="property" className="form-input w-full" type="text" required />
                      </div>
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
                        <input id="value" className="form-input w-full" type="text" required />
                      </div>
                      <div>
                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
                        <input id="seed" className="form-input w-full" type="text" required />
                      </div>
                    </div>
                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
                      <span className="block text-sm font-medium">Store data on blockchain</span>
                      <div className="flex items-center">
                        <div className="form-switch">
                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
                            <label className="bg-slate-400" htmlFor="switch-1">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                          </label>
                        </div>
                      </div>
                    </div>
                    {/* Buttons */}
                    <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
                      <button
                        className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
                        onClick={cancelAddPanel}
                      >
                        Cansel
                      </button>
                      <button
                        className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
                        onClick={cancelAddPanel}
                      >
                        Send
                      </button>
                    </div>
                  </div>
                  {/* Remove panel */}
                  <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
                    <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
                    <div className="flex flex-col">
                      {userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
                        <span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
                      ))}
                    </div>
                    <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
                      <span className="block text-sm font-medium">On blockchain too</span>
                      <div className="flex items-center">
                        <div className="form-switch">
                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
                            <label className="bg-slate-400" htmlFor="switch-1">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                          </label>
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
                      <button
                        className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
                        onClick={applyRemovePanel}
                        >
                        <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                          <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                        </svg>
                        <span className="ml-2">Apply</span>
                      </button>
                    </div>
                    <div className="flex justify-center">
                      <span className="text-descriptionSize text-slate-500 font-normal italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.</span>
                    </div>
                  </div>
                  {/* Details */}
                  <div className={`${(removePanelOpen || addPanelOpen) || 'hidden'} drop-shadow-lg`}>
                    {/* Top */}
                    <div className="bg-white rounded-t-xl px-5 pb-4 text-center">
                      <div className="mb-3 text-center">
                        <img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
                      </div>
                      <div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
                      <div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
                    </div>
                    {/* Divider */}
                    <div className="flex justify-between items-center" aria-hidden="true">
                      <svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
                      </svg>
                      <div className="grow w-full h-5 bg-white flex flex-col justify-center">
                        <div className="h-px w-full border-t border-dashed border-slate-200" />
                      </div>
                      <svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
                      </svg>
                    </div>
                    {/* Bottom */}
                    <div className="bg-white rounded-b-xl p-5 pt-[22px] pb-10 text-sm space-y-3">
                      <div className="flex justify-between space-x-1">
                        <span className="italic">Validator:</span>
                        <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">Recipient:</span>
                        <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">Transaction:</span>
                        <span className="font-medium text-slate-700 text-right">145 bytes</span>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Change panel */}
                <div className={`${!changePanelOpen && 'hidden'} ml-2.5`}>
                  <div className="flex flex-col bg-white px-5 pt-5 pb-6 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 gap-y-[8px]">
                    <button
                      className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
                      onClick={openRemovePanel}
                      >
                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                        <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                      </svg>
                      <span className="ml-2">Remove</span>
                    </button>
                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                      </svg>
                      <span className="ml-2">Update</span>
                    </button>
                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                      </svg>
                      <span className="ml-2">Share</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
--- a/src/pages/digitalId/Validate.jsx
+++ b/src/pages/digitalId/Validate.jsx
@@ -2,31 +2,121 @@ import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 import ValidatePanel from "../../partials/validate/ValidatePanel";
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
 import {Link} from "react-router-dom";
 import User06 from "../../images/user-28-06.jpg";
 import User08 from "../../images/user-28-08.jpg";
 import User09 from "../../images/user-28-09.jpg";
 import User05 from "../../images/user-28-05.jpg";
 function Validate () {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [validatePanelOpen, setValidatePanelOpen] = useState(true);
  const validateItems = [
    {
      id: '40',
      name: 'Today',
      data: '7234ABC342342352345',
      usersImges: [
        {
          size: 24,
          img: User06,
          imgId: "343"
        },
        {
          size: 24,
          img: User08,
          imgId: "345"
        },
        {
          size: 24,
          img: User09,
          imgId: "321"
        },
        {
          size: 24,
          img: User05,
          imgId: "387"
        },
      ],
      items: [
        {
          dataSeason: '7234ABC342342352345',
          id: '555',
          text: 'Second name for',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '534',
          text: 'Gender name for',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '567',
          text: 'Document ID name for',
          checked: true
        },
      ]
    },
  ];
  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">
-
+            <div className="w-fit">
            {/* Page header */}
-            <div className="mb-8">
+              <div className="pb-2.5">
                {/* Title */}
-              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Validate ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">0x28394710234192304719234</h1>
              </div>
              <Link className="font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validate">Explore -&gt;</Link>
              <div className="mb-5 mt-5">
                <ul className="flex flex-wrap -m-1">
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                      View All
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Correct
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Incorect
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Missed
                    </button>
                  </li>
                </ul>
              </div>
              <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
              <div className="pb-8 border-b border-zinc-200 mt-12">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
              </div>
              {validateItems.map(item => {
                return <ValidateRoadMap season={item} key={item.id}/>
              })}
            </div>
          </div>
          <ValidatePanel validatePanelOpen={validatePanelOpen} setValidatePanelOpen={setValidatePanelOpen}/>
        </main>
      </div>
    </div>
  )
--- a/src/pages/digitalId/ValidationLog.jsx
+++ b/src/pages/digitalId/ValidationLog.jsx
@@ -1,32 +1,193 @@
 import React, { useState } from 'react';
 import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import User05 from "../../images/user-28-05.jpg";
 import User08 from "../../images/user-28-08.jpg";
 import User09 from "../../images/user-28-09.jpg";
 import User06 from "../../images/user-28-06.jpg";
 import User03 from "../../images/user-28-03.jpg";
 import User01 from "../../images/user-28-01.jpg";
 function ValidationLog () {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const logItems = [
    {
      id: '20',
      name: 'Today',
      data: '7234ABC342342352345',
      usersImges: [
        {
          size: 24,
          img: User06,
          imgId: "249"
        },
        {
          size: 24,
          img: User08,
          imgId: "212"
        },
        {
          size: 24,
          img: User09,
          imgId: "217"
        },
        {
          size: 24,
          img: User05,
          imgId: "276"
        },
      ],
      items: [
        {
          dataSeason: '7234ABC342342352345',
          id: '434',
          text: 'Second name',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '476',
          text: 'First name by',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '422',
          text: 'Document name by',
          checked: true
        },
      ]
    },
    {
      id: '30',
      name: 'Last Week',
      data: '7234ABC342342352345',
      usersImges: [
        {
          size: 24,
          img: User06,
          imgId: "145"
        },
        {
          size: 24,
          img: User08,
          imgId: "182"
        },
        {
          size: 24,
          img: User09,
          imgId: "154"
        },
        {
          size: 24,
          img: User05,
          imgId: "114"
        },
      ],
      items: [
        {
          dataSeason: '7234ABC342342352345',
          id: '654',
          text: 'Gender name by',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '617',
          text: 'Second name Updated',
          checked: false
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '643',
          text: 'Gender name by',
          checked: true
        },
      ]
    },
  ]
  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">
+              <div className="pb-8 border-b border-zinc-200">
                {/* Title */}
-              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Validation log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID transaction log ✨</h1>
              </div>
              {/*Psosts*/}
              <div className="max-w-3xl m-auto mt-8">
                <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">
                    <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>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
                            {/* Avatars */}
                            <div className="flex shrink-0 -space-x-3 -ml-px">
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                          </div>
                        </header>
                        {/* List */}
                        <ul className="-my-2">
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
  )
--- a/src/pages/digitalId/Verify.jsx
+++ b/src/pages/digitalId/Verify.jsx
@@ -1,32 +1,167 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function Verify () {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [descriptionOpen, setDescriptionOpen] = useState(false);
  const verifiedData = [
    {
      "date": "31.05.2022 10:48",
      "fields": [
        {
          "name": "Residence",
          "value": "United Kindom",
          "hash1": "7234ABC3423423523457234ABC34234",
          "hash2": "7234ABC3423423523457234ABC34234"
        },
        {
          "name": "Document ID",
          "value": "A1321313",
          "hash1": "7234ABC3423423523457234ABC34234",
          "hash2": "7234ABC3423423523457234ABC34234"
        },
        {
          "name": 'Document ID',
          "value": 'A3451313',
          "hash1": '9584ABC3423423523457234ABC34234',
          "hash2": '9584ABC3423423523457234ABC34234'
        }
      ]
    },
    {
      "date": "31.05.2022 10:48",
      "fields": [
        {
          "name": 'Residence',
          "value": 'Holland',
          "hash1": '1024ABC3423423523457234ABC34234',
          "hash2": '1024ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'B3451313',
          "hash1": '7893ABC3423423523457234ABC34234',
          "hash2": '7893ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'A3451313',
          "hash1": '7286ABC3423423523457234ABC34234',
          "hash2": '7286ABC3423423523457234ABC34234'
        },
      ]
    },
    {
      "date": "31.05.2022 10:48",
      "fields": [
        {
          "name": 'Residence',
          "value": 'China',
          "hash1": '0000ABC3423423523457234ABC34234',
          "hash2": '0000ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'C3451313',
          "hash1": '1230ABC3423423523457234ABC34234',
          "hash2": '1230ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'D3451313',
          "hash1": '4483ABC3423423523457234ABC34234',
          "hash2": '4483ABC3423423523457234ABC34234'
        },
      ]
    }
  ];
  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">
+          <div className="px-4 sm:px-6 lg:px-8 py-11 w-full max-w-9xl mx-auto">
            {/* Page header */}
-            <div className="mb-8">
+            <div className="mb-11">
-              {/* Title */}
+               <div>
-              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Verify ✨</h1>
+                  <ul className="flex flex-wrap -m-1">
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                        View All
                      </button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                        Validated
                      </button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                        Blockchained
                      </button>
                    </li>
                  </ul>
                </div>
            </div>
            {/* Block */}
            <div className="flex flex-col gap-y-4">
              {verifiedData.map((item, index) => (
                <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
                  {/* Header */}
                  <div className="flex justify-between items-center h-[42px]">
                    <span className="font-normal text-descriptionSize text-slate-500" >
                      Yesterday at {item.date.slice(-5)} AM
                    </span>
                    {/* Buttons */}
                    <div className="flex gap-x-[6px]">
                      <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>
                      <div className="flex items-center">
                        <button
                            className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
                            aria-expanded={descriptionOpen}
                            onClick={() => setDescriptionOpen(!descriptionOpen)}
                        >
                          <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>
                    </div>
                  </div>
                  {/* Content */}
                  <div className='flex flex-col gap-y-[9px]'>
                    {item.fields.map((elem) => (
                      <div 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>
                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash1}</span>
                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash2}</span>
                          </div>
                          <span className='font-normal text-xxs'>{elem.name}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div> 
              ))}
            </div>
          </div>
        </main>
      </div>
    </div>
  )
--- a/src/pages/ecommerce/Cart.jsx
+++ b/src/pages/ecommerce/Cart.jsx
@@ -1,100 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import CartItems from '../../partials/ecommerce/CartItems';
 function Cart() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">
            {/* Page content */}
            <div className="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
              {/* Cart items */}
              <div className="mb-6 lg:mb-0">
                <div className="mb-3">
                  <div className="flex text-sm font-medium text-slate-400 space-x-2">
                    <span className="text-indigo-500">Review</span>
                    <span>-&gt;</span>
                    <span className="text-slate-500">Payment</span>
                    <span>-&gt;</span>
                    <span className="text-slate-500">Confirm</span>
                  </div>
                </div>
                <header className="mb-2">
                  {/* Title */}
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Shopping Cart (3) ✨</h1>
                </header>
                {/* Cart items */}
                <CartItems />
              </div>
              {/* Sidebar */}
              <div>
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                  <div className="text-slate-800 font-semibold mb-2">Order Summary</div>
                  {/* Order details */}
                  <ul className="mb-4">
                    <li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
                      <div>Products & Subscriptions</div>
                      <div className="font-medium text-slate-800">$205</div>
                    </li>
                    <li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
                      <div>Shipping</div>
                      <div className="font-medium text-slate-800">-</div>
                    </li>
                    <li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
                      <div>Taxes</div>
                      <div className="font-medium text-slate-800">$48</div>
                    </li>
                    <li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
                      <div>Total due (including taxes)</div>
                      <div className="font-medium text-emerald-600">$253</div>
                    </li>
                  </ul>
                  {/* Promo box */}
                  <div className="mb-6">
                    <div className="flex items-center justify-between">
                      <label className="block text-sm font-medium mb-1" htmlFor="promo">Promo Code</label>
                      <div className="text-sm text-slate-400 italic">optional</div>
                    </div>
                    <input id="promo" className="form-input w-full mb-2" type="text" />
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed shadow-none" disabled>Apply Code</button>
                  </div>
                  <div className="mb-4">
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now - $253.00</button>
                  </div>
                  <div className="text-xs text-slate-500 italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a className="underline hover:no-underline" href="#0">Terms</a>.</div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Cart;
--- a/src/pages/ecommerce/Cart2.jsx
+++ b/src/pages/ecommerce/Cart2.jsx
@@ -1,145 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import CartItems from '../../partials/ecommerce/CartItems';
 function Cart2() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="lg:relative lg:flex">
            {/* Content */}
            <div className="px-4 sm:px-6 lg:px-8 py-8 lg:grow lg:pr-8 xl:pr-16 2xl:ml-[80px]">
              <div className="lg:max-w-[640px] lg:mx-auto">
                {/* Cart items */}
                <div className="mb-6 lg:mb-0">
                  <div className="mb-3">
                    <div className="flex text-sm font-medium text-slate-400 space-x-2">
                      <span className="text-slate-500">Review</span>
                      <span>-&gt;</span>
                      <span className="text-indigo-500">Payment</span>
                      <span>-&gt;</span>
                      <span className="text-slate-500">Confirm</span>
                    </div>
                  </div>
                  <header className="mb-2">
                    {/* Title */}
                    <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Shopping Cart (3) ✨</h1>
                  </header>
                  <CartItems />
                </div>
              </div>
            </div>
            {/* Sidebar */}
            <div>
              <div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[320px] xl:w-[352px] 2xl:w-[calc(352px+80px)] lg:h-[calc(100vh-64px)]">
                <div className="py-8 px-4 lg:px-8 2xl:px-12">
                  <div className="max-w-sm mx-auto lg:max-w-none">
                    <h2 className="text-2xl text-slate-800 font-bold mb-6">Review & Pay</h2>
                    <div className="space-y-6">
                      {/* Order summary */}
                      <div>
                        <div className="text-slate-800 font-semibold mb-2">Order Summary</div>
                        <ul className="mb-4">
                          <li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
                            <div>Subtotal</div>
                            <div className="font-medium text-slate-800">$205</div>
                          </li>
                          <li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
                            <div>Total due (including taxes)</div>
                            <div className="font-medium text-emerald-600">$253</div>
                          </li>
                        </ul>
                      </div>
                      {/* Payment Details */}
                      <div>
                        <div className="text-slate-800 font-semibold mb-4">Payment Details</div>
                        <div className="space-y-4">
                          {/* Card Number */}
                          <div>
                            <label className="block text-sm font-medium mb-1" htmlFor="card-nr">Card Number <span className="text-rose-500">*</span></label>
                            <input id="card-nr" className="form-input w-full" type="text" placeholder="1234 1234 1234 1234" />
                          </div>
                          {/* Expiry and CVC */}
                          <div className="flex space-x-4">
                            <div className="flex-1">
                              <label className="block text-sm font-medium mb-1" htmlFor="card-expiry">Expiry Date <span className="text-rose-500">*</span></label>
                              <input id="card-expiry" className="form-input w-full" type="text" placeholder="MM/YY" />
                            </div>
                            <div className="flex-1">
                              <label className="block text-sm font-medium mb-1" htmlFor="card-cvc">CVC <span className="text-rose-500">*</span></label>
                              <input id="card-cvc" className="form-input w-full" type="text" placeholder="CVC" />
                            </div>
                          </div>
                          {/* Name on Card */}
                          <div>
                            <label className="block text-sm font-medium mb-1" htmlFor="card-name">Name on Card <span className="text-rose-500">*</span></label>
                            <input id="card-name" className="form-input w-full" type="text" placeholder="John Doe" />
                          </div>
                        </div>
                      </div>
                      {/* Additional Details */}
                      <div>
                        <div className="text-slate-800 font-semibold mb-4">Additional Details</div>
                        <div className="space-y-4">
                          {/* Email */}
                          <div>
                            <label className="block text-sm font-medium mb-1" htmlFor="card-email">Email <span className="text-rose-500">*</span></label>
                            <input id="card-email" className="form-input w-full" type="email" placeholder="john@company.com" />
                          </div>
                          {/* Country */}
                          <div>
                            <label className="block text-sm font-medium mb-1" htmlFor="card-country">Country <span className="text-rose-500">*</span></label>
                            <select id="card-country" className="form-select w-full">
                              <option>Italy</option>
                              <option>USA</option>
                              <option>United Kingdom</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div className="mt-6">
                        <div className="mb-4">
                          <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Pay $253.00</button>
                        </div>
                        <div className="text-xs text-slate-500 italic text-center">You'll be charged $253, including $48 for VAT in Italy</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Cart2;
--- a/src/pages/ecommerce/Cart3.jsx
+++ b/src/pages/ecommerce/Cart3.jsx
@@ -1,282 +0,0 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProductImage01 from '../../images/related-product-01.jpg';
 import ProductImage02 from '../../images/related-product-02.jpg';
 import ProductImage03 from '../../images/related-product-03.jpg';
 function Cart3() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="lg:relative lg:flex">
            {/* Content */}
            <div className="px-4 sm:px-6 lg:px-8 py-8 lg:grow lg:pr-8 xl:pr-16 2xl:ml-[80px]">
              <div className="lg:max-w-[640px] lg:mx-auto">
                {/* Cart items */}
                <div className="mb-6 lg:mb-0">
                  <div className="mb-3">
                    <div className="flex text-sm font-medium text-slate-400 space-x-2">
                      <span className="text-slate-500">Review</span>
                      <span>-&gt;</span>
                      <span className="text-slate-500">Payment</span>
                      <span>-&gt;</span>
                      <span className="text-indigo-500">Confirm</span>
                    </div>
                  </div>
                  <header className="mb-6">
                    {/* Title */}
                    <h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-2">Thank you for your order ✨</h1>
                    <p>You will soon receive a confirmation email with details of your order and a link to download the files.</p>
                  </header>
                  {/* Billing Information */}
                  <div>
                    <div className="text-slate-800 font-semibold mb-4">Billing Information</div>
                    <form>
                      <div className="space-y-4">
                        {/* 1st row */}
                        <div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-name">
                              Name
                            </label>
                            <input id="card-name" className="form-input w-full" type="text" defaultValue="Patrick" />
                          </div>
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-surname">
                              Surname
                            </label>
                            <input id="card-surname" className="form-input w-full" type="text" defaultValue="Sullivan" />
                          </div>
                        </div>
                        {/* 2nd row */}
                        <div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-address">
                              Address
                            </label>
                            <input id="card-address" className="form-input w-full" type="text" />
                          </div>
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-city">
                              Town/City
                            </label>
                            <input id="card-city" className="form-input w-full" type="text" />
                          </div>
                        </div>
                        {/* 3rd row */}
                        <div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-state">
                              State/Country
                            </label>
                            <input id="card-state" className="form-input w-full" type="text" />
                          </div>
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-country">
                              Country <span className="text-rose-500">*</span>
                            </label>
                            <select id="card-country" className="form-select w-full">
                              <option>Italy</option>
                              <option>USA</option>
                              <option>United Kingdom</option>
                            </select>
                          </div>
                        </div>
                        {/* 4th row */}
                        <div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-postcode">
                              Postcode
                            </label>
                            <input id="card-postcode" className="form-input w-full" type="text" />
                          </div>
                          <div className="flex-1">
                            <label className="block text-sm font-medium mb-1" htmlFor="card-vat">
                              VAT ID
                            </label>
                            <input id="card-vat" className="form-input w-full" type="text" />
                          </div>
                        </div>
                        <div className="text-right">
                          <button type="submit" className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500">
                            Download Invoice
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                  {/* Divider */}
                  <hr className="my-6 border-t border-slate-200" />
                  {/* Billing footer */}
                  <div className="bg-white rounded border border-slate-200 p-4">
                    <div className="text-center md:text-left md:flex md:items-center md:justify-between space-y-2 md:space-y-0 md:space-x-2">
                      <div className="text-sm">
                        Enjoy a <span className="font-medium text-slate-800">20% OFF</span> discount on your next order 🎉
                      </div>
                      <div className="relative inline-flex text-center px-3 py-1 rounded bg-emerald-500">
                        <div
                          className="absolute w-3 h-3 rounded-full bg-white left-0 -translate-x-1/2 top-1/2 -translate-y-1/2"
                          aria-hidden="true"
                        />
                        <div
                          className="absolute w-3 h-3 rounded-full bg-white right-0 translate-x-1/2 top-1/2 -translate-y-1/2"
                          aria-hidden="true"
                        />
                        <span className="text-sm text-emerald-50 font-medium uppercase">XMAS22</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {/* Sidebar */}
            <div>
              <div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[320px] xl:w-[352px] 2xl:w-[calc(352px+80px)] lg:h-[calc(100vh-64px)]">
                <div className="py-8 px-4 lg:px-8 2xl:px-12">
                  <div className="max-w-sm mx-auto lg:max-w-none">
                    <h2 className="text-2xl text-slate-800 font-bold mb-6">Order Summary</h2>
                    <div className="space-y-6">
                      {/* Order Details */}
                      <div>
                        <div className="text-slate-800 font-semibold mb-2">Order Details</div>
                        {/* Cart items */}
                        <ul>
                          {/* Cart item */}
                          <li className="flex items-center py-3 border-b border-slate-200">
                            <a className="block mr-2 xl:mr-4 shrink-0" href="#0">
                              <img className="w-16 xl:w-20" src={ProductImage01} width="200" height="142" alt="Product 01" />
                            </a>
                            <div className="grow">
                              <a href="#0">
                                <h4 className="text-sm font-medium text-slate-800 leading-tight">The Complete Front-End Development Course!</h4>
                              </a>
                            </div>
                            <div className="text-sm font-medium text-slate-800 ml-2">$69</div>
                          </li>
                          {/* Cart item */}
                          <li className="flex items-center py-3 border-b border-slate-200">
                            <a className="block mr-2 xl:mr-4 shrink-0" href="#0">
                              <img className="w-16 xl:w-20" src={ProductImage02} width="200" height="142" alt="Product 02" />
                            </a>
                            <div className="grow">
                              <a href="#0">
                                <h4 className="text-sm font-medium text-slate-800 leading-tight">Web Development Ultimate Course 2021</h4>
                              </a>
                            </div>
                            <div className="text-sm font-medium text-slate-800 ml-2">$69</div>
                          </li>
                          {/* Cart item */}
                          <li className="flex items-center py-3 border-b border-slate-200">
                            <a className="block mr-2 xl:mr-4 shrink-0" href="#0">
                              <img className="w-16 xl:w-20" src={ProductImage03} width="200" height="142" alt="Product 03" />
                            </a>
                            <div className="grow">
                              <a href="#0">
                                <h4 className="text-sm font-medium text-slate-800 leading-tight">Full-Stack JavaScript Course!</h4>
                              </a>
                            </div>
                            <div className="text-sm font-medium text-slate-800 ml-2">$69</div>
                          </li>
                        </ul>
                        {/* Fees, discount and total */}
                        <ul>
                          <li className="flex items-center justify-between py-3 border-b border-slate-200">
                            <div className="text-sm">Subtotal</div>
                            <div className="text-sm font-medium text-slate-800 ml-2">$205</div>
                          </li>
                          <li className="flex items-center justify-between py-3 border-b border-slate-200">
                            <div className="text-sm">Taxes</div>
                            <div className="text-sm font-medium text-slate-800 ml-2">$48</div>
                          </li>
                          <li className="flex items-center justify-between py-3 border-b border-slate-200">
                            <div className="flex items-center">
                              <span className="text-sm mr-2">Discount</span>
                              <span className="text-xs inline-flex whitespace-nowrap font-medium uppercase bg-slate-200 text-slate-500 rounded-full text-center px-2.5 py-1">
                                XMAS22
                              </span>
                            </div>
                            <div className="text-sm font-medium text-slate-800 ml-2">-$25</div>
                          </li>
                          <li className="flex items-center justify-between py-3 border-b border-slate-200">
                            <div className="text-sm">Total</div>
                            <div className="text-sm font-medium text-emerald-600 ml-2">$205</div>
                          </li>
                        </ul>
                      </div>
                      {/* Payment Details */}
                      <div>
                        <div className="text-slate-800 font-semibold mb-4">Payment Details</div>
                        <div className="text-sm rounded border border-slate-200 p-3">
                          <div className="flex items-center justify-between space-x-2">
                            {/* CC details */}
                            <div className="flex items-center">
                              {/* Mastercard icon */}
                              <svg className="shrink-0 mr-3" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
                                <rect fill="#1E293B" width="32" height="24" rx="3" />
                                <ellipse fill="#E61C24" cx="12.522" cy="12" rx="5.565" ry="5.647" />
                                <ellipse fill="#F99F1B" cx="19.432" cy="12" rx="5.565" ry="5.647" />
                                <path
                                  d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
                                  fill="#F26622"
                                />
                              </svg>
                              <div>
                                Ending with <span className="text-slate-800">2478</span>
                              </div>
                            </div>
                            {/* Expiry */}
                            <div className="italic ml-2">Expires 12/23</div>
                          </div>
                        </div>
                      </div>
                      <div className="mt-6">
                        <div className="mb-4">
                          <Link to="/ecommerce/pay" className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">
                            View Your Order
                          </Link>
                        </div>
                        <div className="text-xs text-slate-500 italic text-center">
                          Should you ever change your mind, we offer a 14-day, no-questions-asked refund policy.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Cart3;
--- a/src/pages/ecommerce/Customers.jsx
+++ b/src/pages/ecommerce/Customers.jsx
@@ -1,84 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import DeleteButton from '../../partials/actions/DeleteButton';
 import DateSelect from '../../components/DateSelect';
 import FilterButton from '../../components/DropdownFilter';
 import CustomersTable from '../../partials/customers/CustomersTable';
 import PaginationClassic from '../../components/PaginationClassic';
 function Customers() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
  };
  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Customers ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Delete button */}
                <DeleteButton selectedItems={selectedItems} />
                {/* Dropdown */}
                <DateSelect />
                {/* Filter button */}
                <FilterButton align="right" />
                {/* Add customer button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Add Customer</span>
                </button>
              </div>
            </div>
            {/* Table */}
            <CustomersTable selectedItems={handleSelectedItems} />
            {/* Pagination */}
            <div className="mt-8">
              <PaginationClassic />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Customers;
--- a/src/pages/ecommerce/Invoices.jsx
+++ b/src/pages/ecommerce/Invoices.jsx
@@ -1,109 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SearchForm from '../../partials/actions/SearchForm';
 import DeleteButton from '../../partials/actions/DeleteButton';
 import DateSelect from '../../components/DateSelect';
 import FilterButton from '../../components/DropdownFilter';
 import InvoicesTable from '../../partials/invoices/InvoicesTable';
 import PaginationClassic from '../../components/PaginationClassic';
 function Invoices() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
  };
  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="sm:flex sm:justify-between sm:items-center mb-5">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Invoices ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Search form */}
                <SearchForm placeholder="Search by invoice ID…" />
                {/* Create invoice button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Create Invoice</span>
                </button>
              </div>
            </div>
            {/* More actions */}
            <div className="sm:flex sm:justify-between sm:items-center mb-5">
              {/* Left side */}
              <div className="mb-4 sm:mb-0">
                <ul className="flex flex-wrap -m-1">
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">All <span className="ml-1 text-indigo-200">67</span></button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Paid <span className="ml-1 text-slate-400">14</span></button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Due <span className="ml-1 text-slate-400">34</span></button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Overdue <span className="ml-1 text-slate-400">19</span></button>
                  </li>
                </ul>
              </div>
              {/* Right side */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Delete button */}
                <DeleteButton selectedItems={selectedItems} />
                {/* Dropdown */}
                <DateSelect />
                {/* Filter button */}
                <FilterButton align="right" />
              </div>
            </div>
            {/* Table */}
            <InvoicesTable selectedItems={handleSelectedItems} />
            {/* Pagination */}
            <div className="mt-8">
              <PaginationClassic />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Invoices;
--- a/src/pages/ecommerce/Orders.jsx
+++ b/src/pages/ecommerce/Orders.jsx
@@ -1,79 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import DeleteButton from '../../partials/actions/DeleteButton';
 import DateSelect from '../../components/DateSelect';
 import FilterButton from '../../components/DropdownFilter';
 import OrdersTable from '../../partials/orders/OrdersTable';
 import PaginationClassic from '../../components/PaginationClassic';
 function Orders() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
  };
  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Orders ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Delete button */}
                <DeleteButton selectedItems={selectedItems} />
                {/* Dropdown */}
                <DateSelect />
                {/* Filter button */}
                <FilterButton align="right" />
                {/* Add customer button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Add Order</span>
                </button>
              </div>
            </div>
            {/* Table */}
            <OrdersTable selectedItems={handleSelectedItems} />
            {/* Pagination */}
            <div className="mt-8">
              <PaginationClassic />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Orders;
--- a/src/pages/ecommerce/Pay.jsx
+++ b/src/pages/ecommerce/Pay.jsx
@@ -1,150 +0,0 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import PayBg from '../../images/pay-bg.jpg';
 import User from '../../images/user-64-13.jpg';
 function Pay() {
  const [card, setCard] = useState(true);
  return (
    <>
      <header className="bg-white border-b border-slate-200">
        <div className="px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16 -mb-px">
            {/* 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>
            <Link className="block rounded-full bg-slate-100 text-slate-500 hover:text-slate-600" to="/ecommerce/cart">
              <span className="sr-only">Back</span>
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path className="fill-current" d="M15.95 14.536l4.242-4.243a1 1 0 111.415 1.414l-4.243 4.243 4.243 4.242a1 1 0 11-1.415 1.415l-4.242-4.243-4.243 4.243a1 1 0 01-1.414-1.415l4.243-4.242-4.243-4.243a1 1 0 011.414-1.414l4.243 4.243z" />
              </svg>
            </Link>
          </div>
        </div>
      </header>
      <main>
        <div className="relative pt-8">
          <div className="absolute inset-0 bg-slate-800 overflow-hidden" aria-hidden="true">
            <img className="object-cover h-full w-full filter blur opacity-10" src={PayBg} width="460" height="180" alt="Pay background" />
          </div>
          <div className="relative px-4 sm:px-6 lg:px-8 max-w-lg mx-auto">
            <img className="rounded-t shadow-lg" src={PayBg} width="460" height="180" alt="Pay background" />
          </div>
        </div>
        <div className="relative px-4 sm:px-6 lg:px-8 pb-8 max-w-lg mx-auto">
          <div className="bg-white px-8 pb-6 rounded-b shadow-lg">
            {/* Card header */}
            <div className="text-center mb-6">
              <div className="mb-2">
                <img className="-mt-8 inline-flex rounded-full" src={User} width="64" height="64" alt="User" />
              </div>
              <h1 className="text-xl leading-snug text-slate-800 font-semibold mb-2">Front-End Learning 🔥</h1>
              <div className="text-sm">
                Learn how to create real web apps using HTML & CSS. Code templates included.
              </div>
            </div>
            {/* Toggle */}
            <div className="flex justify-center mb-6">
              <div className="relative flex w-full p-1 bg-slate-50 rounded">
                <span className="absolute inset-0 m-1 pointer-events-none" aria-hidden="true">
                  <span className={`absolute inset-0 w-1/2 bg-white rounded border border-slate-200 shadow-sm transform transition duration-150 ease-in-out ${card ? 'translate-x-0' : 'translate-x-full'}`}></span>
                </span>
                <button
                  className="relative flex-1 text-sm font-medium p-1 duration-150 ease-in-out"
                  onClick={(e) => { e.preventDefault(); setCard(true); }}
                >Pay With Card</button>
                <button
                  className="relative flex-1 text-sm font-medium p-1 duration-150 ease-in-out"
                  onClick={(e) => { e.preventDefault(); setCard(false); }}
                >Pay With PayPal</button>
              </div>
            </div>
            {/* Card form */}
            {card &&
              <div>
                <div className="space-y-4">
                  {/* Card Number */}
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="card-nr">Card Number <span className="text-rose-500">*</span></label>
                    <input id="card-nr" className="form-input w-full" type="text" placeholder="1234 1234 1234 1234" />
                  </div>
                  {/* Expiry and CVC */}
                  <div className="flex space-x-4">
                    <div className="flex-1">
                      <label className="block text-sm font-medium mb-1" htmlFor="card-expiry">Expiry Date <span className="text-rose-500">*</span></label>
                      <input id="card-expiry" className="form-input w-full" type="text" placeholder="MM/YY" />
                    </div>
                    <div className="flex-1">
                      <label className="block text-sm font-medium mb-1" htmlFor="card-cvc">CVC <span className="text-rose-500">*</span></label>
                      <input id="card-cvc" className="form-input w-full" type="text" placeholder="CVC" />
                    </div>
                  </div>
                  {/* Name on Card */}
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="card-name">Name on Card <span className="text-rose-500">*</span></label>
                    <input id="card-name" className="form-input w-full" type="text" placeholder="John Doe" />
                  </div>
                  {/* Email */}
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="card-email">Email <span className="text-rose-500">*</span></label>
                    <input id="card-email" className="form-input w-full" type="email" placeholder="john@company.com" />
                  </div>
                </div>
                {/* htmlForm footer */}
                <div className="mt-6">
                  <div className="mb-4">
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Pay $253.00</button>
                  </div>
                  <div className="text-xs text-slate-500 italic text-center">You'll be charged $253, including $48 htmlFor VAT in Italy</div>
                </div>
              </div>
            }
            {/* PayPal htmlForm */}
            {!card &&
              <div>
                <div>
                  <div className="mb-4">
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Pay with PayPal - $253.00</button>
                  </div>
                  <div className="text-xs text-slate-500 italic text-center">You'll be charged $253, including $48 htmlFor VAT in Italy</div>
                </div>
              </div>
            }
          </div>
        </div>
      </main>    
    </>
  );
 }
 export default Pay;
--- a/src/pages/ecommerce/Product.jsx
+++ b/src/pages/ecommerce/Product.jsx
@@ -1,577 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProductImage from '../../images/product-image.jpg';
 import User03 from '../../images/user-32-03.jpg';
 import User04 from '../../images/user-32-04.jpg';
 import User05 from '../../images/user-32-05.jpg';
 import User07 from '../../images/user-32-07.jpg';
 import Related01 from '../../images/related-product-01.jpg';
 import Related02 from '../../images/related-product-02.jpg';
 import Related03 from '../../images/related-product-03.jpg';
 function Product() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">
            {/* Page content */}
            <div className="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
              {/* Content */}
              <div>
                <div className="mb-3">
                  <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">&lt;- Back To Listing</a>
                </div>
                <header className="mb-4">
                  {/* Title */}
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-2">Front-End Learning: Hands-On HTML & CSS In Real Web Apps ✨</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
                </header>
                {/* Meta */}
                <div className="space-y-3 sm:flex sm:items-center sm:justify-between sm:space-y-0 mb-6">
                  {/* Author */}
                  <div className="flex items-center sm:mr-4">
                    <a className="block mr-2 shrink-0" href="#0">
                      <img className="rounded-full" src={User07} width="32" height="32" alt="User 04" />
                    </a>
                    <a className="block text-sm font-semibold text-slate-800 whitespace-nowrap" href="#0">
                      Simona Lürwer
                    </a>
                  </div>
                  {/* Right side */}
                  <div className="flex flex-wrap items-center sm:justify-end space-x-4">
                    {/* Tag */}
                    <div className="inline-flex items-center text-xs font-medium text-slate-100 bg-slate-900 bg-opacity-60 rounded-full text-center px-2 py-0.5">
                      <svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-1" viewBox="0 0 12 12">
                        <path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
                      </svg>
                      <span>Special Offer</span>
                    </div>
                    {/* Rating */}
                    <div className="flex items-center space-x-2 mr-2">
                      {/* Stars */}
                      <div className="flex space-x-1">
                        <button>
                          <span className="sr-only">1 star</span>
                          <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                            <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                          </svg>
                        </button>
                        <button>
                          <span className="sr-only">2 stars</span>
                          <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                            <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                          </svg>
                        </button>
                        <button>
                          <span className="sr-only">3 stars</span>
                          <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                            <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                          </svg>
                        </button>
                        <button>
                          <span className="sr-only">4 stars</span>
                          <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                            <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                          </svg>
                        </button>
                        <button>
                          <span className="sr-only">5 stars</span>
                          <svg className="w-4 h-4 fill-current text-slate-300" viewBox="0 0 16 16">
                            <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                          </svg>
                        </button>
                      </div>
                      {/* Rate */}
                      <div className="inline-flex text-sm font-medium text-amber-600">4.2</div>
                    </div>
                  </div>
                </div>
                {/* Image */}
                <figure className="mb-6">
                  <img className="w-full rounded-sm" src={ProductImage} width="640" height="360" alt="Product" />
                </figure>
                {/* Product content */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Overview</h2>
                  <p className="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua u t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p className="mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <ul className="list-disc list-inside space-y-1 mb-6">
                    <li>E-commerce: Better lorem ipsum generator.</li>
                    <li>Booking: Lorem ipsum post generator.</li>
                    <li>Retail: Better lorem ipsum generator.</li>
                    <li>Services: Better lorem ipsum generator.</li>
                  </ul>
                  <blockquote className="text-slate-800 italic mb-6">
                    “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
                  </blockquote>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Reviews */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Featured Reviews (44)</h2>
                  <ul className="space-y-5 my-6">
                    {/* Review */}
                    <li>
                      <div className="flex items-center mb-2">
                        <img className="w-8 h-8 rounded-full mr-3" src={User07} width="32" height="32" alt="User 07" />
                        <div>
                          <div className="text-sm font-semibold text-slate-800 mb-1">Danielle Mark</div>
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-slate-300" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.6</div>
                          </div>
                        </div>
                      </div>
                      <div className="text-sm italic">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”</div>
                    </li>
                    {/* Review */}
                    <li>
                      <div className="flex items-center mb-2">
                        <img className="w-8 h-8 rounded-full mr-3" src={User05} width="32" height="32" alt="User 05" />
                        <div>
                          <div className="text-sm font-semibold text-slate-800 mb-1">Marija Urkjulz</div>
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.9</div>
                          </div>
                        </div>
                      </div>
                      <div className="text-sm italic">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”</div>
                    </li>
                    {/* Review */}
                    <li>
                      <div className="flex items-center mb-2">
                        <img className="w-8 h-8 rounded-full mr-3" src={User03} width="32" height="32" alt="User 03" />
                        <div>
                          <div className="text-sm font-semibold text-slate-800 mb-1">Rodrigo Pantoja</div>
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-slate-300" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.4</div>
                          </div>
                        </div>
                      </div>
                      <div className="text-sm italic">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”</div>
                    </li>
                    {/* Review */}
                    <li>
                      <div className="flex items-center mb-2">
                        <img className="w-8 h-8 rounded-full mr-3" src={User04} width="32" height="32" alt="User 04" />
                        <div>
                          <div className="text-sm font-semibold text-slate-800 mb-1">Juan Johnson</div>
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.9</div>
                          </div>
                        </div>
                      </div>
                      <div className="text-sm italic">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”</div>
                    </li>
                  </ul>
                  {/* Load More */}
                  <div className="text-center">
                    <button className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500 hover:text-slate-600">Load More Reviews</button>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Related */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Frequently Bought Together</h2>
                  <ul className="space-y-8 sm:space-y-5 my-6">
                    {/* Related item */}
                    <li className="sm:flex items-center">
                      <a className="block mb-4 sm:mb-0 mr-5 md:w-32 xl:w-auto shrink-0" href="#0">
                        <img className="rounded-sm" src={Related01} width="200" height="142" alt="Product 01" />
                      </a>
                      <div className="grow">
                        <a href="#0">
                          <h3 className="text-lg font-semibold text-slate-800 mb-1">The Complete Front-End Development Course!</h3>
                        </a>
                        <div className="text-sm mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
                        {/* Rating and price */}
                        <div className="flex flex-wrap items-center space-x-2">
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-slate-300" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.2</div>
                          </div>
                          <div className="text-slate-400">·</div>
                          {/* Price */}
                          <div>
                            <div className="inline-flex text-sm font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2 py-0.5">$89.00</div>
                          </div>
                        </div>
                      </div>
                    </li>
                    {/* Related item */}
                    <li className="sm:flex items-center">
                      <a className="block mb-4 sm:mb-0 mr-5 md:w-32 xl:w-auto shrink-0" href="#0">
                        <img className="rounded-sm" src={Related02} width="200" height="142" alt="Product 02" />
                      </a>
                      <div className="grow">
                        <a href="#0">
                          <h3 className="text-lg font-semibold text-slate-800 mb-1">Web Development Ultimate Course 2021</h3>
                        </a>
                        <div className="text-sm mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
                        {/* Rating and price */}
                        <div className="flex flex-wrap items-center space-x-2">
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-slate-300" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.2</div>
                          </div>
                          <div className="text-slate-400">·</div>
                          {/* Price */}
                          <div>
                            <div className="inline-flex text-sm font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2 py-0.5">$89.00</div>
                          </div>
                        </div>
                      </div>
                    </li>
                    {/* Related item */}
                    <li className="sm:flex items-center">
                      <a className="block mb-4 sm:mb-0 mr-5 md:w-32 xl:w-auto shrink-0" href="#0">
                        <img className="rounded-sm" src={Related03} width="200" height="142" alt="Product 03" />
                      </a>
                      <div className="grow">
                        <a href="#0">
                          <h3 className="text-lg font-semibold text-slate-800 mb-1">Full-Stack JavaScript Course!</h3>
                        </a>
                        <div className="text-sm mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
                        {/* Rating and price */}
                        <div className="flex flex-wrap items-center space-x-2">
                          {/* Rating */}
                          <div className="flex items-center space-x-2">
                            {/* Stars */}
                            <div className="flex space-x-1">
                              <button>
                                <span className="sr-only">1 star</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">2 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">3 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">4 stars</span>
                                <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                              <button>
                                <span className="sr-only">5 stars</span>
                                <svg className="w-4 h-4 fill-current text-slate-300" viewBox="0 0 16 16">
                                  <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                                </svg>
                              </button>
                            </div>
                            {/* Rate */}
                            <div className="inline-flex text-sm font-medium text-amber-600">4.2</div>
                          </div>
                          <div className="text-slate-400">·</div>
                          {/* Price */}
                          <div>
                            <div className="inline-flex text-sm font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2 py-0.5">$89.00</div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  {/* Load More */}
                  <div className="text-center">
                    <button className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500 hover:text-slate-600">Load More Stuff</button>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
              </div>
              {/* Sidebar */}
              <div>
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                  <div className="text-sm text-slate-800 font-semibold mb-3">Select a Package</div>
                  <ul className="space-y-2 sm:flex sm:space-y-0 sm:space-x-2 lg:space-y-2 lg:space-x-0 lg:flex-col mb-4">
                    <li>
                      <button className="w-full h-full text-left py-3 px-4 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                        <div className="flex flex-wrap items-center justify-between mb-0.5">
                          <span className="font-semibold text-slate-800">Essential</span>
                          <span className="font-medium text-emerald-600">$39.00</span>
                        </div>
                        <div className="text-sm">Lorem ipsum dolor sit amet elit sed do eiusmod.</div>
                      </button>
                    </li>
                    <li>
                      <button className="w-full h-full text-left py-3 px-4 rounded bg-white border-2 border-indigo-400 shadow-sm duration-150 ease-in-out">
                        <div className="flex flex-wrap items-center justify-between mb-0.5">
                          <span className="font-semibold text-slate-800">Premium <span className="text-xs italic text-indigo-500 align-top">Best Value ✨</span></span>
                          <span className="font-medium text-emerald-600">$69.00</span>
                        </div>
                        <div className="text-sm">Lorem ipsum dolor sit amet elit sed do eiusmod.</div>
                      </button>
                    </li>
                    <li>
                      <button className="w-full h-full text-left py-3 px-4 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                        <div className="flex flex-wrap items-center justify-between mb-0.5">
                          <span className="font-semibold text-slate-800">Complete</span>
                          <span className="font-medium text-emerald-600">$89.00</span>
                        </div>
                        <div className="text-sm">Lorem ipsum dolor sit amet elit sed do eiusmod.</div>
                      </button>
                    </li>
                  </ul>
                  <div className="mb-4">
                    <a className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now - $69.00</a>
                  </div>
                  <div className="text-xs text-slate-500 italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a className="underline hover:no-underline" href="#0">Terms</a>.</div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Product;
--- a/src/pages/ecommerce/Shop.jsx
+++ b/src/pages/ecommerce/Shop.jsx
@@ -1,136 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ShopCards01 from '../../partials/ecommerce/ShopCards01';
 import ShopCards02 from '../../partials/ecommerce/ShopCards02';
 import ShopCards03 from '../../partials/ecommerce/ShopCards03';
 import ShopCards04 from '../../partials/ecommerce/ShopCards04';
 import ShopCards05 from '../../partials/ecommerce/ShopCards05';
 import ShopCards06 from '../../partials/ecommerce/ShopCards06';
 function Shop() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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-5">
              {/* Title */}
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Find the right product for you ✨</h1>
            </div>
            {/* Search form */}
            <div className="max-w-xl mb-5">
              <form className="relative">
                <label htmlFor="app-search" className="sr-only">Search</label>
                <input id="app-search" className="form-input w-full pl-9 py-3 focus:border-slate-300" type="search" placeholder="Search…" />
                <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                  <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                    <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                  </svg>
                </button>
              </form>
            </div>
            {/* Filters */}
            <div className="mb-4 border-b border-slate-200">
              <ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <a className="text-indigo-500 whitespace-nowrap" href="#0">View All</a>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Courses</a>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Digital Goods</a>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Online Events</a>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Crowdfunding</a>
                </li>
              </ul>
            </div>
            {/* Page content */}
            <div>
              {/* Cards 1 (Video Courses) */}
              <div className="mt-8">
                <h2 className="text-xl leading-snug text-slate-800 font-bold mb-5">Video Courses</h2>
                <div className="grid grid-cols-12 gap-6">
                  <ShopCards01 />
                </div>
              </div>
              {/* Cards 2 (Digital Goods) */}
              <div className="mt-8">
                <h2 className="text-xl leading-snug text-slate-800 font-bold mb-5">Digital Goods</h2>
                <div className="grid grid-cols-12 gap-6">
                  <ShopCards02 />
                </div>
              </div>
              {/* Cards 3 (Online Events) */}
              <div className="mt-8">
                <h2 className="text-xl leading-snug text-slate-800 font-bold mb-5">Online Events</h2>
                <div className="grid grid-cols-12 gap-6">
                  <ShopCards03 />
                </div>
              </div>
              {/* Cards 4 (Crowdfunding) */}
              <div className="mt-8">
                <h2 className="text-xl leading-snug text-slate-800 font-bold mb-5">Crowdfunding</h2>
                <div className="grid grid-cols-12 gap-6">
                  <ShopCards04 />
                </div>
              </div>
              {/* Cards 5 (Popular Categories) */}
              <div className="mt-8">
                <h2 className="text-xl leading-snug text-slate-800 font-bold mb-5">Popular Categories</h2>
                <div className="grid grid-cols-12 gap-6">
                  <ShopCards05 />
                </div>
              </div>
              {/* Cards 6 (Trending Now) */}
              <div className="mt-8">
                <h2 className="text-xl leading-snug text-slate-800 font-bold mb-5">Trending Now</h2>
                <div className="grid grid-cols-12 gap-6">
                  <ShopCards06 />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Shop;
--- a/src/pages/ecommerce/Shop2.jsx
+++ b/src/pages/ecommerce/Shop2.jsx
@@ -1,93 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ShopSidebar from '../../partials/ecommerce/ShopSidebar';
 import ShopCards07 from '../../partials/ecommerce/ShopCards07';
 import PaginationClassic from '../../components/PaginationClassic';
 function Shop2() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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-5">
              {/* Title */}
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Find the right product for you ✨</h1>
            </div>
            {/* Page content */}
            <div className="flex flex-col space-y-10 sm:flex-row sm:space-x-6 sm:space-y-0 md:flex-col md:space-x-0 md:space-y-10 xl:flex-row xl:space-x-6 xl:space-y-0 mt-9">
              {/* Sidebar */}
              <ShopSidebar />
              {/* Content */}
              <div>
                {/* Filters */}
                <div className="mb-5">
                  <ul className="flex flex-wrap -m-1">
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">View All</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Featured</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Newest</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Price - Low To High</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Price - High to Low</button>
                    </li>
                  </ul>
                </div>
                <div className="text-sm text-slate-500 italic mb-4">67.975 Items</div>
                {/* Cards 1 (Video Courses) */}
                <div>
                  <div className="grid grid-cols-12 gap-6">
                    <ShopCards07 />
                  </div>
                </div>
                {/* Pagination */}
                <div className="mt-6">
                  <PaginationClassic />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Shop2;
--- a/src/pages/finance/CreditCards.jsx
+++ b/src/pages/finance/CreditCards.jsx
@@ -1,437 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function CreditCards() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="lg:relative lg:flex">
            {/* Content */}
            <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
              {/* Page header */}
              <div className="sm:flex sm:justify-between sm:items-center mb-5">
                {/* Left: Title */}
                <div className="mb-4 sm:mb-0">
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Cards ✨</h1>
                </div>
                {/* Add card button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="hidden xs:block ml-2">Add Card</span>
                </button>
              </div>
              {/* Filters */}
              <div className="mb-5">
                <ul className="flex flex-wrap -m-1">
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                      View All
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Physical Cards
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Virtual Cards
                    </button>
                  </li>
                </ul>
              </div>
              {/* Credit cards */}
              <div className="space-y-2">
                {/* Card 1 */}
                <label className="relative block cursor-pointer text-left w-full">
                  <input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
                  <div className="p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                    <div className="grid grid-cols-12 items-center gap-x-2">
                      {/* Card */}
                      <div className="col-span-6 order-1 sm:order-none sm:col-span-3 flex items-center space-x-4 lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-3">
                        <svg className="shrink-0" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
                          <defs>
                            <linearGradient x1="1.829%" y1="100%" x2="100%" y2="2.925%" id="c1-a">
                              <stop stopColor="#475569" offset="0%" />
                              <stop stopColor="#1E293B" offset="100%" />
                              <stop stopColor="#9FA1FF" offset="100%" />
                            </linearGradient>
                          </defs>
                          <g fill="none" fillRule="evenodd">
                            <rect fill="url(#c1-a)" width="32" height="24" rx="3" />
                            <ellipse fill="#E61C24" fillRule="nonzero" cx="12.522" cy="12" rx="5.565" ry="5.647" />
                            <ellipse fill="#F99F1B" fillRule="nonzero" cx="19.432" cy="12" rx="5.565" ry="5.647" />
                            <path
                              d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
                              fill="#F26622"
                              fillRule="nonzero"
                            />
                          </g>
                        </svg>
                        <div>
                          <div className="text-sm font-medium text-slate-800">_Metal</div>
                          <div className="text-xs">**7328</div>
                        </div>
                      </div>
                      {/* Name */}
                      <div className="col-span-6 order-2 sm:order-none sm:col-span-3 text-left sm:text-center lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
                        <div className="text-sm font-medium text-slate-800 truncate">Dominik Lamakani</div>
                      </div>
                      {/* Card limits */}
                      <div className="col-span-6 order-1 sm:order-none sm:col-span-4 text-right sm:text-center lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-4">
                        <div className="text-sm">$780,00 / $20,000</div>
                      </div>
                      {/* Card status */}
                      <div className="col-span-6 order-2 sm:order-none sm:col-span-2 text-right lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
                        <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
                          Active
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none"
                    aria-hidden="true"
                  />
                </label>
                {/* Card 2 */}
                <label className="relative block cursor-pointer text-left w-full">
                  <input type="radio" name="radio-buttons" className="peer sr-only" />
                  <div className="p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
                    <div className="grid grid-cols-12 items-center gap-x-2">
                      {/* Card */}
                      <div className="col-span-6 order-1 sm:order-none sm:col-span-3 flex items-center space-x-4 lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-3">
                        <svg className="shrink-0" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
                          <defs>
                            <linearGradient x1="1.829%" y1="100%" x2="100%" y2="2.925%" id="c2a">
                              <stop stopColor="#6366F1" offset="0%" />
                              <stop stopColor="#9FA1FF" offset="100%" />
                              <stop stopColor="#9FA1FF" offset="100%" />
                            </linearGradient>
                          </defs>
                          <g fill="none" fillRule="evenodd">
                            <rect fill="url(#c2a)" width="32" height="24" rx="3" />
                            <ellipse fill="#E61C24" fillRule="nonzero" cx="12.522" cy="12" rx="5.565" ry="5.647" />
                            <ellipse fill="#F99F1B" fillRule="nonzero" cx="19.432" cy="12" rx="5.565" ry="5.647" />
                            <path
                              d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
                              fill="#F26622"
                              fillRule="nonzero"
                            />
                          </g>
                        </svg>
                        <div>
                          <div className="text-sm font-medium text-slate-800">_Virtual</div>
                          <div className="text-xs">**7377</div>
                        </div>
                      </div>
                      {/* Name */}
                      <div className="col-span-6 order-2 sm:order-none sm:col-span-3 text-left sm:text-center lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
                        <div className="text-sm font-medium text-slate-800 truncate">Dominik Lamakani</div>
                      </div>
                      {/* Card limits */}
                      <div className="col-span-6 order-1 sm:order-none sm:col-span-4 text-right sm:text-center lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-4">
                        <div className="text-sm">$0 / $20,000</div>
                      </div>
                      {/* Card status */}
                      <div className="col-span-6 order-2 sm:order-none sm:col-span-2 text-right lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
                        <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
                          Blocked
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none"
                    aria-hidden="true"
                  />
                </label>
              </div>
            </div>
            {/* Sidebar */}
            <div>
              <div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[390px] lg:h-[calc(100vh-64px)]">
                <div className="py-8 px-4 lg:px-8">
                  <div className="max-w-sm mx-auto lg:max-w-none">
                    <div className="text-slate-800 font-semibold text-center mb-6">Physical Metal Card Summary</div>
                    {/* Credit Card */}
                    <div className="relative aspect-[7/4] bg-gradient-to-tr from-slate-600 to-slate-800 p-5 rounded-xl shadow-lg overflow-hidden">
                      {/* Illustration on card */}
                      <div className="absolute inset-0 w-full h-full" aria-hidden="true">
                        <svg className="w-full h-full" width="326" height="190" viewBox="0 0 326 190" xmlns="http://www.w3.org/2000/svg">
                          <defs>
                            <filter x="-59.5%" y="-73.1%" width="219%" height="246.3%" filterUnits="objectBoundingBox" id="ccill-a">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-34.5%" y="-62.5%" width="169%" height="225.1%" filterUnits="objectBoundingBox" id="ccill-b">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-23.3%" y="-43.5%" width="146.7%" height="186.9%" filterUnits="objectBoundingBox" id="ccill-c">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-15.9%" y="-46.1%" width="131.7%" height="192.1%" filterUnits="objectBoundingBox" id="ccill-d">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-21.8%" y="-58.4%" width="143.6%" height="216.8%" filterUnits="objectBoundingBox" id="ccill-e">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-21.1%" y="-77.5%" width="142.1%" height="254.9%" filterUnits="objectBoundingBox" id="ccill-f">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-19.1%" y="-66%" width="138.3%" height="232.1%" filterUnits="objectBoundingBox" id="ccill-g">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-20%" y="-75.6%" width="140%" height="251.3%" filterUnits="objectBoundingBox" id="ccill-h">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-32.1%" y="-78.2%" width="164.1%" height="256.5%" filterUnits="objectBoundingBox" id="ccill-i">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-24.3%" y="-48.7%" width="148.6%" height="197.4%" filterUnits="objectBoundingBox" id="ccill-j">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-29.7%" y="-67.7%" width="159.4%" height="235.4%" filterUnits="objectBoundingBox" id="ccill-k">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-22.9%" y="-39.7%" width="145.9%" height="179.3%" filterUnits="objectBoundingBox" id="ccill-l">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-27.4%" y="-72%" width="154.8%" height="243.9%" filterUnits="objectBoundingBox" id="ccill-m">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-20.4%" y="-66.7%" width="140.9%" height="233.3%" filterUnits="objectBoundingBox" id="ccill-n">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-70.1%" y="-93.6%" width="240.1%" height="287.2%" filterUnits="objectBoundingBox" id="ccill-o">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-52.4%" y="-122.3%" width="204.7%" height="344.6%" filterUnits="objectBoundingBox" id="ccill-p">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-38.5%" y="-87.5%" width="177%" height="275%" filterUnits="objectBoundingBox" id="ccill-q">
                              <feGaussianBlur stdDeviation="7" in="SourceGraphic" />
                            </filter>
                            <filter x="-46.2%" y="-46.4%" width="192.4%" height="192.8%" filterUnits="objectBoundingBox" id="ccill-r">
                              <feGaussianBlur stdDeviation="48" in="SourceGraphic" />
                            </filter>
                          </defs>
                          <g fill="none" fillRule="evenodd">
                            <g stroke="#FFF">
                              <path d="m74.649 51.429 35.813-29.245" filter="url(#ccill-a)" transform="translate(23.168 10.2)" />
                              <path
                                d="m95.001 48.454 61.614-34.273"
                                style={{ mixBlendMode: 'overlay' }}
                                filter="url(#ccill-b)"
                                transform="translate(23.168 10.2)"
                              />
                              <path d="m102.738 59.711 90.966-49.333" filter="url(#ccill-c)" transform="translate(23.168 10.2)" />
                              <path
                                d="M132.402 56.164c51.89-27.442 9.677-6.22 133.867-46.582"
                                style={{ mixBlendMode: 'overlay' }}
                                filter="url(#ccill-d)"
                                transform="translate(23.168 10.2)"
                              />
                              <path
                                d="M192.973 49.441c63.823-28.1 31.403-15.88 97.219-36.765"
                                filter="url(#ccill-e)"
                                transform="translate(23.168 10.2)"
                              />
                              <path d="M174.906 63.986 275.21 36.252" filter="url(#ccill-f)" transform="translate(23.168 10.2)" />
                              <path
                                d="M78.484 90.425 188.905 57.9"
                                style={{ mixBlendMode: 'overlay' }}
                                filter="url(#ccill-g)"
                                transform="translate(23.168 10.2)"
                              />
                              <path d="M107.59 120.722 213.167 92.32" filter="url(#ccill-h)" transform="translate(23.168 10.2)" />
                              <path d="m44.001 139.184 66.091-27.432" filter="url(#ccill-i)" transform="translate(23.168 10.2)" />
                              <path d="m25.233 108.035 87.289-44.052" filter="url(#ccill-j)" transform="translate(23.168 10.2)" />
                              <path d="m0 78.862 71.407-31.693" filter="url(#ccill-k)" transform="translate(23.168 10.2)" />
                              <path d="M41.3 54.036 133.926 0" filter="url(#ccill-l)" transform="translate(23.168 10.2)" />
                              <path
                                d="M177.385 128.372c38.41-17.811 13.059-6.784 77.387-29.83"
                                style={{ mixBlendMode: 'overlay' }}
                                filter="url(#ccill-m)"
                                transform="translate(23.168 10.2)"
                              />
                              <path d="m190.745 154.661 103.507-32.222" filter="url(#ccill-n)" transform="translate(23.168 10.2)" />
                              <path d="m235.764 74.579 30.397-22.87" filter="url(#ccill-o)" transform="translate(23.168 10.2)" />
                              <path
                                d="M29.686 21.19 70.172 3.645"
                                style={{ mixBlendMode: 'overlay' }}
                                filter="url(#ccill-p)"
                                transform="translate(23.168 10.2)"
                              />
                              <path d="M17.977 79.61 73.04 55.091" filter="url(#ccill-q)" transform="translate(23.168 10.2)" />
                            </g>
                            <path
                              fillOpacity=".24"
                              fill="#FFF"
                              style={{ mixBlendMode: 'overlay' }}
                              filter="url(#ccill-r)"
                              d="M156 .573 331.59 311H75L20 .573z"
                              transform="translate(0 -40)"
                            />
                          </g>
                        </svg>
                      </div>
                      <div className="relative h-full flex flex-col justify-between">
                        {/* Logo on card */}
                        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                          <defs>
                            <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon1-b">
                              <stop stopColor="#E2E8F0" offset="0%" />
                              <stop stopColor="#94A3B8" offset="100%" />
                            </linearGradient>
                            <linearGradient x1="50%" y1="24.537%" x2="50%" y2="99.142%" id="icon1-c">
                              <stop stopColor="#334155" offset="0%" />
                              <stop stopColor="#334155" stopOpacity="0" offset="100%" />
                            </linearGradient>
                            <path id="icon1-a" d="M16 0l16 32-16-5-16 5z" />
                          </defs>
                          <g transform="rotate(90 16 16)" fill="none" fillRule="evenodd">
                            <mask id="icon1-d" fill="#fff">
                              <use xlinkHref="#icon1-a" />
                            </mask>
                            <use fill="url(#icon1-b)" xlinkHref="#icon1-a" />
                            <path fill="url(#icon1-c)" mask="url(#icon1-d)" d="M16-6h20v38H16z" />
                          </g>
                        </svg>
                        {/* Card number */}
                        <div className="flex justify-between text-lg font-bold text-slate-200 tracking-widest drop-shadow-sm">
                          <span>****</span>
                          <span>****</span>
                          <span>****</span>
                          <span>7328</span>
                        </div>
                        {/* Card footer */}
                        <div className="relative flex justify-between items-center z-10 mb-0.5">
                          {/* Card expiration */}
                          <div className="text-sm font-bold text-slate-200 tracking-widest drop-shadow-sm space-x-3">
                            <span>EXP 12/24</span>
                            <span>CVC ***</span>
                          </div>
                        </div>
                        {/* Mastercard logo */}
                        <svg className="absolute bottom-0 right-0" width="48" height="28" viewBox="0 0 48 28">
                          <circle fill="#F59E0B" cx="34" cy="14" r="14" fillOpacity=".8" />
                          <circle fill="#F43F5E" cx="14" cy="14" r="14" fillOpacity=".8" />
                        </svg>
                      </div>
                    </div>
                    {/* Details */}
                    <div className="mt-6">
                      <div className="text-sm font-semibold text-slate-800 mb-1">Details</div>
                      <ul>
                        <li className="flex items-center justify-between py-3 border-b border-slate-200">
                          <div className="text-sm">Card Name</div>
                          <div className="text-sm font-medium text-slate-800 ml-2">Physical Metal Card</div>
                        </li>
                        <li className="flex items-center justify-between py-3 border-b border-slate-200">
                          <div className="text-sm">Status</div>
                          <div className="flex items-center whitespace-nowrap">
                            <div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
                            <div className="text-sm font-medium text-slate-800">Active</div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    {/* Payment Limits */}
                    <div className="mt-6">
                      <div className="text-sm font-semibold text-slate-800 mb-4">Payment Limits</div>
                      <div className="pb-4 border-b border-slate-200">
                        <div className="flex justify-between text-sm mb-2">
                          <div>Spent This Month</div>
                          <div className="italic">
                            $750,00 <span className="text-slate-400">/</span> $1,500.00
                          </div>
                        </div>
                        <div className="relative w-full h-2 bg-slate-300">
                          <div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '50%' }} />
                        </div>
                      </div>
                    </div>
                    {/* Withdrawal Limits */}
                    <div className="mt-6">
                      <div className="text-sm font-semibold text-slate-800 mb-4">Withdrawal Limits</div>
                      <div className="pb-4 border-b border-slate-200">
                        <div className="flex justify-between text-sm mb-2">
                          <div>Withdrawn This Month</div>
                          <div className="italic">
                            $100,00 <span className="text-slate-400">/</span> $1,500.00
                          </div>
                        </div>
                        <div className="relative w-full h-2 bg-slate-300">
                          <div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '7.5%' }} />
                        </div>
                      </div>
                    </div>
                    {/* Edit / Delete */}
                    <div className="flex items-center space-x-3 mt-6">
                      <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-500 shrink-0" 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" />
                          </svg>
                          <span className="ml-2">Edit Card</span>
                        </button>
                      </div>
                      <div className="w-1/2">
                        <button className="btn w-full border-slate-200 hover:border-slate-300 text-rose-500">
                          <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                            <path d="M14.574 5.67a13.292 13.292 0 0 1 1.298 1.842 1 1 0 0 1 0 .98C15.743 8.716 12.706 14 8 14a6.391 6.391 0 0 1-1.557-.2l1.815-1.815C10.97 11.82 13.06 9.13 13.82 8c-.163-.243-.39-.56-.669-.907l1.424-1.424ZM.294 15.706a.999.999 0 0 1-.002-1.413l2.53-2.529C1.171 10.291.197 8.615.127 8.49a.998.998 0 0 1-.002-.975C.251 7.29 3.246 2 8 2c1.331 0 2.515.431 3.548 1.038L14.293.293a.999.999 0 1 1 1.414 1.414l-14 14a.997.997 0 0 1-1.414 0ZM2.18 8a12.603 12.603 0 0 0 2.06 2.347l1.833-1.834A1.925 1.925 0 0 1 6 8a2 2 0 0 1 2-2c.178 0 .348.03.512.074l1.566-1.566C9.438 4.201 8.742 4 8 4 5.146 4 2.958 6.835 2.181 8Z" />
                          </svg>
                          <span className="ml-2">Block Card</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default CreditCards;
--- a/src/pages/finance/TransactionDetails.jsx
+++ b/src/pages/finance/TransactionDetails.jsx
@@ -1,107 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import DeleteButton from '../../partials/actions/DeleteButton';
 import SearchForm from '../../partials/actions/SearchForm';
 import DropdownTransaction from '../../components/DropdownTransaction';
 import TransactionsTable from '../../partials/finance/TransactionsTable02';
 import TransactionPanel from '../../partials/finance/TransactionPanel';
 import PaginationClassic from '../../components/PaginationClassic';
 function TransactionDetails() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [transactionPanelOpen, setTransactionPanelOpen] = useState(true);
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
  };
  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 bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="relative">
            {/* Content */}
            <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
              {/* Page header */}
              <div className="sm:flex sm:justify-between sm:items-center mb-4 md:mb-2">
                {/* Left: Title */}
                <div className="mb-4 sm:mb-0">
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">$47,347.09</h1>
                </div>
                {/* Right: Actions */}
                <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                  {/* Delete button */}
                  <DeleteButton selectedItems={selectedItems} />
                  {/* Search form */}
                  <div className="hidden sm:block">
                    <SearchForm />
                  </div>
                  {/* Export button */}
                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Export Transactions</button>
                </div>
              </div>
              <div className="mb-5">
                <span>Transactions from </span>
                <DropdownTransaction />
              </div>
              {/* Filters */}
              <div className="mb-5">
                <ul className="flex flex-wrap -m-1">
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                      View All
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Completed
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Pending
                    </button>
                  </li>
                  <li className="m-1">
                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                      Canceled
                    </button>
                  </li>
                </ul>
              </div>
              {/* Table */}
              <TransactionsTable selectedItems={handleSelectedItems} setTransactionPanelOpen={setTransactionPanelOpen} />
              {/* Pagination */}
              <div className="mt-8">
                <PaginationClassic />
              </div>
            </div>
            <TransactionPanel transactionPanelOpen={transactionPanelOpen} setTransactionPanelOpen={setTransactionPanelOpen} />
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default TransactionDetails;
--- a/src/pages/finance/Transactions.jsx
+++ b/src/pages/finance/Transactions.jsx
@@ -1,112 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import DeleteButton from '../../partials/actions/DeleteButton';
 import SearchForm from '../../partials/actions/SearchForm';
 import DropdownTransaction from '../../components/DropdownTransaction';
 import TransactionsTable from '../../partials/finance/TransactionsTable';
 import PaginationClassic from '../../components/PaginationClassic';
 function Transactions() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
  };
  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 bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          {/* Content */}
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Page header */}
            <div className="sm:flex sm:justify-between sm:items-center mb-4 md:mb-2">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">$47,347.09</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Delete button */}
                <DeleteButton selectedItems={selectedItems} />
                {/* Search form */}
                <div className="hidden sm:block">
                  <SearchForm />
                </div>
                {/* Export button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Export Transactions</button>
              </div>
            </div>
            <div className="mb-5">
              <span>Transactions from </span>
              <DropdownTransaction />
            </div>
            {/* Filters */}
            <div className="mb-5">
              <ul className="flex flex-wrap -m-1">
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
                    View All
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    Completed
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    Pending
                  </button>
                </li>
                <li className="m-1">
                  <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
                    Canceled
                  </button>
                </li>
              </ul>
            </div>
            {/* Table */}
            <TransactionsTable selectedItems={handleSelectedItems} />
            {/* Pagination */}
            <div className="mt-8">
              <PaginationClassic />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Transactions;
--- a/src/pages/job/CompanyProfile.jsx
+++ b/src/pages/job/CompanyProfile.jsx
@@ -1,241 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import JobListItem from '../../partials/job/JobListItem';
 import CompanyBg from '../../images/company-bg.jpg';
 import CompanyImage from '../../images/company-icon-01.svg';
 function CompanyProfile() {
  const items = [
    // Group 1
    [
      {
        id: 0,
        image: CompanyImage,
        company: 'Company 01',
        role: 'Senior Software Engineer Backend',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 7',
        type: 'New',
        fav: false,
      },
      {
        id: 1,
        image: CompanyImage,
        company: 'Company 02',
        role: 'React.js Software Developer',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 6',
        type: 'New',
        fav: true,
      },
      {
        id: 2,
        image: CompanyImage,
        company: 'Company 03',
        role: 'Senior Full Stack Rails Developer',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 6',
        type: 'New',
        fav: false,
      },
    ],
    // Group 2
    [
      {
        id: 0,
        image: CompanyImage,
        company: 'Company 01',
        role: 'Senior Web App Designer',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 3',
        type: '',
        fav: false,
      },
      {
        id: 1,
        image: CompanyImage,
        company: 'Company 02',
        role: 'Senior UI/UX Designer',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 3',
        type: '',
        fav: false,
      },
    ],
    // Group 3
    [
      {
        id: 0,
        image: CompanyImage,
        company: 'Company 01',
        role: 'Financial Planning & Analysis Manager',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 2',
        type: '',
        fav: false,
      },
      {
        id: 1,
        image: CompanyImage,
        company: 'Company 02',
        role: 'Senior Consultant Growth Strategy',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 2',
        type: '',
        fav: false,
      },
    ],
  ];  
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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>
          {/* Profile background */}
          <div className="h-56 bg-slate-200">
            <img className="object-cover h-full w-full" src={CompanyBg} width="2560" height={440} alt="Company background" />
          </div>
          {/* Header */}
          <header className="text-center bg-slate-50 pb-6 border-b border-slate-200">
            <div className="px-4 sm:px-6 lg:px-8 w-full">
              <div className="max-w-3xl mx-auto">
                {/* Avatar */}
                <div className="-mt-12 mb-2">
                  <div className="inline-flex -ml-1 -mt-1 sm:mb-0">
                    <img className="rounded-full border-4 border-white" src={CompanyImage} width="104" height="104" alt="Avatar" />
                  </div>
                </div>
                {/* Company name and info */}
                <div className="mb-4">
                  <h2 className="text-2xl text-slate-800 font-bold mb-2">Revolut Ltd</h2>
                  <p>We're building a financial superapp that combines all the best tools into one place 🚀</p>
                </div>
                {/* Meta */}
                <div className="inline-flex flex-wrap justify-center sm:justify-start space-x-4">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
                      <path d="M8 8.992a2 2 0 1 1-.002-3.998A2 2 0 0 1 8 8.992Zm-.7 6.694c-.1-.1-4.2-3.696-4.2-3.796C1.7 10.69 1 8.892 1 6.994 1 3.097 4.1 0 8 0s7 3.097 7 6.994c0 1.898-.7 3.697-2.1 4.996-.1.1-4.1 3.696-4.2 3.796-.4.3-1 .3-1.4-.1Zm-2.7-4.995L8 13.688l3.4-2.997c1-1 1.6-2.198 1.6-3.597 0-2.798-2.2-4.996-5-4.996S3 4.196 3 6.994c0 1.399.6 2.698 1.6 3.697 0-.1 0-.1 0 0Z" />
                    </svg>
                    <span className="text-sm font-medium whitespace-nowrap text-slate-500 ml-2">London, UK</span>
                  </div>
                  <div className="flex items-center">
                    <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>
                    <a className="text-sm font-medium whitespace-nowrap text-indigo-500 hover:text-indigo-600 ml-2" href="#0">
                      revolut.com
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </header>
          {/* Page content */}
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full">
            <div className="max-w-3xl mx-auto">
              <h3 className="text-xl leading-snug text-slate-800 font-bold mb-6">Open Positions at Revolut Ltd</h3>
              {/* Job list */}
              <div className="space-y-6">
                {/* Group 1 */}
                <div>
                  <h4 className="text-slate-800 font-medium mb-4">Programming</h4>
                  {/* Job list */}
                  <div className="space-y-2">
                    {items[0].map((item) => {
                      return (
                        <JobListItem
                          key={item.id}
                          id={item.id}
                          image={item.image}
                          role={item.role}
                          link={item.link}
                          details={item.details}
                          date={item.date}
                          type={item.type}
                          fav={item.fav}
                        />
                      );
                    })}
                  </div>
                </div>
                {/* Group 2 */}
                <div>
                  <h4 className="text-slate-800 font-medium mb-4">Design</h4>
                  {/* Job list */}
                  <div className="space-y-2">
                    {items[1].map((item) => {
                      return (
                        <JobListItem
                          key={item.id}
                          id={item.id}
                          image={item.image}
                          role={item.role}
                          link={item.link}
                          details={item.details}
                          date={item.date}
                          type={item.type}
                          fav={item.fav}
                        />
                      );
                    })}
                  </div>
                </div>
                {/* Group 3 */}
                <div>
                  <h4 className="text-slate-800 font-medium mb-4">Management / Finance</h4>
                  {/* Job list */}
                  <div className="space-y-2">
                    {items[2].map((item) => {
                      return (
                        <JobListItem
                          key={item.id}
                          id={item.id}
                          image={item.image}
                          role={item.role}
                          link={item.link}
                          details={item.details}
                          date={item.date}
                          type={item.type}
                          fav={item.fav}
                        />
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default CompanyProfile;
--- a/src/pages/job/JobListing.jsx
+++ b/src/pages/job/JobListing.jsx
@@ -1,238 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import JobSidebar from '../../partials/job/JobSidebar';
 import DropdownSort from '../../components/DropdownSort';
 import JobListItem from '../../partials/job/JobListItem';
 import PaginationNumeric from '../../components/PaginationNumeric';
 import Image01 from '../../images/company-icon-05.svg';
 import Image02 from '../../images/company-icon-06.svg';
 import Image03 from '../../images/company-icon-03.svg';
 import Image04 from '../../images/company-icon-07.svg';
 import Image05 from '../../images/company-icon-08.svg';
 import Image06 from '../../images/company-icon-01.svg';
 import Image07 from '../../images/company-icon-02.svg';
 function JobListing() {
  const items = [
    {
      id: 0,
      image: Image01,
      company: 'Company 01',
      role: 'Senior Web App Designer',
      link: '/job/job-post',
      details: 'Contract / Remote / New York, NYC',
      date: 'Jan 4',
      type: 'Featured',
      fav: false,
    },
    {
      id: 1,
      image: Image01,
      company: 'Company 02',
      role: 'Senior Full Stack Engineer',
      link: '/job/job-post',
      details: 'Contract / Remote / New York, NYC',
      date: 'Jan 7',
      type: 'New',
      fav: true,
    },
    {
      id: 2,
      image: Image02,
      company: 'Company 03',
      role: 'Ruby on Rails Engineer',
      link: '/job/job-post',
      details: 'Contract / Remote / New York, NYC',
      date: 'Jan 7',
      type: 'New',
      fav: false,
    },
    {
      id: 3,
      image: Image03,
      company: 'Company 04',
      role: 'Senior Software Engineer Backend',
      link: '/job/job-post',
      details: 'Full-time / Remote / Anywhere',
      date: 'Jan 7',
      type: 'New',
      fav: false,
    },
    {
      id: 4,
      image: Image04,
      company: 'Company 05',
      role: 'React.js Software Developer',
      link: '/job/job-post',
      details: 'Full-time / Remote / London, UK',
      date: 'Jan 6',
      type: 'New',
      fav: true,
    },
    {
      id: 5,
      image: Image05,
      company: 'Company 06',
      role: 'Senior Full Stack Rails Developer',
      link: '/job/job-post',
      details: 'Part-time / Remote / Milan, IT',
      date: 'Jan 6',
      type: 'New',
      fav: false,
    },
    {
      id: 6,
      image: Image06,
      company: 'Company 07',
      role: 'Principal Software Engineer',
      link: '/job/job-post',
      details: 'Freelance / Remote / London, UK',
      date: 'Jan 6',
      type: 'New',
      fav: false,
    },
    {
      id: 7,
      image: Image04,
      company: 'Company 08',
      role: 'Contract React Native Engineer',
      link: '/job/job-post',
      details: 'Contract / Remote / Miami, FL',
      date: 'Jan 6',
      type: 'New',
      fav: false,
    },
    {
      id: 8,
      image: Image05,
      company: 'Company 09',
      role: 'Senior Client Engineer (React & React Native)',
      link: '/job/job-post',
      details: 'Full-time / Remote / Lincoln, NE',
      date: 'Jan 5',
      type: 'New',
      fav: false,
    },
    {
      id: 9,
      image: Image07,
      company: 'Company 10',
      role: 'QA Automation Engineer',
      link: '/job/job-post',
      details: 'Contract / Remote / Anywhere',
      date: 'Jan 5',
      type: 'New',
      fav: false,
    },
  ];
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="sm:flex sm:justify-between sm:items-center mb-5">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Search For Jobs ✨</h1>
              </div>
              {/* Post a job button */}
              <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                <span className="hidden xs:block ml-2">Post A Job</span>
              </button>
            </div>
            {/* Page content */}
            <div className="flex flex-col space-y-10 sm:flex-row sm:space-x-6 sm:space-y-0 md:flex-col md:space-x-0 md:space-y-10 xl:flex-row xl:space-x-6 xl:space-y-0 mt-9">
              {/* Sidebar */}
              <JobSidebar />
              {/* Content */}
              <div className='w-full'>
                {/* Search form */}
                <div className="mb-5">
                  <form className="relative">
                    <label htmlFor="job-search" className="sr-only">Search</label>
                    <input id="job-search" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search job title or keyword…" />
                    <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                      <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                        <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                      </svg>
                    </button>
                  </form>
                </div>
                {/* Jobs header */}
                <div className="flex justify-between items-center mb-4">
                  <div className="text-sm text-slate-500 italic">Showing 289 Jobs</div>
                  {/* Sort */}
                  <div className="text-sm">
                    <span>Sort by </span>
                    <DropdownSort align="right" />
                  </div>
                </div>
                {/* Jobs list */}
                <div className='space-y-2'>
                  {items.map((item) => {
                    return (
                      <JobListItem
                        key={item.id}
                        id={item.id}
                        image={item.image}
                        role={item.role}
                        link={item.link}
                        details={item.details}
                        date={item.date}
                        type={item.type}
                        fav={item.fav}
                      />
                    );
                  })}
                </div>
                {/* Pagination */}
                <div className="mt-6">
                  <PaginationNumeric />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default JobListing;
--- a/src/pages/job/JobPost.jsx
+++ b/src/pages/job/JobPost.jsx
@@ -1,279 +0,0 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import JobListItem from '../../partials/job/JobListItem';
 import Image03 from '../../images/company-icon-03.svg';
 import Image04 from '../../images/company-icon-07.svg';
 import Image05 from '../../images/company-icon-08.svg';
 import Image06 from '../../images/company-icon-01.svg';
 function JobPost() {
    const items = [
      {
        id: 3,
        image: Image03,
        company: 'Company 04',
        role: 'Senior Software Engineer Backend',
        link: '/job/job-post',
        details: 'Full-time / Remote / Anywhere',
        date: 'Jan 7',
        type: 'New',
        fav: false,
      },
      {
        id: 4,
        image: Image04,
        company: 'Company 05',
        role: 'React.js Software Developer',
        link: '/job/job-post',
        details: 'Full-time / Remote / London, UK',
        date: 'Jan 6',
        type: 'New',
        fav: true,
      },
      {
        id: 5,
        image: Image05,
        company: 'Company 06',
        role: 'Senior Full Stack Rails Developer',
        link: '/job/job-post',
        details: 'Part-time / Remote / Milan, IT',
        date: 'Jan 6',
        type: 'New',
        fav: false,
      },
    ];
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">
            {/* Page content */}
            <div className="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
              {/* Content */}
              <div>
                <div className="mb-6">
                  <Link className="btn-sm px-3 bg-white border-slate-200 hover:border-slate-300 text-slate-600" to="/job/job-listing">
                    <svg className="fill-current text-slate-400 mr-2" width="7" height="12" viewBox="0 0 7 12">
                      <path d="M5.4.6 6.8 2l-4 4 4 4-1.4 1.4L0 6z" />
                    </svg>
                    <span>Back To Jobs</span>
                  </Link>
                </div>
                <div className="text-sm text-slate-500 italic mb-2">Posted Jan 6, 2022</div>
                <header className="mb-4">
                  {/* Title */}
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Senior Client Engineer (React &amp; React Native)</h1>
                </header>
                {/* Company information (mobile) */}
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 mb-6 lg:hidden">
                  <div className="text-center mb-6">
                    <div className="inline-flex mb-3">
                      <img className="w-16 h-16 rounded-full" src={Image06} width="64" height="64" alt="Company 01" />
                    </div>
                    <div className="text-lg font-bold text-slate-800 mb-1">Revolut Ltd</div>
                    <div className="text-sm text-slate-500 italic">179 Jobs Posted</div>
                  </div>
                  <div className="space-y-2 sm:flex sm:space-y-0 sm:space-x-2">
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Apply Today -&gt;</button>
                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">Company Profile</button>
                  </div>
                </div>
                {/* Tags */}
                <div className="mb-6">
                  <div className="flex flex-wrap items-center -m-1">
                    <div className="m-1">
                      <a className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1" href="#0">
                        Full-time
                      </a>
                    </div>
                    <div className="m-1">
                      <a className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1" href="#0">
                        Senior Engineer
                      </a>
                    </div>
                    <div className="m-1">
                      <a className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1" href="#0">
                        Remote
                      </a>
                    </div>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* The Role */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">The Role</h2>
                  <div className="space-y-6">
                    <p>In the world of AI, behavioural predictions are leading the charge to better machine learning.</p>
                    <p>
                      There is so much happening in the AI space. Advances in the economic sectors have seen automated business practices rapidly
                      increasing economic value. While the realm of the human sciences has used the power afforded by computational capabilities to
                      solve many human based dilemmas. Even the art scene has adopted carefully selected ML applications to usher in the technological
                      movement.
                    </p>
                    <p>
                      Join us every second Wednesday as we host an open discussion about the amazing things happening in the world of AI and machine
                      learning. Feel free to share your experiences, ask questions, ponder the possibilities, or just listen as we explore new topics
                      and revisit old ones.
                    </p>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* About You */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">About You</h2>
                  <div className="space-y-6">
                    <p>
                      You love building great software. Your work could be supporting new feature development, migrating existing features, and
                      creating other mobile and web solutions for customers. You'll have a primary focus on frontend development using Javascript. Our
                      client's tech stack is JavaScript, primarily using React. A strong understanding of JS core (ES2019+) is required, with some
                      exposure in Java as back-end technology. We use modern tools, which means you'll have the opportunity to work with Webpack,
                      Redux, Apollo, Styled Components, and much more.
                    </p>
                    <p>
                      You love learning. Engineering is an ever-evolving world. You enjoy playing with new tech and exploring areas that you might not
                      have experience with yet. You are self-driven, self-learner willing to share knowledge and participate actively in your
                      community.
                    </p>
                    <p>
                      Having overlap with your team is critical when working in a global remote team. Modus requires all team members to overlap with
                      EST morning hours daily. In addition, reliable high speed internet is a must.
                    </p>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Things You Might Do */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Things You Might Do</h2>
                  <div className="space-y-6">
                    <p>
                      We are a fast-growing, and remote-first company, so you'll likely get experience on many different projects across the
                      organization. That said, here are some things you'll probably do:
                    </p>
                    <ul className="list-disc list-inside space-y-1">
                      <li>Give back to the community via open source and blog posts</li>
                      <li>
                        Travel and meet great people- as part of our remote-first lifestyle, it's important that we come together as needed to work
                        together, meet each other in person and have fun together. Please keep that in mind when you apply.
                      </li>
                      <li>
                        Teach and be taught: Modus creates active teams that work in internal and external projects together, giving opportunities to
                        stay relevant with the latest technologies and learning from experts worldwide
                      </li>
                      <li>Interact directly with internal and external clients to represent Modus and its values</li>
                    </ul>
                  </div>
                </div>
                {/* Apply section */}
                <div className="mt-6">
                  <p className="font-medium text-slate-800 italic mb-6">Do you have what it takes?</p>
                  <div className="flex justify-between items-center">
                    {/* Apply button */}
                    <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Apply Today -&gt;</button>
                    {/* Share */}
                    <div className="flex items-center">
                      <div className="text-sm text-slate-500 italic mr-4">Share:</div>
                      <div className="flex items-center space-x-3">
                        <button className="text-slate-400 hover:text-indigo-500">
                          <span className="sr-only">Share on Twitter</span>
                          <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 3.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8Z" />
                          </svg>
                        </button>
                        <button className="text-slate-400 hover:text-indigo-500">
                          <span className="sr-only">Share on Facebook</span>
                          <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.023 16 6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023Z" />
                          </svg>
                        </button>
                        <button className="text-slate-400 hover:text-indigo-500">
                          <span className="sr-only">Share on Linkedin</span>
                          <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 1.146C0 .514.53 0 1.182 0h13.635C15.471 0 16 .513 16 1.146v13.708c0 .633-.53 1.146-1.183 1.146H1.182C.53 16 0 15.487 0 14.854V1.146ZM4.862 13.39V6.187H2.468v7.203h2.394ZM3.666 5.203c.834 0 1.354-.553 1.354-1.244-.016-.707-.52-1.245-1.338-1.245-.82 0-1.355.538-1.355 1.245 0 .691.52 1.244 1.323 1.244h.015Zm2.522 8.187h2.394V9.368c0-.215.015-.43.078-.584.173-.43.567-.876 1.229-.876.866 0 1.213.66 1.213 1.629v3.853h2.394V9.26c0-2.213-1.181-3.242-2.756-3.242-1.292 0-1.86.722-2.174 1.213h.016V6.187H6.188c.03.676 0 7.203 0 7.203Z" />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <hr className="my-6 border-t border-slate-200" />
                {/* Related Jobs */}
                <div>
                  <h2 className="text-xl leading-snug text-slate-800 font-bold mb-6">Related Jobs</h2>
                  <div className="space-y-2 mt-6">
                    {items.map((item) => {
                      return (
                        <JobListItem
                          key={item.id}
                          id={item.id}
                          image={item.image}
                          role={item.role}
                          link={item.link}
                          details={item.details}
                          date={item.date}
                          type={item.type}
                          fav={item.fav}
                        />
                      );
                    })}
                  </div>
                </div>
              </div>
              {/* Sidebar */}
              <div className="hidden lg:block space-y-4">
                {/* Company information (desktop) */}
                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
                  <div className="text-center mb-6">
                    <div className="inline-flex mb-3">
                      <img className="w-16 h-16 rounded-full" src={Image06} width="64" height="64" alt="Company 01" />
                    </div>
                    <div className="text-lg font-bold text-slate-800 mb-1">Revolut Ltd</div>
                    <div className="text-sm text-slate-500 italic">179 Jobs Posted</div>
                  </div>
                  <div className="space-y-2">
                    <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Apply Today -&gt;</button>
                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">Company Profile</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default JobPost;
--- a/src/pages/settings/Account.jsx
+++ b/src/pages/settings/Account.jsx
@@ -1,50 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import AccountPanel from '../../partials/settings/AccountPanel';
 function Account() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">Account Settings ✨</h1>
            </div>
            {/* Content */} 
            <div className="bg-white shadow-lg rounded-sm mb-8">
              <div className="flex flex-col md:flex-row md:-mr-px">
                <SettingsSidebar />
                <AccountPanel />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Account;
--- a/src/pages/settings/Apps.jsx
+++ b/src/pages/settings/Apps.jsx
@@ -1,50 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import AppsPanel from '../../partials/settings/AppsPanel';
 function Apps() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">Account Settings ✨</h1>
            </div>
            {/* Content */}
            <div className="bg-white shadow-lg rounded-sm mb-8">
              <div className="flex flex-col md:flex-row md:-mr-px">
                <SettingsSidebar />
                <AppsPanel />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Apps;
--- a/src/pages/settings/Billing.jsx
+++ b/src/pages/settings/Billing.jsx
@@ -1,50 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import BillingPanel from '../../partials/settings/BillingPanel';
 function Billing() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">Account Settings ✨</h1>
            </div>
            {/* Content */}
            <div className="bg-white shadow-lg rounded-sm mb-8">
              <div className="flex flex-col md:flex-row md:-mr-px">
                <SettingsSidebar />
                <BillingPanel />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Billing;
--- a/src/pages/settings/Feedback.jsx
+++ b/src/pages/settings/Feedback.jsx
@@ -1,50 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import FeedbackPanel from '../../partials/settings/FeedbackPanel';
 function Feedback() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">Account Settings ✨</h1>
            </div>
            {/* Content */}
            <div className="bg-white shadow-lg rounded-sm mb-8">
              <div className="flex flex-col md:flex-row md:-mr-px">
                <SettingsSidebar />
                <FeedbackPanel />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Feedback;
--- a/src/pages/settings/Notifications.jsx
+++ b/src/pages/settings/Notifications.jsx
@@ -1,50 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import NotificationsPanel from '../../partials/settings/NotificationsPanel';
 function Notifications() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">Account Settings ✨</h1>
            </div>
            {/* Content */}
            <div className="bg-white shadow-lg rounded-sm mb-8">
              <div className="flex flex-col md:flex-row md:-mr-px">
                <SettingsSidebar />
                <NotificationsPanel />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Notifications;
--- a/src/pages/settings/Plans.jsx
+++ b/src/pages/settings/Plans.jsx
@@ -1,50 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import PlansPanel from '../../partials/settings/PlansPanel';
 function Plans() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">Account Settings ✨</h1>
            </div>
            {/* Content */}
            <div className="bg-white shadow-lg rounded-sm mb-8">
              <div className="flex flex-col md:flex-row md:-mr-px">
                <SettingsSidebar />
                <PlansPanel />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Plans;
--- a/src/pages/tasks/TasksKanban.jsx
+++ b/src/pages/tasks/TasksKanban.jsx
@@ -1,110 +0,0 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import TasksGroups from '../../partials/tasks/TasksGroups';
 import Task01 from '../../partials/tasks/Task01';
 import Task02 from '../../partials/tasks/Task02';
 import Task03 from '../../partials/tasks/Task03';
 import Task04 from '../../partials/tasks/Task04';
 import Task05 from '../../partials/tasks/Task05';
 import Task06 from '../../partials/tasks/Task06';
 import Task07 from '../../partials/tasks/Task07';
 import Task08 from '../../partials/tasks/Task08';
 import Task09 from '../../partials/tasks/Task09';
 function TasksKanban() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Acme Inc. Kanban ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Add board button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="ml-2">Add Board</span>
                </button>
              </div>
            </div>
            {/* Filters */}
            <div className="mb-4 border-b border-slate-200">
              <ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <Link className="text-indigo-500 whitespace-nowrap" to="#0">View All</Link>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <Link className="text-slate-500 hover:text-slate-600 whitespace-nowrap" to="#0">Web Sprint</Link>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <Link className="text-slate-500 hover:text-slate-600 whitespace-nowrap" to="#0">Marketing</Link>
                </li>
                <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                  <Link className="text-slate-500 hover:text-slate-600 whitespace-nowrap" to="#0">Development</Link>
                </li>
              </ul>
            </div>
            {/* Cards */}
            <div className="grid grid-cols-12 gap-x-4 gap-y-8">
              {/* Tasks column */}
              <TasksGroups title="To Do’s 🖋️">
                <Task01 />
                <Task02 />
                <Task03 />
              </TasksGroups>
              {/* Tasks column */}
              <TasksGroups title="In Progress ✌️">
                <Task04 />
                <Task05 />
              </TasksGroups>
              {/* Tasks column */}
              <TasksGroups title="Completed 🎉">
                <Task06 />
                <Task07 />
              </TasksGroups>
              {/* Tasks column */}
              <TasksGroups title="Notes 📒">
                <Task08 />
                <Task09 />
              </TasksGroups>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default TasksKanban;
--- a/src/pages/tasks/TasksList.jsx
+++ b/src/pages/tasks/TasksList.jsx
@@ -1,504 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import UserImage05 from '../../images/user-32-05.jpg';
 import UserImage07 from '../../images/user-32-07.jpg';
 import UserImage08 from '../../images/user-32-08.jpg';
 function TasksList() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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">
            {/* Smaller container */}
            <div className="max-w-3xl mx-auto">
              {/* Page header */}
              <div className="sm:flex sm:justify-between sm:items-center mb-8">
                {/* Left: Title */}
                <div className="mb-4 sm:mb-0">
                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Acme Inc. Tasks ✨</h1>
                </div>
                {/* Right: Actions */}
                <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-4">
                  {/* Avatars */}
                  <div className="flex shrink-0 -space-x-3 -ml-px">
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-slate-100 box-content" src={UserImage08} width="32" height="32" alt="User 08" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-slate-100 box-content" src={UserImage07} width="32" height="32" alt="User 07" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-slate-100 box-content" src={UserImage05} width="32" height="32" alt="User 05" />
                    </a>
                    <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150 ml-2">
                      <span className="sr-only">Add new user</span>
                      <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12">
                        <path d="M11 5H7V1a1 1 0 0 0-2 0v4H1a1 1 0 0 0 0 2h4v4a1 1 0 0 0 2 0V7h4a1 1 0 0 0 0-2Z" />
                      </svg>
                    </button>
                  </div>
                  {/* Add taks button */}
                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                    <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                    <span className="ml-2">Add Task</span>
                  </button>
                </div>
              </div>
              {/* Tasks */}
              <div className="space-y-6">
                {/* Group 1 */}
                <div>
                  <h2 className="grow font-semibold text-slate-800 truncate mb-4">To Do's 🖋️</h2>
                  <div className="space-y-2">
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Senior Software Engineer Backend</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Avatars */}
                          <div className="flex shrink-0 -space-x-3 -ml-px">
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage07} width="24" height="24" alt="User 07" />
                            </a>
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage05} width="24" height="24" alt="User 05" />
                            </a>
                          </div>
                          {/* Like button */}
                          <button className="flex items-center text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
                            </svg>
                            <div className="text-sm text-slate-500">4</div>
                          </button>
                          {/* Replies button */}
                          <button className="flex items-center text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
                            </svg>
                            <div className="text-sm text-slate-500">7</div>
                          </button>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">User should receive a daily digest email</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Date */}
                          <div className="flex items-center text-amber-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
                            </svg>
                            <div className="text-sm text-amber-600">Mar 27</div>
                          </div>
                          {/* Replies button */}
                          <button className="flex items-center text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
                            </svg>
                            <div className="text-sm text-slate-500">6</div>
                          </button>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Change license and remove products</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Avatars */}
                          <div className="flex shrink-0 -space-x-3 -ml-px">
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage08} width="24" height="24" alt="User 08" />
                            </a>
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage07} width="24" height="24" alt="User 07" />
                            </a>
                          </div>
                          {/* Replies button */}
                          <button className="flex items-center text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
                            </svg>
                            <div className="text-sm text-slate-500">4</div>
                          </button>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Group 2 */}
                <div>
                  <h2 className="grow font-semibold text-slate-800 truncate mb-4">In Progress ✌️</h2>
                  <div className="space-y-2">
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Managing teams (book)</span>
                            </label>
                          </div>
                          {/* Nested checkboxes */}
                          <ul className="pl-12 space-y-3">
                            <li>
                              <label className="flex items-center">
                                <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" defaultChecked />
                                <span className="text-sm text-slate-800 peer-checked:line-through ml-3">Finish the presentation</span>
                              </label>
                            </li>
                            <li>
                              <label className="flex items-center">
                                <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                                <span className="text-sm text-slate-800 peer-checked:line-through ml-3">Finish the design</span>
                              </label>
                            </li>
                            <li>
                              <label className="flex items-center">
                                <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                                <span className="text-sm text-slate-800 peer-checked:line-through ml-3">Publish the content</span>
                              </label>
                            </li>
                          </ul>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Avatars */}
                          <div className="flex shrink-0 -space-x-3 -ml-px">
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage05} width="24" height="24" alt="User 05" />
                            </a>
                          </div>
                          {/* To-do info */}
                          <div className="flex items-center text-slate-400 ml-3">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M6.974 14c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6z" />
                            </svg>
                            <div className="text-sm text-slate-500">1/3</div>
                          </div>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Product Update - Q4 2021</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Date */}
                          <div className="flex items-center text-amber-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
                            </svg>
                            <div className="text-sm text-amber-600">Mar 27</div>
                          </div>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Design marketing assets</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Avatars */}
                          <div className="flex shrink-0 -space-x-3 -ml-px">
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage07} width="24" height="24" alt="User 07" />
                            </a>
                          </div>
                          {/* Date */}
                          <div className="flex items-center text-amber-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
                            </svg>
                            <div className="text-sm text-amber-600">Mar 27</div>
                          </div>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Group 3 */}
                <div>
                  <h2 className="grow font-semibold text-slate-800 truncate mb-4">Completed 🎉</h2>
                  <div className="space-y-2">
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4 opacity-60" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" defaultChecked />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Design new diagrams</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Avatars */}
                          <div className="flex shrink-0 -space-x-3 -ml-px">
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage08} width="24" height="24" alt="User 08" />
                            </a>
                          </div>
                          {/* To-do info */}
                          <div className="flex items-center text-slate-400 ml-3">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M6.974 14c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6z" />
                            </svg>
                            <div className="text-sm text-slate-500">3/3</div>
                          </div>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                    {/* Task */}
                    <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-4 opacity-60" draggable="true">
                      <div className="sm:flex sm:justify-between sm:items-start">
                        {/* Left side */}
                        <div className="grow mt-0.5 mb-3 sm:mb-0 space-y-3">
                          <div className="flex items-center">
                            {/* Drag button */}
                            <button className="cursor-move mr-2">
                              <span className="sr-only">Drag</span>
                              <svg className="w-3 h-3 fill-slate-500" viexbox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1h12v2H0V1Zm0 4h12v2H0V5Zm0 4h12v2H0V9Z" fill="#CBD5E1" fillRule="evenodd" />
                              </svg>
                            </button>
                            {/* Checkbox button */}
                            <label className="flex items-center">
                              <input type="checkbox" className="peer focus:ring-0 focus-visible:ring w-5 h-5 bg-white border border-slate-200 text-indigo-500 rounded-full" defaultChecked />
                              <span className="font-medium text-slate-800 peer-checked:line-through ml-2">Update the contact page</span>
                            </label>
                          </div>
                        </div>
                        {/* Right side */}
                        <div className="flex items-center justify-end space-x-3">
                          {/* Avatars */}
                          <div className="flex shrink-0 -space-x-3 -ml-px">
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage08} width="24" height="24" alt="User 08" />
                            </a>
                            <a className="block" href="#0">
                              <img className="rounded-full border-2 border-white box-content" src={UserImage07} width="24" height="24" alt="User 07" />
                            </a>
                          </div>
                          {/* To-do info */}
                          <div className="flex items-center text-slate-400 ml-3">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
                              <path d="M6.974 14c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6z" />
                            </svg>
                            <div className="text-sm text-slate-500">2/2</div>
                          </div>
                          {/* Attach button */}
                          <button className="text-slate-400 hover:text-indigo-500">
                            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" 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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default TasksList;
--- a/src/pages/utility/Changelog.jsx
+++ b/src/pages/utility/Changelog.jsx
@@ -1,228 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import PaginationClassic from '../../components/PaginationClassic';
 import User01 from '../../images/user-32-01.jpg';
 import User02 from '../../images/user-32-02.jpg';
 import User07 from '../../images/user-32-07.jpg';
 function Changelog() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Changelog ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Add board button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="ml-2">Add Entry</span>
                </button>
              </div>
            </div>
            <div className="border-t border-slate-200">
              <div className="max-w-3xl m-auto mt-8">
                {/* Filters */}
                <div className="xl:pl-32 xl:-translate-x-16 mb-2">
                  <ul className="flex flex-wrap -m-1">
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">View All</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Announcements</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Bug Fix</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Product</button>
                    </li>
                    <li className="m-1">
                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Exciting News</button>
                    </li>
                  </ul>
                </div>
                {/* Posts */}
                <div className="xl:-translate-x-16">
                  {/* Post */}
                  <article className="pt-6">
                    <div className="xl:flex">
                      <div className="w-32 shrink-0">
                        <div className="text-xs font-semibold uppercase text-slate-400 xl:leading-8">8 July, 2021</div>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <h2 className="text-2xl text-slate-800 font-bold mb-3">Released version 2.0</h2>
                          <div className="flex flex-nowrap items-center space-x-2 mb-4">
                            <div className="flex items-center">
                              <a className="block mr-2 shrink-0" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User07} width="32" height="32" alt="User 04" />
                              </a>
                              <a className="block text-sm font-semibold text-slate-800" href="#0">
                                Simona Lürwer
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Product</div>
                            </div>
                          </div>
                        </header>
                        <div className="space-y-3">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.</p>
                        </div>
                      </div>
                    </div>
                  </article>
                  {/* Post */}
                  <article className="pt-6">
                    <div className="xl:flex">
                      <div className="w-32 shrink-0">
                        <div className="text-xs font-semibold uppercase text-slate-400 xl:leading-8">6 July, 2021</div>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <h2 className="text-2xl text-slate-800 font-bold mb-3">Feature Name is now public 🎉</h2>
                          <div className="flex flex-nowrap items-center space-x-2 mb-4">
                            <div className="flex items-center">
                              <a className="block mr-2 shrink-0" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User02} width="32" height="32" alt="User 04" />
                              </a>
                              <a className="block text-sm font-semibold text-slate-800" href="#0">
                                Danielle Cohen
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Announcement</div>
                            </div>
                          </div>
                        </header>
                        <div className="space-y-3">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.</p>
                        </div>
                      </div>
                    </div>
                  </article>
                  {/* Post */}
                  <article className="pt-6">
                    <div className="xl:flex">
                      <div className="w-32 shrink-0">
                        <div className="text-xs font-semibold uppercase text-slate-400 xl:leading-8">4 July, 2021</div>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <h2 className="text-2xl text-slate-800 font-bold mb-3">Bugs fixed, issues, and more</h2>
                          <div className="flex flex-nowrap items-center space-x-2 mb-4">
                            <div className="flex items-center">
                              <a className="block mr-2 shrink-0" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User01} width="32" height="32" alt="User 04" />
                              </a>
                              <a className="block text-sm font-semibold text-slate-800" href="#0">
                                Patrick Kumar
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">Bug Fix</div>
                            </div>
                          </div>
                        </header>
                        <div className="space-y-3">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.</p>
                          <ul className="list-disc list-inside space-y-1">
                            <li>E-commerce: Better lorem ipsum generator.</li>
                            <li>Booking: Lorem ipsum post generator.</li>
                            <li>Retail: Better lorem ipsum generator.</li>
                            <li>Services: Better lorem ipsum generator.</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </article>
                  {/* Post */}
                  <article className="pt-6">
                    <div className="xl:flex">
                      <div className="w-32 shrink-0">
                        <div className="text-xs font-semibold uppercase text-slate-400 xl:leading-8">2 July, 2021</div>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <h2 className="text-2xl text-slate-800 font-bold mb-3">Thanks, everyone 🙌</h2>
                          <div className="flex flex-nowrap items-center space-x-2 mb-4">
                            <div className="flex items-center">
                              <a className="block mr-2 shrink-0" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User02} width="32" height="32" alt="User 04" />
                              </a>
                              <a className="block text-sm font-semibold text-slate-800" href="#0">
                                Danielle Cohen
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-sky-100 text-sky-600 rounded-full text-center px-2.5 py-1">Exciting News</div>
                            </div>
                          </div>
                        </header>
                        <div className="space-y-3">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.</p>
                        </div>
                      </div>
                    </div>
                  </article>
                </div>
                {/* Pagination */}
                <div className="xl:pl-32 xl:-translate-x-16 mt-6">
                  <PaginationClassic />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Changelog;
--- a/src/pages/utility/EmptyState.jsx
+++ b/src/pages/utility/EmptyState.jsx
@@ -1,81 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function EmptyState() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Empty State ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Add board button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="ml-2">Add Event</span>
                </button>
              </div>
            </div>
            <div className="border-t border-slate-200">
              <div className="max-w-2xl m-auto mt-16">
                <div className="text-center px-4">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-t from-slate-200 to-slate-100 mb-4">
                    <svg className="w-5 h-6 fill-current" viewBox="0 0 20 24">
                      <path className="text-slate-500" d="M10 10.562l9-5-8.514-4.73a1 1 0 00-.972 0L1 5.562l9 5z" />
                      <path className="text-slate-300" d="M9 12.294l-9-5v10.412a1 1 0 00.514.874L9 23.294v-11z" />
                      <path className="text-slate-400" d="M11 12.294v11l8.486-4.714a1 1 0 00.514-.874V7.295l-9 4.999z" />
                    </svg>
                  </div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-2">Pay your bills in just a few clicks</h2>
                  <div className="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                    <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                    <span className="ml-2">Add Event</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default EmptyState;
--- a/src/pages/utility/Faqs.jsx
+++ b/src/pages/utility/Faqs.jsx
@@ -1,228 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function Faqs() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
            <div className="max-w-3xl m-auto">
              {/* Page title */}
              <div className="mb-5">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">👋 How we can help you today?</h1>
              </div>
              {/* Search form */}
              <div className="mb-6">
                <form className="relative">
                  <label htmlFor="action-search" className="sr-only">Search</label>
                  <input id="action-search" className="form-input pl-9 py-3 focus:border-slate-300 w-full" type="search" />
                  <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                      <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                    </svg>
                  </button>
                </form>
              </div>
              {/* Filters */}
              <div className="mb-8 border-b border-slate-200">
                <ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
                  <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                    <a className="text-indigo-500 whitespace-nowrap" href="#0">Popular</a>
                  </li>
                  <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                    <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Accessibility</a>
                  </li>
                  <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                    <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Marketing</a>
                  </li>
                  <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                    <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Development</a>
                  </li>
                  <li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
                    <a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Account</a>
                  </li>
                </ul>
              </div>
              {/* Posts */}
              <div>
                <h2 className="text-2xl text-slate-800 font-bold mb-4">Popular Questions</h2>
                {/* Post */}
                <article className="py-4 border-b border-slate-200">
                  <header className="flex items-start mb-2">
                    <div className="mt-2 mr-3">
                      <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
                        <path className="text-indigo-300" d="M4 8H0v4.9c0 1 .7 1.9 1.7 2.1 1.2.2 2.3-.8 2.3-2V8z" />
                        <path className="text-indigo-500" d="M15 1H7c-.6 0-1 .4-1 1v11c0 .7-.2 1.4-.6 2H13c1.7 0 3-1.3 3-3V2c0-.6-.4-1-1-1z" />
                      </svg>
                    </div>
                    <h3 className="text-xl leading-snug text-slate-800 font-bold">How can the widget to my website?</h3>
                  </header>
                  <div className="pl-7">
                    <div className="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
                    <ul className="flex flex-wrap">
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">General</a>
                      </li>
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Marketing</a>
                      </li>
                    </ul>
                  </div>
                </article>
                {/* Post */}
                <article className="py-4 border-b border-slate-200">
                  <header className="flex items-start mb-2">
                    <div className="mt-2 mr-3">
                      <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
                        <path className="text-indigo-300" d="M4 8H0v4.9c0 1 .7 1.9 1.7 2.1 1.2.2 2.3-.8 2.3-2V8z" />
                        <path className="text-indigo-500" d="M15 1H7c-.6 0-1 .4-1 1v11c0 .7-.2 1.4-.6 2H13c1.7 0 3-1.3 3-3V2c0-.6-.4-1-1-1z" />
                      </svg>
                    </div>
                    <h3 className="text-xl leading-snug text-slate-800 font-bold">What would happen if I choose not to pay after the usage?</h3>
                  </header>
                  <div className="pl-7">
                    <div className="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
                    <ul className="flex flex-wrap">
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Development</a>
                      </li>
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Acessibility</a>
                      </li>
                    </ul>
                  </div>
                </article>
                {/* Post */}
                <article className="py-4 border-b border-slate-200">
                  <header className="flex items-start mb-2">
                    <div className="mt-2 mr-3">
                      <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
                        <path className="text-indigo-300" d="M4 8H0v4.9c0 1 .7 1.9 1.7 2.1 1.2.2 2.3-.8 2.3-2V8z" />
                        <path className="text-indigo-500" d="M15 1H7c-.6 0-1 .4-1 1v11c0 .7-.2 1.4-.6 2H13c1.7 0 3-1.3 3-3V2c0-.6-.4-1-1-1z" />
                      </svg>
                    </div>
                    <h3 className="text-xl leading-snug text-slate-800 font-bold">What limitations do trial accounts have?</h3>
                  </header>
                  <div className="pl-7">
                    <div className="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
                    <ul className="flex flex-wrap">
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Development</a>
                      </li>
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Plans</a>
                      </li>
                    </ul>
                  </div>
                </article>
                {/* Post */}
                <article className="py-4 border-b border-slate-200">
                  <header className="flex items-start mb-2">
                    <div className="mt-2 mr-3">
                      <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
                        <path className="text-indigo-300" d="M4 8H0v4.9c0 1 .7 1.9 1.7 2.1 1.2.2 2.3-.8 2.3-2V8z" />
                        <path className="text-indigo-500" d="M15 1H7c-.6 0-1 .4-1 1v11c0 .7-.2 1.4-.6 2H13c1.7 0 3-1.3 3-3V2c0-.6-.4-1-1-1z" />
                      </svg>
                    </div>
                    <h3 className="text-xl leading-snug text-slate-800 font-bold">Is there any difference between Standard and Plus licenses?</h3>
                  </header>
                  <div className="pl-7">
                    <div className="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
                    <ul className="flex flex-wrap">
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Development</a>
                      </li>
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Account</a>
                      </li>
                    </ul>
                  </div>
                </article>
                {/* Post */}
                <article className="py-4 border-b border-slate-200">
                  <header className="flex items-start mb-2">
                    <div className="mt-2 mr-3">
                      <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
                        <path className="text-indigo-300" d="M4 8H0v4.9c0 1 .7 1.9 1.7 2.1 1.2.2 2.3-.8 2.3-2V8z" />
                        <path className="text-indigo-500" d="M15 1H7c-.6 0-1 .4-1 1v11c0 .7-.2 1.4-.6 2H13c1.7 0 3-1.3 3-3V2c0-.6-.4-1-1-1z" />
                      </svg>
                    </div>
                    <h3 className="text-xl leading-snug text-slate-800 font-bold">Is my personal information protected?</h3>
                  </header>
                  <div className="pl-7">
                    <div className="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
                    <ul className="flex flex-wrap">
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">General</a>
                      </li>
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Accessibility</a>
                      </li>
                    </ul>
                  </div>
                </article>
                {/* Post */}
                <article className="py-4 border-b border-slate-200">
                  <header className="flex items-start mb-2">
                    <div className="mt-2 mr-3">
                      <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
                        <path className="text-indigo-300" d="M4 8H0v4.9c0 1 .7 1.9 1.7 2.1 1.2.2 2.3-.8 2.3-2V8z" />
                        <path className="text-indigo-500" d="M15 1H7c-.6 0-1 .4-1 1v11c0 .7-.2 1.4-.6 2H13c1.7 0 3-1.3 3-3V2c0-.6-.4-1-1-1z" />
                      </svg>
                    </div>
                    <h3 className="text-xl leading-snug text-slate-800 font-bold">What can I create with with this product?</h3>
                  </header>
                  <div className="pl-7">
                    <div className="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
                    <ul className="flex flex-wrap">
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Marketing</a>
                      </li>
                      <li className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Plans</a>
                      </li>
                    </ul>
                  </div>
                </article>
              </div>
              {/* Pagination */}
              <div className="mt-6">
                <div className="flex justify-end">
                  <a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0">See All Questions -&gt;</a>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Faqs;
--- a/src/pages/utility/KnowledgeBase.jsx
+++ b/src/pages/utility/KnowledgeBase.jsx
@@ -1,550 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function KnowledgeBase() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          {/* Search area */}
          <div className="relative flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8 py-8 lg:py-16 bg-indigo-500 overflow-hidden">
            {/* Glow */}
            <div className="absolute pointer-events-none" aria-hidden="true">
              <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="ill-a">
                    <stop stopColor="#FFF" offset="0%" />
                    <stop stopColor="#FFF" stopOpacity="0" offset="100%" />
                  </radialGradient>
                </defs>
                <circle
                  style={{ mixBlendMode: 'overlay' }}
                  cx="588"
                  cy="650"
                  r="256"
                  transform="translate(-332 -394)"
                  fill="url(#ill-a)"
                  fillRule="evenodd"
                  opacity=".48"
                />
              </svg>
            </div>
            {/* Illustration */}
            <div className="absolute pointer-events-none" aria-hidden="true">
              <svg width="1280" height="361" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                <defs>
                  <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="ill2-b">
                    <stop stopColor="#A5B4FC" offset="0%" />
                    <stop stopColor="#818CF8" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="ill2-c">
                    <stop stopColor="#4338CA" offset="0%" />
                    <stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
                  </linearGradient>
                  <path id="ill2-a" d="m64 0 64 128-64-20-64 20z" />
                  <path id="ill2-e" d="m40 0 40 80-40-12.5L0 80z" />
                </defs>
                <g fill="none" fillRule="evenodd">
                  <g transform="rotate(51 -92.764 293.763)">
                    <mask id="ill2-d" fill="#fff">
                      <use xlinkHref="#ill2-a" />
                    </mask>
                    <use fill="url(#ill2-b)" xlinkHref="#ill2-a" />
                    <path fill="url(#ill2-c)" mask="url(#ill2-d)" d="M64-24h80v152H64z" />
                  </g>
                  <g transform="rotate(-51 618.151 -940.113)">
                    <mask id="ill2-f" fill="#fff">
                      <use xlinkHref="#ill2-e" />
                    </mask>
                    <use fill="url(#ill2-b)" xlinkHref="#ill2-e" />
                    <path fill="url(#ill2-c)" mask="url(#ill2-f)" d="M40.333-15.147h50v95h-50z" />
                  </g>
                </g>
              </svg>
            </div>
            <div className="relative w-full max-w-2xl mx-auto text-center">
              <div className="mb-5">
                <h1 className="text-2xl md:text-3xl text-white font-bold">👋 What Can We Help You Find?</h1>
              </div>
              <form className="relative">
                <label htmlFor="action-search" className="sr-only">
                  Search
                </label>
                <input id="action-search" className="form-input pl-9 py-3 focus:border-slate-300 w-full" type="search" />
                <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                  <svg
                    className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2"
                    viewBox="0 0 16 16"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                    <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                  </svg>
                </button>
              </form>
            </div>
          </div>
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Sections */}
            <div className="space-y-8">
              {/* Popular Topics */}
              <div>
                <div className="mb-5">
                  <h2 className="text-xl text-slate-800 font-bold">Popular Topics</h2>
                </div>
                {/* Grid */}
                <div className="grid sm:grid-cols-2 lg:grid-cols-4 lg:sidebar-expanded:grid-cols-2 xl:sidebar-expanded:grid-cols-4 gap-6">
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon1-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <path
                                d="M19.236 21.995h-3.333c-.46 0-.833.352-.833.786v9.428c0 .434.373.786.833.786h4.167V22.78c0-.434-.374-.786-.834-.786Z"
                                fill="#4F46E5"
                                opacity=".88"
                              />
                              <path
                                d="M34.234 20.073a2.393 2.393 0 0 0-.735-.116h-5v-2.609c0-3.325-2.157-4.297-3.298-4.347a.828.828 0 0 0-.611.24.888.888 0 0 0-.257.63v4.032L21 22.077v10.924h10.19c1.1.005 2.073-.744 2.392-1.842l2.308-7.826a2.711 2.711 0 0 0-.181-1.988 2.528 2.528 0 0 0-1.475-1.272Z"
                                fill="url(#icon1-a)"
                                transform="translate(-.93 -.005)"
                              />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">Getting Started</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon2-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <path
                                d="M26.5 19c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V35l-4.108-2.148a10 10 0 0 1-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C18 22.183 21.805 19 26.5 19Z"
                                fill="#4F46E5"
                                opacity=".88"
                              />
                              <path
                                d="M23 13c-5.523 0-10 3.582-10 8 0 1.797.75 3.45 2 4.785V31l4.833-2.416c.996.266 2.059.416 3.167.416 5.523 0 10-3.582 10-8s-4.477-8-10-8Z"
                                fill="url(#icon2-a)"
                              />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">In-app Messaging</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon3-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <circle fill="url(#icon3-a)" cx="30.5" cy="17.5" r="4.5" />
                              <circle fill="#4F46E5" opacity=".88" cx="17.5" cy="17.5" r="4.5" />
                              <circle fill="#4F46E5" opacity=".88" cx="30.5" cy="30.5" r="4.5" />
                              <circle fill="url(#icon3-a)" cx="17.5" cy="30.5" r="4.5" />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">Apps &amp; Tools</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon4-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <path
                                d="M34.327 18.194H10.12c-.495 0-.897.358-.897.798v14.404c0 .44.402.798.897.798h24.207c.495 0 .896-.357.896-.798V18.992c0-.44-.401-.798-.896-.798Z"
                                fill="#4F46E5"
                                opacity=".88"
                              />
                              <path
                                d="M29.09 0H4.883c-.494 0-.896.357-.896.798v14.404c0 .44.402.798.896.798H29.09c.495 0 .897-.357.897-.798V.798c0-.44-.402-.798-.897-.798Z"
                                fill="url(#icon4-a)"
                                transform="rotate(-8 126.748 -40.297)"
                              />
                              <path d="M25.194 25.777a3 3 0 1 1-.835-5.942 3 3 0 0 1 .835 5.942Z" fill="#6366F1" opacity=".72" />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">Billing &amp; Invoices</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon5-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <path
                                d="M31.074 20.692a5.516 5.516 0 0 0-7.878-1.107c-.172.133-.311.293-.463.44-.106-.184-.196-.375-.324-.55a5.516 5.516 0 0 0-7.878-1.108c-2.49 1.932-3 5.56-1.14 8.103l7.142 9.207 9.402-6.882c2.49-1.931 3-5.56 1.139-8.103Z"
                                fill="#4F46E5"
                                opacity=".88"
                              />
                              <path
                                d="M20.353 2.998a5.516 5.516 0 0 0-7.955 0c-.152.156-.268.333-.398.5-.13-.167-.246-.344-.398-.5a5.516 5.516 0 0 0-7.955 0c-2.196 2.26-2.196 5.924 0 8.183L12 19.304l8.353-8.123c2.196-2.26 2.196-5.924 0-8.183Z"
                                fill="url(#icon5-a)"
                                transform="rotate(16 -34.482 60.533)"
                              />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">Support</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon6-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <path
                                d="M33.83 16.57 9.803 19.52c-.491.06-.846.464-.793.901l1.756 14.297c.054.437.496.743.987.683l24.026-2.95c.492-.06.847-.464.793-.901l-1.755-14.297c-.054-.438-.496-.743-.987-.683Z"
                                fill="#4F46E5"
                                opacity=".88"
                              />
                              <path
                                d="M28.712 0H4.505c-.495 0-.897.357-.897.798v14.404c0 .44.402.798.897.798h24.207c.494 0 .896-.357.896-.798V.798c0-.44-.402-.798-.896-.798Z"
                                fill="url(#icon6-a)"
                                transform="rotate(8 -86.45 77.005)"
                              />
                              <path fill="#6366F1" opacity=".72" d="m23.646 19.765 4.533 3.667-5.368 2.275z" />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">Multimedia / Files</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon7-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g transform="translate(-.186 -.042)" fillRule="nonzero" fill="none">
                              <circle fill="#554FE8" cx="20" cy="26.993" r="10" />
                              <circle fill="url(#icon7-a)" cx="25.122" cy="24" r="11" />
                              <path
                                fill="#6366F1"
                                opacity=".72"
                                d="m26.255 22.605-1.569-3.586-.922 3.804-3.735.327 3.26 2.195-.864 3.91 2.927-2.626 3.339 2.078-1.53-3.7 2.83-2.729z"
                              />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">App Rewards</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="bg-slate-100 rounded-sm text-center p-5">
                    <div className="flex flex-col h-full">
                      <div className="grow mb-2">
                        {/* Icon */}
                        <div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
                          <svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon8-a">
                                <stop stopColor="#FFF" offset="0%" />
                                <stop stopColor="#A5B4FC" offset="100%" />
                              </linearGradient>
                            </defs>
                            <g fillRule="nonzero" fill="none">
                              <path
                                d="M18.648 35.069c.232.217.46.322.798.31.337-.012.558-.132.775-.365l1.95-2.094c1.028.414 2.504.813 4.076.758 1.798-.063 3.688-.692 5.426-2.441 3.686-3.956 4.05-12.862 4.038-13.199-.012-.337-.136-.67-.368-.888-.233-.217-.574-.317-.91-.306-.338.012-9.405 1.23-12.875 4.953-2.168 2.327-2.41 5.037-1.883 7.27l6.61-3.946-7.804 8.378a1.206 1.206 0 0 0 .167 1.57Z"
                                fill="#554FE8"
                              />
                              <path
                                d="M.353 17.663c.225.224.45.337.787.337s.562-.113.786-.337l2.024-2.026c1.011.45 2.473.9 4.046.9 1.799 0 3.71-.562 5.508-2.25C17.326 10.462 18 1.575 18 1.237c0-.337-.112-.675-.337-.9C17.438.113 17.1 0 16.763 0c-.337 0-9.441.9-13.038 4.5-2.248 2.25-2.585 4.95-2.136 7.2l6.744-3.712-8.093 8.1a1.206 1.206 0 0 0 .113 1.575Z"
                                fill="url(#icon8-a)"
                                transform="rotate(13 -42.427 83.827)"
                              />
                            </g>
                          </svg>
                        </div>
                        {/* Content */}
                        <h3 className="text-lg font-semibold text-slate-800 mb-1">Contact Us</h3>
                        <div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
                      </div>
                      {/* Link */}
                      <div>
                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          Explore -&gt;
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* Popular Guides */}
              <div>
                <div className="mb-5">
                  <h2 className="text-xl text-slate-800 font-bold">Popular Guides</h2>
                </div>
                {/* Grid */}
                <div className="grid sm:grid-cols-2 gap-6">
                  {/* Item */}
                  <div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
                    <div className="flex h-full">
                      {/* Icon */}
                      <svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
                        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
                      </svg>
                      <div className="flex flex-col h-full">
                        {/* Content */}
                        <div className="grow mb-2">
                          <div className="font-semibold text-slate-800 mb-1">Documents For Business Verification</div>
                          <div className="text-sm">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
                          </div>
                        </div>
                        {/* Link */}
                        <div>
                          <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                            View -&gt;
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
                    <div className="flex h-full">
                      {/* Icon */}
                      <svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
                        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
                      </svg>
                      <div className="flex flex-col h-full">
                        {/* Content */}
                        <div className="grow mb-2">
                          <div className="font-semibold text-slate-800 mb-1">Delayed Or Missing Payouts</div>
                          <div className="text-sm">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
                          </div>
                        </div>
                        {/* Link */}
                        <div>
                          <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                            View -&gt;
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
                    <div className="flex h-full">
                      {/* Icon */}
                      <svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
                        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
                      </svg>
                      <div className="flex flex-col h-full">
                        {/* Content */}
                        <div className="grow mb-2">
                          <div className="font-semibold text-slate-800 mb-1">Update Existing Bank Account Information</div>
                          <div className="text-sm">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
                          </div>
                        </div>
                        {/* Link */}
                        <div>
                          <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                            View -&gt;
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  {/* Item */}
                  <div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
                    <div className="flex h-full">
                      {/* Icon */}
                      <svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
                        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
                      </svg>
                      <div className="flex flex-col h-full">
                        {/* Content */}
                        <div className="grow mb-2">
                          <div className="font-semibold text-slate-800 mb-1">Close A Mosaic Account</div>
                          <div className="text-sm">
                            Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
                          </div>
                        </div>
                        {/* Link */}
                        <div>
                          <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                            View -&gt;
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default KnowledgeBase;
--- a/src/pages/utility/PageNotFound.jsx
+++ b/src/pages/utility/PageNotFound.jsx
@@ -1,49 +0,0 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import NotFoundImage from '../../images/404-illustration.svg';
 function PageNotFound() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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">
            <div className="max-w-2xl m-auto mt-16">
              <div className="text-center px-4">
                <div className="inline-flex mb-8">
                  <img src={NotFoundImage} width="176" height="176" alt="404 illustration" />
                </div>
                <div className="mb-6">Hmm...this page doesn’t exist. Try searching for something else!</div>
                <Link to="/" className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Back To Dashboard</Link>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default PageNotFound;
--- a/src/pages/utility/Roadmap.jsx
+++ b/src/pages/utility/Roadmap.jsx
@@ -1,363 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import User01 from '../../images/user-28-01.jpg';
 import User02 from '../../images/user-28-02.jpg';
 import User03 from '../../images/user-28-03.jpg';
 import User05 from '../../images/user-28-05.jpg';
 import User06 from '../../images/user-28-06.jpg';
 import User08 from '../../images/user-28-08.jpg';
 import User09 from '../../images/user-28-09.jpg';
 function Roadmap() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  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 bg-white">
        {/*  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="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Roadmap ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Add board button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" 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>
                  <span className="ml-2">Add Event</span>
                </button>
              </div>
            </div>
            <div className="border-t border-slate-200">
              <div className="max-w-3xl m-auto mt-8">
                {/* Posts */}
                <div className="xl:-translate-x-16">
                  {/* Post */}
                  <article className="pt-6">
                    <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">2021 Q1</h2>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
                            {/* Avatars */}
                            <div className="flex shrink-0 -space-x-3 -ml-px">
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User05} width="28" height="28" alt="User 05" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User08} width="28" height="28" alt="User 08" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User09} width="28" height="28" alt="User 09" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User06} width="28" height="28" alt="User 06" />
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Completed</div>
                            </div>
                          </div>
                        </header>
                        {/* List */}
                        <ul className="-my-2">
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <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="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <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="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <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="text-lg font-bold text-slate-800 pl-9">Proof-of-Funds Compliance Key</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <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="text-lg font-bold text-slate-800 pl-9">Activity Feed Integration</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </article>
                  {/* Post */}
                  <article className="pt-6">
                    <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">2021 Q2</h2>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
                            {/* Avatars */}
                            <div className="flex shrink-0 -space-x-3 -ml-px">
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User05} width="28" height="28" alt="User 05" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Working on</div>
                            </div>
                          </div>
                        </header>
                        {/* List */}
                        <ul className="-my-2">
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <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="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <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="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <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="text-lg font-bold text-slate-800 pl-9">Proof-of-Funds Compliance Key</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Activity Feed Integration</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </article>
                  {/* Post */}
                  <article className="pt-6">
                    <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">2021 Q3</h2>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
                            {/* Avatars */}
                            <div className="flex shrink-0 -space-x-3 -ml-px">
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User06} width="28" height="28" alt="User 03" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User05} width="28" height="28" alt="User 05" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User09} width="28" height="28" alt="User 01" />
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Planned</div>
                            </div>
                          </div>
                        </header>
                        {/* List */}
                        <ul className="-my-2">
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </article>
                  {/* Post */}
                  <article className="pt-6">
                    <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">2021 Q4</h2>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
                            {/* Avatars */}
                            <div className="flex shrink-0 -space-x-3 -ml-px">
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User06} width="28" height="28" alt="User 03" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User02} width="28" height="28" alt="User 02" />
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                            <div>
                              <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Planned</div>
                            </div>
                          </div>
                        </header>
                        {/* List */}
                        <ul className="-my-2">
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-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>
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Roadmap;
--- a/src/partials/Sidebar.jsx
+++ b/src/partials/Sidebar.jsx
--- a/src/partials/actions/DeleteButton.jsx
+++ b/src/partials/actions/DeleteButton.jsx
@@ -1,16 +0,0 @@
 import React from 'react';
 function DeleteButton({
  selectedItems
 }) {
  return (
    <div className={`${selectedItems.length < 1 && 'hidden'}`}>
      <div className="flex items-center">
        <div className="hidden xl:block text-sm italic mr-2 whitespace-nowrap"><span>{selectedItems.length}</span> items selected</div>
        <button className="btn bg-white border-slate-200 hover:border-slate-300 text-rose-500 hover:text-rose-600">Delete</button>
      </div>
    </div>
  );
 }
 export default DeleteButton;
--- a/src/partials/actions/SearchForm.jsx
+++ b/src/partials/actions/SearchForm.jsx
@@ -1,24 +0,0 @@
 import React from 'react';
 function SearchForm({
  placeholder
 }) {
  return (
    <form className="relative">
      <label htmlFor="action-search" className="sr-only">Search</label>
      <input id="action-search" className="form-input pl-9 focus:border-slate-300" type="search" placeholder={placeholder} />
      <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
        <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
          <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
        </svg>
      </button>
    </form>
  );
 }
 SearchForm.defaultProps = {
  placeholder: 'Search…'
 }
 export default SearchForm;
--- a/src/partials/applications/ApplicationsCard01.jsx
+++ b/src/partials/applications/ApplicationsCard01.jsx
@@ -1,103 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function ApplicationsCard01(props) {
  return (
    <div className="col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
      <div className="flex flex-col h-full">
        {/* Image */}
        <img className="w-full" src={props.image} width="286" height="160" alt={props.title} />
        {/* Card Content */}
        <div className="grow flex flex-col p-5">
          {/* Card body */}
          <div className="grow">
            {/* Header */}
            <header className="mb-2">
              <h3 className="text-lg text-slate-800 font-semibold mb-1">{props.title}</h3>
              <div className="text-sm">{props.content}</div>
            </header>
            {/* Rating */}
            <div className="flex items-center space-x-2 mb-4">
              {/* Stars */}
              <div className="flex space-x-1">
                <button>
                  <span className="sr-only">1 star</span>
                  <svg className={`w-4 h-4 fill-current ${Math.round(props.rating) > 0 ? 'text-amber-500' : 'text-slate-300'}`} viewBox="0 0 16 16">
                    <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                  </svg>
                </button>
                <button>
                  <span className="sr-only">2 stars</span>
                  <svg className={`w-4 h-4 fill-current ${Math.round(props.rating) > 1 ? 'text-amber-500' : 'text-slate-300'}`} viewBox="0 0 16 16">
                    <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                  </svg>
                </button>
                <button>
                  <span className="sr-only">3 stars</span>
                  <svg className={`w-4 h-4 fill-current ${Math.round(props.rating) > 2 ? 'text-amber-500' : 'text-slate-300'}`} viewBox="0 0 16 16">
                    <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                  </svg>
                </button>
                <button>
                  <span className="sr-only">4 stars</span>
                  <svg className={`w-4 h-4 fill-current ${Math.round(props.rating) > 3 ? 'text-amber-500' : 'text-slate-300'}`} viewBox="0 0 16 16">
                    <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                  </svg>
                </button>
                <button>
                  <span className="sr-only">5 stars</span>
                  <svg className={`w-4 h-4 fill-current ${Math.round(props.rating) > 4 ? 'text-amber-500' : 'text-slate-300'}`} viewBox="0 0 16 16">
                    <path d="M10 5.934L8 0 6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934z" />
                  </svg>
                </button>
              </div>
              {/* Rate */}
              <div className="inline-flex text-sm font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-0.5">{props.rating}</div>
            </div>
            {/* Features list */}
            <ul className="text-sm space-y-2 mb-5">
              { props.feat01 && (
                <li className="flex items-center">
                  <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-3" viewBox="0 0 16 16">
                    <path d="M15.686 5.695L10.291.3c-.4-.4-.999-.4-1.399 0s-.4.999 0 1.399l.6.599-6.794 3.697-1-1c-.4-.399-.999-.399-1.398 0-.4.4-.4 1 0 1.4l1.498 1.498 2.398 2.398L.6 13.988 2 15.387l3.696-3.697 3.997 3.996c.5.5 1.199.2 1.398 0 .4-.4.4-.999 0-1.398l-.999-1 3.697-6.694.6.6c.599.6 1.199.2 1.398 0 .3-.4.3-1.1-.1-1.499zM8.493 11.79L4.196 7.494l6.695-3.697 1.298 1.299-3.696 6.694z" />
                  </svg>
                  <div>{props.feat01}</div>
                </li>
              )}
              {props.feat02 && (
                <li className="flex items-center">
                  <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-3" viewBox="0 0 16 16">
                    <path d="M15 15V5l-5-5H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h12c.6 0 1-.4 1-1zM3 2h6v4h4v8H3V2z" />
                  </svg>
                  <div>{props.feat02}</div>
                </li>
              )}
              {props.feat03 && (
                <li className="flex items-center">
                  <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-3" viewBox="0 0 16 16">
                    <path d="M13 7h2v6a1 1 0 01-1 1H4v2l-4-3 4-3v2h9V7zM3 9H1V3a1 1 0 011-1h10V0l4 3-4 3V4H3v5z" />
                  </svg>
                  <div>{props.feat03}</div>
                </li>
              )}
              {props.feat04 && (
                <li className="flex items-center">
                  <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-3" viewBox="0 0 16 16">
                    <path d="M7.3 8.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0zm0 6c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0zm-7-5c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0z" />
                  </svg>
                  <div>{props.feat04}</div>
                </li>
              )}
            </ul>
          </div>
          {/* Card footer */}
          <div>
            <Link className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" to={props.link}>Install</Link>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default ApplicationsCard01;
--- a/src/partials/applications/ApplicationsCard02.jsx
+++ b/src/partials/applications/ApplicationsCard02.jsx
@@ -1,35 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function ApplicationsCard02(props) {
  return (
    <div className="col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
      <div className="flex flex-col h-full">
        {/* Image */}
        <img className="w-full" src={props.image} width="286" height="160" alt={props.name} />
        {/* Card Content */}
        <div className="grow flex flex-col p-5">
          {/* Card body */}
          <div className="grow">
            {/* Header */}
            <header className="mb-2">
              <h3 className="text-lg text-slate-800 font-semibold mb-1">{props.title}</h3>
              <div className="text-sm">{props.content}</div>
            </header>
            {/* Price */}
            <div className="flex items-center space-x-2 mb-4">
              <div className="inline-flex text-sm font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-0.5">{props.deal}</div>
              <div className="inline-flex text-sm font-medium text-slate-500 line-through">{props.price}</div>
            </div>
          </div>
          {/* Card footer */}
          <div>
            <Link className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" to={props.link}>Buy Now</Link>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default ApplicationsCard02;
--- a/src/partials/applications/ApplicationsCard03.jsx
+++ b/src/partials/applications/ApplicationsCard03.jsx
@@ -1,66 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function ApplicationsCard03(props) {
  const handleIcon = (id) => {
    switch (id) {
      case 0:
        return (
          <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path className="text-indigo-300" d="M13 15l11-7L11.504.136a1 1 0 00-1.019.007L0 7l13 8z" />
            <path className="text-indigo-600" d="M13 15L0 7v9c0 .355.189.685.496.864L13 24v-9z" />
            <path className="text-indigo-500" d="M13 15.047V24l10.573-7.181A.999.999 0 0024 16V8l-11 7.047z" />
          </svg>
        );
      case 1:
        return (
          <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <circle className="text-sky-200" cx="15" cy="15" r="9" fillRule="nonzero" />
            <circle className="text-sky-400" cx="9" cy="9" r="9" />
          </svg>
        );
      case 2:
        return (
          <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path className="text-emerald-400" d="M23.864 4.45L19.553.139l-2.337 4.663 1.98 1.98zM4.802 6.784l1.979-1.979L4.45.136.139 4.447z" />
            <path className="text-emerald-200" d="M4 15.385V8.619L0 6.614v10.769z" />
            <path className="text-emerald-500" d="M8.414 6L6 8.414v7.172L8.414 18h7.172L18 15.586V8.414L15.586 6z" />
            <path className="text-emerald-200" d="M8.615 4h6.766l2.005-4H6.617z" />
            <path className="text-emerald-400" d="M6.784 19.198l-1.98-1.98L.136 19.55l4.311 4.311z" />
            <path className="text-emerald-200" d="M20 8.615v6.766l4 2.005V6.617z" />
            <path className="text-emerald-400" d="M19.198 17.216l-1.979 1.979 2.331 4.669 4.311-4.311z" />
            <path className="text-emerald-200" d="M15.385 20H8.619l-2.005 4h10.769z" />
          </svg>
        );
      case 3:
        return (
          <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
            <path className="text-rose-100" d="M12 10l12 7-12 7-12-7z" />
            <path className="text-rose-300" d="M12 5l12 7-12 7-12-7z" />
            <path className="text-rose-500" d="M12 0l12 7-12 7L0 7z" />
          </svg>
        );
      default:
        return;
    }
  };
  return (
    <div className="col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
      <div className="flex flex-col h-full text-center p-5">
        <div className="grow mb-1">
          <div className="inline-flex justify-center items-center w-12 h-12 bg-slate-100 rounded-full mb-2">
            {handleIcon(props.id)}
          </div>
          <h3 className="text-lg text-slate-800 font-semibold mb-1">{props.title}</h3>
        </div>
        <div>
          <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to={props.link}>Explore -&gt;</Link>
        </div>
      </div>
    </div>
  );
 }
 export default ApplicationsCard03;
--- a/src/partials/campaigns/CampaignsCard.jsx
+++ b/src/partials/campaigns/CampaignsCard.jsx
@@ -1,99 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function CampaignsCard(props) {
  const typeColor = (type) => {
    switch (type) {
      case 'One-Time':
        return 'bg-emerald-100 text-emerald-600';
      case 'At Risk':
        return 'bg-amber-100 text-amber-600';
      case 'Off-Track':
        return 'bg-rose-100 text-rose-600';
      default:
        return 'bg-slate-100 text-slate-500';
    }
  };
  const categoryIcon = (category) => {
    switch (category) {
      case '1':
        return (
          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-rose-500">
            <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
              <path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
            </svg>
          </div>
        );
      case '2':
        return (
          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-emerald-500">
            <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
              <path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
            </svg>
          </div>
        );
      case '3':
        return (
          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-sky-500">
            <svg className="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
              <path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
            </svg>
          </div>
        );
      case '4':
        return (
          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-indigo-500">
            <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
              <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
            </svg>
          </div>
        );
      default:
        return (<div></div>);
    }
  };
  return (
    <div className="col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <div className="flex flex-col h-full p-5">
        <header>
          <div className="flex items-center justify-between">
            {categoryIcon(props.category)}
            <div className="flex shrink-0 -space-x-3 -ml-px">
              {
                props.members.map(member => {
                  return (
                    <Link key={member.name} className="block" to={member.link}>
                      <img className="rounded-full border-2 border-white box-content" src={member.image} width="28" height="28" alt={member.name} />
                    </Link>
                  )
                })
              }
            </div>
          </div>
        </header>
        <div className="grow mt-2">
          <Link className="inline-flex text-slate-800 hover:text-slate-900 mb-1" to={props.link}>
            <h2 className="text-xl leading-snug font-semibold">{props.title}</h2>
          </Link>
          <div className="text-sm">{props.content}</div>
        </div>
        <footer className="mt-5">
          <div className="text-sm font-medium text-slate-500 mb-2">{props.dates.from} <span className="text-slate-400">-&gt;</span> {props.dates.to}</div>
          <div className="flex justify-between items-center">
            <div>
              <div className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${typeColor(props.type)}`}>{props.type}</div>
            </div>
            <div>
              <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to={props.link}>View -&gt;</Link>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
 }
 export default CampaignsCard;
--- a/src/partials/community/FeedLeftContent.jsx
+++ b/src/partials/community/FeedLeftContent.jsx
@@ -1,113 +0,0 @@
 import React from 'react';
 function FeedLeftContent() {
  return (
    <div className="w-full md:w-60 mb-8 md:mb-0">
      <div className="md:sticky md:top-16 md:h-[calc(100vh-64px)] md:overflow-x-hidden md:overflow-y-auto no-scrollbar">
        <div className="md:py-8">
          {/* Title */}
          <header className="mb-6">
            <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Feed ✨</h1>
          </header>
          {/* Search form */}
          <div className="xl:hidden mb-6">
            <form className="relative">
              <label htmlFor="feed-search-mobile" className="sr-only">
                Search
              </label>
              <input id="feed-search-mobile" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search…" />
              <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                <svg
                  className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2"
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                  <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                </svg>
              </button>
            </form>
          </div>
          {/* Links */}
          <div className="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-4 md:space-y-3 -mx-4">
            {/* Group 1 */}
            <div>
              <div className="text-xs font-semibold text-slate-400 uppercase mb-3 md:sr-only">Menu</div>
              <ul className="flex flex-nowrap md:block mr-3 md:mr-0">
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap bg-white" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mr-2" viewBox="0 0 16 16">
                      <path d="M10 16h4c.6 0 1-.4 1-.998V6.016c0-.3-.1-.6-.4-.8L8.6.226c-.4-.3-.9-.3-1.3 0l-6 4.992c-.2.2-.3.5-.3.799v8.986C1 15.6 1.4 16 2 16h4c.6 0 1-.4 1-.998v-2.996h2v2.996c0 .599.4.998 1 .998Zm-4-5.99c-.6 0-1 .399-1 .998v2.995H3V6.515L8 2.32l5 4.194v7.488h-2v-2.995c0-.6-.4-.999-1-.999H6Z" />
                    </svg>
                    <span className="text-sm font-medium text-indigo-500">Home</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M14.14 9.585h-.002a2.5 2.5 0 0 1-2 4.547 6.91 6.91 0 0 1-6.9 1.165 4.436 4.436 0 0 0 1.343-1.682c.365.087.738.132 1.113.135a4.906 4.906 0 0 0 2.924-.971 2.5 2.5 0 0 1 3.522-3.194Zm-4.015-7.397a7.023 7.023 0 0 1 4.47 5.396 4.5 4.5 0 0 0-1.7-.334c-.15.002-.299.012-.447.03a5.027 5.027 0 0 0-2.723-3.078 2.5 2.5 0 1 1 .4-2.014ZM4.663 10.5a2.5 2.5 0 1 1-3.859-.584 6.888 6.888 0 0 1-.11-1.166c0-2.095.94-4.08 2.56-5.407.093.727.364 1.419.788 2.016A4.97 4.97 0 0 0 2.694 8.75c.003.173.015.345.037.516A2.49 2.49 0 0 1 4.663 10.5Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Explore</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M5 9h11v2H5V9zM0 9h3v2H0V9zm5 4h6v2H5v-2zm-5 0h3v2H0v-2zm5-8h7v2H5V5zM0 5h3v2H0V5zm5-4h11v2H5V1zM0 1h3v2H0V1z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Notifications</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M10.59 7.658 8 5.5 5.41 7.658A.25.25 0 0 1 5 7.466V0h6v7.466a.25.25 0 0 1-.41.192Z" />
                      <path d="M14 16H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2v2H2v12h12V2h-2V0h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Bookmarks</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M12.311 9.527c-1.161-.393-1.85-.825-2.143-1.175A3.991 3.991 0 0012 5V4c0-2.206-1.794-4-4-4S4 1.794 4 4v1c0 1.406.732 2.639 1.832 3.352-.292.35-.981.782-2.142 1.175A3.942 3.942 0 001 13.26V16h14v-2.74c0-1.69-1.081-3.19-2.689-3.733zM6 4c0-1.103.897-2 2-2s2 .897 2 2v1c0 1.103-.897 2-2 2s-2-.897-2-2V4zm7 10H3v-.74c0-.831.534-1.569 1.33-1.838 1.845-.624 3-1.436 3.452-2.422h.436c.452.986 1.607 1.798 3.453 2.422A1.943 1.943 0 0113 13.26V14z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Profile</span>
                  </a>
                </li>
              </ul>
            </div>
            {/* Group 2 */}
            <div>
              <div className="text-xs font-semibold text-slate-400 uppercase mb-3">My Groups</div>
              <ul className="flex flex-nowrap md:block mr-3 md:mr-0">
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M7.3 8.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM7.3 14.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM.3 9.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Productivity</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M7.3 8.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM7.3 14.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM.3 9.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Self Development</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default FeedLeftContent;
--- a/src/partials/community/FeedPosts.jsx
+++ b/src/partials/community/FeedPosts.jsx
@@ -1,384 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import EditMenu from '../../components/DropdownEditMenu';
 import UserImage02 from '../../images/user-40-02.jpg';
 import UserImage03 from '../../images/user-40-03.jpg';
 import UserImage04 from '../../images/user-40-04.jpg';
 import UserImage06 from '../../images/user-40-06.jpg';
 import UserImage08 from '../../images/user-40-08.jpg';
 import CommenterImage04 from '../../images/user-32-04.jpg';
 import CommenterImage05 from '../../images/user-32-05.jpg';
 import FeedImage01 from '../../images/feed-image-01.jpg';
 import FeedImage02 from '../../images/feed-image-02.jpg';
 function FeedPosts() {
  return (
    <>
      {/* Post 1 */}
      <div className="bg-white shadow-md rounded border border-slate-200 p-5">
        {/* Header */}
        <header className="flex justify-between items-start space-x-3 mb-3">
          {/* User */}
          <div className="flex items-start space-x-3">
            <img className="rounded-full shrink-0" src={UserImage03} width="40" height="40" alt="User 03" />
            <div>
              <div className="leading-tight">
                <a className="text-sm font-semibold text-slate-800" href="#0">
                  Dominik Lamakani
                </a>
              </div>
              <div className="text-xs text-slate-500">Yesterday at 10:48 AM</div>
            </div>
          </div>
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex shrink-0">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 1
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 2
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
                Remove
              </Link>
            </li>
          </EditMenu>
        </header>
        {/* Body */}
        <div className="text-sm text-slate-800 space-y-2 mb-5">
          <p>👋</p>
          <p>
            It's more likely that people reading your blog will opt in with their email addresses if you give them something highly relevant in
            return. Ditch that too-general lead magnet and create "content upgrades" for your highest-traffic articles.
          </p>
          <p>Thread 👇</p>
        </div>
        {/* Footer */}
        <footer className="flex items-center space-x-4">
          {/* Like button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
            </svg>
            <div className="text-sm text-slate-500">4</div>
          </button>
          {/* Share button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
            </svg>
            <div className="text-sm text-slate-500">44</div>
          </button>
          {/* Replies button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
            </svg>
            <div className="text-sm text-slate-500">7</div>
          </button>
        </footer>
      </div>
      {/* Post 2 */}
      <div className="bg-white shadow-md rounded border border-slate-200 p-5">
        {/* Header */}
        <header className="flex justify-between items-start space-x-3 mb-3">
          {/* User */}
          <div className="flex items-start space-x-3">
            <img className="rounded-full shrink-0" src={UserImage06} width="40" height="40" alt="User 06" />
            <div>
              <div className="leading-tight">
                <a className="text-sm font-semibold text-slate-800" href="#0">
                  Mark Karimani
                </a>
              </div>
              <div className="inline-flex items-center">
                <svg className="w-3 h-3 shrink-0 fill-yellow-500 mr-1" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.953 4.29a.5.5 0 0 0-.454-.29H6.14L6.984.62A.5.5 0 0 0 6.12.174l-6 7A.5.5 0 0 0 .499 8h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
                </svg>
                <div className="text-xs text-slate-500">Sponsored</div>
              </div>
            </div>
          </div>
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex shrink-0">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 1
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 2
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
                Remove
              </Link>
            </li>
          </EditMenu>
        </header>
        {/* Body */}
        <div className="text-sm text-slate-800 space-y-2 mb-5">
          <p>Designing an Earth-positive future, together 🌿</p>
          <div className="relative !my-4">
            <img className="block w-full" src={FeedImage01} width="590" height="332" alt="Feed 01" />
            <div className="absolute left-0 right-0 bottom-0 p-4 bg-black bg-opacity-25 backdrop-blur-md">
              <div className="flex items-center justify-between">
                <div className="text-xs font-medium text-slate-300">togethernature.com</div>
                <a className="text-xs font-medium text-indigo-400 hover:text-indigo-300" href="#0">
                  Learn More -&gt;
                </a>
              </div>
            </div>
          </div>
        </div>
        {/* Footer */}
        <footer className="flex items-center space-x-4">
          {/* Like button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
            </svg>
            <div className="text-sm text-slate-500">4</div>
          </button>
          {/* Share button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
            </svg>
            <div className="text-sm text-slate-500">44</div>
          </button>
          {/* Replies button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
            </svg>
            <div className="text-sm text-slate-500">7</div>
          </button>
        </footer>
      </div>
      {/* Post 3 */}
      <div className="bg-white shadow-md rounded border border-slate-200 p-5">
        {/* Header */}
        <header className="flex justify-between items-start space-x-3 mb-3">
          {/* User */}
          <div className="flex items-start space-x-3">
            <img className="rounded-full shrink-0" src={UserImage04} width="40" height="40" alt="User 04" />
            <div>
              <div className="leading-tight">
                <a className="text-sm font-semibold text-slate-800" href="#0">
                  Erica Spriggs
                </a>
              </div>
              <div className="text-xs text-slate-500">Yesterday at 2:34 PM</div>
            </div>
          </div>
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex shrink-0">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 1
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 2
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
                Remove
              </Link>
            </li>
          </EditMenu>
        </header>
        {/* Body */}
        <div className="text-sm text-slate-800 space-y-2 mb-5">
          <p>Any book recommendations for a first-time entrepreneur? 📚</p>
        </div>
        {/* Footer */}
        <footer className="flex items-center space-x-4">
          {/* Like button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
            </svg>
            <div className="text-sm text-slate-500">122</div>
          </button>
          {/* Share button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
            </svg>
            <div className="text-sm text-slate-500">7</div>
          </button>
          {/* Replies button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
            </svg>
            <div className="text-sm text-slate-500">298</div>
          </button>
        </footer>
        {/* Comments */}
        <div className="mt-5 pt-3 border-t border-slate-200">
          <ul className="space-y-2 mb-3">
            {/* Comment */}
            <li className="p-3 bg-slate-50 rounded">
              <div className="flex items-start space-x-3">
                <img className="rounded-full shrink-0" src={CommenterImage04} width="32" height="32" alt="User 04" />
                <div>
                  <div className="text-xs text-slate-500">
                    <a className="font-semibold text-slate-800" href="#0">
                      Sophie Wenner
                    </a>{' '}
                    · 44min
                  </div>
                  <div className="text-sm">
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      @EricaSpriggs
                    </a>{' '}
                    Reading through and really enjoying "Zero to Sold" by Arvid.
                  </div>
                </div>
              </div>
            </li>
            {/* Comment */}
            <li className="p-3 bg-slate-50 rounded">
              <div className="flex items-start space-x-3">
                <img className="rounded-full shrink-0" src={CommenterImage05} width="32" height="32" alt="User 05" />
                <div>
                  <div className="text-xs text-slate-500">
                    <a className="font-semibold text-slate-800" href="#0">
                      Kyla Scanlon
                    </a>{' '}
                    · 1h
                  </div>
                  <div className="text-sm">
                    Depends on the company you're running, but if I had to choose just one book, it'd be The Personal MBA by Josh Kaufman.
                  </div>
                </div>
              </div>
            </li>
          </ul>
          {/* Comments footer */}
          <div className="flex justify-between space-x-2">
            <div className="text-sm text-slate-500">
              <span className="font-medium text-slate-600">2</span> of <span className="font-medium text-slate-600">67</span> comments
            </div>
            <button className="text-sm  font-medium text-indigo-500 hover:text-indigo-600">View More Comments</button>
          </div>
          {/* Comment form */}
          <div className="flex items-center space-x-3 mt-3">
            <img className="rounded-full shrink-0" src={UserImage02} width="32" height="32" alt="User 02" />
            <div className="grow">
              <label htmlFor="comment-form" className="sr-only">
                Write a comment…
              </label>
              <input
                id="comment-form"
                className="form-input w-full bg-slate-100 border-transparent focus:bg-white focus:border-slate-300 placeholder-slate-500"
                type="text"
                placeholder="Write a comment…"
              />
            </div>
          </div>
        </div>
      </div>
      {/* Post 4 */}
      <div className="bg-white shadow-md rounded border border-slate-200 p-5">
        {/* Header */}
        <header className="flex justify-between items-start space-x-3 mb-3">
          {/* User */}
          <div className="flex items-start space-x-3">
            <img className="rounded-full shrink-0" src={UserImage08} width="40" height="40" alt="User 08" />
            <div>
              <div className="leading-tight">
                <a className="text-sm font-semibold text-slate-800" href="#0">
                  Margaret Sullivan
                </a>
              </div>
              <div className="text-xs text-slate-500">Yesterday at 4:56 PM</div>
            </div>
          </div>
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex shrink-0">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 1
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 2
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
                Remove
              </Link>
            </li>
          </EditMenu>
        </header>
        {/* Body */}
        <div className="text-sm text-slate-800 space-y-2 mb-5">
          <p>Kyla Network - Make new connections, join communities, and access exclusive experiences. 🧑‍🤝‍🧑</p>
          <div className="relative flex items-center justify-center !my-4">
            <img className="block w-full" src={FeedImage02} width="590" height="332" alt="Feed 01" />
            <button className="absolute group">
              <svg className="w-16 h-16" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
                <circle className="fill-white opacity-80 group-hover:opacity-100 transition" cx="32" cy="32" r="32" />
                <path
                  className="fill-indigo-500"
                  d="M40 33a.999.999 0 0 0-.427-.82l-10-7A1 1 0 0 0 28 26v14.002a.999.999 0 0 0 1.573.819l10-7A.995.995 0 0 0 40 33V33c0 .002 0 .002 0 0Z"
                />
              </svg>
            </button>
            <div className="absolute left-4 bottom-4 right-4">
              <div className="flex items-center space-x-1">
                <div className="text-xs font-medium text-slate-300 px-2 py-1 bg-black bg-opacity-25">0:48</div>
                <div className="text-xs font-medium text-slate-300 px-2 py-1 bg-black bg-opacity-25">1M Views</div>
              </div>
            </div>
          </div>
        </div>
        {/* Footer */}
        <footer className="flex items-center space-x-4">
          {/* Like button */}
          <button className="flex items-center text-indigo-400">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
            </svg>
            <div className="text-sm text-indigo-500">2.2K</div>
          </button>
          {/* Share button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
            </svg>
            <div className="text-sm text-slate-500">4.3K</div>
          </button>
          {/* Replies button */}
          <button className="flex items-center text-slate-400 hover:text-indigo-500">
            <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
              <path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
            </svg>
            <div className="text-sm text-slate-500">92</div>
          </button>
        </footer>
      </div>
    </>
  );
 }
 export default FeedPosts;
--- a/src/partials/community/FeedRightContent.jsx
+++ b/src/partials/community/FeedRightContent.jsx
@@ -1,240 +0,0 @@
 import React from 'react';
 import GroupAvatar01 from '../../images/group-avatar-01.png';
 import GroupAvatar02 from '../../images/group-avatar-02.png';
 import GroupAvatar03 from '../../images/group-avatar-03.png';
 import GroupAvatar04 from '../../images/group-avatar-04.png';
 import UserImage01 from '../../images/user-32-01.jpg';
 import UserImage02 from '../../images/user-32-02.jpg';
 import UserImage04 from '../../images/user-32-04.jpg';
 import UserImage05 from '../../images/user-32-05.jpg';
 function FeedRightContent() {
  return (
    <div className="w-full hidden xl:block xl:w-72">
      <div className="lg:sticky lg:top-16 lg:h-[calc(100vh-64px)] lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar">
        <div className="md:py-8">
          {/* Search form */}
          <div className="mb-6">
            <form className="relative">
              <label htmlFor="feed-search-desktop" className="sr-only">
                Search
              </label>
              <input id="feed-search-desktop" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search…" />
              <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                <svg
                  className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2"
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                  <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                </svg>
              </button>
            </form>
          </div>
          {/* Blocks */}
          <div className="space-y-4">
            {/* Block 1 */}
            <div className="bg-slate-50 p-4 rounded border border-slate-200">
              <div className="text-xs font-semibold text-slate-400 uppercase mb-4">Top Communities</div>
              <ul className="space-y-3">
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={GroupAvatar01} width="32" height="32" alt="Group 01" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">Introductions</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Join
                    </button>
                  </div>
                </li>
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={GroupAvatar02} width="32" height="32" alt="Group 02" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">HackerNews</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Join
                    </button>
                  </div>
                </li>
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={GroupAvatar03} width="32" height="32" alt="Group 03" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">ReactJs</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                        <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
                      </svg>
                    </button>
                  </div>
                </li>
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={GroupAvatar04} width="32" height="32" alt="Group 04" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">JustChatting</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Join
                    </button>
                  </div>
                </li>
              </ul>
              <div className="mt-4">
                <button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
              </div>
            </div>
            {/* Block 2 */}
            <div className="bg-slate-50 p-4 rounded border border-slate-200">
              <div className="text-xs font-semibold text-slate-400 uppercase mb-4">Who to follow</div>
              <ul className="space-y-3">
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">Elly Boutin</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Follow
                    </button>
                  </div>
                </li>
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">Rich Harris</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Follow
                    </button>
                  </div>
                </li>
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">Mary Porzio</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Follow
                    </button>
                  </div>
                </li>
                <li>
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <div className="relative mr-3">
                        <img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
                      </div>
                      <div className="truncate">
                        <span className="text-sm font-medium text-slate-800">Brian Lovin</span>
                      </div>
                    </div>
                    <button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
                      Follow
                    </button>
                  </div>
                </li>
              </ul>
              <div className="mt-4">
                <button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
              </div>
            </div>
            {/* Block 3 */}
            <div className="bg-slate-50 p-4 rounded border border-slate-200">
              <div className="text-xs font-semibold text-slate-400 uppercase mb-4">Trends for you</div>
              <ul className="space-y-3">
                <li>
                  <div className="text-sm mb-1">
                    <a className="font-medium text-slate-800" href="#0">
                      Tracking your website traffic on launch day 📈
                    </a>
                  </div>
                  <div className="text-xs text-slate-500">248 comments</div>
                </li>
                <li>
                  <div className="text-sm mb-1">
                    <a className="font-medium text-slate-800" href="#0">
                      Freemium model questions
                    </a>
                  </div>
                  <div className="text-xs text-slate-500">47 comments</div>
                </li>
                <li>
                  <div className="text-sm mb-1">
                    <a className="font-medium text-slate-800" href="#0">
                      Slack and Community
                    </a>
                  </div>
                  <div className="text-xs text-slate-500">24 comments</div>
                </li>
                <li>
                  <div className="text-sm mb-1">
                    <a className="font-medium text-slate-800" href="#0">
                      Who owns user onboarding in your company?
                    </a>
                  </div>
                  <div className="text-xs text-slate-500">17 comments</div>
                </li>
                <li>
                  <div className="text-sm mb-1">
                    <a className="font-medium text-slate-800" href="#0">
                      Questions from a very confused Web3 startup founder 🤔
                    </a>
                  </div>
                  <div className="text-xs text-slate-500">9 comments</div>
                </li>
              </ul>
              <div className="mt-4">
                <button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default FeedRightContent;
--- a/src/partials/community/ForumEntries.jsx
+++ b/src/partials/community/ForumEntries.jsx
@@ -1,427 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import UserAvatar from '../../images/user-avatar-32.png';
 import UserImage01 from '../../images/user-32-01.jpg';
 import UserImage02 from '../../images/user-32-02.jpg';
 import UserImage03 from '../../images/user-32-03.jpg';
 import UserImage04 from '../../images/user-32-04.jpg';
 import UserImage05 from '../../images/user-32-05.jpg';
 import UserImage06 from '../../images/user-32-06.jpg';
 import UserImage07 from '../../images/user-32-07.jpg';
 function ForumEntries() {
  return (
    <>
      {/* Post 1 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserAvatar} width="32" height="32" alt="User avatar" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">Share Your Startup - December 2021 - Upvote This For Maximum Visibility!</Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 mr-2 fill-current" xmlns="http://www.w3.org/2000/svg">
                      <path d="M15.686 5.708 10.291.313c-.4-.4-.999-.4-1.399 0s-.4 1 0 1.399l.6.6-6.794 3.696-1-1C1.299 4.61.7 4.61.3 5.009c-.4.4-.4 1 0 1.4l1.498 1.498 2.398 2.398L.6 14.001 2 15.4l3.696-3.697L9.692 15.7c.5.5 1.199.2 1.398 0 .4-.4.4-1 0-1.4l-.999-.998 3.697-6.695.6.6c.599.6 1.199.2 1.398 0 .3-.4.3-1.1-.1-1.499Zm-7.193 6.095L4.196 7.507l6.695-3.697 1.298 1.299-3.696 6.694Z" />
                    </svg>
                    ekuplu89
                  </div>
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">7d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">688 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-indigo-400 rounded-sm flex flex-col justify-center items-center outline outline-2 outline-indigo-100">
              <svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>499</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 2 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">Failed for the past 12 years as a tech entrepreneur. My key takeaways.</Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  ekuplu89
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">4h</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">14 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-indigo-400 rounded-sm flex flex-col justify-center items-center outline outline-2 outline-indigo-100">
              <svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>217</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 3 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">Besides Product Hunt, where else should I promote my new project? 🤔</Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  katemerlu
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">2h</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">17 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>44</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 4 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage03} width="32" height="32" alt="User 03" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">
                I built and sold 2 small SaaS products and quit my job in the last two years — AMA.
              </Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  markusj
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">2d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">298 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>217</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 5 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">
                Had a full-time job, bootstrapped a side project to 7 digit ARR, now building another side project—AMA
              </Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  davidp1
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">2d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">312 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>399</div>
            </button>
          </div>
        </div>
      </article>
      {/* Promoted post */}
      <article className="bg-amber-50 shadow-md rounded border border-amber-300 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <svg className="w-8 h-8 rounded-full" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
              <path fill="#3B82F6" d="M0 0h32v32H0z" />
              <path
                d="M16.561 22c3.061 0 5.327-2.088 5.939-4.642h-3.449c-.367.69-1.04 1.5-2.449 1.5-1.612 0-2.694-1.216-2.694-2.858 0-1.622 1.082-2.94 2.694-2.858 1.408 0 2.082.81 2.449 1.581h3.429c-.572-2.757-3-4.723-6-4.723-3.388 0-5.98 2.676-5.98 5.98 0 3.344 2.633 6.02 6.061 6.02Z"
                fill="#EFF6FF"
                fillRule="nonzero"
              />
            </svg>
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">
                💸 Trade crypto, fiat, and stablecoins with Crypto.io. Low fees and incredible performance!
              </Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  crypto.io
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500 italic">Promoted</span>
              </div>
            </footer>
          </div>
        </div>
      </article>
      {/* Post 6 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">Which are the main channels you use to drive traffic to your website? 📈</Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  sophiestar
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">3d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">66 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>31</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 7 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage06} width="32" height="32" alt="User 06" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">
                How to build a following on Twitter as a founder - A guide to growing your audience 🚀
              </Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  molliehacks
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">3d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">32 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-indigo-400 rounded-sm flex flex-col justify-center items-center outline outline-2 outline-indigo-100">
              <svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>24</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 8 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">What's the best way to get started building web 3 social products?</Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  davidp1
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">4d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">27 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>22</div>
            </button>
          </div>
        </div>
      </article>
      {/* Post 9 */}
      <article className="bg-white shadow-md rounded border border-slate-200 p-5">
        <div className="flex flex-start space-x-4">
          {/* Avatar */}
          <div className="shrink-0 mt-1.5">
            <img className="w-8 h-8 rounded-full" src={UserImage07} width="32" height="32" alt="User 07" />
          </div>
          {/* Content */}
          <div className="grow">
            {/* Title */}
            <h2 className="font-semibold text-slate-800 mb-2">
              <Link to="/community/forum-post">How important is customer feedback for the improvement of a product?</Link>
            </h2>
            {/* Footer */}
            <footer className="flex flex-wrap text-sm">
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                  elenmisk
                </a>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">5d</span>
              </div>
              <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                <span className="text-slate-500">61 Comments</span>
              </div>
            </footer>
          </div>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>34</div>
            </button>
          </div>
        </div>
      </article>
    </>
  );
 }
 export default ForumEntries;
--- a/src/partials/community/ForumEntry.jsx
+++ b/src/partials/community/ForumEntry.jsx
@@ -1,431 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import UserAvatar from '../../images/user-40-02.jpg';
 import UserImage01 from '../../images/user-28-01.jpg';
 import UserImage02 from '../../images/user-28-02.jpg';
 import UserImage05 from '../../images/user-28-05.jpg';
 import UserImage09 from '../../images/user-28-09.jpg';
 import UserImage10 from '../../images/user-28-10.jpg';
 function ForumEntry() {
  return (
    <article className="bg-white shadow-md rounded border border-slate-200 p-5">
      {/* Breadcrumbs */}
      <div className="mb-2">
        <ul className="inline-flex flex-wrap text-sm font-medium">
          <li className="flex items-center">
            <Link className="text-slate-500 hover:text-indigo-500" to="/community/forum">
              Home
            </Link>
            <svg className="h-4 w-4 fill-current text-slate-400 mx-2" viewBox="0 0 16 16">
              <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
            </svg>
          </li>
          <li className="flex items-center">
            <a className="text-slate-500 hover:text-indigo-500" href="#0">
              Discussion
            </a>
          </li>
        </ul>
      </div>
      {/* Header */}
      <header className="pb-4">
        {/* Title */}
        <div className="flex items-start space-x-3 mb-3">
          <h2 className="text-2xl text-slate-800 font-bold">Besides Product Hunt, where else should I promote my new project? 🤔</h2>
          {/* Upvote button */}
          <div className="shrink-0">
            <button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
              <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                <path d="m0 6 6-6 6 6z" />
              </svg>
              <div>44</div>
            </button>
          </div>
        </div>
        {/* Meta */}
        <div className="flex flex-wrap text-sm">
          <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
            <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
              katemerlu
            </a>
          </div>
          <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
            <span className="text-slate-500">2h</span>
          </div>
          <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
            <span className="text-slate-500">17 Comments</span>
          </div>
        </div>
      </header>
      {/* Content */}
      <div className="space-y-4 mb-6">
        <p>Looking for new ideas to get users, receive feedback, and increase exposure! Besides PH, where else do you showcase your product?</p>
        <p>Please advise 🙌</p>
      </div>
      {/* Comment form */}
      <div>
        <div className="flex items-start space-x-3 mb-3">
          <img className="rounded-full shrink-0" src={UserAvatar} width="40" height="40" alt="User 02" />
          <div className="grow">
            <label htmlFor="comment" className="sr-only">
              Write a comment…
            </label>
            <textarea
              id="comment"
              className="form-textarea w-full focus:border-slate-300"
              rows="4"
              placeholder="Write a comment…"
              defaultValue={''}
            />
          </div>
        </div>
        <div className="text-right">
          <button type="submit" className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">
            Reply -&gt;
          </button>
        </div>
      </div>
      {/* Comments */}
      <div className="mt-4">
        <h3 className="font-semibold text-slate-800 mb-4">Comments</h3>
        <ul className="space-y-5">
          {/* Comment */}
          <li className="relative pl-9 space-y-5">
            {/* Comment wrapper */}
            <div className="flex items-start">
              {/* Comment upvote */}
              <div className="absolute top-0 left-0">
                <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
                  <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                    <path d="m0 6 6-6 6 6z" />
                  </svg>
                  <div>44</div>
                </button>
              </div>
              {/* Comment content */}
              <div>
                {/* Comment text */}
                <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                  <p>
                    We've also had the same question to be honest. And for Appy.com launch we decided to go with Twitter as a primary medium and then
                    Product Hunt as the other one. And I have to say that it led to some great results as Twitter allows you to be super active and
                    engage in many conversations.
                  </p>
                  <p>Also, users are there and everything is super active. So that will be my advice - invest time in Twitter</p>
                </div>
                {/* Comment footer */}
                <div className="flex flex-wrap text-xs">
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="block mr-2" href="#0">
                      <img className="rounded-full" src={UserImage02} width="24" height="24" alt="User 02" />
                    </a>
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      ekuplu89
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Reply
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Share
                    </a>
                  </div>
                </div>
              </div>
            </div>
            {/* Nested comments */}
            <ul className="space-y-5">
              {/* Comment */}
              <li className="relative pl-9 space-y-5">
                {/* Comment wrapper */}
                <div className="flex items-start">
                  {/* Comment upvote */}
                  <div className="absolute top-0 left-0">
                    <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
                      <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                        <path d="m0 6 6-6 6 6z" />
                      </svg>
                      <div>2</div>
                    </button>
                  </div>
                  {/* Comment content */}
                  <div>
                    {/* Comment text */}
                    <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                      <p>
                        That's great advice,{' '}
                        <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          @ekuplu89
                        </a>{' '}
                        👏
                      </p>
                    </div>
                    {/* Comment footer */}
                    <div className="flex flex-wrap text-xs">
                      <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="block mr-2" href="#0">
                          <img className="rounded-full" src={UserImage05} width="24" height="24" alt="User 05" />
                        </a>
                        <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          ellielong
                        </a>
                      </div>
                      <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                          Reply
                        </a>
                      </div>
                      <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                          Share
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          {/* Comment */}
          <li className="relative pl-9 space-y-5">
            {/* Comment wrapper */}
            <div className="flex items-start">
              {/* Comment upvote */}
              <div className="absolute top-0 left-0">
                <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center">
                  <svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                    <path d="m0 6 6-6 6 6z" />
                  </svg>
                  <div>27</div>
                </button>
              </div>
              {/* Comment content */}
              <div>
                {/* Comment text */}
                <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                  <p>
                    If you are a SaaS product and are looking for early adopters, AppSumo seems to be a great place to list on. Most of the users
                    there seem to be early-adopters. Life-time deals seem to be the norm there.
                  </p>
                </div>
                {/* Comment footer */}
                <div className="flex flex-wrap text-xs">
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="block mr-2" href="#0">
                      <img className="rounded-full" src={UserImage01} width="24" height="24" alt="User 01" />
                    </a>
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      markcuttik
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Reply
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Share
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          {/* Comment */}
          <li className="relative pl-9 space-y-5">
            {/* Comment wrapper */}
            <div className="flex items-start">
              {/* Comment upvote */}
              <div className="absolute top-0 left-0">
                <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
                  <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                    <path d="m0 6 6-6 6 6z" />
                  </svg>
                  <div>24</div>
                </button>
              </div>
              {/* Comment content */}
              <div>
                {/* Comment text */}
                <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                  <p>
                    Thank you very much for all the people who are posting other alt=""ernatives! I will launch my free product design course in
                    February and I will make a notion template with all this information! :)
                  </p>
                </div>
                {/* Comment footer */}
                <div className="flex flex-wrap text-xs">
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="block mr-2" href="#0">
                      <img className="rounded-full" src={UserImage09} width="24" height="24" alt="User 09" />
                    </a>
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      davidp1
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Reply
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Share
                    </a>
                  </div>
                </div>
              </div>
            </div>
            {/* Nested comments */}
            <ul className="space-y-5">
              {/* Comment */}
              <li className="relative pl-9 space-y-5">
                {/* Comment wrapper */}
                <div className="flex items-start">
                  {/* Comment upvote */}
                  <div className="absolute top-0 left-0">
                    <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
                      <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                        <path d="m0 6 6-6 6 6z" />
                      </svg>
                      <div>2</div>
                    </button>
                  </div>
                  {/* Comment content */}
                  <div>
                    {/* Comment text */}
                    <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                      <p>That sounds like an excellent idea. I'd love to take a look when you're ready!</p>
                    </div>
                    {/* Comment footer */}
                    <div className="flex flex-wrap text-xs">
                      <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="block mr-2" href="#0">
                          <img className="rounded-full" src={UserImage05} width="24" height="24" alt="User 05" />
                        </a>
                        <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                          ellielong
                        </a>
                      </div>
                      <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                          Reply
                        </a>
                      </div>
                      <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                        <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                          Share
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Nested comments */}
                <ul className="space-y-5">
                  {/* Comment */}
                  <li className="relative pl-9 space-y-5">
                    {/* Comment wrapper */}
                    <div className="flex items-start">
                      {/* Comment upvote */}
                      <div className="absolute top-0 left-0">
                        <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
                          <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                            <path d="m0 6 6-6 6 6z" />
                          </svg>
                          <div>1</div>
                        </button>
                      </div>
                      {/* Comment content */}
                      <div>
                        {/* Comment text */}
                        <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                          <p>Expect it! 👊</p>
                        </div>
                        {/* Comment footer */}
                        <div className="flex flex-wrap text-xs">
                          <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                            <a className="block mr-2" href="#0">
                              <img className="rounded-full" src={UserImage09} width="24" height="24" alt="User 09" />
                            </a>
                            <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                              davidp1
                            </a>
                          </div>
                          <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                            <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                              Reply
                            </a>
                          </div>
                          <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                            <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                              Share
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          {/* Comment */}
          <li className="relative pl-9 space-y-5">
            {/* Comment wrapper */}
            <div className="flex items-start">
              {/* Comment upvote */}
              <div className="absolute top-0 left-0">
                <button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
                  <svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
                    <path d="m0 6 6-6 6 6z" />
                  </svg>
                  <div>19</div>
                </button>
              </div>
              {/* Comment content */}
              <div>
                {/* Comment text */}
                <div className="grow text-sm text-slate-800 space-y-2 mb-2">
                  <p>Social Media (channels based on your target audience), and Slack channels</p>
                </div>
                {/* Comment footer */}
                <div className="flex flex-wrap text-xs">
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="block mr-2" href="#0">
                      <img className="rounded-full" src={UserImage10} width="24" height="24" alt="User 10" />
                    </a>
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
                      patrick2
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Reply
                    </a>
                  </div>
                  <div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
                    <a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
                      Share
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        {/* View more link */}
        <div className="text-center mt-5">
          <button className="text-sm font-medium text-indigo-500 hover:text-indigo-600">View More Comments</button>
        </div>
      </div>
    </article>
  );
 }
 export default ForumEntry;
--- a/src/partials/community/ForumLeftContent.jsx
+++ b/src/partials/community/ForumLeftContent.jsx
@@ -1,97 +0,0 @@
 import React from 'react';
 function ForumLeftContent() {
  return (
    <div className="w-full md:w-60 mb-8 md:mb-0">
      <div className="md:sticky md:top-16 md:h-[calc(100vh-64px)] md:overflow-x-hidden md:overflow-y-auto no-scrollbar">
        <div className="md:py-8">
          <div className="flex justify-between items-center md:block">
            {/* Title */}
            <header className="mb-6">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Forum ✨</h1>
            </header>
            {/* Button */}
            <div className="xl:hidden mb-6">
              <button className="btn md:w-full bg-indigo-500 hover:bg-indigo-600 text-white">Create Post</button>
            </div>
          </div>
          {/* Links */}
          <div className="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-4 md:space-y-3 -mx-4">
            {/* Group 1 */}
            <div>
              <div className="text-xs font-semibold text-slate-400 uppercase mb-3 md:sr-only">Menu</div>
              <ul className="flex flex-nowrap md:block mr-3 md:mr-0">
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap bg-white" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mr-2" viewBox="0 0 16 16">
                      <path d="M10 16h4c.6 0 1-.4 1-.998V6.016c0-.3-.1-.6-.4-.8L8.6.226c-.4-.3-.9-.3-1.3 0l-6 4.992c-.2.2-.3.5-.3.799v8.986C1 15.6 1.4 16 2 16h4c.6 0 1-.4 1-.998v-2.996h2v2.996c0 .599.4.998 1 .998Zm-4-5.99c-.6 0-1 .399-1 .998v2.995H3V6.515L8 2.32l5 4.194v7.488h-2v-2.995c0-.6-.4-.999-1-.999H6Z" />
                    </svg>
                    <span className="text-sm font-medium text-indigo-500">Home</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Reading List</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M5 9h11v2H5V9zM0 9h3v2H0V9zm5 4h6v2H5v-2zm-5 0h3v2H0v-2zm5-8h7v2H5V5zM0 5h3v2H0V5zm5-4h11v2H5V1zM0 1h3v2H0V1z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Listings</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
                      <path d="M1 12a1 1 0 0 1-.707-1.704l4.496-4.493a1 1 0 0 1 1.413 0l3.29 3.287 4.79-4.785a1 1 0 1 1 1.413 1.412l-5.496 5.491a1 1 0 0 1-1.413 0L5.496 7.92l-3.79 3.787A1 1 0 0 1 .999 12Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Podcasts</span>
                  </a>
                </li>
              </ul>
            </div>
            {/* Group 2 */}
            <div>
              <div className="text-xs font-semibold text-slate-400 uppercase mb-3">My Groups</div>
              <ul className="flex flex-nowrap md:block mr-3 md:mr-0">
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-3" viewBox="0 0 12 12">
                      <path d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2A6 6 0 1 1 6 0a6 6 0 0 1 0 12Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Startups</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-3 h-3 shrink-0 fill-current text-rose-500 mr-3" viewBox="0 0 12 12">
                      <path d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2A6 6 0 1 1 6 0a6 6 0 0 1 0 12Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Javascript</span>
                  </a>
                </li>
                <li className="mr-0.5 md:mr-0 md:mb-0.5">
                  <a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
                    <svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-3" viewBox="0 0 12 12">
                      <path d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2A6 6 0 1 1 6 0a6 6 0 0 1 0 12Z" />
                    </svg>
                    <span className="text-sm font-medium text-slate-600">Productivity</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default ForumLeftContent;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Daria Golova	b71dccbd0e	fix field on sidepanel	2022-06-01 17:18:22 +03:00
Daria Golova	264a908352	fix paddings	2022-06-01 16:51:32 +03:00
DuCay	f3dcbdab49	Merge pull request #11 from franze6/Shared_data_ Shared data	2022-06-01 14:45:05 +03:00
DwCay	3236f2ae94	Save avatar svg in shared data for header	2022-06-01 10:27:49 +03:00
DwCay	0d127aa5fa	Add shared data in routes	2022-06-01 07:25:39 +03:00
DwCay	ac18be77a7	Add shared data page	2022-06-01 07:25:39 +03:00
Kirill Andrusyak	568543bba5	Merge pull request #10 from franze6/Deleting_elements	2022-06-01 00:50:02 +03:00
DwCay	3b62d188c1	Merge branch 'deleting_elements' # Conflicts: # src/pages/digitalId/Validate.jsx	2022-05-31 23:58:51 +03:00
DwCay	de11c6be0f	Conflict fix	2022-05-31 23:31:20 +03:00
Daria Golova	5b1ff31e01	changed the array, added props	2022-05-31 23:30:16 +03:00
Daria Golova	03bb781b5a	created ablock with a verified data	2022-05-31 23:30:16 +03:00
Daria Golova	981d62b849	rename sizes	2022-05-31 23:30:16 +03:00
Daria Golova	883f173c12	fix left sidebar	2022-05-31 23:30:16 +03:00
Daria Golova	709f668697	add other forms	2022-05-31 23:30:16 +03:00
Daria Golova	3e5ef4f128	fix form for adding fields	2022-05-31 23:30:16 +03:00
Daria Golova	d86c118b21	create add field form	2022-05-31 23:30:16 +03:00
Daria Golova	4179cd703d	create table	2022-05-31 23:30:16 +03:00
Kirill Andrusyak	20221b497b	Merge pull request #8 from franze6/Validation_merged Validation merged	2022-05-31 19:47:08 +03:00
Kirill Andrusyak	9bdbd396e8	Merge pull request #9 from franze6/Verify-Page Verify page	2022-05-31 19:46:20 +03:00
Daria Golova	c7d797b2af	changed the array, added props	2022-05-31 16:31:25 +03:00
DwCay	bc71ea6cb9	Returned authorization	2022-05-31 15:55:54 +03:00
DwCay	8dd57625fd	Merge branch 'Validation_log_and_validate_pages' # Conflicts: # src/pages/digitalId/Validate.jsx # src/pages/digitalId/ValidationLog.jsx	2022-05-31 14:26:20 +03:00
DwCay	ec700318ae	Conflict fix	2022-05-31 13:58:27 +03:00
Daria Golova	bcd7f89dee	created ablock with a verified data	2022-05-31 11:26:56 +03:00
Kirill Andrusyak	0de76771ac	Merge pull request #6 from franze6/Profile-Page	2022-05-31 10:36:10 +03:00
DwCay	3cd337d589	Removing redundant components	2022-05-30 16:23:36 +03:00
Daria Golova	3f3a56c305	rename sizes	2022-05-30 16:17:11 +03:00
Daria Golova	b40b59af3f	fix left sidebar	2022-05-30 16:07:22 +03:00
DwCay	b98c4db02d	first deleting_elements commit	2022-05-30 12:08:21 +03:00
Daria Golova	a5a046f911	add other forms	2022-05-27 17:36:06 +03:00
Daria Golova	d31a2f09d5	fix form for adding fields	2022-05-27 12:35:36 +03:00
DwCay	5fca3bdc4e	Naming fix	2022-05-26 22:34:07 +03:00
DwCay	e6142b1402	Update ValidationSeasonItem	2022-05-26 20:35:29 +03:00
DwCay	df6419bfff	Add page Validate and update ValidationLog	2022-05-26 20:04:24 +03:00
Daria Golova	99d235f5e7	create add field form	2022-05-26 18:05:07 +03:00
Daria Golova	180961ec20	create table	2022-05-26 15:59:34 +03:00
kandrusyak	c4c7b10b99	fix mistake	2022-05-26 13:14:47 +03:00
Kirill Andrusyak	79bed4e69d	Merge pull request #4 from franze6/Profile-table-item Элемент таблицы Digital ID - Profile	2022-05-26 13:13:36 +03:00
Daria Golova	56e2691af5	Merge branch 'master' into Profile-table-item	2022-05-26 12:46:10 +03:00
Daria Golova	13136d2712	delete spaces	2022-05-26 12:35:32 +03:00
Daria Golova	5f1e8c55ff	fix validate prop	2022-05-26 12:29:12 +03:00
Kirill Andrusyak	b4ad092228	Merge pull request #3 from franze6/Onboarding_steps	2022-05-26 11:16:15 +03:00
DwCay	13839cf67c	Add page ValidationLog	2022-05-26 00:47:06 +03:00
DwCay	fbafb94b2b	Removing spaces	2022-05-26 00:29:58 +03:00
Daria Golova	60194da89b	fix status chips	2022-05-25 16:09:02 +03:00
Daria Golova	6580c211ff	add props	2022-05-25 16:09:02 +03:00
Daria Golova	c44516a2f7	done validation bar	2022-05-25 16:09:02 +03:00
Daria Golova	1ab53990a1	add input	2022-05-25 16:09:02 +03:00
Daria Golova	7ff6d08fc8	create profile table item	2022-05-25 16:09:02 +03:00
Daria Golova	4bdaa28fff	create profile table item	2022-05-25 16:09:02 +03:00
DwCay	59d96222d6	Organized save avatar	2022-05-25 02:18:13 +03:00
DwCay	3730bbee86	Merge remote-tracking branch 'origin/master' into Onboarding_steps	2022-05-24 23:37:39 +03:00
DwCay	fa3ee41fbd	Add generator svg for onboarding	2022-05-24 21:28:06 +03:00
DwCay	b85163cda8	Add new onboarding steps	2022-05-24 19:10:08 +03:00
Kirill Andrusyak	234c68ec53	Merge pull request #2 from franze6/Digital-ID-and-Header исправлен отступ у логотипа	2022-05-24 13:47:52 +03:00
Kirill Andrusyak	6d47aa7411	Merge pull request #1 from franze6/Digital-ID-and-Header	2022-05-23 19:37:43 +03:00