oliver
2599 lines
96 KiB
HTML
2599 lines
96 KiB
HTML
<!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="my-biz.app — a hassle-free all-in-one back-office built on Odoo Community Edition. Specialists for NGOs, Startups, Manufacturing, and Restaurants."
|
||
/>
|
||
<meta name="robots" content="index, follow" />
|
||
<meta
|
||
property="og:title"
|
||
content="my-biz.app — One Stop Shop for Real Businesses"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Eliminate the chaos behind the scenes — invoicing, HR, inventory, CRM, reports — all in one place, set up for your exact industry, ready from day one."
|
||
/>
|
||
<meta property="og:type" content="website" />
|
||
<title>my-biz.app — One Stop Shop · Built for Real Businesses</title>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "my-biz.app",
|
||
"description": "A hassle-free all-in-one back-office built on Odoo Community Edition.",
|
||
"applicationCategory": "BusinessApplication",
|
||
"offers": {
|
||
"@type": "AggregateOffer",
|
||
"lowPrice": "214",
|
||
"highPrice": "395",
|
||
"priceCurrency": "USD"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- MotionFlow — scroll animations, parallax, text effects -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
|
||
/>
|
||
<style>
|
||
/* ── Reset ── */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* ── Design Tokens ── */
|
||
:root {
|
||
--bg: #efebe9;
|
||
--surf1: #e8e0da;
|
||
--card: #fff3e0;
|
||
--lift: #f5ece4;
|
||
--bg-deep: #3e2723;
|
||
--border: rgba(93, 64, 55, 0.25);
|
||
--grey: #a1887f;
|
||
--silver: #6d4c41;
|
||
--light: #5d4037;
|
||
--gold: #e65100;
|
||
--gold-hi: #fb8c00;
|
||
--gold-lo: #bf360c;
|
||
--gold-glow: rgba(230, 81, 0, 0.18);
|
||
--white: #3e2723;
|
||
}
|
||
|
||
/* ── Base ── */
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--light);
|
||
font-family:
|
||
"Segoe UI",
|
||
system-ui,
|
||
-apple-system,
|
||
sans-serif;
|
||
line-height: 1.65;
|
||
overflow-x: hidden;
|
||
}
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
/* ── NAV ── */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 500;
|
||
height: 62px;
|
||
background: rgba(255, 243, 224, 0.97);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 2px solid var(--gold);
|
||
box-shadow: 0 2px 14px rgba(62, 39, 35, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 0 8vw;
|
||
}
|
||
|
||
.nav-logo {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.nav-logo span {
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28px;
|
||
}
|
||
.nav-links li a {
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--grey);
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-links li a:hover {
|
||
color: var(--gold);
|
||
}
|
||
|
||
.nav-cta {
|
||
border: 1px solid var(--gold);
|
||
color: var(--gold);
|
||
-webkit-text-fill-color: var(--gold);
|
||
padding: 7px 18px;
|
||
border-radius: 2px;
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
transition:
|
||
background 0.2s,
|
||
color 0.2s,
|
||
-webkit-text-fill-color 0.2s;
|
||
}
|
||
.nav-cta:hover {
|
||
background: var(--gold);
|
||
color: var(--bg);
|
||
-webkit-text-fill-color: var(--bg);
|
||
}
|
||
|
||
/* ── HERO ── */
|
||
.hero {
|
||
min-height: 55vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 44px 6vw;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.hero-eyebrow {
|
||
display: inline-block;
|
||
border: 1px solid var(--gold);
|
||
color: var(--gold);
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
padding: 6px 16px;
|
||
border-radius: 100px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 2.6rem;
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
line-height: 1.15;
|
||
margin-bottom: 18px;
|
||
max-width: 980px;
|
||
}
|
||
.hero h1 em {
|
||
font-style: italic;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.hero-sub {
|
||
color: var(--silver);
|
||
font-size: 0.92rem;
|
||
max-width: 680px;
|
||
margin-bottom: 12px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-tagline {
|
||
font-style: italic;
|
||
color: var(--grey);
|
||
font-size: 0.88rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* ── HERO PARALLAX BACKGROUND ── */
|
||
.hero-bg-wrap {
|
||
position: absolute;
|
||
inset: -30% 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.hero-bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center 30%;
|
||
display: block;
|
||
opacity: 0.28;
|
||
}
|
||
.hero-bg-wrap::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
160deg,
|
||
rgba(239, 235, 233, 0.72) 0%,
|
||
rgba(239, 235, 233, 0.52) 50%,
|
||
rgba(239, 235, 233, 0.8) 100%
|
||
);
|
||
}
|
||
.hero > *:not(.hero-bg-wrap) {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ── NAV CHAT WIDGET ── */
|
||
.nav-chat {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(93, 64, 55, 0.08);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
height: 34px;
|
||
width: 440px;
|
||
overflow: hidden;
|
||
transition:
|
||
border-color 0.25s,
|
||
box-shadow 0.25s;
|
||
}
|
||
.nav-chat:focus-within {
|
||
border-color: var(--gold);
|
||
box-shadow: 0 0 0 2px var(--gold-glow);
|
||
}
|
||
.nav-chat-input {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
padding: 0 10px;
|
||
font-size: 0.78rem;
|
||
font-family: "Segoe UI", system-ui, sans-serif;
|
||
color: var(--white);
|
||
min-width: 0;
|
||
height: 100%;
|
||
}
|
||
.nav-chat-input::placeholder {
|
||
color: var(--grey);
|
||
font-style: italic;
|
||
opacity: 0.8;
|
||
}
|
||
.nav-chat-send {
|
||
background: none;
|
||
border: none;
|
||
border-left: 1px solid var(--border);
|
||
padding: 0 10px;
|
||
color: var(--gold);
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-chat-send:hover {
|
||
color: var(--gold-hi);
|
||
}
|
||
.nav-chat-toggle {
|
||
flex-shrink: 0;
|
||
background: none;
|
||
border: none;
|
||
border-right: 1px solid var(--border);
|
||
padding: 0 10px;
|
||
color: var(--gold);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-chat-toggle:hover {
|
||
color: var(--gold-hi);
|
||
}
|
||
.nav-logo {
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-logo img {
|
||
height: 36px;
|
||
width: auto;
|
||
display: block;
|
||
}
|
||
.nav-center {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-left: 12px;
|
||
}
|
||
.nav-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-left: auto;
|
||
}
|
||
.nav-cta-sm {
|
||
display: none;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
/* ── Buttons ── */
|
||
.btn-primary {
|
||
display: inline-block;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 40%,
|
||
var(--gold-hi) 60%,
|
||
var(--gold) 80%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
color: var(--bg);
|
||
font-size: 0.9rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
padding: 14px 30px;
|
||
border-radius: 2px;
|
||
box-shadow: 0 4px 20px var(--gold-glow);
|
||
transition:
|
||
opacity 0.2s,
|
||
transform 0.2s,
|
||
box-shadow 0.2s;
|
||
}
|
||
.btn-primary:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 8px 28px rgba(190, 120, 45, 0.32);
|
||
}
|
||
|
||
.btn-secondary {
|
||
display: inline-block;
|
||
background: transparent;
|
||
border: 1px solid var(--grey);
|
||
color: var(--white);
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
padding: 14px 30px;
|
||
border-radius: 2px;
|
||
transition:
|
||
border-color 0.2s,
|
||
color 0.2s;
|
||
}
|
||
.btn-secondary:hover {
|
||
border-color: var(--gold);
|
||
color: var(--gold);
|
||
}
|
||
|
||
/* ── NAV BOOK MEETING CTA ── */
|
||
.nav-cta-book {
|
||
border: 1px solid rgba(161, 136, 127, 0.55);
|
||
color: var(--grey);
|
||
-webkit-text-fill-color: var(--grey);
|
||
padding: 7px 18px;
|
||
border-radius: 2px;
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
transition:
|
||
border-color 0.2s,
|
||
color 0.2s,
|
||
-webkit-text-fill-color 0.2s;
|
||
}
|
||
.nav-cta-book:hover {
|
||
border-color: var(--gold-hi);
|
||
color: var(--gold-hi);
|
||
-webkit-text-fill-color: var(--gold-hi);
|
||
}
|
||
|
||
/* ── CHAT PANEL ── */
|
||
.chat-panel {
|
||
position: fixed;
|
||
top: 62px;
|
||
right: 8vw;
|
||
width: 440px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-top: 2px solid var(--gold);
|
||
border-radius: 0 0 8px 8px;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 498;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
transition:
|
||
opacity 0.22s ease,
|
||
visibility 0.22s ease,
|
||
transform 0.22s ease;
|
||
overflow: hidden;
|
||
}
|
||
.chat-panel.open {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.chat-panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 14px;
|
||
background: var(--lift);
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
.chat-panel-title {
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.chat-panel-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--grey);
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
line-height: 1;
|
||
padding: 2px 6px;
|
||
transition: color 0.2s;
|
||
}
|
||
.chat-panel-close:hover {
|
||
color: var(--gold);
|
||
}
|
||
.chat-history {
|
||
flex: 1;
|
||
height: 240px;
|
||
overflow-y: auto;
|
||
padding: 12px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
scroll-behavior: smooth;
|
||
}
|
||
.chat-history::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
.chat-history::-webkit-scrollbar-track {
|
||
background: var(--bg);
|
||
}
|
||
.chat-history::-webkit-scrollbar-thumb {
|
||
background: var(--border);
|
||
border-radius: 2px;
|
||
}
|
||
.chat-msg {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
.chat-msg.user {
|
||
align-items: flex-end;
|
||
}
|
||
.chat-msg.agent {
|
||
align-items: flex-start;
|
||
}
|
||
.chat-label {
|
||
font-size: 0.6rem;
|
||
color: var(--grey);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
}
|
||
.chat-bubble {
|
||
max-width: 82%;
|
||
padding: 8px 12px;
|
||
font-size: 0.82rem;
|
||
line-height: 1.55;
|
||
font-family: "Segoe UI", system-ui, sans-serif;
|
||
}
|
||
.chat-msg.agent .chat-bubble {
|
||
background: var(--lift);
|
||
color: var(--light);
|
||
border-radius: 0 6px 6px 6px;
|
||
}
|
||
.chat-msg.user .chat-bubble {
|
||
background: var(--gold);
|
||
color: var(--card);
|
||
border-radius: 6px 0 6px 6px;
|
||
}
|
||
.chat-thinking .chat-bubble {
|
||
color: var(--grey);
|
||
font-style: italic;
|
||
}
|
||
.chat-input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--bg);
|
||
flex-shrink: 0;
|
||
}
|
||
.chat-input-field {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
padding: 12px 14px;
|
||
font-size: 0.85rem;
|
||
font-family: "Segoe UI", system-ui, sans-serif;
|
||
color: var(--white);
|
||
min-width: 0;
|
||
}
|
||
.chat-input-field::placeholder {
|
||
color: var(--grey);
|
||
}
|
||
.chat-input-send {
|
||
background: none;
|
||
border: none;
|
||
border-left: 1px solid var(--border);
|
||
padding: 0 14px;
|
||
color: var(--gold);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: color 0.2s;
|
||
}
|
||
.chat-input-send:hover {
|
||
color: var(--gold-hi);
|
||
}
|
||
|
||
.hero-trust {
|
||
font-size: 0.78rem;
|
||
color: var(--grey);
|
||
}
|
||
.hero-trust strong {
|
||
color: var(--silver);
|
||
}
|
||
|
||
/* ── SECTION COMMONS ── */
|
||
section {
|
||
padding: 90px 8vw;
|
||
scroll-margin-top: 62px;
|
||
}
|
||
|
||
#verticals {
|
||
background: var(--surf1);
|
||
}
|
||
#news {
|
||
background: var(--bg);
|
||
}
|
||
#pricing {
|
||
background: var(--surf1);
|
||
}
|
||
#customization {
|
||
background: var(--bg);
|
||
}
|
||
|
||
.section-label {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--gold);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 2.4rem;
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
margin-bottom: 14px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.section-sub {
|
||
color: var(--silver);
|
||
font-size: 1rem;
|
||
max-width: 620px;
|
||
margin-bottom: 52px;
|
||
line-height: 1.7;
|
||
}
|
||
.section-sub strong {
|
||
color: var(--light);
|
||
}
|
||
|
||
/* ── VERTICALS ── */
|
||
.verticals-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.vertical-card {
|
||
position: relative;
|
||
background: var(--card);
|
||
padding: 40px 32px;
|
||
overflow: hidden;
|
||
transition: background 0.3s;
|
||
}
|
||
.vertical-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 2px;
|
||
height: 0;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
var(--gold-lo),
|
||
var(--gold),
|
||
var(--gold-hi),
|
||
var(--gold),
|
||
var(--gold-lo)
|
||
);
|
||
transition: height 0.4s;
|
||
}
|
||
.vertical-card:hover {
|
||
background: var(--lift);
|
||
}
|
||
.vertical-card:hover::before {
|
||
height: 100%;
|
||
}
|
||
|
||
.vertical-icon {
|
||
font-size: 2rem;
|
||
display: block;
|
||
margin-bottom: 16px;
|
||
}
|
||
.vertical-name {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.15rem;
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
}
|
||
.vertical-desc {
|
||
color: var(--silver);
|
||
font-size: 0.88rem;
|
||
line-height: 1.65;
|
||
margin-bottom: 20px;
|
||
}
|
||
.vertical-tag {
|
||
display: block;
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--gold);
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 14px;
|
||
}
|
||
|
||
/* ── NEWS ── */
|
||
.news-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.news-card {
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 28px;
|
||
transition: border-top-color 0.25s;
|
||
}
|
||
.news-card:hover {
|
||
border-top-color: var(--gold);
|
||
}
|
||
|
||
.news-area {
|
||
font-size: 0.68rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--gold);
|
||
margin-bottom: 10px;
|
||
}
|
||
.news-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.05rem;
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
margin-bottom: 12px;
|
||
}
|
||
.news-teaser {
|
||
color: var(--silver);
|
||
font-size: 0.85rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
.news-date {
|
||
display: block;
|
||
font-size: 0.72rem;
|
||
color: var(--grey);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
/* ── PRICING ── */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.pricing-setup {
|
||
font-size: 0.76rem;
|
||
color: var(--gold);
|
||
letter-spacing: 0.04em;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.pricing-card {
|
||
background: var(--card);
|
||
padding: 48px 40px;
|
||
position: relative;
|
||
}
|
||
.pricing-card.featured {
|
||
background: var(--lift);
|
||
box-shadow:
|
||
0 0 0 1px var(--gold),
|
||
0 0 28px var(--gold-glow);
|
||
}
|
||
|
||
.pricing-badge {
|
||
display: inline-block;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 40%,
|
||
var(--gold-hi) 60%,
|
||
var(--gold) 80%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
color: var(--bg);
|
||
font-size: 0.65rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-weight: 700;
|
||
padding: 4px 12px;
|
||
border-radius: 2px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.pricing-plan {
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--grey);
|
||
margin-bottom: 12px;
|
||
}
|
||
.pricing-card.featured .pricing-plan {
|
||
color: var(--silver);
|
||
}
|
||
|
||
.pricing-price {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 3.2rem;
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
margin-bottom: 6px;
|
||
}
|
||
.pricing-card.featured .pricing-price {
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.pricing-period {
|
||
font-size: 0.76rem;
|
||
color: var(--grey);
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.pricing-quote {
|
||
font-style: italic;
|
||
color: var(--silver);
|
||
font-size: 0.85rem;
|
||
line-height: 1.55;
|
||
margin-bottom: 28px;
|
||
padding-left: 14px;
|
||
border-left: 2px solid var(--border);
|
||
}
|
||
|
||
.pricing-features {
|
||
margin-bottom: 36px;
|
||
}
|
||
.pricing-features li {
|
||
padding: 8px 0 8px 22px;
|
||
font-size: 0.88rem;
|
||
color: var(--silver);
|
||
border-bottom: 1px solid var(--border);
|
||
position: relative;
|
||
}
|
||
.pricing-features li::before {
|
||
content: "\2014";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.pricing-cta {
|
||
display: block;
|
||
text-align: center;
|
||
padding: 14px;
|
||
font-size: 0.82rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-weight: 700;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
transition:
|
||
background 0.2s,
|
||
color 0.2s,
|
||
border-color 0.2s,
|
||
opacity 0.2s;
|
||
}
|
||
.pricing-card:not(.featured) .pricing-cta {
|
||
border: 1px solid var(--gold);
|
||
color: var(--gold);
|
||
}
|
||
.pricing-card:not(.featured) .pricing-cta:hover {
|
||
background: var(--gold);
|
||
color: var(--bg);
|
||
}
|
||
.pricing-card.featured .pricing-cta {
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 40%,
|
||
var(--gold-hi) 60%,
|
||
var(--gold) 80%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
color: var(--bg);
|
||
}
|
||
.pricing-card.featured .pricing-cta:hover {
|
||
opacity: 0.88;
|
||
}
|
||
|
||
/* ── CUSTOMIZATION ── */
|
||
.custom-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.custom-card {
|
||
position: relative;
|
||
background: var(--card);
|
||
padding: 48px 40px;
|
||
overflow: hidden;
|
||
transition: background 0.3s;
|
||
}
|
||
.custom-card::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--gold-lo),
|
||
var(--gold),
|
||
var(--gold-hi)
|
||
);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.4s;
|
||
}
|
||
.custom-card:hover {
|
||
background: var(--lift);
|
||
}
|
||
.custom-card:hover::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.custom-icon {
|
||
font-size: 2rem;
|
||
display: block;
|
||
margin-bottom: 18px;
|
||
}
|
||
.custom-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.2rem;
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
margin-bottom: 14px;
|
||
}
|
||
.custom-body {
|
||
color: var(--silver);
|
||
font-size: 0.88rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 24px;
|
||
}
|
||
.custom-body strong {
|
||
color: var(--light);
|
||
}
|
||
|
||
.custom-link {
|
||
display: inline-block;
|
||
font-size: 0.8rem;
|
||
color: var(--gold);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.custom-link:hover {
|
||
border-bottom-color: var(--gold);
|
||
}
|
||
|
||
.custom-rate {
|
||
display: inline-block;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.4rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* ── VERTICALS TICKER ── */
|
||
.vtick-wrap {
|
||
overflow: hidden;
|
||
margin: 0 -8vw;
|
||
padding: 0 0 8px;
|
||
}
|
||
.vtick-card {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
text-decoration: none;
|
||
width: 200px;
|
||
margin: 0 10px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: var(--card);
|
||
box-shadow: 0 2px 10px rgba(62, 39, 35, 0.12);
|
||
transition:
|
||
transform 0.25s,
|
||
box-shadow 0.25s;
|
||
vertical-align: top;
|
||
}
|
||
.vtick-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 8px 24px var(--gold-glow);
|
||
}
|
||
.vtick-img {
|
||
width: 100%;
|
||
height: 130px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.vtick-body {
|
||
padding: 11px 13px 13px;
|
||
}
|
||
.vtick-name {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
margin-bottom: 5px;
|
||
}
|
||
.vtick-tag {
|
||
font-size: 0.62rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--gold);
|
||
}
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
background: var(--bg-deep);
|
||
border-top: 3px solid var(--gold);
|
||
padding: 72px 8vw 40px;
|
||
}
|
||
|
||
.footer-top {
|
||
display: flex;
|
||
gap: 60px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.footer-brand {
|
||
flex: 2;
|
||
min-width: 220px;
|
||
}
|
||
.footer-logo {
|
||
display: inline-block;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 14px;
|
||
}
|
||
.footer-logo span {
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.footer-brand p {
|
||
color: var(--grey);
|
||
font-size: 0.85rem;
|
||
line-height: 1.65;
|
||
max-width: 320px;
|
||
}
|
||
|
||
.footer-col {
|
||
flex: 1;
|
||
min-width: 140px;
|
||
}
|
||
.footer-col h4 {
|
||
font-size: 0.65rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--gold);
|
||
margin-bottom: 16px;
|
||
}
|
||
.footer-col ul li {
|
||
margin-bottom: 10px;
|
||
}
|
||
.footer-col ul li a {
|
||
font-size: 0.85rem;
|
||
color: var(--grey);
|
||
transition: color 0.2s;
|
||
}
|
||
.footer-col ul li a:hover {
|
||
color: var(--gold);
|
||
}
|
||
|
||
.footer-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 24px;
|
||
}
|
||
.footer-bottom span {
|
||
font-size: 0.78rem;
|
||
color: var(--grey);
|
||
}
|
||
.footer-legal {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
.footer-legal a {
|
||
font-size: 0.78rem;
|
||
color: var(--grey);
|
||
transition: color 0.2s;
|
||
}
|
||
.footer-legal a:hover {
|
||
color: var(--gold);
|
||
}
|
||
|
||
/* ── MODAL ── */
|
||
#modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9000;
|
||
background: rgba(62, 39, 35, 0.85);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
#modal-box {
|
||
background: var(--card);
|
||
border: 1px solid rgba(230, 81, 0, 0.25);
|
||
border-top: 3px solid var(--gold);
|
||
max-width: 480px;
|
||
width: 100%;
|
||
padding: 52px 48px;
|
||
position: relative;
|
||
}
|
||
|
||
#modal-close {
|
||
position: absolute;
|
||
top: 18px;
|
||
right: 20px;
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
color: var(--grey);
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
transition: color 0.2s;
|
||
}
|
||
#modal-close:hover {
|
||
color: var(--gold);
|
||
}
|
||
|
||
.modal-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.9rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 8px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.modal-subtitle {
|
||
color: var(--grey);
|
||
font-size: 0.82rem;
|
||
margin-bottom: 32px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.modal-field-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.field-label {
|
||
display: block;
|
||
font-size: 0.62rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--gold);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.modal-field {
|
||
width: 100%;
|
||
padding: 13px 16px;
|
||
background: rgba(62, 39, 35, 0.07);
|
||
border: 1px solid rgba(230, 81, 0, 0.28);
|
||
color: var(--white);
|
||
font-size: 0.9rem;
|
||
border-radius: 2px;
|
||
outline: none;
|
||
transition: border-color 0.25s;
|
||
font-family: "Segoe UI", system-ui, sans-serif;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
.modal-field:focus {
|
||
border-color: var(--gold);
|
||
}
|
||
|
||
select.modal-field {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E65100' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 14px center;
|
||
padding-right: 40px;
|
||
cursor: pointer;
|
||
}
|
||
select.modal-field option {
|
||
background: var(--card);
|
||
color: var(--white);
|
||
}
|
||
|
||
.modal-submit {
|
||
display: block;
|
||
width: 100%;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 40%,
|
||
var(--gold-hi) 60%,
|
||
var(--gold) 80%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
color: var(--bg);
|
||
border: none;
|
||
padding: 15px;
|
||
font-size: 0.88rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-weight: 700;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
font-family: "Segoe UI", system-ui, sans-serif;
|
||
margin-top: 8px;
|
||
text-align: center;
|
||
}
|
||
.modal-submit:hover {
|
||
opacity: 0.88;
|
||
}
|
||
.modal-submit:disabled {
|
||
opacity: 0.55;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
#modal-confirm {
|
||
display: none;
|
||
text-align: center;
|
||
padding: 16px 0;
|
||
}
|
||
#modal-confirm .confirm-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.4rem;
|
||
color: var(--gold-hi);
|
||
margin-bottom: 12px;
|
||
}
|
||
#modal-confirm .confirm-sub {
|
||
color: var(--silver);
|
||
font-size: 0.88rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 768px) {
|
||
.hero h1 {
|
||
font-size: 1.9rem;
|
||
}
|
||
.nav-center {
|
||
display: none;
|
||
}
|
||
.nav-chat {
|
||
display: none;
|
||
}
|
||
.nav-cta-sm {
|
||
display: inline-block;
|
||
}
|
||
.chat-panel {
|
||
display: none !important;
|
||
}
|
||
.footer-top {
|
||
gap: 36px;
|
||
}
|
||
#modal-box {
|
||
padding: 40px 28px;
|
||
}
|
||
}
|
||
@media (max-width: 480px) {
|
||
.hero h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
nav {
|
||
padding: 0 5vw;
|
||
}
|
||
section {
|
||
padding: 60px 5vw;
|
||
}
|
||
footer {
|
||
padding: 52px 5vw 32px;
|
||
}
|
||
#modal-box {
|
||
padding: 36px 20px;
|
||
}
|
||
.modal-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- NAV -->
|
||
<nav>
|
||
<a class="nav-logo" href="#"
|
||
><img src="img/logo.svg" alt="my-biz.app"
|
||
/></a>
|
||
<div class="nav-center">
|
||
<a class="nav-cta-book" href="#">Book Meeting</a>
|
||
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
|
||
</div>
|
||
<div class="nav-right">
|
||
<div class="nav-chat" id="nav-chat">
|
||
<button
|
||
class="nav-chat-toggle"
|
||
id="nav-chat-toggle"
|
||
aria-label="Toggle chat history"
|
||
>
|
||
💬
|
||
</button>
|
||
<input
|
||
type="text"
|
||
class="nav-chat-input"
|
||
id="nav-chat-input"
|
||
placeholder="Your Sales Agent"
|
||
aria-label="Ask your AI sales agent"
|
||
/>
|
||
<button
|
||
class="nav-chat-send"
|
||
id="nav-chat-send"
|
||
aria-label="Send message"
|
||
>
|
||
➤
|
||
</button>
|
||
</div>
|
||
<a class="nav-cta open-modal nav-cta-sm" href="#">Free Trial</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Sales Agent chat panel — drops below nav, right-aligned -->
|
||
<div class="chat-panel" id="chat-panel" aria-hidden="true">
|
||
<div class="chat-panel-header">
|
||
<span class="chat-panel-title">💬 Sales Agent</span>
|
||
<button
|
||
class="chat-panel-close"
|
||
id="chat-panel-close"
|
||
aria-label="Close chat"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
<div class="chat-history" id="chat-history"></div>
|
||
<div class="chat-input-row">
|
||
<input
|
||
type="text"
|
||
class="chat-input-field"
|
||
id="chat-input-field"
|
||
placeholder="Type a message…"
|
||
aria-label="Chat message"
|
||
/>
|
||
<button
|
||
class="chat-input-send"
|
||
id="chat-input-send"
|
||
aria-label="Send"
|
||
>
|
||
➤
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero" id="home">
|
||
<!-- Parallax background -->
|
||
<div class="hero-bg-wrap">
|
||
<img
|
||
class="hero-bg-img"
|
||
src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80&auto=format&fit=crop"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-mf-parallax
|
||
data-mf-parallax-speed="0.4"
|
||
data-mf-parallax-speed-tablet="0"
|
||
data-mf-parallax-speed-mobile="0"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="hero-eyebrow"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>
|
||
✦ One Stop Shop · Built for Real Businesses
|
||
</div>
|
||
<h1
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="900"
|
||
data-mf-animation-delay="130"
|
||
data-mf-animation-distance="32"
|
||
data-mf-animation-easing="ease-out-cubic"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Running a business is hard.<br /><em
|
||
>Your back-office shouldn’t be.</em
|
||
>
|
||
</h1>
|
||
<p
|
||
class="hero-sub"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="240"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>
|
||
We eliminate the chaos behind the scenes — invoicing, HR,
|
||
inventory, CRM, reports — all in one place, set up for
|
||
your exact industry, ready from day one.
|
||
</p>
|
||
<p class="hero-tagline">
|
||
<span
|
||
data-mf-text-type="typing"
|
||
data-mf-text-typing-speed="60"
|
||
data-mf-text-typing-delete-speed="30"
|
||
data-mf-text-typing-interval="1800"
|
||
data-mf-text-typing-cursor="true"
|
||
data-mf-text-typing-cursor-char="|"
|
||
><span>No duct tape.</span
|
||
><span>No spreadsheet nightmares.</span
|
||
><span>No expensive surprises.</span></span
|
||
>
|
||
</p>
|
||
|
||
<div
|
||
class="hero-actions"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="360"
|
||
data-mf-animation-distance="20"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<a class="btn-primary" id="open-modal-hero" href="#"
|
||
>Free Trial</a
|
||
>
|
||
<a class="btn-secondary" href="#">Book Meeting</a>
|
||
</div>
|
||
<p
|
||
class="hero-trust"
|
||
data-mf-animation="fade"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-delay="500"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Powered by <strong>Odoo Community Edition</strong> ·
|
||
Specialists for every industry · From
|
||
<strong>$214 / year</strong>
|
||
</p>
|
||
</section>
|
||
|
||
<!-- VERTICALS -->
|
||
<section id="verticals">
|
||
<span
|
||
class="section-label"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>Our Verticals</span
|
||
>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="100"
|
||
data-mf-animation-once="true"
|
||
>
|
||
We speak your industry’s language.
|
||
</h2>
|
||
<p
|
||
class="section-sub"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-delay="180"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Every vertical has a dedicated specialist who has lived through
|
||
your exact challenges. No generalists. No guessing. Just experts
|
||
who get it.
|
||
</p>
|
||
<div class="vtick-wrap" data-mf-ticker data-mf-ticker-speed="55">
|
||
<span>
|
||
<a
|
||
class="vtick-card"
|
||
href="https://ngo.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
class="vtick-img"
|
||
src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&q=80&auto=format&fit=crop"
|
||
alt="NGO & Non-Profit"
|
||
/>
|
||
<div class="vtick-body">
|
||
<div class="vtick-name">NGO & Non-Profit</div>
|
||
<div class="vtick-tag">
|
||
Donor CRM · Impact Reports
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</span>
|
||
<span>
|
||
<a
|
||
class="vtick-card"
|
||
href="https://startups.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
class="vtick-img"
|
||
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600&q=80&auto=format&fit=crop"
|
||
alt="Startups"
|
||
/>
|
||
<div class="vtick-body">
|
||
<div class="vtick-name">Startups</div>
|
||
<div class="vtick-tag">
|
||
Invoicing · CRM · Reporting
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</span>
|
||
<span>
|
||
<a
|
||
class="vtick-card"
|
||
href="https://manufacturing.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
class="vtick-img"
|
||
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?w=600&q=80&auto=format&fit=crop"
|
||
alt="Manufacturing"
|
||
/>
|
||
<div class="vtick-body">
|
||
<div class="vtick-name">Manufacturing</div>
|
||
<div class="vtick-tag">
|
||
MRP · Inventory · Quality
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</span>
|
||
<span>
|
||
<a
|
||
class="vtick-card"
|
||
href="https://restaurants.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
class="vtick-img"
|
||
src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80&auto=format&fit=crop"
|
||
alt="Restaurants"
|
||
/>
|
||
<div class="vtick-body">
|
||
<div class="vtick-name">Restaurants</div>
|
||
<div class="vtick-tag">
|
||
POS · Payroll · Food Cost
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</span>
|
||
<span>
|
||
<a
|
||
class="vtick-card"
|
||
href="https://agentic.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
class="vtick-img"
|
||
src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=600&q=80&auto=format&fit=crop"
|
||
alt="Agentic Businesses"
|
||
/>
|
||
<div class="vtick-body">
|
||
<div class="vtick-name">Agentic Businesses</div>
|
||
<div class="vtick-tag">
|
||
AI · Automation · Agents
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- NEWS -->
|
||
<section id="news">
|
||
<span
|
||
class="section-label"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>News from Our Verticals</span
|
||
>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="100"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Insights from the front lines.
|
||
</h2>
|
||
<p
|
||
class="section-sub"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-delay="180"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Our specialists share what’s actually working — no
|
||
fluff, no vendor noise. Real stories from real businesses in
|
||
your space.
|
||
</p>
|
||
<div
|
||
class="news-grid"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="100"
|
||
data-mf-stagger-duration="650"
|
||
data-mf-stagger-distance="36"
|
||
data-mf-stagger-easing="ease-out-cubic"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="news-card">
|
||
<div class="news-area">NGO</div>
|
||
<div class="news-title">
|
||
How a regional NGO cut grant reporting time by 70%
|
||
</div>
|
||
<p class="news-teaser">
|
||
Automating donor reconciliation and project cost
|
||
allocation freed up 15 hours per week that went straight
|
||
back into their mission.
|
||
</p>
|
||
<span class="news-date">June 2025</span>
|
||
</div>
|
||
<div class="news-card">
|
||
<div class="news-area">Startups</div>
|
||
<div class="news-title">
|
||
Why investors love clean Odoo data rooms
|
||
</div>
|
||
<p class="news-teaser">
|
||
Three founders share how a structured back-office gave
|
||
them an edge during due diligence — and closed
|
||
their rounds faster.
|
||
</p>
|
||
<span class="news-date">May 2025</span>
|
||
</div>
|
||
<div class="news-card">
|
||
<div class="news-area">Manufacturing</div>
|
||
<div class="news-title">
|
||
Real-time BoM costing saved a mid-size factory $40k
|
||
</div>
|
||
<p class="news-teaser">
|
||
When raw material prices shifted overnight, live
|
||
production cost tracking allowed this team to reprice
|
||
quotes before they lost margin.
|
||
</p>
|
||
<span class="news-date">April 2025</span>
|
||
</div>
|
||
<div class="news-card">
|
||
<div class="news-area">Restaurants</div>
|
||
<div class="news-title">
|
||
Food cost under control: a chef’s back-office
|
||
story
|
||
</div>
|
||
<p class="news-teaser">
|
||
Linking POS sales data to supplier invoices
|
||
automatically flagged a 12% food cost creep —
|
||
caught in week one, fixed before it hurt.
|
||
</p>
|
||
<span class="news-date">March 2025</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section id="pricing">
|
||
<span
|
||
class="section-label"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>Simple Pricing</span
|
||
>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="100"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Transparent. Honest. No surprises.
|
||
</h2>
|
||
<p
|
||
class="section-sub"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-delay="180"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Pick the plan that matches where your business is today. You can
|
||
always grow into more — on your timeline, not ours.
|
||
</p>
|
||
<div class="pricing-grid">
|
||
<div
|
||
class="pricing-card"
|
||
data-mf-animation="fade-right"
|
||
data-mf-animation-duration="750"
|
||
data-mf-animation-distance="40"
|
||
data-mf-animation-easing="ease-out-cubic"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<div class="pricing-plan">Side Hustle</div>
|
||
<div class="pricing-price">$214</div>
|
||
<div class="pricing-period">
|
||
per year · billed annually
|
||
</div>
|
||
<p class="pricing-quote">
|
||
“No big customizations — that is all my
|
||
business needs.”
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>Core back-office modules</li>
|
||
<li>Invoicing & basic accounting</li>
|
||
<li>Up to 3 users</li>
|
||
<li>Standard onboarding</li>
|
||
<li>Community support</li>
|
||
</ul>
|
||
<a class="pricing-cta open-modal" href="#">Get Started</a>
|
||
</div>
|
||
<div
|
||
class="pricing-card featured"
|
||
data-mf-animation="zoom-in"
|
||
data-mf-animation-duration="800"
|
||
data-mf-animation-delay="130"
|
||
data-mf-animation-easing="ease-out-back"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<div class="pricing-badge">Most Popular</div>
|
||
<div class="pricing-plan">On the Rise</div>
|
||
<div class="pricing-price">$395</div>
|
||
<div class="pricing-period">
|
||
per year · billed annually
|
||
</div>
|
||
<p class="pricing-quote">
|
||
“I need some modules and professional
|
||
reports.”
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>Everything in Side Hustle</li>
|
||
<li>Industry-specific modules</li>
|
||
<li>Professional report templates</li>
|
||
<li>Up to 10 users</li>
|
||
<li>Priority onboarding</li>
|
||
<li>Email & chat support</li>
|
||
</ul>
|
||
<a class="pricing-cta open-modal" href="#">Get Started</a>
|
||
</div>
|
||
<div
|
||
class="pricing-card"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="750"
|
||
data-mf-animation-distance="40"
|
||
data-mf-animation-easing="ease-out-cubic"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<div class="pricing-plan">Empire</div>
|
||
<div class="pricing-price">$750</div>
|
||
<div class="pricing-period">
|
||
per year · billed annually
|
||
</div>
|
||
<div class="pricing-setup">+ $500 one-time setup fee</div>
|
||
<p class="pricing-quote">
|
||
“My house! My horse! My server!”
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>Everything in On the Rise</li>
|
||
<li>Self-hosted on your server or VPS</li>
|
||
<li>We install & maintain the software</li>
|
||
<li>
|
||
Full data sovereignty — you own everything
|
||
</li>
|
||
<li>Unlimited users</li>
|
||
<li>Dedicated support line</li>
|
||
</ul>
|
||
<a class="pricing-cta open-modal" href="#">Get Started</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CUSTOMIZATION -->
|
||
<section id="customization">
|
||
<span
|
||
class="section-label"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>Customization</span
|
||
>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="100"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Need something more bespoke?
|
||
</h2>
|
||
<p
|
||
class="section-sub"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-delay="180"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Because we build on <strong>Odoo Community Edition</strong>, you
|
||
are never locked in. Choose the path that works best for your
|
||
team and budget.
|
||
</p>
|
||
<div
|
||
class="custom-grid"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="130"
|
||
data-mf-stagger-duration="700"
|
||
data-mf-stagger-distance="44"
|
||
data-mf-stagger-easing="ease-out-cubic"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="custom-card">
|
||
<span class="custom-icon">🌐</span>
|
||
<div class="custom-title">Hire Any Odoo Developer</div>
|
||
<p class="custom-body">
|
||
Since we use Odoo CE, the world’s largest
|
||
open-source ERP community is at your fingertips.
|
||
Thousands of certified freelancers on
|
||
<strong>Upwork</strong> and <strong>Fiverr</strong> can
|
||
extend, theme, or integrate your instance — no
|
||
vendor lock-in, ever. You own your code. You own your
|
||
data.
|
||
</p>
|
||
<a
|
||
class="custom-link"
|
||
href="https://www.upwork.com/search/profiles/?q=odoo"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>Browse Odoo Developers →</a
|
||
>
|
||
</div>
|
||
<div class="custom-card">
|
||
<span class="custom-icon">🔧️</span>
|
||
<div class="custom-title">Our In-House Team</div>
|
||
<p class="custom-body">
|
||
Prefer to work with specialists who already know your
|
||
setup inside-out? Our senior Odoo developers are on call
|
||
for custom modules, integrations, data migrations, and
|
||
anything else your business needs to scale. Transparent
|
||
scope, no hidden fees.
|
||
</p>
|
||
<span class="custom-rate">$65 USD / hour</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div
|
||
class="footer-top"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="80"
|
||
data-mf-stagger-duration="600"
|
||
data-mf-stagger-distance="28"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="footer-brand">
|
||
<a class="footer-logo" href="#">my-biz<span>.app</span></a>
|
||
<p>
|
||
A hassle-free all-in-one back-office built on Odoo
|
||
Community Edition. Specialists for NGOs, Startups,
|
||
Manufacturing, and Restaurants.
|
||
</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Product</h4>
|
||
<ul>
|
||
<li><a href="#verticals">Verticals</a></li>
|
||
<li><a href="#pricing">Pricing</a></li>
|
||
<li><a href="#customization">Customization</a></li>
|
||
<li><a href="#news">News</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Company</h4>
|
||
<ul>
|
||
<li>
|
||
<a href="mailto:hello@my-biz.app">Contact Us</a>
|
||
</li>
|
||
<li><a href="#">About</a></li>
|
||
<li><a href="#">Careers</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Legal</h4>
|
||
<ul>
|
||
<li><a href="#">Privacy Policy</a></li>
|
||
<li><a href="#">Terms of Service</a></li>
|
||
<li><a href="#">Cookie Policy</a></li>
|
||
<li><a href="#">Imprint</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="footer-bottom"
|
||
data-mf-animation="fade"
|
||
data-mf-animation-duration="600"
|
||
data-mf-animation-delay="280"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<span>© 2026 my-biz.app — All rights reserved.</span>
|
||
<div class="footer-legal">
|
||
<a href="#">Privacy</a>
|
||
<a href="#">Terms</a>
|
||
<a href="#">Imprint</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- MODAL -->
|
||
<div id="modal-overlay">
|
||
<div id="modal-box">
|
||
<button id="modal-close" aria-label="Close">×</button>
|
||
<h2 class="modal-title">Start Your Free Trial</h2>
|
||
<p class="modal-subtitle">
|
||
Tell us a little about where you are, and we’ll set
|
||
everything up for your industry — ready from day one.
|
||
</p>
|
||
<form id="trial-form" novalidate>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-email"
|
||
>Work Email</label
|
||
>
|
||
<input
|
||
type="email"
|
||
id="modal-email"
|
||
name="email"
|
||
class="modal-field"
|
||
placeholder="you@company.com"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-location"
|
||
>Location</label
|
||
>
|
||
<select
|
||
id="modal-location"
|
||
name="location"
|
||
class="modal-field"
|
||
required
|
||
>
|
||
<option value="">Select your location</option>
|
||
<option value="boston">Boston</option>
|
||
<option value="manchester">Manchester</option>
|
||
<option value="mumbai">Mumbai</option>
|
||
<option value="saopaulo">São Paulo</option>
|
||
<option value="meppel">Meppel</option>
|
||
<option value="sydney">Sydney</option>
|
||
</select>
|
||
</div>
|
||
<input type="hidden" name="product" value="odoo_19" />
|
||
<input type="hidden" name="utm_source" value="homepage" />
|
||
<input type="hidden" name="utm_medium" value="direct" />
|
||
<input type="hidden" name="utm_campaign" value="none" />
|
||
<input type="hidden" name="utm_term" value="" />
|
||
<input type="hidden" name="utm_content" value="" />
|
||
<button type="submit" class="modal-submit">
|
||
Start Free Trial
|
||
</button>
|
||
</form>
|
||
<div id="modal-confirm">
|
||
<p class="confirm-title">Thank you! 🎉</p>
|
||
<p class="confirm-sub">
|
||
We’ve received your request and a specialist will
|
||
be in touch within one business day to get you set up.
|
||
</p>
|
||
<button id="modal-confirm-close" class="modal-submit">
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Sales Agent Chat ───────────────────────────────────────────── -->
|
||
<script>
|
||
(function () {
|
||
"use strict";
|
||
|
||
var CHAT_URL =
|
||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat";
|
||
/* Generate a UUID v4 for chatid */
|
||
var CHAT_ID = (function () {
|
||
if (
|
||
typeof crypto !== "undefined" &&
|
||
typeof crypto.randomUUID === "function"
|
||
) {
|
||
return crypto.randomUUID();
|
||
}
|
||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
|
||
/[xy]/g,
|
||
function (c) {
|
||
var r = (Math.random() * 16) | 0;
|
||
return (c === "x" ? r : (r & 0x3) | 0x8).toString(
|
||
16,
|
||
);
|
||
},
|
||
);
|
||
})();
|
||
/* expose for the 60-second probe script */
|
||
window._mbsChatId = CHAT_ID;
|
||
|
||
var panel = document.getElementById("chat-panel");
|
||
var chatLog = document.getElementById("chat-history");
|
||
var toggleBtn = document.getElementById("nav-chat-toggle");
|
||
var closeBtn = document.getElementById("chat-panel-close");
|
||
var navInput = document.getElementById("nav-chat-input");
|
||
var navSend = document.getElementById("nav-chat-send");
|
||
var panelInput = document.getElementById("chat-input-field");
|
||
var panelSend = document.getElementById("chat-input-send");
|
||
|
||
var busy = false;
|
||
var greeted = false;
|
||
|
||
/* ── visibility ─────────────────────────────────────────── */
|
||
function openPanel() {
|
||
panel.classList.add("open");
|
||
panel.setAttribute("aria-hidden", "false");
|
||
if (!greeted) {
|
||
greeted = true;
|
||
appendMsg(
|
||
"agent",
|
||
"Hi! I\u2019m your Sales Agent. Ask me anything about plans, onboarding, or pricing.",
|
||
);
|
||
}
|
||
scrollLog();
|
||
}
|
||
|
||
function closePanel() {
|
||
panel.classList.remove("open");
|
||
panel.setAttribute("aria-hidden", "true");
|
||
}
|
||
|
||
function togglePanel() {
|
||
panel.classList.contains("open")
|
||
? closePanel()
|
||
: openPanel();
|
||
}
|
||
|
||
/* ── DOM helpers ─────────────────────────────────────────── */
|
||
function scrollLog() {
|
||
chatLog.scrollTop = chatLog.scrollHeight;
|
||
}
|
||
|
||
function appendMsg(role, text) {
|
||
var wrap = document.createElement("div");
|
||
wrap.className = "chat-msg " + role;
|
||
|
||
var lbl = document.createElement("span");
|
||
lbl.className = "chat-label";
|
||
lbl.textContent = role === "user" ? "You" : "Sales Agent";
|
||
|
||
var bbl = document.createElement("div");
|
||
bbl.className = "chat-bubble";
|
||
bbl.textContent = text;
|
||
|
||
wrap.appendChild(lbl);
|
||
wrap.appendChild(bbl);
|
||
chatLog.appendChild(wrap);
|
||
scrollLog();
|
||
return wrap;
|
||
}
|
||
|
||
/* ── public API for probe script ────────────────────────── */
|
||
window._mbs = {
|
||
appendMsg: appendMsg,
|
||
openSilent: function () {
|
||
greeted = true; /* suppress default welcome message */
|
||
panel.classList.add("open");
|
||
panel.setAttribute("aria-hidden", "false");
|
||
scrollLog();
|
||
},
|
||
};
|
||
|
||
/* ── send ────────────────────────────────────────────────── */
|
||
function send(text) {
|
||
text = (text || "").trim();
|
||
if (!text || busy) return;
|
||
busy = true;
|
||
|
||
appendMsg("user", text);
|
||
openPanel();
|
||
navInput.value = "";
|
||
panelInput.value = "";
|
||
|
||
var thinkEl = appendMsg("agent", "\u2026");
|
||
thinkEl.classList.add("chat-thinking");
|
||
|
||
fetch(CHAT_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "sendMessage",
|
||
chatid: CHAT_ID,
|
||
chatInput: text,
|
||
}),
|
||
})
|
||
.then(function (r) {
|
||
var ct = r.headers.get("content-type") || "";
|
||
if (ct.indexOf("json") !== -1) return r.json();
|
||
return r.text().then(function (t) {
|
||
return { reply: t };
|
||
});
|
||
})
|
||
.then(function (d) {
|
||
if (thinkEl.parentNode)
|
||
chatLog.removeChild(thinkEl);
|
||
/* n8n returns an array or object — unwrap either */
|
||
var item = Array.isArray(d) ? d[0] : d;
|
||
var reply =
|
||
(item &&
|
||
(item.output ||
|
||
item.text ||
|
||
item.message ||
|
||
item.reply)) ||
|
||
(typeof d === "string" ? d : JSON.stringify(d));
|
||
appendMsg("agent", reply);
|
||
busy = false;
|
||
})
|
||
.catch(function () {
|
||
if (thinkEl.parentNode)
|
||
chatLog.removeChild(thinkEl);
|
||
appendMsg(
|
||
"agent",
|
||
"Sorry, I could not connect right now. Please try again.",
|
||
);
|
||
busy = false;
|
||
});
|
||
}
|
||
|
||
/* ── events ──────────────────────────────────────────────── */
|
||
toggleBtn.addEventListener("click", function (e) {
|
||
e.stopPropagation();
|
||
togglePanel();
|
||
});
|
||
closeBtn.addEventListener("click", closePanel);
|
||
|
||
navSend.addEventListener("click", function () {
|
||
send(navInput.value);
|
||
});
|
||
panelSend.addEventListener("click", function () {
|
||
send(panelInput.value);
|
||
});
|
||
|
||
navInput.addEventListener("keydown", function (e) {
|
||
if (e.key === "Enter") send(navInput.value);
|
||
});
|
||
panelInput.addEventListener("keydown", function (e) {
|
||
if (e.key === "Enter") send(panelInput.value);
|
||
});
|
||
|
||
/* close on outside click */
|
||
document.addEventListener("click", function (e) {
|
||
var nc = document.getElementById("nav-chat");
|
||
if (
|
||
panel.classList.contains("open") &&
|
||
!panel.contains(e.target) &&
|
||
nc &&
|
||
!nc.contains(e.target)
|
||
) {
|
||
closePanel();
|
||
}
|
||
});
|
||
|
||
/* close on Escape */
|
||
document.addEventListener("keydown", function (e) {
|
||
if (e.key === "Escape" && panel.classList.contains("open"))
|
||
closePanel();
|
||
});
|
||
|
||
/* close on scroll */
|
||
window.addEventListener(
|
||
"scroll",
|
||
function () {
|
||
if (panel.classList.contains("open")) closePanel();
|
||
},
|
||
{ passive: true },
|
||
);
|
||
})();
|
||
</script>
|
||
|
||
<!-- ── 60-Second New-User Probe ──────────────────────────────────── -->
|
||
<script>
|
||
(function () {
|
||
"use strict";
|
||
|
||
var CHAT_URL =
|
||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat";
|
||
var GEO_URL = "https://ipinfo.io/json";
|
||
var fired = false;
|
||
|
||
/* ── Which section is closest to viewport centre ─────────── */
|
||
function visibleSection() {
|
||
var els = [].slice.call(
|
||
document.querySelectorAll("section[id], footer"),
|
||
);
|
||
var mid = window.innerHeight / 2;
|
||
var best = null,
|
||
bestDist = Infinity;
|
||
els.forEach(function (el) {
|
||
var r = el.getBoundingClientRect();
|
||
if (r.bottom <= 0 || r.top >= window.innerHeight)
|
||
return;
|
||
var d = Math.abs(r.top + r.height / 2 - mid);
|
||
if (d < bestDist) {
|
||
bestDist = d;
|
||
best = el;
|
||
}
|
||
});
|
||
if (!best) return "(top of page)";
|
||
var names = {
|
||
home: "Hero — main headline",
|
||
verticals: "Our Verticals section",
|
||
news: "News / Insights section",
|
||
pricing: "Pricing section",
|
||
customization: "Customization section",
|
||
};
|
||
return names[best.id] || best.id || "footer";
|
||
}
|
||
|
||
/* ── Scroll depth 0–100 % ───────────────────────────────── */
|
||
function scrollDepth() {
|
||
var d = document.documentElement;
|
||
var max = d.scrollHeight - window.innerHeight;
|
||
if (max <= 0) return 0;
|
||
return Math.min(
|
||
100,
|
||
Math.round((window.pageYOffset / max) * 100),
|
||
);
|
||
}
|
||
|
||
/* ── UA parsers ─────────────────────────────────────────── */
|
||
function parseOS(ua) {
|
||
if (/Windows NT 10|Windows NT 11/.test(ua))
|
||
return "Windows 10/11";
|
||
if (/Windows NT 6\.3/.test(ua)) return "Windows 8.1";
|
||
if (/Windows NT 6\.1/.test(ua)) return "Windows 7";
|
||
if (/Mac OS X ([\d_]+)/.test(ua))
|
||
return "macOS " + RegExp.$1.replace(/_/g, ".");
|
||
if (/Android ([\d.]+)/.test(ua))
|
||
return "Android " + RegExp.$1;
|
||
if (/iPhone.*OS ([\d_]+)/.test(ua))
|
||
return "iOS " + RegExp.$1.replace(/_/g, ".");
|
||
if (/iPad.*OS ([\d_]+)/.test(ua))
|
||
return "iPadOS " + RegExp.$1.replace(/_/g, ".");
|
||
if (/Linux/.test(ua)) return "Linux";
|
||
return "Unknown";
|
||
}
|
||
function parseBrowser(ua) {
|
||
if (/Edg\/([\d.]+)/.test(ua)) return "Edge " + RegExp.$1;
|
||
if (/OPR\/([\d.]+)/.test(ua)) return "Opera " + RegExp.$1;
|
||
if (/Firefox\/([\d.]+)/.test(ua))
|
||
return "Firefox " + RegExp.$1;
|
||
if (/Chrome\/([\d.]+)/.test(ua))
|
||
return "Chrome " + RegExp.$1;
|
||
if (/Version\/([\d.]+).*Safari/.test(ua))
|
||
return "Safari " + RegExp.$1;
|
||
return "Unknown";
|
||
}
|
||
function deviceType(ua) {
|
||
if (/iPad|Tablet/.test(ua)) return "Tablet";
|
||
if (/Mobi|Android/.test(ua)) return "Mobile";
|
||
return "Desktop";
|
||
}
|
||
|
||
/* ── Label helper (fixed-width key) ─────────────────────── */
|
||
function r(label, value) {
|
||
var k = (label + ": ").slice(0, 14);
|
||
return k + " " + value;
|
||
}
|
||
|
||
/* ── Build message text ─────────────────────────────────── */
|
||
function buildMsg(geo) {
|
||
var ua = navigator.userAgent;
|
||
var conn =
|
||
navigator.connection ||
|
||
navigator.mozConnection ||
|
||
navigator.webkitConnection ||
|
||
null;
|
||
var tz =
|
||
typeof Intl !== "undefined"
|
||
? Intl.DateTimeFormat().resolvedOptions().timeZone
|
||
: "unknown";
|
||
var langs = (
|
||
navigator.languages || [navigator.language]
|
||
).join(", ");
|
||
|
||
var lines = [
|
||
"NEW USER — 60s Probe",
|
||
"================================",
|
||
"",
|
||
r("Viewing", visibleSection()),
|
||
r("Scroll depth", scrollDepth() + "%"),
|
||
r("Time on page", "60 seconds"),
|
||
r("Timestamp", new Date().toUTCString()),
|
||
"",
|
||
"--- BROWSER & DEVICE ----------",
|
||
r("Browser", parseBrowser(ua)),
|
||
r("OS", parseOS(ua)),
|
||
r("Device", deviceType(ua)),
|
||
r("Language", navigator.language + " [" + langs + "]"),
|
||
r(
|
||
"Screen",
|
||
screen.width +
|
||
"x" +
|
||
screen.height +
|
||
" @ " +
|
||
screen.colorDepth +
|
||
"-bit",
|
||
),
|
||
r(
|
||
"Viewport",
|
||
window.innerWidth + "x" + window.innerHeight,
|
||
),
|
||
r(
|
||
"CPU cores",
|
||
String(navigator.hardwareConcurrency || "?"),
|
||
),
|
||
r(
|
||
"Device RAM",
|
||
navigator.deviceMemory
|
||
? navigator.deviceMemory + " GB"
|
||
: "?",
|
||
),
|
||
r("Touch pts", String(navigator.maxTouchPoints || 0)),
|
||
r("Cookies", navigator.cookieEnabled ? "yes" : "no"),
|
||
r("DNT", navigator.doNotTrack === "1" ? "on" : "off"),
|
||
r("User Agent", ua),
|
||
];
|
||
|
||
if (conn) {
|
||
lines.push(
|
||
r(
|
||
"Connection",
|
||
(conn.effectiveType || "?") +
|
||
(conn.downlink
|
||
? " @ " + conn.downlink + " Mbps"
|
||
: ""),
|
||
),
|
||
);
|
||
if (conn.saveData) lines.push(r("Data saver", "on"));
|
||
}
|
||
|
||
lines.push("");
|
||
lines.push("--- PAGE ----------------------");
|
||
lines.push(r("URL", window.location.href));
|
||
lines.push(
|
||
r("Referrer", document.referrer || "direct / none"),
|
||
);
|
||
lines.push(r("Title", document.title));
|
||
lines.push(r("Timezone", tz));
|
||
|
||
if (geo) {
|
||
lines.push("");
|
||
lines.push("--- LOCATION (IP API) ---------");
|
||
lines.push(r("IP", geo.ip || "?"));
|
||
lines.push(r("Country", geo.country || "?"));
|
||
if (geo.city) lines.push(r("City", geo.city));
|
||
if (geo.region) lines.push(r("Region", geo.region));
|
||
if (geo.org) lines.push(r("ISP/Org", geo.org));
|
||
if (geo.timezone) lines.push(r("IP TZ", geo.timezone));
|
||
if (geo.loc) lines.push(r("Coords", geo.loc));
|
||
}
|
||
|
||
lines.push("");
|
||
lines.push("--- SESSION -------------------");
|
||
lines.push(r("Chat ID", window._mbsChatId || "unknown"));
|
||
|
||
return lines.join("\n");
|
||
}
|
||
|
||
/* ── Post to webhook ─────────────────────────────────────── */
|
||
function fire(geo) {
|
||
if (fired) return;
|
||
fired = true;
|
||
var chatId =
|
||
window._mbsChatId ||
|
||
"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
|
||
/[xy]/g,
|
||
function (c) {
|
||
var r2 = (Math.random() * 16) | 0;
|
||
return (
|
||
c === "x" ? r2 : (r2 & 0x3) | 0x8
|
||
).toString(16);
|
||
},
|
||
);
|
||
fetch(CHAT_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "sendMessage",
|
||
chatid: chatId,
|
||
chatInput: buildMsg(geo),
|
||
}),
|
||
})
|
||
.then(function (res) {
|
||
var ct = res.headers.get("content-type") || "";
|
||
if (ct.indexOf("json") !== -1) return res.json();
|
||
return res.text().then(function (t) {
|
||
return { output: t };
|
||
});
|
||
})
|
||
.then(function (d) {
|
||
var item = Array.isArray(d) ? d[0] : d;
|
||
var reply =
|
||
(item &&
|
||
(item.output ||
|
||
item.text ||
|
||
item.message ||
|
||
item.reply)) ||
|
||
(typeof d === "string" ? d : null);
|
||
if (reply && window._mbs) {
|
||
window._mbs.appendMsg("agent", reply);
|
||
window._mbs.openSilent();
|
||
}
|
||
})
|
||
.catch(function () {}); /* silently ignore errors */
|
||
}
|
||
|
||
/* ── Schedule: 30 seconds after page load ────────────────── */
|
||
setTimeout(function () {
|
||
fetch(GEO_URL)
|
||
.then(function (res) {
|
||
return res.json();
|
||
})
|
||
.then(function (data) {
|
||
fire(data);
|
||
})
|
||
.catch(function () {
|
||
fire(null);
|
||
});
|
||
}, 15000);
|
||
})();
|
||
</script>
|
||
|
||
<script>
|
||
(function () {
|
||
var WEBHOOK =
|
||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
|
||
var overlay = document.getElementById("modal-overlay");
|
||
var form = document.getElementById("trial-form");
|
||
var confirmDiv = document.getElementById("modal-confirm");
|
||
|
||
function openModal() {
|
||
overlay.style.display = "flex";
|
||
document.body.style.overflow = "hidden";
|
||
}
|
||
function closeModal() {
|
||
overlay.style.display = "none";
|
||
document.body.style.overflow = "";
|
||
setTimeout(function () {
|
||
form.style.display = "";
|
||
confirmDiv.style.display = "none";
|
||
form.reset();
|
||
var btn = form.querySelector(".modal-submit");
|
||
btn.textContent = "Start Free Trial";
|
||
btn.disabled = false;
|
||
}, 200);
|
||
}
|
||
|
||
document
|
||
.getElementById("open-modal")
|
||
.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
openModal();
|
||
});
|
||
document
|
||
.getElementById("open-modal-hero")
|
||
.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
openModal();
|
||
});
|
||
document.querySelectorAll(".open-modal").forEach(function (el) {
|
||
el.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
openModal();
|
||
});
|
||
});
|
||
|
||
document
|
||
.getElementById("modal-close")
|
||
.addEventListener("click", closeModal);
|
||
overlay.addEventListener("click", function (e) {
|
||
if (e.target === overlay) closeModal();
|
||
});
|
||
document.addEventListener("keydown", function (e) {
|
||
if (e.key === "Escape") closeModal();
|
||
});
|
||
document
|
||
.getElementById("modal-confirm-close")
|
||
.addEventListener("click", closeModal);
|
||
|
||
form.addEventListener("submit", function (e) {
|
||
e.preventDefault();
|
||
var btn = form.querySelector(".modal-submit");
|
||
btn.textContent = "Sending\u2026";
|
||
btn.disabled = true;
|
||
fetch(WEBHOOK, { method: "POST", body: new FormData(form) })
|
||
.then(function () {
|
||
form.style.display = "none";
|
||
confirmDiv.style.display = "block";
|
||
})
|
||
.catch(function () {
|
||
form.style.display = "none";
|
||
confirmDiv.style.display = "block";
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<!-- MotionFlow JS — auto-initializes, no setup required -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
|
||
</body>
|
||
</html>
|