File: /mnt/data/smarthr-co-in/demo/react/documentation/nextjs.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="" />
<meta
name="description"
content="SmartHR - HRMS, Payroll, and HR Project Management Admin Dashboard Template (Nextjs)"
/>
<meta name="author" content="dreamstechnologies" />
<title>Smarthr - Online Documentation.</title>
<!-- App favicon -->
<link rel="shortcut icon" href="assets/img/logo/favicon.png" />
<!-- Vendor -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/prism.css" rel="stylesheet" />
<!-- Fontawesome CSS -->
<link
rel="stylesheet"
href="assets/plugins/fontawesome/css/fontawesome.min.css"
/>
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="assets/css/magnific-popup.css" />
<!-- Main CSS -->
<link id="mainCss" href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<main class="wrapper sb-default">
<!-- Loader -->
<div id="loader-wrapper">
<div class="loader-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container-fluid">
<div class="header-left">
<div class="left-header me-2">
<a href="javascript:void(0)" class="sidebar-toggle">
<span class="outer-ring">
<span class="inner-ring"></span>
</span>
</a>
</div>
<ul
class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
>
<li>
<a href="#" class="nav-link px-2 link-body-emphasis"
><i class="fa-solid fa-headset me-2"></i>Support</a
>
</li>
<li>
<a href="#" class="nav-link px-2 link-body-emphasis"
><i class="fa-brands fa-hire-a-helper me-2"></i>Hire Us</a
>
</li>
<li>
<a
href="https://smarthr.co.in/demo/react/documentation/changelog.html"
target="_blank"
class="nav-link px-2 link-body-emphasis"
><i class="fa-brands fa-hire-a-helper me-2"></i>Our Envato</a
>
</li>
</ul>
<div class="right-header">
<div class="me-2 header-item theme-light">
<button
type="button"
class="btn-topbar tools-item mode"
data-bs-theme-tool="light"
>
<span class="feather-icon"><i data-feather="moon"></i></span>
</button>
</div>
<div class="me-2 header-item theme-dark">
<button
type="button"
class="btn-topbar tools-item mode active"
data-bs-theme-tool="dark"
>
<span class="feather-icon"><i data-feather="sun"></i></span>
</button>
</div>
</div>
<div class="text-end">
<a
href="https://smarthr.dreamstechnologies.com/react/"
target="_blank"
class="btn btn-white btn-sm me-2"
><i class="fa-solid fa-link me-2"></i>Live Demo</a
>
<a
href="https://themeforest.net/item/smarthr-react-admin-template/28253842"
target="_blank"
class="btn btn-primary btn-sm"
><i class="fa-solid fa-cart-plus me-2"></i>Buy Now</a
>
</div>
</div>
</div>
</header>
<div class="doc-progress">
<div class="doc-progress-inner" id="scrollProgress"></div>
</div>
<div class="sidebar-overlay"></div>
<div class="sidebar" data-mode="light">
<div class="sidebar-logo">
<a href="index.html" class="sb-full"
><img src="assets/img/logo/logo.svg" alt="logo" /><span
class="badge badge-soft-danger fs-14 ms-1"
>Nextjs</span
></a
>
<a href="index.html" class="sb-collapse"
><img src="assets/img/logo/favicon.png" alt="logo"
/></a>
</div>
<div class="sidebar-inner">
<div class="sidebar-menu">
<ul id="menu-main-menu" class="sidebar-nav">
<li class="menu-item submenu">
<a href="#instructions" class="active menu-link">
<span class="feather-icon"><i data-feather="box"></i></span>
<span class="condense">Getting Started</span>
</a>
<ul class="sidebar-dropdown condense active">
<li>
<a href="#instructions" class="page-link drop">
<span class="menu-dash"><span></span></span>Introduction
</a>
</li>
<li>
<a href="#requirement" class="page-link drop"
><span class="menu-dash"><span></span></span
>Requirement</a
>
</li>
<li>
<a href="#features" class="page-link drop"
><span class="menu-dash"><span></span></span>Core
Features</a
>
</li>
<li>
<a href="#structure" class="page-link drop"
><span class="menu-dash"><span></span></span>File
Structure</a
>
</li>
</ul>
</li>
<li class="menu-item-separator"></li>
<li class="menu-title condense">Configuration</li>
<li class="menu-item">
<a href="#local_server" class="page-link">
<span class="feather-icon"><i data-feather="star"></i></span
><span class="condense"
><span class="hover-title"></span>Installation</span
>
</a>
</li>
<li class="menu-item">
<a href="#dark-mode" class="page-link">
<span class="feather-icon"><i data-feather="moon"></i></span><span class="condense"><span class="hover-title">Dark Mode</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#rtl" class="page-link">
<span class="feather-icon"><i data-feather="align-right"></i></span><span class="condense"><span class="hover-title">RTL</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#theme-layouts" class="page-link">
<span class="feather-icon"><i data-feather="tool"></i></span><span class="condense"><span class="hover-title">Theme Setup</span> </span>
</a>
</li>
<li class="menu-item-separator"></li>
<li class="menu-title condense">Info</li>
<li class="menu-item">
<a href="#faq" class="page-link">
<span class="feather-icon"><i data-feather="star"></i></span
><span class="condense"
><span class="hover-title">FAQs</span>
</span>
</a>
</li>
<li class="menu-item">
<a href="#support" class="page-link">
<span class="feather-icon"><i data-feather="star"></i></span
><span class="condense"
><span class="hover-title">Support</span>
</span>
</a>
</li>
<li class="menu-item submenu">
<a href="#license" class="menu-link">
<span class="feather-icon"
><i data-feather="command"></i
></span>
<span class="condense">License & Credits</span>
</a>
<ul class="sidebar-dropdown condense">
<li>
<a href="#license" class="page-link drop"
><span class="menu-dash"><span></span></span>License</a
>
</li>
<li>
<a href="#credits" class="page-link drop"
><span class="menu-dash"><span></span></span>Credits</a
>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#customwork" class="page-link">
<span class="feather-icon"
><i data-feather="briefcase"></i></span
><span class="condense"
><span class="hover-title">Custom Work</span>
</span>
</a>
</li>
<li class="menu-item">
<a href="changelog.html" class="page-link">
<span class="feather-icon"
><i data-feather="hexagon"></i
></span>
<span class="condense"
><span class="hover-title">Change Log</span>
</span>
<span
class="badge badge-changelog badge-soft-danger fw-semibold fs-8 px-2 ms-2 condense"
>v1.5.9</span
>
</a>
</li>
<li class="menu-item">
<a href="#thanks" class="page-link">
<span class="feather-icon"><i data-feather="smile"></i></span
><span class="condense"
><span class="hover-title">Thank You</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- main content -->
<div class="main-content">
<div class="container-fluid">
<!-- Page title & breadcrumb -->
<div class="page-title">
<div class="breadcrumb">
<h1>Getting Started</h1>
<ul>
<li><a href="index.html">Smarthr</a></li>
<li>Getting Started</li>
</ul>
</div>
</div>
<div class="row sections">
<div class="col-xl-12 col-md-12">
<!-- Introduction -->
<section class="section-block hentry" id="instructions">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
Introduction<a
class="anchor-link ms-2"
href="#instructions"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i
></span>
</a>
</div>
</div>
<div class="card-body">
<div class="intro">
<div class="item-details mb-3">
<div class="row">
<div class="col-md-6">
<ul class="auth-detail">
<li>
<strong>Item Name : </strong>SmartHR - HRMS,
Payroll, and HR Project Management Admin
Dashboard Template (Nextjs)
</li>
<li><strong>Published: </strong>07 March 2024</li>
<li>
<strong>Item Version : </strong
><span
class="badge badge-changelog badge-soft-danger fw-semibold fs-8 px-2 ms-2"
>v1.5.9</span
>
</li>
<li>
<strong>Author : </strong
><a
target="_blank"
href="https://dreamstechnologies.com"
>Dreams Technologies</a
>
</li>
<li>
Support via email:
<a href="mailto:[email protected]"
>[email protected]</a
>
</li>
<li>
Support via Themeforest:
<a
target="_blank"
href="https://themeforest.net/user/dreamstechnologies/"
>Take me there</a
>
</li>
</ul>
</div>
<div class="col-md-6">
<a
class="gallery-thumb"
href="assets/img/logo/smarthr.jpg"
>
<img
src="assets/img/logo/smarthr.jpg"
class="img-fluid"
alt="Smarthr Banner"
/>
</a>
</div>
</div>
</div>
<h5>
<a href="#" class="pro-thumbnail me-2" target="_blank">
<img
src="assets/img/logo/favicon.png"
class="img-fluid"
alt="Smarthr Thumbnail"
/>
</a>
SmartHR - HRMS, Payroll, and HR Project Management Admin
Dashboard Template (Nextjs)
</h5>
<p>
Smarthr Template offers you the best template created by
the latest version of React ^19.0.0 with super
responsive web design. Mix supports several common CSS.
We have also added few reusable components which speedup
your development.
</p>
</div>
<a
href="mailto:[email protected]"
class="btn btn-primary rounded-pill me-2"
target="_blank"
rel="noreferrer"
>Contact Support</a
>
<a
href="http://support.dreamstechnologies.com/"
class="btn btn-soft-primary rounded-pill"
target="_blank"
rel="noreferrer"
>Create Support ticket</a
>
</div>
</div>
</section>
<!-- Core Features -->
<section class="section-block hentry" id="requirement">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Requirement</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<div>
<h5 class="mb-3">Technologies</h5>
<ul class="custom-list mb-4">
<li><strong>Nextjs 15.5.2</strong></li>
<li><strong>React 19.2.0</strong></li>
<li><strong>Bootstrap 5</strong></li>
</ul>
<h5 class="mb-3">System Requirements</h5>
<ul class="custom-list mb-4">
<li>React version >= <strong>19.2.0</strong></li>
<li>Node js Package</li>
<li>Node version >= ^20.3.0</li>
<li>Yarn package (Optional)</li>
<li>Visual Studio Code</li>
<li>Terminal</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section-block hentry" id="features">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Core Features<a class="anchor-link ms-2" href="#features"><i
class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<p class="mb-0">
Build with Nextjs 15.5.2<br>
Build with React 19<br>
A file-system based router built<br>
Client-side and Server-side Rendering with Client and Server Components. <br>
Pure Components Based Nextjs<br>
Improved support for TypeScript<br>
Fully Responsive Design<br>
Multiple Layouts<br>
Fully Responsive Layout<br>
User friendly design<br>
Cross Browser Compatible<br>
Easy to Customize<br>
Clean & Well Commented Codes<br>
Compatible to all Mobile Devices<br>
Detailed Documentation<br>
Developer Friendly<br>
And Many More...<br>
</div>
</div>
</section>
<!-- File Structure -->
<section class="section-block hentry" id="structure">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">File Structure<a class="anchor-link ms-2"
href="#structure"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="file-structure">
<ul class="main-structure">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-folder-open"></i>template
</a>
<ul class="file-sub">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-folder-closed"></i>src
</a>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-folder-closed"></i>app
</a>
<ul class="file-hide">
<li><i class="fa-regular fa-folder-closed"></i>(auth)
</li>
<li><i class="fa-regular fa-folder-closed"></i>(features)
</li>
<li><i class="fa-regular fa-folder-closed"></i>(pos)
</li>
<li><i class="fa-regular fa-file-lines"></i>layout
</li>
<li><i class="fa-regular fa-file-lines"></i>not-found
</li>
</ul>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-folder-closed"></i>components
</a>
<ul class="file-hide">
<li><i
class="fa-regular fa-file-lines"></i>dashboard
</li>
<li><i
class="fa-regular fa-file-lines"></i>inventory
</li>
</ul>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-folder-closed"></i>data
</a>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-file-lines"></i>all_router
</a>
<ul>
</li>
</ul>
</ul>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i
class="fa-regular fa-folder-closed"></i>style
</a>
<ul class="file-hide">
<li><i
class="fa-regular fa-folder-closed"></i>css
</li>
<li><i
class="fa-regular fa-folder-closed"></i>fonts
</li>
<li><i
class="fa-regular fa-folder-closed"></i>icons
</li>
<li><i
class="fa-regular fa-folder-closed"></i>scss
</li>
</ul>
</li>
</ul>
<ul class="file-hide">
<li><i class="fa-regular fa-file-lines"></i>next.config.ts</li>
<li><i class="fa-regular fa-file-lines"></i>package.json
</li>
<li><i class="fa-regular fa-file-lines"></i>eslint.config.mjs</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section-block hentry" id="local_server">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Installation Guide<a class="anchor-link ms-2"
href="#php_config"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="server">
<div class="custom-list mb-4">
<pre class="language-javascript" tabindex="0"><code class="language-javascript"> After unzipping Template Files, you will find our product DreamsPos ->Nextjs(Source code)</code></pre>
<pre class="language-javascript" tabindex="0"><code class="language-javascript">Mandatory are npm and node are needed to run the nextjs project</code></pre>
<p>Once unzipped the files,run the command:</p>
<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm install (or) npm i</code></pre>
<p>For running a project , run the command:</p>
<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm run dev</code></pre>
<p>If you want to run the project and make the build in the
production mode then run the following command in the root
directory, otherwise the project will continue to run in the
development mode.</p>
<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm run build</code></pre>
<p>To install any plugins in your application, you have to run the
following command</p>
<pre class="language-javascript" tabindex="0"><code class="language-javascript">npm install plugin_name --save</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Dark Mode -->
<section class="section-block hentry" id="dark-mode">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
How can I switch to the Dark Mode?<a
class="anchor-link ms-2"
href="#dark-mode"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<div class="dark-mode-content">
<p>
If you use Dynamic Theme option. You will see a Light mode and Dark mode radio button in
the Theme Settings. Choose any one of the option to
change website theme.
</p>
<div class="config-images my-4">
<img
src="assets/img//configuration/dark-mode-settings.png"
alt="dark-image"
/>
</div>
<p>
If you need to set static Theme to your template please data-theme="dark" in <code class=" language-javascript">
<html data-theme="dark"></html>
</code> at index.html file in public folder.
</p>
</div>
</div>
</div>
</section>
<!-- /Dark Mode -->
<!-- RTL -->
<section class="section-block hentry" id="rtl">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
How can I switch to the RTL?<a
class="anchor-link ms-2"
href="#rtl"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<div class="server">
<ul>
<li>
<h6>Add Bootstarp RTL</h6>
<img src="assets/img/configuration/react-rtl.png" width="800px" alt="pic" >
<p class="mt-2">Please remove marked style in src/index.tsx file and replace it with below style </p>
<div class="mb-3">
<pre class="language-php"><code>"import "../node_modules/bootstrap/dist/css/bootstrap.rtl.min.css";"</code></pre>
</div>
</li>
<li>
<h6>Add Class in Body tag in public/index.html file</h6>
<img src="assets/img/configuration/rtl-2.png" width="800px" alt="pic" >
<div class="mb-3">
<pre class="language-php mt-2"><code>class="layout-mode-rtl"</code></pre>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- /RTL -->
<!-- Theme layouts -->
<section class="section-block hentry" id="theme-layouts">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
How Can I Use Theme Layouts?<a
class="anchor-link ms-2"
href="#rtl"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<p class="text-muted">
Please do the below change in the html element at
<code>public/index.html</code>
file. ex:
<code><html data-theme="default"></code>
</p>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-01.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="default"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-02.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="mini"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-03.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="horizontal"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-05.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="horizontal-single"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-06.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="detached"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-07.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="twocolumn"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-09.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="without-header"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-10.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="horizontal-overlay"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-11.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="horizontal-sidemenu"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-12.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="stacked"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-13.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="modern"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img
src="assets/img/layouts/layout-14.svg"
alt="image"
class="img-fluid shadow mb-3"
/>
</div>
<code>data-layout="transparent"</code>
</div>
</div>
</div>
<div class="my-4">
<img src="assets/img/configuration/off-theme.png" width="800px" alt="pic" >
<p>
If you didn't want to theme settings go
<code
>scr/feature-module/feature.tsx</code
>
and remove the ThemeSettings component:
</p>
</div>
</div>
</div>
</section>
<!-- /Theme layouts -->
<section class="section-block hentry" id="faq">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
FAQs<a class="anchor-link ms-2" href="#faq"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<div class="accordion" id="faq_list">
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Can I use this platform on multiple domains?
</button>
</h2>
<div
id="collapseOne"
class="accordion-collapse collapse"
data-bs-parent="#faq_list"
>
<div class="accordion-body">
With one purchase code you can use it on one domain
name. You need to get new license for every new
domain name, please check
<a
href="https://themeforest.net/licenses/standard"
target="_blank"
>Envato Help Page</a
>
for more information about licenses.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
I got a problem, How can I get support?
</button>
</h2>
<div
id="collapseTwo"
class="accordion-collapse collapse"
data-bs-parent="#faq_list"
>
<div class="accordion-body">
If you need support, or if you're facing any
problems, please contact us via
<a href="#">Envato Support</a> <br />
Please note that our respond can take up to 2
business days.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
What does the support include?
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
data-bs-parent="#faq_list"
>
<div class="accordion-body">
<ul class="list-disc">
<li>
Availability to answer questions, Answering
technical questions about item’s features,
Assistance with reported bugs and issues, Help
with included 3rd party assets.
</li>
<li>
Any customization request will be ignored.
</li>
<li>
Please make sure to read more about the
<a
href="https://themeforest.net/page/item_support_policy"
>support policy</a
>.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="support">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
Support<a class="anchor-link ms-2" href="#support"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<p>
If this documentation doesn't answer your questions, So,
Please send us Email via
<a
class="btn btn-primary btn-sm"
target="_blank"
href="https://dreamguystechnologies.atlassian.net/servicedesk/customer/portals"
>Item Support Page</a
>
</p>
<p>
We are located in GMT +5:30 time zone and we answer all
questions within 12-24 hours in weekdays. In some rare
cases the waiting time can be to 48 hours. (except holiday
seasons which might take longer).
</p>
<div class="alert alert-warning mb-4">
<span
class="badge rounded-pill text-bg-danger text-uppercase"
>Note:</span
>
<p class="mb-0">
While we aim to provide the best support possible,
please keep in mind that it only extends to verified
buyers and only to issues related to our template like
bugs and errors. Custom modifications or third party
module implementations are not included.
</p>
</div>
<h5>
Don’t forget to Rate Smarthr!
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
</h5>
<div class="alert alert-success mb-0">
Please Add your Review (Opinion) for Our template. It
would be a great support for us. <br />
Go to your <strong>themeforest Profile</strong> >
<strong>Downloads Tab</strong> > & then You can
Rate & Review for our script. <br />
Thank You.
</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="license">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
License<a class="anchor-link ms-2" href="#license"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<p>
Smarthr is developed by
<a
href="https://themeforest.net/user/dreamstechnologies/portfolio"
target="_blank"
>Dreams Technologies</a
>
and is available under both
<a
href="https://themeforest.net/licenses/standard"
target="_blank"
>Envato Extended & Regular License</a
>
options.
</p>
<h6>Regular License</h6>
<p>
Usage by either yourself or a single client is permitted
for a single end product, provided that end users are not
subject to any charges.
</p>
<h6>Extended License</h6>
<p>
For use by you or one client in a single end product for
which end users may be charged.
</p>
<p>
<a
href="https://themeforest.net/licenses/faq#main-differences-licenses-a"
target="_blank"
>What are the main differences between the Regular
License and the Extended License?</a
>
</p>
<div class="alert alert-info mb-0">
<span
class="badge rounded-pill text-bg-danger text-uppercase"
>Note</span
>
<p class="mb-0">
If you operate as a freelancer or agency, you have the
option to acquire the Extended License, which permits
you to utilize the item across multiple projects on
behalf of your clients.
</p>
</div>
</div>
</div>
</section>
<!-- Credits -->
<section class="section-block hentry" id="credits">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">
Credits<a class="anchor-link ms-2" href="#credits"
><i class="fa-solid fa-hashtag"></i
></a>
</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"
><i data-feather="maximize"></i></span
></a>
</div>
</div>
<div class="card-body">
<div class="table-responsive ref-table">
<table class="table table-borderless">
<thead class="thead-light">
<tr>
<th class="w-20">Plugin Name</th>
<th class="w-80">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-high-em">Antd</span></td>
<td>
<a
href="https://www.npmjs.com/package/antd"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/antd</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em"
>React Feather Icon</span
>
</td>
<td>
<a
href="https://www.npmjs.com/package/feather-icons-react"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/antd</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em"
>react-custom-scrollbars-2</span
>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-custom-scrollbars-2"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-custom-scrollbars-2</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">React Bootstrap</span>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-bootstrap"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-bootstrap</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">Font Awesome</span>
</td>
<td>
<a
href="http://fortawesome.github.io/Font-Awesome/"
class="link-high-em"
target="_blank"
>http://fortawesome.github.io/Font-Awesome/</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">React Select</span>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-select"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-select</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">React Apexcharts</span>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-apexcharts"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-apexcharts</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">React Slick</span>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-slick"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-slick</a
>
</td>
</tr>
<tr>
<td><span class="text-high-em">Yup</span></td>
<td>
<a
href="https://www.npmjs.com/package/yup"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/yup</a
>
</td>
</tr>
<tr>
<td><span class="text-high-em">Swiper</span></td>
<td>
<a
href="https://www.npmjs.com/package/swiper"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/swiper</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em"
>React Owl Carousel</span
>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-owl-carousel"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-owl-carousel</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em"
>React Tag Input Component</span
>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-tag-input-component"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-tag-input-component</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">React Count-up</span>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-countup"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-countup</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em"
>React Full Screen</span
>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-full-screen"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-full-screen</a
>
</td>
</tr>
<tr>
<td>
<span class="text-high-em">React Calendar</span>
</td>
<td>
<a
href="https://www.npmjs.com/package/react-calendar"
class="link-high-em"
target="_blank"
>https://www.npmjs.com/package/react-calendar</a
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="customwork">
<div class="custom-card bg-gr-1 text-center">
<div class="card-body">
<h4 class="card-title">
Do you need a customized application for your business?
</h4>
<p>
If you need a customized application for your business
depends on your specific requirements and goals, Please
contact us.
</p>
<p>
Customization can be the key to success, ensuring your
project perfectly aligns with your unique goals and
requirements.
</p>
<div class="hire">
<h6>Don't Miss Out on the Benefits of Customization!</h6>
<p>
Unlock the potential of your project. It's time to
ensure that your project isn't just another
cookie-cutter solution but a truly unique and effective
one.
</p>
<p>
Discover how customization can make a difference in your
project's success. Let's create a solution that's as
unique as your vision!
</p>
<ul>
<li>
We'll tailor the application to meet your specific
needs and preferences.
</li>
<li>
We will upload your website to the server and ensure
it is live.
</li>
</ul>
<div class="contact-btn mb-3">
<a
target="_blank"
href="https://calendly.com/dreamstechnologies"
class="btn btn-primary me-2"
><i class="fa-solid fa-calendar-days me-2"></i>Book an
Appointment</a
>
<a
href="mailto:[email protected]"
class="btn btn-primary"
><i class="fa-solid fa-calendar-days me-2"></i>Get a
Free Quote</a
>
</div>
<div class="contact-link">
<a
target="_blank"
href="mailto:[email protected]"
class="px-2 link-body-emphasis"
><i class="fa fa-envelope me-1"></i>
[email protected]</a
>
</div>
</div>
</div>
</div>
</section>
<section
class="custom-card page-block hentry min-h-100"
id="thanks"
>
<div class="card-body">
<div class="thanks">
<img src="assets/img/banners/ratings.svg" alt="thanks" />
<h2>Thank You</h2>
<p>
Thank you once again for downloading
<strong>Smarthr</strong>.<br />
We hope you're enjoying your experience, and we kindly
request that you take a moment to share your valuable
review and rating with us.
</p>
<strong>Review Link:</strong
><a
href="https://themeforest.net/downloads"
class="text-primary fw-bold fs-5"
target="_blank"
>https://themeforest.net/downloads</a
>
</div>
</div>
</section>
</div>
</div>
</div>
<footer class="content-footer footer">
<div
class="container-fluid d-flex flex-wrap justify-content-between align-items-center text-center py-3"
>
<div>
© 2015-
<script>
document.write(new Date().getFullYear());
</script>
<a
href="#"
class="footer-text fw-medium text-primary"
target="_blank"
>Dreams Technologies</a
>
</div>
<div class="social-icons">
<a href="#" class="footer-link me-2" target="_blank"
><i class="fa-brands fa-facebook"></i
></a>
<a href="#" class="footer-link me-2" target="_blank"
><i class="fa-brands fa-twitter"></i
></a>
<a href="#" class="footer-link me-2" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a href="#" class="footer-link me-2" target="_blank"
><i class="fa-brands fa-dribbble"></i
></a>
<a href="#" class="footer-link" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
</div>
</div>
</footer>
</div>
</main>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/feather.min.js"></script>
<script src="assets/js/jquery.zoom.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>