300 lines
17 KiB
PHP
300 lines
17 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>FinMox — HR Execution Operating System</title>
|
||
<!-- Tailwind CDN (AppWizzy-safe) -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/custom.css">
|
||
</head>
|
||
<body class="bg-warm">
|
||
<!-- TOP NAV -->
|
||
<header class="max-w-7xl mx-auto px-6 py-5">
|
||
<div class="flex items-center justify-between">
|
||
<div class="font-extrabold text-lg">FinMox</div>
|
||
<div class="hidden md:flex items-center gap-1 text-sm" id="nav-links">
|
||
<!-- Links will be injected by JS -->
|
||
</div>
|
||
<div class="md:hidden">
|
||
<button id="menu-button" class="p-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile Menu -->
|
||
<div id="mobile-menu" class="hidden md:hidden mt-4">
|
||
<!-- Mobile links will be injected by JS -->
|
||
</div>
|
||
</header>
|
||
|
||
<main class="max-w-7xl mx-auto p-6">
|
||
<!-- HOME PAGE -->
|
||
<section id="page-home" class="page fade">
|
||
<!-- HERO -->
|
||
<section class="panel-strong p-8 lg:p-10 text-center">
|
||
<div class="inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/70 px-3 py-1 text-xs">
|
||
<span class="h-2 w-2 rounded-full bg-black"></span>
|
||
Now in private beta
|
||
</div>
|
||
<h1 class="mt-5 text-4xl md:text-6xl font-extrabold tracking-tight">
|
||
The OS for hiring execution.
|
||
</h1>
|
||
<p class="mt-4 text-gray-600 max-w-xl mx-auto">
|
||
FinMox is an intelligent enterprise system that automates HR, compliance, and operations.
|
||
Finally, a way to control the entire lifecycle — from role intake to offer letter.
|
||
</p>
|
||
<div class="mt-6 flex items-center justify-center gap-3">
|
||
<a href="#apply" class="rounded-full bg-black px-5 py-2 text-white text-sm font-semibold">Apply for Beta</a>
|
||
<a href="#signin" class="rounded-full px-5 py-2 text-sm font-semibold">Sign In</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- KEY PROCESSES -->
|
||
<section class="mt-10 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div class="panel-strong p-5 hoverlift">
|
||
<div class="text-xs text-gray-500">Role Intake</div>
|
||
<div class="mt-1 font-semibold">Criteria Locked</div>
|
||
<div class="mt-3 text-xs text-gray-600">
|
||
Hiring intent standardized. Versioned. No drift.
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<span class="chip px-2 py-1 text-xs">Stakeholders</span>
|
||
<span class="chip px-2 py-1 text-xs">Rubric</span>
|
||
<span class="chip px-2 py-1 text-xs">Scope freeze</span>
|
||
</div>
|
||
</div>
|
||
<div class="panel-strong p-5 hoverlift">
|
||
<div class="text-xs text-gray-500">Structured Qualification</div>
|
||
<div class="mt-1 font-semibold">Consistent Evaluation</div>
|
||
<div class="mt-3 text-xs text-gray-600">
|
||
Same criteria. Required steps. Overrides recorded.
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<span class="chip px-2 py-1 text-xs">Scoring</span>
|
||
<span class="chip px-2 py-1 text-xs">Notes</span>
|
||
<span class="chip px-2 py-1 text-xs">Rationale</span>
|
||
</div>
|
||
</div>
|
||
<div class="panel-strong p-5 hoverlift">
|
||
<div class="text-xs text-gray-500">Candidate Movement</div>
|
||
<div class="mt-1 font-semibold">No Operational Drag</div>
|
||
<div class="mt-3 text-xs text-gray-600">
|
||
Scheduling + follow-ups handled automatically.
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<span class="chip px-2 py-1 text-xs">SLAs</span>
|
||
<span class="chip px-2 py-1 text-xs">Nudges</span>
|
||
<span class="chip px-2 py-1 text-xs">Status</span>
|
||
</div>
|
||
</div>
|
||
<div class="panel-strong p-5 hoverlift">
|
||
<div class="text-xs text-gray-500">Decision Trail</div>
|
||
<div class="mt-1 font-semibold">Defensible Record</div>
|
||
<div class="mt-3 text-xs text-gray-600">
|
||
Who decided, when, why, under which criteria version.
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<span class="chip px-2 py-1 text-xs">Timestamped</span>
|
||
<span class="chip px-2 py-1 text-xs">Versioned</span>
|
||
<span class="chip px-2 py-1 text-xs">Exportable</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<!-- FEATURES PAGE -->
|
||
<section id="page-features" class="page fade hidden">
|
||
<section class="panel-strong p-8 lg:p-10">
|
||
<div class="max-w-3xl">
|
||
<div class="inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/70 px-3 py-1 text-xs">
|
||
<span class="h-2 w-2 rounded-full bg-black"></span>
|
||
What FinMox does
|
||
</div>
|
||
<h1 class="mt-5 text-4xl font-extrabold tracking-tight">
|
||
Hiring execution, standardized — not “another ATS.”
|
||
</h1>
|
||
<p class="mt-4 text-gray-600">
|
||
FinMox enforces role clarity, structured qualification, and automatic outputs so teams move faster without adding risk, headcount, or chaos.
|
||
</p>
|
||
</div>
|
||
<div class="mt-10 grid md:grid-cols-3 gap-10">
|
||
<!-- Candidate Ranking -->
|
||
<div class="rounded-3xl bg-[#FAF8F6] p-8 shadow-sm border border-black/5">
|
||
<img src="YOUR_APPWIZZY_IMAGE_URL_candidate-ranking.png" class="rounded-2xl mb-6 w-full" alt="Candidate ranking mockup" />
|
||
<h3 class="text-xl font-semibold">Candidate Ranking</h3>
|
||
<p class="text-gray-600 mt-2">
|
||
Every candidate is scored against your role criteria so decisions don’t drift.
|
||
</p>
|
||
<div class="flex flex-wrap gap-2 mt-4 text-sm text-gray-500">
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Parsing</span>
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Scoring</span>
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Shortlists</span>
|
||
</div>
|
||
</div>
|
||
<!-- Interview Automation -->
|
||
<div class="rounded-3xl bg-[#FAF8F6] p-8 shadow-sm border border-black/5">
|
||
<img src="YOUR_APPWIZZY_IMAGE_URL_interview-automation.png" class="rounded-2xl mb-6 w-full" alt="Interview automation mockup" />
|
||
<h3 class="text-xl font-semibold">Interview Automation</h3>
|
||
<p class="text-gray-600 mt-2">
|
||
Role-specific questions, summaries, and recommendations — reviewable and exportable.
|
||
</p>
|
||
<div class="flex flex-wrap gap-2 mt-4 text-sm text-gray-500">
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Question sets</span>
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Summaries</span>
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Recommendations</span>
|
||
</div>
|
||
</div>
|
||
<!-- Compliance & Analytics -->
|
||
<div class="rounded-3xl bg-[#FAF8F6] p-8 shadow-sm border border-black/5">
|
||
<img src="YOUR_APPWIZZY_IMAGE_URL_compliance-analytics.png" class="rounded-2xl mb-6 w-full" alt="Compliance and analytics mockup" />
|
||
<h3 class="text-xl font-semibold">Compliance & Analytics</h3>
|
||
<p class="text-gray-600 mt-2">
|
||
Track performance, risk, and compliance in real-time without manual data entry.
|
||
</p>
|
||
<div class="flex flex-wrap gap-2 mt-4 text-sm text-gray-500">
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Dashboards</span>
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Audit trails</span>
|
||
<span class="bg-white rounded-full px-3 py-1 border border-black/5">Alerts</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<!-- ========================= PROBLEM PAGE ========================= -->
|
||
<section id="page-problem" class="page fade hidden">
|
||
<section class="panel-strong p-8 lg:p-10">
|
||
<div class="grid lg:grid-cols-12 gap-10 items-start">
|
||
<!-- Left Column -->
|
||
<div class="lg:col-span-5">
|
||
<div class="chip inline-flex px-3 py-1 text-xs">The Problem</div>
|
||
<h1 class="mt-5 text-4xl font-extrabold tracking-tight">
|
||
Hiring breaks when execution isn’t controlled.
|
||
</h1>
|
||
<p class="mt-5 text-gray-700">
|
||
Most teams don’t suffer from a lack of tools — they suffer from <strong>uncontrolled execution</strong>: role requirements drift, stakeholders evaluate differently, candidates stall, and nothing is documented cleanly.
|
||
</p>
|
||
<p class="mt-4 text-gray-700">
|
||
An ATS stores data. FinMox controls decisions and documents execution.
|
||
</p>
|
||
<div class="mt-7 flex gap-3">
|
||
<a href="#why" onclick="openPage('why'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
|
||
Why FinMox →
|
||
</a>
|
||
<a href="#apply" onclick="openPage('apply'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
|
||
Apply
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- Right Column -->
|
||
<div class="lg:col-span-7">
|
||
<div class="panel p-6">
|
||
<div class="text-sm font-semibold">The failure pattern</div>
|
||
<div class="mt-4 grid sm:grid-cols-2 gap-4">
|
||
<div class="panel-strong p-5">
|
||
<div class="text-xs text-gray-500">Decision drift</div>
|
||
<ul class="mt-3 text-sm text-gray-700 space-y-2">
|
||
<li>• Role changes mid-process</li>
|
||
<li>• Different evaluators, different standards</li>
|
||
<li>• Emotional overrides without rationale</li>
|
||
</ul>
|
||
</div>
|
||
<div class="panel-strong p-5">
|
||
<div class="text-xs text-gray-500">Execution drag</div>
|
||
<ul class="mt-3 text-sm text-gray-700 space-y-2">
|
||
<li>• HR chasing feedback</li>
|
||
<li>• Scheduling back-and-forth</li>
|
||
<li>• Candidates stalling + dropping off</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 text-sm text-gray-600">
|
||
Result: slower hiring, inconsistent decisions, higher risk exposure, and burned-out teams.
|
||
</div>
|
||
</div>
|
||
<!-- Reframe -->
|
||
<div class="mt-6 panel p-6">
|
||
<div class="text-sm font-semibold">FinMox reframe</div>
|
||
<div class="mt-2 text-sm text-gray-700">
|
||
This isn’t an HR tooling problem — it’s an execution problem. FinMox is the execution layer that standardizes intent, enforces structured movement, and creates a defensible record automatically.
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<span class="chip px-3 py-1 text-xs">Control</span>
|
||
<span class="chip px-3 py-1 text-xs">Consistency</span>
|
||
<span class="chip px-3 py-1 text-xs">Defensibility</span>
|
||
<span class="chip px-3 py-1 text-xs">Speed</span>
|
||
</div>
|
||
</div>
|
||
<!-- What it costs -->
|
||
<div class="mt-6 panel p-6">
|
||
<div class="text-sm font-semibold">What this costs you</div>
|
||
<div class="mt-3 grid sm:grid-cols-3 gap-4">
|
||
<div class="panel-strong p-5">
|
||
<div class="text-xs text-gray-500">Time</div>
|
||
<div class="mt-2 text-sm text-gray-700">
|
||
Weeks lost to indecision, reschedules, and rework.
|
||
</div>
|
||
</div>
|
||
<div class="panel-strong p-5">
|
||
<div class="text-xs text-gray-500">Quality</div>
|
||
<div class="mt-2 text-sm text-gray-700">
|
||
Inconsistent evaluation leads to wrong hires or missed talent.
|
||
</div>
|
||
</div>
|
||
<div class="panel-strong p-5">
|
||
<div class="text-xs text-gray-500">Risk</div>
|
||
<div class="mt-2 text-sm text-gray-700">
|
||
No clean record of “why” decisions were made when challenged.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- CTA -->
|
||
<div class="mt-6 panel p-6">
|
||
<div class="text-sm font-semibold">What changes with FinMox</div>
|
||
<div class="mt-2 text-sm text-gray-700">
|
||
Criteria is locked up front. Qualification is structured. Candidate movement is automated. Every decision and override is recorded as a byproduct of execution — without extra admin work.
|
||
</div>
|
||
<div class="mt-5 flex flex-wrap gap-3">
|
||
<a href="#how" onclick="openPage('how'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
|
||
See how it works →
|
||
</a>
|
||
<a href="#trust" onclick="openPage('trust'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
|
||
Security & Trust →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div> <!-- /Right Column -->
|
||
</div> <!-- /Grid -->
|
||
</section>
|
||
</section>
|
||
<!-- ========================= END PROBLEM PAGE ========================= -->
|
||
|
||
<!-- Other Pages will be added here -->
|
||
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="max-w-7xl mx-auto px-6 pb-16">
|
||
<div class="panel-strong p-6 flex flex-col md:flex-row md:items-center justify-between gap-4 text-sm text-gray-600">
|
||
<div>FinMox © 2025</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a href="#apply" class="underline navlink" data-page="apply">Apply</a>
|
||
<span class="opacity-50">·</span>
|
||
<a href="#signin" class="underline navlink" data-page="signin">Sign In</a>
|
||
<span class="opacity-50">·</span>
|
||
<a href="#trust" class="underline navlink" data-page="trust">Security & Trust</a>
|
||
<span class="opacity-50">·</span>
|
||
<a href="#faq" class="underline navlink" data-page="faq">FAQ</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||
</body>
|
||
</html> |