first commit
This commit is contained in:
kandrusyak
550
src/pages/utility/KnowledgeBase.jsx
Normal file
550
src/pages/utility/KnowledgeBase.jsx
Normal file
@@ -0,0 +1,550 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
function KnowledgeBase() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
|
||||
{/* Search area */}
|
||||
<div className="relative flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8 py-8 lg:py-16 bg-indigo-500 overflow-hidden">
|
||||
{/* Glow */}
|
||||
<div className="absolute pointer-events-none" aria-hidden="true">
|
||||
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="ill-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#FFF" stopOpacity="0" offset="100%" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle
|
||||
style={{ mixBlendMode: 'overlay' }}
|
||||
cx="588"
|
||||
cy="650"
|
||||
r="256"
|
||||
transform="translate(-332 -394)"
|
||||
fill="url(#ill-a)"
|
||||
fillRule="evenodd"
|
||||
opacity=".48"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Illustration */}
|
||||
<div className="absolute pointer-events-none" aria-hidden="true">
|
||||
<svg width="1280" height="361" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="ill2-b">
|
||||
<stop stopColor="#A5B4FC" offset="0%" />
|
||||
<stop stopColor="#818CF8" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="ill2-c">
|
||||
<stop stopColor="#4338CA" offset="0%" />
|
||||
<stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
|
||||
</linearGradient>
|
||||
<path id="ill2-a" d="m64 0 64 128-64-20-64 20z" />
|
||||
<path id="ill2-e" d="m40 0 40 80-40-12.5L0 80z" />
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<g transform="rotate(51 -92.764 293.763)">
|
||||
<mask id="ill2-d" fill="#fff">
|
||||
<use xlinkHref="#ill2-a" />
|
||||
</mask>
|
||||
<use fill="url(#ill2-b)" xlinkHref="#ill2-a" />
|
||||
<path fill="url(#ill2-c)" mask="url(#ill2-d)" d="M64-24h80v152H64z" />
|
||||
</g>
|
||||
<g transform="rotate(-51 618.151 -940.113)">
|
||||
<mask id="ill2-f" fill="#fff">
|
||||
<use xlinkHref="#ill2-e" />
|
||||
</mask>
|
||||
<use fill="url(#ill2-b)" xlinkHref="#ill2-e" />
|
||||
<path fill="url(#ill2-c)" mask="url(#ill2-f)" d="M40.333-15.147h50v95h-50z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="relative w-full max-w-2xl mx-auto text-center">
|
||||
<div className="mb-5">
|
||||
<h1 className="text-2xl md:text-3xl text-white font-bold">👋 What Can We Help You Find?</h1>
|
||||
</div>
|
||||
<form className="relative">
|
||||
<label htmlFor="action-search" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<input id="action-search" className="form-input pl-9 py-3 focus:border-slate-300 w-full" type="search" />
|
||||
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
|
||||
<svg
|
||||
className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Sections */}
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* Popular Topics */}
|
||||
<div>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-xl text-slate-800 font-bold">Popular Topics</h2>
|
||||
</div>
|
||||
{/* Grid */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 lg:sidebar-expanded:grid-cols-2 xl:sidebar-expanded:grid-cols-4 gap-6">
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon1-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<path
|
||||
d="M19.236 21.995h-3.333c-.46 0-.833.352-.833.786v9.428c0 .434.373.786.833.786h4.167V22.78c0-.434-.374-.786-.834-.786Z"
|
||||
fill="#4F46E5"
|
||||
opacity=".88"
|
||||
/>
|
||||
<path
|
||||
d="M34.234 20.073a2.393 2.393 0 0 0-.735-.116h-5v-2.609c0-3.325-2.157-4.297-3.298-4.347a.828.828 0 0 0-.611.24.888.888 0 0 0-.257.63v4.032L21 22.077v10.924h10.19c1.1.005 2.073-.744 2.392-1.842l2.308-7.826a2.711 2.711 0 0 0-.181-1.988 2.528 2.528 0 0 0-1.475-1.272Z"
|
||||
fill="url(#icon1-a)"
|
||||
transform="translate(-.93 -.005)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">Getting Started</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon2-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<path
|
||||
d="M26.5 19c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V35l-4.108-2.148a10 10 0 0 1-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C18 22.183 21.805 19 26.5 19Z"
|
||||
fill="#4F46E5"
|
||||
opacity=".88"
|
||||
/>
|
||||
<path
|
||||
d="M23 13c-5.523 0-10 3.582-10 8 0 1.797.75 3.45 2 4.785V31l4.833-2.416c.996.266 2.059.416 3.167.416 5.523 0 10-3.582 10-8s-4.477-8-10-8Z"
|
||||
fill="url(#icon2-a)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">In-app Messaging</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon3-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<circle fill="url(#icon3-a)" cx="30.5" cy="17.5" r="4.5" />
|
||||
<circle fill="#4F46E5" opacity=".88" cx="17.5" cy="17.5" r="4.5" />
|
||||
<circle fill="#4F46E5" opacity=".88" cx="30.5" cy="30.5" r="4.5" />
|
||||
<circle fill="url(#icon3-a)" cx="17.5" cy="30.5" r="4.5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">Apps & Tools</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon4-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<path
|
||||
d="M34.327 18.194H10.12c-.495 0-.897.358-.897.798v14.404c0 .44.402.798.897.798h24.207c.495 0 .896-.357.896-.798V18.992c0-.44-.401-.798-.896-.798Z"
|
||||
fill="#4F46E5"
|
||||
opacity=".88"
|
||||
/>
|
||||
<path
|
||||
d="M29.09 0H4.883c-.494 0-.896.357-.896.798v14.404c0 .44.402.798.896.798H29.09c.495 0 .897-.357.897-.798V.798c0-.44-.402-.798-.897-.798Z"
|
||||
fill="url(#icon4-a)"
|
||||
transform="rotate(-8 126.748 -40.297)"
|
||||
/>
|
||||
<path d="M25.194 25.777a3 3 0 1 1-.835-5.942 3 3 0 0 1 .835 5.942Z" fill="#6366F1" opacity=".72" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">Billing & Invoices</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon5-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<path
|
||||
d="M31.074 20.692a5.516 5.516 0 0 0-7.878-1.107c-.172.133-.311.293-.463.44-.106-.184-.196-.375-.324-.55a5.516 5.516 0 0 0-7.878-1.108c-2.49 1.932-3 5.56-1.14 8.103l7.142 9.207 9.402-6.882c2.49-1.931 3-5.56 1.139-8.103Z"
|
||||
fill="#4F46E5"
|
||||
opacity=".88"
|
||||
/>
|
||||
<path
|
||||
d="M20.353 2.998a5.516 5.516 0 0 0-7.955 0c-.152.156-.268.333-.398.5-.13-.167-.246-.344-.398-.5a5.516 5.516 0 0 0-7.955 0c-2.196 2.26-2.196 5.924 0 8.183L12 19.304l8.353-8.123c2.196-2.26 2.196-5.924 0-8.183Z"
|
||||
fill="url(#icon5-a)"
|
||||
transform="rotate(16 -34.482 60.533)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">Support</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon6-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<path
|
||||
d="M33.83 16.57 9.803 19.52c-.491.06-.846.464-.793.901l1.756 14.297c.054.437.496.743.987.683l24.026-2.95c.492-.06.847-.464.793-.901l-1.755-14.297c-.054-.438-.496-.743-.987-.683Z"
|
||||
fill="#4F46E5"
|
||||
opacity=".88"
|
||||
/>
|
||||
<path
|
||||
d="M28.712 0H4.505c-.495 0-.897.357-.897.798v14.404c0 .44.402.798.897.798h24.207c.494 0 .896-.357.896-.798V.798c0-.44-.402-.798-.896-.798Z"
|
||||
fill="url(#icon6-a)"
|
||||
transform="rotate(8 -86.45 77.005)"
|
||||
/>
|
||||
<path fill="#6366F1" opacity=".72" d="m23.646 19.765 4.533 3.667-5.368 2.275z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">Multimedia / Files</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon7-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-.186 -.042)" fillRule="nonzero" fill="none">
|
||||
<circle fill="#554FE8" cx="20" cy="26.993" r="10" />
|
||||
<circle fill="url(#icon7-a)" cx="25.122" cy="24" r="11" />
|
||||
<path
|
||||
fill="#6366F1"
|
||||
opacity=".72"
|
||||
d="m26.255 22.605-1.569-3.586-.922 3.804-3.735.327 3.26 2.195-.864 3.91 2.927-2.626 3.339 2.078-1.53-3.7 2.83-2.729z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">App Rewards</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="bg-slate-100 rounded-sm text-center p-5">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="grow mb-2">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex w-12 h-12 rounded-full bg-indigo-400">
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon8-a">
|
||||
<stop stopColor="#FFF" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fillRule="nonzero" fill="none">
|
||||
<path
|
||||
d="M18.648 35.069c.232.217.46.322.798.31.337-.012.558-.132.775-.365l1.95-2.094c1.028.414 2.504.813 4.076.758 1.798-.063 3.688-.692 5.426-2.441 3.686-3.956 4.05-12.862 4.038-13.199-.012-.337-.136-.67-.368-.888-.233-.217-.574-.317-.91-.306-.338.012-9.405 1.23-12.875 4.953-2.168 2.327-2.41 5.037-1.883 7.27l6.61-3.946-7.804 8.378a1.206 1.206 0 0 0 .167 1.57Z"
|
||||
fill="#554FE8"
|
||||
/>
|
||||
<path
|
||||
d="M.353 17.663c.225.224.45.337.787.337s.562-.113.786-.337l2.024-2.026c1.011.45 2.473.9 4.046.9 1.799 0 3.71-.562 5.508-2.25C17.326 10.462 18 1.575 18 1.237c0-.337-.112-.675-.337-.9C17.438.113 17.1 0 16.763 0c-.337 0-9.441.9-13.038 4.5-2.248 2.25-2.585 4.95-2.136 7.2l6.744-3.712-8.093 8.1a1.206 1.206 0 0 0 .113 1.575Z"
|
||||
fill="url(#icon8-a)"
|
||||
transform="rotate(13 -42.427 83.827)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-1">Contact Us</h3>
|
||||
<div className="text-sm">Lorem ipsum dolor sit consectetur adipiscing elit sed do.</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
Explore ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Popular Guides */}
|
||||
<div>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-xl text-slate-800 font-bold">Popular Guides</h2>
|
||||
</div>
|
||||
{/* Grid */}
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
|
||||
{/* Item */}
|
||||
<div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
|
||||
<div className="flex h-full">
|
||||
{/* Icon */}
|
||||
<svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
|
||||
</svg>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Content */}
|
||||
<div className="grow mb-2">
|
||||
<div className="font-semibold text-slate-800 mb-1">Documents For Business Verification</div>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
View ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
|
||||
<div className="flex h-full">
|
||||
{/* Icon */}
|
||||
<svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
|
||||
</svg>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Content */}
|
||||
<div className="grow mb-2">
|
||||
<div className="font-semibold text-slate-800 mb-1">Delayed Or Missing Payouts</div>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
View ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
|
||||
<div className="flex h-full">
|
||||
{/* Icon */}
|
||||
<svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
|
||||
</svg>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Content */}
|
||||
<div className="grow mb-2">
|
||||
<div className="font-semibold text-slate-800 mb-1">Update Existing Bank Account Information</div>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
View ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item */}
|
||||
<div className="w-full p-3 rounded-sm text bg-white border border-slate-200">
|
||||
<div className="flex h-full">
|
||||
{/* Icon */}
|
||||
<svg className="w-4 h-4 shrink-0 fill-indigo-400 mt-[3px] mr-3" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
|
||||
</svg>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Content */}
|
||||
<div className="grow mb-2">
|
||||
<div className="font-semibold text-slate-800 mb-1">Close A Mosaic Account</div>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.
|
||||
</div>
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
View ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default KnowledgeBase;
|
||||
Reference in New Issue
Block a user