admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
kandrusyak
2022-05-23 12:56:31 +03:00
commit 3cea343aaf
395 changed files with 37099 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/partials/fintech/FintechCard01.jsx Normal file
View File

@@ -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;

133
src/partials/fintech/FintechCard02.jsx Normal file
View File

@@ -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;

48
src/partials/fintech/FintechCard03.jsx Normal file
View File

@@ -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;

49
src/partials/fintech/FintechCard04.jsx Normal file
View File

@@ -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;

155
src/partials/fintech/FintechCard05.jsx Normal file
View File

@@ -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;

155
src/partials/fintech/FintechCard06.jsx Normal file
View File

@@ -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;

78
src/partials/fintech/FintechCard07.jsx Normal file
View File

@@ -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;

61
src/partials/fintech/FintechCard08.jsx Normal file
View File

@@ -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;

48
src/partials/fintech/FintechCard09.jsx Normal file
View File

@@ -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;

65
src/partials/fintech/FintechCard10.jsx Normal file
View File

@@ -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;

65
src/partials/fintech/FintechCard11.jsx Normal file
View File

@@ -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;

65
src/partials/fintech/FintechCard12.jsx Normal file
View File

@@ -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;

65
src/partials/fintech/FintechCard13.jsx Normal file
View File

@@ -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;

313
src/partials/fintech/FintechCard14.jsx Normal file
View File

@@ -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;

65
src/partials/fintech/FintechIntro.jsx Normal file
View File

@@ -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;