File: /mnt/data/smarthr-co-in/demo/react/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SFL721JHB5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SFL721JHB5');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SmartHR React Template | HR Management Admin Dashboard</title>
<!-- Meta -->
<meta name="description" content="Professional React HR template for recruitment, payroll & attendance. Customizable admin dashboard with analytics. Regular & Extended licenses available.">
<meta name="keywords" content="HR Management, HR Dashboard, Admin Template, Admin Dashboard, Bootstrap Admin, HR Admin Panel, Employee Management, Human Resources Dashboard, Responsive Admin Template, Web App Dashboard, HRMS Admin, Staff Management Dashboard, Bootstrap 5 Admin, Modern Admin Template, Admin UI Kit, ThemeForest Admin Template, SaaS Dashboard, Project Management Admin, HR Web Application, RTL Dashboard" />
<meta name="author" content="Dreamguys - HR Management (HTML + React) Admin Template - Smarthr">
<!-- Canonical -->
<link rel="canonical" href="https://smarthr.co.in/demo/react/">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@dreamguystech">
<meta name="twitter:title" content="HR Management Admin React Template | SmartHR">
<meta name="twitter:description" content="SmartHR is a complete Human Resource Management Solution to automate your human work with various features. Try Demo and Buy Now!">
<meta name="twitter:image" content="assets/img/preview-banner.jpg">
<meta name="twitter:image:alt" content="Smarthr">
<!-- Facebook -->
<meta property="og:url" content="https://smarthr.dreamstechnologies.com/react">
<meta property="og:title" content="HR Management Admin React Template | SmartHR">
<meta property="og:description" content="SmartHR is a complete Human Resource Management Solution to automate your human work with various features. Try Demo and Buy Now!">
<meta property="og:title" content="SmartHR React Template | HR Management Dashboard" />
<meta property="og:description" content="Professional React HR template for recruitment, payroll & attendance management" />
<meta property="og:url" content="https://smarthr.co.in/demo/react/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://smarthr.dreamstechnologies.com/react/assets/img/preview-banner.jpg" />
<!-- Font Family -->
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon-180x180.png">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Main.css -->
<link rel="stylesheet" href="assets/css/meanmenu.css">
<!-- Tabler Icon CSS -->
<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.css">
<!-- Fontawesome Icon CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<!-- Swiper CSS -->
<link rel="stylesheet" href="assets/plugins/swiper/swiper-bundle.min.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.min.css">
</head>
<body>
<!-- Header -->
<div class="main-header">
<header>
<div class="container">
<div class="offcanvas-info">
<div class="offcanvas-wrap">
<div class="offcanvas-detail">
<div class="offcanvas-head d-flex justify-content-between align-items-center mb-3">
<a href="index.html">
<img src="assets/img/logo.svg" alt="logo-img">
</a>
<div class="offcanvas-close">
<i class="ti ti-x"></i>
</div>
</div>
<div class="mobile-menu fix mb-3"></div>
<div class="offcanvas__contact">
<div class="mt-4">
<a href="https://themeforest.net/item/smarthr-react-admin-template/28253842" target="_blank" class="btn btn-dark w-100"><i class="ti ti-shopping-cart me-2"></i>Buy Template</a>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas-overlay"></div>
<div class="header-nav">
<div class="main-menu-wrapper">
<div class="navbar-logo">
<a class="logo-link header-logo" href="#home">
<img src="assets/img/logo.svg" class="logo logo-display" alt="Logo">
</a>
</div>
<nav id="mobile-menu">
<ul class="main-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#demos">Demos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#inner-pages">Inner Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ</a>
</li>
</ul>
</nav>
<div class="header-btn d-flex align-items-center">
<a href="https://themeforest.net/item/smarthr-react-admin-template/28253842" target="_blank" class="btn btn-dark"><i class="ti ti-shopping-cart-up me-2"></i>Buy Template</a>
<div class="header__hamburger d-xl-none my-auto">
<div class="sidebar-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<!-- /Header -->
<!-- Hero Section -->
<section class="hero-section" id="home">
<div class="hero-content position-relative">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto wow fadeInUp" data-wow-delay="0.3s">
<div class="banner-content-head">
<div class="text-center banner-head">
<h1 class="text-white display-1">Professional HR Management Template with <span class="text-skyblue">React & Bootstrap</span></h1>
<p class="text-light mb-4">A complete HR solution designed to enhance your recruitment process with ease.</p>
<div class="d-flex align-items-center justify-content-center">
<a href="https://smarthr.dreamstechnologies.com/react/template/" target="_blank" class="btn btn-white">
<img src="assets/img/icons/react.svg" class="me-1" alt="SmartHR Admin Template">
<span class="fs-16 fw-medium">React</span>
</a>
<a href="https://smarthr.dreamstechnologies.com/nextjs/template/" target="_blank" class="btn btn-white">
<img src="assets/img/icons/nextjs.svg" class="me-1" alt="SmartHR Admin Template">
<span class="fs-16 fw-medium">Nextjs</span>
</a>
</div>
</div>
<div class="banner-img position-relative">
<span><img src="assets/img/banner-img.png" class="banner-main-img" alt="SmartHR Admin Template"></span>
<span><img src="assets/img/bg/react-icon.svg" class="banner-icon-1 floating-y" alt="SmartHR Admin Template"></span>
</div>
<div class="banner-bg">
<img src="assets/img/bg/banner-bg-01.svg" class="banner-bg-01" alt="SmartHR Admin Template">
<img src="assets/img/bg/banner-bg-02.svg" class="banner-bg-02" alt="SmartHR Admin Template">
<img src="assets/img/bg/banner-bg-03.png" class="banner-bg-03" alt="SmartHR Admin Template">
<img src="assets/img/bg/banner-bg-04.png" class="banner-bg-04" alt="SmartHR Admin Template">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Hero Section -->
<!-- Overview Section -->
<section class="section overview-sec custom-padding">
<div class="sec-bg">
<img src="assets/img/bg/sec-bg-03.png" class="sec-bg-1" alt="SmartHR Admin Template">
<img src="assets/img/bg/sec-bg-04.png" class="sec-bg-2" alt="SmartHR Admin Template">
</div>
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Overview
<i></i>
<i></i>
</div>
<h2>All-in-One HR Solution for Growing Businesses</h2>
</div>
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body p-3">
<div class="card-img mb-3">
<a href="javascript:void(0);"><img src="assets/img/overview/overview-01.jpg" class="rounded" alt="SmartHR Admin Template"></a>
</div>
<div class="text-center">
<h3 class="mb-1 fs-16">Effortless Job Listings</h3>
<p class="text-truncate line-clamb-2">Simplify your recruitment efforts by creating and managing job postings</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body p-3">
<div class="card-img mb-3">
<a href="javascript:void(0);"><img src="assets/img/overview/overview-02.jpg" class="rounded" alt="SmartHR Admin Template"></a>
</div>
<div class="text-center">
<h3 class="mb-1 fs-16">Real-Time Analytics</h3>
<p class="text-truncate line-clamb-2">Access insights on employee performance, attendance, and more.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body p-3">
<div class="card-img mb-3">
<a href="javascript:void(0);"><img src="assets/img/overview/overview-03.jpg" class="rounded" alt="SmartHR Admin Template"></a>
</div>
<div class="text-center">
<h3 class="mb-1 fs-16">Candidate Tracking</h3>
<p class="text-truncate line-clamb-2">Streamline and manage your entire hiring pipeline with ease</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body p-3">
<div class="card-img mb-3">
<a href="javascript:void(0);"><img src="assets/img/overview/overview-04.jpg" class="rounded" alt="SmartHR Admin Template"></a>
</div>
<div class="text-center">
<h3 class="mb-1 fs-16">Customizable Theme Settings</h3>
<p class="text-truncate line-clamb-2">Adjust and customize your platform with intuitive theme settings</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Choose Template Section -->
<!-- Use Case -->
<section class="section use-case-sec pt-0">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Use Case
<i></i>
<i></i>
</div>
<h2>Designed for HR Professionals</h2>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="usecase-card mb-4">
<span class="usecase-icon mx-auto d-flex align-items-center justify-content-center">
<img src="assets/img/icons/use-case-icon-01.svg" alt="SmartHR Admin Template">
</span>
<div class="text-center">
<h3 class="fs-16 fw-medium mb-2">Small Teams</h3>
<p class="text-truncate line-clamb-2">Effortlessly manage recruitment, attendance, and payroll all in one centralized platform</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="usecase-card mb-4">
<span class="usecase-icon mx-auto d-flex align-items-center justify-content-center">
<img src="assets/img/icons/use-case-icon-02.svg" alt="">
</span>
<div class="text-center">
<h3 class="fs-16 fw-medium mb-2">Growing Teams</h3>
<p class="text-truncate line-clamb-2">Scale your HR operations with advanced features like analytics and reporting.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="usecase-card mb-4">
<span class="usecase-icon mx-auto d-flex align-items-center justify-content-center">
<img src="assets/img/icons/use-case-icon-03.svg" alt="SmartHR Admin Template">
</span>
<div class="text-center">
<h3 class="fs-16 fw-medium mb-2">Large Enterprises</h3>
<p class="text-truncate line-clamb-2">Streamline operations across multiple departments with collaborative tools.</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<a href="https://smarthr.dreamstechnologies.com/react/template/index" target="_blank" class="btn btn-dark"><i class="ti ti-player-play me-2"></i>Live Demo</a>
</div>
</div>
</section>
<!-- /Use Case -->
<!-- Dashboard Demo Section -->
<section class="section demo-sec" id="demos">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Demos
<i class="bg-white"></i>
<i class="bg-white"></i>
</div>
<h2 class="text-white">See the Template in Action</h2>
</div>
<div class="row">
<div class="col-md-10 mx-auto">
<div class="template-inner-tab">
<ul class="nav nav-pills justify-content-center mb-4" id="pills-tab" role="tablist">
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link active" id="pills-dashboard-tab" data-bs-toggle="pill" data-bs-target="#pills-dashboard" type="button" role="tab" aria-selected="false">Admin Dashboard</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab2" data-bs-toggle="pill" data-bs-target="#pills-dashboard2" type="button" role="tab" aria-selected="true">Employee Dashboard</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab3" data-bs-toggle="pill" data-bs-target="#pills-dashboard3" type="button" role="tab" aria-selected="false">Deals Dashboard</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab4" data-bs-toggle="pill" data-bs-target="#pills-dashboard4" type="button" role="tab" aria-selected="false">Leads Dashboard</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab5" data-bs-toggle="pill" data-bs-target="#pills-dashboard5" type="button" role="tab" aria-selected="false">Super Admin</button>
</li>
</ul>
<div class="tab-content dashboard-tab">
<div class="tab-pane fade show active" id="pills-dashboard" role="tabpanel">
<div class="card card-hover">
<div class="card-body">
<div class="dashboard-img rounded-top pb-0">
<a href="https://smarthr.dreamstechnologies.com/react/template/index" target="_blank"><img src="assets/img/inner-pages/dashboard-01.jpg" class="rounded-top" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard2" role="tabpanel">
<div class="card card-hover">
<div class="card-body">
<div class="dashboard-img rounded-top pb-0">
<a href="https://smarthr.dreamstechnologies.com/react/template/employee-dashboard" target="_blank"><img src="assets/img/inner-pages/dashboard-02.jpg" class="rounded-top" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard3" role="tabpanel">
<div class="card card-hover">
<div class="card-body">
<div class="dashboard-img rounded-top pb-0">
<a href="https://smarthr.dreamstechnologies.com/react/template/deals-dashboard" target="_blank"><img src="assets/img/inner-pages/dashboard-03.jpg" class="rounded-top" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard4" role="tabpanel">
<div class="card card-hover">
<div class="card-body">
<div class="dashboard-img rounded-top pb-0">
<a href="https://smarthr.dreamstechnologies.com/react/template/leads-dashboard" target="_blank"><img src="assets/img/inner-pages/dashboard-04.jpg" class="rounded-top" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard5" role="tabpanel">
<div class="card card-hover">
<div class="card-body">
<div class="dashboard-img rounded-top pb-0">
<a href="https://smarthr.dreamstechnologies.com/react/template/super-admin/dashboard" target="_blank"><img src="assets/img/inner-pages/dashboard-05.jpg" class="rounded-top" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<a href="https://themeforest.net/item/smarthr-react-admin-template/28253842" target="_blank" class="btn btn-primary"><i class="ti ti-shopping-cart-up me-2"></i>Buy Template</a>
</div>
</div>
<div class="sec-bg">
<img src="assets/img/bg/sec-bg-06.png" class="sec-bg-1" alt="img">
<img src="assets/img/bg/sec-bg-05.png" class="sec-bg-2" alt="img">
</div>
</section>
<!-- /Dashboard Demo Section -->
<section class="section key-benifit-sec">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Key Benefits
<i></i>
<i></i>
</div>
<h2>Why Choose Our HR Admin Template?</h2>
</div>
<div class="row">
<div class="col-lg-6 d-flex">
<div class="flex-fill mb-4 mb-lg-0">
<div class="key-steps">
<div class="d-flex align-items-center mb-2">
<span class="flex-shrink-0 d-flex align-items-center justify-content-center me-2">1</span>
<h3 class="fs-20">Boost Productivity</h3>
</div>
<p class="text-truncate line-clamb-2">Automate repetitive tasks like candidate tracking, job postings, and payroll management to save time and focus on strategic HR activities.</p>
</div>
<div class="key-steps">
<div class="d-flex align-items-center mb-2">
<span class="flex-shrink-0 d-flex align-items-center justify-content-center me-2">2</span>
<h3 class="fs-20">Save Time</h3>
</div>
<p class="text-truncate line-clamb-2">With everything integrated into one platform, you can manage job listings, employee records, performance reviews, and more in just a few clicks.</p>
</div>
<div class="key-steps">
<div class="d-flex align-items-center mb-2">
<span class="flex-shrink-0 d-flex align-items-center justify-content-center me-2">3</span>
<h3 class="fs-20">Customizable and Scalable</h3>
</div>
<p class="text-truncate line-clamb-2">Whether you’re a startup or a large enterprise, you can customize the platform’s features, layouts, and reporting capabilities to match your specific requirements.</p>
</div>
<div class="key-steps mb-0">
<div class="d-flex align-items-center mb-2">
<span class="flex-shrink-0 d-flex align-items-center justify-content-center me-2">4</span>
<h3 class="fs-20">Enhanced Collaboration</h3>
</div>
<p class="text-truncate line-clamb-2">Share documents, track progress on tasks, and ensure smooth communication across departments to meet your organizational goals.</p>
</div>
</div>
</div>
<div class="col-lg-6 d-flex">
<div class="bg-light flex-fill key-sec-img">
<span><img src="assets/img/bg/key-sec-img-01.svg" class="key-bg-01" alt="SmartHR Admin Template"></span>
<span><img src="assets/img/bg/key-sec-img-02.png" class="key-bg-02" alt="SmartHR Admin Template"></span>
<span><img src="assets/img/bg/sec-bg-01.png" class="key-bg-03" alt="SmartHR Admin Template"></span>
<span><img src="assets/img/bg/sec-bg-02.png" class="key-bg-04" alt="SmartHR Admin Template"></span>
</div>
</div>
</div>
</div>
</section>
<!-- Why Smarthr Section -->
<section class="section counter-sec">
<div class="container">
<div class="row g-4">
<div class="col-sm-6 col-lg-3">
<div class="counter-item text-center wow fadeInUp" data-wow-delay="0.2s">
<h3 class="text-white mb-1"><span class="count-digit">10</span>+</h3>
<p class="fw-medium fs-14 text-white"><i class="ti ti-apps me-1"></i>Applications</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="counter-item text-center wow fadeInUp" data-wow-delay="0.4s">
<h3 class="text-white mb-1"><span class="count-digit">200</span>+</h3>
<p class="fw-medium fs-14 text-white"><i class="ti ti-files me-1"></i>Pages</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="counter-item text-center wow fadeInUp" data-wow-delay="0.6s">
<h3 class="text-white mb-1"><span class="count-digit">80</span>+</h3>
<p class="fw-medium fs-14 text-white"><i class="ti ti-layout me-1"></i>Widgets</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="counter-item text-center wow fadeInUp" data-wow-delay="0.8s">
<h3 class="text-white mb-1"><span class="count-digit">400</span>+</h3>
<p class="fw-medium fs-14 text-white"><i class="ti ti-components me-1"></i>Components</p>
</div>
</div>
</div>
</div>
<div class="sec-bg">
<img src="assets/img/bg/sec-bg-08.png" class="sec-bg-1" alt="img">
<img src="assets/img/bg/sec-bg-07.png" class="sec-bg-2" alt="img">
</div>
</section>
<!-- Why Smarthr Section -->
<!-- Inner Pages Section -->
<section class="section inner-pages-sec custom-padding" id="inner-pages">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Inner Pages
<i></i>
<i></i>
</div>
<h2>Prebuilt Pages to Accelerate Your Workflow</h2>
</div>
<div class="template-inner-tab">
<ul class="nav nav-pills justify-content-center mb-4" id="pills-tab2" role="tablist">
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link active" id="pills-dashboard-tab6" data-bs-toggle="pill" data-bs-target="#pills-dashboard6" type="button" role="tab" aria-selected="false">Applications</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab7" data-bs-toggle="pill" data-bs-target="#pills-dashboard7" type="button" role="tab" aria-selected="true">CRMS</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab8" data-bs-toggle="pill" data-bs-target="#pills-dashboard8" type="button" role="tab" aria-selected="false">Authentication</button>
</li>
<li class="nav-item me-3 mb-2" role="presentation">
<button class="nav-link" id="pills-dashboard-tab9" data-bs-toggle="pill" data-bs-target="#pills-dashboard9" type="button" role="tab" aria-selected="false">Other Modules</button>
</li>
</ul>
<div class="tab-content dashboard-tab">
<div class="tab-pane fade show active" id="pills-dashboard6" role="tabpanel">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/chat" target="_blank">Chats</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/chat" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/chat" target="_blank"><img src="assets/img/inner-pages/inner-page-01.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/video-call" target="_blank">Video Calls</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/video-call" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/video-call" target="_blank"><img src="assets/img/inner-pages/inner-page-02.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/voice-call" target="_blank">Voice Calls</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/voice-call" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/voice-call" target="_blank"><img src="assets/img/inner-pages/inner-page-03.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/calendar" target="_blank">Calendar</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/calendar" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/calendar" target="_blank"><img src="assets/img/inner-pages/inner-page-04.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/email" target="_blank">Emails</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/email" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/email" target="_blank"><img src="assets/img/inner-pages/inner-page-05.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/todo" target="_blank">To Do</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/todo" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/todo" target="_blank"><img src="assets/img/inner-pages/inner-page-06.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/file-manager" target="_blank">File Manager</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/file-manager" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/file-manager" target="_blank"><img src="assets/img/inner-pages/inner-page-07.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/social-feed" target="_blank">Social Feed</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/social-feed" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/social-feed" target="_blank"><img src="assets/img/inner-pages/inner-page-08.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/application/invoices" target="_blank">Invoices</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/application/invoices" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/application/invoices" target="_blank"><img src="assets/img/inner-pages/inner-page-09.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard7" role="tabpanel">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/contact-list" target="_blank">Contacts</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/contact-list" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/contact-list" target="_blank"><img src="assets/img/inner-pages/inner-page-10.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/companies-list" target="_blank">Companies</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/companies-list" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/companies-list" target="_blank"><img src="assets/img/inner-pages/inner-page-11.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/deals-list" target="_blank">Deals</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/deals-list" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/deals-list" target="_blank"><img src="assets/img/inner-pages/inner-page-12.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/leads-list" target="_blank">Leads</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/leads-list" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/leads-list" target="_blank"><img src="assets/img/inner-pages/inner-page-13.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/pipeline" target="_blank">Pipeline</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/pipeline" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/pipeline" target="_blank"><img src="assets/img/inner-pages/inner-page-14.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/activity" target="_blank">Activities</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/activity" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/activity" target="_blank"><img src="assets/img/inner-pages/inner-page-15.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard8" role="tabpanel">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/register" target="_blank">Sign Up</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/register" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/register" target="_blank"><img src="assets/img/inner-pages/inner-page-16.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/login" target="_blank">Sign In</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/login" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/login" target="_blank"><img src="assets/img/inner-pages/inner-page-17.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/forgot-password" target="_blank">Forgot Password</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/forgot-password" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/forgot-password" target="_blank"><img src="assets/img/inner-pages/inner-page-18.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/lock-screen" target="_blank">Lock Screen</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/lock-screen" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/lock-screen" target="_blank"><img src="assets/img/inner-pages/inner-page-19.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/error-404" target="_blank">Error 404</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/error-404" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/error-404" target="_blank"><img src="assets/img/inner-pages/inner-page-20.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/error-500" target="_blank">Error 500</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/error-500" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/error-500" target="_blank"><img src="assets/img/inner-pages/inner-page-21.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/under-maintenance" target="_blank">Under Maintenance</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/under-maintenance" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/under-maintenance" target="_blank"><img src="assets/img/inner-pages/inner-page-22.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/coming-soon" target="_blank">Coming Soon</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/coming-soon" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/coming-soon" target="_blank"><img src="assets/img/inner-pages/inner-page-23.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/under-construction" target="_blank">Under Construction</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/under-construction" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/under-construction" target="_blank"><img src="assets/img/inner-pages/inner-page-24.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dashboard9" role="tabpanel">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/employees" target="_blank">Employees</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/employees" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/employees" target="_blank"><img src="assets/img/inner-pages/inner-page-25.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/clients" target="_blank">Clients</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/clients" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/clients" target="_blank"><img src="assets/img/inner-pages/inner-page-26.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/projects" target="_blank">Projects</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/projects" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/projects" target="_blank"><img src="assets/img/inner-pages/inner-page-27.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/tasks" target="_blank">Tasks</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/tasks" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/tasks" target="_blank"><img src="assets/img/inner-pages/inner-page-28.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/tickets/ticket-list" target="_blank">Tickets</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/tickets/ticket-list" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/tickets/ticket-list" target="_blank"><img src="assets/img/inner-pages/inner-page-29.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/attendance-employee" target="_blank">Attendance</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/attendance-employee" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/attendance-employee" target="_blank"><img src="assets/img/inner-pages/inner-page-30.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/job-list" target="_blank">Jobs</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/job-list" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/job-list" target="_blank"><img src="assets/img/inner-pages/inner-page-31.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/candidates" target="_blank">Candidates</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/candidates" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/candidates" target="_blank"><img src="assets/img/inner-pages/inner-page-32.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-hover">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="fs-20"><a href="https://smarthr.dreamstechnologies.com/react/template/general-settings/profile-settings" target="_blank">Settings</a></h3>
<a href="https://smarthr.dreamstechnologies.com/react/template/general-settings/profile-settings" target="_blank" class="fs-24"><i class="ti ti-arrow-right"></i></a>
</div>
<div class="inner-img-bg">
<a href="https://smarthr.dreamstechnologies.com/react/template/general-settings/profile-settings" target="_blank"><img src="assets/img/inner-pages/inner-page-33.jpg" alt="SmartHR Admin Template"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sec-bg">
<img src="assets/img/bg/sec-bg-09.png" class="sec-bg-1" alt="img">
</div>
</section>
<!-- Inner Pages Section -->
<!-- Support Section -->
<section class="support-section bg-primary">
<div class="horizontal-slide bg-dark py-3 d-flex" data-direction="left" data-speed="speed">
<div class="slide-list d-flex">
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">Unlock HR Excellence</h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">Elevate Team Efficiency</h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">Maximize Productivity</h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">Simplify Your Workflow</h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">All-in-One HR Solution</h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">Complete HR Control </h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
<div class="support-item d-flex align-items-center flex-shrink-0 me-4">
<h6 class="text-white fw-medium">Streamline Recruitment</h6>
<span class="d-block ms-4"><i class="ti ti-cell"></i></span>
</div>
</div>
</div>
</section>
<!-- /Support Section -->
<!-- Layouts Section -->
<section class="section layouts-sec">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Layouts
<i></i>
<i></i>
</div>
<h2>Explore Versatile Layouts</h2>
</div>
<div class="row justify-content-center g-4">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-01.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Default</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-02.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Detached</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-03.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Horizontal Single</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-04.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Menu Stacked</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-05.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Mini</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-06.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Transparent</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-07.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">RTL</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-08.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Two Column</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-09.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Modern Layout</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-10.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Horizontal Overlay</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-11.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Menu Aside</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-12.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Bordered</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-13.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Only shadow</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-14.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Without Header</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-15.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Borderless</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-16.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Default</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-17.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Compact</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="layout-card card-hover p-2 rounded">
<span><img src="assets/img/layouts/layout-18.svg" alt="SmartHR Admin Template"></span>
<div class="text-center bg-white p-1 rounded-bottom">
<h3 class="fs-12 fw-medium">Hover View</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Layouts Section -->
<!-- Pricing Section -->
<section class="section price-section custom-padding" id="pricing">
<div class="sec-bg">
<img src="assets/img/bg/sec-bg-10.png" class="sec-bg-1" alt="SmartHR Admin Template">
<img src="assets/img/bg/sec-bg-11.png" class="sec-bg-2" alt="SmartHR Admin Template">
<img src="assets/img/bg/sec-bg-12.png" class="sec-bg-3" alt="SmartHR Admin Template">
</div>
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Pricing
<i class="bg-white"></i>
<i class="bg-white"></i>
</div>
<h2 class="text-white">Flexible Pricing Plans for Every Need</h2>
</div>
<div class="row">
<div class="col-xl-7 col-lg-9 mx-auto">
<div class="row g-4">
<div class="col-lg-6">
<div class="card pricing-card wow fadeInUp" data-wow-delay="0.2s">
<div class="card-header rounded-top border-bottom">
<div class="text-center">
<h3 class="mb-2">Regular License</h3>
<div class="pricing-head mb-2">
<h4 class="text-primary">$35</h4>
</div>
<p>Use, by you or one client, in a single end product which end users are not charged for.</p>
</div>
</div>
<div class="card-body">
<div class="pricing-body">
<ul class="pricing-list mb-3">
<li><i class="ti ti-circle-check me-2 text-success"></i>Full Source Code</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Premium Support</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Lifetime Free Updates</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Figma Design File</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>No Charge for End Users</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>6 Months of Support (Envato Support Policy)</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>All Features Included</li>
<li><i class="ti ti-circle-x me-2 text-danger"></i>For Commercial Projects</li>
<li><i class="ti ti-circle-x me-2 text-danger"></i>Priority Support </li>
<li><i class="ti ti-circle-x me-2 text-danger"></i>White-label Branding</li>
<li><i class="ti ti-circle-x me-2 text-danger"></i>SaaS Product Development</li>
<li><i class="ti ti-circle-x me-2 text-danger"></i>Installation Support</li>
</ul>
<div>
<a href="https://themeforest.net/item/smarthr-react-admin-template/28253842" target="_blank" class="btn btn-dark w-100">Choose Plan</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card pricing-card wow fadeInUp" data-wow-delay="0.2s">
<div class="card-header rounded-top border-bottom">
<div class="text-center">
<h3 class="mb-2">Extended License</h3>
<div class="pricing-head mb-2">
<h4 class="text-primary">$499
<span class="badge recommend-text fs-16 fw-medium rounded-pill">Recommended</span>
</h4>
</div>
<p>Use, by you or one client, in a single end product which end users can be charged for.</p>
</div>
</div>
<div class="card-body">
<div class="pricing-body">
<ul class="pricing-list mb-3">
<li><i class="ti ti-circle-check me-2 text-success"></i>Full Source Code</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Premium Support</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Lifetime Free Updates</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Figma Design File</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>No Charge for End Users</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>6 Months of Support (Envato Support Policy)</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>All Features Included</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>For Commercial Projects</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>Priority Support </li>
<li><i class="ti ti-circle-check me-2 text-success"></i>White-label Branding</li>
<li><i class="ti ti-circle-check me-2 text-success"></i>SaaS Product Development</li>
<li><i class="ti ti-circle-x me-2 text-danger"></i>Installation Support</li>
</ul>
<div>
<a href="https://themeforest.net/item/smarthr-react-admin-template/28253842" target="_blank" class="btn btn-dark w-100">Choose Plan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Pricing Section -->
<!-- Faq Section -->
<section class="section faq-sec" id="faq">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
FAQ
<i></i>
<i></i>
</div>
<h2>Frequently Asked Questions</h2>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<div class="accordion accordion-flush faq-cards" id="accordionFaq">
<div class="accordion-item mb-3 wow fadeInUp" data-wow-delay="0.2s">
<h3 class="accordion-header">
<button class="accordion-button px-0 pt-0 rounded" type="button" data-bs-toggle="collapse" data-bs-target="#faq-collapseOne" aria-expanded="false" aria-controls="faq-collapseOne">
<span class="d-inline-flex fs-28 me-3">01</span>What is Regular License?
</button>
</h3>
<div id="faq-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFaq">
<div class="accordion-body ps-5">
<p>In simple terms, Regular License means your end product is distributed for free</p>
</div>
</div>
</div>
<div class="accordion-item mb-3 wow fadeInUp" data-wow-delay="0.4s">
<h3 class="accordion-header">
<button class="accordion-button px-0 pt-0 rounded collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-collapsetwo" aria-expanded="false" aria-controls="faq-collapsetwo">
<span class="d-inline-flex fs-28 me-3">02</span>What is Extended License?
</button>
</h3>
<div id="faq-collapsetwo" class="accordion-collapse collapse" data-bs-parent="#accordionFaq">
<div class="accordion-body ps-5">
<p>Extended License allows building a single end product that you can use or transfer to a client where end users of the product can be charged for. For example; A subscription or a fixed price SaaS application.</p>
</div>
</div>
</div>
<div class="accordion-item mb-0 wow fadeInUp" data-wow-delay="0.6s">
<h3 class="accordion-header">
<button class="accordion-button rounded px-0 pt-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-collapsthree" aria-expanded="false" aria-controls="faq-collapsthree">
<span class="d-inline-flex fs-28 me-3">03</span>What will you get?
</button>
</h3>
<div id="faq-collapsthree" class="accordion-collapse collapse" data-bs-parent="#accordionFaq">
<div class="accordion-body ps-5 pb-0">
<p>All HTML files, All React files, CSS Files, SCSS Files, JS Files, Documentation, Reliable Technical Support System, Lifetime Template Updates, Template Documentation</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Faq Section -->
<section class="section-sub custom-design-sec">
<div class="container">
<div class="row align-items-center aos-init aos-animate" data-aos="fade-down">
<div class="col-lg-6">
<div class="section-header mb-4">
<h2 class="mb-2 text-white">Looking For A Custom Design?</h2>
<p class="text-white">We are happy to customise your products based on your needs, send us a note!!!</p>
</div>
</div>
<div class="col-lg-6">
<div class="subscribe mb-4">
<form id="contact-form" method="post">
<div class="messages"></div>
<div class="input-group">
<input maxlength="50" id="form_email" type="email" placeholder="Enter Your email here..." class="form-control" name="email" autocomplete="off">
<span class="input-group-addon">
<button id="submit_button" type="submit" aria-label="Submit"><i class="fa-solid fa-paper-plane"></i> </button>
</span>
</div>
<span class="alert" style="color: #ff9b44; display: none;" id="alert_message">Please enter a valid email</span>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="section testimonial-section">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Testimonials
<i></i>
<i></i>
</div>
<h2>What Our Clients Are Saying</h2>
</div>
<div class="testimonial-slider swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-light mb-0">
<div class="card-body">
<span class="d-flex align-items-center gap-1 mb-2">
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
</span>
<p class="mb-2">Effective design, and easy to implement in our current product. These are the things i was looking for when looking at this product. I'm more than happy with the product, support team was effective in helping with the elements i needed.</p>
<h3 class="fs-16">Robertselva</h3>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light mb-0">
<div class="card-body">
<span class="d-flex align-items-center gap-1 mb-2">
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
</span>
<p class="mb-2">Effective design, and easy to implement in our current product. These are the things i was looking for when looking at this product. I'm more than happy with the product, support team was effective in helping with the elements i needed.</p>
<h3 class="fs-16">Garaat</h3>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light mb-0">
<div class="card-body">
<span class="d-flex align-items-center gap-1 mb-2">
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
</span>
<p class="mb-2">Effective design, and easy to implement in our current product. These are the things i was looking for when looking at this product. I'm more than happy with the product, support team was effective in helping with the elements i needed.</p>
<h3 class="fs-16">Lia Maiella</h3>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light mb-0">
<div class="card-body">
<span class="d-flex align-items-center gap-1 mb-2">
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
<i class="ti ti-star-filled text-warning"></i>
</span>
<p class="mb-2">Effective design, and easy to implement in our current product. These are the things i was looking for when looking at this product. I'm more than happy with the product, support team was effective in helping with the elements i needed.</p>
<h3 class="fs-16">Sanjeewah</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-bg">
<img src="assets/img/bg/sec-bg-13.png" alt="icon" class="testimonial-bg-01">
<img src="assets/img/bg/sec-bg-14.png" alt="icon" class="testimonial-bg-02">
</div>
</section>
<!-- /Testimonial Section -->
<!-- Features Section -->
<section class="section feature-section custom-padding pt-0" id="features">
<div class="container">
<div class="section-header text-center">
<div class="fs-14 fw-medium text-primary title-bar mb-2">
Features
<i></i>
<i></i>
</div>
<h2>React Features</h2>
</div>
<div class="row">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-01.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">React 18</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-02.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">Scss</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-03.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">React Redux</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-04.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">Bootstrap 5</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-05.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">React Hooks</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-06.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">React Bootstrap </h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-07.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">Apex Chart</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-08.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">ANT DataTable </h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-09.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">ESLint</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-10.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">React Router</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-11.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">Full Calender</h3>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="framework-features card-hover bg-light rounded text-center mb-4">
<div class="p-4">
<span><img src="assets/img/icons/features-12.svg" alt="SmartHR Admin Template"></span>
</div>
<div class="bg-dark p-1 rounded-bottom">
<h3 class="fs-16 text-white fw-medium">NPM</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Features Section -->
<!-- Footer -->
<footer class="footer-bg">
<div class="container">
<div class="footer-top">
<div class="d-flex align-items-center justify-content-center flex-wrap row-gap-4 mb-4">
<div class="d-flex align-items-center me-4">
<img src="assets/img/icons/elite.svg" alt="SmartHR Admin Template">
<div class="text-gray-5 ms-2">Elite Author</div>
</div>
<div class="d-flex align-items-center me-4">
<img src="assets/img/icons/trendsetter.svg" alt="SmartHR Admin Template">
<div class="text-gray-5 ms-2">Trendsetter</div>
</div>
<div class="d-flex align-items-center">
<img src="assets/img/icons/author.svg" alt="SmartHR Admin Template">
<div class="text-gray-5 ms-2">Author Level</div>
</div>
</div>
<h2 class="text-white text-center display-1">
Build your web App with <br>
SmartHR React dashboard
</h2>
<div class="d-flex align-items-center justify-content-center">
<a href="https://themeforest.net/item/smarthr-react-admin-template/28253842" target="_blank" class="btn btn-primary d-inline-flex align-items-center me-3">
<i class="ti ti-shopping-cart-up me-1"></i>
Buy Template
</a>
</div>
<div class="footer-icon">
<img src="assets/img/icons/react-icon.svg" alt="icon">
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-12">
<div class="text-center text-md-left">
<p class="text-white fw-medium">Copyright 2025 © <a href="https://dreamstechnologies.com/" class="text-primary" target="_blank">Dreamstechnologies</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /Footer Bottom -->
</footer>
<!-- /Footer -->
<div class="back-to-top">
<a class="back-to-top-icon align-items-center justify-content-center d-flex" href="#top"><i class="fa-solid fa-arrow-up"></i></a>
</div>
<div class="media-icons">
<a href="https://wa.me/919600008844" target="_blank" class="whatsap-icon"><i class="fa-brands fa-whatsapp"></i></a>
<a href="mailto:[email protected]" class="mail-icon"><i class="fa-regular fa-envelope"></i></a>
</div>
<!-- Cursor -->
<div class="xb-cursor tx-js-cursor">
<div class="xb-cursor-wrapper">
<div class="xb-cursor--follower xb-js-follower"></div>
</div>
</div>
<!-- /Cursor -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var myModal = new bootstrap.Modal(document.getElementById('cybersalemodal'));
myModal.show();
});
</script>
<!-- Jquery JS -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Wow JS -->
<script src="assets/js/wow.min.js"></script>
<!-- MeanMenu Js -->
<script src="assets/js/jquery.meanmenu.min.js"></script>
<!-- Swiper Js -->
<script src="assets/plugins/swiper/swiper-bundle.min.js"></script>
<!-- counterup JS -->
<script src="assets/js/counter.js"></script>
<script src="assets/js/cursor.js"></script>
<!-- Script JS -->
<script src="assets/js/script.min.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://smarthr.co.in/demo/react/",
"url": "https://smarthr.co.in/demo/react/",
"name": "HR Management Admin React Template | SmartHR",
"description": "Professional React HR template for recruitment, payroll & attendance management",
"inLanguage": "en-US",
"isPartOf": {
"@type": "WebSite",
"@id": "https://smarthr.co.in/",
"url": "https://smarthr.co.in/",
"name": "SmartHR"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.82",
"reviewCount": "27",
"bestRating": "5"
},
"image": "https://smarthr.dreamstechnologies.com/react/assets/img/banner-img.png"
},
{
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://smarthr.co.in/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Demo",
"item": "https://smarthr.co.in/demo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "React Template",
"item": "https://smarthr.co.in/demo/react/"
}
]
},
{
"@type": "FAQPage",
"@id": "https://smarthr.co.in/demo/react/#faq",
"mainEntity": [
{
"@type": "Question",
"name": "What is SmartHR React Template?",
"acceptedAnswer": {
"@type": "Answer",
"text": "SmartHR React Template is a professional Bootstrap 5 admin dashboard designed for HR management systems. It includes 300+ pages for recruitment, payroll, attendance tracking, and employee management. Built with React 18 and fully responsive."
}
},
{
"@type": "Question",
"name": "What features are included in SmartHR?",
"acceptedAnswer": {
"@type": "Answer",
"text": "SmartHR includes recruitment management, attendance tracking, payroll processing, performance reviews, leave management, real-time analytics, dark mode, RTL support, and 300+ pre-built pages."
}
},
{
"@type": "Question",
"name": "Can I use SmartHR for commercial projects?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. The Regular License allows single end products. An Extended License is required for SaaS or subscription-based products."
}
},
{
"@type": "Question",
"name": "Does SmartHR include backend code?",
"acceptedAnswer": {
"@type": "Answer",
"text": "SmartHR is a frontend template only. You can integrate it with any backend such as Node.js, Laravel, Django, or .NET."
}
},
{
"@type": "Question",
"name": "What support is provided?",
"acceptedAnswer": {
"@type": "Answer",
"text": "SmartHR includes 6 months of premium support, lifetime updates, and complete documentation."
}
}
]
}
]
}
</script>
</body>
</html>