here's the front page for aiwfm.net. mak... (fork)
Chat Settings
Manage modeLet this chat install models, switch backends, and edit configs by talking to LocalAI.
02
01
1100
You
here's the front page for aiwfm.net. make a page for each link in the footer, and fill with convincing demo data where needed. have some demo "positions" available, like dev, BDM, account manager, etc for careers, and even include an application for users to fill out and have it use the contact.html backend. include a page for terms, privacy policy, EVERYTHING that's listed in the footer. be sure to follow the same visual scheme, and make the pages visually appealing to the max, with SVG animations, textures, demo windows, etc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="AI WFM — AI-Powered Workforce Management Platform. Smart scheduling, labor optimization, and compliance — all in one system. One-time licensing, no subscriptions.">
<meta name="keywords" content="AI workforce management, smart scheduling, labor optimization, WFM, shift scheduling, compliance, HR technology">
<title>AI WFM | AI-Powered Workforce Management — TheMadHacker LLC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* ============================================
AI WFM — DESIGN SYSTEM (Same DNA as AI EHR)
============================================ */
:root {
--primary: #4f46e5;
--primary-dark: #3730a3;
--primary-light: #818cf8;
--primary-ultralight: #eef2ff;
--secondary: #0ea5e9;
--secondary-dark: #0284c7;
--accent: #06b6d4;
--accent-green: #10b981;
--accent-amber: #f59e0b;
--accent-rose: #f43f5e;
--dark: #0f172a;
--dark-mid: #1e293b;
--dark-light: #334155;
--gray: #64748b;
--gray-light: #94a3b8;
--light: #f8fafc;
--light-mid: #f1f5f9;
--white: #ffffff;
--gradient-primary: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 50%, #06b6d4 100%);
--gradient-hero: linear-gradient(160deg, #0f172a 0% 0%, #1e293b 40%, #1a1a4e 100%);
--gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
--gradient-glow: radial-gradient(ellipse at center, rgba(79,70,229,0.15) 0%, transparent 70%);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
--shadow-glow: 0 0 40px rgba(79,70,229,0.3);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-sans);
color: var(--dark);
background: var(--white);
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--primary);
background: var(--primary-ultralight);
padding: 8px 20px;
border-radius: var(--radius-full);
margin-bottom: 20px;
}
.section-label i { font-size: 0.7rem; }
.section-title {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.03em;
}
.section-subtitle { font-size: 1.15rem; color: var(--gray); max-width: 640px; line-height: 1.8; }
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* BG ELEMENTS */
.bg-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(79,70,229,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(79,70,229,0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.floating-orb {
position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4;
pointer-events: none; animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-30px) scale(1.05); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-left {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.animate-on-scroll {
opacity: 0; transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
/* ============================================
NAVIGATION
============================================ */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding: 16px 0; transition: var(--transition);
background: transparent;
}
.navbar.scrolled {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(79,70,229,0.08);
padding: 10px 0;
box-shadow: var(--shadow-md);
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo {
display: flex; align-items: center; gap: 12px;
text-decoration: none; font-weight: 800; font-size: 1.4rem;
color: var(--white); transition: var(--transition);
}
.navbar.scrolled .nav-logo { color: var(--dark); }
.nav-logo-icon {
width: 42px; height: 42px; background: var(--gradient-primary);
border-radius: var(--radius-md); display: flex; align-items: center;
justify-content: center; color: var(--white); font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(79,70,229,0.3);
}
.nav-logo span {
font-weight: 300; opacity: 0.7; font-size: 0.75rem;
text-transform: uppercase; letter-spacing: 1.5px;
display: block; margin-top: -2px;
}
.nav-links { display: flex; align-items: center; gap: 8px; list-style: none; }
.nav-links a {
text-decoration: none; color: rgba(255,255,255,0.8);
font-weight: 500; font-size: 0.9rem; padding: 8px 18px;
border-radius: var(--radius-full); transition: var(--transition);
}
.navbar.scrolled .nav-links a { color: var(--dark-light); }
.nav-links a:hover {
color: var(--white); background: rgba(255,255,255,0.1);
}
.navbar.scrolled .nav-links a:hover {
color: var(--primary); background: var(--primary-ultralight);
}
.nav-cta {
background: var(--gradient-primary) !important;
color: var(--white) !important; font-weight: 600 !important;
padding: 10px 24px !important;
box-shadow: 0 4px 15px rgba(79,70,229,0.3);
}
.nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(79,70,229,0.4) !important;
background: var(--gradient-primary) !important;
}
.mobile-toggle {
display: none; background: none; border: none;
color: var(--white); font-size: 1.5rem; cursor: pointer;
}
.navbar.scrolled .mobile-toggle { color: var(--dark); }
/* ============================================
HERO
============================================ */
.hero {
position: relative; min-height: 100vh;
display: flex; align-items: center;
background: var(--gradient-hero);
overflow: hidden; padding: 120px 0 80px;
}
.hero::before {
content: ''; position: absolute; top: -50%; right: -20%;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%);
animation: pulse-glow 6s ease-in-out infinite;
}
.hero::after {
content: ''; position: absolute; bottom: -30%; left: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%);
animation: pulse-glow 8s ease-in-out infinite reverse;
}
.hero .container {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
}
.hero-content { animation: slide-in-left 1s ease-out; }
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(79,70,229,0.12); border: 1px solid rgba(79,70,229,0.25);
padding: 8px 20px; border-radius: var(--radius-full);
font-size: 0.82rem; font-weight: 600; color: var(--primary-light);
margin-bottom: 28px; backdrop-filter: blur(10px);
}
.hero-badge .pulse-dot {
width: 8px; height: 8px; background: var(--accent-green);
border-radius: 50%; animation: pulse-glow 2s ease-in-out infinite;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900;
line-height: 1.08; color: var(--white); margin-bottom: 24px;
letter-spacing: -0.04em;
}
.hero h1 .highlight { position: relative; display: inline-block; }
.hero h1 .highlight::after {
content: ''; position: absolute; bottom: 4px; left: 0; right: 0;
height: 12px; background: rgba(79,70,229,0.35); border-radius: 4px; z-index: -1;
}
.hero-description {
font-size: 1.2rem; color: rgba(255,255,255,0.65);
line-height: 1.8; margin-bottom: 40px; max-width: 520px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 32px; border-radius: var(--radius-full);
font-weight: 600; font-size: 0.95rem; text-decoration: none;
transition: var(--transition); cursor: pointer; border: none;
font-family: var(--font-sans);
}
.btn-primary {
background: var(--gradient-primary); color: var(--white);
box-shadow: 0 4px 20px rgba(79,70,229,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(79,70,229,0.5); }
.btn-secondary {
background: rgba(255,255,255,0.06); color: var(--white);
border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(79,70,229,0.3); }
.btn-large { padding: 18px 40px; font-size: 1.05rem; }
.hero-stats { display: flex; gap: 48px; }
.hero-stat { text-align: left; }
.hero-stat-value { font-size: 1.8rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; }
.hero-stat-value span { color: var(--primary-light); }
.hero-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-top: 2px; }
/* Hero Visual */
.hero-visual { position: relative; animation: slide-in-right 1s ease-out; }
.hero-mockup {
position: relative; background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl);
padding: 24px; backdrop-filter: blur(20px);
box-shadow: var(--shadow-2xl);
}
.mockup-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 20px; padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dot.red { background: #ef4444; }
.mockup-dot.yellow { background: #f59e0b; }
.mockup-dot.green { background: #10b981; }
.mockup-title { margin-left: 12px; color: rgba(255,255,255,0.5); font-size: 0.75rem; font-weight: 500; }
.mockup-body { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.mockup-sidebar { display: flex; flex-direction: column; gap: 6px; }
.mockup-sidebar-item {
padding: 10px 14px; border-radius: var(--radius-sm);
font-size: 0.72rem; color: rgba(255,255,255,0.4); transition: var(--transition);
}
.mockup-sidebar-item.active {
background: rgba(79,70,229,0.2); color: var(--primary-light);
border: 1px solid rgba(79,70,229,0.3);
}
.mockup-main { display: flex; flex-direction: column; gap: 12px; }
.mockup-row { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 10px; }
.mockup-cell { height: 32px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.04); }
.mockup-cell.highlighted { background: rgba(79,70,229,0.12); border-color: rgba(79,70,229,0.2); }
.mockup-chart {
flex: 1; background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-md);
padding: 16px; min-height: 120px;
display: flex; align-items: flex-end; gap: 6px;
}
.chart-bar { flex: 1; background: var(--gradient-primary); border-radius: 4px 4px 0 0; opacity: 0.6; transition: var(--transition); }
.chart-bar:hover { opacity: 1; }
.ai-indicator {
position: absolute; background: rgba(15,23,42,0.9);
border: 1px solid rgba(79,70,229,0.3); border-radius: var(--radius-md);
padding: 12px 16px; display: flex; align-items: center; gap: 10px;
backdrop-filter: blur(15px); box-shadow: var(--shadow-xl);
animation: float 6s ease-in-out infinite;
}
.ai-indicator.top-right { top: -20px; right: -30px; animation-delay: 0s; }
.ai-indicator.bottom-left { bottom: -15px; left: -30px; animation-delay: 3s; }
.ai-indicator-icon {
width: 36px; height: 36px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.ai-indicator-icon.green { background: rgba(16,185,129,0.15); color: var(--accent-green); }
.ai-indicator-icon.blue { background: rgba(14,165,233,0.15); color: var(--secondary); }
.ai-indicator-text { font-size: 0.72rem; color: rgba(255,255,255,0.7); font-weight: 500; }
.ai-indicator-value { font-size: 0.85rem; color: var(--white); font-weight: 700; }
/* ============================================
TRUST BAR
============================================ */
.trust-bar { padding: 60px 0; background: var(--light); border-bottom: 1px solid rgba(0,0,0,0.04); }
.trust-bar p { text-align: center; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--gray-light); margin-bottom: 32px; }
.trust-logos { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; }
.trust-logo {
display: flex; align-items: center; gap: 10px;
font-size: 1.1rem; font-weight: 700; color: var(--gray-light);
opacity: 0.5; transition: var(--transition);
}
.trust-logo:hover { opacity: 0.8; color: var(--dark); }
.trust-logo i { font-size: 1.4rem; }
/* ============================================
PROBLEMS / SOLUTIONS
============================================ */
.problems { padding: 120px 0; position: relative; overflow: hidden; }
.problems::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: var(--gradient-glow); pointer-events: none;
}
.problems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 60px; }
.problems-left .section-title { margin-bottom: 24px; }
.problem-card {
background: var(--white); border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px;
transition: var(--transition); position: relative; overflow: hidden;
}
.problem-card::before {
content: ''; position: absolute; top: 0; left: 0;
width: 4px; height: 100%; background: var(--accent-rose); border-radius: 4px 0 0 4px;
}
.problem-card:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); border-color: rgba(244,63,94,0.15); }
.problem-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.problem-number {
width: 36px; height: 36px; background: rgba(244,63,94,0.08);
border-radius: var(--radius-sm); display: flex; align-items: center;
justify-content: center; font-size: 0.85rem; font-weight: 800; color: var(--accent-rose); flex-shrink: 0;
}
.problem-card-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); }
.problem-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; padding-left: 50px; }
.solutions-right { position: sticky; top: 120px; }
.solution-card {
background: var(--white); border: 1px solid rgba(79,70,229,0.1);
border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px;
transition: var(--transition); position: relative; overflow: hidden;
}
.solution-card::before {
content: ''; position: absolute; top: 0; left: 0;
width: 4px; height: 100%; background: var(--accent-green); border-radius: 4px 0 0 4px;
}
.solution-card:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); border-color: rgba(16,185,129,0.2); }
.solution-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.solution-icon {
width: 36px; height: 36px; background: rgba(16,185,129,0.08);
border-radius: var(--radius-sm); display: flex; align-items: center;
justify-content: center; font-size: 0.85rem; color: var(--accent-green); flex-shrink: 0;
}
.solution-card-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); }
.solution-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; padding-left: 50px; }
.solution-feature-list { list-style: none; margin-top: 10px; padding-left: 50px; }
.solution-feature-list li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 0.85rem; color: var(--dark-light); margin-bottom: 6px;
}
.solution-feature-list li i { color: var(--accent-green); margin-top: 3px; font-size: 0.7rem; }
/* ============================================
FEATURES
============================================ */
.features { padding: 120px 0; background: var(--light); position: relative; }
.features-header { text-align: center; margin-bottom: 72px; }
.features-header .section-subtitle { margin: 0 auto; }
.features-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 56px; flex-wrap: wrap; }
.feature-tab {
padding: 10px 24px; border-radius: var(--radius-full);
font-size: 0.88rem; font-weight: 600; color: var(--gray);
background: var(--white); border: 1px solid rgba(0,0,0,0.06);
cursor: pointer; transition: var(--transition);
}
.feature-tab:hover { color: var(--primary); border-color: rgba(79,70,229,0.2); }
.feature-tab.active { background: var(--primary); color: var(--white); border-color: var(--primary); box-shadow: 0 4px 15px rgba(79,70,229,0.3); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
background: var(--white); border: 1px solid rgba(0,0,0,0.05);
border-radius: var(--radius-lg); padding: 36px;
transition: var(--transition); position: relative; overflow: hidden;
}
.feature-card::after {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--gradient-primary); opacity: 0; transition: var(--transition);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(79,70,229,0.12); }
.feature-card:hover::after { opacity: 1; }
.feature-icon {
width: 56px; height: 56px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; margin-bottom: 22px; position: relative;
}
.feature-icon.purple { background: rgba(79,70,229,0.08); color: var(--primary); }
.feature-icon.blue { background: rgba(14,165,233,0.08); color: var(--secondary); }
.feature-icon.cyan { background: rgba(6,182,212,0.08); color: var(--accent); }
.feature-icon.green { background: rgba(16,185,129,0.08); color: var(--accent-green); }
.feature-icon.amber { background: rgba(245,158,11,0.08); color: var(--accent-amber); }
.feature-icon.rose { background: rgba(244,63,94,0.08); color: var(--accent-rose); }
.feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--dark); }
.feature-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.feature-tag {
font-size: 0.7rem; font-weight: 600; padding: 4px 10px;
border-radius: var(--radius-full); background: var(--light-mid);
color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px;
}
/* ============================================
DATA FLOW DIAGRAM
============================================ */
.data-flow { padding: 120px 0; position: relative; overflow: hidden; }
.data-flow-header { text-align: center; margin-bottom: 72px; }
.data-flow-header .section-subtitle { margin: 0 auto; }
.data-flow-header .section-label { background: rgba(79,70,229,0.08); color: var(--primary); }
.flow-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.flow-stage {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 48px;
position: relative;
}
.flow-stage:nth-child(even) { flex-direction: row-reverse; }
.flow-node {
flex: 1;
background: var(--white);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--radius-lg);
padding: 28px;
transition: var(--transition);
position: relative;
}
.flow-node:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: rgba(79,70,229,0.15);
}
.flow-node-icon {
width: 48px; height: 48px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; margin-bottom: 14px;
}
.flow-node-icon.purple { background: rgba(79,70,229,0.08); color: var(--primary); }
.flow-node-icon.cyan { background: rgba(6,182,212,0.08); color: var(--accent); }
.flow-node-icon.green { background: rgba(16,185,129,0.08); color: var(--accent-green); }
.flow-node-icon.amber { background: rgba(245,158,11,0.08); color: var(--accent-amber); }
.flow-node-icon.rose { background: rgba(244,63,94,0.08); color: var(--accent-rose); }
.flow-node-icon.blue { background: rgba(14,165,233,0.08); color: var(--secondary); }
.flow-node h4 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.flow-node p { font-size: 0.88rem; color: var(--gray); line-height: 1.6; }
.flow-node-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.flow-node-tag {
font-size: 0.68rem; font-weight: 600; padding: 3px 8px;
border-radius: var(--radius-full); background: var(--light-mid);
color: var(--gray);
}
.flow-connector {
width: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.flow-connector-icon {
width: 40px; height: 40px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--white); font-size: 0.85rem;
box-shadow: 0 4px 15px rgba(79,70,229,0.3);
}
.flow-connector-label {
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 0.68rem;
font-weight: 600;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
.flow-step-number {
width: 36px; height: 36px;
background: var(--dark);
color: var(--white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem; font-weight: 800;
flex-shrink: 0;
}
/* ============================================
PRICING
============================================ */
.pricing { padding: 120px 0; position: relative; overflow: hidden; }
.pricing::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: var(--gradient-glow); pointer-events: none;
}
.pricing-header { text-align: center; margin-bottom: 20px; position: relative; z-index: 2; }
.pricing-subtitle {
font-size: 1.05rem; color: var(--gray); max-width: 600px;
margin: 0 auto 12px; line-height: 1.7;
}
.pricing-badges {
display: flex; justify-content: center; gap: 12px;
margin-bottom: 64px; flex-wrap: wrap; position: relative; z-index: 2;
}
.pricing-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 22px; border-radius: var(--radius-full);
font-size: 0.85rem; font-weight: 600;
}
.pricing-badge.no-sub { background: rgba(16,185,129,0.08); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.15); }
.pricing-badge.once { background: rgba(79,70,229,0.08); color: var(--primary); border: 1px solid rgba(79,70,229,0.15); }
.pricing-badge.support { background: rgba(14,165,233,0.08); color: var(--secondary); border: 1px solid rgba(14,165,233,0.15); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 2; }
.pricing-card {
background: var(--white); border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--radius-xl); padding: 40px 32px;
transition: var(--transition); position: relative; overflow: hidden;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.pricing-card.featured {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary), var(--shadow-2xl);
transform: scale(1.03);
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-6px); }
.pricing-card.featured::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 4px; background: var(--gradient-primary);
}
.pricing-popular {
position: absolute; top: 16px; right: 16px;
background: var(--gradient-primary); color: var(--white);
font-size: 0.7rem; font-weight: 700; padding: 5px 14px;
border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 1px;
}
.pricing-card-header { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.pricing-seats { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); margin-bottom: 8px; }
.pricing-name { font-size: 1.5rem; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.pricing-desc { font-size: 0.85rem; color: var(--gray); }
.pricing-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.pricing-currency { font-size: 1.2rem; font-weight: 700; color: var(--dark); }
.pricing-value { font-size: 3rem; font-weight: 900; color: var(--dark); line-height: 1; letter-spacing: -0.03em; }
.pricing-period { font-size: 0.85rem; color: var(--gray); font-weight: 500; }
.pricing-per-seat { font-size: 0.8rem; color: var(--gray-light); margin-bottom: 24px; }
.pricing-features { list-style: none; margin-bottom: 32px; }
.pricing-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.88rem; color: var(--dark-light); padding: 9px 0;
border-bottom: 1px solid rgba(0,0,0,0.03);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li i { margin-top: 4px; font-size: 0.75rem; }
.pricing-features li i.fa-check { color: var(--accent-green); }
.pricing-features li i.fa-xmark { color: var(--gray-light); }
.pricing-features li.disabled { color: var(--gray-light); }
.pricing-btn {
display: block; width: 100%; text-align: center;
padding: 14px; border-radius: var(--radius-full);
font-weight: 700; font-size: 0.92rem; text-decoration: none;
transition: var(--transition);
}
.pricing-btn-primary { background: var(--gradient-primary); color: var(--white); box-shadow: 0 4px 20px rgba(79,70,229,0.3); }
.pricing-btn-primary:hover { box-shadow: 0 8px 30px rgba(79,70,229,0.4); transform: translateY(-2px); }
.pricing-btn-outline { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.pricing-btn-outline:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }
.pricing-cta { text-align: center; margin-top: 56px; position: relative; z-index: 2; }
.pricing-cta p { color: var(--gray); font-size: 0.95rem; margin-bottom: 20px; }
/* ============================================
REVIEWS
============================================ */
.reviews { padding: 120px 0; background: var(--light); }
.reviews-header { text-align: center; margin-bottom: 72px; }
.reviews-header .section-subtitle { margin: 0 auto; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
background: var(--white); border: 1px solid rgba(0,0,0,0.05);
border-radius: var(--radius-xl); padding: 36px;
transition: var(--transition); position: relative;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.review-card.featured-review { border-color: rgba(79,70,229,0.15); background: linear-gradient(145deg, #ffffff 0%, #f0f0ff 100%); }
.review-stars { display: flex; gap: 3px; margin-bottom: 18px; }
.review-stars i { color: #f59e0b; font-size: 0.85rem; }
.review-text { font-size: 0.95rem; color: var(--dark-light); line-height: 1.8; margin-bottom: 24px; font-style: italic; }
.review-text::before { content: '"'; font-size: 2rem; font-weight: 800; color: var(--primary-light); line-height: 0; vertical-align: -0.4em; margin-right: 4px; }
.review-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.05); }
.review-avatar {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; font-weight: 700; color: var(--white);
}
.review-avatar.av1 { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.review-avatar.av2 { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.review-avatar.av3 { background: linear-gradient(135deg, #10b981, #059669); }
.review-avatar.av4 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.review-avatar.av5 { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.review-avatar.av6 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.review-avatar.av7 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.review-avatar.av8 { background: linear-gradient(135deg, #10b981, #047857); }
.review-avatar.av9 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.review-author-name { font-weight: 700; font-size: 0.92rem; color: var(--dark); }
.review-author-title { font-size: 0.78rem; color: var(--gray); }
.review-company { font-size: 0.72rem; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--accent-green); font-weight: 600; margin-top: 2px; }
/* ============================================
INTEGRATIONS
============================================ */
.integrations { padding: 120px 0; background: var(--dark); position: relative; overflow: hidden; }
.integrations::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(79,70,229,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 50%, rgba(14,165,233,0.06) 0%, transparent 60%);
pointer-events: none;
}
.integrations .container { position: relative; z-index: 2; }
.integrations-header { text-align: center; margin-bottom: 72px; }
.integrations .section-title { color: var(--white); }
.integrations .section-subtitle { color: rgba(255,255,255,0.5); margin: 0 auto; }
.integrations .section-label { background: rgba(79,70,229,0.15); color: var(--primary-light); }
.integration-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 60px; }
.integration-card {
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-xl); padding: 40px; text-align: center;
transition: var(--transition); position: relative; overflow: hidden;
}
.integration-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--gradient-primary); opacity: 0; transition: var(--transition);
}
.integration-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(79,70,229,0.3); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.integration-card:hover::before { opacity: 1; }
.integration-logo {
width: 72px; height: 72px; border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; margin: 0 auto 20px; position: relative;
}
.integration-logo.bamboo { background: linear-gradient(135deg, #4caf50, #388e3c); color: white; box-shadow: 0 8px 25px rgba(76,175,80,0.3); }
.integration-logo.ukg { background: linear-gradient(135deg, #1565c0, #0d47a1); color: white; box-shadow: 0 8px 25px rgba(21,101,192,0.3); }
.integration-logo.deel { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: white; box-shadow: 0 8px 25px rgba(124,58,237,0.3); }
.integration-name { font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.integration-type { font-size: 0.78rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 16px; }
.integration-desc { font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 20px; }
.integration-features { list-style: none; text-align: left; }
.integration-features li {
display: flex; align-items: center; gap: 10px;
font-size: 0.82rem; color: rgba(255,255,255,0.65);
padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.04);
}
.integration-features li i { color: var(--accent-green); font-size: 0.7rem; }
.integrations-note { text-align: center; padding: 32px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); }
.integrations-note p { color: rgba(255,255,255,0.45); font-size: 0.9rem; }
.integrations-note strong { color: rgba(255,255,255,0.7); }
/* ============================================
HIPAA COMPLIANCE
============================================ */
.compliance-section { padding: 120px 0; position: relative; overflow: hidden; }
.compliance-section::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: var(--gradient-glow); pointer-events: none;
}
.compliance-header { text-align: center; margin-bottom: 72px; position: relative; z-index: 2; }
.compliance-header .section-subtitle { margin: 0 auto; }
.compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 2; }
.compliance-card {
background: var(--white); border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--radius-xl); padding: 36px;
transition: var(--transition); position: relative; overflow: hidden;
}
.compliance-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(16,185,129,0.2); }
.compliance-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: linear-gradient(90deg, var(--accent-green), var(--secondary)); opacity: 0; transition: var(--transition);
}
.compliance-card:hover::before { opacity: 1; }
.compliance-icon {
width: 56px; height: 56px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; margin-bottom: 20px;
}
.compliance-icon.green { background: rgba(16,185,129,0.08); color: var(--accent-green); }
.compliance-icon.blue { background: rgba(14,165,233,0.08); color: var(--secondary); }
.compliance-icon.purple { background: rgba(79,70,229,0.08); color: var(--primary); }
.compliance-icon.amber { background: rgba(245,158,11,0.08); color: var(--accent-amber); }
.compliance-icon.cyan { background: rgba(6,182,212,0.08); color: var(--accent); }
.compliance-icon.rose { background: rgba(244,63,94,0.08); color: var(--accent-rose); }
.compliance-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.compliance-card p { font-size: 0.88rem; color: var(--gray); line-height: 1.7; }
.compliance-status {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px; font-size: 0.75rem; font-weight: 700;
padding: 4px 12px; border-radius: var(--radius-full);
}
.compliance-status.active { background: rgba(16,185,129,0.08); color: var(--accent-green); }
.compliance-status.certified { background: rgba(14,165,233,0.08); color: var(--secondary); }
/* ============================================
CTA SECTION
============================================ */
.cta-section { padding: 120px 0; background: var(--gradient-hero); position: relative; overflow: hidden; }
.cta-section::before {
content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
pointer-events: none;
}
.cta-content { text-align: center; position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-content h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--white); margin-bottom: 20px; letter-spacing: -0.03em; }
.cta-content p { font-size: 1.15rem; color: rgba(255,255,255,0.6); margin-bottom: 40px; line-height: 1.8; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta-note { margin-top: 24px; font-size: 0.82rem; color: rgba(255,255,255,0.35); }
/* ============================================
FOOTER
============================================ */
.footer { padding: 80px 0 40px; background: var(--dark); border-top: 1px solid rgba(255,255,255,0.04); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.footer-brand p { color: rgba(255,255,255,0.4); font-size: 0.88rem; margin-top: 16px; line-height: 1.7; max-width: 320px; }
.footer-col h4 { color: var(--white); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; }
.footer-col a { display: block; color: rgba(255,255,255,0.4); text-decoration: none; font-size: 0.88rem; padding: 6px 0; transition: var(--transition); }
.footer-col a:hover { color: var(--primary-light); transform: translateX(4px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-bottom p { color: rgba(255,255,255,0.3); font-size: 0.82rem; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4);
text-decoration: none; transition: var(--transition);
}
.footer-social a:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.hero .container { grid-template-columns: 1fr; gap: 60px; }
.hero-visual { max-width: 560px; margin: 0 auto; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-card.featured { transform: none; }
.problems-grid { grid-template-columns: 1fr; gap: 40px; }
.solutions-right { position: static; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
.nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.98); flex-direction: column; justify-content: center; align-items: center; gap: 16px; backdrop-filter: blur(20px); }
.nav-links.active { display: flex; }
.nav-links a { font-size: 1.2rem; color: var(--white) !important; }
.mobile-toggle { display: block; position: fixed; top: 20px; right: 20px; z-index: 1001; }
.hero h1 { font-size: 2.2rem; }
.hero-stats { gap: 32px; }
.features-grid { grid-template-columns: 1fr; }
.integration-main { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.reviews-grid { grid-template-columns: 1fr; }
.compliance-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
.mockup-body { grid-template-columns: 1fr; }
.mockup-sidebar { flex-direction: row; overflow-x: auto; }
.ai-indicator { display: none; }
.flow-stage { flex-direction: column !important; gap: 16px; }
.flow-connector { transform: rotate(90deg); }
.flow-step-number { display: none; }
}
@media (max-width: 480px) {
.hero-stats { flex-direction: column; gap: 20px; }
.hero-actions { flex-direction: column; }
.btn { justify-content: center; }
.compliance-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- ========== NAVIGATION ========== -->
<nav class="navbar" id="navbar">
<div class="container">
<a href="index.html" class="nav-logo">
<div class="nav-logo-icon"><i class="fas fa-users-gear"></i></div>
<div>
AI WFM
<span>TheMadHacker LLC</span>
</div>
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#features">Features</a></li>
<li><a href="#data-flow">How It Works</a></li>
<li><a href="#integrations">Integrations</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#compliance">HIPAA Compliance</a></li>
<li><a href="contact.html" class="nav-cta">Get a Quote</a></li>
</ul>
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu"><i class="fas fa-bars"></i></button>
</div>
</nav>
<!-- ========== HERO ========== -->
<section class="hero" id="hero">
<div class="bg-grid"></div>
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<div class="pulse-dot"></div>
HIPAA Compliant · SOC 2 Type II · ADA Compliant Scheduling
</div>
<h1>
The <span class="highlight text-gradient">AI-Optimized</span><br>
Workforce<br>
Management Platform
</h1>
<p class="hero-description">
Stop guessing when to staff. AI WFM uses predictive demand modeling, autonomous scheduling, and real-time compliance monitoring to eliminate overtime waste, prevent labor law violations, and optimize every shift — under a
<strong style="color:white;">one-time licensing fee</strong>. No subscriptions. Ever.
</p>
<div class="hero-actions">
<a href="contact.html" class="btn btn-primary btn-large"><i class="fas fa-rocket"></i> Request a Demo</a>
<a href="#data-flow" class="btn btn-secondary btn-large"><i class="fas fa-play"></i> See How It Works</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
<div class="hero-stat-value">3,200<span>+</span></div>
<div class="hero-stat-label">Organizations Deployed</div>
</div>
<div class="hero-stat">
<div class="hero-stat-value">34<span>%</span></div>
<div class="hero-stat-label">Reduction in Overtime</div>
</div>
<div class="hero-stat">
<div class="hero-stat-value">$0<span>/mo</span></div>
<div class="hero-stat-label">Subscription Fee</div>
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-mockup">
<div class="mockup-header">
<div class="mockup-dot red"></div>
<div class="mockup-dot yellow"></div>
<div class="mockup-dot green"></div>
<span class="mockup-title">AI WFM — Workforce Dashboard v3.8</span>
</div>
<div class="mockup-body">
<div class="mockup-sidebar">
<div class="mockup-sidebar-item active"><i class="fas fa-calendar-days"></i> Schedule</div>
<div class="mockup-sidebar-item"><i class="fas fa-users"></i> Team</div>
<div class="mockup-sidebar-item"><i class="fas fa-clock"></i> Time & Attendance</div>
<div class="mockup-sidebar-item"><i class="fas fa-robot"></i> AI Planner</div>
<div class="mockup-sidebar-item"><i class="fas fa-chart-column"></i> Analytics</div>
<div class="mockup-sidebar-item"><i class="fas fa-scale-balanced"></i> Compliance</div>
</div>
<div class="mockup-main">
<div class="mockup-row">
<div class="mockup-cell highlighted"></div>
<div class="mockup-cell"></div>
<div class="mockup-cell"></div>
</div>
<div class="mockup-row">
<div class="mockup-cell"></div>
<div class="mockup-cell highlighted"></div>
<div class="mockup-cell"></div>
</div>
<div class="mockup-row">
<div class="mockup-cell"></div>
<div class="mockup-cell"></div>
<div class="mockup-cell highlighted"></div>
</div>
<div class="mockup-chart">
<div class="chart-bar" style="height:55%"></div>
<div class="chart-bar" style="height:78%"></div>
<div class="chart-bar" style="height:45%"></div>
<div class="chart-bar" style="height:92%"></div>
<div class="chart-bar" style="height:68%"></div>
<div class="chart-bar" style="height:85%"></div>
<div class="chart-bar" style="height:72%"></div>
<div class="chart-bar" style="height:95%"></div>
<div class="chart-bar" style="height:60%"></div>
<div class="chart-bar" style="height:80%"></div>
</div>
</div>
</div>
</div>
<div class="ai-indicator top-right">
<div class="ai-indicator-icon green"><i class="fas fa-check-circle"></i></div>
<div>
<div class="ai-indicator-text">Schedule Optimized</div>
<div class="ai-indicator-value">$12.4K Saved/Week</div>
</div>
</div>
<div class="ai-indicator bottom-left">
<div class="ai-indicator-icon blue"><i class="fas fa-bolt"></i></div>
<div>
<div class="ai-indicator-text">Compliance Check</div>
<div class="ai-indicator-value">100% Clean</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========== TRUST BAR ========== -->
<section class="trust-bar">
<div class="container">
<p>Trusted by operations leaders across industries</p>
<div class="trust-logos">
<div class="trust-logo"><i class="fas fa-hospital"></i> Regional Health Systems</div>
<div class="trust-logo"><i class="fas fa-store"></i> National Retail Chains</div>
<div class="trust-logo"><i class="fas fa-building"></i> Multi-Site Healthcare</div>
<div class="trust-logo"><i class="fas fa-industry"></i> Manufacturing Groups</div>
<div class="trust-logo"><i class="fas fa-truck-fast"></i> Logistics Networks</div>
</div>
</div>
</section>
<!-- ========== PROBLEMS / SOLUTIONS ========== -->
<section class="problems" id="problems">
<div class="container">
<div class="problems-left">
<div class="section-label"><i class="fas fa-exclamation-triangle"></i> Workforce Management Challenges</div>
<h2 class="section-title">
Traditional WFM Tools Have<br>
<span class="text-gradient">Three Critical Weaknesses</span>
</h2>
<p class="section-subtitle">
We analyzed workforce data from 500+ organizations to identify the systemic problems that waste labor budgets and expose operations to compliance risk.
</p>
</div>
<div class="problems-grid">
<div class="problems-left">
<div class="problem-card animate-on-scroll">
<div class="problem-card-header">
<div class="problem-number">1</div>
<div class="problem-card-title">The Scheduling Black Box</div>
</div>
<p>Manual scheduling consumes <strong>15–20 hours per week</strong> per manager. Spreadsheets and legacy systems can't account for demand patterns, skill matrices, or labor law constraints simultaneously — leading to chronic understaffing or overstaffing.</p>
</div>
<div class="problem-card animate-on-scroll">
<div class="problem-card-header">
<div class="problem-number">2</div>
<div class="problem-card-title">Overtime & Compliance Drift</div>
</div>
<p>Labor law violations average <strong>$15K–$85K per incident</strong> in penalties and back pay. Traditional systems lack real-time monitoring of overtime thresholds, rest period compliance, and jurisdiction-specific rules — until it's too late.</p>
</div>
<div class="problem-card animate-on-scroll">
<div class="problem-card-header">
<div class="problem-number">3</div>
<div class="problem-card-title">Subscription Traps & Data Silos</div>
</div>
<p>Industry-standard WFM subscriptions cost <strong>$8–$25 per employee per month</strong>, scaling to $500K+ annually for mid-size organizations. Data remains locked behind paywalls, making audits, migrations, and custom reporting nearly impossible.</p>
</div>
</div>
<div class="solutions-right">
<div class="section-label" style="margin-bottom:32px"><i class="fas fa-check-double"></i> How AI WFM Solves This</div>
<div class="solution-card animate-on-scroll">
<div class="solution-card-header">
<div class="solution-icon"><i class="fas fa-wand-magic-sparkles"></i></div>
<div class="solution-card-title">AI Demand-Driven Scheduling</div>
</div>
<p>Our AI Planner analyzes historical demand, real-time bookings, weather, events, and seasonal patterns to generate optimized schedules that match staffing to actual need — not guesswork.</p>
<ul class="solution-feature-list">
<li><i class="fas fa-check-circle"></i> Predictive demand forecasting (7-day + rolling)</li>
<li><i class="fas fa-check-circle"></i> Auto-generation respecting skill matrix & preferences</li>
<li><i class="fas fa-check-circle"></i> Swap & coverage marketplace with push notifications</li>
<li><i class="fas fa-check-circle"></i> Reduces scheduling time by 90%</li>
</ul>
</div>
<div class="solution-card animate-on-scroll">
<div class="solution-card-header">
<div class="solution-icon"><i class="fas fa-shield-halved"></i></div>
<div class="solution-card-title">Real-Time Compliance Guardian</div>
</div>
<p>The Compliance Engine monitors every shift in real-time against federal, state, and local labor laws — preventing violations before they occur with proactive alerts and auto-adjustments.</p>
<ul class="solution-feature-list">
<li><i class="fas fa-check-circle"></i> Real-time overtime threshold monitoring</li>
<li><i class="fas fa-check-circle"></i> Multi-jurisdiction rule engine (50 states + local)</li>
<li><i class="fas fa-check-circle"></i> Automated break & rest period tracking</li>
<li><i class="fas fa-check-circle"></i> Wage & hour compliance auditing</li>
</ul>
</div>
<div class="solution-card animate-on-scroll">
<div class="solution-card-header">
<div class="solution-icon"><i class="fas fa-lock-open"></i></div>
<div class="solution-card-title">True Data Ownership Licensing</div>
</div>
<p>One-time seat licensing with full workforce data export. Your scheduling data, your servers, your control — no vendor lock-in, no subscription treadmill.</p>
<ul class="solution-feature-list">
<li><i class="fas fa-check-circle"></i> Perpetual license — pay once, own forever</li>
<li><i class="fas fa-check-circle"></i> Full data export in CSV, JSON, HL7 (HR)</li>
<li><i class="fas fa-check-circle"></i> On-premise or private cloud deployment</li>
<li><i class="fas fa-check-circle"></i> Zero per-employee or per-employee fees</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ========== FEATURES ========== -->
<section class="features" id="features">
<div class="container">
<div class="features-header">
<div class="section-label"><i class="fas fa-sparkles"></i> Platform Features</div>
<h2 class="section-title">
Every Tool Your Workforce<br>
<span class="text-gradient">Needs to Thrive</span>
</h2>
<p class="section-subtitle">
A purpose-built, AI-native workforce management platform — not a scheduling app with compliance bolted on.
</p>
</div>
<div class="features-tabs">
<div class="feature-tab active" data-tab="all">All Features</div>
<div class="feature-tab" data-tab="scheduling">Scheduling</div>
<div class="feature-tab" data-tab="ai">AI & Automation</div>
<div class="feature-tab" data-tab="compliance">Compliance</div>
<div class="feature-tab" data-tab="analytics">Analytics</div>
<div class="feature-tab" data-tab="employee">Employee Experience</div>
</div>
<div class="features-grid">
<div class="feature-card animate-on-scroll" data-category="scheduling">
<div class="feature-icon purple"><i class="fas fa-calendar-days"></i></div>
<h3>AI Demand-Driven Scheduling</h3>
<p>Machine learning models analyze 2+ years of historical data, real-time bookings, and external signals to predict demand and auto-generate optimized schedules.</p>
<div class="feature-tags"><span class="feature-tag">Predictive</span><span class="feature-tag">Auto-Generate</span><span class="feature-tag">Multi-Shift</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="scheduling">
<div class="feature-icon blue"><i class="fas fa-arrows-rotate"></i></div>
<h3>Shift Swap & Coverage Marketplace</h3>
<p>Employees propose and accept shift swaps through a mobile-first marketplace. Managers approve with one tap. Coverage gaps close automatically.</p>
<div class="feature-tags"><span class="feature-tag">Mobile</span><span class="feature-tag">Auto-Coverage</span><span class="feature-tag">Approval Flows</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="ai">
<div class="feature-icon cyan"><i class="fas fa-brain"></i></div>
<h3>AI Workforce Intelligence Agent</h3>
<p>Autonomous agent that monitors labor patterns, flags scheduling risks, recommends optimization moves, and learns from manager decisions over time.</p>
<div class="feature-tags"><span class="feature-tag">Autonomous</span><span class="feature-tag">Risk Detection</span><span class="feature-tag">Learning</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="compliance">
<div class="feature-icon green"><i class="fas fa-scale-balanced"></i></div>
<h3>Real-Time Compliance Engine</h3>
<p>Live monitoring of overtime thresholds, rest periods, break requirements, and jurisdiction-specific rules. Violations flagged before they're created.</p>
<div class="feature-tags"><span class="feature-tag">FLSA</span><span class="feature-tag">Multi-State</span><span class="feature-tag">Real-Time</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="compliance">
<div class="feature-icon amber"><i class="fas fa-clock"></i></div>
<h3>Smart Time & Attendance</h3>
<p>Biometric and geofenced clock-in/out, automatic overtime alerts, schedule variance detection, and real-time labor cost tracking per department and location.</p>
<div class="feature-tags"><span class="feature-tag">Biometric</span><span class="feature-tag">Geofence</span><span class="feature-tag">Live Labor Cost</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="analytics">
<div class="feature-icon rose"><i class="fas fa-chart-line"></i></div>
<h3>Labor Analytics & Benchmarking</h3>
<p>Real-time dashboards tracking labor cost as % of revenue, overtime trends, turnover predictors, schedule adequacy scores, and peer benchmarking.</p>
<div class="feature-tags"><span class="feature-tag">KPIs</span><span class="feature-tag">Trends</span><span class="feature-tag">Benchmarking</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="employee">
<div class="feature-icon purple"><i class="fas fa-mobile-screen-button"></i></div>
<h3>Employee Self-Service Mobile App</h3>
<p>View schedules, swap shifts, request time off, log overtime, access pay stubs, and communicate with managers — all from a single mobile app.</p>
<div class="feature-tags"><span class="feature-tag">iOS</span><span class="feature-tag">Android</span><span class="feature-tag">Push Notifications</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="analytics">
<div class="feature-icon cyan"><i class="fas fa-chart-pie"></i></div>
<h3>Workforce Planning Simulator</h3>
<p>"What-if" modeling for hiring, expansion, and restructuring. Simulate the impact of new hires, store closures, and seasonal changes on labor costs.</p>
<div class="feature-tags"><span class="feature-tag">What-If</span><span class="feature-tag">Forecasting</span><span class="feature-tag">Budgeting</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="scheduling">
<div class="feature-icon blue"><i class="fas fa-users"></i></div>
<h3>Skills & Certification Matrix</h3>
<p>Track employee skills, certifications, expirations, and training needs. Schedules auto-match required credentials to shift requirements.</p>
<div class="feature-tags"><span class="feature-tag">Matrix</span><span class="feature-tag">Expirations</span><span class="feature-tag">Training</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="compliance">
<div class="feature-icon green"><i class="fas fa-file-contract"></i></div>
<h3>Automated Policy Management</h3>
<p>Centralized policy library with version control, auto-dissemination to affected employees, digital acknowledgment tracking, and audit-ready documentation.</p>
<div class="feature-tags"><span class="feature-tag">Policy Library</span><span class="feature-tag">ACK Tracking</span><span class="feature-tag">Audit</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="employee">
<div class="feature-icon amber"><i class="fas fa-bell"></i></div>
<h3>Smart Notification System</h3>
<p>AI-powered notifications that adapt to employee preferences — schedule changes, shift openings, compliance alerts, and manager messages delivered at optimal times.</p>
<div class="feature-tags"><span class="feature-tag">Adaptive</span><span class="feature-tag">Priority</span><span class="feature-tag">Multi-Channel</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="analytics">
<div class="feature-icon rose"><i class="fas fa-magnifying-glass-chart"></i></div>
<h3>Turnover & Engagement Predictor</h3>
<p>Predictive model scoring each employee's flight risk based on schedule patterns, overtime burden, tenure, and engagement signals — with recommended retention actions.</p>
<div class="feature-tags"><span class="feature-tag">Retention</span><span class="feature-tag">Predictive</span><span class="feature-tag">Actionable</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="scheduling">
<div class="feature-icon purple"><i class="fas fa-location-dot"></i></div>
<h3>Multi-Location & Multi-Shift Management</h3>
<p>Centralized control across unlimited locations and shifts. Transfer employees between sites, manage shared resource pools, and track cross-location labor costs.</p>
<div class="feature-tags"><span class="feature-tag">Multi-Site</span><span class="feature-tag">Resource Pool</span><span class="feature-tag">Cross-Location</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="compliance">
<div class="feature-icon blue"><i class="fas fa-user-check"></i></div>
<h3>ADA & Accommodation Tracking</h3>
<p>Track accommodation requests, schedule adjustments, and leave management in compliance with ADA, FMLA, and state-specific requirements.</p>
<div class="feature-tags"><span class="feature-tag">ADA</span><span class="feature-tag">FMLA</span><span class="feature-tag">Tracking</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="employee">
<div class="feature-icon cyan"><i class="fas fa-comment-dots"></i></div>
<h3>In-App Messaging & Announcements</h3>
<p>Team chat, broadcast announcements, shift-specific messages, and manager-to-employee direct messaging — all within the WFM platform.</p>
<div class="feature-tags"><span class="feature-tag">Chat</span><span class="feature-tag">Broadcast</span><span class="feature-tag">Shift-Specific</span></div>
</div>
<div class="feature-card animate-on-scroll" data-category="ai">
<div class="feature-icon amber"><i class="fas fa-chart-gantt"></i></div>
<h3>AI Backfill & Absence Predictor</h3>
<p>Predicts likely absences 72 hours in advance based on pattern analysis, weather, local events, and historical trends — pre-assigning backup coverage automatically.</p>
<div class="feature-tags"><span class="feature-tag">Predictive</span><span class="feature-tag">Auto-Backfill</span><span class="feature-tag">72-Hour Lead</span></div>
</div>
</div>
</div>
</section>
<!-- ========== DATA FLOW DIAGRAM ========== -->
<section class="data-flow" id="data-flow">
<div class="container">
<div class="data-flow-header">
<div class="section-label"><i class="fas fa-diagram-project"></i> How It Works</div>
<h2 class="section-title">
AI WFM Data Flow:<br>
<span class="text-gradient">From Raw Data to Optimized Shifts</span>
</h2>
<p class="section-subtitle">
Six stages of intelligent data processing that transform chaotic scheduling into precision workforce optimization.
</p>
</div>
<div class="flow-container">
<!-- Stage 1 -->
<div class="flow-stage animate-on-scroll">
<div class="flow-step-number">1</div>
<div class="flow-node">
<div class="flow-node-icon purple"><i class="fas fa-database"></i></div>
<h4>Data Ingestion Layer</h4>
<p>Historical scheduling data, time & attendance records, demand data, labor law databases, and external signals (weather, events, bookings) flow into the unified data warehouse via automated pipelines.</p>
<div class="flow-node-tags">
<span class="flow-node-tag">CSV/JSON/HL7</span>
<span class="flow-node-tag">Real-Time API</span>
<span class="flow-node-tag">Batch ETL</span>
</div>
</div>
<div class="flow-connector">
<div class="flow-connector-icon"><i class="fas fa-arrow-right"></i></div>
</div>
</div>
<!-- Stage 2 -->
<div class="flow-stage animate-on-scroll">
<div class="flow-step-number">2</div>
<div class="flow-node">
<div class="flow-node-icon blue"><i class="fas fa-gears"></i></div>
<h4>AI Model Processing Engine</h4>
<p>Machine learning models process ingested data to generate demand forecasts, identify scheduling patterns, predict absences, and optimize constraint satisfaction across all workforce parameters.</p>
<div class="flow-node-tags">
<span class="flow-node-tag">Demand Forecasting</span>
<span class="flow-node-tag">Pattern Recognition</span>
<span class="flow-node-tag">Optimization</span>
</div>
</div>
<div class="flow-connector">
<div class="flow-connector-icon"><i class="fas fa-arrow-right"></i></div>
</div>
</div>
<!-- Stage 3 -->
<div class="flow-stage animate-on-scroll">
<div class="flow-step-number">3</div>
<div class="flow-node">
<div class="flow-node-icon green"><i class="fas fa-shield-halved"></i></div>
<h4>Compliance Validation Layer</h4>
<p>Every generated schedule passes through the real-time compliance engine, checking against federal, state, and local labor laws — overtime limits, break requirements, minimum rest periods, and credential matching.</p>
<div class="flow-node-tags">
<span class="flow-node-tag">FLSA Rules</span>
<span class="flow-node-tag">State Laws</span>
<span class="flow-node-tag">Local Ordinances</span>
<span class="flow-node-tag">Credential Checks</span>
</div>
</div>
<div class="flow-connector">
<div class="flow-connector-icon"><i class="fas fa-arrow-right"></i></div>
</div>
</div>
<!-- Stage 4 -->
<div class="flow-stage animate-on-scroll">
<div class="flow-step-number">4</div>
<div class="flow-node">
<div class="flow-node-icon amber"><i class="fas fa-user-tie"></i></div>
<h4>Manager Review & Approval</h4>
<p>Optimized schedules surface in a clean, intuitive interface with compliance status, cost projections, and coverage scores. Managers approve, adjust, or override with full change tracking and audit trails.</p>
<div class="flow-node-tags">
<span class="flow-node-tag">Visual Override</span>
<span class="flow-node-tag">Cost Preview</span>
<span class="flow-node-tag">Audit Trail</span>
</div>
</div>
<div class="flow-connector">
<div class="flow-connector-icon"><i class="fas fa-arrow-right"></i></div>
</div>
</div>
<!-- Stage 5 -->
<div class="flow-stage animate-on-scroll">
<div class="flow-step-number">5</div>
<div class="flow-node">
<div class="flow-node-icon rose"><i class="fas fa-mobile-screen-button"></i></div>
<h4>Employee Distribution & Engagement</h4>
<p>Approved schedules push to employee mobile apps instantly. Shift swaps, time-off requests, and coverage needs flow back through the system, updating forecasts and compliance status in real-time.</p>
<div class="flow-node-tags">
<span class="flow-node-tag">Push Notifications</span>
<span class="flow-node-tag">Swap Marketplace</span>
<span class="flow-node-tag">Time-Off Requests</span>
</div>
</div>
<div class="flow-connector">
<div class="flow-connector-icon"><i class="fas fa-arrow-right"></i></div>
</div>
</div>
<!-- Stage 6 -->
<div class="flow-stage animate-on-scroll">
<div class="flow-step-number">6</div>
<div class="flow-node">
<div class="flow-node-icon cyan"><i class="fas fa-chart-mixed"></i></div>
<h4>Analytics, Reporting & Continuous Learning</h4>
<p>Actual outcomes feed back into the AI models for continuous improvement. Real-time dashboards track labor cost efficiency, compliance adherence, employee satisfaction, and predictive accuracy.</p>
<div class="flow-node-tags">
<span class="flow-node-tag">Live Dashboards</span>
<span class="flow-node-tag">ML Feedback Loop</span>
<span class="flow-node-tag">Custom Reports</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========== INTEGRATIONS ========== -->
<section class="integrations" id="integrations">
<div class="container">
<div class="integrations-header">
<div class="section-label"><i class="fas fa-plug"></i> Integrations</div>
<h2 class="section-title">
Connects With the Platforms<br>
<span class="text-gradient">You Already Use</span>
</h2>
<p class="section-subtitle">
Native bidirectional integrations with the top HRIS, payroll, and ATS platforms — so your team can keep their favorites while gaining AI-native scheduling power.
</p>
</div>
<div class="integration-main">
<!-- BambooHR -->
<div class="integration-card animate-on-scroll">
<div class="integration-logo bamboo"><i class="fas fa-leaf"></i></div>
<div class="integration-name">BambooHR</div>
<div class="integration-type">Human Resources Information System</div>
<p class="integration-desc">
The most popular mid-market HRIS. AI WFM integrates bidirectionally with BambooHR for seamless employee data synchronization, onboarding, and offboarding.
</p>
<ul class="integration-features">
<li><i class="fas fa-check-circle"></i> Real-time employee data sync</li>
<li><i class="fas fa-check-circle"></i> Onboarding/offboarding automation</li>
<li><i class="fas fa-check-circle"></i> Department & org structure sync</li>
<li><i class="fas fa-check-circle"></i> PTO/balance synchronization</li>
<li><i class="fas fa-check-circle"></i> Custom field mapping</li>
</ul>
</div>
<!-- UKG (Kronos) -->
<div class="integration-card animate-on-scroll">
<div class="integration-logo ukg"><i class="fas fa-building-columns"></i></div>
<div class="integration-name">UKG (Kronos)</div>
<div class="integration-type">Workforce Management & Payroll</div>
<p class="integration-desc">
UKG Pro & Ready. AI WFM serves as an AI-native scheduling layer on top of UKG's time and attendance backbone, adding predictive intelligence to existing infra.
</p>
<ul class="integration-features">
<li><i class="fas fa-check-circle"></i> UKG Pro scheduling integration</li>
<li><i class="fas fa-check-circle"></i> Time & attendance data exchange</li>
<li><i class="fas fa-check-circle"></i> Payroll calculation sync</li>
<li><i class="fas fa-check-circle"></i> UKG Dimensions compatibility</li>
<li><i class="fas fa-check-circle"></i> Biometric terminal integration</li>
</ul>
</div>
<!-- Deel -->
<div class="integration-card animate-on-scroll">
<div class="integration-logo deel"><i class="fas fa-globe"></i></div>
<div class="integration-name">Deel</div>
<div class="integration-type">Global Payroll & Compliance</div>
<p class="integration-desc">
Global workforce management. AI WFM integrates with Deel for cross-border compliance, multi-currency payroll, and international labor law adherence.
</p>
<ul class="integration-features">
<li><i class="fas fa-check-circle"></i> Multi-country labor law integration</li>
<li><i class="fas fa-check-circle"></i> Payroll rate synchronization</li>
<li><i class="fas fa-check-circle"></i> Contractor vs. employee classification</li>
<li><i class="fas fa-check-circle"></i> Multi-currency labor cost tracking</li>
<li><i class="fas fa-check-circle"></i> Global compliance reporting</li>
</ul>
</div>
</div>
<div class="integrations-note animate-on-scroll">
<p><strong>Plus 50+ additional integrations</strong> via REST API, webhooks, and open standards — including ADP, Gusto, Paychex, Greenhouse, Lever, When I Work, and more.</p>
</div>
</div>
</section>
<!-- ========== PRICING ========== -->
<section class="pricing" id="pricing">
<div class="container">
<div class="pricing-header">
<div class="section-label"><i class="fas fa-tag"></i> Licensing</div>
<h2 class="section-title">
One-Time Licensing.<br>
<span class="text-gradient">No Subscriptions. Ever.</span>
</h2>
<p class="pricing-subtitle">
Pay once per seat. Own the software forever. Includes all features, updates, and standard support. We believe workforce tech shouldn't bleed budgets with recurring fees.
</p>
</div>
<div class="pricing-badges">
<div class="pricing-badge no-sub"><i class="fas fa-ban"></i> Zero Monthly Fees</div>
<div class="pricing-badge once"><i class="fas fa-lock"></i> Perpetual License</div>
<div class="pricing-badge support"><i class="fas fa-headset"></i> Annual Support Optional</div>
</div>
<div class="pricing-grid">
<!-- Starter -->
<div class="pricing-card animate-on-scroll">
<div class="pricing-card-header">
<div class="pricing-seats">1 – 50 Seats</div>
<div class="pricing-name">Starter</div>
<div class="pricing-desc">Small teams & single locations</div>
<div class="pricing-amount">
<span class="pricing-currency">$</span>
<span class="pricing-value">4,995</span>
</div>
<div class="pricing-per-seat">from $99.90 /seat · one-time</div>
</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Full WFM platform access</li>
<li><i class="fas fa-check"></i> AI Demand Forecasting (basic)</li>
<li><i class="fas fa-check"></i> Auto-scheduling engine</li>
<li><i class="fas fa-check"></i> Shift swap marketplace</li>
<li><i class="fas fa-check"></i> Employee mobile app</li>
<li><i class="fas fa-check"></i> Basic compliance engine</li>
<li><i class="fas fa-check"></i> Time & attendance</li>
<li><i class="fas fa-check"></i> Email support (48hr SLA)</li>
<li class="disabled"><i class="fas fa-xmark"></i> Multi-location management</li>
<li class="disabled"><i class="fas fa-xmark"></i> Advanced analytics suite</li>
<li class="disabled"><i class="fas fa-xmark"></i> On-premise deployment</li>
</ul>
<a href="contact.html" class="pricing-btn pricing-btn-outline">Get Started</a>
</div>
<!-- Professional -->
<div class="pricing-card animate-on-scroll">
<div class="pricing-card-header">
<div class="pricing-seats">51 – 500 Seats</div>
<div class="pricing-name">Professional</div>
<div class="pricing-desc">Growing organizations & multi-site</div>
<div class="pricing-amount">
<span class="pricing-currency">$</span>
<span class="pricing-value">3,495</span>
</div>
<div class="pricing-per-seat">from $3,495 · flat per seat · one-time</div>
</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Everything in Starter</li>
<li><i class="fas fa-check"></i> AI Workforce Intelligence Agent</li>
<li><i class="fas fa-check"></i> Advanced compliance engine (50 states)</li>
<li><i class="fas fa-check"></i> Multi-location management</li>
<li><i class="fas fa-check"></i> Skills & certification matrix</li>
<li><i class="fas fa-check"></i> Workforce planning simulator</li>
<li><i class="fas fa-check"></i> Turnover predictor</li>
<li><i class="fas fa-check"></i> Custom report builder</li>
<li><i class="fas fa-check"></i> Priority support (24hr SLA)</li>
<li><i class="fas fa-check"></i> API access & webhooks</li>
<li class="disabled"><i class="fas fa-xmark"></i> On-premise deployment</li>
</ul>
<a href="contact.html" class="pricing-btn pricing-btn-outline">Get Started</a>
</div>
<!-- Enterprise -->
<div class="pricing-card featured animate-on-scroll">
<div class="pricing-popular">Most Popular</div>
<div class="pricing-card-header">
<div class="pricing-seats">501 – 5,000 Seats</div>
<div class="pricing-name">Enterprise</div>
<div class="pricing-desc">Large organizations & health systems</div>
<div class="pricing-amount">
<span class="pricing-currency">$</span>
<span class="pricing-value">2,495</span>
</div>
<div class="pricing-per-seat">from $2,495 · flat per seat · one-time</div>
</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Everything in Professional</li>
<li><i class="fas fa-check"></i> AI Backfill & Absence Predictor</li>
<li><i class="fas fa-check"></i> ADA/FMLA accommodation tracking</li>
<li><i class="fas fa-check"></i> On-premise or private cloud</li>
<li><i class="fas fa-check"></i> Dedicated implementation team</li>
<li><i class="fas fa-check"></i> Custom integrations & SSO/SAML</li>
<li><i class="fas fa-check"></i> White-label employee app</li>
<li><i class="fas fa-check"></i> Peer benchmarking data</li>
<li><i class="fas fa-check"></i> 4-hour support response SLA</li>
<li><i class="fas fa-check"></i> Quarterly business reviews</li>
<li><i class="fas fa-check"></i> Advanced RBAC & audit logs</li>
</ul>
<a href="contact.html" class="pricing-btn pricing-btn-primary">Get Started</a>
</div>
<!-- Health System -->
<div class="pricing-card animate-on-scroll">
<div class="pricing-card-header">
<div class="pricing-seats">5,000+ Seats</div>
<div class="pricing-name">Health System</div>
<div class="pricing-desc">Enterprise & academic medical centers</div>
<div class="pricing-amount">
<span class="pricing-currency">$</span>
<span class="pricing-value" style="font-size:2rem">Custom</span>
</div>
<div class="pricing-per-seat">volume pricing · contact sales</div>
</div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Everything in Enterprise</li>
<li><i class="fas fa-check"></i> Unlimited AI agents</li>
<li><i class="fas fa-check"></i> Multi-tenant architecture</li>
<li><i class="fas fa-check"></i> On-premise dedicated instances</li>
<li><i class="fas fa-check"></i> Custom AI model training</li>
<li><i class="fas fa-check"></i> Disaster recovery & HA</li>
<li><i class="fas fa-check"></i> Dedicated TAM & success team</li>
<li><i class="fas fa-check"></i> 1-hour critical response SLA</li>
<li><i class="fas fa-check"></i> Custom SLA negotiation</li>
<li><i class="fas fa-check"></i> Annual license reviews</li>
<li><i class="fas fa-check"></i> Embedded research registry</li>
</ul>
<a href="contact.html" class="pricing-btn pricing-btn-outline">Contact Sales</a>
</div>
</div>
<div class="pricing-cta">
<p><i class="fas fa-shield-halved" style="color:var(--accent-green)"></i> All plans include HIPAA compliance readiness, SOC 2 Type II, encryption at rest & in transit, and automatic security patches.</p>
<a href="contact.html" class="btn btn-primary btn-large"><i class="fas fa-calculator"></i> Request Custom Quote</a>
</div>
</div>
</section>
<!-- ========== REVIEWS ========== -->
<section class="reviews" id="reviews">
<div class="container">
<div class="reviews-header">
<div class="section-label"><i class="fas fa-star"></i> Customer Reviews</div>
<h2 class="section-title">
Trusted by Operations Leaders<br>
<span class="text-gradient">Who Refuse to Settle</span>
</h2>
<p class="section-subtitle">
Don't take our word for it. Here's what our customers — real operations directors, VP HR, and COOs — have to say after deploying AI WFM.
</p>
</div>
<div class="reviews-grid">
<!-- Review 1 -->
<div class="review-card featured-review animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
We went from spending 22 hours a week on manual scheduling to literally 90 minutes reviewing AI-generated rosters. The overtime savings alone paid for the entire license in month two. This is what modern workforce management should be.
</p>
<div class="review-author">
<div class="review-avatar av1">MR</div>
<div>
<div class="review-author-name">Maria Rodriguez</div>
<div class="review-author-title">VP of Operations</div>
<div class="review-company">Summit Health Systems, Dallas TX</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 2 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
The compliance engine caught a California wage & hour violation we'd been unknowingly making for 18 months. One violation would have cost us $230K in penalties. AI WFM paid for itself 400x over in the first quarter.
</p>
<div class="review-author">
<div class="review-avatar av2">JT</div>
<div>
<div class="review-author-name">James Torres</div>
<div class="review-author-title">Chief Human Resources Officer</div>
<div class="review-company">Pacific Retail Group, Seattle WA</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 3 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
As a 14-location urgent care network, scheduling was a nightmare. AI WFM's predictive absence model flags likely no-shows 72 hours out, and the auto-backfill closes gaps before managers even notice. Our coverage rate went from 87% to 99.2%.
</p>
<div class="review-author">
<div class="review-avatar av3">SP</div>
<div>
<div class="review-author-name">Dr. Sandra Patel, MD, MBA</div>
<div class="review-author-title">Medical Director & Co-Founder</div>
<div class="review-company">RapidCare Urgent Health, Phoenix AZ</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 4 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
<p class="review-text">
We switched from UKG Kronos for our 800-employee manufacturing operation. The one-time licensing saved us $480K in the first two years vs. their per-employee subscription. Employee satisfaction with scheduling went from 3.1 to 4.6 out of 5.
</p>
<div class="review-author">
<div class="review-avatar av4">MK</div>
<div>
<div class="review-author-name">Michael Kim</div>
<div class="review-author-title">Director of Workforce Planning</div>
<div class="review-company">Great Lakes Manufacturing, Cleveland OH</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 5 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
The turnover predictor identified 23 at-risk employees we'd have lost without intervention. We adjusted schedules, reduced overtime burdens, and retained 19 of them. That's $340K in avoided recruiting and training costs.
</p>
<div class="review-author">
<div class="review-avatar av5">AL</div>
<div>
<div class="review-author-name">Angela Liu</div>
<div class="review-author-title">VP of People & Culture</div>
<div class="review-company">Coastal Hospitality Group, San Diego CA</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 6 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
Running 6 hospitals across 3 states meant juggling wildly different labor laws. The compliance engine handles California, New York, and Texas rules simultaneously — and alerts us to upcoming local ordinance changes. Game-changer for multi-state operations.
</p>
<div class="review-author">
<div class="review-avatar av6">DW</div>
<div>
<div class="review-author-name">David Walsh, PHR, SPHR</div>
<div class="review-author-title">Chief People Officer</div>
<div class="review-company">Regional Health Alliance, Chicago IL</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 7 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
<p class="review-text">
Our warehouse shifts changed dramatically during peak season. The AI planner handled 3x demand spikes without breaking labor rules, and the skills matrix ensured only certified operators ran specific equipment. Zero compliance incidents all season.
</p>
<div class="review-author">
<div class="review-avatar av7">RH</div>
<div>
<div class="review-author-name">Robert Henderson</div>
<div class="review-author-title">Director of Logistics Operations</div>
<div class="review-company">SwiftFreight Logistics, Memphis TN</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 8 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
The employee mobile app reduced our schedule-related help desk tickets by 78%. Staff love the swap marketplace and push notifications. Manager time spent on "when am I working?" emails dropped to near zero.
</p>
<div class="review-author">
<div class="review-avatar av8">LN</div>
<div>
<div class="review-author-name">Lisa Nguyen</div>
<div class="review-author-title">HR Technology Manager</div>
<div class="review-company">Metro Regional Medical, Houston TX</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
<!-- Review 9 -->
<div class="review-card animate-on-scroll">
<div class="review-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<p class="review-text">
The workforce planning simulator helped us model the impact of opening 4 new locations. It accurately predicted we'd need 47 FTEs, and we only needed 43 in reality. That 4-person difference saved us $312K in Year 1.
</p>
<div class="review-author">
<div class="review-avatar av9">CP</div>
<div>
<div class="review-author-name">Dr. Christopher Park, MBA</div>
<div class="review-author-title">Chief Operating Officer</div>
<div class="review-company">Apex Surgical Partners, Nashville TN</div>
<div class="review-verified"><i class="fas fa-circle-check"></i> Verified Customer</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========== HIPAA COMPLIANCE ========== -->
<section class="compliance-section" id="compliance">
<div class="container">
<div class="compliance-header">
<div class="section-label"><i class="fas fa-shield-halved"></i> Compliance & Security</div>
<h2 class="section-title">
Built for Regulated Industries.<br>
<span class="text-gradient">Certified for Everything.</span>
</h2>
<p class="section-subtitle">
AI WFM isn't just compliant — it was designed around compliance from the very first line of code. Every feature, every data flow, every access control is built to meet the highest regulatory standards.
</p>
</div>
<div class="compliance-grid">
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon green"><i class="fas fa-user-shield"></i></div>
<h3>HIPAA Privacy Rule</h3>
<p>Full coverage of all HIPAA Privacy Rule requirements for protected health information (PHI) handling in workforce management contexts, including employee health records and accommodation data.</p>
<div class="compliance-status active"><i class="fas fa-check-circle"></i> Fully Compliant</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon blue"><i class="fas fa-lock"></i></div>
<h3>HIPAA Security Rule — Technical Safeguards</h3>
<p>AES-256 encryption at rest, TLS 1.3 encryption in transit, automated access controls, integrity controls, and transmission security for all ePHI data flows.</p>
<div class="compliance-status certified"><i class="fas fa-certificate"></i> SOC 2 Type II Certified</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon purple"><i class="fas fa-magnifying-glass"></i></div>
<h3>HIPAA Audit Controls</h3>
<p>Complete activity logging for all PHI access, modification, and transmission. Immutable audit trails with role-based access control (RBAC) and privilege escalation monitoring.</p>
<div class="compliance-status active"><i class="fas fa-check-circle"></i> Fully Compliant</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon amber"><i class="fas fa-file-contract"></i></div>
<h3>BAA Management</h3>
<p>Automated Business Associate Agreement generation and tracking. Ensures all subcontractors and integrated platforms maintain compliant data handling agreements.</p>
<div class="compliance-status active"><i class="fas fa-check-circle"></i> Fully Compliant</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon cyan"><i class="fas fa-scale-balanced"></i></div>
<h3>ADA Compliance — Scheduling</h3>
<p>Accommodation request tracking, interactive process documentation, schedule adjustment logging, and FMLA integration for protected leave management per ADA and FMLA statutes.</p>
<div class="compliance-status active"><i class="fas fa-check-circle"></i> Fully Compliant</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon rose"><i class="fas fa-file-lines"></i></div>
<h3>FLSA & State Labor Law</h3>
<p>Real-time monitoring of federal Fair Labor Standards Act requirements and all 50 state labor laws including predictive scheduling ordinances, split-shift rules, and pay transparency requirements.</p>
<div class="compliance-status certified"><i class="fas fa-certificate"></i> 50-State Coverage</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon green"><i class="fas fa-database"></i></div>
<h3>Data Residency & Sovereignty</h3>
<p>Choose your data residency region (US, EU, APAC). Full data sovereignty guarantees with on-premise and private cloud deployment options for regulated industries.</p>
<div class="compliance-status active"><i class="fas fa-check-circle"></i> Multi-Region Available</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon blue"><i class="fas fa-bug-slash"></i></div>
<h3>Penetration Testing & Vulnerability Management</h3>
<p>Annual third-party penetration testing by CERTIFIED ethical hackers. Continuous vulnerability monitoring with automated patch deployment. Bug bounty program in operation.</p>
<div class="compliance-status certified"><i class="fas fa-certificate"></i> Annual Pentest Certified</div>
</div>
<div class="compliance-card animate-on-scroll">
<div class="compliance-icon amber"><i class="fas fa-clipboard-check"></i></div>
<h3>SOC 2 Type II — Trust Services</h3>
<p>Independent third-party audit of security, availability, processing integrity, confidentiality, and privacy. Annual certification maintained with zero material exceptions since inception.</p>
<div class="compliance-status certified"><i class="fas fa-certificate"></i> Annually Certified</div>
</div>
</div>
</div>
</section>
<!-- ========== CTA ========== -->
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Ready to Replace Your Spreadsheet<br>Schedule With AI?</h2>
<p>
Join 3,200+ organizations that have already made the switch. Get a custom quote for your workforce size — no credit card, no commitment, no subscription trap.
</p>
<div class="cta-actions">
<a href="contact.html" class="btn btn-primary btn-large"><i class="fas fa-paper-plane"></i> Get Your Custom Quote</a>
<a href="#data-flow" class="btn btn-secondary btn-large"><i class="fas fa-book-open"></i> Full Platform Tour</a>
</div>
<p class="cta-note"><i class="fas fa-clock"></i> Average response time: 2 hours during business hours</p>
</div>
</div>
</section>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="index.html" class="nav-logo" style="color:white">
<div class="nav-logo-icon"><i class="fas fa-users-gear"></i></div>
<div>
AI WFM
<span>TheMadHacker LLC</span>
</div>
</a>
<p>The AI-native Workforce Management platform built for modern organizations. One-time licensing. No subscriptions. Your data, your control.</p>
</div>
<div class="footer-col">
<h4>Platform</h4>
<a href="#features">Features</a>
<a href="#data-flow">How It Works</a>
<a href="#integrations">Integrations</a>
<a href="#pricing">Pricing</a>
<a href="#">Release Notes</a>
</div>
<div class="footer-col">
<h4>Resources</h4>
<a href="#">Documentation</a>
<a href="#">API Reference</a>
<a href="#">Compliance Guide</a>
<a href="#">Case Studies</a>
<a href="#">Webinars</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="#">About TheMadHacker</a>
<a href="#compliance">Security & Compliance</a>
<a href="#">Careers</a>
<a href="#">Contact Sales</a>
<a href="contact.html">Get a Quote</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 TheMadHacker LLC. All rights reserved. | <a href="#">Privacy Policy</a> · <a href="#">Terms of Service</a> · <a href="#">BAAs Available</a></p>
<div class="footer-social">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
<!-- ========== SCRIPTS ========== -->
<script>
// Navbar scroll effect
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 60) navbar.classList.add('scrolled');
else navbar.classList.remove('scrolled');
});
// Mobile menu toggle
const mobileToggle = document.getElementById('mobileToggle');
const navLinks = document.getElementById('navLinks');
mobileToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
const icon = mobileToggle.querySelector('i');
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-xmark');
});
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
const icon = mobileToggle.querySelector('i');
icon.classList.add('fa-bars');
icon.classList.remove('fa-xmark');
});
});
// Feature tab filtering
const tabs = document.querySelectorAll('.feature-tab');
const cards = document.querySelectorAll('.feature-card');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const category = tab.dataset.tab;
cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.style.display = '';
card.style.animation = 'scale-in 0.4s ease-out';
} else {
card.style.display = 'none';
}
});
});
});
// Scroll animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('visible');
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
// Counter animation
function animateCounters() {
const counters = document.querySelectorAll('.hero-stat-value');
counters.forEach(counter => {
const text = counter.textContent;
const match = text.match(/[\d,]+/);
if (!match) return;
const target = parseInt(match[0].replace(/,/g, ''));
let current = 0;
const increment = target / 60;
const timer = setInterval(() => {
current += increment;
if (current >= target) { current = target; clearInterval(timer); }
const formatted = current.toLocaleString();
const suffix = text.replace(match[0], formatted);
counter.innerHTML = suffix.replace('+', '<span>+</span>').replace('%', '<span>%</span>').replace('/mo', '<span>/mo</span>');
}, 30);
});
}
window.addEventListener('load', () => setTimeout(animateCounters, 500));
</script>
</body>
</html>
ornith-1.0-35b
1.
2.
3.
4.
Here are all the footer pages — 13 total — each following the exact same design system with SVG animations, textures, and convincing demo data.
1. release-notes.html
index.html
html
2. documentation.html
index-1.html
html
3. api-reference.html
index-2.html
html
4. compliance-guide.html
index-3.html
html
Due to the massive scope (13 pages), I've provided the first 4 pages in full. Let me continue with the remaining 9 pages — case-studies, webinars, about, security, careers, contact-sales, privacy-policy, terms-of-service, and BAAs.
Would you like me to continue with all remaining pages? The pattern is the same — each page follows the exact design system with its own unique content, SVG animations, and demo data. I can provide them all in the next response.
You
yes continue
ornith-1.0-35b
5.
6.
7.
8.
9.
10.
11.
12.
13.
Here are the remaining 9 pages — case-studies, webinars, about, security, careers, contact-sales, privacy-policy, terms-of-service, and BAAs.
5. case-studies.html
index.html
html
6. webinars.html
index-1.html
html
7. about.html
index-2.html
html
8. security.html
index-3.html
html
9. careers.html
index-4.html
html
10. contact-sales.html
index-5.html
html
11. privacy-policy.html
index-6.html
html
12. terms-of-service.html
index-7.html
html
13. baas.html
index-8.html
html
That completes all 13 footer pages — every link from the footer is now a fully-designed, content-rich page following the exact same visual design system with SVG animations, textures, and demo data. The contact.html page was already referenced in the original code.
You
excellent. now, using a similar color theme and nearly identical content, make the same pages for a platform/site called AI EHR (electronic health records) instead of AI WFM. build out the documentation page more, so that all the content links on the left work and pull up content. change compliance/security information to cover EHR ecosystem, not just scheduling. include some information within these pages on how AIEHR can interface and integrate with AIWFM. recreate all 13 pages. due to the large scope of the task, do 2 pages at a time. make sure release notes and all dates reflect current dates, 09/2026. also, make documentation robust, comprehensive, and as detailed as possible, adding in visual effects, dummy windows in guides, and a search feature. try, if possible, to integrate the search feature into a single html file, not needing any external files to function. the pages can be as large a file as you need to make them work. Be sure to include TheMadHacker (LLC) branding, contact info [email protected], phone 615 461 0768 , Nashville TN 37211
SVG icons are a MUST, and make the AI EHR software a white cross / plus shape in the middle of the blue square as a logo in the background, and a red heart with a heartbeat graph line in the foreground of the logo. the index.html front page has been created already, so we will revise that page last. start with release notes and documentation first.
ornith-1.0-35b
1.
2.
Here are the first 2 pages — Release Notes and Documentation (with full working sidebar + search) — for AI EHR.
1. release-notes.html
index.html
html
2. documentation.html — Full working sidebar + search
This is the big one — a comprehensive single-file documentation page with built-in search, working sidebar navigation, and detailed EHR-specific content:
index-1.html
html
What's included in these two pages:
- ✅ AI EHR branding with SVG logo (white cross + red heart with EKG line in blue square)
- ✅ TheMadHacker contact info (email, phone, Nashville address) in footer
- ✅ Dates updated to September 2026
- ✅ EHR-specific content: FHIR R4+, ONC certification, HIPAA safeguards, MIPS reporting, ePrescribing/Surescripts, clinical documentation, AI Scribe, lab integration
- ✅ AI WFM integration detailed with code examples, feature matrix, and configuration
- ✅ Documentation page has fully working sidebar navigation + built-in search with 24 indexed entries
- ✅ Visual mockup windows (patient record, AI Scribe live session, HIPAA dashboard)
- ✅ FHIR resource diagram with animated SVG glow effects
- ✅ Code blocks with syntax highlighting and copy buttons
- ✅ Callout boxes (info, warning, success, danger)
- ✅ Data tables for MIPS reporting
- ✅ Responsive design matching the AI WFM design system
- ✅ Smooth scroll, animations, mobile menu all working
Ready for the next 2 pages whenever you are.
You
ok work on the next 4 pages. make the heart in the logo bigger.
ornith-1.0-35b
3.
4.
5.
6.
Here are the next 4 pages — API Reference, Compliance Guide, Case Studies, and Webinars — all with the enlarged heart logo and EHR-specific content.
3. api-reference.html
index.html
html
4. compliance-guide.html
index-1.html
html
5. case-studies.html
index-2.html
html
6. webinars.html
index-3.html
html
That's pages 3–6 done (API Reference, Compliance Guide, Case Studies, Webinars). The heart in the logo is now noticeably bigger — rx="7" ry="8" instead of rx="5" ry="6".
Ready for the next batch whenever you are — pages 7–8 next (About and Security).
You
ok now write the remaining pages. fix the logo by centering the plus sign in the middle of the blue rectangle logo, then center the red heart in the very center and make it 2x to 3x larger
ornith-1.0-35b
7.
8.
9.
10.
11.
12.
13.
Here are the remaining 7 pages (7–13) with the fixed centered logo, EHR-specific content, September 2026 dates, and full TheMadHacker branding/contact info in every footer.
7. about.html
index.html
html
8. security.html
index-1.html
html
9. careers.html
index-2.html
html
10. contact-sales.html
index-3.html
html
11. privacy-policy.html
index-4.html
html
12. terms-of-service.html
index-5.html
html
13. baas.html
index-6.html
html
40.6 tok/s Peak: 41.2 tok/s 202323p + 59821c = 262144
index.html
html