first commit

src/partials/Header.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+import SearchModal from '../components/ModalSearch';
+import Notifications from '../components/DropdownNotifications';
+import Help from '../components/DropdownHelp';
+import UserMenu from '../components/DropdownProfile';
+
+function Header({
+  sidebarOpen,
+  setSidebarOpen
+}) {
+
+  const [searchModalOpen, setSearchModalOpen] = useState(false)
+
+  return (
+    <header className="sticky top-0 bg-white border-b border-slate-200 z-30">
+      <div className="px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16 -mb-px">
+
+          {/* Header: Left side */}
+          <div className="flex">
+
+            {/* Hamburger button */}
+            <button
+              className="text-slate-500 hover:text-slate-600 lg:hidden"
+              aria-controls="sidebar"
+              aria-expanded={sidebarOpen}
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+            >
+              <span className="sr-only">Open sidebar</span>
+              <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <rect x="4" y="5" width="16" height="2" />
+                <rect x="4" y="11" width="16" height="2" />
+                <rect x="4" y="17" width="16" height="2" />
+              </svg>
+            </button>
+
+          </div>
+
+          {/* Header: Right side */}
+          <div className="flex items-center space-x-3">
+            <button
+              className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ml-3 ${searchModalOpen && 'bg-slate-200'}`}
+              onClick={(e) => { e.stopPropagation(); setSearchModalOpen(true); }}
+              aria-controls="search-modal"
+            >
+              <span className="sr-only">Search</span>
+              <svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <path className="fill-current text-slate-500" 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 className="fill-current text-slate-400" 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>
+            <SearchModal id="search-modal" searchId="search" modalOpen={searchModalOpen} setModalOpen={setSearchModalOpen} />
+            <Notifications align="right" />
+            <Help align="right" />
+            {/*  Divider */}
+            <hr className="w-px h-6 bg-slate-200 mx-3" />
+            <UserMenu align="right" />
+
+          </div>
+
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

src/partials/SidebarLinkGroup.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+function SidebarLinkGroup({
+  children,
+  activecondition,
+}) {
+
+  const [open, setOpen] = useState(activecondition);
+
+  const handleClick = () => {
+    setOpen(!open);
+  }
+
+  return (
+    <li className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${activecondition && 'bg-slate-900'}`}>
+      {children(handleClick, open)}
+    </li>
+  );
+}
+
+export default SidebarLinkGroup;

src/partials/actions/DeleteButton.jsx

@@ -0,0 +1,16 @@
+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;

src/partials/actions/SearchForm.jsx

@@ -0,0 +1,24 @@
+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;

src/partials/analytics/AnalyticsCard01.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart03';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function AnalyticsCard01() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        label: 'Current',
+        data: [
+          5000, 8700, 7500, 12000, 11000, 9500, 10500,
+          10000, 15000, 9000, 10000, 7000, 22000, 7200,
+          9800, 9000, 10000, 8000, 15000, 12000, 11000,
+          13000, 11000, 15000, 17000, 18000,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        label: 'Previous',
+        data: [
+          8000, 5000, 6500, 5000, 6500, 12000, 8000,
+          9000, 8000, 8000, 12500, 10000, 10000, 12000,
+          11000, 16000, 12000, 10000, 10000, 14000, 9000,
+          10000, 15000, 12500, 14000, 11000,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Analytics</h2>
+      </header>
+      <div className="px-5 py-1">
+        <div className="flex flex-wrap">
+          {/* Unique Visitors */}
+          <div className="flex items-center py-2">
+            <div className="mr-5">
+              <div className="flex items-center">
+                <div className="text-3xl font-bold text-slate-800 mr-2">24.7K</div>
+                <div className="text-sm font-medium text-emerald-500">+49%</div>
+              </div>
+              <div className="text-sm text-slate-500">Unique Visitors</div>
+            </div>
+            <div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
+          </div>
+          {/* Total Pageviews */}
+          <div className="flex items-center py-2">
+            <div className="mr-5">
+              <div className="flex items-center">
+                <div className="text-3xl font-bold text-slate-800 mr-2">56.9K</div>
+                <div className="text-sm font-medium text-emerald-500">+7%</div>
+              </div>
+              <div className="text-sm text-slate-500">Total Pageviews</div>
+            </div>
+            <div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
+          </div>
+          {/* Bounce Rate */}
+          <div className="flex items-center py-2">
+            <div className="mr-5">
+              <div className="flex items-center">
+                <div className="text-3xl font-bold text-slate-800 mr-2">54%</div>
+                <div className="text-sm font-medium text-amber-500">-7%</div>
+              </div>
+              <div className="text-sm text-slate-500">Bounce Rate</div>
+            </div>
+            <div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
+          </div>
+          {/* Visit Duration*/}
+          <div className="flex items-center">
+            <div>
+              <div className="flex items-center">
+                <div className="text-3xl font-bold text-slate-800 mr-2">2m 56s</div>
+                <div className="text-sm font-medium text-amber-500">+7%</div>
+              </div>
+              <div className="text-sm text-slate-500">Visit Duration</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={800} height={300} />
+      </div>
+    </div>
+  );
+}
+
+export default AnalyticsCard01;

src/partials/analytics/AnalyticsCard02.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart04';
+import { Link } from 'react-router-dom';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function AnalyticsCard02() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          732, 610, 610, 504, 504, 504, 349,
+          349, 504, 342, 504, 610, 391, 192,
+          154, 273, 191, 191, 126, 263, 349,
+          252, 423, 622, 470, 532,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Active Users Right Now</h2>
+      </header>
+      {/* Card content */}
+      <div className="flex flex-col h-full">
+        {/* Live visitors number */}
+        <div className="px-5 py-3">
+          <div className="flex items-center">
+            {/* Red dot */}
+            <div className="relative flex items-center justify-center w-4 h-4 rounded-full bg-rose-100 mr-3" aria-hidden="true">
+              <div className="absolute w-1.5 h-1.5 rounded-full bg-rose-500"></div>
+            </div>
+            {/* Vistors number */}
+            <div>
+              <div className="text-3xl font-bold text-slate-800 mr-2">347</div>
+              <div className="text-sm text-slate-500">Live visitors</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Chart built with Chart.js 3 */}
+        <div >
+          {/* Change the height attribute to adjust the chart height */}
+          <LineChart data={chartData} width={389} height={70} />
+        </div>
+
+        {/* Table */}
+        <div className="grow px-5 pt-3 pb-1">
+          <div className="overflow-x-auto">
+            <table className="table-auto w-full">
+              {/* Table header */}
+              <thead className="text-xs uppercase text-slate-400">
+                <tr>
+                  <th className="py-2">
+                    <div className="font-semibold text-left">Top pages</div>
+                  </th>
+                  <th className="py-2">
+                    <div className="font-semibold text-right">Active users</div>
+                  </th>
+                </tr>
+              </thead>
+              {/* Table body */}
+              <tbody className="text-sm divide-y divide-slate-100">
+                {/* Row */}
+                <tr>
+                  <td className="py-2">
+                    <div className="text-left">preview.cruip.com/open-pro/</div>
+                  </td>
+                  <td className="py-2">
+                    <div className="font-medium text-right text-slate-800">94</div>
+                  </td>
+                </tr>
+                {/* Row */}
+                <tr>
+                  <td className="py-2">
+                    <div className="text-left">preview.cruip.com/simple/</div>
+                  </td>
+                  <td className="py-2">
+                    <div className="font-medium text-right text-slate-800">42</div>
+                  </td>
+                </tr>
+                {/* Row */}
+                <tr>
+                  <td className="py-2">
+                    <div className="text-left">cruip.com/unlimited/</div>
+                  </td>
+                  <td className="py-2">
+                    <div className="font-medium text-right text-slate-800">12</div>
+                  </td>
+                </tr>
+                {/* Row */}
+                <tr>
+                  <td className="py-2">
+                    <div className="text-left">preview.cruip.com/twist/</div>
+                  </td>
+                  <td className="py-2">
+                    <div className="font-medium text-right text-slate-800">4</div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Card footer */}
+        <div className="text-right px-5 pb-4">
+          <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Real-Time Report -&gt;</Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnalyticsCard02;

src/partials/analytics/AnalyticsCard03.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import BarChart from '../../charts/BarChart03';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function AnalyticsCard03() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Stack
+      {
+        label: 'Direct',
+        data: [
+          5000, 4000, 4000, 3800, 5200, 5100,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[700],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[800],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Stack
+      {
+        label: 'Referral',
+        data: [
+          2500, 2600, 4000, 4000, 4800, 3500,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Stack
+      {
+        label: 'Organic Search',
+        data: [
+          2300, 2000, 3100, 2700, 1300, 2600,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[300],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[400],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Stack
+      {
+        label: 'Social',
+        data: [
+          4800, 4200, 4800, 1800, 3300, 3500,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[100],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[200],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Acquisition Channels</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <BarChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default AnalyticsCard03;

src/partials/analytics/AnalyticsCard04.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import BarChart from '../../charts/BarChart04';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function AnalyticsCard04() {
+
+  const chartData = {
+    labels: [
+      '02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Blue bars
+      {
+        label: 'New Visitors',
+        data: [
+          8000, 3800, 5350, 7800,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        categoryPercentage: 0.66,
+      },
+      // Light blue bars
+      {
+        label: 'Returning Visitors',
+        data: [
+          4000, 6500, 2200, 5800,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.sky[400],
+        hoverBackgroundColor: tailwindConfig().theme.colors.sky[500],
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Audience Overview</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <BarChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default AnalyticsCard04;

src/partials/analytics/AnalyticsCard05.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function AnalyticsCard05() {
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Channels</h2>
+      </header>
+      <div className="grow p-3">
+        <div className="flex flex-col h-full">
+          {/* Card content */}
+          <div className="grow">
+            <ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
+              <li>Source</li>
+              <li>Visitors</li>
+            </ul>
+
+            <ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '82%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Google</div>
+                  <div className="font-medium">4.7K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '70%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Indiehackers.com</div>
+                  <div className="font-medium">4.2K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '60%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>DuckDuckGo</div>
+                  <div className="font-medium">3.4K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '44%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Hacker News</div>
+                  <div className="font-medium">3.1K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '40%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Github.com</div>
+                  <div className="font-medium">2.2K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '30%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Madewithvuejs.com</div>
+                  <div className="font-medium">1.7K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '22%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Producthunt.com</div>
+                  <div className="font-medium">924</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '12%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>Dev.to</div>
+                  <div className="font-medium">696</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          {/* Card footer */}
+          <div className="text-center pt-4 pb-1 border-t border-slate-100">
+            <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Channels Report -&gt;</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnalyticsCard05;

src/partials/analytics/AnalyticsCard06.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function AnalyticsCard06() {
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Pages</h2>
+      </header>
+      <div className="grow p-3">
+        <div className="flex flex-col h-full">
+          {/* Card content */}
+          <div className="grow">
+            <ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
+              <li>Source</li>
+              <li>Pageviews</li>
+            </ul>
+
+            <ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '82%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>cruip.com/</div>
+                  <div className="font-medium">28K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '70%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>preview.cruip.com/open-pro/</div>
+                  <div className="font-medium">12K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '60%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>preview.cruip.com/appy/</div>
+                  <div className="font-medium">9.7K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '44%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>cruip.com/unlimited/</div>
+                  <div className="font-medium">9.2K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '40%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>preview.cruip.com/simple/</div>
+                  <div className="font-medium">7K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '30%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>cruip.com/about-us/</div>
+                  <div className="font-medium">6.4K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '22%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>docs.cruip.com/</div>
+                  <div className="font-medium">5.4K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '12%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>preview.cruip.com/twist/</div>
+                  <div className="font-medium">2.2K</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          {/* Card footer */}
+          <div className="text-center pt-4 pb-1 border-t border-slate-100">
+            <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Page Report -&gt;</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnalyticsCard06;

src/partials/analytics/AnalyticsCard07.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function AnalyticsCard07() {
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Countries</h2>
+      </header>
+      <div className="grow p-3">
+        <div className="flex flex-col h-full">
+          {/* Card content */}
+          <div className="grow">
+            <ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
+              <li>Source</li>
+              <li>Sessions</li>
+            </ul>
+
+            <ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '82%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇨🇮 Ireland</div>
+                  <div className="font-medium">4.2K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '70%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇺🇸 United States</div>
+                  <div className="font-medium">3.4K</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '60%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇩🇪 Germany</div>
+                  <div className="font-medium">1.6k</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '44%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇮🇹 Italy</div>
+                  <div className="font-medium">1.2k</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '40%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇬🇧 United Kingdom</div>
+                  <div className="font-medium">912</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '30%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇫🇷 France</div>
+                  <div className="font-medium">677</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '22%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇮🇳 India</div>
+                  <div className="font-medium">449</div>
+                </div>
+              </li>
+              {/* Item */}
+              <li className="relative px-2 py-1">
+                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '12%'}}></div>
+                <div className="relative flex justify-between space-x-2">
+                  <div>🇸🇬 Singapore</div>
+                  <div className="font-medium">269</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          {/* Card footer */}
+          <div className="text-center pt-4 pb-1 border-t border-slate-100">
+            <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Countries Report -&gt;</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnalyticsCard07;

src/partials/analytics/AnalyticsCard08.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import DoughnutChart from '../../charts/DoughnutChart';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function AnalyticsCard08() {
+
+  const chartData = {
+    labels: ['Desktop', 'Mobile', 'Tablet'],
+    datasets: [
+      {
+        label: 'Sessions By Device',
+        data: [
+          12, 50, 38,
+        ],
+        backgroundColor: [
+          tailwindConfig().theme.colors.indigo[500],
+          tailwindConfig().theme.colors.sky[400],
+          tailwindConfig().theme.colors.indigo[800],
+        ],
+        hoverBackgroundColor: [
+          tailwindConfig().theme.colors.indigo[600],
+          tailwindConfig().theme.colors.sky[500],
+          tailwindConfig().theme.colors.indigo[900],
+        ],
+        hoverBorderColor: tailwindConfig().theme.colors.white,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Sessions By Device</h2>
+      </header>
+        {/* Chart built with Chart.js 3 */}
+        {/* Change the height attribute to adjust the chart height */}
+      <DoughnutChart data={chartData} width={389} height={260} />
+    </div>
+  );
+}
+
+export default AnalyticsCard08;

src/partials/analytics/AnalyticsCard09.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import DoughnutChart from '../../charts/DoughnutChart';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function AnalyticsCard09() {
+
+  const chartData = {
+    labels: ['<18', '18-24', '24-36', '>35'],
+    datasets: [
+      {
+        label: 'Visit By Age Category',
+        data: [
+          30, 50, 5, 15,
+        ],
+        backgroundColor: [
+          tailwindConfig().theme.colors.indigo[500],
+          tailwindConfig().theme.colors.sky[400],
+          tailwindConfig().theme.colors.rose[500],
+          tailwindConfig().theme.colors.emerald[500],
+        ],
+        hoverBackgroundColor: [
+          tailwindConfig().theme.colors.indigo[600],
+          tailwindConfig().theme.colors.sky[500],
+          tailwindConfig().theme.colors.rose[600],
+          tailwindConfig().theme.colors.emerald[600],
+        ],
+        hoverBorderColor: tailwindConfig().theme.colors.white,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Sessions By Age</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <DoughnutChart data={chartData} width={389} height={260} />
+    </div>
+  );
+}
+
+export default AnalyticsCard09;

src/partials/analytics/AnalyticsCard10.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PolarChart from '../../charts/PolarChart';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function AnalyticsCard10() {
+
+  const chartData = {
+    labels: ['Males', 'Females', 'Unknown'],
+    datasets: [
+      {
+        label: 'Sessions By Gender',
+        data: [
+          500, 326, 242,
+        ],
+        backgroundColor: [
+          `rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[500])}, 0.8)`,
+          `rgba(${hexToRGB(tailwindConfig().theme.colors.sky[400])}, 0.8)`,
+          `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.8)`,
+        ],
+        hoverBackgroundColor: [
+          `rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[600])}, 0.8)`,
+          `rgba(${hexToRGB(tailwindConfig().theme.colors.sky[500])}, 0.8)`,
+          `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[600])}, 0.8)`,
+        ],
+        hoverBorderColor: tailwindConfig().theme.colors.white,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Sessions By Gender</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <PolarChart data={chartData} width={389} height={260} />
+    </div>
+  );
+}
+
+export default AnalyticsCard10;

src/partials/analytics/AnalyticsCard11.jsx

@@ -0,0 +1,280 @@
+import React from 'react';
+
+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 Image09 from '../../images/user-28-09.jpg';
+import Image11 from '../../images/user-28-11.jpg';
+
+function AnalyticsCard11() {
+  return (
+    <div className="col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Products</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
+              <tr>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Product</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Created by</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Category</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-center">Total impressions</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-center">Top country</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-center">CR</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Value</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-100">
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
+                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                        <path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Form Builder CP</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <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={Image01} width="28" height="28" alt="User 01" />
+                    </a>
+                    <a className="block" href="#0">
+                      <img className="rounded-full border-2 border-white box-content" src={Image02} width="28" height="28" alt="User 02" />
+                    </a>
+                    <a className="block" href="#0">
+                      <img className="rounded-full border-2 border-white box-content" src={Image03} width="28" height="28" alt="User 03" />
+                    </a>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+                    </svg>
+                    <div>Subscription</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">20,929</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-lg text-center">🇺🇸</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">27.4%</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left font-medium text-emerald-500">$12,499.77</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-emerald-500">
+                      <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                        <path d="M11 22.012a1 1 0 01-.707-1.707l4.5-4.5a1 1 0 011.414 0l3.293 3.293 4.793-4.793a1 1 0 111.414 1.414l-5.5 5.5a1 1 0 01-1.414 0L15.5 17.926l-3.793 3.793a1 1 0 01-.707.293z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Machine Learning A-Z</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <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={Image07} width="28" height="28" alt="User 07" />
+                    </a>
+                    <a className="block" href="#0">
+                      <img className="rounded-full border-2 border-white box-content" src={Image04} width="28" height="28" alt="User 04" />
+                    </a>
+                    <a className="block" href="#0">
+                      <img className="rounded-full border-2 border-white box-content" src={Image11} width="28" height="28" alt="User 11" />
+                    </a>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+                    </svg>
+                    <div>Subscription</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">17,944</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-lg text-center">🇬🇧</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">22.6%</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left font-medium text-emerald-500">$4,227.09</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
+                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                        <path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">2021 Web Bootcamp</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <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={Image05} width="28" height="28" alt="User 05" />
+                    </a>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+                    </svg>
+                    <div>Subscription</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">16,097</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-lg text-center">🇫🇷</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">22.4%</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left font-medium text-emerald-500">$2,499.77</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-sky-500">
+                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                        <path d="M18 26a8 8 0 118-8 8.009 8.009 0 01-8 8zm0-14a6 6 0 100 12 6 6 0 000-12z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Digital Marketing Course</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <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={Image06} width="28" height="28" alt="User 06" />
+                    </a>
+                    <a className="block" href="#0">
+                      <img className="rounded-full border-2 border-white box-content" src={Image11} width="28" height="28" alt="User 11" />
+                    </a>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+                    </svg>
+                    <div>Subscription</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">12,996</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-lg text-center">🇮🇹</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">22.1%</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left font-medium text-emerald-500">$2,224.09</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-rose-500">
+                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                        <circle cx="18" cy="18" r="3" />
+                        <path d="M13.05 24.363l-.707-.707a8 8 0 010-11.312l.707-.707 1.414 1.414-.707.707a6 6 0 000 8.484l.707.707-1.414 1.414zM22.95 24.363l-1.414-1.414.707-.707a6 6 0 000-8.484l-.707-.707 1.414-1.414.707.707a8 8 0 010 11.312l-.707.707z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Form Builder PRO</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <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={Image09} width="28" height="28" alt="User 09" />
+                    </a>
+                    <a className="block" href="#0">
+                      <img className="rounded-full border-2 border-white box-content" src={Image01} width="28" height="28" alt="User 01" />
+                    </a>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+                    </svg>
+                    <div>Subscription</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">7,097</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-lg text-center">🇩🇪</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-center">17.4%</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left font-medium text-emerald-500">$1,949.72</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnalyticsCard11;

src/partials/applications/ApplicationsCard01.jsx

@@ -0,0 +1,103 @@
+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;

src/partials/applications/ApplicationsCard02.jsx

@@ -0,0 +1,35 @@
+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;

src/partials/applications/ApplicationsCard03.jsx

@@ -0,0 +1,66 @@
+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;

src/partials/campaigns/CampaignsCard.jsx

@@ -0,0 +1,99 @@
+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;

src/partials/community/FeedLeftContent.jsx

@@ -0,0 +1,113 @@
+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;

src/partials/community/FeedPosts.jsx

@@ -0,0 +1,384 @@
+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;

src/partials/community/FeedRightContent.jsx

@@ -0,0 +1,240 @@
+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;

src/partials/community/ForumEntries.jsx

@@ -0,0 +1,427 @@
+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;

src/partials/community/ForumEntry.jsx

@@ -0,0 +1,431 @@
+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;

src/partials/community/ForumLeftContent.jsx

@@ -0,0 +1,97 @@
+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;

src/partials/community/ForumPostRightContent.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import UserImage from '../../images/user-40-04.jpg';
+
+function ForumPostRightContent() {
+  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">
+          {/* Button */}
+          <div className="mb-6">
+            <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Create Post</button>
+          </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">About the Author</div>
+              <div className="flex items-center mb-4">
+                <div className="w-10 h-10 shrink-0 mr-3">
+                  <img className="rounded-full" src={UserImage} width="40" height="40" alt="User 04" />
+                </div>
+                <div>
+                  <div className="font-semibold text-slate-800">Kate Merlu</div>
+                  <div className="text-sm text-slate-500 italic">Building SquareApp 🚀</div>
+                </div>
+              </div>
+              <ul className="text-sm space-y-2">
+                <li>🤟 <span className="font-medium">1798</span> Karma</li>
+                <li>🔥 <span className="font-medium">39</span> Posts</li>
+                <li>✍️ <span className="font-medium">299</span> Comments</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">Follow</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">Popular Stories</div>
+              <ul className="space-y-3">
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      I built and sold 2 small SaaS products and quit my job in the last two years — AMA
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      markusj
+                    </a>{' '}
+                    · 2d · 312 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      Besides Product Hunt, where else should I promote my new project? 🤔
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      katemerlu
+                    </a>{' '}
+                    · 2h · 7 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      Which are the main channels you use to drive traffic to your website? 📈
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      sophiestar
+                    </a>{' '}
+                    · 3d · 66 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      Failed for the past 12 years as a tech entrepreneur. My key takeaways.
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      ekuplu89
+                    </a>{' '}
+                    · 4h · 14 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      How to build a following on Twitter as a founder - A guide to growing your audience 🚀
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      molliehacks
+                    </a>{' '}
+                    · 3d · 32 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 ForumPostRightContent;

src/partials/community/ForumRightContent.jsx

@@ -0,0 +1,286 @@
+import React from 'react';
+
+import UserImage01 from '../../images/avatar-01.jpg';
+import UserImage02 from '../../images/avatar-02.jpg';
+import UserImage03 from '../../images/avatar-03.jpg';
+import UserImage04 from '../../images/avatar-04.jpg';
+import UserImage05 from '../../images/avatar-05.jpg';
+import UserImage06 from '../../images/avatar-06.jpg';
+
+function ForumRightContent() {
+  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">
+          {/* Button */}
+          <div className="mb-6">
+            <button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Create Post</button>
+          </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">Forum Meetups</div>
+              <ul>
+                {/* Event 1 */}
+                <li className="relative pb-4 last-of-type:pb-0">
+                  <div className="pl-6">
+                    <div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 27 Dec</div>
+                    <div className="text-sm mb-2">
+                      <a className="font-medium text-slate-800" href="#0">
+                        Silicon Valley Bootstrapper Breakfast Online for 2021
+                      </a>
+                    </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={UserImage02}
+                          width="28"
+                          height="28"
+                          alt="User 02"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage03}
+                          width="28"
+                          height="28"
+                          alt="User 03"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage04}
+                          width="28"
+                          height="28"
+                          alt="User 04"
+                        />
+                      </div>
+                      <div className="text-xs font-medium text-slate-400 italic">+22</div>
+                    </div>
+                  </div>
+                  {/* Timeline element */}
+                  <div aria-hidden="true">
+                    <div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
+                    <div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
+                  </div>
+                </li>
+                {/* Event 2 */}
+                <li className="relative pb-4 last-of-type:pb-0">
+                  <div className="pl-6">
+                    <div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 27 Dec</div>
+                    <div className="text-sm mb-2">
+                      <a className="font-medium text-slate-800" href="#0">
+                        New York &amp; New Jersey Virtual Retreat
+                      </a>
+                    </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={UserImage01}
+                          width="28"
+                          height="28"
+                          alt="User 01"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage04}
+                          width="28"
+                          height="28"
+                          alt="User 04"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage05}
+                          width="28"
+                          height="28"
+                          alt="User 05"
+                        />
+                      </div>
+                      <div className="text-xs font-medium text-slate-400 italic">+132</div>
+                    </div>
+                  </div>
+                  {/* Timeline element */}
+                  <div aria-hidden="true">
+                    <div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
+                    <div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
+                  </div>
+                </li>
+                {/* Event 3 */}
+                <li className="relative pb-4 last-of-type:pb-0">
+                  <div className="pl-6">
+                    <div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 29 Dec</div>
+                    <div className="text-sm mb-2">
+                      <a className="font-medium text-slate-800" href="#0">
+                        The World of AI and Machine Learning - Open Chat
+                      </a>
+                    </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={UserImage06}
+                          width="28"
+                          height="28"
+                          alt="User 06"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage03}
+                          width="28"
+                          height="28"
+                          alt="User 03"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage01}
+                          width="28"
+                          height="28"
+                          alt="User 01"
+                        />
+                      </div>
+                      <div className="text-xs font-medium text-slate-400 italic">+12</div>
+                    </div>
+                  </div>
+                  {/* Timeline element */}
+                  <div aria-hidden="true">
+                    <div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
+                    <div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
+                  </div>
+                </li>
+                {/* Event 4 */}
+                <li className="relative pb-4 last-of-type:pb-0">
+                  <div className="pl-6">
+                    <div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 29 Dec</div>
+                    <div className="text-sm mb-2">
+                      <a className="font-medium text-slate-800" href="#0">
+                        NYC Code &amp; Coffee 2.0 @ Freehold Brooklyn
+                      </a>
+                    </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={UserImage03}
+                          width="28"
+                          height="28"
+                          alt="User 03"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage05}
+                          width="28"
+                          height="28"
+                          alt="User 05"
+                        />
+                        <img
+                          className="rounded-full border-2 border-white box-content"
+                          src={UserImage04}
+                          width="28"
+                          height="28"
+                          alt="User 04"
+                        />
+                      </div>
+                      <div className="text-xs font-medium text-slate-400 italic">+17</div>
+                    </div>
+                  </div>
+                  {/* Timeline element */}
+                  <div aria-hidden="true">
+                    <div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
+                    <div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
+                  </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">Popular Stories</div>
+              <ul className="space-y-3">
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      I built and sold 2 small SaaS products and quit my job in the last two years — AMA
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      markusj
+                    </a>{' '}
+                    · 2d · 312 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      Besides Product Hunt, where else should I promote my new project? 🤔
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      katemerlu
+                    </a>{' '}
+                    · 2h · 7 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      Which are the main channels you use to drive traffic to your website? 📈
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      sophiestar
+                    </a>{' '}
+                    · 3d · 66 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      Failed for the past 12 years as a tech entrepreneur. My key takeaways.
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      ekuplu89
+                    </a>{' '}
+                    · 4h · 14 comments
+                  </div>
+                </li>
+                <li>
+                  <div className="text-sm mb-1">
+                    <a className="font-medium text-slate-800" href="#0">
+                      How to build a following on Twitter as a founder - A guide to growing your audience 🚀
+                    </a>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                      molliehacks
+                    </a>{' '}
+                    · 3d · 32 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 ForumRightContent;

src/partials/community/MeetupsPosts.jsx

@@ -0,0 +1,582 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import MeetupsThumb01 from '../../images/meetups-thumb-01.jpg';
+import MeetupsThumb02 from '../../images/meetups-thumb-02.jpg';
+import MeetupsThumb03 from '../../images/meetups-thumb-03.jpg';
+import MeetupsThumb04 from '../../images/meetups-thumb-04.jpg';
+import MeetupsThumb05 from '../../images/meetups-thumb-05.jpg';
+import MeetupsThumb06 from '../../images/meetups-thumb-06.jpg';
+import MeetupsThumb07 from '../../images/meetups-thumb-07.jpg';
+import MeetupsThumb08 from '../../images/meetups-thumb-08.jpg';
+import UserImage01 from '../../images/avatar-01.jpg';
+import UserImage02 from '../../images/avatar-02.jpg';
+import UserImage03 from '../../images/avatar-03.jpg';
+import UserImage04 from '../../images/avatar-04.jpg';
+import UserImage05 from '../../images/avatar-05.jpg';
+import UserImage06 from '../../images/avatar-06.jpg';
+
+function MeetupsPosts() {
+  return (
+    <div className="grid xl:grid-cols-2 gap-6">
+      
+      {/* Item 1 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb01}
+            width="220"
+            height="236"
+            alt="Meetup 01"
+          />
+          {/* 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>
+        </Link>
+        {/* 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>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">Silicon Valley Bootstrapper Breakfast Online for 2021</h3>
+            </Link>
+            <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={UserImage01}
+                  width="28"
+                  height="28"
+                  alt="User 01"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage04}
+                  width="28"
+                  height="28"
+                  alt="User 04"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage05}
+                  width="28"
+                  height="28"
+                  alt="User 05"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+22</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 2 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb02}
+            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>
+        </Link>
+        {/* 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>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">New York &amp; New Jersey Virtual Retreat 2021</h3>
+            </Link>
+            <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={UserImage02}
+                  width="28"
+                  height="28"
+                  alt="User 02"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage03}
+                  width="28"
+                  height="28"
+                  alt="User 03"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage04}
+                  width="28"
+                  height="28"
+                  alt="User 04"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+132</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 3 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb03}
+            width="220"
+            height="236"
+            alt="Meetup 03"
+          />
+          {/* 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>
+        </Link>
+        {/* Content */}
+        <div className="grow p-5 flex flex-col">
+          <div className="grow">
+            <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Wed 29 Dec, 2021</div>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">The World of AI and Machine Learning — Open Chat</h3>
+            </Link>
+            <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={UserImage06}
+                  width="28"
+                  height="28"
+                  alt="User 06"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage03}
+                  width="28"
+                  height="28"
+                  alt="User 03"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage01}
+                  width="28"
+                  height="28"
+                  alt="User 01"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+12</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 4 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb04}
+            width="220"
+            height="236"
+            alt="Meetup 04"
+          />
+          {/* 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>
+        </Link>
+        {/* Content */}
+        <div className="grow p-5 flex flex-col">
+          <div className="grow">
+            <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Wed 29 Dec, 2021</div>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">NYC Code &amp; Coffee 2.0 @ Freehold Brooklyn</h3>
+            </Link>
+            <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={UserImage05}
+                  width="28"
+                  height="28"
+                  alt="User 05"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage02}
+                  width="28"
+                  height="28"
+                  alt="User 02"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+17</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 5 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb05}
+            width="220"
+            height="236"
+            alt="Meetup 05"
+          />
+          {/* 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>
+        </Link>
+        {/* 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 3 Jan, 2022</div>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">Acme Inc. London Meetup: Women in Tech Night</h3>
+            </Link>
+            <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={UserImage02}
+                  width="28"
+                  height="28"
+                  alt="User 02"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage01}
+                  width="28"
+                  height="28"
+                  alt="User 01"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+117</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 6 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb06}
+            width="220"
+            height="236"
+            alt="Meetup 06"
+          />
+          {/* 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>
+        </Link>
+        {/* Content */}
+        <div className="grow p-5 flex flex-col">
+          <div className="grow">
+            <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Thu 6 Jan, 2022</div>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">Founder Worldwide - First Meetup of 2022!</h3>
+            </Link>
+            <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={UserImage03}
+                  width="28"
+                  height="28"
+                  alt="User 03"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage05}
+                  width="28"
+                  height="28"
+                  alt="User 05"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage04}
+                  width="28"
+                  height="28"
+                  alt="User 04"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+64</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 7 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb07}
+            width="220"
+            height="236"
+            alt="Meetup 07"
+          />
+          {/* 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>
+        </Link>
+        {/* Content */}
+        <div className="grow p-5 flex flex-col">
+          <div className="grow">
+            <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Thu 6 Jan, 2022</div>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">NYC Blockchain Network - Monthly 3rd Thursday Meetup</h3>
+            </Link>
+            <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={UserImage02}
+                  width="28"
+                  height="28"
+                  alt="User 02"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage04}
+                  width="28"
+                  height="28"
+                  alt="User 04"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+112</div>
+            </div>
+          </div>
+        </div>
+      </article>
+      
+      {/* Item 8 */}
+      <article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
+          <img
+            className="absolute object-cover object-center w-full h-full"
+            src={MeetupsThumb08}
+            width="220"
+            height="236"
+            alt="Meetup 08"
+          />
+          {/* 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>
+        </Link>
+        {/* Content */}
+        <div className="grow p-5 flex flex-col">
+          <div className="grow">
+            <div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Fri 7 Jan, 2022</div>
+            <Link className="inline-flex mb-2" to="/community/meetups-post">
+              <h3 className="text-lg font-bold text-slate-800">Build a Personal Brand and Boost Your Career in AI!</h3>
+            </Link>
+            <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={UserImage01}
+                  width="28"
+                  height="28"
+                  alt="User 01"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage05}
+                  width="28"
+                  height="28"
+                  alt="User 05"
+                />
+                <img
+                  className="rounded-full border-2 border-white box-content"
+                  src={UserImage06}
+                  width="28"
+                  height="28"
+                  alt="User 06"
+                />
+              </div>
+              <div className="text-xs font-medium text-slate-400 italic">+32</div>
+            </div>
+          </div>
+        </div>
+      </article>
+
+    </div>
+  );
+}
+
+export default MeetupsPosts;

src/partials/community/ProfileBody.jsx

@@ -0,0 +1,343 @@
+import React from 'react';
+
+import ProfileBg from '../../images/profile-bg.jpg';
+import UserAvatar from '../../images/user-128-01.jpg';
+import Icon02 from '../../images/icon-02.svg';
+import Icon03 from '../../images/icon-03.svg';
+import UserImage01 from '../../images/avatar-01.jpg';
+import UserImage02 from '../../images/avatar-02.jpg';
+import UserImage03 from '../../images/avatar-03.jpg';
+import UserImage04 from '../../images/avatar-04.jpg';
+import UserImage05 from '../../images/avatar-05.jpg';
+import UserImage06 from '../../images/avatar-06.jpg';
+
+function ProfileBody({
+  profileSidebarOpen,
+  setProfileSidebarOpen
+}) {
+  return (
+    <div className={`grow flex flex-col md:translate-x-0 transform transition-transform duration-300 ease-in-out ${profileSidebarOpen ? 'translate-x-1/3' : 'translate-x-0'}`}>
+
+      {/* Profile background */}
+      <div className="relative h-56 bg-slate-200">
+        <img className="object-cover h-full w-full" src={ProfileBg} width="979" height="220" alt="Profile background" />
+        {/* Close button */}
+        <button
+          className="md:hidden absolute top-4 left-4 sm:left-6 text-white opacity-80 hover:opacity-100"
+          onClick={() => setProfileSidebarOpen(!profileSidebarOpen)}
+          aria-controls="profile-sidebar" 
+          aria-expanded={profileSidebarOpen}
+        >
+          <span className="sr-only">Close sidebar</span>
+          <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="relative px-4 sm:px-6 pb-8">
+
+        {/* Pre-header */}
+        <div className="-mt-16 mb-6 sm:mb-3">
+
+          <div className="flex flex-col items-center sm:flex-row sm:justify-between sm:items-end">
+
+            {/* Avatar */}
+            <div className="inline-flex -ml-1 -mt-1 mb-4 sm:mb-0">
+              <img className="rounded-full border-4 border-white" src={UserAvatar} width="128" height="128" alt="Avatar" />
+            </div>
+
+            {/* Actions */}
+            <div className="flex space-x-2 sm:mb-2">
+              <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm">
+                <svg className="w-4 h-1 fill-current text-slate-400" viewBox="0 0 16 4">
+                  <circle cx="8" cy="2" r="2" />
+                  <circle cx="2" cy="2" r="2" />
+                  <circle cx="14" cy="2" r="2" />
+                </svg>
+              </button>
+              <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm">
+                <svg className="w-4 h-4 fill-current text-indigo-500" 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>
+              </button>
+              <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">
+                <svg className="fill-current shrink-0" width="11" height="8" viewBox="0 0 11 8">
+                  <path d="m.457 4.516.969-.99 2.516 2.481L9.266.702l.985.99-6.309 6.284z" />
+                </svg>
+                <span className="ml-2">Following</span>
+              </button>
+            </div>
+
+          </div>
+
+        </div>
+
+        {/* Header */}
+        <header className="text-center sm:text-left mb-6">
+          {/* Name */}
+          <div className="inline-flex items-start mb-2">
+            <h1 className="text-2xl text-slate-800 font-bold">Carolyn McNeail</h1>
+            <svg className="w-4 h-4 fill-current shrink-0 text-amber-500 ml-2" viewBox="0 0 16 16">
+              <path d="M13 6a.75.75 0 0 1-.75-.75 1.5 1.5 0 0 0-1.5-1.5.75.75 0 1 1 0-1.5 1.5 1.5 0 0 0 1.5-1.5.75.75 0 1 1 1.5 0 1.5 1.5 0 0 0 1.5 1.5.75.75 0 1 1 0 1.5 1.5 1.5 0 0 0-1.5 1.5A.75.75 0 0 1 13 6ZM6 16a1 1 0 0 1-1-1 4 4 0 0 0-4-4 1 1 0 0 1 0-2 4 4 0 0 0 4-4 1 1 0 1 1 2 0 4 4 0 0 0 4 4 1 1 0 0 1 0 2 4 4 0 0 0-4 4 1 1 0 0 1-1 1Z" />
+            </svg>
+          </div>
+          {/* Bio */}
+          <div className="text-sm mb-3">Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.</div>
+          {/* Meta */}
+          <div className="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">Milan, IT</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">carolinmcneail.com</a>
+            </div>
+          </div>
+        </header>
+
+        {/* Tabs */}
+        <div className="relative mb-6">
+          <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">General</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">Connections</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">Contributions</a>
+            </li>
+          </ul>
+        </div>
+
+        {/* Profile content */}
+        <div className="flex flex-col xl:flex-row xl:space-x-16">
+
+          {/* Main content */}
+          <div className="space-y-5 mb-8 xl:mb-0">
+
+            {/* About Me */}
+            <div>
+              <h2 className="text-slate-800 font-semibold mb-2">About Me</h2>
+              <div className="text-sm space-y-2">
+                <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+                <p>Consectetur adipiscing elit, sed do eiusmod tempor magna aliqua.</p>
+              </div>
+            </div>
+
+            {/* Departments */}
+            <div>
+              <h2 className="text-slate-800 font-semibold mb-2">Departments</h2>
+              {/* Cards */}
+              <div className="grid xl:grid-cols-2 gap-4">
+
+                {/* Card */}
+                <div className="bg-white p-4 border border-slate-200 rounded-sm shadow-sm">
+                  {/* Card header */}
+                  <div className="grow flex items-center truncate mb-2">
+                    <div className="w-8 h-8 shrink-0 flex items-center justify-center bg-slate-700 rounded-full mr-2">
+                      <img className="ml-1" src={Icon03} width="14" height="14" alt="Icon 03" />
+                    </div>
+                    <div className="truncate">
+                      <span className="text-sm font-medium text-slate-800">Acme Marketing</span>
+                    </div>
+                  </div>
+                  {/* Card content */}
+                  <div className="text-sm mb-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
+                  {/* Card footer */}
+                  <div className="flex justify-between items-center">
+                    {/* Avatars group */}
+                    <div className="flex -space-x-3 -ml-0.5">
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage02} width="24" height="24" alt="Avatar" />
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage03} width="24" height="24" alt="Avatar" />
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage04} width="24" height="24" alt="Avatar" />
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage05} width="24" height="24" alt="Avatar" />
+                    </div>
+                    {/* Link */}
+                    <div>
+                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">View -&gt;</a>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Card */}
+                <div className="bg-white p-4 border border-slate-200 rounded-sm shadow-sm">
+                  {/* Card header */}
+                  <div className="grow flex items-center truncate mb-2">
+                    <div className="w-8 h-8 shrink-0 flex items-center justify-center bg-slate-700 rounded-full mr-2">
+                      <img className="ml-1" src={Icon02} width="14" height="14" alt="Icon 02" />
+                    </div>
+                    <div className="truncate">
+                      <span className="text-sm font-medium text-slate-800">Acme Product</span>
+                    </div>
+                  </div>
+                  {/* Card content */}
+                  <div className="text-sm mb-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
+                  {/* Card footer */}
+                  <div className="flex justify-between items-center">
+                    {/* Avatars group */}
+                    <div className="flex -space-x-3 -ml-0.5">
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage06} width="24" height="24" alt="Avatar" />
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage03} width="24" height="24" alt="Avatar" />
+                      <img className="rounded-full border-2 border-white box-content" src={UserImage01} width="24" height="24" alt="Avatar" />
+                    </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>
+
+            {/* Work History */}
+            <div>
+              <h2 className="text-slate-800 font-semibold mb-2">Work History</h2>
+              <div className="bg-white p-4 border border-slate-200 rounded-sm shadow-sm">
+                <ul className="space-y-3">
+
+                  {/* Item */}
+                  <li className="sm:flex sm:items-center sm:justify-between">
+                    <div className="sm:grow flex items-center text-sm">
+                      {/* Icon */}
+                      <div className="w-8 h-8 rounded-full shrink-0 bg-amber-500 my-2 mr-3">
+                        <svg className="w-8 h-8 fill-current text-amber-50" viewBox="0 0 32 32">
+                          <path d="M21 14a.75.75 0 0 1-.75-.75 1.5 1.5 0 0 0-1.5-1.5.75.75 0 1 1 0-1.5 1.5 1.5 0 0 0 1.5-1.5.75.75 0 1 1 1.5 0 1.5 1.5 0 0 0 1.5 1.5.75.75 0 1 1 0 1.5 1.5 1.5 0 0 0-1.5 1.5.75.75 0 0 1-.75.75Zm-7 10a1 1 0 0 1-1-1 4 4 0 0 0-4-4 1 1 0 0 1 0-2 4 4 0 0 0 4-4 1 1 0 0 1 2 0 4 4 0 0 0 4 4 1 1 0 0 1 0 2 4 4 0 0 0-4 4 1 1 0 0 1-1 1Z" />
+                        </svg>
+                      </div>
+                      {/* Position */}
+                      <div>
+                        <div className="font-medium text-slate-800">Senior Product Designer</div>
+                        <div className="flex flex-nowrap items-center space-x-2 whitespace-nowrap">
+                          <div>Remote</div>
+                          <div className="text-slate-400">·</div>
+                          <div>April, 2020 - Today</div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Tags */}
+                    <div className="sm:ml-2 mt-2 sm:mt-0">
+                      <ul className="flex flex-wrap sm:justify-end -m-1">
+                        <li className="m-1">
+                          <button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Marketing</button>
+                        </li>
+                        <li className="m-1">
+                          <button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">+4</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </li>
+
+                  {/* Item */}
+                  <li className="sm:flex sm:items-center sm:justify-between">
+                    <div className="sm:grow flex items-center text-sm">
+                      {/* Icon */}
+                      <div className="w-8 h-8 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
+                        <svg className="w-8 h-8 fill-current text-indigo-50" viewBox="0 0 32 32">
+                          <path d="M8.994 20.006a1 1 0 0 1-.707-1.707l4.5-4.5a1 1 0 0 1 1.414 0l3.293 3.293 4.793-4.793a1 1 0 1 1 1.414 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3.293-3.293L9.7 19.713a1 1 0 0 1-.707.293Z" />
+                        </svg>
+                      </div>
+                      {/* Position */}
+                      <div>
+                        <div className="font-medium text-slate-800">Product Designer</div>
+                        <div className="flex flex-nowrap items-center space-x-2 whitespace-nowrap">
+                          <div>Milan, IT</div>
+                          <div className="text-slate-400">·</div>
+                          <div>April, 2018 - April 2020</div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Tags */}
+                    <div className="sm:ml-2 mt-2 sm:mt-0">
+                      <ul className="flex flex-wrap sm:justify-end -m-1">
+                        <li className="m-1">
+                          <button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Marketing</button>
+                        </li>
+                        <li className="m-1">
+                          <button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">+4</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </li>
+
+                  {/* Item */}
+                  <li className="sm:flex sm:items-center sm:justify-between">
+                    <div className="sm:grow flex items-center text-sm">
+                      {/* Icon */}
+                      <div className="w-8 h-8 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
+                        <svg className="w-8 h-8 fill-current text-indigo-50" viewBox="0 0 32 32">
+                          <path d="M8.994 20.006a1 1 0 0 1-.707-1.707l4.5-4.5a1 1 0 0 1 1.414 0l3.293 3.293 4.793-4.793a1 1 0 1 1 1.414 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3.293-3.293L9.7 19.713a1 1 0 0 1-.707.293Z" />
+                        </svg>
+                      </div>
+                      {/* Position */}
+                      <div>
+                        <div className="font-medium text-slate-800">Product Designer</div>
+                        <div className="flex flex-nowrap items-center space-x-2 whitespace-nowrap">
+                          <div>Milan, IT</div>
+                          <div className="text-slate-400">·</div>
+                          <div>April, 2018 - April 2020</div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Tags */}
+                    <div className="sm:ml-2 mt-2 sm:mt-0">
+                      <ul className="flex flex-wrap sm:justify-end -m-1">
+                        <li className="m-1">
+                          <button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Marketing</button>
+                        </li>
+                        <li className="m-1">
+                          <button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">+4</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </li>
+
+                </ul>
+              </div>
+            </div>
+
+          </div>
+
+          {/* Sidebar */}
+          <aside className="xl:min-w-56 xl:w-56 space-y-3">
+            <div className="text-sm">
+              <h3 className="font-medium text-slate-800">Title</h3>
+              <div>Senior Product Designer</div>
+            </div>
+            <div className="text-sm">
+              <h3 className="font-medium text-slate-800">Location</h3>
+              <div>Milan, IT - Remote</div>
+            </div>
+            <div className="text-sm">
+              <h3 className="font-medium text-slate-800">Email</h3>
+              <div>carolinmcneail@acme.com</div>
+            </div>
+            <div className="text-sm">
+              <h3 className="font-medium text-slate-800">Birthdate</h3>
+              <div>4 April, 1987</div>
+            </div>
+            <div className="text-sm">
+              <h3 className="font-medium text-slate-800">Joined Acme</h3>
+              <div>7 April, 2017</div>
+            </div>
+          </aside>
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default ProfileBody;

src/partials/community/ProfileSidebar.jsx

@@ -0,0 +1,161 @@
+import React from 'react';
+
+import ProfileImage 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 UserImage08 from '../../images/user-32-08.jpg';
+
+function ProfileSidebar({
+  profileSidebarOpen,
+  setProfileSidebarOpen
+}) {
+  return (
+    <div
+      id="profile-sidebar"
+      className={`absolute z-20 top-0 bottom-0 w-full md:w-auto md:static md:top-auto md:bottom-auto -mr-px md:translate-x-0 transform transition-transform duration-200 ease-in-out ${profileSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
+    >
+      <div className="sticky top-16 bg-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-r border-slate-200 md:w-72 xl:w-80 h-[calc(100vh-64px)]">
+
+        {/* Profile group */}
+        <div>
+          {/* Group header */}
+          <div className="sticky top-0 z-10">
+            <div className="flex items-center bg-white border-b border-slate-200 px-5 h-16">
+              <div className="w-full flex items-center justify-between">
+                {/* Profile image */}
+                <div className="relative">
+                  <div className="grow flex items-center truncate">
+                    <img className="w-8 h-8 rounded-full mr-2" src={ProfileImage} width="32" height="32" alt="Group 01" />
+                    <div className="truncate">
+                      <span className="font-semibold text-slate-800">Acme Inc.</span>
+                    </div>
+                  </div>
+                </div>
+                {/* Add button */}
+                <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+                  <svg className="w-4 h-4 fill-current text-indigo-500" viewBox="0 0 16 16">
+                    <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1Z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+          {/* Group body */}
+          <div className="px-5 py-4">
+            {/* Search form */}
+            <form className="relative">
+              <label htmlFor="profile-search" className="sr-only">Search</label>
+              <input id="profile-search" 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>
+            {/* Team members */}
+            <div className="mt-4">
+              <div className="text-xs font-semibold text-slate-400 uppercase mb-3">Team members</div>
+              <ul className="mb-6">
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded bg-indigo-100" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center">
+                      <div className="relative mr-2">
+                        <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>
+                </li>
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center truncate">
+                      <div className="relative mr-2">
+                        <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">Mary Roszczewski</span>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center truncate">
+                      <div className="relative mr-2">
+                        <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">Jerzy Wierzy</span>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center truncate">
+                      <div className="relative mr-2">
+                        <img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
+                        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
+                      </div>
+                      <div className="truncate">
+                        <span className="text-sm font-medium text-slate-800">Tisha Yanchev</span>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center truncate">
+                      <div className="relative mr-2">
+                        <img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
+                        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
+                      </div>
+                      <div className="truncate">
+                        <span className="text-sm font-medium text-slate-800">Simona Lürwer</span>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center truncate">
+                      <div className="relative mr-2">
+                        <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">Adrian Przetocki</span>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
+                    <div className="flex items-center truncate">
+                      <div className="relative mr-2">
+                        <img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
+                        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
+                      </div>
+                      <div className="truncate">
+                        <span className="text-sm font-medium text-slate-800">Brian Halligan</span>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default ProfileSidebar;

src/partials/community/UsersTabsCard.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import EditMenu from '../../components/DropdownEditMenu';
+
+function UsersTabsCard(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">
+      <div className="flex flex-col h-full">
+        {/* Card top */}
+        <div className="grow p-5">
+          {/* Menu button */}
+          <div className="relative">
+            <EditMenu align="right" className="absolute top-0 right-0 inline-flex">
+              <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>
+          </div>
+          {/* Image + name */}
+          <header>
+            <div className="flex justify-center mb-2">
+              <Link className="relative inline-flex items-start" to={props.link}>
+                <div className="absolute top-0 right-0 -mr-2 bg-white rounded-full shadow" aria-hidden="true">
+                  <svg className="w-8 h-8 fill-current text-amber-500" viewBox="0 0 32 32">
+                    <path d="M21 14.077a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 010 1.5 1.5 1.5 0 00-1.5 1.5.75.75 0 01-.75.75zM14 24.077a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" />
+                  </svg>
+                </div>
+                <img className="rounded-full" src={props.image} width="64" height="64" alt={props.name} />
+              </Link>
+            </div>
+            <div className="text-center">
+              <Link className="inline-flex text-slate-800 hover:text-slate-900" to={props.link}>
+                <h2 className="text-xl leading-snug justify-center font-semibold">{props.name}</h2>
+              </Link>
+            </div>
+            <div className="flex justify-center items-center"><span className="text-sm font-medium text-slate-400 -mt-0.5 mr-1">-&gt;</span> <span>{props.location}</span></div>
+          </header>
+          {/* Bio */}
+          <div className="text-center mt-2">
+            <div className="text-sm">{props.content}</div>
+          </div>
+        </div>
+        {/* Card footer */}
+        <div className="border-t border-slate-200">
+          <Link className="block text-center text-sm text-indigo-500 hover:text-indigo-600 font-medium px-3 py-4" to="/messages">
+            <div className="flex items-center justify-center">
+              <svg className="w-4 h-4 fill-current shrink-0 mr-2" 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>
+              <span>Send Message</span>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UsersTabsCard;

src/partials/community/UsersTilesCard.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import EditMenu from '../../components/DropdownEditMenu';
+
+function UsersTilesCard(props) {
+  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">
+        {/* Card top */}
+        <div className="grow p-5">
+          <div className="flex justify-between items-start">
+            {/* Image + name */}
+            <header>
+              <div className="flex mb-2">
+                <Link className="relative inline-flex items-start mr-5" to={props.link}>
+                  <div className="absolute top-0 right-0 -mr-2 bg-white rounded-full shadow" aria-hidden="true">
+                    <svg className="w-8 h-8 fill-current text-amber-500" viewBox="0 0 32 32">
+                      <path d="M21 14.077a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 010 1.5 1.5 1.5 0 00-1.5 1.5.75.75 0 01-.75.75zM14 24.077a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" />
+                    </svg>
+                  </div>
+                  <img className="rounded-full" src={props.image} width="64" height="64" alt={props.name} />
+                </Link>
+                <div className="mt-1 pr-1">
+                  <Link className="inline-flex text-slate-800 hover:text-slate-900" to={props.link}>
+                    <h2 className="text-xl leading-snug justify-center font-semibold">{props.name}</h2>
+                  </Link>
+                  <div className="flex items-center"><span className="text-sm font-medium text-slate-400 -mt-0.5 mr-1">-&gt;</span> <span>{props.location}</span></div>
+                </div>
+              </div>
+            </header>
+            {/* 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>
+          </div>
+          {/* Bio */}
+          <div className="mt-2">
+            <div className="text-sm">{props.content}</div>
+          </div>
+        </div>
+        {/* Card footer */}
+        <div className="border-t border-slate-200">
+          <div className="flex divide-x divide-slate-200r">
+            <Link className="block flex-1 text-center text-sm text-indigo-500 hover:text-indigo-600 font-medium px-3 py-4" to="/messages">
+              <div className="flex items-center justify-center">
+                <svg className="w-4 h-4 fill-current shrink-0 mr-2" 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>
+                <span>Send Email</span>
+              </div>
+            </Link>
+            <Link className="block flex-1 text-center text-sm text-slate-600 hover:text-slate-800 font-medium px-3 py-4 group" to="/settings">
+              <div className="flex items-center justify-center">
+                <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-slate-500 shrink-0 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>
+                <span>Edit Profile</span>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UsersTilesCard;

src/partials/customers/CustomersTable.jsx

@@ -0,0 +1,255 @@
+import React, { useState, useEffect } from 'react';
+import Customer from './CustomersTableItem';
+
+import Image01 from '../../images/user-40-01.jpg';
+import Image02 from '../../images/user-40-02.jpg';
+import Image03 from '../../images/user-40-03.jpg';
+import Image04 from '../../images/user-40-04.jpg';
+import Image05 from '../../images/user-40-05.jpg';
+import Image06 from '../../images/user-40-06.jpg';
+import Image07 from '../../images/user-40-07.jpg';
+import Image08 from '../../images/user-40-08.jpg';
+import Image09 from '../../images/user-40-09.jpg';
+import Image10 from '../../images/user-40-10.jpg';
+
+function CustomersTable({
+  selectedItems
+}) {
+
+  const customers = [
+    {
+      id: '0',
+      image: Image01,
+      name: 'Patricia Semklo',
+      email: 'patricia.semklo@app.com',
+      location: '🇬🇧 London, UK',
+      orders: '24',
+      lastOrder: '#123567',
+      spent: '$2,890.66',
+      refunds: '-',
+      fav: true
+    },
+    {
+      id: '1',
+      image: Image02,
+      name: 'Dominik Lamakani',
+      email: 'dominik.lamakani@gmail.com',
+      location: '🇩🇪 Dortmund, DE',
+      orders: '77',
+      lastOrder: '#779912',
+      spent: '$14,767.04',
+      refunds: '4',
+      fav: false
+    },
+    {
+      id: '2',
+      image: Image03,
+      name: 'Ivan Mesaros',
+      email: 'imivanmes@gmail.com',
+      location: '🇫🇷 Paris, FR',
+      orders: '44',
+      lastOrder: '#889924',
+      spent: '$4,996.00',
+      refunds: '1',
+      fav: true
+    },
+    {
+      id: '3',
+      image: Image04,
+      name: 'Maria Martinez',
+      email: 'martinezhome@gmail.com',
+      location: '🇮🇹 Bologna, IT',
+      orders: '29',
+      lastOrder: '#897726',
+      spent: '$3,220.66',
+      refunds: '2',
+      fav: false
+    },
+    {
+      id: '4',
+      image: Image05,
+      name: 'Vicky Jung',
+      email: 'itsvicky@contact.com',
+      location: '🇬🇧 London, UK',
+      orders: '22',
+      lastOrder: '#123567',
+      spent: '$2,890.66',
+      refunds: '-',
+      fav: true
+    },
+    {
+      id: '5',
+      image: Image06,
+      name: 'Tisho Yanchev',
+      email: 'tisho.y@kurlytech.com',
+      location: '🇬🇧 London, UK',
+      orders: '14',
+      lastOrder: '#896644',
+      spent: '$1,649.99',
+      refunds: '1',
+      fav: true
+    },
+    {
+      id: '6',
+      image: Image07,
+      name: 'James Cameron',
+      email: 'james.ceo@james.tech',
+      location: '🇫🇷 Marseille, FR',
+      orders: '34',
+      lastOrder: '#136988',
+      spent: '$3,569.87',
+      refunds: '2',
+      fav: true
+    },
+    {
+      id: '7',
+      image: Image08,
+      name: 'Haruki Masuno',
+      email: 'haruki@supermail.jp',
+      location: '🇯🇵 Tokio, JP',
+      orders: '112',
+      lastOrder: '#442206',
+      spent: '$19,246.07',
+      refunds: '6',
+      fav: false
+    },
+    {
+      id: '8',
+      image: Image09,
+      name: 'Joe Huang',
+      email: 'joehuang@hotmail.com',
+      location: '🇨🇳 Shanghai, CN',
+      orders: '64',
+      lastOrder: '#764321',
+      spent: '$12,276.92',
+      refunds: '-',
+      fav: true
+    },
+    {
+      id: '9',
+      image: Image10,
+      name: 'Carolyn McNeail',
+      email: 'carolynlove@gmail.com',
+      location: '🇮🇹 Milan, IT',
+      orders: '19',
+      lastOrder: '#908764',
+      spent: '$1,289.97',
+      refunds: '2',
+      fav: false
+    }
+  ];
+
+  const [selectAll, setSelectAll] = useState(false);
+  const [isCheck, setIsCheck] = useState([]);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    setList(customers);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    setIsCheck(list.map(li => li.id));
+    if (selectAll) {
+      setIsCheck([]);
+    }
+  };
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setSelectAll(false);
+    setIsCheck([...isCheck, id]);
+    if (!checked) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
+
+  useEffect(() => {
+    selectedItems(isCheck);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  return (
+    <div className="bg-white shadow-lg rounded-sm border border-slate-200 relative">
+      <header className="px-5 py-4">
+        <h2 className="font-semibold text-slate-800">All Customers <span className="text-slate-400 font-medium">248</span></h2>
+      </header>
+      <div>
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs font-semibold uppercase text-slate-500 bg-slate-50 border-t border-b border-slate-200">
+              <tr>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                  <div className="flex items-center">
+                    <label className="inline-flex">
+                      <span className="sr-only">Select all</span>
+                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
+                    </label>
+                  </div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                  <span className="sr-only">Favourite</span>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Order</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Email</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Location</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold">Orders</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Last order</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Total spent</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold">Refunds</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <span className="sr-only">Menu</span>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-200">
+              {
+                list.map(customer => {
+                  return (
+                    <Customer
+                      key={customer.id}
+                      id={customer.id}
+                      image={customer.image}
+                      name={customer.name}
+                      email={customer.email}
+                      location={customer.location}
+                      orders={customer.orders}
+                      lastOrder={customer.lastOrder}
+                      spent={customer.spent}
+                      refunds={customer.refunds}
+                      fav={customer.fav}
+                      handleClick={handleClick}
+                      isChecked={isCheck.includes(customer.id)}
+                    />
+                  )
+                })
+              }
+            </tbody>
+          </table>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CustomersTable;

src/partials/customers/CustomersTableItem.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+function CustomersTableItem(props) {
+  return (
+    <tr>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="flex items-center">
+          <label className="inline-flex">
+            <span className="sr-only">Select</span>
+            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+          </label>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="flex items-center relative">
+          <button>
+            <svg className={`w-4 h-4 shrink-0 fill-current ${props.fav ? 'text-amber-500' : 'text-slate-300'}`} viewBox="0 0 16 16">
+              <path d="M8 0L6 5.934H0l4.89 3.954L2.968 16 8 12.223 13.032 16 11.11 9.888 16 5.934h-6L8 0z" />
+            </svg>
+          </button>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="flex items-center">
+          <div className="w-10 h-10 shrink-0 mr-2 sm:mr-3">
+            <img className="rounded-full" src={props.image} width="40" height="40" alt={props.name} />
+          </div>
+          <div className="font-medium text-slate-800">{props.name}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left">{props.email}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left">{props.location}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-center">{props.orders}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left font-medium text-sky-500">{props.lastOrder}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left font-medium text-emerald-500">{props.spent}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-center">{props.refunds}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        {/* Menu button */}
+        <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>
+      </td>
+    </tr>
+  );
+}
+
+export default CustomersTableItem;

src/partials/dashboard/DashboardAvatars.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import User01 from '../../images/user-36-01.jpg';
+import User02 from '../../images/user-36-02.jpg';
+import User03 from '../../images/user-36-03.jpg';
+import User04 from '../../images/user-36-04.jpg';
+
+function DashboardAvatars() {
+  return (
+    <ul className="flex flex-wrap justify-center sm:justify-start mb-8 sm:mb-0 -space-x-3 -ml-px">
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User01} width="36" height="36" alt="User 01" />
+        </Link>
+      </li>
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User02} width="36" height="36" alt="User 02" />
+        </Link>
+      </li>
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User03} width="36" height="36" alt="User 03" />
+        </Link>
+      </li>
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User04} width="36" height="36" alt="User 04" />
+        </Link>
+      </li>
+      <li>
+        <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-4 h-4 fill-current" viewBox="0 0 16 16">
+            <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+          </svg>
+        </button>
+      </li>
+    </ul>
+  );
+}
+
+export default DashboardAvatars;

src/partials/dashboard/DashboardCard01.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LineChart from '../../charts/LineChart01';
+import Icon from '../../images/icon-01.svg';
+import EditMenu from '../../components/DropdownEditMenu';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard01() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          732, 610, 610, 504, 504, 504, 349,
+          349, 504, 342, 504, 610, 391, 192,
+          154, 273, 191, 191, 126, 263, 349,
+          252, 423, 622, 470, 532,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        data: [
+          532, 532, 532, 404, 404, 314, 314,
+          314, 314, 314, 234, 314, 234, 234,
+          314, 314, 314, 388, 314, 202, 202,
+          202, 202, 314, 720, 642,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header className="flex justify-between items-start mb-2">
+          {/* Icon */}
+          <img src={Icon} width="32" height="32" alt="Icon 01" />
+          {/* Menu button */}
+          <EditMenu align="right" className="relative inline-flex">
+            <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>
+        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Plus</h2>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$24,780</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={128} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard01;

src/partials/dashboard/DashboardCard02.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LineChart from '../../charts/LineChart01';
+import Icon from '../../images/icon-02.svg';
+import EditMenu from '../../components/DropdownEditMenu';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard02() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          622, 622, 426, 471, 365, 365, 238,
+          324, 288, 206, 324, 324, 500, 409,
+          409, 273, 232, 273, 500, 570, 767,
+          808, 685, 767, 685, 685,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        data: [
+          732, 610, 610, 504, 504, 504, 349,
+          349, 504, 342, 504, 610, 391, 192,
+          154, 273, 191, 191, 126, 263, 349,
+          252, 423, 622, 470, 532,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header className="flex justify-between items-start mb-2">
+          {/* Icon */}
+          <img src={Icon} width="32" height="32" alt="Icon 02" />
+          {/* Menu button */}
+          <EditMenu align="right" className="relative inline-flex">
+            <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>
+        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Advanced</h2>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$17,489</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={128} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard02;

src/partials/dashboard/DashboardCard03.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LineChart from '../../charts/LineChart01';
+import Icon from '../../images/icon-03.svg';
+import EditMenu from '../../components/DropdownEditMenu';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard03() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          540, 466, 540, 466, 385, 432, 334,
+          334, 289, 289, 200, 289, 222, 289,
+          289, 403, 554, 304, 289, 270, 134,
+          270, 829, 344, 388, 364,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        data: [
+          689, 562, 477, 477, 477, 477, 458,
+          314, 430, 378, 430, 498, 642, 350,
+          145, 145, 354, 260, 188, 188, 300,
+          300, 282, 364, 660, 554,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header className="flex justify-between items-start mb-2">
+          {/* Icon */}
+          <img src={Icon} width="32" height="32" alt="Icon 03" />
+          {/* Menu button */}
+          <EditMenu align="right" className="relative inline-flex">
+            <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>
+        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Professional</h2>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$9,962</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={128} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard03;

src/partials/dashboard/DashboardCard04.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import BarChart from '../../charts/BarChart01';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard04() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Light blue bars
+      {
+        label: 'Direct',
+        data: [
+          800, 1600, 900, 1300, 1950, 1700,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.blue[400],
+        hoverBackgroundColor: tailwindConfig().theme.colors.blue[500],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Blue bars
+      {
+        label: 'Indirect',
+        data: [
+          4900, 2600, 5350, 4800, 5200, 4800,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Direct VS Indirect</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <BarChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default DashboardCard04;

src/partials/dashboard/DashboardCard05.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import Tooltip from '../../components/Tooltip';
+import RealtimeChart from '../../charts/RealtimeChart';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard05() {
+
+  // IMPORTANT:
+  // Code below is for demo purpose only, and it's not covered by support.
+  // If you need to replace dummy data with real data,
+  // refer to Chart.js documentation: https://www.chartjs.org/docs/latest
+
+  // Fake real-time data
+  const [counter, setCounter] = useState(0);
+  const [increment, setIncrement] = useState(0);
+  const [range, setRange] = useState(35);
+  
+  // Dummy data to be looped
+  const data = [
+    57.81, 57.75, 55.48, 54.28, 53.14, 52.25, 51.04, 52.49, 55.49, 56.87,
+    53.73, 56.42, 58.06, 55.62, 58.16, 55.22, 58.67, 60.18, 61.31, 63.25,
+    65.91, 64.44, 65.97, 62.27, 60.96, 59.34, 55.07, 59.85, 53.79, 51.92,
+    50.95, 49.65, 48.09, 49.81, 47.85, 49.52, 50.21, 52.22, 54.42, 53.42,
+    50.91, 58.52, 53.37, 57.58, 59.09, 59.36, 58.71, 59.42, 55.93, 57.71,
+    50.62, 56.28, 57.37, 53.08, 55.94, 55.82, 53.94, 52.65, 50.25,
+  ];
+
+  const [slicedData, setSlicedData] = useState(data.slice(0, range));
+
+  // Generate fake dates from now to back in time
+  const generateDates = () => {
+    const now = new Date();
+    const dates = [];
+    data.forEach((v, i) => {
+      dates.push(new Date(now - 2000 - i * 2000));
+    });
+    return dates;
+  };
+
+  const [slicedLabels, setSlicedLabels] = useState(generateDates().slice(0, range).reverse());
+
+  // Fake update every 2 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCounter(counter + 1);
+    }, 2000);
+    return () => clearInterval(interval)
+  }, [counter]);
+
+  // Loop through data array and update
+  useEffect(() => {
+    setIncrement(increment + 1);
+    if (increment + range < data.length) {
+      setSlicedData(([x, ...slicedData]) => [...slicedData, data[increment + range]]);
+    } else {
+      setIncrement(0);
+      setRange(0);
+    }
+    setSlicedLabels(([x, ...slicedLabels]) => [...slicedLabels, new Date()]);
+    return () => setIncrement(0)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [counter]);
+
+  const chartData = {
+    labels: slicedLabels,
+    datasets: [
+      // Indigo line
+      {
+        data: slicedData,
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Real Time Value</h2>
+        <Tooltip className="ml-2">
+          <div className="text-xs text-center whitespace-nowrap">Built with <a className="underline" href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></div>
+        </Tooltip>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <RealtimeChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default DashboardCard05;

src/partials/dashboard/DashboardCard06.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import DoughnutChart from '../../charts/DoughnutChart';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard06() {
+
+  const chartData = {
+    labels: ['United States', 'Italy', 'Other'],
+    datasets: [
+      {
+        label: 'Top Countries',
+        data: [
+          35, 30, 35,
+        ],
+        backgroundColor: [
+          tailwindConfig().theme.colors.indigo[500],
+          tailwindConfig().theme.colors.blue[400],
+          tailwindConfig().theme.colors.indigo[800],
+        ],
+        hoverBackgroundColor: [
+          tailwindConfig().theme.colors.indigo[600],
+          tailwindConfig().theme.colors.blue[500],
+          tailwindConfig().theme.colors.indigo[900],
+        ],
+        hoverBorderColor: tailwindConfig().theme.colors.white,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Countries</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <DoughnutChart data={chartData} width={389} height={260} />
+    </div>
+  );
+}
+
+export default DashboardCard06;

src/partials/dashboard/DashboardCard07.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+
+function DashboardCard07() {
+  return (
+    <div className="col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Channels</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
+              <tr>
+                <th className="p-2">
+                  <div className="font-semibold text-left">Source</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Visitors</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Revenues</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Sales</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Conversion</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm font-medium divide-y divide-slate-100">
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#24292E" cx="18" cy="18" r="18" />
+                      <path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
+                    </svg>
+                    <div className="text-slate-800">Github.com</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">2.4K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$3,877</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">267</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.7%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#1DA1F2" cx="18" cy="18" r="18" />
+                      <path d="M26 13.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.4H10c1.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" fill="#FFF" fillRule="nonzero" />
+                    </svg>
+                    <div className="text-slate-800">Twitter</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">2.2K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$3,426</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">249</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.4%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#EA4335" cx="18" cy="18" r="18" />
+                      <path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fillRule="nonzero" />
+                    </svg>
+                    <div className="text-slate-800">Google (organic)</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">2.0K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$2,444</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">224</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.2%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#4BC9FF" cx="18" cy="18" r="18" />
+                      <path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fillRule="nonzero" />
+                    </svg>
+                    <div className="text-slate-800">Vimeo.com</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">1.9K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$2,236</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">220</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.2%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#0E2439" cx="18" cy="18" r="18" />
+                      <path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
+                    </svg>
+                    <div className="text-slate-800">Indiehackers.com</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">1.7K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$2,034</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">204</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">3.9%</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard07;

src/partials/dashboard/DashboardCard08.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart02';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard08() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        label: 'Current',
+        data: [
+          73, 64, 73, 69, 104, 104, 164,
+          164, 120, 120, 120, 148, 142, 104,
+          122, 110, 104, 152, 166, 233, 268,
+          252, 284, 284, 333, 323,
+        ],
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Blue line
+      {
+        label: 'Previous',
+        data: [
+          184, 86, 42, 378, 42, 243, 38,
+          120, 0, 0, 42, 0, 84, 0,
+          276, 0, 124, 42, 124, 88, 88,
+          215, 156, 88, 124, 64,
+        ],
+        borderColor: tailwindConfig().theme.colors.blue[400],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
+        clip: 20,
+      },
+      // emerald line
+      {
+        label: 'Average',
+        data: [
+          122, 170, 192, 86, 102, 124, 115,
+          115, 56, 104, 0, 72, 208, 186,
+          223, 188, 114, 162, 200, 150, 118,
+          118, 76, 122, 230, 268,
+        ],
+        borderColor: tailwindConfig().theme.colors.emerald[500],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Sales Over Time (all stores)</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <LineChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default DashboardCard08;

src/partials/dashboard/DashboardCard09.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Tooltip from '../../components/Tooltip';
+import BarChart from '../../charts/BarChart02';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard09() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Light blue bars
+      {
+        label: 'Stack 1',
+        data: [
+          6200, 9200, 6600, 8800, 5200, 9200,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Blue bars
+      {
+        label: 'Stack 2',
+        data: [
+          -4000, -2600, -5350, -4000, -7500, -2000,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[200],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[300],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Sales VS Refunds</h2>
+        <Tooltip className="ml-2" size="lg">
+          <div className="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
+        </Tooltip>
+      </header>
+      <div className="px-5 py-3">
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">+$6,796</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <BarChart data={chartData} width={595} height={248} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard09;

src/partials/dashboard/DashboardCard10.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+function DashboardCard10() {
+  return (
+    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Recent Activity</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Card content */}
+        {/* "Today" group */}
+        <div>
+          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Today</header>
+          <ul className="my-1">
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
+                <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>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a> mentioned <a className="font-medium text-slate-800" href="#0">Sara Smith</a> in a new post</div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
+                <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>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center">The post <a className="font-medium text-slate-800" href="#0">Post Name</a> was removed by <a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <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>
+              <div className="grow flex items-center text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Patrick Sullivan</a> published a new <a className="font-medium text-slate-800" href="#0">post</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        {/* "Yesterday" group */}
+        <div>
+          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Yesterday</header>
+          <ul className="my-1">
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-sky-500 my-2 mr-3">
+                <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>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">240+</a> users have subscribed to <a className="font-medium text-slate-800" href="#0">Newsletter #1</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
+                <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>
+              <div className="grow flex items-center text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center">The post <a className="font-medium text-slate-800" href="#0">Post Name</a> was suspended by <a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard10;

src/partials/dashboard/DashboardCard11.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+function DashboardCard11() {
+  return (
+    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Income/Expenses</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Card content */}
+        {/* "Today" group */}
+        <div>
+          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Today</header>
+          <ul className="my-1">
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
+                  <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Qonto</a> billing</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-slate-800">-$49.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-emerald-500">+249.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Notion Labs Inc</a></div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-emerald-500">+99.99</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Market Cap Ltd</a></div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-emerald-500">+1,200.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-slate-200 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
+                  <path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-slate-800 line-through">+$99.99</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
+                  <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-slate-800">-$49.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard11;

src/partials/dashboard/WelcomeBanner.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+function WelcomeBanner() {
+  return (
+    <div className="relative bg-indigo-200 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
+
+      {/* Background illustration */}
+      <div className="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true">
+        <svg width="319" height="198" xmlnsXlink="http://www.w3.org/1999/xlink">
+          <defs>
+            <path id="welcome-a" d="M64 0l64 128-64-20-64 20z" />
+            <path id="welcome-e" d="M40 0l40 80-40-12.5L0 80z" />
+            <path id="welcome-g" d="M40 0l40 80-40-12.5L0 80z" />
+            <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="welcome-b">
+              <stop stopColor="#A5B4FC" offset="0%" />
+              <stop stopColor="#818CF8" offset="100%" />
+            </linearGradient>
+            <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="welcome-c">
+              <stop stopColor="#4338CA" offset="0%" />
+              <stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
+            </linearGradient>
+          </defs>
+          <g fill="none" fillRule="evenodd">
+            <g transform="rotate(64 36.592 105.604)">
+              <mask id="welcome-d" fill="#fff">
+                <use xlinkHref="#welcome-a" />
+              </mask>
+              <use fill="url(#welcome-b)" xlinkHref="#welcome-a" />
+              <path fill="url(#welcome-c)" mask="url(#welcome-d)" d="M64-24h80v152H64z" />
+            </g>
+            <g transform="rotate(-51 91.324 -105.372)">
+              <mask id="welcome-f" fill="#fff">
+                <use xlinkHref="#welcome-e" />
+              </mask>
+              <use fill="url(#welcome-b)" xlinkHref="#welcome-e" />
+              <path fill="url(#welcome-c)" mask="url(#welcome-f)" d="M40.333-15.147h50v95h-50z" />
+            </g>
+            <g transform="rotate(44 61.546 392.623)">
+              <mask id="welcome-h" fill="#fff">
+                <use xlinkHref="#welcome-g" />
+              </mask>
+              <use fill="url(#welcome-b)" xlinkHref="#welcome-g" />
+              <path fill="url(#welcome-c)" mask="url(#welcome-h)" d="M40.333-15.147h50v95h-50z" />
+            </g>
+          </g>
+        </svg>
+      </div>
+
+      {/* Content */}
+      <div className="relative">
+        <h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
+        <p>Here is what’s happening with your projects today:</p>
+      </div>
+
+    </div>
+  );
+}
+
+export default WelcomeBanner;

src/partials/ecommerce/CartItems.jsx

@@ -0,0 +1,206 @@
+import React from 'react';
+
+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 CartItems() {
+  return (
+    <>
+      <ul>
+        {/* Cart item */}
+        <li className="sm:flex items-center py-6 border-b border-slate-200">
+          <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>
+            {/* Product meta */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* Rating and price */}
+              <div className="flex flex-wrap items-center space-x-2 mr-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>
+              <button className="text-sm underline hover:no-underline">Remove</button>
+            </div>
+          </div>
+        </li>
+        {/* Cart item */}
+        <li className="sm:flex items-center py-6 border-b border-slate-200">
+          <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>
+            {/* Product meta */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* Rating and price */}
+              <div className="flex flex-wrap items-center space-x-2 mr-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>
+              <button className="text-sm underline hover:no-underline">Remove</button>
+            </div>
+          </div>
+        </li>
+        {/* Cart item */}
+        <li className="sm:flex items-center py-6 border-b border-slate-200">
+          <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>
+            {/* Product meta */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* Rating and price */}
+              <div className="flex flex-wrap items-center space-x-2 mr-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>
+              <button className="text-sm underline hover:no-underline">Remove</button>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <div className="mt-6">
+        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">&lt;- Back To Shopping</a>
+      </div>
+    </>
+  );
+}
+
+export default CartItems;

src/partials/ecommerce/ShopCards01.jsx

@@ -0,0 +1,390 @@
+import React from 'react';
+
+import AppImage01 from '../../images/applications-image-01.jpg';
+import AppImage02 from '../../images/applications-image-02.jpg';
+import AppImage03 from '../../images/applications-image-03.jpg';
+import AppImage04 from '../../images/applications-image-04.jpg';
+
+function ShopCards01() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <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={AppImage01} width="286" height="160" alt="Application 01" />
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-3">
+                <h3 className="text-lg text-slate-800 font-semibold">HTML, CSS, JavaScript - Build 6 Creative Projects</h3>
+              </header>
+              {/* Rating and price */}
+              <div className="flex flex-wrap justify-between items-center mb-4">
+                {/* 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>
+                {/* 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>
+              {/* Features list */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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>23 hours on-demand video</div>
+                </li>
+                <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>37 articles</div>
+                </li>
+                <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>Access on mobile and TV</div>
+                </li>
+                <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>8K+ active installations</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <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={AppImage02} width="286" height="160" alt="Application 02" />
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-3">
+                <h3 className="text-lg text-slate-800 font-semibold">HTML, CSS, JavaScript - Build 6 Creative Projects</h3>
+              </header>
+              {/* Rating and price */}
+              <div className="flex flex-wrap justify-between items-center mb-4">
+                {/* 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">3.9</div>
+                </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">$49.00</div>
+                </div>
+              </div>
+              {/* Features list */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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>23 hours on-demand video</div>
+                </li>
+                <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>37 articles</div>
+                </li>
+                <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>Access on mobile and TV</div>
+                </li>
+                <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>8K+ active installations</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <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={AppImage03} width="286" height="160" alt="Application 03" />
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-3">
+                <h3 className="text-lg text-slate-800 font-semibold">HTML, CSS, JavaScript - Build 6 Creative Projects</h3>
+              </header>
+              {/* Rating and price */}
+              <div className="flex flex-wrap justify-between items-center mb-4">
+                {/* 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.6</div>
+                </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">$129.00</div>
+                </div>
+              </div>
+              {/* Features list */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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>23 hours on-demand video</div>
+                </li>
+                <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>37 articles</div>
+                </li>
+                <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>Access on mobile and TV</div>
+                </li>
+                <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>8K+ active installations</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <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={AppImage04} width="286" height="160" alt="Application 04" />
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-3">
+                <h3 className="text-lg text-slate-800 font-semibold">HTML, CSS, JavaScript - Build 6 Creative Projects</h3>
+              </header>
+              {/* Rating and price */}
+              <div className="flex flex-wrap justify-between items-center mb-4">
+                {/* 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.7</div>
+                </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">$129.00</div>
+                </div>
+              </div>
+              {/* Features list */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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>23 hours on-demand video</div>
+                </li>
+                <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>37 articles</div>
+                </li>
+                <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>Access on mobile and TV</div>
+                </li>
+                <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>8K+ active installations</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards01;

src/partials/ecommerce/ShopCards02.jsx

@@ -0,0 +1,191 @@
+import React from 'react';
+
+import AppImage05 from '../../images/applications-image-05.jpg';
+import AppImage06 from '../../images/applications-image-06.jpg';
+import AppImage07 from '../../images/applications-image-07.jpg';
+import AppImage08 from '../../images/applications-image-08.jpg';
+
+function ShopCards02() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage05} width="286" height="160" alt="Application 05" />
+            {/* Popular label */}
+            <div className="absolute top-0 right-0 mt-4 mr-4">
+              <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>Popular</span>
+              </div>
+            </div>
+          </div>
+          {/* 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">Form Builder CP</h3>
+                <div className="text-sm">Master Digital Marketing Strategy, Social Media Marketing, Analytics & More!</div>
+              </header>
+              {/* Rating and Price */}
+              <div className="flex flex-wrap items-center justify-between mb-5">
+                {/* Rating */}
+                <div className="flex items-center space-x-2 mr-2">
+                  <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>
+                  {/* Rate */}
+                  <div className="text-sm font-medium whitespace-nowrap">
+                    <span>4.7</span> <span className="text-slate-400">(478)</span>
+                  </div>
+                </div>
+                {/* Price */}
+                <div className="flex items-center space-x-2">
+                  <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>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage06} width="286" height="160" alt="Application 06" />
+          </div>
+          {/* 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">Form Builder CP</h3>
+                <div className="text-sm">Master Digital Marketing Strategy, Social Media Marketing, Analytics & More!</div>
+              </header>
+              {/* Rating and Price */}
+              <div className="flex flex-wrap items-center justify-between mb-5">
+                {/* Rating */}
+                <div className="flex items-center space-x-2 mr-2">
+                  <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>
+                  {/* Rate */}
+                  <div className="text-sm font-medium whitespace-nowrap">
+                    <span>4.7</span> <span className="text-slate-400">(478)</span>
+                  </div>
+                </div>
+                {/* Price */}
+                <div className="flex items-center space-x-2">
+                  <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>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage07} width="286" height="160" alt="Application 07" />
+          </div>
+          {/* 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">Form Builder CP</h3>
+                <div className="text-sm">Master Digital Marketing Strategy, Social Media Marketing, Analytics & More!</div>
+              </header>
+              {/* Rating and Price */}
+              <div className="flex flex-wrap items-center justify-between mb-5">
+                {/* Rating */}
+                <div className="flex items-center space-x-2 mr-2">
+                  <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>
+                  {/* Rate */}
+                  <div className="text-sm font-medium whitespace-nowrap">
+                    <span>4.7</span> <span className="text-slate-400">(478)</span>
+                  </div>
+                </div>
+                {/* Price */}
+                <div className="flex items-center space-x-2">
+                  <div className="inline-flex text-sm font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2 py-0.5">$39.00</div>
+                  <div className="inline-flex text-sm font-medium text-slate-500 line-through">$199.00</div>
+                </div>
+              </div>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage08} width="286" height="160" alt="Application 08" />
+          </div> {/* 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">Form Builder CP</h3>
+                <div className="text-sm">Master Digital Marketing Strategy, Social Media Marketing, Analytics & More!</div>
+              </header>
+              {/* Rating and Price */}
+              <div className="flex flex-wrap items-center justify-between mb-5">
+                {/* Rating */}
+                <div className="flex items-center space-x-2 mr-2">
+                  <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>
+                  {/* Rate */}
+                  <div className="text-sm font-medium whitespace-nowrap">
+                    <span>4.7</span> <span className="text-slate-400">(478)</span>
+                  </div>
+                </div>
+                {/* Price */}
+                <div className="flex items-center space-x-2">
+                  <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>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards02;

src/partials/ecommerce/ShopCards03.jsx

@@ -0,0 +1,206 @@
+import React from 'react';
+
+import AppImage09 from '../../images/applications-image-09.jpg';
+import AppImage10 from '../../images/applications-image-10.jpg';
+import AppImage11 from '../../images/applications-image-11.jpg';
+import AppImage12 from '../../images/applications-image-12.jpg';
+
+function ShopCards03() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage09} width="286" height="160" alt="Application 09" />
+            {/* 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>
+          </div>
+          {/* 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">Health and Happiness Workshop</h3>
+              </header>
+              {/* List */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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 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-rose-500">Fri 7 Aug 2021 23:00 CEST</div>
+                </li>
+                <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="M8 6c2.9 0 6-.9 6-3s-3.1-3-6-3-6 .9-6 3 3.1 3 6 3zM2 6.5V8c0 2.1 3.1 3 6 3s6-.9 6-3V6.5C12.6 7.4 10.5 8 8 8s-4.6-.6-6-1.5zM2 11.5V13c0 2.1 3.1 3 6 3s6-.9 6-3v-1.5c-1.4 1-3.5 1.5-6 1.5s-4.6-.6-6-1.5z" />
+                  </svg>
+                  <div>Starts at $16.24 / person</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Tickets</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage10} width="286" height="160" alt="Application 10" />
+            {/* 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>
+          </div>
+          {/* 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">Health and Happiness Workshop</h3>
+              </header>
+              {/* List */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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 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-rose-500">Fri 7 Aug 2021 23:00 CEST</div>
+                </li>
+                <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="M8 6c2.9 0 6-.9 6-3s-3.1-3-6-3-6 .9-6 3 3.1 3 6 3zM2 6.5V8c0 2.1 3.1 3 6 3s6-.9 6-3V6.5C12.6 7.4 10.5 8 8 8s-4.6-.6-6-1.5zM2 11.5V13c0 2.1 3.1 3 6 3s6-.9 6-3v-1.5c-1.4 1-3.5 1.5-6 1.5s-4.6-.6-6-1.5z" />
+                  </svg>
+                  <div>Starts at $16.24 / person</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Tickets</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage11} width="286" height="160" alt="Application 11" />
+            {/* 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>
+          </div>
+          {/* 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">Health and Happiness Workshop</h3>
+              </header>
+              {/* List */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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 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-rose-500">Fri 7 Aug 2021 23:00 CEST</div>
+                </li>
+                <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="M8 6c2.9 0 6-.9 6-3s-3.1-3-6-3-6 .9-6 3 3.1 3 6 3zM2 6.5V8c0 2.1 3.1 3 6 3s6-.9 6-3V6.5C12.6 7.4 10.5 8 8 8s-4.6-.6-6-1.5zM2 11.5V13c0 2.1 3.1 3 6 3s6-.9 6-3v-1.5c-1.4 1-3.5 1.5-6 1.5s-4.6-.6-6-1.5z" />
+                  </svg>
+                  <div>Starts at $16.24 / person</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Tickets</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage12} width="286" height="160" alt="Application 12" />
+            {/* 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>
+          </div>
+          {/* 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">Health and Happiness Workshop</h3>
+              </header>
+              {/* List */}
+              <ul className="text-sm space-y-2 mb-5">
+                <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 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-rose-500">Fri 7 Aug 2021 23:00 CEST</div>
+                </li>
+                <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="M8 6c2.9 0 6-.9 6-3s-3.1-3-6-3-6 .9-6 3 3.1 3 6 3zM2 6.5V8c0 2.1 3.1 3 6 3s6-.9 6-3V6.5C12.6 7.4 10.5 8 8 8s-4.6-.6-6-1.5zM2 11.5V13c0 2.1 3.1 3 6 3s6-.9 6-3v-1.5c-1.4 1-3.5 1.5-6 1.5s-4.6-.6-6-1.5z" />
+                  </svg>
+                  <div>Starts at $16.24 / person</div>
+                </li>
+              </ul>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Tickets</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards03;

src/partials/ecommerce/ShopCards04.jsx

@@ -0,0 +1,202 @@
+import React from 'react';
+
+import AppImage13 from '../../images/applications-image-13.jpg';
+import AppImage14 from '../../images/applications-image-14.jpg';
+import AppImage15 from '../../images/applications-image-15.jpg';
+import AppImage16 from '../../images/applications-image-16.jpg';
+
+function ShopCards04() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage13} width="286" height="160" alt="Application 13" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-4">
+                <a className="text-xs text-emerald-500 hover:text-emerald-600 font-semibold uppercase tracking-widest mb-1" href="#0">Funding</a>
+                <h3 className="text-lg text-slate-800 font-semibold mb-1">SwiftNight Home Plus</h3>
+                <div className="text-sm">Lorem ipsum is placeholder text commonly used.</div>
+              </header>
+              {/* Info */}
+              <div className="mb-5">
+                <div className="flex justify-between text-sm space-x-2 mb-2">
+                  <div><span className="font-semibold text-slate-800">$789,784</span> <span className="italic">raised</span></div>
+                  <div>64%</div>
+                </div>
+                {/* Bar */}
+                <div className="relative w-full h-2 rounded-full bg-slate-200 mb-2">
+                  <div className="absolute left-0 top-0 bottom-0 bg-emerald-500 rounded-full" style={{width: '55%'}}></div>
+                </div>
+                <div className="font-medium text-xs">30 Days Left</div>
+              </div>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Back It</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage14} width="286" height="160" alt="Application 14" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-4">
+                <a className="text-xs text-emerald-500 hover:text-emerald-600 font-semibold uppercase tracking-widest mb-1" href="#0">Funding</a>
+                <h3 className="text-lg text-slate-800 font-semibold mb-1">SwiftNight Home Plus</h3>
+                <div className="text-sm">Lorem ipsum is placeholder text commonly used.</div>
+              </header>
+              {/* Info */}
+              <div className="mb-5">
+                <div className="flex justify-between text-sm space-x-2 mb-2">
+                  <div><span className="font-semibold text-slate-800">$789,784</span> <span className="italic">raised</span></div>
+                  <div>64%</div>
+                </div>
+                {/* Bar */}
+                <div className="relative w-full h-2 rounded-full bg-slate-200 mb-2">
+                  <div className="absolute left-0 top-0 bottom-0 bg-emerald-500 rounded-full" style={{width: '55%'}}></div>
+                </div>
+                <div className="font-medium text-xs">30 Days Left</div>
+              </div>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Back It</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage15} width="286" height="160" alt="Application 15" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-4">
+                <a className="text-xs text-emerald-500 hover:text-emerald-600 font-semibold uppercase tracking-widest mb-1" href="#0">Funding</a>
+                <h3 className="text-lg text-slate-800 font-semibold mb-1">SwiftNight Home Plus</h3>
+                <div className="text-sm">Lorem ipsum is placeholder text commonly used.</div>
+              </header>
+              {/* Info */}
+              <div className="mb-5">
+                <div className="flex justify-between text-sm space-x-2 mb-2">
+                  <div><span className="font-semibold text-slate-800">$789,784</span> <span className="italic">raised</span></div>
+                  <div>64%</div>
+                </div>
+                {/* Bar */}
+                <div className="relative w-full h-2 rounded-full bg-slate-200 mb-2">
+                  <div className="absolute left-0 top-0 bottom-0 bg-emerald-500 rounded-full" style={{width: '55%'}}></div>
+                </div>
+                <div className="font-medium text-xs">30 Days Left</div>
+              </div>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Back It</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <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 */}
+          <div className="relative">
+            <img className="w-full" src={AppImage16} width="286" height="160" alt="Application 16" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              {/* Header */}
+              <header className="mb-4">
+                <a className="text-xs text-emerald-500 hover:text-emerald-600 font-semibold uppercase tracking-widest mb-1" href="#0">Funding</a>
+                <h3 className="text-lg text-slate-800 font-semibold mb-1">SwiftNight Home Plus</h3>
+                <div className="text-sm">Lorem ipsum is placeholder text commonly used.</div>
+              </header>
+              {/* Info */}
+              <div className="mb-5">
+                <div className="flex justify-between text-sm space-x-2 mb-2">
+                  <div><span className="font-semibold text-slate-800">$789,784</span> <span className="italic">raised</span></div>
+                  <div>64%</div>
+                </div>
+                {/* Bar */}
+                <div className="relative w-full h-2 rounded-full bg-slate-200 mb-2">
+                  <div className="absolute left-0 top-0 bottom-0 bg-emerald-500 rounded-full" style={{width: '55%'}}></div>
+                </div>
+                <div className="font-medium text-xs">30 Days Left</div>
+              </div>
+            </div>
+            {/* Card footer */}
+            <div>
+              <a className="btn-sm w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Back It</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards04;

src/partials/ecommerce/ShopCards05.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+function ShopCards05() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <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">
+              <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>
+            </div>
+            <h3 className="text-lg text-slate-800 font-semibold mb-1">Merchandise</h3>
+          </div>
+          <div>
+            <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <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">
+              <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>
+            </div>
+            <h3 className="text-lg text-slate-800 font-semibold mb-1">Audiobooks</h3>
+          </div>
+          <div>
+            <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <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">
+              <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
+                <path className="text-emerald-500" d="M3 .998h6a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z" />
+                <path className="text-emerald-400" d="M23.428 4.616L19.381.57a1.957 1.957 0 00-2.762 0l-4.047 4.046c-.76.765-.76 2 0 2.764l4.047 4.047c.764.76 1.998.76 2.762 0l4.047-4.046c.761-.764.761-2 0-2.765z" />
+                <path className="text-emerald-500" d="M15 12.998h6a2 2 0 012 2v6a2 2 0 01-2 2h-6a2 2 0 01-2-2v-6a2 2 0 012-2z" />
+                <path className="text-emerald-200" d="M3 12.998h6a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z" />
+              </svg>
+            </div>
+            <h3 className="text-lg text-slate-800 font-semibold mb-1">Design & Tech</h3>
+          </div>
+          <div>
+            <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <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">
+              <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>
+            </div>
+            <h3 className="text-lg text-slate-800 font-semibold mb-1">Apps & Software</h3>
+          </div>
+          <div>
+            <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards05;

src/partials/ecommerce/ShopCards06.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import AppImage17 from '../../images/applications-image-17.jpg';
+import AppImage18 from '../../images/applications-image-18.jpg';
+import AppImage19 from '../../images/applications-image-19.jpg';
+import AppImage20 from '../../images/applications-image-20.jpg';
+
+function ShopCards06() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <div className="relative col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <img className="absolute w-full h-full object-cover" src={AppImage17} width="286" height="160" alt="Application 17" />
+        {/* Gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-slate-800 to-transparent" aria-hidden="true"></div>
+        {/* Content */}
+        <div className="relative h-full p-5 flex flex-col justify-end">
+          <h3 className="text-lg text-white font-semibold mt-16 mb-0.5">Merchandise</h3>
+          <a className="text-sm font-medium text-indigo-400 hover:text-indigo-300" href="#0">Explore -&gt;</a>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <div className="relative col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <img className="absolute w-full h-full object-cover" src={AppImage18} width="286" height="160" alt="Application 18" />
+        {/* Gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-slate-800 to-transparent" aria-hidden="true"></div>
+        {/* Content */}
+        <div className="relative h-full p-5 flex flex-col justify-end">
+          <h3 className="text-lg text-white font-semibold mt-16 mb-0.5">Audiobooks</h3>
+          <a className="text-sm font-medium text-indigo-400 hover:text-indigo-300" href="#0">Explore -&gt;</a>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <div className="relative col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <img className="absolute w-full h-full object-cover" src={AppImage19} width="286" height="160" alt="Application 19" />
+        {/* Gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-slate-800 to-transparent" aria-hidden="true"></div>
+        {/* Content */}
+        <div className="relative h-full p-5 flex flex-col justify-end">
+          <h3 className="text-lg text-white font-semibold mt-16 mb-0.5">Design & Tech</h3>
+          <a className="text-sm font-medium text-indigo-400 hover:text-indigo-300" href="#0">Explore -&gt;</a>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <div className="relative col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        {/* Image */}
+        <img className="absolute w-full h-full object-cover" src={AppImage20} width="286" height="160" alt="Application 20" />
+        {/* Gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-slate-800 to-transparent" aria-hidden="true"></div>
+        {/* Content */}
+        <div className="relative h-full p-5 flex flex-col justify-end">
+          <h3 className="text-lg text-white font-semibold mt-16 mb-0.5">Apps & Software</h3>
+          <a className="text-sm font-medium text-indigo-400 hover:text-indigo-300" href="#0">Explore -&gt;</a>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards06;

src/partials/ecommerce/ShopCards07.jsx

@@ -0,0 +1,972 @@
+import React from 'react';
+
+import AppImage21 from '../../images/applications-image-21.jpg';
+import AppImage22 from '../../images/applications-image-22.jpg';
+import AppImage23 from '../../images/applications-image-23.jpg';
+import AppImage24 from '../../images/applications-image-24.jpg';
+import AppImage25 from '../../images/applications-image-25.jpg';
+import AppImage26 from '../../images/applications-image-26.jpg';
+import AppImage27 from '../../images/applications-image-27.jpg';
+import AppImage28 from '../../images/applications-image-28.jpg';
+import AppImage29 from '../../images/applications-image-29.jpg';
+import AppImage30 from '../../images/applications-image-30.jpg';
+import AppImage31 from '../../images/applications-image-31.jpg';
+import AppImage32 from '../../images/applications-image-32.jpg';
+
+function ShopCards07() {
+  return (
+    <React.Fragment>
+      {/* Card 1 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage21} width="301" height="226" alt="Application 21" />
+            {/* 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>
+            {/* Special Offer label */}
+            <div className="absolute bottom-0 right-0 mb-4 mr-4">
+              <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>
+            </div>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </div>
+              {/* Price */}
+              <div>
+                <div className="inline-flex text-sm font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2 py-0.5">$39.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 2 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage22} width="301" height="226" alt="Application 22" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 3 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage23} width="301" height="226" alt="Application 23" />
+            {/* 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>
+            {/* Special Offer label */}
+            <div className="absolute bottom-0 right-0 mb-4 mr-4">
+              <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>
+            </div>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </div>
+              {/* Price */}
+              <div>
+                <div className="inline-flex text-sm font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2 py-0.5">$39.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 4 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage24} width="301" height="226" alt="Application 24" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 5 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage25} width="301" height="226" alt="Application 25" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 6 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage26} width="301" height="226" alt="Application 26" />
+            {/* 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>
+            {/* Special Offer label */}
+            <div className="absolute bottom-0 right-0 mb-4 mr-4">
+              <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>
+            </div>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </div>
+              {/* Price */}
+              <div>
+                <div className="inline-flex text-sm font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2 py-0.5">$39.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 7 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage27} width="301" height="226" alt="Application 27" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 8 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage28} width="301" height="226" alt="Application 28" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 9 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage29} width="301" height="226" alt="Application 29" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* CTA */}
+      <div className="col-span-full md:order-1 xl:order-none">
+        <div className="h-full p-6 bg-slate-800 rounded-sm text-center xl:text-left xl:flex xl:justify-between xl:items-center">
+          <div className="mb-4 xl:mb-0 xl:mr-4">
+            <div className="text-xl text-slate-50 font-semibold mb-1">Excepteur sint occaecat <span className="text-indigo-500">cupidatat</span> 🎁</div>
+            <div className="m-auto text-sm text-slate-400">Excepteur sint occaecat cupidatat non proidentsunt in culpa qui officia deserunt mollit!</div>
+          </div>
+          <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white shrink-0">Reedem Now!</button>
+        </div>
+      </div>
+
+      {/* Card 10 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage30} width="301" height="226" alt="Application 30" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 11 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage31} width="301" height="226" alt="Application 31" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </div>
+              {/* Price */}
+              <div>
+                <div className="inline-flex text-sm font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2 py-0.5">$39.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Card 12 */}
+      <div className="col-span-full md:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* Image */}
+          <div className="relative">
+            <img className="w-full" src={AppImage32} width="301" height="226" alt="Application 32" />
+            {/* 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>
+          </div>
+          {/* Card Content */}
+          <div className="grow flex flex-col p-5">
+            {/* Card body */}
+            <div className="grow">
+              <header className="mb-2">
+                <a href="#0">
+                  <h3 className="text-lg text-slate-800 font-semibold mb-1">Form Builder CP</h3>
+                </a>
+                <div className="text-sm">Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod.</div>
+              </header>
+            </div>
+            {/* Rating and price */}
+            <div className="flex flex-wrap justify-between items-center">
+              {/* 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.7</div>
+              </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">$69.00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default ShopCards07;

src/partials/ecommerce/ShopSidebar.jsx

@@ -0,0 +1,181 @@
+import React from 'react';
+
+function ShopSidebar() {
+  return (
+    <div>
+      <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-5 min-w-60">
+        <div className="grid md:grid-cols-2 xl:grid-cols-1 gap-6">
+          {/* Group 1 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Discover</div>
+            <ul className="text-sm font-medium space-y-2">
+              <li>
+                <a className="text-indigo-500" href="#0">View All</a>
+              </li>
+              <li>
+                <a className="text-slate-600 hover:text-slate-700" href="#0">Apps / Software</a>
+              </li>
+              <li>
+                <a className="text-slate-600 hover:text-slate-700" href="#0">Design / Tech Products</a>
+              </li>
+              <li>
+                <a className="text-slate-600 hover:text-slate-700" href="#0">Books & Writing</a>
+              </li>
+              <li>
+                <a className="text-slate-600 hover:text-slate-700" href="#0">Education</a>
+              </li>
+              <li>
+                <a className="text-slate-600 hover:text-slate-700" href="#0">Drawing / Painting</a>
+              </li>
+            </ul>
+          </div>
+          {/* Price Range */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Price Range</div>
+            <label className="sr-only">Price</label>
+            <select className="form-select w-full">
+              <option>Less than $20</option>
+              <option>$20 - $40</option>
+              <option>$40 - $80</option>
+              <option>More than $80</option>
+            </select>
+          </div>
+          {/* Group 3 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Multi Select</div>
+            <ul className="space-y-2">
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Apps / Software</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Education</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Books & Writing</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Drawing / Painting</span>
+                </label>
+              </li>
+            </ul>
+          </div>
+          {/* Group 4 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Sort By Rating</div>
+            <ul className="space-y-2">
+              <li>
+                {/* Rating button */}
+                <button className="flex items-center space-x-2 mr-2">
+                  {/* Stars */}
+                  <div className="flex space-x-1">
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                  </div>
+                  <div className="inline-flex text-sm text-slate-500 italic"><span className="sr-only">4 Stars</span> And up</div>
+                </button>
+              </li>
+              <li>
+                {/* Rating button */}
+                <button className="flex items-center space-x-2 mr-2">
+                  {/* Stars */}
+                  <div className="flex space-x-1">
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                  </div>
+                  <div className="inline-flex text-sm text-slate-500 italic"><span className="sr-only">3 Stars</span> And up</div>
+                </button>
+              </li>
+              <li>
+                {/* Rating button */}
+                <button className="flex items-center space-x-2 mr-2">
+                  {/* Stars */}
+                  <div className="flex space-x-1">
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                  </div>
+                  <div className="inline-flex text-sm text-slate-500 italic"><span className="sr-only">2 Stars</span> And up</div>
+                </button>
+              </li>
+              <li>
+                {/* Rating button */}
+                <button className="flex items-center space-x-2 mr-2">
+                  {/* Stars */}
+                  <div className="flex space-x-1">
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                  </div>
+                  <div className="inline-flex text-sm text-slate-500 italic"><span className="sr-only">1 Stars</span> And up</div>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ShopSidebar;

src/partials/finance/TransactionPanel.jsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef } from 'react';
+
+import Image from '../../images/transactions-image-04.svg';
+
+function TransactionPanel({
+  transactionPanelOpen,
+  setTransactionPanelOpen
+}) {
+  
+  const closeBtn = useRef(null);
+  const panelContent = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!transactionPanelOpen || panelContent.current.contains(target) || closeBtn.current.contains(target)) return;
+      setTransactionPanelOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!transactionPanelOpen || keyCode !== 27) return;
+      setTransactionPanelOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div
+      ref={panelContent}
+      className={`absolute inset-0 sm:left-auto z-20 transform shadow-xl transition-transform duration-200 ease-in-out ${
+          transactionPanelOpen ? 'translate-x-' : 'translate-x-full'
+        }`}>
+      <div className="sticky top-16 bg-slate-50 overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-[calc(100vh-64px)]">
+        <button
+          ref={closeBtn}
+          onClick={() => setTransactionPanelOpen(false)}
+          className="absolute top-0 right-0 mt-6 mr-6 group p-2"
+        >
+          <svg className="w-4 h-4 fill-slate-400 group-hover:fill-slate-600 pointer-events-none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="m7.95 6.536 4.242-4.243a1 1 0 1 1 1.415 1.414L9.364 7.95l4.243 4.242a1 1 0 1 1-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 0 1-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 0 1 1.414-1.414L7.95 6.536Z" />
+          </svg>
+        </button>
+        <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-1">Bank Transfer</div>
+            <div className="text-sm text-center italic">22/01/2022, 8:56 PM</div>
+            {/* Details */}
+            <div className="drop-shadow-lg mt-12">
+              {/* Top */}
+              <div className="bg-white rounded-t-xl px-5 pb-2.5 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="text-2xl font-semibold text-emerald-500 mb-1">+$2,179.36</div>
+                <div className="text-sm font-medium text-slate-800 mb-3">Acme LTD UK</div>
+                <div className="text-xs inline-flex font-medium bg-slate-100 text-slate-500 rounded-full text-center px-2.5 py-1">Pending</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-2.5 text-sm space-y-3">
+                <div className="flex justify-between space-x-1">
+                  <span className="italic">IBAN:</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">BIC:</span>
+                  <span className="font-medium text-slate-700 text-right">BARIT22</span>
+                </div>
+                <div className="flex justify-between space-x-1">
+                  <span className="italic">Reference:</span>
+                  <span className="font-medium text-slate-700 text-right">Freelance Work</span>
+                </div>
+                <div className="flex justify-between space-x-1">
+                  <span className="italic">Emitter:</span>
+                  <span className="font-medium text-slate-700 text-right">Acme LTD UK</span>
+                </div>
+              </div>
+            </div>
+            {/* Receipts */}
+            <div className="mt-6">
+              <div className="text-sm font-semibold text-slate-800 mb-2">Receipts</div>
+              <form className="rounded bg-slate-100 border border-dashed border-slate-300 text-center px-5 py-8">
+                <svg className="inline-flex w-4 h-4 fill-slate-400 mb-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
+                </svg>
+                <label htmlFor="upload" className="block text-sm text-slate-500 italic">We accept PNG, JPEG, and PDF files.</label>
+                <input className="sr-only" id="upload" type="file" />
+              </form>
+            </div>
+            {/* Notes */}
+            <div className="mt-6">
+              <div className="text-sm font-semibold text-slate-800 mb-2">Notes</div>
+              <form>
+                <label className="sr-only" htmlFor="notes">Write a note</label>
+                <textarea id="notes" className="form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
+              </form>
+            </div>
+            {/* Download / Report */}
+            <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-400 shrink-0 rotate-180" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
+                  </svg>
+                  <span className="ml-2">Download</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="M7.001 3h2v4h-2V3Zm1 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM15 16a1 1 0 0 1-.6-.2L10.667 13H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1ZM2 11h9a1 1 0 0 1 .6.2L14 13V2H2v9Z" />
+                  </svg>
+                  <span className="ml-2">Report</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TransactionPanel;

src/partials/finance/TransactionsTable.jsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import TransactionItem from './TransactionsTableItem';
+
+import Image01 from '../../images/transactions-image-01.svg';
+import Image02 from '../../images/transactions-image-02.svg';
+import Image03 from '../../images/user-36-05.jpg';
+import Image04 from '../../images/transactions-image-03.svg';
+import Image05 from '../../images/transactions-image-04.svg';
+import Image06 from '../../images/transactions-image-05.svg';
+import Image07 from '../../images/transactions-image-06.svg';
+import Image08 from '../../images/transactions-image-07.svg';
+import Image09 from '../../images/transactions-image-08.svg';
+
+function TransactionsTable({
+  selectedItems
+}) {
+
+  const transactions = [
+    {
+      id: '0',
+      image: Image01,
+      name: 'Form Builder CP',
+      date: '22/01/2022',
+      status: 'Pending',
+      amount: '-$1,299.22',
+    },
+    {
+      id: '1',
+      image: Image02,
+      name: 'Imperial Hotel ****',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$1,029.77',
+    },
+    {
+      id: '2',
+      image: Image03,
+      name: 'Aprilynne Pills',
+      date: '22/01/2022',
+      status: 'Pending',
+      amount: '+$499.99',
+    },
+    {
+      id: '3',
+      image: Image04,
+      name: 'Google Limited UK',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$1,029.77',
+    },
+    {
+      id: '4',
+      image: Image05,
+      name: 'Acme LTD UK',
+      date: '22/01/2022',
+      status: 'Pending',
+      amount: '+$2,179.36',
+    },
+    {
+      id: '5',
+      image: Image04,
+      name: 'Google Limited UK',
+      date: '22/01/2022',
+      status: 'Canceled',
+      amount: '-$1,029.77',
+    },
+    {
+      id: '6',
+      image: Image06,
+      name: 'Uber',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$272.88',
+    },
+    {
+      id: '7',
+      image: Image07,
+      name: 'PublicOne Inc.',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$199.87',
+    },
+    {
+      id: '8',
+      image: Image08,
+      name: 'Github Inc.',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$42.87',
+    },
+    {
+      id: '9',
+      image: Image09,
+      name: 'Form Builder PRO',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$112.44',
+    },
+  ];
+
+  const [selectAll, setSelectAll] = useState(false);
+  const [isCheck, setIsCheck] = useState([]);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    setList(transactions);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    setIsCheck(list.map(li => li.id));
+    if (selectAll) {
+      setIsCheck([]);
+    }
+  };
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setSelectAll(false);
+    setIsCheck([...isCheck, id]);
+    if (!checked) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
+
+  useEffect(() => {
+    selectedItems(isCheck);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  return (
+    <div className="bg-white">
+      <div>
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs font-semibold uppercase text-slate-500 border-t border-b border-slate-200">
+              <tr>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                  <div className="flex items-center">
+                    <label className="inline-flex">
+                      <span className="sr-only">Select all</span>
+                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
+                    </label>
+                  </div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Counterparty</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Payment Date</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Status</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-right">Amount</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
+              {list.map((transaction) => {
+                return (
+                  <TransactionItem
+                    key={transaction.id}
+                    id={transaction.id}
+                    image={transaction.image}
+                    name={transaction.name}
+                    date={transaction.date}
+                    status={transaction.status}
+                    amount={transaction.amount}
+                    handleClick={handleClick}
+                    isChecked={isCheck.includes(transaction.id)}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TransactionsTable;

src/partials/finance/TransactionsTable02.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import TransactionItem from './TransactionsTableItem02';
+
+import Image01 from '../../images/transactions-image-01.svg';
+import Image02 from '../../images/transactions-image-02.svg';
+import Image03 from '../../images/user-36-05.jpg';
+import Image04 from '../../images/transactions-image-03.svg';
+import Image05 from '../../images/transactions-image-04.svg';
+import Image06 from '../../images/transactions-image-05.svg';
+import Image07 from '../../images/transactions-image-06.svg';
+import Image08 from '../../images/transactions-image-07.svg';
+import Image09 from '../../images/transactions-image-08.svg';
+
+function TransactionsTable02({
+  selectedItems,
+  setTransactionPanelOpen
+}) {
+
+  const transactions = [
+    {
+      id: '0',
+      image: Image01,
+      name: 'Form Builder CP',
+      date: '22/01/2022',
+      status: 'Pending',
+      amount: '-$1,299.22',
+    },
+    {
+      id: '1',
+      image: Image02,
+      name: 'Imperial Hotel ****',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$1,029.77',
+    },
+    {
+      id: '2',
+      image: Image03,
+      name: 'Aprilynne Pills',
+      date: '22/01/2022',
+      status: 'Pending',
+      amount: '+$499.99',
+    },
+    {
+      id: '3',
+      image: Image04,
+      name: 'Google Limited UK',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$1,029.77',
+    },
+    {
+      id: '4',
+      image: Image05,
+      name: 'Acme LTD UK',
+      date: '22/01/2022',
+      status: 'Pending',
+      amount: '+$2,179.36',
+    },
+    {
+      id: '5',
+      image: Image04,
+      name: 'Google Limited UK',
+      date: '22/01/2022',
+      status: 'Canceled',
+      amount: '-$1,029.77',
+    },
+    {
+      id: '6',
+      image: Image06,
+      name: 'Uber',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$272.88',
+    },
+    {
+      id: '7',
+      image: Image07,
+      name: 'PublicOne Inc.',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$199.87',
+    },
+    {
+      id: '8',
+      image: Image08,
+      name: 'Github Inc.',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$42.87',
+    },
+    {
+      id: '9',
+      image: Image09,
+      name: 'Form Builder PRO',
+      date: '22/01/2022',
+      status: 'Completed',
+      amount: '-$112.44',
+    },
+  ];
+
+  const [selectAll, setSelectAll] = useState(false);
+  const [isCheck, setIsCheck] = useState([]);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    setList(transactions);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    setIsCheck(list.map(li => li.id));
+    if (selectAll) {
+      setIsCheck([]);
+    }
+  };
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setSelectAll(false);
+    setIsCheck([...isCheck, id]);
+    if (!checked) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
+
+  useEffect(() => {
+    selectedItems(isCheck);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  return (
+    <div className="bg-white">
+      <div>
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs font-semibold uppercase text-slate-500 border-t border-b border-slate-200">
+              <tr>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                  <div className="flex items-center">
+                    <label className="inline-flex">
+                      <span className="sr-only">Select all</span>
+                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
+                    </label>
+                  </div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Counterparty</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Payment Date</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Status</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-right">Amount</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
+              {list.map((transaction) => {
+                return (
+                  <TransactionItem
+                    key={transaction.id}
+                    id={transaction.id}
+                    image={transaction.image}
+                    name={transaction.name}
+                    date={transaction.date}
+                    status={transaction.status}
+                    amount={transaction.amount}
+                    handleClick={handleClick}
+                    isChecked={isCheck.includes(transaction.id)}
+                    setTransactionPanelOpen={setTransactionPanelOpen}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TransactionsTable02;

src/partials/finance/TransactionsTableItem.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+function TransactionsTableItem(props) {
+
+  const statusColor = (status) => {
+    switch (status) {
+      case 'Completed':
+        return 'bg-emerald-100 text-emerald-600';
+      case 'Canceled':
+        return 'bg-rose-100 text-rose-500';
+      default:
+        return 'bg-slate-100 text-slate-500';
+    }
+  };
+
+  const amountColor = (amount) => {
+    switch (amount.charAt(0)) {
+      case '+':
+        return 'text-emerald-500';
+      default:
+        return 'text-slate-700';
+    }
+  };
+
+  return (
+    <tr>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="flex items-center">
+          <label className="inline-flex">
+            <span className="sr-only">Select</span>
+            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+          </label>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap md:w-1/2">
+        <div className="flex items-center">
+          <div className="w-9 h-9 shrink-0 mr-2 sm:mr-3">
+            <img className="rounded-full" src={props.image} width="36" height="36" alt={props.name} />
+          </div>
+          <div className="font-medium text-slate-800">{props.name}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left">{props.date}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left">
+          <div className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor(props.status)}`}>{props.status}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className={`text-right font-medium ${amountColor(props.amount)}`}>{props.amount}</div>
+      </td>
+    </tr>
+  );
+}
+
+export default TransactionsTableItem;

src/partials/finance/TransactionsTableItem02.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+function TransactionsTableItem(props) {
+
+  const statusColor = (status) => {
+    switch (status) {
+      case 'Completed':
+        return 'bg-emerald-100 text-emerald-600';
+      case 'Canceled':
+        return 'bg-rose-100 text-rose-500';
+      default:
+        return 'bg-slate-100 text-slate-500';
+    }
+  };
+
+  const amountColor = (amount) => {
+    switch (amount.charAt(0)) {
+      case '+':
+        return 'text-emerald-500';
+      default:
+        return 'text-slate-700';
+    }
+  };
+
+  return (
+    <tr className="cursor-pointer" onClick={(e) => { e.stopPropagation(); props.setTransactionPanelOpen(true); }}>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="flex items-center">
+          <label className="inline-flex">
+            <span className="sr-only">Select</span>
+            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked}  onClick={(e) => e.stopPropagation()} />
+          </label>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap md:w-1/2">
+        <div className="flex items-center">
+          <div className="w-9 h-9 shrink-0 mr-2 sm:mr-3">
+            <img className="rounded-full" src={props.image} width="36" height="36" alt={props.name} />
+          </div>
+          <div className="font-medium text-slate-800">{props.name}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left">{props.date}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="text-left">
+          <div className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor(props.status)}`}>{props.status}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className={`text-right font-medium ${amountColor(props.amount)}`}>{props.amount}</div>
+      </td>
+    </tr>
+  );
+}
+
+export default TransactionsTableItem;

src/partials/fintech/FintechCard01.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart05';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard01() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023', '02-01-2023',
+      '03-01-2023', '04-01-2023', '05-01-2023',
+      '06-01-2023', '07-01-2023', '08-01-2023',
+      '09-01-2023', '10-01-2023', '11-01-2023',
+      '12-01-2023', '01-01-2024', '02-01-2024',
+      '03-01-2024', '04-01-2024',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        label: 'Mosaic Portfolio',
+        data: [
+          0, 2.5, 2.5, 4, 2.5, 3.8, 5, 9, 7.5, 11,
+          14, 15, 17, 15, 14, 9, 15, 26, 16, 18,
+          15, 20, 18, 19, 19, 24, 29, 26, 39, 27,
+          35, 32, 29, 35, 36, 34, 39, 36, 41, 41,
+          48,
+        ],
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Yellow line
+      {
+        label: 'Expected Return',
+        data: [
+          0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
+          10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+          20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
+          30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
+          40,
+        ],
+        borderColor: tailwindConfig().theme.colors.yellow[400],
+        borderDash: [4, 4],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.yellow[400],
+        clip: 20,
+      },
+      // gray line
+      {
+        label: 'Competitors',
+        data: [
+          0.7, 3.5, 4.5, 3.5, 4.2, 4.6, 6, 7, 6, 6,
+          11, 13, 14, 18, 17, 15, 13, 16, 20, 21,
+          24, 22, 20, 22, 25, 18, 21, 23, 24, 32,
+          28, 29, 35, 37, 42, 32, 32, 33, 33, 37,
+          32,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Portfolio Returns</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <LineChart data={chartData} width={800} height={300} />
+    </div>
+  );
+}
+
+export default FintechCard01;

src/partials/fintech/FintechCard02.jsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import EditMenu from '../../components/DropdownEditMenu';
+
+function FintechCard02() {
+  return (
+    <div className="flex flex-col col-span-full xl:col-span-4 bg-gradient-to-b from-slate-700 to-slate-800 shadow-lg rounded-sm border border-slate-800">
+      <header className="px-5 py-4 border-b border-slate-600 flex items-center">
+        <h2 className="font-semibold text-slate-200">Active Cards</h2>
+      </header>
+      <div className="h-full flex flex-col px-5 py-6">
+        {/* CC container */}
+        <div className="relative w-full max-w-sm mx-auto bg-slate-800 p-3 rounded-2xl">
+          {/* Credit Card */}
+          <div className="relative aspect-[7/4] bg-gradient-to-tr from-indigo-500 to-indigo-400 p-5 rounded-xl overflow-hidden">
+            {/* Gradients */}
+            <div className="absolute left-0 -bottom-1/3 w-[398px] aspect-square" aria-hidden="true">
+              <svg className="w-full h-full" width="398" height="392" viewBox="0 0 398 392" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                  <filter x="-88.2%" y="-88.2%" width="276.5%" height="276.5%" filterUnits="objectBoundingBox" id="glow-a">
+                    <feGaussianBlur stdDeviation="50" in="SourceGraphic" />
+                  </filter>
+                </defs>
+                <circle className="fill-indigo-100 opacity-60" filter="url(#glow-a)" cx="85" cy="85" r="85" transform="translate(0 216)" />
+              </svg>
+            </div>
+            <div className="absolute right-0 -top-1/3 w-[398px] aspect-square" aria-hidden="true">
+              <svg className="w-full h-full" width="398" height="392" viewBox="0 0 398 392" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                  <filter x="-88.2%" y="-88.2%" width="276.5%" height="276.5%" filterUnits="objectBoundingBox" id="glow-b">
+                    <feGaussianBlur stdDeviation="50" in="SourceGraphic" />
+                  </filter>
+                </defs>
+                <circle className="fill-sky-400 opacity-60" filter="url(#glow-b)" cx="85" cy="85" r="85" transform="translate(228 0)" />
+              </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="#A5B4FC" offset="0%" />
+                    <stop stopColor="#E0E7FF" offset="100%" />
+                  </linearGradient>
+                  <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="icon1-c">
+                    <stop stopColor="#4338CA" offset="0%" />
+                    <stop stopColor="#6366F1" 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>
+          {/* Options button */}
+          <EditMenu align="right" className="absolute top-0 right-0 inline-flex">
+            <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>
+        </div>
+        {/* Details */}
+        <div className="grow flex flex-col justify-center mt-3">
+          <div className="text-xs text-slate-500 font-semibold uppercase mb-3">Details</div>
+          <div className="space-y-2">
+            <div>
+              <div className="flex justify-between text-sm mb-2">
+                <div className="text-slate-300">Payment Limits</div>
+                <div className="text-slate-400 italic">
+                  $780,00 <span className="text-slate-500">/</span> $1,500.00
+                </div>
+              </div>
+              <div className="relative w-full h-2 bg-slate-600">
+                <div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '50%' }} />
+              </div>
+            </div>
+            <div>
+              <div className="flex justify-between text-sm mb-2">
+                <div className="text-slate-300">ATM Limits</div>
+                <div className="text-slate-400 italic">
+                  $179,00 <span className="text-slate-500">/</span> $1,000.00
+                </div>
+              </div>
+              <div className="relative w-full h-2 bg-slate-600">
+                <div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '35%' }} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard02;

src/partials/fintech/FintechCard03.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import BarChart from '../../charts/BarChart05';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function FintechCard03() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021'
+    ],
+    datasets: [
+      // Indigo bars
+      {
+        label: 'Inflow',
+        data: [800, 2600, 4000, 1200, 3200, 1700],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Grey bars
+      {
+        label: 'Outflow',
+        data: [2800, 1700, 900, 2900, 1950, 3100],
+        backgroundColor: tailwindConfig().theme.colors.slate[300],
+        hoverBackgroundColor: tailwindConfig().theme.colors.slate[400],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Cash Flow</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <BarChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default FintechCard03;

src/partials/fintech/FintechCard04.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import BarChart from '../../charts/BarChart06';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function FintechCard04() {
+
+  const chartData = {
+    labels: [
+      '02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Indigo bars
+      {
+        label: 'Inflow',
+        data: [
+          4100, 1900, 2700, 3900,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        categoryPercentage: 0.66,
+      },
+      // Gray bars
+      {
+        label: 'Outflow',
+        data: [
+          2000, 1000, 1100, 2600,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.slate[300],
+        hoverBackgroundColor: tailwindConfig().theme.colors.slate[400],
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Cash Flow by Account</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <BarChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default FintechCard04;

src/partials/fintech/FintechCard05.jsx

@@ -0,0 +1,155 @@
+import React from 'react';
+
+function FintechCard05() {
+  return (
+    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Recent Expenses</h2>
+      </header>
+      <div className="p-3">
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
+              <tr>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Counterparty</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Account</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Date</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-right">Amount</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-100">
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
+                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                        <path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Form Builder CP</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Revolut</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-slate-800 text-right">-$1,299.22</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-slate-900">
+                      <svg className="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
+                        <path d="M12.014 25.752v-4.998c.196.42.495.749.896.987s.877.357 1.428.357a3.08 3.08 0 0 0 1.694-.483c.504-.322.9-.789 1.19-1.4.29-.611.434-1.328.434-2.149s-.145-1.535-.434-2.142c-.29-.607-.686-1.071-1.19-1.393a3.08 3.08 0 0 0-1.694-.483c-.55 0-1.027.119-1.428.357a2.21 2.21 0 0 0-.896.987v-1.246H9.256v11.606h2.758Zm1.414-6.062a1.34 1.34 0 0 1-1.022-.434c-.27-.29-.406-.686-.406-1.19 0-.495.135-.887.406-1.176a1.34 1.34 0 0 1 1.022-.434c.43 0 .777.142 1.043.427.266.285.399.679.399 1.183 0 .513-.133.912-.399 1.197-.266.285-.614.427-1.043.427Zm10.108 2.408c.924 0 1.771-.217 2.541-.651a4.8 4.8 0 0 0 1.827-1.813c.448-.775.672-1.647.672-2.618 0-.97-.222-1.843-.665-2.618a4.75 4.75 0 0 0-1.82-1.813 5.113 5.113 0 0 0-2.555-.651c-.924 0-1.773.217-2.548.651a4.786 4.786 0 0 0-1.834 1.813c-.448.775-.672 1.647-.672 2.618 0 .97.224 1.843.672 2.618a4.786 4.786 0 0 0 1.834 1.813 5.125 5.125 0 0 0 2.548.651Zm0-2.562c-.7 0-1.25-.229-1.652-.686-.401-.457-.602-1.069-.602-1.834 0-.784.2-1.402.602-1.855.401-.453.952-.679 1.652-.679s1.248.226 1.645.679c.397.453.595 1.071.595 1.855 0 .765-.2 1.377-.602 1.834-.401.457-.947.686-1.638.686Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">PublicOne Inc.</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Qonto</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-slate-800 text-right">-$272.88</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-emerald-500">
+                      <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                        <path d="M15 17h-3v-5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v5h-3v-2.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0-.5.5V17Zm10 2a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-1H12v1a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1h14Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Imperial Hotel ****</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Revolut</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-slate-800 text-right">-$999.44</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-sky-500">
+                      <svg className="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
+                        <path d="m26.3 16.1-2.6-.9-1.8-4.6c-.1-.4-.5-.6-.9-.6h-9c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3.3c.6 1.2 1.8 2 3.2 2 1.4 0 2.6-.8 3.2-2.1.1 0 .2.1.3.1h4c.6 0 1-.4 1-1v-6c0-.4-.3-.8-.7-.9ZM25 22h-3c-.2-1.7-1.7-3-3.5-3s-3.2 1.3-3.4 3H13V12h7.3l1.7 4.4c.1.3.3.5.6.6l2.4.7V22Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Uber</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>N26</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-slate-800 text-right">-$1,029.77</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-[#EA4335]">
+                      <svg className="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
+                        <path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Google Limited UK</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>N26</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-slate-800 text-right">-$1,921.26</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="text-center border-t border-slate-100 px-2">
+          <a className="block text-sm font-medium text-indigo-500 hover:text-indigo-600 pt-4 pb-1" href="#0">
+            View All -&gt;
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard05;

src/partials/fintech/FintechCard06.jsx

@@ -0,0 +1,155 @@
+import React from 'react';
+
+import UserImage from '../../images/user-36-05.jpg';
+
+function FintechCard06() {
+  return (
+    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Recent Earnings</h2>
+      </header>
+      <div className="p-3">
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
+              <tr>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Counterparty</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Account</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Date</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-right">Amount</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-100">
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-sky-500">
+                      <svg className="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
+                        <path d="M18 26a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8Zm0-14a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Acme LTD UK</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Revolut</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-emerald-500 text-right">+$1,299.22</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
+                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                        <path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Web.com</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Qonto</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-emerald-500 text-right">+$1,200.88</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-[#24292E]">
+                      <svg className="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
+                        <path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Github Inc.</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>N26</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-emerald-500 text-right">+$499.99</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3">
+                      <img className="w-9 h-9 rounded-full" src={UserImage} width="36" height="36" alt="User 05" />
+                    </div>
+                    <div className="font-medium text-slate-800">Aprilynne Pills</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Revolut</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-emerald-500 text-right">+$2,179.36</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-rose-500">
+                      <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
+                        <path d="M18 21a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm-4.95 3.363-.707-.707a8 8 0 0 1 0-11.312l.707-.707 1.414 1.414-.707.707a6 6 0 0 0 0 8.484l.707.707-1.414 1.414Zm9.9 0-1.414-1.414.707-.707a6 6 0 0 0 0-8.484l-.707-.707 1.414-1.414.707.707a8 8 0 0 1 0 11.312l-.707.707Z" />
+                      </svg>
+                    </div>
+                    <div className="font-medium text-slate-800">Form Builder PRO</div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>Revolut</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div>22/01/2022</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-medium text-emerald-500 text-right">+$249.88</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="text-center border-t border-slate-100 px-2">
+          <a className="block text-sm font-medium text-indigo-500 hover:text-indigo-600 pt-4 pb-1" href="#0">
+            View All -&gt;
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard06;

src/partials/fintech/FintechCard07.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart06';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard07() {
+
+  const chartData = {
+    labels: [
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023', '02-01-2023',
+      '03-01-2023', '04-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        label: 'Mosaic Portfolio',
+        data: [
+          1500, 2000, 1800, 1900, 1900, 2400, 2900, 2600, 3900, 2700,
+          3500, 3200, 2900, 3500, 3600, 3400, 3900, 3600, 4100, 4100,
+        ],
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        label: 'Expected Return',
+        data: [
+          2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900,
+          3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-12 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Portfolio Returns</h2>
+      </header>
+      <div className="px-5 py-3">
+        <div className="text-sm italic mb-2">Hey Mark, you're very close to your goal:</div>
+        <div className="flex items-center">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$5,247.09</div>
+          <div className="text-sm"><span className="font-medium text-amber-500">97.4%</span></div>
+        </div>
+        <div className="text-sm text-slate-500">Out of $6,000</div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={262} />
+      </div>      
+    </div>
+  );
+}
+
+export default FintechCard07;

src/partials/fintech/FintechCard08.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart07';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard08() {
+
+  const chartData = {
+    labels: ['2010', 'Age 65'],
+    datasets: [
+      // Dark green line
+      {
+        label: 'Growth 1',
+        data: [0, 3500000],
+        borderColor: tailwindConfig().theme.colors.emerald[500],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
+        clip: 20,
+      },
+      // Light green line
+      {
+        label: 'Growth 2',
+        data: [0, 2000000],
+        borderColor: tailwindConfig().theme.colors.emerald[200],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[200],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-12 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Growth Portfolio</h2>
+      </header>
+      <div className="px-5 py-3">
+        <div className="text-sm italic mb-2">Hey Mark, by age 65 you could have:</div>
+        <div className="text-3xl font-bold text-slate-800">$2M - $3.5M</div>
+        <div className="text-sm text-slate-500">Risk level 8</div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={262} />
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard08;

src/partials/fintech/FintechCard09.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PieChart from '../../charts/PieChart';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function FintechCard09() {
+  
+  const chartData = {
+    labels: ['Cash', 'Commodities', 'Bonds', 'Stock'],
+    datasets: [
+      {
+        label: 'Sessions By Device',
+        data: [12, 13, 10, 65],
+        backgroundColor: [
+          tailwindConfig().theme.colors.emerald[400],
+          tailwindConfig().theme.colors.yellow[400],
+          tailwindConfig().theme.colors.sky[400],
+          tailwindConfig().theme.colors.indigo[500],
+        ],
+        hoverBackgroundColor: [
+          tailwindConfig().theme.colors.emerald[500],
+          tailwindConfig().theme.colors.yellow[500],
+          tailwindConfig().theme.colors.sky[500],
+          tailwindConfig().theme.colors.indigo[600],
+        ],
+        borderWidth: 0,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Portfolio Value</h2>
+      </header>
+      <div className="px-5 py-3">
+        <div className="text-sm italic mb-2">Hey Mark, here is the value of your portfolio:</div>
+        <div className="text-3xl font-bold text-slate-800">$224,807.27</div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <PieChart data={chartData} width={389} height={220} />
+    </div>
+  );
+}
+
+export default FintechCard09;

src/partials/fintech/FintechCard10.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart08';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard10() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Line
+      {
+        data: [
+          732, 610, 610, 504, 504, 504, 349,
+          349, 504, 342, 504, 610, 391, 192,
+          154, 273, 191, 191, 126, 263, 349,
+          252, 323, 322, 270, 232,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.rose[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.rose[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.rose[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header>
+          <h3 className="text-sm font-semibold text-slate-500 uppercase mb-1">
+            <span className="text-slate-800">Google</span> - Alphabet
+          </h3>
+          <div className="text-2xl font-bold text-slate-800 mb-1">$2,860.96</div>
+          <div className="text-sm">
+            <span className="font-medium text-red-500">-$49 (4,7%)</span> - Today
+          </div>
+        </header>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={286} height={98} />
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard10;

src/partials/fintech/FintechCard11.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart08';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard11() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Line
+      {
+        data: [
+          222, 222, 226, 271, 365, 365, 238,
+          324, 288, 206, 324, 324, 500, 409,
+          409, 273, 232, 273, 500, 570, 767,
+          808, 685, 767, 685, 685,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.emerald[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header>
+          <h3 className="text-sm font-semibold text-slate-500 uppercase mb-1">
+            <span className="text-slate-800">Amzn</span> - Amazon Inc.
+          </h3>
+          <div className="text-2xl font-bold text-slate-800 mb-1">$3,400.35</div>
+          <div className="text-sm">
+            <span className="font-medium text-emerald-500">+$142 (3,7%)</span> - Today
+          </div>
+        </header>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={286} height={98} />
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard11;

src/partials/fintech/FintechCard12.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart08';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard12() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Line
+      {
+        data: [
+          540, 466, 540, 466, 385, 432, 334,
+          334, 289, 289, 200, 289, 222, 289,
+          289, 403, 554, 304, 289, 270, 134,
+          270, 829, 644, 688, 664,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.emerald[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header>
+          <h3 className="text-xs font-semibold text-slate-500 uppercase mb-1">
+            <span className="text-slate-800">Twtr</span> - Twitter Inc.
+          </h3>
+          <div className="text-2xl font-bold text-slate-800 mb-1">$43.07</div>
+          <div className="text-sm">
+            <span className="font-medium text-emerald-500">+$4,20 (9,2%)</span> - Today
+          </div>
+        </header>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={286} height={98} />
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard12;

src/partials/fintech/FintechCard13.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart08';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function FintechCard13() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Line
+      {
+        data: [
+          245, 288, 332, 404, 404, 314, 314,
+          314, 314, 314, 234, 314, 234, 234,
+          314, 314, 314, 388, 314, 202, 202,
+          202, 202, 514, 720, 642,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.emerald[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header>
+          <h3 className="text-sm font-semibold text-slate-500 uppercase mb-1">
+            <span className="text-slate-800">Facebook</span> - Meta Inc.
+          </h3>
+          <div className="text-2xl font-bold text-slate-800 mb-1">$333.79</div>
+          <div className="text-sm">
+            <span className="font-medium text-emerald-500">+$19,70 (4%)</span> - Today
+          </div>
+        </header>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={286} height={98} />
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard13;

src/partials/fintech/FintechCard14.jsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart09';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function FintechCard14() {
+
+  const miniCharts = [
+    // Twitter
+    {
+      data: [
+        540, 466, 540, 466, 385, 432, 334,
+        334, 289, 289, 200, 289, 222, 289,
+        289, 403, 554, 304, 289, 270, 134,
+        270, 829, 644, 688, 664,
+      ],
+      growth: true,
+    },
+    // Facebook
+    {
+      data: [
+        245, 288, 332, 404, 404, 314, 314,
+        314, 314, 314, 234, 314, 234, 234,
+        314, 314, 314, 388, 314, 202, 202,
+        202, 202, 514, 720, 642,
+      ],
+      growth: true,
+    },
+    // Google
+    {
+      data: [
+        732, 610, 610, 504, 504, 504, 349,
+        349, 504, 342, 504, 610, 391, 192,
+        154, 273, 191, 191, 126, 263, 349,
+        252, 323, 322, 270, 232,
+      ],
+      growth: false,
+    },
+    // Apple
+    {
+      data: [
+        222, 222, 226, 271, 365, 365, 238,
+        324, 288, 206, 324, 324, 500, 409,
+        409, 273, 232, 273, 500, 570, 767,
+        808, 685, 767, 685, 685,
+      ],
+      growth: true,
+    },
+    // Coinbase
+    {
+      data: [
+        632, 510, 610, 404, 504, 404, 449,
+        349, 404, 542, 404, 410, 491, 392,
+        254, 273, 291, 191, 226, 363, 449,
+        252, 223, 222, 170, 132,
+      ],
+      growth: false,
+    },
+  ];
+
+  const chartData = [];
+
+  const buildChartData = (chart) => {
+    var obj = {
+      labels: [
+        '12-01-2020', '01-01-2021', '02-01-2021',
+        '03-01-2021', '04-01-2021', '05-01-2021',
+        '06-01-2021', '07-01-2021', '08-01-2021',
+        '09-01-2021', '10-01-2021', '11-01-2021',
+        '12-01-2021', '01-01-2022', '02-01-2022',
+        '03-01-2022', '04-01-2022', '05-01-2022',
+        '06-01-2022', '07-01-2022', '08-01-2022',
+        '09-01-2022', '10-01-2022', '11-01-2022',
+        '12-01-2022', '01-01-2023',
+      ],
+      datasets: [
+        // Line
+        {
+          data: chart.data,
+          borderColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500],
+          borderWidth: 2,
+          tension: 0,
+          pointRadius: 0,
+          pointHoverRadius: 3,
+          pointBackgroundColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500],
+          clip: 20,
+        },
+      ],      
+    }    
+    return obj;
+  };
+  
+  miniCharts.map((miniChart) => {
+    chartData.push(buildChartData(miniChart));
+  });
+
+  return (
+    <div className="col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Market Trends</h2>
+      </header>
+      <div className="p-3">
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
+              <tr>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Market</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Mkt Cap</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Chart</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Price</div>
+                </th>
+                <th className="p-2 whitespace-nowrap">
+                  <div className="font-semibold text-left">Chg. (24h)</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm font-medium divide-y divide-slate-100">
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap md:w-1/2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#1DA1F2" cx="18" cy="18" r="18" />
+                      <path
+                        d="M26 13.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.4H10c1.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"
+                        fill="#FFF"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                    <div>
+                      <div className="text-slate-800 uppercase">Twtr</div>
+                      <div className="text-xs text-slate-500">Twitter Inc.</div>
+                    </div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-normal text-left">33.94B</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  {/* Chart built with Chart.js 3 */}
+                  <div className="w-[96px]">
+                    {/* Change the height attribute to adjust the chart height */}
+                    <LineChart data={chartData[0]} width={96} height={32} />
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left">$43.07</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left text-emerald-500">+$4.20 (4%)</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap md:w-1/2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#1877F2" cx="18" cy="18" r="18" />
+                      <path
+                        d="M16.023 26 16 19h-3v-3h3v-2c0-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.536V16H23l-1 3h-2.72v7h-3.257Z"
+                        fill="#FFF"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                    <div>
+                      <div className="text-slate-800 uppercase">Fb</div>
+                      <div className="text-xs text-slate-500">Meta Inc.</div>
+                    </div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-normal text-left">903.71B</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  {/* Chart built with Chart.js 3 */}
+                  <div className="w-[96px]">
+                    {/* Change the height attribute to adjust the chart height */}
+                    <LineChart data={chartData[1]} width={96} height={32} />
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left">$324.81</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left text-emerald-500">+$12.20 (3.7%)</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap md:w-1/2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#EA4335" cx="18" cy="18" r="18" />
+                      <path
+                        d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18Z"
+                        fill="#FFF"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                    <div>
+                      <div className="text-slate-800 uppercase">Googl</div>
+                      <div className="text-xs text-slate-500">Alphabet Inc.</div>
+                    </div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-normal text-left">1.70T</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  {/* Chart built with Chart.js 3 */}
+                  <div className="w-[96px]">
+                    {/* Change the height attribute to adjust the chart height */}
+                    <LineChart data={chartData[2]} width={96} height={32} />
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left">$2,860.96</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left text-rose-500">-$12.20 (3.7%)</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap md:w-1/2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#1E293B" cx="18" cy="18" r="18" />
+                      <path
+                        d="M18.725 10.48C19.853 9.006 21.422 9 21.422 9s.233 1.384-.888 2.717c-1.197 1.424-2.557 1.191-2.557 1.191s-.256-1.12.748-2.429Zm-.605 3.398c.58 0 1.658-.79 3.06-.79 2.414 0 3.364 1.7 3.364 1.7s-1.858.94-1.858 3.221c0 2.573 2.314 3.46 2.314 3.46s-1.617 4.506-3.802 4.506c-1.003 0-1.783-.67-2.84-.67-1.078 0-2.147.695-2.843.695C13.52 26 11 21.725 11 18.29c0-3.381 2.133-5.155 4.134-5.155 1.3 0 2.31.743 2.986.743Z"
+                        fill="#FFF"
+                        fillOpacity=".9"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                    <div>
+                      <div className="text-slate-800 uppercase">Aapl</div>
+                      <div className="text-xs text-slate-500">Apple Inc.</div>
+                    </div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-normal text-left">2.77T</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  {/* Chart built with Chart.js 3 */}
+                  <div className="w-[96px]">
+                    {/* Change the height attribute to adjust the chart height */}
+                    <LineChart data={chartData[3]} width={96} height={32} />
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left">$168.55</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left text-emerald-500">+$7.44 (1.4%)</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2 whitespace-nowrap md:w-1/2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#0052FF" cx="18" cy="18" r="18" />
+                      <path
+                        d="M18.12 13.894c1.673 0 3.002 1.016 3.506 2.528H25C24.389 13.19 21.679 11 18.146 11 14.135 11 11 13.998 11 18.013S14.055 25 18.146 25c3.454 0 6.216-2.19 6.828-5.449h-3.348c-.478 1.512-1.807 2.555-3.48 2.555-2.312 0-3.932-1.747-3.932-4.093 0-2.372 1.595-4.12 3.905-4.12Z"
+                        fill="#FFF"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                    <div>
+                      <div className="text-slate-800 uppercase">Coin</div>
+                      <div className="text-xs text-slate-500">Coinbase Global Inc.</div>
+                    </div>
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="font-normal text-left">50.89B</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  {/* Chart built with Chart.js 3 */}
+                  <div className="w-[96px]">
+                    {/* Change the height attribute to adjust the chart height */}
+                    <LineChart data={chartData[4]} width={96} height={32} />
+                  </div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left">$236.48</div>
+                </td>
+                <td className="p-2 whitespace-nowrap">
+                  <div className="text-left text-rose-500">-$24,30 (6.2%)</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FintechCard14;

src/partials/fintech/FintechIntro.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import UserImage from '../../images/user-64-14.jpg';
+import FintechIcon01 from '../../images/company-icon-01.svg';
+import FintechIcon02 from '../../images/company-icon-02.svg';
+import FintechIcon03 from '../../images/company-icon-03.svg';
+import FintechIcon04 from '../../images/company-icon-04.svg';
+
+function FintechIntro() {
+  return (
+    <div className="flex flex-col col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 py-6">
+        <div className="md:flex md:justify-between md:items-center">
+          {/* Left side */}
+          <div className="flex items-center mb-4 md:mb-0">
+            {/* Avatar */}
+            <div className="mr-4">
+              <img className="inline-flex rounded-full" src={UserImage} width="64" height="64" alt="User" />
+            </div>
+            {/* User info */}
+            <div>
+              <div className="mb-2">
+                Hey <strong className="font-medium text-slate-800">Mary</strong> 👋, this is your current balance:
+              </div>
+              <div className="text-3xl font-bold text-emerald-500">$47,347.09</div>
+            </div>
+          </div>
+          {/* Right side */}
+          <ul className="shrink-0 flex flex-wrap justify-end md:justify-start -space-x-3 -ml-px">
+            <li>
+              <a className="block" href="#0">
+                <img className="w-9 h-9 rounded-full" src={FintechIcon01} width="36" height="36" alt="Account 01" />
+              </a>
+            </li>
+            <li>
+              <a className="block" href="#0">
+                <img className="w-9 h-9 rounded-full" src={FintechIcon02} width="36" height="36" alt="Account 02" />
+              </a>
+            </li>
+            <li>
+              <a className="block" href="#0">
+                <img className="w-9 h-9 rounded-full" src={FintechIcon03} width="36" height="36" alt="Account 03" />
+              </a>
+            </li>
+            <li>
+              <a className="block" href="#0">
+                <img className="w-9 h-9 rounded-full" src={FintechIcon04} width="36" height="36" alt="Account 04" />
+              </a>
+            </li>
+            <li>
+              <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">
+                <span className="sr-only">Add new user</span>
+                <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                  <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+                </svg>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FintechIntro;

src/partials/inbox/InboxBody.jsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import Mail from './Mail';
+
+import mailUser01 from '../../images/user-40-11.jpg';
+import mailUser02 from '../../images/user-avatar-80.png';
+import mailImage from '../../images/inbox-image.jpg';
+
+function InboxBody({
+  inboxSidebarOpen,
+  setInboxSidebarOpen
+}) {
+
+  const mails = [
+    {
+      id: '0',
+      open: false,
+      image: mailUser01,
+      name: 'Dominik Lamakani',
+      email: 'dominiklama@acme.com',
+      date: 'Sep 3, 3:18 PM',
+      recipients: ['me', 'Carolyn'],
+      excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore…',
+      message: '<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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><p>Consectetur adipiscing elit, sed do eiusmod aliqua? Check below:</p><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><p>Cheers,</p><p class="font-medium">Dominik Lamakani</p>',
+    },
+    {
+      id: '1',
+      open: false,
+      image: mailUser02,
+      name: 'Acme Inc.',
+      email: 'acmeinc@acme.com',
+      date: 'Sep 3, 3:18 PM',
+      recipients: ['me', 'Dominik'],
+      excerpt: 'Dominik, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt…',
+      message: '<p>Dominik, 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><p>Consectetur adipiscing elit, sed do eiusmod aliqua? Check below:</p><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><p>Cheers,</p><p class="font-medium">Acme Inc.</p>',
+    },
+    {
+      id: '2',
+      open: true,
+      image: mailUser01,
+      name: 'Dominik Lamakani',
+      email: 'dominiklama@acme.com',
+      date: 'Sep 4, 3:37 AM',
+      recipients: ['me', 'Carolyn'],
+      excerpt: 'Hey Acme 👋 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt…',
+      message: `<p>Hey Acme 👋</p><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 <span class="underline">nostrud exercitation ullamco</span> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><p>Consectetur adipiscing elit, sed do eiusmod <a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">tempor magna</a> aliqua? Check below:</p><p><img src=${mailImage} width="320" height="190" alt="Inbox image" /></p><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><p>Cheers,</p><p class="font-medium">Dominik Lamakani</p>`,
+    },
+  ];
+
+  return (
+    <div className={`grow flex flex-col md:translate-x-0 transform transition-transform duration-300 ease-in-out ${inboxSidebarOpen ? 'translate-x-1/3' : 'translate-x-0'}`}>
+
+      {/* Header */}
+      <div className="sticky top-16">
+        <div className="flex items-center justify-between bg-slate-50 border-b border-slate-200 px-4 sm:px-6 md:px-5 h-16">
+          {/* Buttons on the left side */}
+          <div className="flex">
+            {/* Close button */}
+            <button
+              className="md:hidden text-slate-400 hover:text-slate-500 mr-4"
+              onClick={() => setInboxSidebarOpen(!inboxSidebarOpen)}
+              aria-controls="inbox-sidebar"
+              aria-expanded={inboxSidebarOpen}
+            >
+              <span className="sr-only">Close sidebar</span>
+              <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
+              </svg>
+            </button>
+            <button className="p-1.5 shrink-0 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+              <svg className="w-4 h-4 fill-current text-slate-400" viewBox="0 0 16 16">
+                <path d="M5 7h2v6H5V7zm4 0h2v6H9V7zm3-6v2h4v2h-1v10c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5H0V3h4V1c0-.6.4-1 1-1h6c.6 0 1 .4 1 1zM6 2v1h4V2H6zm7 3H3v9h10V5z" />
+              </svg>
+            </button>
+            <button className="p-1.5 shrink-0 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+              <svg className="w-4 h-4 fill-current text-amber-500" viewBox="0 0 16 16">
+                <path d="M10 5.934 8 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 className="p-1.5 shrink-0 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+              <svg className="w-4 h-4 fill-current text-slate-400" 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>
+            </button>
+            <button className="p-1.5 shrink-0 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+              <svg className="w-4 h-4 fill-current text-indigo-500" viewBox="0 0 16 16">
+                <path d="M14.3 2.3L5 11.6 1.7 8.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" />
+              </svg>
+            </button>
+          </div>
+          {/* Buttons on the right side */}
+          <div className="flex items-center">
+            <div className="text-xs mr-1"><span className="font-medium">10</span> <span className="text-slate-500">of</span> <span className="font-medium">467</span></div>
+            <button className="p-1.5 shrink-0 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+              <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                <path d="m10 13.4 1.4-1.4-4-4 4-4L10 2.6 4.6 8z" />
+              </svg>
+            </button>
+            <button className="p-1.5 shrink-0 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+              <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                <path d="M7 13.4 5.6 12l4-4-4-4L7 2.6 12.4 8z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="grow px-4 sm:px-6 md:px-5 py-4">
+
+        {/* Mail subject */}
+        <header className="sm:flex sm:items-start sm:justify-between mb-4">
+          <h1 className="text-xl leading-snug text-slate-800 font-bold mb-1 sm:mb-0 ml-2">Chill your mind with this amazing offer 🎉</h1>
+          <button className="text-xs inline-flex font-medium bg-sky-100 text-sky-600 rounded-full text-center px-2.5 py-1 whitespace-nowrap">Exciting news</button>
+        </header>
+
+        {/* Messages box */}
+        <div className="bg-white shadow-lg rounded-sm border border-slate-200 px-6 divide-y divide-slate-200">
+
+          {
+            mails.map(mail => {
+              return (
+                <Mail
+                  key={mail.id}
+                  id={mail.id}
+                  open={mail.open}
+                  image={mail.image}
+                  name={mail.name}
+                  email={mail.email}
+                  date={mail.date}
+                  recipients={mail.recipients}
+                  excerpt={mail.excerpt}
+                  message={mail.message}
+                />
+              )
+            })
+          }
+
+        </div>
+
+      </div>
+
+      {/* Footer */}
+      <div className="sticky bottom-0">
+        <div className="flex items-center justify-between bg-white border-t border-slate-200 px-4 sm:px-6 md:px-5 h-16">
+          {/* Plus button */}
+          <button className="shrink-0 text-slate-400 hover:text-slate-500 mr-3">
+            <span className="sr-only">Add</span>
+            <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
+              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.98 5.38 18.62.02 12 0zm6 13h-5v5h-2v-5H6v-2h5V6h2v5h5v2z" />
+            </svg>
+          </button>
+          {/* Message input */}
+          <form className="grow flex">
+            <div className="grow mr-3">
+              <label htmlFor="message-input" className="sr-only">Type a message</label>
+              <input id="message-input" className="form-input w-full bg-slate-100 border-transparent focus:bg-white focus:border-slate-300" type="text" placeholder="Aa" />
+            </div>
+            <button type="submit" className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Send -&gt;</button>
+          </form>
+        </div>
+      </div>
+
+    </div>
+  );
+}
+
+export default InboxBody;

src/partials/inbox/InboxSidebar.jsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import ChannelMenu from '../messages/ChannelMenu';
+
+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';
+import UserImage06 from '../../images/user-32-06.jpg';
+
+function InboxSidebar({
+  inboxSidebarOpen,
+  setInboxSidebarOpen
+}) {
+  return (
+    <div
+      id="inbox-sidebar"
+      className={`absolute z-20 top-0 bottom-0 w-full md:w-auto md:static md:top-auto md:bottom-auto -mr-px md:translate-x-0 transform transition-transform duration-200 ease-in-out ${inboxSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
+    >
+      <div className="sticky top-16 bg-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-r border-slate-200 md:w-72 xl:w-80 h-[calc(100vh-64px)]">
+
+        {/* #Marketing group */}
+        <div>
+          {/* Group header */}
+          <div className="sticky top-0 z-10">
+            <div className="flex items-center bg-white border-b border-slate-200 px-5 h-16">
+              <div className="w-full flex items-center justify-between">
+                {/* Channel menu */}
+                <ChannelMenu />
+                {/* Edit button */}
+                <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+                  <svg className="w-4 h-4 fill-current text-slate-500" 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>
+                </button>
+              </div>
+            </div>
+          </div>
+          {/* Group body */}
+          <div className="px-5 py-4">
+            {/* Search form */}
+            <form className="relative">
+              <label htmlFor="inbox-search" className="sr-only">Search</label>
+              <input id="inbox-search" 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>
+            {/* Tabs */}
+            <div className="relative mt-4">
+              <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">Primary</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">Social</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">Promotions</a>
+                </li>
+              </ul>
+            </div>
+            {/* Inbox */}
+            <div className="mt-4">
+              <div className="text-xs font-semibold text-slate-400 uppercase mb-3">Inbox (44)</div>
+              <ul className="mb-6">
+                <li className="-mx-2">
+                  <button className="flex w-full p-2 rounded bg-indigo-100 text-left" onClick={() => setInboxSidebarOpen(false)}>
+                    <img className="w-8 h-8 rounded-full mr-2" src={UserImage01} width="32" height="32" alt="User 01" />
+                    <div className="grow truncate">
+                      <div className="flex items-center justify-between mb-1.5">
+                        <div className="truncate">
+                          <span className="text-sm font-semibold text-slate-800">Dominik Lamakani</span>
+                        </div>
+                        <div className="text-xs text-slate-500 font-medium">4 Aug</div>
+                      </div>
+                      <div className="text-xs font-medium text-slate-800 truncate mb-0.5">Chill your mind with this amazing offer 🎉</div>
+                      <div className="text-xs whitespace-normal">Lorem ipsum dolor sit amet, consecte adipiscing elit aute irure dolor…</div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="flex w-full p-2 rounded text-left" onClick={() => setInboxSidebarOpen(false)}>
+                    <img className="w-8 h-8 rounded-full mr-2" src={UserImage05} width="32" height="32" alt="User 05" />
+                    <div className="grow truncate">
+                      <div className="flex items-center justify-between mb-1.5">
+                        <div className="truncate">
+                          <span className="text-sm font-semibold text-slate-800">Simona Lürwer</span>
+                        </div>
+                        <div className="text-xs text-slate-500 font-medium">4 Aug</div>
+                      </div>
+                      <div className="text-xs font-medium text-slate-800 truncate mb-0.5">🙌 Help us improve Mosaic by giving…</div>
+                      <div className="text-xs whitespace-normal">Lorem ipsum dolor sit amet, consecte adipiscing elit aute irure dolor…</div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="flex w-full p-2 rounded text-left" onClick={() => setInboxSidebarOpen(false)}>
+                    <img className="w-8 h-8 rounded-full mr-2" src={UserImage06} width="32" height="32" alt="User 05" />
+                    <div className="grow truncate">
+                      <div className="flex items-center justify-between mb-1.5">
+                        <div className="truncate">
+                          <span className="text-sm font-semibold text-slate-800">Mary Roszczewski</span>
+                        </div>
+                        <div className="text-xs text-slate-500 font-medium">1 Aug</div>
+                      </div>
+                      <div className="text-xs font-medium text-slate-800 truncate mb-0.5">[Urgent] Changes to links for public…</div>
+                      <div className="text-xs whitespace-normal">👋 Lorem ipsum dolor sit amet, consecte adipiscing elit aute irure dolor…</div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="flex w-full p-2 rounded text-left" onClick={() => setInboxSidebarOpen(false)}>
+                    <img className="w-8 h-8 rounded-full mr-2" src={UserImage04} width="32" height="32" alt="User 05" />
+                    <div className="grow truncate">
+                      <div className="flex items-center justify-between mb-1.5">
+                        <div className="truncate">
+                          <span className="text-sm font-semibold text-slate-800">Adrian Przetocki</span>
+                        </div>
+                        <div className="text-xs text-slate-500 font-medium">1 Aug</div>
+                      </div>
+                      <div className="text-xs font-medium text-slate-800 truncate mb-0.5">🙌 Help us improve Mosaic by giving…</div>
+                      <div className="text-xs whitespace-normal">Lorem ipsum dolor sit amet, consecte adipiscing elit aute irure dolor…</div>
+                    </div>
+                  </button>
+                </li>
+                <li className="-mx-2">
+                  <button className="flex w-full p-2 rounded text-left" onClick={() => setInboxSidebarOpen(false)}>
+                    <img className="w-8 h-8 rounded-full mr-2" src={UserImage02} width="32" height="32" alt="User 05" />
+                    <div className="grow truncate">
+                      <div className="flex items-center justify-between mb-1.5">
+                        <div className="truncate">
+                          <span className="text-sm font-semibold text-slate-800">Tisha Yanchev</span>
+                        </div>
+                        <div className="text-xs text-slate-500 font-medium">1 Aug</div>
+                      </div>
+                      <div className="text-xs font-medium text-slate-800 truncate mb-0.5">Re: Here’s an extra 25% OFF 🎉</div>
+                      <div className="text-xs whitespace-normal">Excepteur sint occaecat cupidatat non proident sunt in culpa qui deserunt…</div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default InboxSidebar;

src/partials/inbox/Mail.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+
+function Mail(props) {
+
+  const [open, setOpen] = useState(props.open);
+
+  return (
+    <div className="py-6">
+      {/* Header */}
+      <header className="flex items-start">
+        {/* Avatar */}
+        <img className="rounded-full shrink-0 mr-3" src={props.image} width="40" height="40" alt={props.name} />
+        {/* Meta */}
+        <div className="grow">
+          <div className="sm:flex items-start justify-between mb-0.5">
+            {/* Message author */}
+            <div className="xl:flex items-center mb-2 sm:mb-0">
+              <button className="text-sm font-semibold text-slate-800 text-left truncate" onClick={() => setOpen(!open)}>{props.name}</button>
+              {open &&
+                <>
+                  <div className="text-sm text-slate-400 hidden xl:block mx-1">·</div>
+                  <div className="text-xs">{props.email}</div>
+                </>
+              }
+            </div>
+            {/* Date */}
+            <div className="text-xs font-medium text-slate-500 whitespace-nowrap mb-2 sm:mb-0">{props.date}</div>
+          </div>
+          {/* To */}
+          {open &&
+            <div className="text-xs font-medium text-slate-500">To {props.recipients.join(', ')}</div>
+          }
+          {/* Excerpt */}
+          {!open &&
+            <div className="text-sm">{props.excerpt}</div>
+          }
+        </div>
+      </header>
+      {/* Body */}
+      {open &&
+        <div className="text-sm text-slate-800 mt-4 space-y-2" dangerouslySetInnerHTML={{ __html: props.message }}></div>
+      }
+    </div>
+  );
+}
+
+export default Mail;

src/partials/invoices/InvoicesTable.jsx

@@ -0,0 +1,219 @@
+import React, { useState, useEffect } from 'react';
+import Invoices from './InvoicesTableItem';
+
+function InvoicesTable({
+  selectedItems
+}) {
+
+  const invoices = [
+    {
+      id: '0',
+      invoice: '#123567',
+      total: '$129.00',
+      status: 'Overdue',
+      customer: 'Dominik Lamakani',
+      issueddate: '22/07/2021',
+      paiddate: '-',
+      type: 'Subscription',
+    },
+    {
+      id: '1',
+      invoice: '#779912',
+      total: '$59.00',
+      status: 'Paid',
+      customer: 'Mark Cameron',
+      issueddate: '19/07/2021',
+      paiddate: '20/07/2021',
+      type: 'Subscription',
+    },
+    {
+      id: '2',
+      invoice: '#889924',
+      total: '$89.00',
+      status: 'Paid',
+      customer: 'Sergio Gonnelli',
+      issueddate: '17/07/2021',
+      paiddate: '19/07/2021',
+      type: 'One-time',
+    },
+    {
+      id: '3',
+      invoice: '#897726',
+      total: '$129.00',
+      status: 'Due',
+      customer: 'Manuel Garbaya',
+      issueddate: '04/07/2021',
+      paiddate: '-',
+      type: 'Subscription',
+    },
+    {
+      id: '4',
+      invoice: '#123567',
+      total: '$129.00',
+      status: 'Due',
+      customer: 'Cool Robot',
+      issueddate: '04/07/2021',
+      paiddate: '-',
+      type: 'Subscription',
+    },
+    {
+      id: '5',
+      invoice: '#896644',
+      total: '$129.00',
+      status: 'Paid',
+      customer: 'Mark Cameron',
+      issueddate: '04/07/2021',
+      paiddate: '09/07/2021',
+      type: 'One-time',
+    },
+    {
+      id: '6',
+      invoice: '#136988',
+      total: '$69.00',
+      status: 'Paid',
+      customer: 'Glenn Thomas',
+      issueddate: '01/07/2021',
+      paiddate: '01/07/2021',
+      type: 'One-time',
+    },
+    {
+      id: '7',
+      invoice: '#442206',
+      total: '$129.00',
+      status: 'Overdue',
+      customer: 'Dominik Lamakani',
+      issueddate: '22/06/2021',
+      paiddate: '-',
+      type: 'Subscription',
+    },
+    {
+      id: '8',
+      invoice: '#764321',
+      total: '$89.00',
+      status: 'Paid',
+      customer: 'Brian Halligan',
+      issueddate: '21/06/2021',
+      paiddate: '29/06/2021',
+      type: 'One-time',
+    },
+    {
+      id: '9',
+      invoice: '#908764',
+      total: '$129.00',
+      status: 'Due',
+      customer: 'Carolyn McNeail',
+      issueddate: '17/06/2021',
+      paiddate: '-',
+      type: 'Subscription',
+    }
+  ];
+
+  const [selectAll, setSelectAll] = useState(false);
+  const [isCheck, setIsCheck] = useState([]);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    setList(invoices);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    setIsCheck(list.map(li => li.id));
+    if (selectAll) {
+      setIsCheck([]);
+    }
+  };
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setSelectAll(false);
+    setIsCheck([...isCheck, id]);
+    if (!checked) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
+
+  useEffect(() => {
+    selectedItems(isCheck);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  return (
+    <div className="bg-white shadow-lg rounded-sm border border-slate-200 relative">
+      <header className="px-5 py-4">
+        <h2 className="font-semibold text-slate-800">Invoices <span className="text-slate-400 font-medium">67</span></h2>
+      </header>
+      <div>
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs font-semibold uppercase text-slate-500 bg-slate-50 border-t border-b border-slate-200">
+              <tr>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                  <div className="flex items-center">
+                    <label className="inline-flex">
+                      <span className="sr-only">Select all</span>
+                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
+                    </label>
+                  </div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Invoice</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Total</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Status</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Customer</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Issued on</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Paid on</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Type</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Actions</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm divide-y divide-slate-200">
+              {
+                list.map(invoice => {
+                  return (
+                    <Invoices
+                      key={invoice.id}
+                      id={invoice.id}
+                      invoice={invoice.invoice}
+                      total={invoice.total}
+                      status={invoice.status}
+                      customer={invoice.customer}
+                      issueddate={invoice.issueddate}
+                      paiddate={invoice.paiddate}
+                      type={invoice.type}
+                      handleClick={handleClick}
+                      isChecked={isCheck.includes(invoice.id)}
+                    />
+                  )
+                })
+              }
+            </tbody>
+          </table>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default InvoicesTable;

src/partials/invoices/InvoicesTableItem.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+function InvoicesTableItem(props) {
+
+  const totalColor = (status) => {
+    switch (status) {
+      case 'Paid':
+        return 'text-emerald-500';
+      case 'Due':
+        return 'text-amber-500';
+      case 'Overdue':
+        return 'text-rose-500';
+      default:
+        return 'text-slate-500';
+    }
+  };
+
+  const statusColor = (status) => {
+    switch (status) {
+      case 'Paid':
+        return 'bg-emerald-100 text-emerald-600';
+      case 'Due':
+        return 'bg-amber-100 text-amber-600';
+      case 'Overdue':
+        return 'bg-rose-100 text-rose-500';
+      default:
+        return 'bg-slate-100 text-slate-500';
+    }
+  };
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'Subscription':
+        return (
+          <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+            <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+            <path d="M11.4 0L10 1.4l2 2H8.4c-2.8 0-5 2.2-5 5V12l-2-2L0 11.4l3.7 3.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l3.7-3.7L7.4 10l-2 2V8.4c0-1.7 1.3-3 3-3H12l-2 2 1.4 1.4 3.7-3.7c.4-.4.4-1 0-1.4L11.4 0z" />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <tr>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="flex items-center">
+          <label className="inline-flex">
+            <span className="sr-only">Select</span>
+            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+          </label>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="font-medium text-sky-500">{props.invoice}</div>
+      </td>    
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className={`font-medium ${totalColor(props.status)}`}>{props.total}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className={`inline-flex font-medium rounded-full text-center px-2.5 py-0.5 ${statusColor(props.status)}`}>{props.status}</div>
+      </td >    
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="font-medium text-slate-800">{props.customer}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div>{props.issueddate}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div>{props.paiddate}</div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="flex items-center">
+          {typeIcon(props.type)}
+          <div>{props.type}</div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="space-x-1">
+          <button className="text-slate-400 hover:text-slate-500 rounded-full">
+            <span className="sr-only">Edit</span>
+            <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M19.7 8.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-4zM12.6 22H10v-2.6l6-6 2.6 2.6-6 6zm7.4-7.4L17.4 12l1.6-1.6 2.6 2.6-1.6 1.6z" />
+            </svg>
+          </button>
+          <button className="text-slate-400 hover:text-slate-500 rounded-full">
+            <span className="sr-only">Download</span>
+            <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M16 20c.3 0 .5-.1.7-.3l5.7-5.7-1.4-1.4-4 4V8h-2v8.6l-4-4L9.6 14l5.7 5.7c.2.2.4.3.7.3zM9 22h14v2H9z" />
+            </svg>
+          </button>
+          <button className="text-rose-500 hover:text-rose-600 rounded-full">
+            <span className="sr-only">Delete</span>
+            <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M13 15h2v6h-2zM17 15h2v6h-2z" />
+                <path d="M20 9c0-.6-.4-1-1-1h-6c-.6 0-1 .4-1 1v2H8v2h1v10c0 .6.4 1 1 1h12c.6 0 1-.4 1-1V13h1v-2h-4V9zm-6 1h4v1h-4v-1zm7 3v9H11v-9h10z" />
+            </svg>
+          </button>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export default InvoicesTableItem;

src/partials/job/JobListItem.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function JobListItem(props) {
+  return (
+    <div
+      className={`shadow-lg rounded-sm border px-5 py-4 ${props.type === 'Featured' ? 'bg-amber-50 border-amber-300' : 'bg-white border-slate-200'}`}
+    >
+      <div className="md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2">
+        {/* Left side */}
+        <div className="flex items-start space-x-3 md:space-x-4">
+          <div className="w-9 h-9 shrink-0 mt-1">
+            <img className="w-9 h-9 rounded-full" src={props.image} width="36" height="36" alt={props.company} />
+          </div>
+          <div>
+            <Link className="inline-flex font-semibold text-slate-800" to={props.link}>
+              {props.role}
+            </Link>
+            <div className="text-sm">{props.details}</div>
+          </div>
+        </div>
+        {/* Right side */}
+        <div className="flex items-center space-x-4 pl-10 md:pl-0">
+          <div className="text-sm text-slate-500 italic whitespace-nowrap">{props.date}</div>
+          {props.type && (
+            <div
+              className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${
+                props.type === 'Featured' ? 'bg-amber-100 text-amber-600' : 'bg-emerald-100 text-emerald-600'
+              }`}
+            >
+              {props.type}
+            </div>
+          )}
+          <button className={`${props.fav ? 'text-amber-500' : 'text-slate-300 hover:text-slate-400'}`}>
+            <span className="sr-only">Bookmark</span>
+            <svg className="w-3 h-4 fill-current" width="12" height="16" xmlns="http://www.w3.org/2000/svg">
+              <path d="M2 0C.9 0 0 .9 0 2v14l6-3 6 3V2c0-1.1-.9-2-2-2H2Z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default JobListItem;

src/partials/job/JobSidebar.jsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+
+function JobSidebar() {
+
+  const [companySetting, setCompanySetting] = useState(true);
+  const [immigrationSetting, setImmigrationSetting] = useState(false);
+
+  return (
+    <div className="space-y-8">
+      {/* Alert */}
+      <div className="relative bg-indigo-200 rounded-sm p-5 min-w-60">
+        <div className="absolute bottom-0 -mb-3">
+          <svg width="44" height="42" 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="ill-b">
+                <stop stopColor="#A5B4FC" offset="0%" />
+                <stop stopColor="#818CF8" offset="100%" />
+              </linearGradient>
+              <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="ill-c">
+                <stop stopColor="#4338CA" offset="0%" />
+                <stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
+              </linearGradient>
+              <path id="ill-a" d="m20 0 20 40-20-6.25L0 40z" />
+            </defs>
+            <g transform="scale(-1 1) rotate(-51 -11.267 67.017)" fill="none" fillRule="evenodd">
+              <mask id="ill-d" fill="#fff">
+                <use xlinkHref="#ill-a" />
+              </mask>
+              <use fill="url(#ill-b)" xlinkHref="#ill-a" />
+              <path fill="url(#ill-c)" mask="url(#ill-d)" d="M20.586-7.913h25v47.5h-25z" />
+            </g>
+          </svg>
+        </div>
+        <div className="relative">
+          <div className="text-sm font-medium text-slate-800 mb-2">Remember to keep track of your job research.</div>
+          <div className="text-right">
+            <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+              Create Alert -&gt;
+            </a>
+          </div>
+        </div>
+      </div>
+      {/* White box */}
+      <div className="bg-white shadow-lg rounded-sm border border-slate-200 p-5 min-w-60">
+        <div className="grid md:grid-cols-2 xl:grid-cols-1 gap-6">
+          {/* Group 1 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Job Types</div>
+            <ul className="space-y-2">
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" defaultChecked />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Programming</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Design</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Management / Finance</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Customer Support</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Sales / Marketing</span>
+                </label>
+              </li>
+            </ul>
+          </div>
+          {/* Group 2 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Company Culture</div>
+            <div className="flex items-center">
+              <div className="form-switch">
+                <input
+                  type="checkbox"
+                  id="company-toggle"
+                  className="sr-only"
+                  checked={companySetting}
+                  onChange={() => setCompanySetting(!companySetting)}
+                />
+                <label className="bg-slate-400" htmlFor="company-toggle">
+                  <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                  <span className="sr-only">Company Culture</span>
+                </label>
+              </div>
+              <div className="text-sm text-slate-400 italic ml-2">{companySetting ? 'On' : 'Off'}</div>
+            </div>
+            <div className="text-sm italic mt-3">Only show companies that are creating a positive culture</div>
+          </div>
+          {/* Group 3 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Salary Range</div>
+            <ul className="space-y-2">
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" defaultChecked />
+                  <span className="text-sm text-slate-600 font-medium ml-2">$20K - $50K</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">$50K - $100K</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">&gt; $100K</span>
+                </label>
+              </li>
+              <li>
+                <label className="flex items-center">
+                  <input type="checkbox" className="form-checkbox" />
+                  <span className="text-sm text-slate-600 font-medium ml-2">Drawing / Painting</span>
+                </label>
+              </li>
+            </ul>
+          </div>
+          {/* Group 4 */}
+          <div>
+            <div className="text-sm text-slate-800 font-semibold mb-3">Immigration</div>
+            <div className="flex items-center">
+              <div className="form-switch">
+                <input
+                  type="checkbox"
+                  id="immigration-toggle"
+                  className="sr-only"
+                  checked={immigrationSetting}
+                  onChange={() => setImmigrationSetting(!immigrationSetting)}
+                />
+                <label className="bg-slate-400" htmlFor="immigration-toggle">
+                  <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                  <span className="sr-only">Immigration</span>
+                </label>
+              </div>
+              <div className="text-sm text-slate-400 italic ml-2">{immigrationSetting ? 'On' : 'Off'}</div>
+            </div>
+            <div className="text-sm italic mt-3">Only show companies that can sponsor a visa</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default JobSidebar;

src/partials/messages/ChannelMenu.jsx

@@ -0,0 +1,108 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../../utils/Transition';
+
+import ChannelImage from '../../images/user-avatar-32.png';
+import ChannelImage01 from '../../images/channel-01.png';
+import ChannelImage02 from '../../images/channel-02.png';
+import ChannelImage03 from '../../images/channel-03.png';
+
+function ChannelMenu() {
+
+  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={ChannelImage} width="32" height="32" alt="Group 01" />
+        <div className="truncate">
+          <span className="font-semibold text-slate-800">#Marketing</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 left-0 min-w-60 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
+        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={ChannelImage01} width="28" height="28" alt="Channel 01" />
+                  <div className="truncate">#Marketing</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={ChannelImage02} width="28" height="28" alt="Channel 02" />
+                  <div className="truncate">#Developing</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={ChannelImage03} width="28" height="28" alt="Channel 03" />
+                  <div className="truncate">#ProductSupport</div>
+                </div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </Transition>
+    </div>
+  )
+}
+
+export default ChannelMenu;

src/partials/messages/Channels.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+function Channels({
+  setMsgSidebarOpen
+}) {
+  return (
+    <div className="mt-4">
+      <div className="text-xs font-semibold text-slate-400 uppercase mb-3">Channels</div>
+      <ul className="mb-6">
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center">
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">#New Leads</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <div className="w-2 h-2 bg-indigo-400 rounded-full"></div>
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">#Development Team</span>
+              </div>
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">#Product Tips</span>
+              </div>
+            </div>
+          </button>
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default Channels;

src/partials/messages/DirectMessages.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+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';
+
+function DirectMessages({
+  setMsgSidebarOpen
+}) {
+  return (
+    <div className="mt-4">
+      <div className="text-xs font-semibold text-slate-400 uppercase mb-3">Direct messages</div>
+      <ul className="mb-6">
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded bg-indigo-100" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <img className="w-8 h-8 rounded-full mr-2" src={UserImage01} width="32" height="32" alt="User 01" />
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">Dominik Lamakani</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <div className="text-xs inline-flex font-medium bg-indigo-400 text-white rounded-full text-center leading-5 px-2">2</div>
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <img className="w-8 h-8 rounded-full mr-2" src={UserImage02} width="32" height="32" alt="User 02" />
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">Tisha Yanchev</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <div className="text-xs inline-flex font-medium bg-indigo-400 text-white rounded-full text-center leading-5 px-2">4</div>
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <img className="w-8 h-8 rounded-full mr-2" src={UserImage03} width="32" height="32" alt="User 03" />
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">Jerzy Wierzy</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <img className="w-5 h-5 rounded-full shrink-0" src={UserImage03} width="20" height="20" alt="User 03" />
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <img className="w-8 h-8 rounded-full mr-2" src={UserImage04} width="32" height="32" alt="User 04" />
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">Adrian Przetocki</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <svg className="w-3 h-3 shrink-0 fill-current text-slate-400" viewBox="0 0 12 12">
+                <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
+              </svg>
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <img className="w-8 h-8 rounded-full mr-2" src={UserImage05} width="32" height="32" alt="User 05" />
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">Simona Lürwer</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <svg className="w-3 h-3 shrink-0 fill-current text-slate-400" viewBox="0 0 12 12">
+                <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
+              </svg>
+            </div>
+          </button>
+        </li>
+        <li className="-mx-2">
+          <button className="flex items-center justify-between w-full p-2 rounded" onClick={() => setMsgSidebarOpen(false)}>
+            <div className="flex items-center truncate">
+              <img className="w-8 h-8 rounded-full mr-2" src={UserImage06} width="32" height="32" alt="User 06" />
+              <div className="truncate">
+                <span className="text-sm font-medium text-slate-800">Mary Roszczewski</span>
+              </div>
+            </div>
+            <div className="flex items-center ml-2">
+              <svg className="w-3 h-3 shrink-0 fill-current text-slate-400" viewBox="0 0 12 12">
+                <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
+              </svg>
+            </div>
+          </button>
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default DirectMessages;

src/partials/messages/MessagesBody.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import User01 from '../../images/user-40-11.jpg';
+import User02 from '../../images/user-40-12.jpg';
+import ChatImage from '../../images/chat-image.jpg';
+
+function MessagesBody() {
+  return (
+    <div className="grow px-4 sm:px-6 md:px-5 py-6">
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User01} width="40" height="40" alt="User 01" />
+        <div>
+          <div className="text-sm bg-white text-slate-800 p-3 rounded-lg rounded-tl-none border border-slate-200 shadow-md mb-1">
+            Can anyone help? I have a question about Acme Professional
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-slate-500 font-medium">2:40 PM</div>
+          </div>
+        </div>
+      </div>
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User02} width="40" height="40" alt="User 02" />
+        <div>
+          <div className="text-sm bg-indigo-500 text-white p-3 rounded-lg rounded-tl-none border border-transparent shadow-md mb-1">
+            Hey Dominik Lamakani 👋<br />
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 🙌
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-slate-500 font-medium">2:40 PM</div>
+            <svg className="w-5 h-3 shrink-0 fill-current text-emerald-500" viewBox="0 0 20 12">
+              <path d="M10.402 6.988l1.586 1.586L18.28 2.28a1 1 0 011.414 1.414l-7 7a1 1 0 01-1.414 0L8.988 8.402l-2.293 2.293a1 1 0 01-1.414 0l-3-3A1 1 0 013.695 6.28l2.293 2.293L12.28 2.28a1 1 0 011.414 1.414l-3.293 3.293z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User01} width="40" height="40" alt="User 01" />
+        <div>
+          <div className="flex items-center">
+            <img className="rounded-lg shadow-md mb-1" src={ChatImage} width="240" height="180" alt="Chat" />
+            <button className="p-1.5 rounded-full border border-slate-200 ml-4 hover:bg-white transition duration-150">
+              <span className="sr-only">Download</span>
+              <svg className="w-4 h-4 shrink-0 fill-current text-slate-400" viewBox="0 0 16 16">
+                <path d="M15 15H1a1 1 0 01-1-1V2a1 1 0 011-1h4v2H2v10h12V3h-3V1h4a1 1 0 011 1v12a1 1 0 01-1 1zM9 7h3l-4 4-4-4h3V1h2v6z" />
+              </svg>
+            </button>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-slate-500 font-medium">2:48 PM</div>
+          </div>
+        </div>
+      </div>
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User01} width="40" height="40" alt="User 01" />
+        <div>
+          <div className="text-sm bg-white text-slate-800 p-3 rounded-lg rounded-tl-none border border-slate-200 shadow-md mb-1">
+            What do you think? Duis aute irure dolor in reprehenderit 🔥
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-slate-500 font-medium">2:48 PM</div>
+          </div>
+        </div>
+      </div>
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User02} width="40" height="40" alt="User 02" />
+        <div>
+          <div className="text-sm bg-indigo-500 text-white p-3 rounded-lg rounded-tl-none border border-transparent shadow-md mb-1">
+            Sed euismod nisi porta lorem mollis. Tellus elementum sagittis vitae et leo duis. Viverra justo nec ultrices dui.<br />
+            Sed lectus vestibulum mattis ullamcorper velit sed. Ut sem nulla pharetra diam sit amet 🎁
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-slate-500 font-medium">2:55 PM</div>
+            <svg className="w-3 h-3 shrink-0 fill-current text-slate-400" 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>
+        </div>
+      </div>
+      {/* Date separator */}
+      <div className="flex justify-center">
+        <div className="inline-flex items-center justify-center text-xs font-medium px-2.5 py-1 bg-white border border-slate-200 rounded-full my-5">
+          Tuesday, 20 January
+          </div>
+      </div>
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User02} width="40" height="40" alt="User 02" />
+        <div>
+          <div className="text-sm bg-indigo-500 text-white p-3 rounded-lg rounded-tl-none border border-transparent shadow-md mb-1">
+            Can you join <a className="font-medium" href="#0">@dominik</a>? <a className="underline" href="#0">https://meet.google.com/haz-r3gt-idj</a>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-slate-500 font-medium">10:15 AM</div>
+            <svg className="w-3 h-3 shrink-0 fill-current text-slate-400" 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>
+        </div>
+      </div>
+      {/* Chat msg */}
+      <div className="flex items-start mb-4 last:mb-0">
+        <img className="rounded-full mr-4" src={User01} width="40" height="40" alt="User 01" />
+        <div>
+          <div className="text-sm bg-white text-slate-800 p-3 rounded-lg rounded-tl-none border border-slate-200 shadow-md mb-1">
+            <svg className="fill-current text-slate-400" viewBox="0 0 15 3" width="15" height="3">
+              <circle cx="1.5" cy="1.5" r="1.5">
+                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
+              </circle>
+              <circle cx="7.5" cy="1.5" r="1.5">
+                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
+              </circle>
+              <circle cx="13.5" cy="1.5" r="1.5">
+                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
+              </circle>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MessagesBody;

src/partials/messages/MessagesFooter.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function MessagesFooter() {
+  return (
+    <div className="sticky bottom-0">
+      <div className="flex items-center justify-between bg-white border-t border-slate-200 px-4 sm:px-6 md:px-5 h-16">
+        {/* Plus button */}
+        <button className="shrink-0 text-slate-400 hover:text-slate-500 mr-3">
+          <span className="sr-only">Add</span>
+          <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
+            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.98 5.38 18.62.02 12 0zm6 13h-5v5h-2v-5H6v-2h5V6h2v5h5v2z" />
+          </svg>
+        </button>
+        {/* Message input */}
+        <form className="grow flex">
+          <div className="grow mr-3">
+            <label htmlFor="message-input" className="sr-only">Type a message</label>
+            <input id="message-input" className="form-input w-full bg-slate-100 border-transparent focus:bg-white focus:border-slate-300" type="text" placeholder="Aa" />
+          </div>
+          <button type="submit" className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Send -&gt;</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default MessagesFooter;

src/partials/messages/MessagesHeader.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import User01 from '../../images/user-32-01.jpg';
+import User02 from '../../images/user-32-07.jpg';
+
+function MessagesHeader({
+  msgSidebarOpen,
+  setMsgSidebarOpen
+}) {
+  return (
+    <div className="sticky top-16">
+      <div className="flex items-center justify-between bg-white border-b border-slate-200 px-4 sm:px-6 md:px-5 h-16">
+        {/* People */}
+        <div className="flex items-center">
+          {/* Close button */}
+          <button
+            className="md:hidden text-slate-400 hover:text-slate-500 mr-4"
+            onClick={() => setMsgSidebarOpen(!msgSidebarOpen)}
+            aria-controls="messages-sidebar"
+            aria-expanded={msgSidebarOpen}
+          >
+            <span className="sr-only">Close sidebar</span>
+            <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
+            </svg>
+          </button>
+          {/* People list */}
+          <div className="flex -space-x-3 -ml-px">
+            <a className="block" href="#0">
+              <img className="rounded-full border-2 border-white box-content" src={User01} width="32" height="32" alt="User 01" />
+            </a>
+            <a className="block" href="#0">
+              <img className="rounded-full border-2 border-white box-content" src={User02} width="32" height="32" alt="User 04" />
+            </a>
+          </div>
+        </div>
+        {/* Buttons on the right side */}
+        <div className="flex">
+          <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+            <svg className="w-4 h-4 fill-current text-slate-400" 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>
+          </button>
+          <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+            <svg className="w-4 h-4 fill-current text-indigo-500" viewBox="0 0 16 16">
+              <path d="M14.3 2.3L5 11.6 1.7 8.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MessagesHeader;

src/partials/messages/MessagesSidebar.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import ChannelMenu from './ChannelMenu';
+import DirectMessages from './DirectMessages';
+import Channels from './Channels';
+
+function MessagesSidebar({
+  msgSidebarOpen,
+  setMsgSidebarOpen
+}) {
+  return (
+    <div
+      id="messages-sidebar"
+      className={`absolute z-20 top-0 bottom-0 w-full md:w-auto md:static md:top-auto md:bottom-auto -mr-px md:translate-x-0 transform transition-transform duration-200 ease-in-out ${msgSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
+    >
+      <div className="sticky top-16 bg-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-r border-slate-200 md:w-72 xl:w-80 h-[calc(100vh-64px)]">
+
+        {/* #Marketing group */}
+        <div>
+          {/* Group header */}
+          <div className="sticky top-0 z-10">
+            <div className="flex items-center bg-white border-b border-slate-200 px-5 h-16">
+              <div className="w-full flex items-center justify-between">
+                {/* Channel menu */}
+                <ChannelMenu />
+                {/* Edit button */}
+                <button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
+                  <svg className="w-4 h-4 fill-current text-slate-500" 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>
+                </button>
+              </div>
+            </div>
+          </div>
+          {/* Group body */}
+          <div className="px-5 py-4">
+            {/* Search form */}
+            <form className="relative">
+              <label htmlFor="msg-search" className="sr-only">Search</label>
+              <input id="msg-search" 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>
+            {/* Direct messages */}
+            <DirectMessages msgSidebarOpen={msgSidebarOpen} setMsgSidebarOpen={setMsgSidebarOpen} />
+            {/* Channels */}
+            <Channels msgSidebarOpen={msgSidebarOpen} setMsgSidebarOpen={setMsgSidebarOpen} />
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default MessagesSidebar;

src/partials/orders/OrdersTable.jsx

@@ -0,0 +1,257 @@
+import React, { useState, useEffect } from 'react';
+import Orders from './OrdersTableItem';
+
+import Image01 from '../../images/icon-01.svg';
+import Image02 from '../../images/icon-02.svg';
+import Image03 from '../../images/icon-03.svg';
+
+function OrdersTable({
+  selectedItems
+}) {
+
+  const orders = [
+    {
+      id: '0',
+      image: Image01,
+      order: '#123567',
+      date: '22/01/2021',
+      customer: 'Patricia Semklo',
+      total: '$129.00',
+      status: 'Refunded',
+      items: '1',
+      location: '🇨🇳 Shanghai, CN',
+      type: 'Subscription',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '1',
+      image: Image01,
+      order: '#779912',
+      date: '22/01/2021',
+      customer: 'Dominik Lamakani',
+      total: '$89.00',
+      status: 'Approved',
+      items: '2',
+      location: '🇲🇽 Mexico City, MX',
+      type: 'Subscription',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '2',
+      image: Image02,
+      order: '#889924',
+      date: '22/01/2021',
+      customer: 'Ivan Mesaros',
+      total: '$89.00',
+      status: 'Approved',
+      items: '2',
+      location: '🇮🇹 Milan, IT',
+      type: 'One-time',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '3',
+      image: Image01,
+      order: '#897726',
+      date: '22/01/2021',
+      customer: 'Maria Martinez',
+      total: '$59.00',
+      status: 'Pending',
+      items: '1',
+      location: '🇮🇹 Bologna, IT',
+      type: 'One-time',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '4',
+      image: Image03,
+      order: '#123567',
+      date: '22/01/2021',
+      customer: 'Vicky Jung',
+      total: '$39.00',
+      status: 'Refunded',
+      items: '1',
+      location: '🇬🇧 London, UK',
+      type: 'Subscription',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '5',
+      image: Image01,
+      order: '#896644',
+      date: '21/01/2021',
+      customer: 'Tisho Yanchev',
+      total: '$59.00',
+      status: 'Approved',
+      items: '1',
+      location: '🇫🇷 Paris, FR',
+      type: 'One-time',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '6',
+      image: Image03,
+      order: '#136988',
+      date: '21/01/2021',
+      customer: 'James Cameron',
+      total: '$89.00',
+      status: 'Approved',
+      items: '1',
+      location: '🇫🇷 Marseille, FR',
+      type: 'Subscription',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '7',
+      image: Image03,
+      order: '#442206',
+      date: '21/01/2021',
+      customer: 'Haruki Masuno',
+      total: '$129.00',
+      status: 'Approved',
+      items: '2',
+      location: '🇺🇸 New York, USA',
+      type: 'Subscription',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '8',
+      image: Image02,
+      order: '#764321',
+      date: '21/01/2021',
+      customer: 'Joe Huang',
+      total: '$89.00',
+      status: 'Pending',
+      items: '2',
+      location: '🇨🇳 Shanghai, CN',
+      type: 'One-time',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    {
+      id: '9',
+      image: Image01,
+      order: '#908764',
+      date: '21/01/2021',
+      customer: 'Carolyn McNeail',
+      total: '$59.00',
+      status: 'Refunded',
+      items: '1',
+      location: '🇬🇧 Sheffield, UK',
+      type: 'Subscription',
+      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    }
+  ];
+
+  const [selectAll, setSelectAll] = useState(false);
+  const [isCheck, setIsCheck] = useState([]);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    setList(orders);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    setIsCheck(list.map(li => li.id));
+    if (selectAll) {
+      setIsCheck([]);
+    }
+  };
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setSelectAll(false);
+    setIsCheck([...isCheck, id]);
+    if (!checked) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
+
+  useEffect(() => {
+    selectedItems(isCheck);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  return (
+    <div className="bg-white shadow-lg rounded-sm border border-slate-200 relative">
+      <header className="px-5 py-4">
+        <h2 className="font-semibold text-slate-800">All Orders <span className="text-slate-400 font-medium">442</span></h2>
+      </header>
+      <div>
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full divide-y divide-slate-200">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-500 bg-slate-50 border-t border-slate-200">
+              <tr>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                  <div className="flex items-center">
+                    <label className="inline-flex">
+                      <span className="sr-only">Select all</span>
+                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
+                    </label>
+                  </div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Order</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Date</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Customer</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Total</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Status</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold">Items</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Location</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <div className="font-semibold text-left">Payment type</div>
+                </th>
+                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+                  <span className="sr-only">Menu</span>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            {
+              list.map(order => {
+                return (
+                  <Orders
+                    key={order.id}
+                    id={order.id}
+                    image={order.image}
+                    order={order.order}
+                    date={order.date}
+                    customer={order.customer}
+                    total={order.total}
+                    status={order.status}
+                    items={order.items}
+                    location={order.location}
+                    type={order.type}
+                    description={order.description}
+                    handleClick={handleClick}
+                    isChecked={isCheck.includes(order.id)}
+                  />
+                )
+              })
+            }
+          </table>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default OrdersTable;

src/partials/orders/OrdersTableItem.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+
+function OrdersTableItem(props) {
+
+  const [descriptionOpen, setDescriptionOpen] = useState(false);
+
+  const statusColor = (status) => {
+    switch (status) {
+      case 'Approved':
+        return 'bg-emerald-100 text-emerald-600';
+      case 'Refunded':
+        return 'bg-amber-100 text-amber-600';
+      default:
+        return 'bg-slate-100 text-slate-500';
+    }
+  };
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'Subscription':
+        return (
+          <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+            <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+            <path d="M11.4 0L10 1.4l2 2H8.4c-2.8 0-5 2.2-5 5V12l-2-2L0 11.4l3.7 3.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l3.7-3.7L7.4 10l-2 2V8.4c0-1.7 1.3-3 3-3H12l-2 2 1.4 1.4 3.7-3.7c.4-.4.4-1 0-1.4L11.4 0z" />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <tbody className="text-sm">
+      {/* Row */}
+      <tr>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          <div className="flex items-center">
+            <label className="inline-flex">
+              <span className="sr-only">Select</span>
+              <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+            </label>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="flex items-center text-slate-800">
+            <div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
+              <img className="ml-1" src={props.image} width="20" height="20" alt={props.order} />
+            </div>
+            <div className="font-medium text-sky-500">{props.order}</div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div>{props.date}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="font-medium text-slate-800">{props.customer}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left font-medium text-emerald-500">{props.total}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className={`inline-flex font-medium rounded-full text-center px-2.5 py-0.5 ${statusColor(props.status)}`}>{props.status}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-center">{props.items}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left">{props.location}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="flex items-center">
+            {typeIcon(props.type)}
+            <div>{props.type}</div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          <div className="flex items-center">
+            <button
+              className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+              aria-expanded={descriptionOpen}
+              onClick={() => setDescriptionOpen(!descriptionOpen)}
+              aria-controls={`description-${props.id}`}
+            >
+              <span className="sr-only">Menu</span>
+              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+              </svg>
+            </button>
+          </div>
+        </td>
+      </tr>
+      {/*
+      Example of content revealing when clicking the button on the right side:
+      Note that you must set a "colSpan" attribute on the <td> element,
+      and it should match the number of columns in your table
+      */}
+      <tr id={`description-${props.id}`} role="region" className={`${!descriptionOpen && 'hidden'}`}>
+        <td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
+          <div className="flex items-center bg-slate-50 p-3 -mt-3">
+            <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2">
+              <path d="M1 16h3c.3 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4l-3-3c-.4-.4-1-.4-1.4 0l-11 11c-.2.2-.3.4-.3.7v3c0 .6.4 1 1 1zm1-3.6l10-10L13.6 4l-10 10H2v-1.6z" />
+            </svg>
+            <div className="italic">{props.description}</div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  );
+}
+
+export default OrdersTableItem;

src/partials/settings/AccountPanel.jsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+
+import Image from '../../images/user-avatar-80.png';
+
+function AccountPanel() {
+
+  const [sync, setSync] = useState(false);
+
+  return (
+    <div className="grow">
+      {/* Panel body */}
+      <div className="p-6 space-y-6">
+        <h2 className="text-2xl text-slate-800 font-bold mb-5">My Account</h2>
+        {/* Picture */}
+        <section>
+          <div className="flex items-center">
+            <div className="mr-4">
+              <img className="w-20 h-20 rounded-full" src={Image} width="80" height="80" alt="User upload" />
+            </div>
+            <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Change</button>
+          </div>
+        </section>
+        {/* Business Profile */}
+        <section>
+          <h2 className="text-xl leading-snug text-slate-800 font-bold mb-1">Business Profile</h2>
+          <div className="text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
+          <div className="sm:flex sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-5">
+            <div className="sm:w-1/3">
+              <label className="block text-sm font-medium mb-1" htmlFor="name">Business Name</label>
+              <input id="name" className="form-input w-full" type="text" />
+            </div>
+            <div className="sm:w-1/3">
+              <label className="block text-sm font-medium mb-1" htmlFor="business-id">Business ID</label>
+              <input id="business-id" className="form-input w-full" type="text" />
+            </div>
+            <div className="sm:w-1/3">
+              <label className="block text-sm font-medium mb-1" htmlFor="location">Location</label>
+              <input id="location" className="form-input w-full" type="text" />
+            </div>
+          </div>
+        </section>
+        {/* Email */}
+        <section>
+          <h2 className="text-xl leading-snug text-slate-800 font-bold mb-1">Email</h2>
+          <div className="text-sm">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia.</div>
+          <div className="flex flex-wrap mt-5">
+            <div className="mr-2">
+              <label className="sr-only" htmlFor="email">Business email</label>
+              <input id="email" className="form-input" type="email" />
+            </div>
+            <button className="btn border-slate-200 hover:border-slate-300 shadow-sm text-indigo-500">Change</button>
+          </div>
+        </section>
+        {/* Password */}
+        <section>
+          <h2 className="text-xl leading-snug text-slate-800 font-bold mb-1">Password</h2>
+          <div className="text-sm">You can set a permanent password if you don't want to use temporary login codes.</div>
+          <div className="mt-5">
+            <button className="btn border-slate-200 shadow-sm text-indigo-500">Set New Password</button>
+          </div>
+        </section>
+        {/* Smart Sync */}
+        <section>
+          <h2 className="text-xl leading-snug text-slate-800 font-bold mb-1">Smart Sync update for Mac</h2>
+          <div className="text-sm">With this update, online-only files will no longer appear to take up hard drive space.</div>
+          <div className="flex items-center mt-5">
+            <div className="form-switch">
+              <input type="checkbox" id="toggle" className="sr-only" checked={sync} onChange={() => setSync(!sync)} />
+              <label className="bg-slate-400" htmlFor="toggle">
+                <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                <span className="sr-only">Enable smart sync</span>
+              </label>
+            </div>
+            <div className="text-sm text-slate-400 italic ml-2">{sync ? 'On' : 'Off'}</div>
+          </div>
+        </section>
+      </div>
+      {/* Panel footer */}
+      <footer>
+        <div className="flex flex-col px-6 py-5 border-t border-slate-200">
+          <div className="flex self-end">
+            <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Cancel</button>
+            <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3">Save Changes</button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default AccountPanel;

src/partials/settings/AppsPanel.jsx

@@ -0,0 +1,374 @@
+import React from 'react';
+
+function AppsPanel() {
+  return (
+    <div className="grow">
+
+      {/* Panel body */}
+      <div className="p-6">
+        <h2 className="text-2xl text-slate-800 font-bold mb-5">Connected Apps</h2>
+
+        {/* General */}
+        <div className="mb-6">
+          {/* 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">Utility</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>
+            </ul>
+          </div>
+        </div>
+
+        {/* Connected Apps cards */}
+        <section className="pb-6 border-b border-slate-200">
+          <div className="grid grid-cols-12 gap-6">
+            {/* Card 1 */}
+            <div className="col-span-full xl:col-span-6 2xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header className="flex items-center mb-4">
+                    <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-tr from-indigo-500 to-indigo-300 mr-3">
+                      <svg className="w-10 h-10 fill-current text-white" viewBox="0 0 40 40">
+                        <path d="M26.946 18.005a.583.583 0 00-.53-.34h-6.252l.985-3.942a.583.583 0 00-1.008-.52l-7 8.167a.583.583 0 00.442.962h6.252l-.984 3.943a.583.583 0 001.008.52l7-8.167a.583.583 0 00.087-.623z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">MaterialStack</h3>
+                  </header>
+                  <div className="text-sm">Lorem ipsum dolor sit amet eiusmod sed do eiusmod tempor.</div>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-4">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="flex space-x-3">
+                      <div className="flex items-center text-slate-400">
+                        <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
+                          <path d="M14.14 9.585a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM10.125 2.188a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM4.663 10.5a2.49 2.49 0 00-1.932-1.234 4.624 4.624 0 01-.037-.516 4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 00.694 8.75c.004.391.04.781.11 1.166a2.5 2.5 0 103.86.584z" />
+                        </svg>
+                        <div className="text-sm text-slate-500">4K+</div>
+                      </div>
+                      <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="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>
+                        <div className="text-sm text-amber-600">4.7</div>
+                      </div>
+                    </div>
+                    {/* Right side */}
+                    <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm 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>
+                      <span>Connected</span>
+                    </button>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 2 */}
+            <div className="col-span-full xl:col-span-6 2xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header className="flex items-center mb-4">
+                    <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-tr from-emerald-500 to-emerald-300 mr-3">
+                      <svg className="w-10 h-10 fill-current text-white" viewBox="0 0 40 40">
+                        <path d="M26.946 18.005a.583.583 0 00-.53-.34h-6.252l.985-3.942a.583.583 0 00-1.008-.52l-7 8.167a.583.583 0 00.442.962h6.252l-.984 3.943a.583.583 0 001.008.52l7-8.167a.583.583 0 00.087-.623z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">MaterialStack</h3>
+                  </header>
+                  <div className="text-sm">Lorem ipsum dolor sit amet eiusmod sed do eiusmod tempor.</div>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-4">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="flex space-x-3">
+                      <div className="flex items-center text-slate-400">
+                        <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
+                          <path d="M14.14 9.585a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM10.125 2.188a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM4.663 10.5a2.49 2.49 0 00-1.932-1.234 4.624 4.624 0 01-.037-.516 4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 00.694 8.75c.004.391.04.781.11 1.166a2.5 2.5 0 103.86.584z" />
+                        </svg>
+                        <div className="text-sm text-slate-500">4K+</div>
+                      </div>
+                      <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="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>
+                        <div className="text-sm text-amber-600">4.7</div>
+                      </div>
+                    </div>
+                    {/* Right side */}
+                    <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm 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>
+                      <span>Connected</span>
+                    </button>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 3 */}
+            <div className="col-span-full xl:col-span-6 2xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header className="flex items-center mb-4">
+                    <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-tr from-sky-500 to-sky-300 mr-3">
+                      <svg className="w-10 h-10 fill-current text-white" viewBox="0 0 40 40">
+                        <path d="M26.946 18.005a.583.583 0 00-.53-.34h-6.252l.985-3.942a.583.583 0 00-1.008-.52l-7 8.167a.583.583 0 00.442.962h6.252l-.984 3.943a.583.583 0 001.008.52l7-8.167a.583.583 0 00.087-.623z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">MaterialStack</h3>
+                  </header>
+                  <div className="text-sm">Lorem ipsum dolor sit amet eiusmod sed do eiusmod tempor.</div>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-4">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="flex space-x-3">
+                      <div className="flex items-center text-slate-400">
+                        <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
+                          <path d="M14.14 9.585a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM10.125 2.188a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM4.663 10.5a2.49 2.49 0 00-1.932-1.234 4.624 4.624 0 01-.037-.516 4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 00.694 8.75c.004.391.04.781.11 1.166a2.5 2.5 0 103.86.584z" />
+                        </svg>
+                        <div className="text-sm text-slate-500">4K+</div>
+                      </div>
+                      <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="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>
+                        <div className="text-sm text-amber-600">4.7</div>
+                      </div>
+                    </div>
+                    {/* Right side */}
+                    <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm 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>
+                      <span>Connected</span>
+                    </button>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 4 */}
+            <div className="col-span-full xl:col-span-6 2xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header className="flex items-center mb-4">
+                    <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-tr from-rose-500 to-rose-300 mr-3">
+                      <svg className="w-10 h-10 fill-current text-white" viewBox="0 0 40 40">
+                        <path d="M26.946 18.005a.583.583 0 00-.53-.34h-6.252l.985-3.942a.583.583 0 00-1.008-.52l-7 8.167a.583.583 0 00.442.962h6.252l-.984 3.943a.583.583 0 001.008.52l7-8.167a.583.583 0 00.087-.623z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">MaterialStack</h3>
+                  </header>
+                  <div className="text-sm">Lorem ipsum dolor sit amet eiusmod sed do eiusmod tempor.</div>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-4">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="flex space-x-3">
+                      <div className="flex items-center text-slate-400">
+                        <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
+                          <path d="M14.14 9.585a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM10.125 2.188a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM4.663 10.5a2.49 2.49 0 00-1.932-1.234 4.624 4.624 0 01-.037-.516 4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 00.694 8.75c.004.391.04.781.11 1.166a2.5 2.5 0 103.86.584z" />
+                        </svg>
+                        <div className="text-sm text-slate-500">4K+</div>
+                      </div>
+                      <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="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>
+                        <div className="text-sm text-amber-600">4.7</div>
+                      </div>
+                    </div>
+                    {/* Right side */}
+                    <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm 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>
+                      <span>Connected</span>
+                    </button>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 5 */}
+            <div className="col-span-full xl:col-span-6 2xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header className="flex items-center mb-4">
+                    <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-tr from-amber-500 to-amber-300 mr-3">
+                      <svg className="w-10 h-10 fill-current text-white" viewBox="0 0 40 40">
+                        <path d="M26.946 18.005a.583.583 0 00-.53-.34h-6.252l.985-3.942a.583.583 0 00-1.008-.52l-7 8.167a.583.583 0 00.442.962h6.252l-.984 3.943a.583.583 0 001.008.52l7-8.167a.583.583 0 00.087-.623z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">MaterialStack</h3>
+                  </header>
+                  <div className="text-sm">Lorem ipsum dolor sit amet eiusmod sed do eiusmod tempor.</div>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-4">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="flex space-x-3">
+                      <div className="flex items-center text-slate-400">
+                        <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
+                          <path d="M14.14 9.585a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM10.125 2.188a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM4.663 10.5a2.49 2.49 0 00-1.932-1.234 4.624 4.624 0 01-.037-.516 4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 00.694 8.75c.004.391.04.781.11 1.166a2.5 2.5 0 103.86.584z" />
+                        </svg>
+                        <div className="text-sm text-slate-500">4K+</div>
+                      </div>
+                      <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="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>
+                        <div className="text-sm text-amber-600">4.7</div>
+                      </div>
+                    </div>
+                    {/* Right side */}
+                    <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm 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>
+                      <span>Connected</span>
+                    </button>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 6 */}
+            <div className="col-span-full xl:col-span-6 2xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header className="flex items-center mb-4">
+                    <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-tr from-slate-500 to-slate-300 mr-3">
+                      <svg className="w-10 h-10 fill-current text-white" viewBox="0 0 40 40">
+                        <path d="M26.946 18.005a.583.583 0 00-.53-.34h-6.252l.985-3.942a.583.583 0 00-1.008-.52l-7 8.167a.583.583 0 00.442.962h6.252l-.984 3.943a.583.583 0 001.008.52l7-8.167a.583.583 0 00.087-.623z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">MaterialStack</h3>
+                  </header>
+                  <div className="text-sm">Lorem ipsum dolor sit amet eiusmod sed do eiusmod tempor.</div>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-4">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="flex space-x-3">
+                      <div className="flex items-center text-slate-400">
+                        <svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
+                          <path d="M14.14 9.585a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM10.125 2.188a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM4.663 10.5a2.49 2.49 0 00-1.932-1.234 4.624 4.624 0 01-.037-.516 4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 00.694 8.75c.004.391.04.781.11 1.166a2.5 2.5 0 103.86.584z" />
+                        </svg>
+                        <div className="text-sm text-slate-500">4K+</div>
+                      </div>
+                      <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="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>
+                        <div className="text-sm text-amber-600">4.7</div>
+                      </div>
+                    </div>
+                    {/* Right side */}
+                    <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm 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>
+                      <span>Connected</span>
+                    </button>
+                  </div>
+                </footer>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Trending Categories cards */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mt-6 mb-5">Trending Categories</h3>
+          <div className="grid grid-cols-12 gap-6">
+            {/* Card 1 */}
+            <div className="col-span-full xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header>
+                    <h3 className="text-lg text-slate-800 font-semibold mb-1">Programming</h3>
+                  </header>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-2">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="text-sm text-slate-500 italic">400+ Apps</div>
+                    {/* Right side */}
+                    <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 2 */}
+            <div className="col-span-full xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header>
+                    <h3 className="text-lg text-slate-800 font-semibold mb-1">Digital Marketing</h3>
+                  </header>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-2">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="text-sm text-slate-500 italic">320+ Apps</div>
+                    {/* Right side */}
+                    <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+                  </div>
+                </footer>
+              </div>
+            </div>
+            {/* Card 3 */}
+            <div className="col-span-full xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+              {/* Card content */}
+              <div className="flex flex-col h-full p-5">
+                <div className="grow">
+                  <header>
+                    <h3 className="text-lg text-slate-800 font-semibold mb-1">Music & Audio</h3>
+                  </header>
+                </div>
+                {/* Card footer */}
+                <footer className="mt-2">
+                  <div className="flex flex-wrap justify-between items-center">
+                    {/* Left side */}
+                    <div className="text-sm text-slate-500 italic">270+ Apps</div>
+                    {/* Right side */}
+                    <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">Explore -&gt;</a>
+                  </div>
+                </footer>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+    </div>
+  );
+}
+
+export default AppsPanel;

src/partials/settings/BillingPanel.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+
+function BillingPanel() {
+  return (
+    <div className="grow">
+
+      {/* Panel body */}
+      <div className="p-6 space-y-6">
+        <div>
+          <h2 className="text-2xl text-slate-800 font-bold mb-4">Billing & Invoices</h2>
+          <div className="text-sm">This workspace’s Basic Plan is set to <strong className="font-medium">$34</strong> per month and will renew on <strong className="font-medium">July 9, 2021</strong>.</div>
+        </div>
+
+        {/* Billing Information */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mb-1">Billing Information</h3>
+          <ul>
+            <li className="md:flex md:justify-between md:items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div className="text-sm text-slate-800 font-medium">Payment Method</div>
+              {/* Right */}
+              <div className="text-sm text-slate-800ml-4">
+                <span className="mr-3">Mastercard ending 9282</span>
+                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Edit</a>
+              </div>
+            </li>
+            <li className="md:flex md:justify-between md:items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div className="text-sm text-slate-800 font-medium">Billing Interval</div>
+              {/* Right */}
+              <div className="text-sm text-slate-800ml-4">
+                <span className="mr-3">Annually</span>
+                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Edit</a>
+              </div>
+            </li>
+            <li className="md:flex md:justify-between md:items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div className="text-sm text-slate-800 font-medium">VAT/GST Number</div>
+              {/* Right */}
+              <div className="text-sm text-slate-800ml-4">
+                <span className="mr-3">UK849700927</span>
+                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Edit</a>
+              </div>
+            </li>
+            <li className="md:flex md:justify-between md:items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div className="text-sm text-slate-800 font-medium">Your Address</div>
+              {/* Right */}
+              <div className="text-sm text-slate-800ml-4">
+                <span className="mr-3">34 Savoy Street, London, UK, 24E8X</span>
+                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Edit</a>
+              </div>
+            </li>
+            <li className="md:flex md:justify-between md:items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div className="text-sm text-slate-800 font-medium">Billing Address</div>
+              {/* Right */}
+              <div className="text-sm text-slate-800ml-4">
+                <span className="mr-3">hello@cruip.com</span>
+                <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Edit</a>
+              </div>
+            </li>
+          </ul>
+        </section>
+
+        {/* Invoices */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mb-1">Invoices</h3>
+          {/* Table */}
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400">
+              <tr className="flex flex-wrap md:table-row md:flex-no-wrap">
+                <th className="w-full block md:w-auto md:table-cell py-2">
+                  <div className="font-semibold text-left">Year</div>
+                </th>
+                <th className="w-full hidden md:w-auto md:table-cell py-2">
+                  <div className="font-semibold text-left">Plan</div>
+                </th>
+                <th className="w-full hidden md:w-auto md:table-cell py-2">
+                  <div className="font-semibold text-left">Amount</div>
+                </th>
+                <th className="w-full hidden md:w-auto md:table-cell py-2">
+                  <div className="font-semibold text-right"></div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm">
+              {/* Row */}
+              <tr className="flex flex-wrap md:table-row md:flex-no-wrap border-b border-slate-200 py-2 md:py-0">
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-left font-medium text-slate-800">2021</div>
+                </td>
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-left">Basic Plan - Annualy</div>
+                </td>
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-left font-medium">$349.00</div>
+                </td>
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-right flex items-center md:justify-end">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">HTML</a>
+                    <span className="block w-px h-4 bg-slate-200 mx-2" aria-hidden="true"></span>
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">PDF</a>
+                  </div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr className="flex flex-wrap md:table-row md:flex-no-wrap border-b border-slate-200 py-2 md:py-0">
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-left font-medium text-slate-800">2020</div>
+                </td>
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-left">Basic Plan - Annualy</div>
+                </td>
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-left font-medium">$349.00</div>
+                </td>
+                <td className="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                  <div className="text-right flex items-center md:justify-end">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">HTML</a>
+                    <span className="block w-px h-4 bg-slate-200 mx-2" aria-hidden="true"></span>
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">PDF</a>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </div>
+
+      {/* Panel footer */}
+      <footer>
+        <div className="flex flex-col px-6 py-5 border-t border-slate-200">
+          <div className="flex self-end">
+            <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Cancel</button>
+            <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3">Save Changes</button>
+          </div>
+        </div>
+      </footer>
+
+    </div>
+  );
+}
+
+export default BillingPanel;

src/partials/settings/FeedbackPanel.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+function FeedbackPanel() {
+  return (
+    <div className="grow">
+
+      {/* Panel body */}
+      <div className="p-6 space-y-6">
+        <div>
+          <h2 className="text-2xl text-slate-800 font-bold mb-4">Give Feedback</h2>
+          <div className="text-sm">Our product depends on customer feedback to improve the overall experience!</div>
+        </div>
+
+        {/* Rate */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mb-6">How likely would you recommend us to a friend or colleague?</h3>
+          <div className="w-full max-w-xl">
+            <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 className="flex">
+                  <button className="w-3 h-3 rounded-full bg-white border-2 border-slate-400">
+                    <span className="sr-only">1</span>
+                  </button>
+                </li>
+                <li className="flex">
+                  <button className="w-3 h-3 rounded-full bg-white border-2 border-slate-400">
+                    <span className="sr-only">2</span>
+                  </button>
+                </li>
+                <li className="flex">
+                  <button className="w-3 h-3 rounded-full bg-indigo-500 border-2 border-indigo-500">
+                    <span className="sr-only">3</span>
+                  </button>
+                </li>
+                <li className="flex">
+                  <button className="w-3 h-3 rounded-full bg-white border-2 border-slate-400">
+                    <span className="sr-only">4</span>
+                  </button>
+                </li>
+                <li className="flex">
+                  <button className="w-3 h-3 rounded-full bg-white border-2 border-slate-400">
+                    <span className="sr-only">5</span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div className="w-full flex justify-between text-sm text-slate-500 italic mt-3">
+              <div>Not at all</div>
+              <div>Extremely likely</div>
+            </div>
+          </div>
+        </section>
+
+        {/* Tell us in words */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mb-5">Tell us in words</h3>
+          {/* Form */}
+          <label className="sr-only" htmlFor="feedback">Leave a feedback</label>
+          <textarea id="feedback" className="form-textarea w-full focus:border-slate-300" rows="4" placeholder="I really enjoy…"></textarea>
+        </section>
+      </div>
+
+      {/* Panel footer */}
+      <footer>
+        <div className="flex flex-col px-6 py-5 border-t border-slate-200">
+          <div className="flex self-end">
+            <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Cancel</button>
+            <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3">Save Changes</button>
+          </div>
+        </div>
+      </footer>
+
+    </div>
+  );
+}
+
+export default FeedbackPanel;

src/partials/settings/NotificationsPanel.jsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+
+function NotificationsPanel() {
+
+  const [comments, setComments] = useState(true);
+  const [messages, setMessages] = useState(true);
+  const [mentions, setMentions] = useState(false);
+
+  return (
+    <div className="grow">
+
+      {/* Panel body */}
+      <div className="p-6 space-y-6">
+        <h2 className="text-2xl text-slate-800 font-bold mb-5">My Notifications</h2>
+
+        {/* General */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mb-1">General</h3>
+          <ul>
+            <li className="flex justify-between items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div>
+                <div className="text-slate-800 font-semibold">Comments and replies</div>
+                <div className="text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
+              </div>
+              {/* Right */}
+              <div className="flex items-center ml-4">
+                <div className="text-sm text-slate-400 italic mr-2">{comments ? 'On' : 'Off'}</div>
+                <div className="form-switch">
+                  <input type="checkbox" id="comments" className="sr-only" checked={comments} onChange={() => setComments(!comments)} />
+                  <label className="bg-slate-400" htmlFor="comments">
+                    <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                    <span className="sr-only">Enable smart sync</span>
+                  </label>
+                </div>
+              </div>
+            </li>
+            <li className="flex justify-between items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div>
+                <div className="text-slate-800 font-semibold">Messages</div>
+                <div className="text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
+              </div>
+              {/* Right */}
+              <div className="flex items-center ml-4">
+                <div className="text-sm text-slate-400 italic mr-2">{messages ? 'On' : 'Off'}</div>
+                <div className="form-switch">
+                  <input type="checkbox" id="messages" className="sr-only" checked={messages} onChange={() => setMessages(!messages)} />
+                  <label className="bg-slate-400" htmlFor="messages">
+                    <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                    <span className="sr-only">Enable smart sync</span>
+                  </label>
+                </div>
+              </div>
+            </li>
+            <li className="flex justify-between items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div>
+                <div className="text-slate-800 font-semibold">Mentions</div>
+                <div className="text-sm">Excepteur sint occaecat cupidatat non in culpa qui officia deserunt mollit.</div>
+              </div>
+              {/* Right */}
+              <div className="flex items-center ml-4">
+                <div className="text-sm text-slate-400 italic mr-2">{mentions ? 'On' : 'Off'}</div>
+                <div className="form-switch">
+                  <input type="checkbox" id="mentions" className="sr-only" checked={mentions} onChange={() => setMentions(!mentions)} />
+                  <label className="bg-slate-400" htmlFor="mentions">
+                    <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                    <span className="sr-only">Enable smart sync</span>
+                  </label>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </section>
+
+        {/* Shares */}
+        <section>
+          <h3 className="text-xl leading-snug text-slate-800 font-bold mb-1">Shares</h3>
+          <ul>
+            <li className="flex justify-between items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div>
+                <div className="text-slate-800 font-semibold">Shares of my content</div>
+                <div className="text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
+              </div>
+              {/* Right */}
+              <div className="flex items-center ml-4">
+                <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm">Manage</button>
+              </div>
+            </li>
+            <li className="flex justify-between items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div>
+                <div className="text-slate-800 font-semibold">Team invites</div>
+                <div className="text-sm">Excepteur sint occaecat cupidatat non in culpa qui officia deserunt mollit.</div>
+              </div>
+              {/* Right */}
+              <div className="flex items-center ml-4">
+                <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm">Manage</button>
+              </div>
+            </li>
+            <li className="flex justify-between items-center py-3 border-b border-slate-200">
+              {/* Left */}
+              <div>
+                <div className="text-slate-800 font-semibold">Smart connection</div>
+                <div className="text-sm">Excepteur sint occaecat cupidatat non in culpa qui officia deserunt mollit.</div>
+              </div>
+              {/* Right */}
+              <div className="flex items-center ml-4">
+                <div className="text-sm text-slate-400 italic mr-2 hidden md:block">Active</div>
+                <button className="btn-sm border-slate-200 hover:border-slate-300 shadow-sm text-rose-500">Disable</button>
+              </div>
+            </li>
+          </ul>
+        </section>
+      </div>
+
+      {/* Panel footer */}
+      <footer>
+        <div className="flex flex-col px-6 py-5 border-t border-slate-200">
+          <div className="flex self-end">
+            <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Cancel</button>
+            <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3">Save Changes</button>
+          </div>
+        </div>
+      </footer>
+
+    </div>
+  );
+}
+
+export default NotificationsPanel;

src/partials/settings/PlansPanel.jsx

@@ -0,0 +1,273 @@
+import React, { useState } from 'react';
+
+function PlansPanel() {
+
+  const [annual, setAnnual] = useState(true);
+
+  return (
+    <div className="grow">
+
+     {/* Panel body */}
+      <div className="p-6 space-y-6">
+
+       {/* Plans */}
+        <section>
+          <div className="mb-8">
+            <h2 className="text-2xl text-slate-800 font-bold mb-4">Plans</h2>
+            <div className="text-sm">This workspace’s Basic Plan is set to <strong className="font-medium">$34</strong> per month and will renew on <strong className="font-medium">July 9, 2021</strong>.</div>
+          </div>
+
+         {/* Pricing */}
+          <div>
+           {/* Toggle switch */}
+            <div className="flex items-center space-x-3 mb-6">
+              <div className="text-sm text-slate-500 font-medium">Monthly</div>
+              <div className="form-switch">
+                <input type="checkbox" id="toggle" className="sr-only" checked={annual} onChange={() => setAnnual(!annual)} />
+                <label className="bg-slate-400" htmlFor="toggle">
+                  <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                  <span className="sr-only">Pay annually</span>
+                </label>
+              </div>
+              <div className="text-sm text-slate-500 font-medium">Annually <span className="text-emerald-500">(-20%)</span></div>
+            </div>
+           {/* Pricing tabs */}
+            <div className="grid grid-cols-12 gap-6">
+             {/* Tab 1 */}
+              <div className="relative col-span-full xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+                <div className="absolute top-0 left-0 right-0 h-0.5 bg-emerald-500" aria-hidden="true"></div>
+                <div className="px-5 pt-5 pb-6 border-b border-slate-200">
+                  <header className="flex items-center mb-2">
+                    <div className="w-6 h-6 rounded-full shrink-0 bg-gradient-to-tr from-emerald-500 to-emerald-300 mr-3">
+                      <svg className="w-6 h-6 fill-current text-white" viewBox="0 0 24 24">
+                        <path d="M12 17a.833.833 0 01-.833-.833 3.333 3.333 0 00-3.334-3.334.833.833 0 110-1.666 3.333 3.333 0 003.334-3.334.833.833 0 111.666 0 3.333 3.333 0 003.334 3.334.833.833 0 110 1.666 3.333 3.333 0 00-3.334 3.334c0 .46-.373.833-.833.833z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">Basic</h3>
+                  </header>
+                  <div className="text-sm mb-2">Ideal for individuals that need a custom solution with custom tools.</div>
+                 {/* Price */}
+                  <div className="text-slate-800 font-bold mb-4">
+                    <span className="text-2xl">$</span><span className="text-3xl">{annual? '14': '19'}</span><span className="text-slate-500 font-medium text-sm">/mo</span>
+                  </div>
+                 {/* CTA */}
+                  <button className="btn border-slate-200 hover:border-slate-300 text-slate-600 w-full">Downgrade</button>
+                </div>
+                <div className="px-5 pt-4 pb-5">
+                  <div className="text-xs text-slate-800 font-semibold uppercase mb-4">What's included</div>
+                 {/* List */}
+                  <ul>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+             {/* Tab 2 */}
+              <div className="relative col-span-full xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+                <div className="absolute top-0 left-0 right-0 h-0.5 bg-sky-500" aria-hidden="true"></div>
+                <div className="px-5 pt-5 pb-6 border-b border-slate-200">
+                  <header className="flex items-center mb-2">
+                    <div className="w-6 h-6 rounded-full shrink-0 bg-gradient-to-tr from-sky-500 to-sky-300 mr-3">
+                      <svg className="w-6 h-6 fill-current text-white" viewBox="0 0 24 24">
+                        <path d="M12 17a.833.833 0 01-.833-.833 3.333 3.333 0 00-3.334-3.334.833.833 0 110-1.666 3.333 3.333 0 003.334-3.334.833.833 0 111.666 0 3.333 3.333 0 003.334 3.334.833.833 0 110 1.666 3.333 3.333 0 00-3.334 3.334c0 .46-.373.833-.833.833z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">Standard</h3>
+                  </header>
+                  <div className="text-sm mb-2">Ideal for individuals that need a custom solution with custom tools.</div>
+                 {/* Price */}
+                  <div className="text-slate-800 font-bold mb-4">
+                    <span className="text-2xl">$</span><span className="text-3xl">{annual? '34': '39'}</span><span className="text-slate-500 font-medium text-sm">/mo</span>
+                  </div>
+                 {/* CTA */}
+                  <button className="btn border-slate-200 bg-slate-100 text-slate-400 w-full cursor-not-allowed flex items-center" disabled>
+                    <svg className="w-3 h-3 shrink-0 fill-current 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>
+                    <span>Current Plan</span>
+                  </button>
+                </div>
+                <div className="px-5 pt-4 pb-5">
+                  <div className="text-xs text-slate-800 font-semibold uppercase mb-4">What's included</div>
+                 {/* List */}
+                  <ul>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+             {/* Tab 3 */}
+              <div className="relative col-span-full xl:col-span-4 bg-white shadow-md rounded-sm border border-slate-200">
+                <div className="absolute top-0 left-0 right-0 h-0.5 bg-indigo-500" aria-hidden="true"></div>
+                <div className="px-5 pt-5 pb-6 border-b border-slate-200">
+                  <header className="flex items-center mb-2">
+                    <div className="w-6 h-6 rounded-full shrink-0 bg-gradient-to-tr from-indigo-500 to-indigo-300 mr-3">
+                      <svg className="w-6 h-6 fill-current text-white" viewBox="0 0 24 24">
+                        <path d="M12 17a.833.833 0 01-.833-.833 3.333 3.333 0 00-3.334-3.334.833.833 0 110-1.666 3.333 3.333 0 003.334-3.334.833.833 0 111.666 0 3.333 3.333 0 003.334 3.334.833.833 0 110 1.666 3.333 3.333 0 00-3.334 3.334c0 .46-.373.833-.833.833z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg text-slate-800 font-semibold">Plus</h3>
+                  </header>
+                  <div className="text-sm mb-2">Ideal for individuals that need a custom solution with custom tools.</div>
+                 {/* Price */}
+                  <div className="text-slate-800 font-bold mb-4">
+                    <span className="text-2xl">$</span><span className="text-3xl">{annual? '74': '79'}</span><span className="text-slate-500 font-medium text-sm">/mo</span>
+                  </div>
+                 {/* CTA */}
+                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white w-full">Upgrade</button>
+                </div>
+                <div className="px-5 pt-4 pb-5">
+                  <div className="text-xs text-slate-800 font-semibold uppercase mb-4">What's included</div>
+                 {/* List */}
+                  <ul>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Lorem ipsum dolor sit amet</div>
+                    </li>
+                    <li className="flex items-center py-1">
+                      <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 className="text-sm">Quis nostrud exercitation</div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+       {/* Contact Sales */}
+        <section>
+          <div className="px-5 py-3 bg-indigo-50 border border-indigo-100 rounded-sm text-center xl:text-left xl:flex xl:flex-wrap xl:justify-between xl:items-center">
+            <div className="text-slate-800 font-semibold mb-2 xl:mb-0">Looking for different configurations?</div>
+            <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Contact Sales</button>
+          </div>
+        </section>
+
+       {/* FAQs */}
+        <section>
+          <div className="my-8">
+            <h2 className="text-2xl text-slate-800 font-bold">FAQs</h2>
+          </div>
+          <ul className="space-y-5">
+            <li>
+              <div className="font-semibold text-slate-800 mb-1">
+                What is the difference between the three versions?
+              </div>
+              <div className="text-sm">
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
+              </div>
+            </li>
+            <li>
+              <div className="font-semibold text-slate-800 mb-1">
+                Is there any difference between Basic and Plus licenses?
+              </div>
+              <div className="text-sm">
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              </div>
+            </li>
+            <li>
+              <div className="font-semibold text-slate-800 mb-1">
+                Got more questions?
+              </div>
+              <div className="text-sm">
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum in voluptate velit esse cillum dolore eu fugiat <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">contact us</a>.
+              </div>
+            </li>
+          </ul>
+        </section>
+
+      </div>
+
+     {/* Panel footer */}
+      <footer>
+        <div className="flex flex-col px-6 py-5 border-t border-slate-200">
+          <div className="flex self-end">
+            <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Cancel</button>
+            <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3">Save Changes</button>
+          </div>
+        </div>
+      </footer>
+
+    </div>
+  );
+}
+
+export default PlansPanel;

src/partials/settings/SettingsSidebar.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+function SettingsSidebar() {
+
+  const location = useLocation();
+  const { pathname } = location;
+
+  return (
+    <div className="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-3 py-6 border-b md:border-b-0 md:border-r border-slate-200 min-w-60 md:space-y-3">
+      {/* Group 1 */}
+      <div>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-3">Business settings</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">
+            <NavLink end to="/settings/account" className={`flex items-center px-2.5 py-2 rounded whitespace-nowrap ${pathname.includes('/settings/account') && 'bg-indigo-50'}`}>
+              <svg className={`w-4 h-4 shrink-0 fill-current text-slate-400 mr-2 ${pathname.includes('/settings/account') && 'text-indigo-400'}`} 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 ${pathname.includes('/settings/account') ? 'text-indigo-500' : 'hover:text-slate-700'}`}>My Account</span>
+            </NavLink>
+          </li>
+          <li className="mr-0.5 md:mr-0 md:mb-0.5">
+            <NavLink end to="/settings/notifications" className={`flex items-center px-2.5 py-2 rounded whitespace-nowrap ${pathname.includes('/settings/notifications') && 'bg-indigo-50'}`}>
+              <svg className={`w-4 h-4 shrink-0 fill-current text-slate-400 mr-2 ${pathname.includes('/settings/notifications') && 'text-indigo-400'}`} 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 className={`text-sm font-medium ${pathname.includes('/settings/notifications') ? 'text-indigo-500' : 'hover:text-slate-700'}`}>My Notifications</span>
+            </NavLink>
+          </li>
+          <li className="mr-0.5 md:mr-0 md:mb-0.5">
+            <NavLink end to="/settings/apps" className={`flex items-center px-2.5 py-2 rounded whitespace-nowrap ${pathname.includes('/settings/apps') && 'bg-indigo-50'}`}>
+              <svg className={`w-4 h-4 shrink-0 fill-current text-slate-400 mr-2 ${pathname.includes('/settings/apps') && 'text-indigo-400'}`} 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 className={`text-sm font-medium ${pathname.includes('/settings/apps') ? 'text-indigo-500' : 'hover:text-slate-700'}`}>Connected Apps</span>
+            </NavLink>
+          </li>
+          <li className="mr-0.5 md:mr-0 md:mb-0.5">
+            <NavLink end to="/settings/plans" className={`flex items-center px-2.5 py-2 rounded whitespace-nowrap ${pathname.includes('/settings/plans') && 'bg-indigo-50'}`}>
+              <svg className={`w-4 h-4 shrink-0 fill-current text-slate-400 mr-2 ${pathname.includes('/settings/plans') && 'text-indigo-400'}`} 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 ${pathname.includes('/settings/plans') ? 'text-indigo-500' : 'hover:text-slate-700'}`}>Plans</span>
+            </NavLink>
+          </li>
+          <li className="mr-0.5 md:mr-0 md:mb-0.5">
+            <NavLink end to="/settings/billing" className={`flex items-center px-2.5 py-2 rounded whitespace-nowrap ${pathname.includes('/settings/billing') && 'bg-indigo-50'}`}>
+              <svg className={`w-4 h-4 shrink-0 fill-current text-slate-400 mr-2 ${pathname.includes('/settings/billing') && 'text-indigo-400'}`} 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 className={`text-sm font-medium ${pathname.includes('/settings/billing') ? 'text-indigo-500' : 'hover:text-slate-700'}`}>Billing & Invoices</span>
+            </NavLink>
+          </li>
+        </ul>
+      </div>
+      {/* Group 2 */}
+      <div>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-3">Experience</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">
+            <NavLink end to="/settings/feedback" className={`flex items-center px-2.5 py-2 rounded whitespace-nowrap ${pathname.includes('/settings/feedback') && 'bg-indigo-50'}`}>
+              <svg className={`w-4 h-4 shrink-0 fill-current text-slate-400 mr-2 ${pathname.includes('/settings/feedback') && 'text-indigo-400'}`} viewBox="0 0 16 16">
+                <path d="M7.001 3h2v4h-2V3zm1 7a1 1 0 110-2 1 1 0 010 2zM15 16a1 1 0 01-.6-.2L10.667 13H1a1 1 0 01-1-1V1a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1zM2 11h9a1 1 0 01.6.2L14 13V2H2v9z" />
+              </svg>
+              <span className={`text-sm font-medium ${pathname.includes('/settings/feedback') ? 'text-indigo-500' : 'hover:text-slate-700'}`}>Give Feedback</span>
+            </NavLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default SettingsSidebar;