304 lines
26 KiB
HTML
304 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EnterpriseKit — Admin Template Showcase</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: "Poppins", sans-serif; }
|
|
[x-cloak] { display: none !important; }
|
|
.gradient-bg { background: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, #f8fafc 45%, #ffffff 100%); }
|
|
.nav-link { position: relative; color: #64748b; font-size: .875rem; font-weight: 500; transition: color .2s; text-decoration: none; }
|
|
.nav-link:hover { color: #4f46e5; }
|
|
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
|
|
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15,23,42,.25); }
|
|
.img-zoom { transition: transform .4s ease; }
|
|
.card-hover:hover .img-zoom { transform: scale(1.04); }
|
|
.chip { font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-white text-slate-800 antialiased" x-data="showcase()" x-init="initScrollSpy(); showTop = window.scrollY > 400; window.addEventListener('scroll', () => { showTop = window.scrollY > 400; })">
|
|
|
|
<!-- NAVBAR -->
|
|
<nav class="sticky top-0 z-50 bg-white/85 backdrop-blur border-b border-slate-100" x-data="{ mobileOpen: false }">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center gap-10">
|
|
<a class="flex items-center gap-2 font-bold text-lg text-slate-800 no-underline" href="#top">
|
|
<svg class="w-7 h-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
|
<span>EnterpriseKit</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a class="nav-link" :class="activeSection==='top' && '!text-indigo-600 font-semibold'" href="#top">Overview</a>
|
|
<a class="nav-link" :class="activeSection==='apps' && '!text-indigo-600 font-semibold'" href="#apps">Applications</a>
|
|
<a class="nav-link" :class="activeSection==='themes' && '!text-indigo-600 font-semibold'" href="#themes">Themes</a>
|
|
<a class="nav-link" :class="activeSection==='kit' && '!text-indigo-600 font-semibold'" href="#kit">The Kit</a>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-3">
|
|
<a class="nav-link" href="#apps">Browse Templates</a>
|
|
<a href="https://indotalent.com" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition no-underline">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"/></svg>
|
|
Get Source Code
|
|
</a>
|
|
</div>
|
|
<button class="md:hidden p-2 text-slate-500" @click="mobileOpen = !mobileOpen">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
</div>
|
|
<div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-1">
|
|
<a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#top">Overview</a>
|
|
<a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#apps">Applications</a>
|
|
<a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#themes">Themes</a>
|
|
<a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#kit">The Kit</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section id="top" class="gradient-bg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32 text-center">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-700 text-xs font-semibold mb-6">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
Part of the Enterprise Development Kit · HTML Edition
|
|
</div>
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight">Clean, Professional Admin Templates</h1>
|
|
<p class="mt-5 max-w-2xl mx-auto text-lg text-slate-500">A modern, light, minimalist admin template built with <span class="font-semibold text-slate-700">Tailwind CSS</span> and <span class="font-semibold text-slate-700">Alpine.js</span>. Explore ten business-grade dashboards, each available in five carefully crafted color themes.</p>
|
|
<div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
|
|
<a href="#apps" class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition no-underline">
|
|
Explore Dashboards
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
<a href="#themes" class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-lg text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 transition no-underline">View Theme Variants</a>
|
|
</div>
|
|
<div class="mt-14 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
|
|
<div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">10</p><p class="text-xs text-slate-500 mt-1">Business Apps</p></div>
|
|
<div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">5</p><p class="text-xs text-slate-500 mt-1">Color Themes</p></div>
|
|
<div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">50</p><p class="text-xs text-slate-500 mt-1">Demo Pages</p></div>
|
|
<div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">100%</p><p class="text-xs text-slate-500 mt-1">Responsive</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- APPLICATIONS -->
|
|
<section id="apps" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div class="text-center max-w-2xl mx-auto mb-12">
|
|
<p class="chip text-indigo-600 font-semibold">Business Applications</p>
|
|
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Ten ready-to-use dashboards</h2>
|
|
<p class="mt-3 text-slate-500">Each application ships with five theme variants. Click any thumbnail to open the live preview.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
|
|
<template x-for="app in apps" :key="app.key">
|
|
<div class="card-hover bg-white rounded-2xl border border-slate-100 overflow-hidden shadow-sm" x-data="{ open: false, slide: 0 }">
|
|
<div class="relative overflow-hidden bg-slate-100 aspect-[2/1] group" @mouseenter="pause=true" @mouseleave="pause=false" x-init="setInterval(() => { if(!pause) slide = (slide + 1) % app.shots.length }, 4000)" x-data="{ pause: false }">
|
|
<div class="flex h-full transition-transform duration-500 ease-out" :style="`transform: translateX(-${slide * 100}%)`">
|
|
<template x-for="(shot, i) in app.shots" :key="i">
|
|
<a :href="app.key + (i+1) + '.html'" target="_blank" rel="noopener"
|
|
class="relative shrink-0 w-full h-full block cursor-pointer">
|
|
<img :src="shot" :alt="app.name + ' theme ' + (i+1) + ' preview'"
|
|
class="img-zoom w-full h-full object-contain object-top">
|
|
</a>
|
|
</template>
|
|
</div>
|
|
<span class="chip absolute top-3 left-3 z-10 px-2 py-1 rounded-md bg-white/90 text-slate-600 shadow-sm" x-text="app.abbr"></span>
|
|
<span class="absolute top-3 right-3 z-10 inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/95 text-indigo-600 text-xs font-semibold shadow-sm">
|
|
<span x-text="(slide+1) + ' / ' + app.shots.length"></span>
|
|
</span>
|
|
|
|
<button class="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow hover:bg-white text-slate-600"
|
|
@click.prevent.stop="slide = (slide - 1 + app.shots.length) % app.shots.length" aria-label="Previous">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
|
|
</button>
|
|
<button class="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow hover:bg-white text-slate-600"
|
|
@click.prevent.stop="slide = (slide + 1) % app.shots.length" aria-label="Next">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
|
|
</button>
|
|
|
|
<div class="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5">
|
|
<template x-for="(shot, i) in app.shots" :key="i">
|
|
<button class="w-2 h-2 rounded-full transition-colors"
|
|
:class="slide === i ? 'bg-indigo-600 w-4' : 'bg-white/70 hover:bg-white'"
|
|
@click.prevent.stop="slide = i" :aria-label="'Go to slide ' + (i+1)"></button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-slate-900" x-text="app.name"></h3>
|
|
<p class="text-xs text-slate-400 font-medium" x-text="app.full"></p>
|
|
</div>
|
|
<button @click="open = !open" class="shrink-0 text-slate-400 hover:text-indigo-600 p-1" :title="open ? 'Hide themes' : 'Show themes'">
|
|
<svg class="w-5 h-5 transition-transform" :class="open && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-sm text-slate-500 leading-relaxed" x-text="app.summary"></p>
|
|
|
|
<div x-show="open" x-cloak x-collapse class="mt-4 pt-4 border-t border-slate-100">
|
|
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">Choose a theme</p>
|
|
<div class="grid grid-cols-1 gap-2">
|
|
<template x-for="t in themes" :key="t.id">
|
|
<a :href="app.key + t.id + '.html'" target="_blank" rel="noopener"
|
|
class="flex items-center gap-3 px-3 py-2 rounded-lg border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/50 transition no-underline group">
|
|
<span class="w-5 h-5 rounded-full ring-2 ring-white shadow" :style="`background:${t.color}`"></span>
|
|
<span class="text-sm font-medium text-slate-700 group-hover:text-indigo-700" x-text="t.name + ' Theme'"></span>
|
|
<svg class="w-4 h-4 ml-auto text-slate-300 group-hover:text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<a :href="app.key + '1.html'" target="_blank" rel="noopener" class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-700 no-underline">
|
|
Open default preview
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- THEMES -->
|
|
<section id="themes" class="bg-slate-50 border-y border-slate-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div class="text-center max-w-2xl mx-auto mb-12">
|
|
<p class="chip text-indigo-600 font-semibold">Theme Variants</p>
|
|
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Five professional palettes</h2>
|
|
<p class="mt-3 text-slate-500">Every dashboard is generated in five modern, light, minimalist themes so you can match your brand identity instantly.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
|
|
<template x-for="t in themes" :key="t.id">
|
|
<div class="bg-white rounded-2xl border border-slate-100 p-5 shadow-sm text-center card-hover">
|
|
<div class="w-14 h-14 mx-auto rounded-2xl flex items-center justify-center shadow-sm" :style="`background:${t.color}`">
|
|
<svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h8a2 2 0 002-2v-4a2 2 0 00-2-2H7m8-12h2a2 2 0 012 2v4a2 2 0 01-2 2h-2"/></svg>
|
|
</div>
|
|
<h3 class="mt-4 font-bold text-slate-900" x-text="t.name"></h3>
|
|
<p class="mt-1 text-xs text-slate-400" x-text="t.desc"></p>
|
|
<span class="mt-3 inline-block chip px-2 py-1 rounded-md" :style="`background:${t.soft};color:${t.color}`" x-text="t.tag"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- THE KIT -->
|
|
<section id="kit" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div class="text-center max-w-2xl mx-auto mb-12">
|
|
<p class="chip text-indigo-600 font-semibold">The Enterprise Development Kit</p>
|
|
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">A complete front-end foundation</h2>
|
|
<p class="mt-3 text-slate-500">The admin template is a building block of the Enterprise Development Kit — a clean, professional UI layer for line-of-business applications.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
|
|
<div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
|
|
<h3 class="mt-4 font-bold text-slate-900">Lightweight & Fast</h3>
|
|
<p class="mt-2 text-sm text-slate-500">Built on Tailwind CSS and Alpine.js — no heavy build step, no framework lock-in, just clean composable markup.</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
|
|
<div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></div>
|
|
<h3 class="mt-4 font-bold text-slate-900">Modular Components</h3>
|
|
<p class="mt-2 text-sm text-slate-500">Reusable cards, tables, forms, auth pages and widgets crafted for consistent, professional enterprise layouts.</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
|
|
<div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div>
|
|
<h3 class="mt-4 font-bold text-slate-900">Fully Responsive</h3>
|
|
<p class="mt-2 text-sm text-slate-500">Mobile-first navigation, collapsible sidebars and fluid grids that look sharp from phone to wide desktop monitors.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="bg-slate-900 text-slate-300">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div class="flex items-center gap-2 font-bold text-white text-lg">
|
|
<svg class="w-7 h-7 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
|
EnterpriseKit
|
|
</div>
|
|
<p class="text-sm text-slate-400">Admin Template — HTML Edition, a component of the Enterprise Development Kit.</p>
|
|
</div>
|
|
<div class="mt-8 pt-8 border-t border-slate-800 text-xs text-slate-500 flex flex-col sm:flex-row justify-between gap-2">
|
|
<span>© 2026 EnterpriseKit. Built with Tailwind CSS & Alpine.js.</span>
|
|
<span>Clean · Professional · Minimalist</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function showcase() {
|
|
return {
|
|
activeSection: 'top',
|
|
showTop: false,
|
|
themes: [
|
|
{ id: 1, name: 'Clean Grey', color: '#334155', soft: '#f1f5f9', tag: 'Neutral', desc: 'Refined graphite for a calm, corporate look.' },
|
|
{ id: 2, name: 'Soft Blue', color: '#2563eb', soft: '#eff6ff', tag: 'Primary', desc: 'Trusted light blue, ideal for SaaS products.' },
|
|
{ id: 3, name: 'Full Blue', color: '#1d4ed8', soft: '#dbeafe', tag: 'Solid', desc: 'Full saturated blue for strong brand presence.' },
|
|
{ id: 4, name: 'Full Blue Rounded', color: '#1d4ed8', soft: '#dbeafe', tag: 'Rounded', desc: 'Solid blue with fully rounded, pill-shaped controls.' },
|
|
{ id: 5, name: 'Soft Blue Box', color: '#2563eb', soft: '#eff6ff', tag: 'Boxed', desc: 'Soft blue with a contained, boxed layout style.' }
|
|
],
|
|
apps: [
|
|
{ key: 'dashboard-crm', abbr: 'CRM', name: 'CRM', full: 'Customer Relationship Management', img: 'img/crm1.png',
|
|
shots: ['img/crm1.png','img/crm2.png','img/crm3.png','img/crm4.png','img/crm5.png'],
|
|
summary: 'Track leads, opportunities and pipelines. Monitor customer health, sales activities and revenue forecasts in one place.' },
|
|
{ key: 'dashboard-eam', abbr: 'EAM', name: 'EAM', full: 'Enterprise Asset Management', img: 'img/eam1.png',
|
|
shots: ['img/eam1.png','img/eam2.png','img/eam3.png','img/eam4.png','img/eam5.png'],
|
|
summary: 'Manage the full lifecycle of physical assets, maintenance schedules and utilization across locations.' },
|
|
{ key: 'dashboard-fms', abbr: 'FMS', name: 'FMS', full: 'Financial Management System', img: 'img/fms1.png',
|
|
shots: ['img/fms1.png','img/fms2.png','img/fms3.png','img/fms4.png','img/fms5.png'],
|
|
summary: 'Oversee budgets, cash flow, ledgers and financial reporting with clear, audit-ready dashboards.' },
|
|
{ key: 'dashboard-hrm', abbr: 'HRM', name: 'HRM', full: 'Human Resource Management', img: 'img/hrm1.png',
|
|
shots: ['img/hrm1.png','img/hrm2.png','img/hrm3.png','img/hrm4.png','img/hrm5.png'],
|
|
summary: 'Centralize employee records, attendance, leave and payroll for a productive workforce.' },
|
|
{ key: 'dashboard-itsm', abbr: 'ITSM', name: 'ITSM', full: 'IT Service Management', img: 'img/itsm1.png',
|
|
shots: ['img/itsm1.png','img/itsm2.png','img/itsm3.png','img/itsm4.png','img/itsm5.png'],
|
|
summary: 'Handle incidents, service requests and SLAs with a streamlined IT support operations view.' },
|
|
{ key: 'dashboard-pos', abbr: 'POS', name: 'POS', full: 'Point of Sale', img: 'img/pos1.png',
|
|
shots: ['img/pos1.png','img/pos2.png','img/pos3.png','img/pos4.png','img/pos5.png'],
|
|
summary: 'Process transactions, manage inventory and review store performance in real time.' },
|
|
{ key: 'dashboard-rms', abbr: 'RMS', name: 'RMS', full: 'Roster Management System', img: 'img/rms1.png',
|
|
shots: ['img/rms1.png','img/rms2.png','img/rms3.png','img/rms4.png','img/rms5.png'],
|
|
summary: 'Plan shifts, assign staff and optimize coverage with intuitive scheduling tools.' },
|
|
{ key: 'dashboard-scm', abbr: 'SCM', name: 'SCM', full: 'Supply Chain Management', img: 'img/scm1.png',
|
|
shots: ['img/scm1.png','img/scm2.png','img/scm3.png','img/scm4.png','img/scm5.png'],
|
|
summary: 'Coordinate procurement, logistics and suppliers to keep the supply chain resilient.' },
|
|
{ key: 'dashboard-tms', abbr: 'TMS', name: 'TMS', full: 'Talent Management System', img: 'img/tms1.png',
|
|
shots: ['img/tms1.png','img/tms2.png','img/tms3.png','img/tms4.png','img/tms5.png'],
|
|
summary: 'Attract, develop and retain talent with recruiting, goals and performance insights.' },
|
|
{ key: 'dashboard-wms', abbr: 'WMS', name: 'WMS', full: 'Warehouse Management System', img: 'img/wms1.png',
|
|
shots: ['img/wms1.png','img/wms2.png','img/wms3.png','img/wms4.png','img/wms5.png'],
|
|
summary: 'Control receiving, storage and fulfillment to boost warehouse throughput and accuracy.' }
|
|
],
|
|
initScrollSpy() {
|
|
const ids = ['top', 'apps', 'themes', 'kit'];
|
|
const obs = new IntersectionObserver((entries) => {
|
|
entries.forEach(e => { if (e.isIntersecting) this.activeSection = e.target.id; });
|
|
}, { rootMargin: '-40% 0px -55% 0px' });
|
|
ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- BACK TO TOP FAB -->
|
|
<button x-show="showTop" x-cloak
|
|
@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 translate-y-4"
|
|
class="fixed bottom-6 right-6 z-50 w-12 h-12 flex items-center justify-center rounded-full bg-indigo-600 text-white shadow-lg shadow-indigo-600/30 hover:bg-indigo-700 hover:shadow-xl transition-colors"
|
|
aria-label="Back to top">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
|
|
</button>
|
|
|
|
</body>
|
|
</html>
|