Create website for Training Institute Management Software Website

1. Objective

The purpose of the website is to present the Training Institute Management Software (TIMS) to potential clients (training centers, institutes, colleges, corporate training providers). The site should highlight features, benefits, and credibility while generating inquiries through an easy-to-use contact system.

2. Website Menu Structure

Main Menu Items:

Home

Features

CRM Module (optional: can be integrated within Features or kept separate for emphasis)

Clients / Case Studies

About Software

Contact Us

Footer Menu (Secondary):

Privacy Policy

Terms & Conditions

FAQs

Blog/Insights (optional for SEO)

3. Homepage Concept
Layout Idea

Hero Section:

Banner with headline (e.g., “Manage Your Training Institute Smarter with TIMS”)

Subtext explaining benefits (automation, CRM, analytics, etc.)

Call-to-action buttons: Request a Demo | Explore Features

Key Features Highlight (3–4 cards/icons):

Student Management

Fee & Finance

CRM & Admissions

Reporting & Analytics

How It Works (3-step visual):

Enroll Students →

Manage Courses & Faculty →

Track Reports & Grow

Screenshots / Demo Preview:
Mockup of dashboards and mobile app

Why Choose Us (USP section):

Cloud-based

Multi-branch support

Secure & scalable

Customizable

Client Testimonials / Logos

Showcase credibility

Call-to-Action (CTA) at Bottom

“Request a Free Demo Today”

4. Features Page

A detailed page listing all software modules with subsections:

Core Features (Student, Course, Fee, Exam, Attendance, Staff, Library, Communication, Reports)

CRM Module (Leads, Follow-ups, Campaigns, Admissions, Reports)

Technical Features (Cloud, Security, API, Multi-language, Backup, Role-based Access)

Visuals:

Icons for each feature

Optional expandable sections or tabs

5. CRM Module Page (Optional but Recommended)

If separated, highlight:

Lead Management

Follow-ups & Automation

Campaign Tracking

Admission Conversion Reports

Sales Funnel Visualization

Include a demo screenshot of CRM dashboard.

6. Clients / Case Studies Page

Client Logos (if available)

Case Studies / Use Cases:

Example 1: IT Training Center → Increased admissions by 30%

Example 2: Language Institute → Automated attendance saved 20 hours/week

Testimonials (text/video)

Call-to-action: “Join our growing list of successful institutes”

7. About Software Page

Overview: Short intro about the software & company behind it

Mission/ Vision: Helping institutes digitize operations

Team / Company Background (optional)

Why Our Software? (compare with traditional/manual methods)

Technology Stack (Laravel, Vue.js, APIs, Cloud, etc.)

8. Contact Us Page

Contact Form:

Name

Institute Name

Email / Phone

Message / Requirement

Direct Contact Info:

Office Address

Email

Phone/WhatsApp

Google Map Integration

Quick Links to social media pages

9. Suggested Extra Features for Website

Request a Demo Page/Form

Schedule a software demo directly

Blog/Resources Section

SEO-focused articles about training institute management, CRM, digital education

FAQ Page

Common queries about pricing, customization, support

Pricing Page (Optional)

Can show “Plans” (Basic, Standard, Enterprise) or “Contact for Pricing”

Download Brochure Button

PDF of software features

Chatbot / Live Chat Support

For instant client queries

10. Technical Considerations

Responsive Design (desktop, tablet, mobile)

SEO Optimized (keywords: Training Institute Management Software, Student Information System Nepal, CRM for Institutes)

Fast Loading Speed (lightweight images, caching)

Secure Contact Forms (anti-spam, SSL)

Integration-ready (CRM backend, lead tracking from website forms) - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Trainly
-emoji: 🐢
-colorFrom: yellow
-colorTo: pink
+title: trainly
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

features.html

@@ -0,0 +1,715 @@
+<!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>

index.html

@@ -1,19 +1,467 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TIMS - Training Institute Management Software</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>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        .hero-gradient {
+            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+        }
+        .feature-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);
+        }
+        #vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.3;
+        }
+    </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="#" class="text-indigo-600 border-b-2 border-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
+                    <a href="features.html" class="text-gray-500 hover:text-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="relative hero-gradient overflow-hidden">
+        <div id="vanta-bg"></div>
+        <div class="max-w-7xl mx-auto relative z-10">
+            <div class="relative pt-10 pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
+                <div class="mt-10 mx-auto max-w-3xl sm:mt-12 md:mt-16 lg:mt-20 lg:max-w-4xl xl:mt-28">
+                    <div class="text-center">
+                        <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl" data-aos="fade-down">
+                            <span class="block">Manage Your Training Institute</span>
+                            <span class="block text-indigo-200">Smarter with TIMS</span>
+                        </h1>
+                        <p class="mt-3 max-w-md mx-auto text-base text-indigo-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl" data-aos="fade-up" data-aos-delay="200">
+                            Comprehensive automation solution for student management, CRM, finance tracking, and analytics to grow your institute.
+                        </p>
+                        <div class="mt-10 sm:flex sm:justify-center" data-aos="fade-up" data-aos-delay="400">
+                            <div class="rounded-md shadow">
+                                <a href="features.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
+                                    Explore Features
+                                </a>
+                            </div>
+                            <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                                <a href="contact.html#demo" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
+                                    Request Demo
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Key Features -->
+    <div class="py-12 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:text-center">
+                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Features</h2>
+                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
+                    Everything You Need to Run Your Institute
+                </p>
+                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto" data-aos="fade-up" data-aos-delay="200">
+                    Comprehensive modules designed specifically for training institutes and educational centers.
+                </p>
+            </div>
+
+            <div class="mt-10">
+                <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
+                    <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden" 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">
+                                <i data-feather="users"></i>
+                            </div>
+                            <div class="mt-5">
+                                <h3 class="text-lg font-medium text-gray-900">Student Management</h3>
+                                <p class="mt-2 text-base text-gray-500">
+                                    Track student progress, attendance, and performance all in one place.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden" 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">
+                                <i data-feather="dollar-sign"></i>
+                            </div>
+                            <div class="mt-5">
+                                <h3 class="text-lg font-medium text-gray-900">Fee & Finance</h3>
+                                <p class="mt-2 text-base text-gray-500">
+                                    Automated fee collection, receipts, and financial reporting.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="300">
+                        <div class="p-6">
+                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                                <i data-feather="trending-up"></i>
+                            </div>
+                            <div class="mt-5">
+                                <h3 class="text-lg font-medium text-gray-900">CRM & Admissions</h3>
+                                <p class="mt-2 text-base text-gray-500">
+                                    Manage leads, follow-ups, and convert inquiries to admissions.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="400">
+                        <div class="p-6">
+                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                                <i data-feather="bar-chart-2"></i>
+                            </div>
+                            <div class="mt-5">
+                                <h3 class="text-lg font-medium text-gray-900">Reporting & Analytics</h3>
+                                <p class="mt-2 text-base text-gray-500">
+                                    Powerful insights to help you make data-driven decisions.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- How It Works -->
+    <div class="py-12 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:text-center">
+                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Process</h2>
+                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
+                    How TIMS Works
+                </p>
+                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto" data-aos="fade-up" data-aos-delay="200">
+                    Simple three-step process to transform your institute management.
+                </p>
+            </div>
+
+            <div class="mt-10">
+                <div class="relative">
+                    <div class="hidden lg:block lg:absolute lg:inset-0">
+                        <svg class="lg:absolute lg:left-0 lg:right-0 lg:mx-auto lg:transform lg:translate-y-1/2" width="80%" height="16" viewBox="0 0 1200 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M0 8H400" stroke="#4F46E5" stroke-width="2"/>
+                            <path d="M400 8H800" stroke="#4F46E5" stroke-width="2"/>
+                            <path d="M800 8H1200" stroke="#4F46E5" stroke-width="2"/>
+                            <circle cx="400" cy="8" r="8" fill="#4F46E5"/>
+                            <circle cx="800" cy="8" r="8" fill="#4F46E5"/>
+                            <circle cx="1200" cy="8" r="8" fill="#4F46E5"/>
+                        </svg>
+                    </div>
+                    <div class="grid grid-cols-1 gap-10 sm:grid-cols-3 lg:gap-8">
+                        <div class="relative z-10 bg-white rounded-lg shadow-lg overflow-hidden" 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">
+                                    <span class="text-xl font-bold">1</span>
+                                </div>
+                                <div class="mt-5">
+                                    <h3 class="text-lg font-medium text-gray-900">Enroll Students</h3>
+                                    <p class="mt-2 text-base text-gray-500">
+                                        Easy admission process with digital forms and document management.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="relative z-10 bg-white rounded-lg shadow-lg overflow-hidden" 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">
+                                    <span class="text-xl font-bold">2</span>
+                                </div>
+                                <div class="mt-5">
+                                    <h3 class="text-lg font-medium text-gray-900">Manage Courses & Faculty</h3>
+                                    <p class="mt-2 text-base text-gray-500">
+                                        Schedule classes, assign teachers, and track faculty performance.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="relative z-10 bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="300">
+                            <div class="p-6">
+                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                                    <span class="text-xl font-bold">3</span>
+                                </div>
+                                <div class="mt-5">
+                                    <h3 class="text-lg font-medium text-gray-900">Track Reports & Grow</h3>
+                                    <p class="mt-2 text-base text-gray-500">
+                                        Comprehensive analytics to help you make informed decisions.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Demo Preview -->
+    <div class="py-12 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:text-center mb-12">
+                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Preview</h2>
+                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
+                    See TIMS in Action
+                </p>
+            </div>
+            <div class="mt-10" data-aos="fade-up">
+                <div class="relative rounded-xl overflow-hidden shadow-xl">
+                    <img src="http://static.photos/technology/1200x630/10" alt="TIMS Dashboard Preview" class="w-full h-auto">
+                    <div class="absolute inset-0 bg-indigo-600 bg-opacity-30 flex items-center justify-center">
+                        <a href="contact.html#demo" class="inline-flex items-center px-6 py-3 border border-transparent text-base 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">
+                            <i data-feather="play" class="mr-2"></i> Watch Demo
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Why Choose Us -->
+    <div class="py-12 bg-indigo-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:text-center mb-12">
+                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Advantages</h2>
+                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
+                    Why Choose TIMS?
+                </p>
+            </div>
+            <div class="mt-10 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
+                <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
+                    <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-Based</h3>
+                    <p class="text-gray-500">
+                        Access your institute data anytime, anywhere with our secure cloud platform.
+                    </p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
+                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
+                        <i data-feather="git-branch"></i>
+                    </div>
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Multi-Branch Support</h3>
+                    <p class="text-gray-500">
+                        Manage multiple branches from a single dashboard with centralized control.
+                    </p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300">
+                    <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">Secure & Scalable</h3>
+                    <p class="text-gray-500">
+                        Enterprise-grade security with the flexibility to grow with your institute.
+                    </p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="400">
+                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
+                        <i data-feather="settings"></i>
+                    </div>
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Customizable</h3>
+                    <p class="text-gray-500">
+                        Tailor the system to your institute's unique workflows and requirements.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Testimonials -->
+    <div class="py-12 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:text-center mb-12">
+                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Testimonials</h2>
+                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
+                    Trusted by Leading Institutes
+                </p>
+            </div>
+            <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+                <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex items-center mb-4">
+                        <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Testimonial">
+                        <div class="ml-4">
+                            <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4>
+                            <p class="text-xs text-gray-500">Director, TechSkills Academy</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 italic">
+                        "TIMS has transformed how we manage our training center. The CRM module alone increased our admissions by 30% through better lead tracking."
+                    </p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="200">
+                    <div class="flex items-center mb-4">
+                        <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Testimonial">
+                        <div class="ml-4">
+                            <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4>
+                            <p class="text-xs text-gray-500">Principal, Global Language Institute</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 italic">
+                        "The automated attendance system saves us 20 hours per week in administrative work. Our faculty can focus more on teaching."
+                    </p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="300">
+                    <div class="flex items-center mb-4">
+                        <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Testimonial">
+                        <div class="ml-4">
+                            <h4 class="text-sm font-medium text-gray-900">Priya Patel</h4>
+                            <p class="text-xs text-gray-500">CEO, CareerPlus Training</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 italic">
+                        "The financial reporting gives us real-time insights into our institute's performance. We've grown revenue by 45% since implementing TIMS."
+                    </p>
+                </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 transform your institute?</span>
+                <span class="block">Get started with TIMS today.</span>
+            </h2>
+            <p class="mt-4 text-lg leading-6 text-indigo-200" data-aos="fade-up" data-aos-delay="100">
+                Join hundreds of training institutes that trust TIMS for their management needs.
+            </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>
+                        <li><a href="terms.html" class="text-base text-gray-300 hover:text-white">Terms</a></li>
+                        <li><a href="security.html" class="text-base text-gray-300 hover:text-white">Security</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
+                <div class="flex space-x-6 md:order-2">
+                    <a href="#" class="text-gray-400 hover:text-gray-300">
+                        <i data-feather="facebook"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-gray-300">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-gray-300">
+                        <i data-feather="instagram"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-gray-300">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-gray-300">
+                        <i data-feather="youtube"></i>
+                    </a>
+                </div>
+                <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
+                    &copy; 2023 TIMS. All rights reserved.
+                </p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x5b6df6,
+            backgroundColor: 0x0
+        });
+        
+        feather.replace();
+    </script>
+</body>
 </html>

prompts.txt

@@ -0,0 +1,201 @@
+
+Create website for Training Institute Management Software Website
+1. Objective
+
+The purpose of the website is to present the Training Institute Management Software (TIMS) to potential clients (training centers, institutes, colleges, corporate training providers). The site should highlight features, benefits, and credibility while generating inquiries through an easy-to-use contact system.
+
+2. Website Menu Structure
+
+Main Menu Items:
+
+Home
+
+Features
+
+CRM Module (optional: can be integrated within Features or kept separate for emphasis)
+
+Clients / Case Studies
+
+About Software
+
+Contact Us
+
+Footer Menu (Secondary):
+
+Privacy Policy
+
+Terms & Conditions
+
+FAQs
+
+Blog/Insights (optional for SEO)
+
+3. Homepage Concept
+Layout Idea
+
+Hero Section:
+
+Banner with headline (e.g., “Manage Your Training Institute Smarter with TIMS”)
+
+Subtext explaining benefits (automation, CRM, analytics, etc.)
+
+Call-to-action buttons: Request a Demo | Explore Features
+
+Key Features Highlight (3–4 cards/icons):
+
+Student Management
+
+Fee & Finance
+
+CRM & Admissions
+
+Reporting & Analytics
+
+How It Works (3-step visual):
+
+Enroll Students →
+
+Manage Courses & Faculty →
+
+Track Reports & Grow
+
+Screenshots / Demo Preview:
+Mockup of dashboards and mobile app
+
+Why Choose Us (USP section):
+
+Cloud-based
+
+Multi-branch support
+
+Secure & scalable
+
+Customizable
+
+Client Testimonials / Logos
+
+Showcase credibility
+
+Call-to-Action (CTA) at Bottom
+
+“Request a Free Demo Today”
+
+4. Features Page
+
+A detailed page listing all software modules with subsections:
+
+Core Features (Student, Course, Fee, Exam, Attendance, Staff, Library, Communication, Reports)
+
+CRM Module (Leads, Follow-ups, Campaigns, Admissions, Reports)
+
+Technical Features (Cloud, Security, API, Multi-language, Backup, Role-based Access)
+
+Visuals:
+
+Icons for each feature
+
+Optional expandable sections or tabs
+
+5. CRM Module Page (Optional but Recommended)
+
+If separated, highlight:
+
+Lead Management
+
+Follow-ups & Automation
+
+Campaign Tracking
+
+Admission Conversion Reports
+
+Sales Funnel Visualization
+
+Include a demo screenshot of CRM dashboard.
+
+6. Clients / Case Studies Page
+
+Client Logos (if available)
+
+Case Studies / Use Cases:
+
+Example 1: IT Training Center → Increased admissions by 30%
+
+Example 2: Language Institute → Automated attendance saved 20 hours/week
+
+Testimonials (text/video)
+
+Call-to-action: “Join our growing list of successful institutes”
+
+7. About Software Page
+
+Overview: Short intro about the software & company behind it
+
+Mission/ Vision: Helping institutes digitize operations
+
+Team / Company Background (optional)
+
+Why Our Software? (compare with traditional/manual methods)
+
+Technology Stack (Laravel, Vue.js, APIs, Cloud, etc.)
+
+8. Contact Us Page
+
+Contact Form:
+
+Name
+
+Institute Name
+
+Email / Phone
+
+Message / Requirement
+
+Direct Contact Info:
+
+Office Address
+
+Email
+
+Phone/WhatsApp
+
+Google Map Integration
+
+Quick Links to social media pages
+
+9. Suggested Extra Features for Website
+
+Request a Demo Page/Form
+
+Schedule a software demo directly
+
+Blog/Resources Section
+
+SEO-focused articles about training institute management, CRM, digital education
+
+FAQ Page
+
+Common queries about pricing, customization, support
+
+Pricing Page (Optional)
+
+Can show “Plans” (Basic, Standard, Enterprise) or “Contact for Pricing”
+
+Download Brochure Button
+
+PDF of software features
+
+Chatbot / Live Chat Support
+
+For instant client queries
+
+10. Technical Considerations
+
+Responsive Design (desktop, tablet, mobile)
+
+SEO Optimized (keywords: Training Institute Management Software, Student Information System Nepal, CRM for Institutes)
+
+Fast Loading Speed (lightweight images, caching)
+
+Secure Contact Forms (anti-spam, SSL)
+
+Integration-ready (CRM backend, lead tracking from website forms)