December 17th,2025 V.12
This commit is contained in:
Flatlogic Bot
parent
bc892d68f9
commit
3bbbd2bec9
@ -1,271 +1,352 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--primary-color: #3B82F6;
|
||||
--secondary-color: #10B981;
|
||||
--background-color: #F3F4F6;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-color: #1F2937;
|
||||
--text-color-light: #6B7280;
|
||||
--border-color: #D1D5DB;
|
||||
--border-radius: 0.75rem;
|
||||
--font-family: 'Inter', sans-serif;
|
||||
--background-body: #FFFFFF;
|
||||
--text-color-dark: #101828;
|
||||
--text-color-light: #667085;
|
||||
--primary-color: #444CE7;
|
||||
--primary-gradient: linear-gradient(to right, #444CE7, #7C3AED);
|
||||
--border-color: #EAECF0;
|
||||
--white: #FFFFFF;
|
||||
--section-bg: #F9FAFB;
|
||||
}
|
||||
|
||||
/* --- Reset & Base Styles --- */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--background-body);
|
||||
color: var(--text-color-light);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-color-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 { font-size: 60px; line-height: 1.2; letter-spacing: -0.02em; }
|
||||
h2 { font-size: 48px; line-height: 1.2; }
|
||||
h3 { font-size: 20px; line-height: 1.5; }
|
||||
|
||||
/* --- Header --- */
|
||||
.header {
|
||||
background-color: var(--surface-color);
|
||||
padding: 24px 0;
|
||||
background-color: var(--white);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-weight: 700;
|
||||
font-size: 1.75rem;
|
||||
color: var(--text-color);
|
||||
font-size: 24px;
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
.logo .dot {
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-color-light);
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--white);
|
||||
color: var(--text-color-light);
|
||||
border-color: #D0D5DD;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #F9FAFB;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
border-color: var(--primary-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background: #3538b7;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.2s ease-in-out;
|
||||
/* --- Hero Section --- */
|
||||
.hero {
|
||||
padding: 96px 0;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-2px);
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.table th {
|
||||
color: var(--text-color-light);
|
||||
.hero-content .tagline {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 2px solid var(--border-color) !important;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
padding: 1.25rem 1.5rem;
|
||||
.hero-content h1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
transition: all 0.2s ease-in-out;
|
||||
.hero-content .subtitle {
|
||||
font-size: 20px;
|
||||
max-width: 550px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: #F9FAFB;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
margin-right: 1.25rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.candidate-name {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.candidate-email {
|
||||
color: var(--text-color-light);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.35em 0.75em;
|
||||
font-size: .875em;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
/* --- Clients Section --- */
|
||||
.clients {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.status-new { background-color: #DBEAFE; color: #2563EB; }
|
||||
.status-interview { background-color: #FEF3C7; color: #D97706; }
|
||||
.status-hired { background-color: #D1FAE5; color: #059669; }
|
||||
.status-rejected { background-color: #FEE2E2; color: #DC2626; }
|
||||
|
||||
.action-icon {
|
||||
.clients .heading {
|
||||
color: var(--text-color-light);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.action-icon:hover {
|
||||
color: var(--text-color);
|
||||
transform: scale(1.1);
|
||||
font-weight: 500;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.status-todo { background-color: #E0E7FF; color: #4338CA; }
|
||||
.status-in-progress { background-color: #FEF9C3; color: #A16207; }
|
||||
.status-done { background-color: #D1FAE5; color: #059669; }
|
||||
.client-logos {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Chat Interface Styles */
|
||||
.chat-toggle-button {
|
||||
position: fixed;
|
||||
bottom: 2.5rem;
|
||||
right: 2.5rem;
|
||||
.client-logos img {
|
||||
height: 32px;
|
||||
opacity: 0.7;
|
||||
filter: grayscale(100%);
|
||||
transition: opacity 0.3s, filter 0.3s;
|
||||
}
|
||||
|
||||
.client-logos img:hover {
|
||||
opacity: 1;
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
/* --- Features Section --- */
|
||||
.how-it-works-section {
|
||||
padding: 96px 0;
|
||||
background-color: var(--section-bg);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
max-width: 768px;
|
||||
margin: 0 auto 64px;
|
||||
}
|
||||
|
||||
.section-header .tagline {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.how-it-works-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.how-it-works-card {
|
||||
text-align: center;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.how-it-works-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
.how-it-works-card .card-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
transition: all 0.2s ease-in-out;
|
||||
background-color: #EEF4FF;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.chat-toggle-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,0.2);
|
||||
.how-it-works-card .card-icon img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: invert(34%) sepia(98%) saturate(1499%) hue-rotate(224deg) brightness(94%) contrast(93%);
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
position: fixed;
|
||||
bottom: 7rem;
|
||||
right: 2.5rem;
|
||||
width: 375px;
|
||||
max-width: 90%;
|
||||
background-color: var(--surface-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
display: none; /* Hidden by default */
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
.how-it-works-card h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 1.25rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
/* --- CTA Section --- */
|
||||
.cta-section {
|
||||
padding: 96px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cta-section .subtitle {
|
||||
font-size: 20px;
|
||||
max-width: 768px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.footer {
|
||||
padding: 64px 0;
|
||||
background-color: var(--background-body);
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr repeat(4, 1fr);
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
.footer-about .logo {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-col h4 {
|
||||
color: #98A2B3;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-col ul li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-col ul a {
|
||||
color: var(--text-color-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.footer-col ul a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
margin-top: 64px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.chat-body {
|
||||
padding: 1.25rem;
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
.social-links {
|
||||
display: flex;
|
||||
padding: 1.25rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
flex-grow: 1;
|
||||
margin-right: 0.75rem;
|
||||
border-radius: var(--border-radius);
|
||||
.social-links a img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
max-width: 85%;
|
||||
line-height: 1.5;
|
||||
/* --- Responsive Design --- */
|
||||
@media (max-width: 1024px) {
|
||||
h1 { font-size: 48px; }
|
||||
h2 { font-size: 36px; }
|
||||
.hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
|
||||
.hero-content .subtitle { margin-left: auto; margin-right: auto; }
|
||||
.hero-actions { justify-content: center; }
|
||||
.hero-image { order: -1; }
|
||||
.how-it-works-grid { grid-template-columns: 1fr; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 48px; }
|
||||
}
|
||||
|
||||
.chat-message-user {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
@media (max-width: 768px) {
|
||||
.nav-links, .nav-actions .btn-secondary { display: none; }
|
||||
}
|
||||
|
||||
.chat-message-ai {
|
||||
background-color: #E5E7EB;
|
||||
color: var(--text-color);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* Dashboard Specific Styles */
|
||||
.dashboard-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.9em;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
BIN
assets/pasted-20251217-044056-9b8276fd.webp
Normal file
BIN
assets/pasted-20251217-044056-9b8276fd.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
assets/pasted-20251217-044254-e0e9d497.webp
Normal file
BIN
assets/pasted-20251217-044254-e0e9d497.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
assets/pasted-20251217-045121-823e6258.png
Normal file
BIN
assets/pasted-20251217-045121-823e6258.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 566 KiB |
BIN
assets/pasted-20251217-045457-feb98286.png
Normal file
BIN
assets/pasted-20251217-045457-feb98286.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
44
features.php
Normal file
44
features.php
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Features - FinMox</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; }
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">Features</h1>
|
||||
<p class="mt-6 max-w-2xl mx-auto text-gray-600">This is the Features page. Content will be added soon.</p>
|
||||
</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.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
220
index.php
220
index.php
@ -1,131 +1,143 @@
|
||||
|
||||
<!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 Platform</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FinMox HR Automation - Hire Faster, Decide Smarter</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>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.btn-primary {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.product-screenshot {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<!-- Navigation -->
|
||||
<nav class="border-b border-gray-200 bg-white sticky top-0 z-50">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<img src="assets/pasted-20251120-051320-b2b0cdfa.png" alt="FinMox Logo" class="h-8 w-auto">
|
||||
<span class="text-xl font-semibold text-gray-900">FinMox</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<a href="#product" class="text-sm text-gray-600 hover:text-gray-900">Product</a>
|
||||
<a href="#pricing" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a>
|
||||
<a href="/login.php" class="text-sm text-gray-600 hover:text-gray-900">Log in</a>
|
||||
<a href="/register.php" class="btn-primary bg-black text-white px-4 py-2 rounded-lg text-sm font-medium">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<body class="bg-white text-gray-900">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="bg-white">
|
||||
<div class="max-w-6xl mx-auto px-6 pt-24 pb-16">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 leading-tight">Intelligent HR & Operations</h1>
|
||||
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">FinMox is an intelligent enterprise system that automates HR, compliance, and operations.</p>
|
||||
<div class="mt-8 flex justify-center gap-4">
|
||||
<a href="/register.php" class="btn-primary bg-black text-white px-6 py-3 rounded-lg font-medium">Get Started</a>
|
||||
<a href="#product" class="bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Product Section -->
|
||||
<section id="product" class="bg-gray-50 py-20">
|
||||
<div class="max-w-6xl mx-auto px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">A unified platform for growth</h2>
|
||||
<p class="mt-3 text-lg text-gray-600">Manage candidates, tasks, and onboarding in one place.</p>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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="product-screenshot">
|
||||
<img src="assets/vm-shot-2025-11-11T05-29-19-670Z.jpg" alt="FinMox Dashboard Screenshot">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-gray-500 mt-8">All in one workflow.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="bg-white py-20">
|
||||
<div class="max-w-6xl mx-auto px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">Pricing Plans</h2>
|
||||
<p class="mt-3 text-lg text-gray-600">Choose the plan that's right for your team.</p>
|
||||
<!-- 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="grid md:grid-cols-3 gap-8">
|
||||
<!-- Pricing Plan 1 -->
|
||||
<div class="border border-gray-200 rounded-lg p-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900">Starter</h3>
|
||||
<p class="mt-2 text-gray-600">For small teams just getting started.</p>
|
||||
<div class="mt-6">
|
||||
<span class="text-4xl font-bold">$49</span>
|
||||
<span class="text-gray-600">/ month</span>
|
||||
</div>
|
||||
<a href="/register.php" class="mt-8 block w-full text-center btn-primary bg-black text-white px-6 py-3 rounded-lg font-medium">Get Started</a>
|
||||
<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>
|
||||
</div>
|
||||
<!-- Pricing Plan 2 -->
|
||||
<div class="border border-gray-200 rounded-lg p-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900">Business</h3>
|
||||
<p class="mt-2 text-gray-600">For growing businesses that need more power.</p>
|
||||
<div class="mt-6">
|
||||
<span class="text-4xl font-bold">$99</span>
|
||||
<span class="text-gray-600">/ month</span>
|
||||
</div>
|
||||
<a href="/register.php" class="mt-8 block w-full text-center btn-primary bg-black text-white px-6 py-3 rounded-lg font-medium">Get Started</a>
|
||||
<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>
|
||||
<!-- Pricing Plan 3 -->
|
||||
<div class="border border-gray-200 rounded-lg p-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900">Enterprise</h3>
|
||||
<p class="mt-2 text-gray-600">For large organizations with custom needs.</p>
|
||||
<div class="mt-6">
|
||||
<span class="text-4xl font-bold">Contact Us</span>
|
||||
</div>
|
||||
<a href="#" class="mt-8 block w-full text-center bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium">Contact Sales</a>
|
||||
<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>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-50">
|
||||
<div class="max-w-6xl mx-auto px-6 py-12">
|
||||
<div class="flex justify-between items-center">
|
||||
<p class="text-gray-600">© 2025 FinMox. All rights reserved.</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Terms</a>
|
||||
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Privacy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="max-w-7xl mx-auto px-6 py-12 text-center text-gray-500 text-sm">
|
||||
© 2025 FinMox. All rights reserved.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
44
pricing.php
Normal file
44
pricing.php
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pricing - FinMox</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; }
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">Pricing</h1>
|
||||
<p class="mt-6 max-w-2xl mx-auto text-gray-600">This is the Pricing page. Content will be added soon.</p>
|
||||
</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.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
product.php
Normal file
44
product.php
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Product - FinMox</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; }
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">Product</h1>
|
||||
<p class="mt-6 max-w-2xl mx-auto text-gray-600">This is the Product page. Content will be added soon.</p>
|
||||
</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.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
services.php
Normal file
44
services.php
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Services - FinMox</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; }
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24 text-center">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">Services</h1>
|
||||
<p class="mt-6 max-w-2xl mx-auto text-gray-600">This is the Services page. Content will be added soon.</p>
|
||||
</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.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user