oliver
2178 lines
78 KiB
HTML
2178 lines
78 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: #3a2416;
|
|
--surf1: #44301a;
|
|
--card: #50381e;
|
|
--lift: #5e4426;
|
|
--bg-deep: #241810;
|
|
--border: rgba(210, 140, 60, 0.28);
|
|
--grey: #9e8060;
|
|
--silver: #c8a882;
|
|
--light: #e4cca4;
|
|
--gold: #d88c3c;
|
|
--gold-hi: #f0a850;
|
|
--gold-lo: #8a5422;
|
|
--gold-glow: rgba(210, 140, 60, 0.22);
|
|
--white: #f8e8c8;
|
|
}
|
|
|
|
/* ── 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(48, 30, 16, 0.97);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 24px;
|
|
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(58, 36, 20, 0.7) 0%,
|
|
rgba(44, 26, 12, 0.48) 50%,
|
|
rgba(58, 36, 20, 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(80, 56, 30, 0.55);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
height: 34px;
|
|
width: 440px;
|
|
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;
|
|
}
|
|
.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-center {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
}
|
|
.nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
.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(210, 140, 60, 0.38);
|
|
color: var(--silver);
|
|
-webkit-text-fill-color: var(--silver);
|
|
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);
|
|
color: var(--gold);
|
|
-webkit-text-fill-color: var(--gold);
|
|
}
|
|
|
|
/* ── 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-lo);
|
|
color: var(--white);
|
|
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(300px, 1fr));
|
|
gap: 1px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border);
|
|
max-width: 820px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ── 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(14, 14, 20, 0.88);
|
|
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(212, 170, 80, 0.35);
|
|
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(10, 10, 16, 0.7);
|
|
border: 1px solid rgba(212, 170, 80, 0.25);
|
|
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='%23D6AF52' 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 {
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
}
|
|
.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;
|
|
}
|
|
.pricing-grid {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
@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="#">my-biz<span>.app</span></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="verticals-grid"
|
|
data-mf-stagger-animation="fade-up"
|
|
data-mf-stagger-gap="90"
|
|
data-mf-stagger-duration="650"
|
|
data-mf-stagger-distance="40"
|
|
data-mf-stagger-easing="ease-out-cubic"
|
|
data-mf-stagger-once="true"
|
|
>
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🌍</span>
|
|
<div class="vertical-name">NGO & Non-Profit</div>
|
|
<p class="vertical-desc">
|
|
Grant tracking, donor management, project accounting,
|
|
and compliance reporting — built for organizations
|
|
that answer to their mission, not just their margin.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>Donor CRM · Grant Accounting · Impact
|
|
Reports</span
|
|
>
|
|
</div>
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🚀</span>
|
|
<div class="vertical-name">Startups</div>
|
|
<p class="vertical-desc">
|
|
Move fast without breaking your books. From your first
|
|
invoice to Series A due diligence, we set up systems
|
|
that grow with you and impress every investor.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>Invoicing · CRM · Equity-Ready
|
|
Reporting</span
|
|
>
|
|
</div>
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🏭</span>
|
|
<div class="vertical-name">Manufacturing</div>
|
|
<p class="vertical-desc">
|
|
Bills of materials, production orders, real-time
|
|
inventory, and quality control — everything on the
|
|
floor finally reflected in your numbers.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>MRP · Inventory · Purchase ·
|
|
Quality</span
|
|
>
|
|
</div>
|
|
<div class="vertical-card">
|
|
<span class="vertical-icon">🍽️</span>
|
|
<div class="vertical-name">Restaurants</div>
|
|
<p class="vertical-desc">
|
|
From tableside POS to supplier invoices to staff
|
|
scheduling — keep the kitchen and the books
|
|
running smoothly, even on your busiest Saturday night.
|
|
</p>
|
|
<span class="vertical-tag"
|
|
>POS · Supplier Mgmt · Payroll ·
|
|
Food Cost</span
|
|
>
|
|
</div>
|
|
</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>
|
|
</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>© 2025 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";
|
|
var SESSION =
|
|
"mbs_" +
|
|
Math.random().toString(36).slice(2) +
|
|
Date.now().toString(36);
|
|
|
|
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;
|
|
}
|
|
|
|
/* ── 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({
|
|
message: text,
|
|
session_id: SESSION,
|
|
}),
|
|
})
|
|
.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);
|
|
var reply =
|
|
d.reply ||
|
|
d.message ||
|
|
d.response ||
|
|
d.output ||
|
|
d.text ||
|
|
(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();
|
|
});
|
|
})();
|
|
</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>
|