165 lines
11 KiB
TypeScript
165 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { InputText } from 'primereact/inputtext';
|
|
|
|
function Help() {
|
|
return (
|
|
<div>
|
|
<div className="card">
|
|
<div className="relative overflow-hidden h-20rem bg-primary flex flex-column align-items-center justify-content-center border-round mb-8">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="absolute w-full top-0 left-0">
|
|
<path
|
|
fill="var(--primary-600)"
|
|
fillOpacity="1"
|
|
d="M0,64L48,90.7C96,117,192,171,288,208C384,245,480,267,576,256C672,245,768,203,864,165.3C960,128,1056,96,1152,74.7C1248,53,1344,43,1392,37.3L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
|
|
></path>
|
|
</svg>
|
|
<div className="font-bold mb-5 text-4xl z-1">How can we help?</div>
|
|
<span className="p-input-icon-left w-9 md:w-6">
|
|
<i className="pi pi-search"></i>
|
|
<InputText id="name" type="text" placeholder="Search" style={{ borderRadius: '2rem' }} className={'w-full'} />
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid mb-5">
|
|
<div className="col-12 md:col-4 mb-5">
|
|
<div className="flex flex-column align-items-center">
|
|
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
<i className="pi pi-power-off text-4xl text-primary-700"></i>
|
|
</span>
|
|
<div className="text-2xl mb-3 font-medium">Getting Started</div>
|
|
<ul className="list-none m-0 p-0 text-center">
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
</li>
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
</li>
|
|
<li className="line-height-3 mb-3">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
</li>
|
|
<li>
|
|
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-4 mb-5">
|
|
<div className="flex flex-column align-items-center">
|
|
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
<i className="pi pi-arrows-h text-4xl text-primary-700"></i>
|
|
</span>
|
|
<div className="text-2xl mb-3 font-medium">Transactions</div>
|
|
<ul className="list-none m-0 p-0 text-center">
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
</li>
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
</li>
|
|
<li className="line-height-3 mb-3">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
</li>
|
|
<li>
|
|
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-4 mb-5">
|
|
<div className="flex flex-column align-items-center">
|
|
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
<i className="pi pi-user text-4xl text-primary-700"></i>
|
|
</span>
|
|
<div className="text-2xl mb-3 font-medium">Profile</div>
|
|
<ul className="list-none m-0 p-0 text-center">
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
</li>
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
</li>
|
|
<li className="line-height-3 mb-3">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
</li>
|
|
<li>
|
|
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-4 mb-5">
|
|
<div className="flex flex-column align-items-center">
|
|
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
<i className="pi pi-money-bill text-4xl text-primary-700"></i>
|
|
</span>
|
|
<div className="text-2xl mb-3 font-medium">Billing</div>
|
|
<ul className="list-none m-0 p-0 text-center">
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
</li>
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
</li>
|
|
<li className="line-height-3 mb-3">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
</li>
|
|
<li>
|
|
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-4 mb-5">
|
|
<div className="flex flex-column align-items-center">
|
|
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
<i className="pi pi-database text-4xl text-primary-700"></i>
|
|
</span>
|
|
<div className="text-2xl mb-3 font-medium">Integrations</div>
|
|
<ul className="list-none m-0 p-0 text-center">
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
</li>
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
</li>
|
|
<li className="line-height-3 mb-3">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
</li>
|
|
<li>
|
|
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-4 mb-5">
|
|
<div className="flex flex-column align-items-center">
|
|
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
<i className="pi pi-lock text-4xl text-primary-700"></i>
|
|
</span>
|
|
<div className="text-2xl mb-3 font-medium">Security</div>
|
|
<ul className="list-none m-0 p-0 text-center">
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
</li>
|
|
<li className="line-height-3 mb-1">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
</li>
|
|
<li className="line-height-3 mb-3">
|
|
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
</li>
|
|
<li>
|
|
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Help;
|