trainly / features.html
chandrackd's picture
Create website for Training Institute Management Software Website
1f6f746 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features - TIMS</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.feature-tab.active {
background-color: #4f46e5;
color: white;
}
.feature-tab:not(.active):hover {
background-color: #e0e7ff;
}
.module-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="book-open" class="h-8 w-8 text-indigo-600"></i>
<span class="ml-2 text-xl font-bold text-gray-900">TIMS</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
<a href="#" class="text-indigo-600 border-b-2 border-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
<a href="crm.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">CRM</a>
<a href="clients.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Clients</a>
<a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
<a href="contact.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a>
</div>
<div class="flex items-center">
<a href="contact.html#demo" class="ml-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Request Demo
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-indigo-700">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
<h1 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl lg:text-5xl" data-aos="fade-down">
Powerful Features for Training Institutes
</h1>
<p class="mt-6 max-w-3xl mx-auto text-xl text-indigo-100" data-aos="fade-up" data-aos-delay="200">
Comprehensive modules designed to streamline every aspect of your training institute management.
</p>
</div>
</div>
<!-- Features Tabs -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<div class="flex overflow-x-auto" id="feature-tabs">
<button class="feature-tab active px-6 py-3 text-sm font-medium rounded-t-lg" data-tab="core">
Core Features
</button>
<button class="feature-tab px-6 py-3 text-sm font-medium rounded-t-lg" data-tab="crm">
CRM Module
</button>
<button class="feature-tab px-6 py-3 text-sm font-medium rounded-t-lg" data-tab="technical">
Technical Features
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Core Features -->
<div id="core-features" class="feature-content pt-8 active">
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
<!-- Student Management -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="users"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Student Management</h3>
<p class="text-gray-500 mb-4">
Comprehensive student profiles with academic tracking and progress monitoring.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Admission and enrollment management</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Batch and course assignment</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Document management</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Progress tracking and reports</span>
</li>
</ul>
</div>
</div>
<!-- Course Management -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="book"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Course Management</h3>
<p class="text-gray-500 mb-4">
Create and manage courses with detailed curriculum planning.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Course creation and categorization</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Curriculum and syllabus management</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Batch scheduling</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Resource allocation</span>
</li>
</ul>
</div>
</div>
<!-- Attendance -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="calendar"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Attendance</h3>
<p class="text-gray-500 mb-4">
Automated attendance tracking with multiple verification methods.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Biometric integration</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>QR code check-in</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Manual entry options</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Automated notifications</span>
</li>
</ul>
</div>
</div>
<!-- Exam Management -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="edit"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Exam Management</h3>
<p class="text-gray-500 mb-4">
End-to-end exam processing from scheduling to result publication.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Exam scheduling</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Question bank</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Mark sheet generation</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Result analytics</span>
</li>
</ul>
</div>
</div>
<!-- Fee Management -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="dollar-sign"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Fee Management</h3>
<p class="text-gray-500 mb-4">
Automated fee collection with flexible payment options.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Fee structure setup</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Online payment integration</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Receipt generation</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Outstanding fee tracking</span>
</li>
</ul>
</div>
</div>
<!-- Reporting -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="bar-chart-2"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Reporting & Analytics</h3>
<p class="text-gray-500 mb-4">
Comprehensive reports to track institute performance.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Custom report builder</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Financial reports</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Student performance analytics</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Export to multiple formats</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- CRM Features -->
<div id="crm-features" class="feature-content pt-8 hidden">
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
<!-- Lead Management -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="user-plus"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Lead Management</h3>
<p class="text-gray-500 mb-4">
Capture and track potential students through multiple channels.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Web form integration</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Walk-in lead capture</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Lead scoring and prioritization</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Lead source tracking</span>
</li>
</ul>
</div>
</div>
<!-- Follow-ups -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="repeat"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Follow-ups</h3>
<p class="text-gray-500 mb-4">
Automated follow-up system to maximize conversion rates.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Automated reminders</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Call and email logging</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Task assignment</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Follow-up templates</span>
</li>
</ul>
</div>
</div>
<!-- Campaigns -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="mail"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Campaigns</h3>
<p class="text-gray-500 mb-4">
Targeted marketing campaigns to attract more students.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Email marketing</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>SMS campaigns</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Campaign performance tracking</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>ROI analysis</span>
</li>
</ul>
</div>
</div>
<!-- Admissions -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="user-check"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Admissions</h3>
<p class="text-gray-500 mb-4">
Streamlined admission process from inquiry to enrollment.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Online application forms</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Document verification</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Interview scheduling</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Enrollment confirmation</span>
</li>
</ul>
</div>
</div>
<!-- Sales Funnel -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="filter"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Sales Funnel</h3>
<p class="text-gray-500 mb-4">
Visualize and optimize your admission conversion process.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Pipeline visualization</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Conversion rate analysis</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Bottleneck identification</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Performance forecasting</span>
</li>
</ul>
</div>
</div>
<!-- CRM Reports -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="pie-chart"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">CRM Reports</h3>
<p class="text-gray-500 mb-4">
Detailed analytics on your marketing and admission performance.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Lead conversion reports</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Campaign effectiveness</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Admission counselor performance</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>ROI on marketing spend</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Technical Features -->
<div id="technical-features" class="feature-content pt-8 hidden">
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
<!-- Cloud Hosting -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="cloud"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Cloud Hosting</h3>
<p class="text-gray-500 mb-4">
Secure and reliable cloud infrastructure for your institute.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>99.9% uptime guarantee</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Automatic backups</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Global data centers</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Scalable resources</span>
</li>
</ul>
</div>
</div>
<!-- Security -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="shield"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Security</h3>
<p class="text-gray-500 mb-4">
Enterprise-grade security to protect your institute data.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>256-bit encryption</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Regular security audits</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Role-based access control</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>GDPR compliance</span>
</li>
</ul>
</div>
</div>
<!-- API -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="code"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">API Access</h3>
<p class="text-gray-500 mb-4">
Integrate TIMS with your existing systems and tools.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>RESTful API</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Comprehensive documentation</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Third-party integrations</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Developer support</span>
</li>
</ul>
</div>
</div>
<!-- Multi-language -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="globe"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Multi-language</h3>
<p class="text-gray-500 mb-4">
Support for multiple languages to serve diverse student populations.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Interface localization</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Content translation</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>RTL language support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Easy language switching</span>
</li>
</ul>
</div>
</div>
<!-- Backup -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="hard-drive"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Backup & Recovery</h3>
<p class="text-gray-500 mb-4">
Robust data protection with easy recovery options.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Daily automated backups</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Point-in-time recovery</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Encrypted storage</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Disaster recovery plan</span>
</li>
</ul>
</div>
</div>
<!-- Mobile App -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<i data-feather="smartphone"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Mobile App</h3>
<p class="text-gray-500 mb-4">
Full-featured mobile application for on-the-go management.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>iOS and Android support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Offline capabilities</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Push notifications</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-4 w-4 text-green-500 mr-2 mt-0.5"></i>
<span>Biometric login</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-indigo-700">
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-white sm:text-4xl" data-aos="fade-up">
<span class="block">Ready to see TIMS in action?</span>
<span class="block">Schedule a demo today.</span>
</h2>
<p class="mt-4 text-lg leading-6 text-indigo-200" data-aos="fade-up" data-aos-delay="100">
Our team will walk you through all the features and answer your questions.
</p>
<a href="contact.html#demo" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto" data-aos="fade-up" data-aos-delay="200">
Request a Free Demo
</a>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
<ul class="mt-4 space-y-4">
<li><a href="features.html" class="text-base text-gray-300 hover:text-white">Features</a></li>
<li><a href="crm.html" class="text-base text-gray-300 hover:text-white">CRM Module</a></li>
<li><a href="pricing.html" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
<li><a href="demo.html" class="text-base text-gray-300 hover:text-white">Demo</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
<ul class="mt-4 space-y-4">
<li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
<li><a href="blog.html" class="text-base text-gray-300 hover:text-white">Blog</a></li>
<li><a href="careers.html" class="text-base text-gray-300 hover:text-white">Careers</a></li>
<li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
<ul class="mt-4 space-y-4">
<li><a href="help.html" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
<li><a href="webinars.html" class="text-base text-gray-300 hover:text-white">Webinars</a></li>
<li><a href="guides.html" class="text-base text-gray-300 hover:text-white">Guides</a></li>
<li><a href="community.html" class="text-base text-gray-300 hover:text-white">Community</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
<ul class="mt-4 space-y-4">
<li><a href="privacy.html" class="text-base text-gray-300 hover:text-white">Privacy</a></li
</body>
</html>