December 17th,2025- V.14
This commit is contained in:
parent
510bad640b
commit
f8ecf22a43
272
index.php
272
index.php
@ -1,144 +1,188 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FinMox HR Automation - Hire Faster, Decide Smarter</title>
|
||||
<title>FinMox HR Automation</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.fade { transition: opacity .2s ease, transform .2s ease; }
|
||||
.page.hidden { opacity: 0; transform: translateY(8px); pointer-events: none; position: absolute; width: 100%; left: 0; top: 0; }
|
||||
.page { opacity: 1; transform: translateY(0); position: relative; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900">
|
||||
|
||||
<!-- NAV -->
|
||||
<header class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
|
||||
<div class="font-bold text-xl">FinMox</div>
|
||||
<!-- header tabs (these are PAGES) -->
|
||||
<nav class="hidden md:flex gap-8 text-sm">
|
||||
<a href="index.php">Home</a>
|
||||
<a href="product.php">Product</a>
|
||||
<a href="services.php">Services</a>
|
||||
<a href="features.php">Features</a>
|
||||
<a href="pricing.php">Pricing</a>
|
||||
<a class="navlink" href="#home" onclick="openPage('home'); return false;">Home</a>
|
||||
<a class="navlink" href="#problem" onclick="openPage('problem'); return false;">Problem</a>
|
||||
<a class="navlink" href="#why" onclick="openPage('why'); return false;">Why FinMox</a>
|
||||
<a class="navlink" href="#how" onclick="openPage('how'); return false;">How It Works</a>
|
||||
<a class="navlink" href="#roi" onclick="openPage('roi'); return false;">ROI</a>
|
||||
<a class="navlink" href="#pricing" onclick="openPage('pricing'); return false;">Pricing</a>
|
||||
</nav>
|
||||
<div class="flex gap-3">
|
||||
<a href="login.php" class="text-sm flex items-center">Sign In</a>
|
||||
<a href="register.php" class="bg-black text-white text-sm px-4 py-2 rounded-lg">Sign Up</a>
|
||||
<a class="navlink text-sm" href="#signin" onclick="openPage('signin'); return false;">Sign In</a>
|
||||
<a href="#apply" onclick="openPage('apply'); return false;" class="bg-black text-white text-sm px-4 py-2 rounded-lg">Apply for Access</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<span class="inline-block mb-6 bg-blue-100 text-blue-600 px-4 py-1 rounded-full text-sm">FinMox HR Automation</span>
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">Hire Faster. Decide Smarter.<br/>Automate the Hiring Work.</h1>
|
||||
<p class="mt-6 max-w-2xl mx-auto text-gray-600">FinMox HR is an AI-powered hiring automation system built for lean and growing teams who want to cut hiring time by 60–80% without replacing their HR team or ATS.</p>
|
||||
<a href="pricing.php" class="mt-8 bg-black text-white px-8 py-4 rounded-xl text-sm inline-block">See Pricing</a>
|
||||
</section>
|
||||
<!-- PAGES WRAPPER -->
|
||||
<main class="relative">
|
||||
|
||||
<!-- THE PROBLEM -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24">
|
||||
<h2 class="text-3xl font-bold text-center">Hiring is still broken.</h2>
|
||||
<p class="text-center text-gray-500 mt-4">HR teams waste dozens of hours per role on manual tasks.</p>
|
||||
<div class="grid md:grid-cols-2 gap-8 mt-12 text-left">
|
||||
<div class="bg-gray-50 p-8 rounded-lg">
|
||||
<h3 class="font-bold text-lg">Manual Reviews</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Wasting time manually reviewing resumes and copy-pasting notes.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-8 rounded-lg">
|
||||
<h3 class="font-bold text-lg">Repetitive Work</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Endlessly coordinating interviews, rewriting job descriptions, and drafting offer letters.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-gray-500 mt-8">Most ATS platforms store data. FinMox does the work.</p>
|
||||
</section>
|
||||
|
||||
<!-- THE FINMOX DIFFERENCE -->
|
||||
<section class="bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-6 py-24">
|
||||
<h2 class="text-3xl font-bold text-center">The FinMox Difference</h2>
|
||||
<p class="text-center text-gray-500 mt-4">FinMox is not another ATS. It’s an HR Automation System that runs your hiring workflows for you.</p>
|
||||
<div class="mt-12">
|
||||
<div class="grid md:grid-cols-3 gap-8 text-center">
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">Resume Parsing & Ranking</h3>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">Candidate Shortlisting</h3>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">Interview Question Generation</h3>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">Interview Summaries</h3>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">Offer Letter Drafting</h3>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">Onboarding Preparation</h3>
|
||||
</div>
|
||||
<!-- HOME PAGE -->
|
||||
<section id="page-home" class="page fade">
|
||||
<!-- HERO -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<span class="inline-block mb-6 bg-blue-100 text-blue-600 px-4 py-1 rounded-full text-sm">AI-Powered HR Automation</span>
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">Hire Faster. Decide Smarter.<br/>Automate the Hiring Work.</h1>
|
||||
<p class="mt-6 max-w-3xl mx-auto text-gray-600">FinMox HR cuts hiring time by <strong>60–80%</strong> by automating resume review, interviews, and offer prep — without replacing your HR team or ATS.</p>
|
||||
<p class="mt-4 text-sm text-gray-500">Built for teams hiring 1–10 roles/month · 50–300 candidates/role</p>
|
||||
<div class="mt-10 flex justify-center gap-4">
|
||||
<a href="#apply" onclick="openPage('apply'); return false;" class="bg-black text-white px-8 py-4 rounded-xl text-sm">Apply for Founding Access</a>
|
||||
<a href="#demo" onclick="openPage('demo'); return false;" class="border px-8 py-4 rounded-xl text-sm">Book a Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-gray-500 mt-8">All in one workflow.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24">
|
||||
<h2 class="text-3xl font-bold text-center">How It Works (3 Steps)</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8 mt-12 text-center">
|
||||
<div class="bg-gray-50 p-8 rounded-lg">
|
||||
<h3 class="font-bold text-lg">1. Create a Job</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Input your role, requirements, and hiring criteria.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-8 rounded-lg">
|
||||
<h3 class="font-bold text-lg">2. Upload Candidates</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Upload resumes individually or in bulk.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-8 rounded-lg">
|
||||
<h3 class="font-bold text-lg">3. Get Hiring-Ready Outputs</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">FinMox ranks candidates, generates interview materials, and prepares offer documents — automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHAT YOU GET -->
|
||||
<section class="bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-6 py-24">
|
||||
<h2 class="text-3xl font-bold text-center">What You Get</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8 mt-12 text-left">
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">🔹 AI-Powered Candidate Ranking</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Every candidate is scored based on skills, experience, and role fit.</p>
|
||||
</section>
|
||||
<!-- DASHBOARD -->
|
||||
<section class="max-w-7xl mx-auto px-6">
|
||||
<div class="rounded-2xl border shadow-sm overflow-hidden">
|
||||
<img src="assets/pasted-20251217-045121-823e6258.png" alt="FinMox Dashboard" />
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">🔹 Interview Automation</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Role-specific interview questions, summaries, and recommendations.</p>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">🔹 Offer & Onboarding Automation</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">Ready-to-send offer letters and first-week onboarding plans.</p>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-bold text-lg">🔹 Human-in-the-Loop Control</h3>
|
||||
<p class="text-sm text-gray-600 mt-2">You review, approve, and decide — FinMox handles the busy work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- WHO FINMOX IS FOR -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<h2 class="text-3xl font-bold">Who FinMox Is For</h2>
|
||||
<p class="mt-4 max-w-2xl mx-auto text-gray-600">FinMox HR is ideal if you hire 1–10 roles per month, review 50–300 candidates per role, have 1–5 people involved in hiring, and want faster decisions without replacing your team.</p>
|
||||
</section>
|
||||
<!-- PROBLEM PAGE -->
|
||||
<section id="page-problem" class="page hidden fade">
|
||||
<section class="max-w-4xl mx-auto px-6 py-24">
|
||||
<h2 class="text-4xl font-bold text-center">The Problem: Hiring is Slow & Repetitive</h2>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="max-w-7xl mx-auto px-6 py-12 text-center text-gray-500 text-sm">
|
||||
© 2025 FinMox. All rights reserved.
|
||||
<!-- WHY PAGE -->
|
||||
<section id="page-why" class="page hidden fade">
|
||||
<section class="max-w-4xl mx-auto px-6 py-24">
|
||||
<h2 class="text-4xl font-bold text-center">Why FinMox?</h2>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- HOW PAGE -->
|
||||
<section id="page-how" class="page hidden fade">
|
||||
<section class="max-w-4xl mx-auto px-6 py-24">
|
||||
<h2 class="text-4xl font-bold text-center">How It Works</h2>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- ROI PAGE -->
|
||||
<section id="page-roi" class="page hidden fade">
|
||||
<section class="max-w-4xl mx-auto px-6 py-24">
|
||||
<h2 class="text-4xl font-bold text-center">The ROI of AI in HR</h2>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- PRICING PAGE -->
|
||||
<section id="page-pricing" class="page hidden fade">
|
||||
<section class="max-w-4xl mx-auto px-6 py-24">
|
||||
<h2 class="text-4xl font-bold text-center">Pricing</h2>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- SIGN IN PAGE -->
|
||||
<section id="page-signin" class="page hidden fade">
|
||||
<section class="max-w-xl mx-auto px-6 py-24">
|
||||
<h2 class="text-3xl font-bold">Sign In to FinMox</h2>
|
||||
<form class="mt-8 space-y-4">
|
||||
<input type="email" placeholder="Email" class="border px-4 py-3 rounded-lg w-full" />
|
||||
<input type="password" placeholder="Password" class="border px-4 py-3 rounded-lg w-full" />
|
||||
<button type="button" class="bg-black text-white py-3 rounded-lg w-full">Sign In</button>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- APPLY PAGE -->
|
||||
<section id="page-apply" class="page hidden fade">
|
||||
<section class="max-w-xl mx-auto px-6 py-24">
|
||||
<h2 class="text-3xl font-bold">Apply for Founding Access</h2>
|
||||
<p class="mt-2 text-gray-600">We're onboarding a small group of founding customers. Tell us about your hiring needs to see if you qualify.</p>
|
||||
<form class="mt-8 space-y-4">
|
||||
<div class="grid sm:grid-cols-2 gap-4">
|
||||
<input type="text" placeholder="Your Name" class="border px-4 py-3 rounded-lg" />
|
||||
<input type="email" placeholder="Work Email" class="border px-4 py-3 rounded-lg" />
|
||||
</div>
|
||||
<div class="grid sm:grid-cols-2 gap-4">
|
||||
<input type="number" placeholder="Roles per month" class="border px-4 py-3 rounded-lg" />
|
||||
<input type="number" placeholder="Candidates per role" class="border px-4 py-3 rounded-lg" />
|
||||
</div>
|
||||
<textarea placeholder="Tell us about your current hiring process" class="border px-4 py-3 rounded-lg" rows="4"></textarea>
|
||||
<button type="button" class="bg-black text-white py-3 rounded-lg w-full">Submit Application</button>
|
||||
<p class="text-xs text-gray-500">Demo placeholder. Wire this to your form tool (Make/Zapier/Webhook) later.</p>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- FOOTER (global) -->
|
||||
<footer class="max-w-7xl mx-auto px-6 py-12 grid md:grid-cols-4 gap-6 text-sm text-gray-500">
|
||||
<div>FinMox © 2025</div>
|
||||
<div>Security & Privacy<br/>Human-reviewed outputs<br/>No automated hiring decisions</div>
|
||||
<div>Built for intentional hiring</div>
|
||||
<div><a href="#apply" onclick="openPage('apply'); return false;" class="underline">Apply</a> · <a href="#signin" onclick="openPage('signin'); return false;" class="underline">Sign In</a></div>
|
||||
</footer>
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
.page { position: static !important; opacity: 1 !important; transform: none !important; }
|
||||
.page.hidden { display: block !important; }
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
<script>
|
||||
const pages = ['home','problem','why','how','roi','pricing','signin','apply'];
|
||||
|
||||
function setActiveNav(hash) {
|
||||
document.querySelectorAll('.navlink').forEach(a => a.classList.remove('font-semibold'));
|
||||
const el = document.querySelector(`a[href="${hash}"]`);
|
||||
if (el) el.classList.add('font-semibold');
|
||||
}
|
||||
|
||||
function openPage(page, pushHash = true) {
|
||||
pages.forEach(p => {
|
||||
const node = document.getElementById(`page-${p}`);
|
||||
if (!node) return;
|
||||
node.classList.add('hidden');
|
||||
});
|
||||
const active = document.getElementById(`page-${page}`);
|
||||
if (active) active.classList.remove('hidden');
|
||||
|
||||
if (pushHash) {
|
||||
history.replaceState(null, '', `#${page}`);
|
||||
setActiveNav(`#${page}`);
|
||||
}
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Handle initial page load
|
||||
const initialPage = window.location.hash.substring(1) || 'home';
|
||||
if (pages.includes(initialPage)) {
|
||||
openPage(initialPage, false);
|
||||
setActiveNav(window.location.hash || '#home');
|
||||
} else {
|
||||
openPage('home', false);
|
||||
setActiveNav('#home');
|
||||
}
|
||||
|
||||
// Handle back/forward navigation
|
||||
window.onpopstate = () => {
|
||||
const pageId = window.location.hash.substring(1);
|
||||
if (pages.includes(pageId)) {
|
||||
openPage(pageId, false);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user