oliver
3151 lines
114 KiB
HTML
3151 lines
114 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>
|
||
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
|
||
/>
|
||
<style>
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
: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;
|
||
}
|
||
|
||
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 {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 500;
|
||
height: 62px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
padding: 0 8vw;
|
||
background: rgba(255, 243, 224, 0.94);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
box-shadow: 0 10px 30px rgba(62, 39, 35, 0.08);
|
||
}
|
||
|
||
.nav-logo {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.nav-logo img {
|
||
height: 36px;
|
||
width: auto;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 22px;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.nav-links a {
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--silver);
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--gold);
|
||
}
|
||
|
||
.nav-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.nav-chat {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
width: 360px;
|
||
height: 38px;
|
||
min-height: 38px;
|
||
--chat-panel-height: 304px;
|
||
overflow: visible;
|
||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
|
||
}
|
||
|
||
.nav-chat:focus-within {
|
||
box-shadow: 0 0 0 3px var(--gold-glow);
|
||
}
|
||
|
||
.nav-chat-main {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 38px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
|
||
}
|
||
|
||
.nav-chat.open .nav-chat-main {
|
||
border-color: var(--gold);
|
||
box-shadow: 0 16px 32px rgba(62, 39, 35, 0.12);
|
||
transform: translateY(var(--chat-panel-height));
|
||
}
|
||
|
||
.nav-chat-panel {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: var(--chat-panel-height);
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 18px;
|
||
box-shadow: 0 24px 80px rgba(62, 39, 35, 0.24);
|
||
overflow: hidden;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transform: translateY(-12px);
|
||
pointer-events: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: opacity 0.22s ease, visibility 0.22s ease,
|
||
transform 0.22s ease;
|
||
}
|
||
|
||
.nav-chat.open .nav-chat-panel {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.nav-chat-toggle,
|
||
.nav-chat-send,
|
||
.chat-panel-close,
|
||
.chat-input-send,
|
||
#modal-close {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-chat-toggle,
|
||
.nav-chat-send {
|
||
height: 100%;
|
||
color: var(--gold);
|
||
padding: 0 12px;
|
||
font-size: 0.92rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-chat-toggle {
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
|
||
.nav-chat-send {
|
||
border-left: 1px solid var(--border);
|
||
}
|
||
|
||
.nav-chat-input,
|
||
.chat-input-field,
|
||
.modal-field {
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
font: inherit;
|
||
}
|
||
|
||
.nav-chat-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 0 12px;
|
||
color: var(--white);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.nav-chat-input::placeholder,
|
||
.chat-input-field::placeholder,
|
||
.modal-field::placeholder {
|
||
color: var(--grey);
|
||
}
|
||
|
||
.nav-cta,
|
||
.nav-cta-book,
|
||
.btn-primary,
|
||
.btn-secondary,
|
||
.hero-note,
|
||
.pricing-cta,
|
||
.custom-link,
|
||
.story-link,
|
||
.story-cta,
|
||
.open-modal,
|
||
.modal-submit {
|
||
transition: transform 0.2s, opacity 0.2s, border-color 0.2s,
|
||
color 0.2s, background 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.nav-cta,
|
||
.nav-cta-book {
|
||
font-size: 0.74rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
padding: 9px 16px;
|
||
border-radius: 999px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.nav-cta {
|
||
border: 1px solid var(--gold);
|
||
color: var(--gold);
|
||
}
|
||
|
||
.nav-cta:hover {
|
||
background: var(--gold);
|
||
color: var(--card);
|
||
}
|
||
|
||
.nav-cta-book {
|
||
border: 1px solid rgba(161, 136, 127, 0.55);
|
||
color: var(--silver);
|
||
}
|
||
|
||
.nav-cta-book:hover {
|
||
border-color: var(--gold-hi);
|
||
color: var(--gold-hi);
|
||
}
|
||
|
||
.nav-cta-sm {
|
||
display: none;
|
||
}
|
||
|
||
.chat-panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
background: var(--lift);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.chat-panel-title {
|
||
font-size: 0.68rem;
|
||
color: var(--gold);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.chat-panel-close {
|
||
color: var(--grey);
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.chat-history {
|
||
flex: 1;
|
||
min-height: 260px;
|
||
overflow-y: auto;
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.chat-msg {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.chat-msg.user {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.chat-label {
|
||
font-size: 0.6rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--grey);
|
||
}
|
||
|
||
.chat-bubble {
|
||
max-width: 84%;
|
||
padding: 10px 12px;
|
||
font-size: 0.82rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.chat-msg.agent .chat-bubble {
|
||
background: var(--lift);
|
||
color: var(--light);
|
||
border-radius: 0 12px 12px 12px;
|
||
}
|
||
|
||
.chat-msg.user .chat-bubble {
|
||
background: var(--gold);
|
||
color: var(--card);
|
||
border-radius: 12px 0 12px 12px;
|
||
}
|
||
|
||
.chat-thinking .chat-bubble {
|
||
font-style: italic;
|
||
color: var(--grey);
|
||
}
|
||
|
||
section,
|
||
footer {
|
||
scroll-margin-top: 72px;
|
||
}
|
||
|
||
.hero {
|
||
position: relative;
|
||
min-height: 70vh;
|
||
padding: 42px 8vw 90px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-bg-wrap {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
opacity: 0.18;
|
||
}
|
||
|
||
.hero-bg-wrap::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(
|
||
circle at top right,
|
||
rgba(251, 140, 0, 0.2),
|
||
transparent 32%
|
||
),
|
||
linear-gradient(
|
||
135deg,
|
||
rgba(239, 235, 233, 0.84),
|
||
rgba(239, 235, 233, 0.96)
|
||
);
|
||
}
|
||
|
||
.hero-shell {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.hero-copy {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-kicker,
|
||
.section-label,
|
||
.story-label,
|
||
.quote-label,
|
||
.proof-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 14px;
|
||
border: 1px solid rgba(230, 81, 0, 0.24);
|
||
border-radius: 999px;
|
||
background: rgba(255, 243, 224, 0.68);
|
||
color: var(--gold);
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
|
||
.hero h1,
|
||
.section-title,
|
||
.story-title,
|
||
.modal-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
line-height: 1.05;
|
||
}
|
||
|
||
.hero h1 {
|
||
margin-top: 22px;
|
||
font-size: clamp(3rem, 8vw, 6.1rem);
|
||
max-width: 80%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.hero h1 .accent {
|
||
color: var(--gold);
|
||
font-style: italic;
|
||
}
|
||
|
||
.hero-sub {
|
||
margin-top: 22px;
|
||
max-width: 62ch;
|
||
font-size: 1rem;
|
||
color: var(--silver);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.hero-note {
|
||
display: inline;
|
||
margin-top: 22px;
|
||
color: var(--silver);
|
||
font-size: 0.94rem;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14px;
|
||
margin-top: 28px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-primary,
|
||
.pricing-cta,
|
||
.modal-submit,
|
||
.story-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
padding: 15px 22px;
|
||
border-radius: 999px;
|
||
border: none;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
color: var(--bg);
|
||
box-shadow: 0 18px 40px var(--gold-glow);
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
|
||
.btn-primary:hover,
|
||
.pricing-cta:hover,
|
||
.modal-submit:hover,
|
||
.story-cta:hover {
|
||
transform: translateY(-1px);
|
||
opacity: 0.92;
|
||
}
|
||
|
||
.btn-secondary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 22px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||
background: rgba(255, 243, 224, 0.6);
|
||
color: var(--white);
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
|
||
.btn-secondary:hover,
|
||
.custom-link:hover,
|
||
.story-link:hover {
|
||
border-color: var(--gold);
|
||
color: var(--gold);
|
||
}
|
||
|
||
.hero-trust {
|
||
margin-top: 26px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
max-width: 760px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.trust-card,
|
||
.proof-card,
|
||
.news-card,
|
||
.custom-card,
|
||
.pricing-card,
|
||
.story-panel,
|
||
.hero-panel,
|
||
.quote-panel {
|
||
background: rgba(255, 243, 224, 0.78);
|
||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||
box-shadow: 0 18px 40px rgba(62, 39, 35, 0.08);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.trust-card {
|
||
padding: 0;
|
||
border-radius: 0;
|
||
background: none;
|
||
border: none;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
.trust-card strong,
|
||
.proof-value,
|
||
.pricing-price,
|
||
.quote-number {
|
||
display: block;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.5rem;
|
||
color: var(--white);
|
||
line-height: 1;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.trust-card span,
|
||
.proof-card p,
|
||
.hero-panel p,
|
||
.quote-panel p,
|
||
.story-copy p,
|
||
.section-sub,
|
||
.news-teaser,
|
||
.custom-body,
|
||
.pricing-quote,
|
||
.footer-brand p,
|
||
.modal-subtitle,
|
||
#modal-confirm .confirm-sub {
|
||
color: var(--silver);
|
||
}
|
||
|
||
.hero-trust .trust-card strong {
|
||
display: inline;
|
||
font-family: inherit;
|
||
font-size: 0.8rem;
|
||
color: var(--white);
|
||
margin: 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hero-trust .trust-card span {
|
||
font-size: 0.8rem;
|
||
color: var(--grey);
|
||
}
|
||
|
||
.hero-trust .trust-sep {
|
||
color: var(--gold);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.proof {
|
||
padding: 0 0 92px;
|
||
margin-top: 0;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.proof-shell {
|
||
padding: 30px;
|
||
border-radius: 0;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(62, 39, 35, 0.97),
|
||
rgba(93, 64, 55, 0.96)
|
||
);
|
||
border: 1px solid rgba(251, 140, 0, 0.18);
|
||
box-shadow: 0 26px 80px rgba(62, 39, 35, 0.24);
|
||
}
|
||
|
||
.proof-grid,
|
||
.news-grid,
|
||
.custom-grid,
|
||
.pricing-grid,
|
||
.verticals-grid,
|
||
.story-grid,
|
||
.footer-top {
|
||
display: grid;
|
||
gap: 18px;
|
||
}
|
||
|
||
.proof-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.proof-card {
|
||
padding: 24px 18px;
|
||
border-radius: 24px;
|
||
background: rgba(255, 243, 224, 0.06);
|
||
border: 1px solid rgba(255, 243, 224, 0.08);
|
||
text-align: center;
|
||
}
|
||
|
||
.proof-card p {
|
||
font-size: 0.84rem;
|
||
color: rgba(255, 243, 224, 0.78);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.proof-card .proof-value {
|
||
font-size: 2.8rem;
|
||
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: 12px;
|
||
}
|
||
|
||
section {
|
||
padding: 96px 8vw;
|
||
}
|
||
|
||
#verticals {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(232, 224, 218, 0.7),
|
||
rgba(239, 235, 233, 0)
|
||
);
|
||
}
|
||
|
||
#pricing {
|
||
background: var(--surf1);
|
||
}
|
||
|
||
#customization {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(239, 235, 233, 0),
|
||
rgba(232, 224, 218, 0.58)
|
||
);
|
||
}
|
||
|
||
.section-head {
|
||
display: block;
|
||
margin-bottom: 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(2.1rem, 5vw, 4rem);
|
||
margin-top: 16px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
max-width: 80%;
|
||
}
|
||
|
||
.section-sub {
|
||
font-size: 0.96rem;
|
||
line-height: 1.75;
|
||
max-width: 62ch;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.verticals-grid {
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
}
|
||
|
||
.vertical-card {
|
||
position: relative;
|
||
min-height: 420px;
|
||
border-radius: 26px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
color: var(--card);
|
||
box-shadow: 0 24px 70px rgba(62, 39, 35, 0.14);
|
||
background: var(--card);
|
||
}
|
||
|
||
.vertical-card::before {
|
||
display: none;
|
||
}
|
||
|
||
.vertical-card > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.vertical-card img {
|
||
position: static;
|
||
width: 100%;
|
||
height: 210px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.vertical-card-body {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
background: var(--lift);
|
||
}
|
||
|
||
.vertical-tag {
|
||
display: inline-flex;
|
||
align-self: flex-start;
|
||
padding: 7px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(230, 81, 0, 0.12);
|
||
border: 1px solid rgba(230, 81, 0, 0.18);
|
||
font-size: 0.64rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
margin-bottom: 14px;
|
||
color: var(--gold);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.vertical-name,
|
||
.news-title,
|
||
.pricing-plan,
|
||
.custom-title,
|
||
.footer-logo {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
}
|
||
|
||
.vertical-name {
|
||
font-size: 1.52rem;
|
||
line-height: 1.1;
|
||
margin-bottom: 10px;
|
||
color: var(--white);
|
||
}
|
||
|
||
.vertical-desc {
|
||
font-size: 0.88rem;
|
||
color: var(--silver);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.vertical-link,
|
||
.story-link,
|
||
.custom-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
align-self: flex-start;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--gold-hi);
|
||
}
|
||
|
||
.story-grid {
|
||
grid-template-columns: 1.05fr 0.95fr;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.story-panel {
|
||
padding: 28px;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.story-title {
|
||
font-size: clamp(2rem, 4vw, 3.4rem);
|
||
margin-bottom: 16px;
|
||
max-width: none;
|
||
}
|
||
|
||
.story-copy p {
|
||
font-size: 0.95rem;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.story-stack {
|
||
display: grid;
|
||
gap: 14px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.story-step {
|
||
display: grid;
|
||
grid-template-columns: 44px 1fr;
|
||
gap: 14px;
|
||
align-items: start;
|
||
padding: 14px;
|
||
border-radius: 18px;
|
||
background: rgba(245, 236, 228, 0.8);
|
||
border: 1px solid rgba(93, 64, 55, 0.1);
|
||
}
|
||
|
||
.story-step strong {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.1em;
|
||
color: var(--gold);
|
||
border: 1px solid rgba(230, 81, 0, 0.22);
|
||
background: rgba(255, 243, 224, 0.8);
|
||
}
|
||
|
||
.story-step span {
|
||
display: block;
|
||
font-size: 0.84rem;
|
||
color: var(--silver);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.story-card {
|
||
padding: 18px;
|
||
border-radius: 24px;
|
||
background: linear-gradient(
|
||
160deg,
|
||
rgba(245, 236, 228, 0.92),
|
||
rgba(232, 224, 218, 0.92)
|
||
);
|
||
border: 1px solid rgba(93, 64, 55, 0.1);
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.modules-card {
|
||
padding: 28px;
|
||
border-radius: 30px;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(245, 236, 228, 0.96),
|
||
rgba(255, 243, 224, 0.94)
|
||
);
|
||
border: 1px solid rgba(93, 64, 55, 0.1);
|
||
box-shadow: 0 18px 44px rgba(62, 39, 35, 0.08);
|
||
}
|
||
|
||
.modules-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: clamp(1.8rem, 4vw, 3rem);
|
||
color: var(--white);
|
||
line-height: 1.12;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.modules-sub {
|
||
color: var(--silver);
|
||
font-size: 0.95rem;
|
||
max-width: 64ch;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.modules-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px 26px;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.modules-grid ul {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.modules-grid li {
|
||
position: relative;
|
||
padding-left: 18px;
|
||
color: var(--light);
|
||
font-size: 0.88rem;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.modules-grid li::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0.58em;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo),
|
||
var(--gold),
|
||
var(--gold-hi)
|
||
);
|
||
}
|
||
|
||
.modules-note {
|
||
padding: 14px 16px;
|
||
border-radius: 18px;
|
||
background: rgba(230, 81, 0, 0.08);
|
||
border: 1px solid rgba(230, 81, 0, 0.14);
|
||
color: var(--white);
|
||
font-size: 0.84rem;
|
||
}
|
||
|
||
.story-card-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.story-chip {
|
||
display: inline-flex;
|
||
padding: 7px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(230, 81, 0, 0.12);
|
||
color: var(--gold);
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.story-metric {
|
||
text-align: right;
|
||
}
|
||
|
||
.story-metric strong {
|
||
display: block;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 2.2rem;
|
||
color: var(--white);
|
||
line-height: 1;
|
||
}
|
||
|
||
.story-metric span {
|
||
font-size: 0.76rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--grey);
|
||
}
|
||
|
||
.story-bullets {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.story-bullets li,
|
||
.pricing-features li {
|
||
position: relative;
|
||
padding-left: 18px;
|
||
color: var(--silver);
|
||
font-size: 0.86rem;
|
||
}
|
||
|
||
.story-bullets li::before,
|
||
.pricing-features li::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0.6em;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo),
|
||
var(--gold),
|
||
var(--gold-hi)
|
||
);
|
||
}
|
||
|
||
.news-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.news-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.news-search {
|
||
width: min(420px, 100%);
|
||
padding: 14px 18px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(230, 81, 0, 0.18);
|
||
background: rgba(255, 243, 224, 0.8);
|
||
color: var(--white);
|
||
font: inherit;
|
||
}
|
||
|
||
.news-search:focus {
|
||
outline: none;
|
||
border-color: var(--gold);
|
||
box-shadow: 0 0 0 3px var(--gold-glow);
|
||
}
|
||
|
||
.news-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.news-count {
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--grey);
|
||
}
|
||
|
||
.news-pager {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.news-page-btn {
|
||
padding: 12px 16px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(93, 64, 55, 0.16);
|
||
background: rgba(255, 243, 224, 0.82);
|
||
color: var(--white);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, color 0.2s, background 0.2s;
|
||
}
|
||
|
||
.news-page-btn:hover:not(:disabled) {
|
||
border-color: var(--gold);
|
||
color: var(--gold);
|
||
}
|
||
|
||
.news-page-btn:disabled {
|
||
opacity: 0.45;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.news-card {
|
||
padding: 0;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
background: var(--card);
|
||
}
|
||
|
||
.news-card-image {
|
||
width: 100%;
|
||
height: 190px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.news-card-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-height: 210px;
|
||
padding: 20px;
|
||
background: var(--lift);
|
||
}
|
||
|
||
.news-area,
|
||
.news-date,
|
||
.pricing-period,
|
||
.pricing-setup,
|
||
.footer-col h4,
|
||
.field-label,
|
||
.modal-title + p,
|
||
.footer-bottom span,
|
||
.footer-legal a {
|
||
font-size: 0.68rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.news-area,
|
||
.pricing-setup,
|
||
.footer-col h4,
|
||
.field-label {
|
||
color: var(--gold);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.news-title {
|
||
margin: 14px 0 12px;
|
||
font-size: 1.2rem;
|
||
line-height: 1.2;
|
||
color: var(--white);
|
||
}
|
||
|
||
.news-teaser {
|
||
font-size: 0.88rem;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.news-date {
|
||
color: var(--grey);
|
||
}
|
||
|
||
.news-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
align-self: flex-start;
|
||
margin-top: 18px;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.news-empty {
|
||
grid-column: 1 / -1;
|
||
padding: 24px;
|
||
border-radius: 24px;
|
||
background: rgba(255, 243, 224, 0.82);
|
||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||
color: var(--silver);
|
||
text-align: center;
|
||
}
|
||
|
||
.pricing-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
align-items: stretch;
|
||
}
|
||
|
||
.pricing-card {
|
||
padding: 26px;
|
||
border-radius: 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.pricing-card.featured {
|
||
background: rgba(245, 236, 228, 0.96);
|
||
box-shadow: 0 0 0 1px rgba(230, 81, 0, 0.24),
|
||
0 28px 70px rgba(230, 81, 0, 0.14);
|
||
}
|
||
|
||
.pricing-badge {
|
||
display: inline-flex;
|
||
align-self: flex-start;
|
||
padding: 7px 12px;
|
||
border-radius: 999px;
|
||
margin-bottom: 16px;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
color: var(--bg);
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.pricing-plan {
|
||
font-size: 1.45rem;
|
||
color: var(--white);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: 3.2rem;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.pricing-card.featured .pricing-price,
|
||
.custom-rate,
|
||
.footer-logo {
|
||
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 {
|
||
color: var(--grey);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.pricing-quote {
|
||
font-size: 0.9rem;
|
||
padding: 14px 0 16px;
|
||
border-top: 1px solid rgba(93, 64, 55, 0.1);
|
||
border-bottom: 1px solid rgba(93, 64, 55, 0.1);
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.pricing-features {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-bottom: 24px;
|
||
flex: 1;
|
||
}
|
||
|
||
.pricing-cta {
|
||
width: 100%;
|
||
}
|
||
|
||
.pricing-card:not(.featured) .pricing-cta {
|
||
background: transparent;
|
||
color: var(--gold);
|
||
border: 1px solid var(--gold);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.pricing-card:not(.featured) .pricing-cta:hover {
|
||
background: var(--gold);
|
||
color: var(--card);
|
||
}
|
||
|
||
.custom-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.custom-card {
|
||
padding: 26px;
|
||
border-radius: 28px;
|
||
}
|
||
|
||
.custom-icon {
|
||
width: 54px;
|
||
height: 54px;
|
||
border-radius: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(230, 81, 0, 0.1);
|
||
color: var(--gold);
|
||
font-size: 1.4rem;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.custom-title {
|
||
font-size: 1.45rem;
|
||
color: var(--white);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.custom-body {
|
||
font-size: 0.9rem;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.custom-rate {
|
||
display: inline-block;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.custom-link,
|
||
.story-link {
|
||
padding: 12px 16px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(93, 64, 55, 0.16);
|
||
color: var(--white);
|
||
}
|
||
|
||
footer {
|
||
background: rgba(255, 243, 224, 0.94);
|
||
border-top: 1px solid var(--border);
|
||
padding: 84px 8vw 36px;
|
||
}
|
||
|
||
.footer-top {
|
||
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
|
||
margin-bottom: 30px;
|
||
align-items: start;
|
||
}
|
||
|
||
.footer-brand p,
|
||
.footer-col a,
|
||
.footer-bottom span,
|
||
.footer-legal a {
|
||
color: var(--silver);
|
||
}
|
||
|
||
.footer-logo {
|
||
display: inline-block;
|
||
font-size: 1.6rem;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.footer-logo img {
|
||
height: 34px;
|
||
width: auto;
|
||
}
|
||
|
||
.footer-contact-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.footer-contact-form textarea,
|
||
.footer-contact-form input {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border-radius: 24px;
|
||
border: 1px solid var(--border);
|
||
background: rgba(93, 64, 55, 0.06);
|
||
color: var(--white);
|
||
font: inherit;
|
||
}
|
||
|
||
.footer-contact-form textarea {
|
||
min-height: 110px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.footer-contact-shell {
|
||
max-width: 420px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-contact-shell h4 {
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.footer-contact-input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 48px;
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
background: rgba(93, 64, 55, 0.06);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.footer-contact-input-row input {
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
height: 100%;
|
||
}
|
||
|
||
.footer-contact-send {
|
||
height: 100%;
|
||
min-height: 48px;
|
||
padding: 0 18px;
|
||
border: none;
|
||
border-left: 1px solid var(--border);
|
||
background: transparent;
|
||
color: var(--gold);
|
||
cursor: pointer;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.footer-contact-message-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.footer-contact-message-wrap textarea {
|
||
padding-right: 64px;
|
||
}
|
||
|
||
.footer-contact-message-wrap .footer-contact-send {
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
min-height: 40px;
|
||
height: 40px;
|
||
width: 40px;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
border-left: none;
|
||
background: rgba(255, 243, 224, 0.9);
|
||
}
|
||
|
||
.footer-contact-form input::placeholder,
|
||
.footer-contact-form textarea::placeholder {
|
||
color: var(--grey);
|
||
}
|
||
|
||
.footer-contact-form input:focus,
|
||
.footer-contact-form textarea:focus {
|
||
outline: none;
|
||
border-color: var(--gold);
|
||
box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.12);
|
||
}
|
||
|
||
.footer-contact-status {
|
||
color: var(--grey);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.footer-col ul {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-col a,
|
||
.footer-bottom span,
|
||
.footer-legal a {
|
||
font-size: 0.84rem;
|
||
}
|
||
|
||
.footer-col a:hover,
|
||
.footer-legal a:hover {
|
||
color: var(--gold-hi);
|
||
}
|
||
|
||
.footer-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
padding-top: 24px;
|
||
border-top: 1px solid rgba(161, 136, 127, 0.18);
|
||
}
|
||
|
||
.footer-legal {
|
||
display: flex;
|
||
gap: 18px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
#modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9000;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
background: rgba(62, 39, 35, 0.84);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
}
|
||
|
||
#modal-box {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 640px;
|
||
padding: 44px;
|
||
background: var(--card);
|
||
border-radius: 28px;
|
||
border: 1px solid rgba(230, 81, 0, 0.24);
|
||
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
#modal-close {
|
||
position: absolute;
|
||
top: 18px;
|
||
right: 18px;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
color: var(--grey);
|
||
background: rgba(93, 64, 55, 0.05);
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.modal-subtitle {
|
||
font-size: 0.9rem;
|
||
margin-bottom: 26px;
|
||
}
|
||
|
||
.modal-field-group {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.modal-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 0 16px;
|
||
}
|
||
|
||
.modal-grid .modal-field-group.full {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.field-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.modal-field {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border-radius: 16px;
|
||
background: rgba(93, 64, 55, 0.05);
|
||
border: 1px solid rgba(230, 81, 0, 0.18);
|
||
color: var(--white);
|
||
}
|
||
|
||
.modal-field:focus {
|
||
border-color: var(--gold);
|
||
box-shadow: 0 0 0 3px var(--gold-glow);
|
||
}
|
||
|
||
select.modal-field {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
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 16px center;
|
||
padding-right: 42px;
|
||
}
|
||
|
||
.modal-submit {
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.modal-submit:disabled {
|
||
opacity: 0.56;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
#modal-confirm {
|
||
display: none;
|
||
text-align: center;
|
||
padding-top: 8px;
|
||
}
|
||
|
||
#modal-confirm .confirm-title {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.6rem;
|
||
color: var(--gold-hi);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
@media (max-width: 1180px) {
|
||
.story-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.verticals-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.news-grid,
|
||
.proof-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.pricing-grid,
|
||
.custom-grid,
|
||
.footer-top,
|
||
.modules-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-contact-shell {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 860px) {
|
||
nav {
|
||
padding: 0 5vw;
|
||
}
|
||
|
||
.nav-links,
|
||
.nav-chat {
|
||
display: none;
|
||
}
|
||
|
||
.nav-cta-book {
|
||
display: none;
|
||
}
|
||
|
||
.nav-cta-sm {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.hero,
|
||
section,
|
||
footer {
|
||
padding-left: 5vw;
|
||
padding-right: 5vw;
|
||
}
|
||
|
||
.proof {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.hero {
|
||
min-height: auto;
|
||
padding-top: 32px;
|
||
padding-bottom: 72px;
|
||
}
|
||
|
||
.hero h1 {
|
||
max-width: 12ch;
|
||
}
|
||
|
||
.hero-trust,
|
||
.verticals-grid,
|
||
.news-grid,
|
||
.proof-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
#modal-box {
|
||
padding: 34px 22px;
|
||
}
|
||
|
||
.modal-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero h1 {
|
||
font-size: 2.8rem;
|
||
}
|
||
|
||
.modal-title,
|
||
.section-title,
|
||
.story-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.hero-trust {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav>
|
||
<a class="nav-logo" href="#home"
|
||
><img src="img/logo.svg" alt="my-biz.app"
|
||
/></a>
|
||
<div class="nav-links">
|
||
<a href="#verticals">Solutions</a>
|
||
<a href="#story">How It Works</a>
|
||
<a href="#pricing">Pricing</a>
|
||
<a href="#customization">Customization</a>
|
||
</div>
|
||
<div class="nav-right">
|
||
<a class="nav-cta-book" href="#story">Book Meeting</a>
|
||
<div class="nav-chat" id="nav-chat">
|
||
<div class="nav-chat-panel 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>
|
||
<div class="nav-chat-main">
|
||
<button
|
||
class="nav-chat-toggle"
|
||
id="nav-chat-toggle"
|
||
aria-label="Toggle chat history"
|
||
>
|
||
💬
|
||
</button>
|
||
<input
|
||
type="text"
|
||
class="nav-chat-input chat-input-field"
|
||
id="nav-chat-input"
|
||
placeholder="Ask your sales agent"
|
||
aria-label="Ask your AI sales agent"
|
||
/>
|
||
<button
|
||
class="nav-chat-send chat-input-send"
|
||
id="nav-chat-send"
|
||
aria-label="Send message"
|
||
>
|
||
➤
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
|
||
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero" id="home">
|
||
<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.35"
|
||
data-mf-parallax-speed-tablet="0"
|
||
data-mf-parallax-speed-mobile="0"
|
||
/>
|
||
</div>
|
||
<div class="hero-shell">
|
||
<div class="hero-copy">
|
||
<h1
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="800"
|
||
data-mf-animation-delay="80"
|
||
data-mf-animation-distance="30"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Your business should feel
|
||
<span class="accent">beautifully under control.</span>
|
||
</h1>
|
||
<p
|
||
class="hero-sub"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-delay="160"
|
||
data-mf-animation-distance="26"
|
||
data-mf-animation-once="true"
|
||
>
|
||
my-biz.app replaces scattered tools, duplicate data, and
|
||
late-night admin work with one calm operating system for
|
||
invoicing, CRM, HR, inventory, reporting, and the daily
|
||
realities of real teams.
|
||
</p>
|
||
<p
|
||
class="hero-note"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="650"
|
||
data-mf-animation-delay="240"
|
||
data-mf-animation-distance="22"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<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 spreadsheet drift.</span
|
||
><span>No mystery workflows.</span
|
||
><span>No expensive lock-in.</span></span
|
||
>
|
||
</p>
|
||
<div
|
||
class="hero-trust"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="90"
|
||
data-mf-stagger-duration="620"
|
||
data-mf-stagger-distance="24"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="trust-card">
|
||
<strong>Built on Odoo Community Edition</strong>
|
||
</div>
|
||
<span class="trust-sep">·</span>
|
||
<div class="trust-card">
|
||
<strong>From $214 / year</strong>
|
||
</div>
|
||
<span class="trust-sep">·</span>
|
||
<div class="trust-card">
|
||
<strong>Own your stack</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="proof" aria-label="Proof points">
|
||
<div class="proof-shell">
|
||
<div
|
||
class="proof-grid"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="90"
|
||
data-mf-stagger-duration="620"
|
||
data-mf-stagger-distance="24"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="proof-card">
|
||
<span class="proof-value">6</span>
|
||
<p>my-biz.app server locations</p>
|
||
</div>
|
||
<div class="proof-card">
|
||
<span class="proof-value">60</span>
|
||
<p>Odoo CE core modules</p>
|
||
</div>
|
||
<div class="proof-card">
|
||
<span class="proof-value">1669</span>
|
||
<p>OCA modules on the app store</p>
|
||
</div>
|
||
<div class="proof-card">
|
||
<span class="proof-value">> 3031</span>
|
||
<p>Odoo developers on Upwork</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="verticals">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="750"
|
||
data-mf-animation-delay="90"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Pick the vertical that fits your business best.
|
||
</h2>
|
||
<p class="section-sub">
|
||
Explore the focused landing page for your industry, book a meeting, or start a free trial when you are ready.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="verticals-grid"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="80"
|
||
data-mf-stagger-duration="650"
|
||
data-mf-stagger-distance="28"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<a
|
||
class="vertical-card"
|
||
href="https://ngo.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=900&q=80&auto=format&fit=crop"
|
||
alt="NGO and non-profit team collaborating"
|
||
/>
|
||
<div class="vertical-card-body">
|
||
<div>
|
||
<div class="vertical-tag">NGO & Non-Profit</div>
|
||
<div class="vertical-name">Donor trust, grant clarity, cleaner reporting.</div>
|
||
<div class="vertical-desc">
|
||
Connect programs, budgets, donor records, and impact stories
|
||
without living in exports.
|
||
</div>
|
||
</div>
|
||
<span class="vertical-link">Visit NGO page →</span>
|
||
</div>
|
||
</a>
|
||
<a
|
||
class="vertical-card"
|
||
href="https://startups.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=900&q=80&auto=format&fit=crop"
|
||
alt="Startup team in a strategy meeting"
|
||
/>
|
||
<div class="vertical-card-body">
|
||
<div>
|
||
<div class="vertical-tag">Startups</div>
|
||
<div class="vertical-name">Run faster without creating back-office debt.</div>
|
||
<div class="vertical-desc">
|
||
Finance, CRM, approvals, and reporting that can survive due diligence.
|
||
</div>
|
||
</div>
|
||
<span class="vertical-link">Visit startup page →</span>
|
||
</div>
|
||
</a>
|
||
<a
|
||
class="vertical-card"
|
||
href="https://manufacturing.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?w=900&q=80&auto=format&fit=crop"
|
||
alt="Manufacturing floor with industrial workflow"
|
||
/>
|
||
<div class="vertical-card-body">
|
||
<div>
|
||
<div class="vertical-tag">Manufacturing</div>
|
||
<div class="vertical-name">See margin, stock, and production in one frame.</div>
|
||
<div class="vertical-desc">
|
||
Bring MRP, inventory, quality, and costing together so decisions stop lagging.
|
||
</div>
|
||
</div>
|
||
<span class="vertical-link">Visit manufacturing page →</span>
|
||
</div>
|
||
</a>
|
||
<a
|
||
class="vertical-card"
|
||
href="https://restaurants.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=900&q=80&auto=format&fit=crop"
|
||
alt="Restaurant operations with service team"
|
||
/>
|
||
<div class="vertical-card-body">
|
||
<div>
|
||
<div class="vertical-tag">Restaurants</div>
|
||
<div class="vertical-name">Control food cost, payroll, and service pressure.</div>
|
||
<div class="vertical-desc">
|
||
Link POS activity to purchasing, stock, and staffing before leakage becomes normal.
|
||
</div>
|
||
</div>
|
||
<span class="vertical-link">Visit restaurant page →</span>
|
||
</div>
|
||
</a>
|
||
<a
|
||
class="vertical-card"
|
||
href="https://agentic.my-biz.app"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&q=80&auto=format&fit=crop"
|
||
alt="AI and automation themed workspace"
|
||
/>
|
||
<div class="vertical-card-body">
|
||
<div>
|
||
<div class="vertical-tag">Agentic Businesses</div>
|
||
<div class="vertical-name">Give automation a system it can actually trust.</div>
|
||
<div class="vertical-desc">
|
||
Agents perform better when the business data behind them is structured and current.
|
||
</div>
|
||
</div>
|
||
<span class="vertical-link">Visit agentic page →</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="story">
|
||
<div class="story-grid">
|
||
<div
|
||
class="story-panel"
|
||
data-mf-animation="fade-right"
|
||
data-mf-animation-duration="750"
|
||
data-mf-animation-distance="28"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<h2 class="story-title">We provide a hustle free backoffice plattform for you to build your business upon.</h2>
|
||
<div class="story-copy">
|
||
<p>
|
||
Start with a stable foundation, keep the daily work simple, and build on an ecosystem that stays open as your business grows.
|
||
</p>
|
||
</div>
|
||
<div class="story-stack">
|
||
<div class="story-step">
|
||
<strong>01</strong>
|
||
<div>
|
||
<b>Hustle free service "plug and play"</b>
|
||
<span>You focus on your business, we take care of the rest.</span>
|
||
</div>
|
||
</div>
|
||
<div class="story-step">
|
||
<strong>02</strong>
|
||
<div>
|
||
<b>Easy to use</b>
|
||
<span>There are many YouTube videos to help your team learn fast.</span>
|
||
</div>
|
||
</div>
|
||
<div class="story-step">
|
||
<strong>03</strong>
|
||
<div>
|
||
<b>Best ecosystem</b>
|
||
<span>Developers all over the world can extend and support your setup.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-actions" style="margin-top: auto; justify-content: flex-end;">
|
||
<a class="btn-secondary" href="#pricing">Book Meeting</a>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="story-panel"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="750"
|
||
data-mf-animation-delay="120"
|
||
data-mf-animation-distance="28"
|
||
data-mf-animation-once="true"
|
||
>
|
||
<div class="modules-card">
|
||
<div class="story-chip">Fully integrated modules</div>
|
||
<h3 class="modules-title">
|
||
Our solution provides fully integrated modules across the business.
|
||
</h3>
|
||
<p class="modules-sub">
|
||
Start with the modules you need today and expand later without breaking the flow between teams, data, and daily work.
|
||
</p>
|
||
<div class="modules-grid">
|
||
<ul>
|
||
<li>Sales</li>
|
||
<li>Restaurant</li>
|
||
<li>Invoicing</li>
|
||
<li>CRM</li>
|
||
<li>Website</li>
|
||
<li>Inventory</li>
|
||
<li>Purchase</li>
|
||
<li>Point of Sale</li>
|
||
<li>Project</li>
|
||
<li>eCommerce</li>
|
||
<li>Manufacturing</li>
|
||
<li>Email Marketing</li>
|
||
</ul>
|
||
<ul>
|
||
<li>Timesheets</li>
|
||
<li>Expenses</li>
|
||
<li>Risk Management</li>
|
||
<li>Time Off</li>
|
||
<li>Recruitment</li>
|
||
<li>Employees</li>
|
||
<li>Data Recycle</li>
|
||
<li>Maintenance</li>
|
||
<li>Marketing Card</li>
|
||
<li>eLearning</li>
|
||
<li>Events</li>
|
||
<li>Discuss</li>
|
||
</ul>
|
||
<ul>
|
||
<li>Contacts</li>
|
||
<li>Calendar</li>
|
||
<li>Fleet</li>
|
||
<li>Live Chat</li>
|
||
<li>Surveys</li>
|
||
<li>Repairs</li>
|
||
<li>Attendances</li>
|
||
<li>SMS Marketing</li>
|
||
<li>To-Do</li>
|
||
<li>Skills Management</li>
|
||
<li>Lunch</li>
|
||
<li>Online Jobs</li>
|
||
</ul>
|
||
</div>
|
||
<div class="modules-note">
|
||
In Odoo Community Edition there is no user limitation.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="news">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="760"
|
||
data-mf-animation-delay="90"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Live from the field.
|
||
</h2>
|
||
<p class="section-sub">
|
||
See what is moving our Guild Counsel.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="news-toolbar">
|
||
<input
|
||
type="search"
|
||
id="news-search"
|
||
class="news-search"
|
||
placeholder="Search headlines, verticals, and summaries"
|
||
aria-label="Search blog posts"
|
||
/>
|
||
<div class="news-meta">
|
||
<span class="news-count" id="news-count">Loading posts...</span>
|
||
<div class="news-pager">
|
||
<button type="button" class="news-page-btn" id="news-prev">Last Posts</button>
|
||
<button type="button" class="news-page-btn" id="news-next">Next Posts</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="news-grid"
|
||
id="news-grid"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="100"
|
||
data-mf-stagger-duration="650"
|
||
data-mf-stagger-distance="28"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="news-empty">Loading posts...</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="pricing">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="760"
|
||
data-mf-animation-delay="90"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>
|
||
Start small, grow deliberately, keep control.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div class="pricing-grid">
|
||
<div
|
||
class="pricing-card"
|
||
data-mf-animation="fade-right"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-distance="28"
|
||
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">
|
||
For lean teams that need the chaos to stop without buying a giant project.
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>Core back-office modules</li>
|
||
<li>Invoicing and basic accounting</li>
|
||
<li>Up to 3 users</li>
|
||
<li>Standard onboarding</li>
|
||
<li>Community support</li>
|
||
</ul>
|
||
<a class="pricing-cta open-modal" data-plan="Side Hustle" href="#">Free Trial</a>
|
||
</div>
|
||
<div
|
||
class="pricing-card featured"
|
||
data-mf-animation="zoom-in"
|
||
data-mf-animation-duration="760"
|
||
data-mf-animation-delay="90"
|
||
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">
|
||
The best balance for teams that want industry-specific workflows and room to scale.
|
||
</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 and chat support</li>
|
||
</ul>
|
||
<a class="pricing-cta open-modal" data-plan="On the Rise" href="#">Free Trial</a>
|
||
</div>
|
||
<div
|
||
class="pricing-card"
|
||
data-mf-animation="fade-left"
|
||
data-mf-animation-duration="700"
|
||
data-mf-animation-distance="28"
|
||
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">
|
||
For buyers who want their own infrastructure, full sovereignty, and zero platform dependence.
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>Everything in On the Rise</li>
|
||
<li>Self-hosted on your server or VPS</li>
|
||
<li>Installation and maintenance by our team</li>
|
||
<li>Full ownership of your code and data</li>
|
||
<li>Unlimited users</li>
|
||
<li>Dedicated support line</li>
|
||
</ul>
|
||
<a class="pricing-cta open-modal" href="#">Talk through hosting</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="customization">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2
|
||
class="section-title"
|
||
data-mf-animation="fade-up"
|
||
data-mf-animation-duration="760"
|
||
data-mf-animation-delay="90"
|
||
data-mf-animation-distance="24"
|
||
data-mf-animation-once="true"
|
||
>
|
||
The stack stays flexible after launch.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="custom-grid"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="110"
|
||
data-mf-stagger-duration="650"
|
||
data-mf-stagger-distance="26"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="custom-card">
|
||
<div class="custom-icon">🌐</div>
|
||
<div class="custom-title">Hire any Odoo developer later</div>
|
||
<p class="custom-body">
|
||
Because this runs on Odoo Community Edition, your future is not tied to one vendor. You can bring in freelancers, agencies, or internal developers when the time is right.
|
||
</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">
|
||
<div class="custom-icon">🔧</div>
|
||
<div class="custom-title">Use our team when speed matters</div>
|
||
<p class="custom-body">
|
||
Need custom modules, integrations, migrations, or reporting? Work with the people who already know the stack and can ship practical improvements without drama.
|
||
</p>
|
||
<a class="custom-link open-modal" href="#">Request scoped help →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div
|
||
class="footer-top"
|
||
data-mf-stagger-animation="fade-up"
|
||
data-mf-stagger-gap="70"
|
||
data-mf-stagger-duration="620"
|
||
data-mf-stagger-distance="24"
|
||
data-mf-stagger-once="true"
|
||
>
|
||
<div class="footer-brand">
|
||
<a class="footer-logo" href="#home"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
||
<p>
|
||
A practical all-in-one back-office platform built to help businesses run with more clarity, less friction, and room to grow over time.
|
||
</p>
|
||
</div>
|
||
<div class="footer-contact-shell">
|
||
<form class="footer-contact-form" id="footer-contact-form">
|
||
<input type="hidden" name="source" value="my-biz.app" />
|
||
<div class="footer-contact-input-row">
|
||
<input type="email" name="email" placeholder="Email" required />
|
||
</div>
|
||
<div class="footer-contact-message-wrap">
|
||
<textarea name="message" placeholder="Your message" required></textarea>
|
||
<button type="submit" class="footer-contact-send" aria-label="Send">➤</button>
|
||
</div>
|
||
<div class="footer-contact-status" id="footer-contact-status"></div>
|
||
</form>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Product</h4>
|
||
<ul>
|
||
<li><a href="#verticals">Solutions</a></li>
|
||
<li><a href="#story">How It Works</a></li>
|
||
<li><a href="#pricing">Pricing</a></li>
|
||
<li><a href="#customization">Customization</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>About</h4>
|
||
<ul>
|
||
<li><a href="about.html#about-us">About Us</a></li>
|
||
<li><a href="about.html#faq">FAQ</a></li>
|
||
<li><a href="about.html#careers">Careers</a></li>
|
||
<li><a href="about.html#partners">Partners</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 my-biz.app · All rights reserved.</span>
|
||
<div class="footer-legal">
|
||
<a href="legal.html#privacy">Privacy</a>
|
||
<a href="legal.html#terms">Terms</a>
|
||
<a href="legal.html#imprint">Imprint</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<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 shape the
|
||
setup around your industry and stage.
|
||
</p>
|
||
<form id="trial-form" novalidate>
|
||
<div class="modal-grid">
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-company">Company</label>
|
||
<input
|
||
type="text"
|
||
id="modal-company"
|
||
name="company"
|
||
class="modal-field"
|
||
placeholder="Company name"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-name">Full Name</label>
|
||
<input
|
||
type="text"
|
||
id="modal-name"
|
||
name="name"
|
||
class="modal-field"
|
||
placeholder="Jane Smith"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group full">
|
||
<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 full">
|
||
<label class="field-label" for="modal-street">Street Address</label>
|
||
<input
|
||
type="text"
|
||
id="modal-street"
|
||
name="street"
|
||
class="modal-field"
|
||
placeholder="Street and number"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-postal">Postal Code</label>
|
||
<input
|
||
type="text"
|
||
id="modal-postal"
|
||
name="postal_code"
|
||
class="modal-field"
|
||
placeholder="Postal code"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-city">City</label>
|
||
<input
|
||
type="text"
|
||
id="modal-city"
|
||
name="city"
|
||
class="modal-field"
|
||
placeholder="City"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-country">Country</label>
|
||
<input
|
||
type="text"
|
||
id="modal-country"
|
||
name="country"
|
||
class="modal-field"
|
||
placeholder="Country"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="modal-field-group">
|
||
<label class="field-label" for="modal-location">Server Location</label>
|
||
<select
|
||
id="modal-location"
|
||
name="server_location"
|
||
class="modal-field"
|
||
required
|
||
>
|
||
<option value="">Select your server location</option>
|
||
<option value="Boston, US">🇺🇸 Boston</option>
|
||
<option value="Manchester, UK">🇬🇧 Manchester</option>
|
||
<option value="Mumbai, IN">🇮🇳 Mumbai</option>
|
||
<option value="Sao Paulo, BR">🇧🇷 São Paulo</option>
|
||
<option value="Meppel, NL">🇳🇱 Meppel</option>
|
||
<option value="Sydney, AU">🇦🇺 Sydney</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<input type="hidden" id="modal-product" name="product" value="odoo_19" />
|
||
<input type="hidden" id="modal-plan" name="plan" value="General Free Trial" />
|
||
<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.
|
||
</p>
|
||
<button id="modal-confirm-close" class="modal-submit">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
var WEBHOOK =
|
||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/41f1356d-2b0b-443c-b381-37195f547198";
|
||
var form = document.getElementById("footer-contact-form");
|
||
var status = document.getElementById("footer-contact-status");
|
||
if (!form) return;
|
||
|
||
form.addEventListener("submit", function (e) {
|
||
e.preventDefault();
|
||
var button = form.querySelector("button[type='submit']");
|
||
status.textContent = "Sending...";
|
||
button.disabled = true;
|
||
fetch(WEBHOOK, {
|
||
method: "POST",
|
||
body: new FormData(form),
|
||
})
|
||
.then(function () {
|
||
status.textContent = "Message received. We will get back to you soon.";
|
||
form.reset();
|
||
})
|
||
.catch(function () {
|
||
status.textContent = "Message received. We will get back to you soon.";
|
||
form.reset();
|
||
})
|
||
.finally(function () {
|
||
button.disabled = false;
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<script>
|
||
(function () {
|
||
var POSTS_URL = "posts.json";
|
||
var PAGE_SIZE = 8;
|
||
var grid = document.getElementById("news-grid");
|
||
var search = document.getElementById("news-search");
|
||
var prevBtn = document.getElementById("news-prev");
|
||
var nextBtn = document.getElementById("news-next");
|
||
var count = document.getElementById("news-count");
|
||
var allPosts = [];
|
||
var filteredPosts = [];
|
||
var currentPage = 0;
|
||
|
||
function formatDate(value) {
|
||
var date = new Date(value);
|
||
if (isNaN(date.getTime())) return value;
|
||
return date.toLocaleDateString("en-US", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
});
|
||
}
|
||
|
||
function postMarkup(post) {
|
||
return [
|
||
'<a class="news-card" href="' + post.link + '">',
|
||
'<img class="news-card-image" src="' + post.image + '" alt="' + post.headline.replace(/"/g, """) + '">',
|
||
'<div class="news-card-body">',
|
||
'<div>',
|
||
'<div class="news-area">' + post.vertical + '</div>',
|
||
'<h3 class="news-title">' + post.headline + '</h3>',
|
||
'<p class="news-teaser">' + post.shortText + '</p>',
|
||
'<span class="news-date">' + formatDate(post.date) + '</span>',
|
||
'</div>',
|
||
'<span class="news-link">Read article →</span>',
|
||
'</div>',
|
||
'</a>',
|
||
].join("");
|
||
}
|
||
|
||
function emptyMarkup(text) {
|
||
return '<div class="news-empty">' + text + '</div>';
|
||
}
|
||
|
||
function updateCount() {
|
||
var total = filteredPosts.length;
|
||
if (!total) {
|
||
count.textContent = "0 posts";
|
||
return;
|
||
}
|
||
var start = currentPage * PAGE_SIZE + 1;
|
||
var end = Math.min(start + PAGE_SIZE - 1, total);
|
||
count.textContent = start + "-" + end + " of " + total + " posts";
|
||
}
|
||
|
||
function render() {
|
||
var start = currentPage * PAGE_SIZE;
|
||
var pagePosts = filteredPosts.slice(start, start + PAGE_SIZE);
|
||
if (!pagePosts.length) {
|
||
grid.innerHTML = emptyMarkup("No posts match your search.");
|
||
} else {
|
||
grid.innerHTML = pagePosts.map(postMarkup).join("");
|
||
}
|
||
prevBtn.disabled = currentPage === 0;
|
||
nextBtn.disabled = start + PAGE_SIZE >= filteredPosts.length;
|
||
updateCount();
|
||
}
|
||
|
||
function applyFilter() {
|
||
var term = (search.value || "").trim().toLowerCase();
|
||
filteredPosts = allPosts.filter(function (post) {
|
||
if (!term) return true;
|
||
var haystack = [post.headline, post.vertical, post.shortText]
|
||
.join(" ")
|
||
.toLowerCase();
|
||
return haystack.indexOf(term) !== -1;
|
||
});
|
||
currentPage = 0;
|
||
render();
|
||
}
|
||
|
||
prevBtn.addEventListener("click", function () {
|
||
if (currentPage === 0) return;
|
||
currentPage -= 1;
|
||
render();
|
||
});
|
||
|
||
nextBtn.addEventListener("click", function () {
|
||
if ((currentPage + 1) * PAGE_SIZE >= filteredPosts.length) return;
|
||
currentPage += 1;
|
||
render();
|
||
});
|
||
|
||
search.addEventListener("input", applyFilter);
|
||
|
||
fetch(POSTS_URL)
|
||
.then(function (response) {
|
||
return response.json();
|
||
})
|
||
.then(function (posts) {
|
||
allPosts = Array.isArray(posts) ? posts : [];
|
||
filteredPosts = allPosts.slice();
|
||
render();
|
||
})
|
||
.catch(function () {
|
||
grid.innerHTML = emptyMarkup("Posts could not be loaded right now.");
|
||
count.textContent = "Posts unavailable";
|
||
prevBtn.disabled = true;
|
||
nextBtn.disabled = true;
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<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 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);
|
||
},
|
||
);
|
||
})();
|
||
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 busy = false;
|
||
var greeted = false;
|
||
|
||
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;
|
||
}
|
||
|
||
function openPanel() {
|
||
var navChat = document.getElementById("nav-chat");
|
||
if (navChat) navChat.classList.add("open");
|
||
panel.classList.add("open");
|
||
panel.setAttribute("aria-hidden", "false");
|
||
if (!greeted) {
|
||
greeted = true;
|
||
appendMsg(
|
||
"agent",
|
||
"Hi! I’m your Sales Agent. Ask me about plans, setup, customization, or pricing.",
|
||
);
|
||
}
|
||
panel.offsetHeight;
|
||
scrollLog();
|
||
}
|
||
|
||
function closePanel() {
|
||
var navChat = document.getElementById("nav-chat");
|
||
if (navChat) navChat.classList.remove("open");
|
||
panel.classList.remove("open");
|
||
panel.setAttribute("aria-hidden", "true");
|
||
}
|
||
|
||
function togglePanel() {
|
||
if (panel.classList.contains("open")) closePanel();
|
||
else openPanel();
|
||
}
|
||
|
||
window._mbs = {
|
||
appendMsg: appendMsg,
|
||
openSilent: function () {
|
||
greeted = true;
|
||
var navChat = document.getElementById("nav-chat");
|
||
if (navChat) navChat.classList.add("open");
|
||
panel.classList.add("open");
|
||
panel.setAttribute("aria-hidden", "false");
|
||
panel.offsetHeight;
|
||
scrollLog();
|
||
},
|
||
};
|
||
|
||
function send(text) {
|
||
text = (text || "").trim();
|
||
if (!text || busy) return;
|
||
busy = true;
|
||
|
||
appendMsg("user", text);
|
||
openPanel();
|
||
navInput.value = "";
|
||
|
||
var thinkEl = appendMsg("agent", "...");
|
||
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);
|
||
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;
|
||
});
|
||
}
|
||
|
||
if (toggleBtn) {
|
||
toggleBtn.addEventListener("click", function (e) {
|
||
e.stopPropagation();
|
||
togglePanel();
|
||
});
|
||
}
|
||
if (closeBtn) closeBtn.addEventListener("click", closePanel);
|
||
if (navSend) navSend.addEventListener("click", function () {
|
||
send(navInput.value);
|
||
});
|
||
if (navInput) {
|
||
navInput.addEventListener("keydown", function (e) {
|
||
if (e.key === "Enter") send(navInput.value);
|
||
});
|
||
}
|
||
|
||
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();
|
||
}
|
||
});
|
||
|
||
document.addEventListener("keydown", function (e) {
|
||
if (e.key === "Escape" && panel.classList.contains("open")) {
|
||
closePanel();
|
||
}
|
||
});
|
||
|
||
window.addEventListener(
|
||
"scroll",
|
||
function () {
|
||
if (panel.classList.contains("open")) closePanel();
|
||
},
|
||
{ passive: true },
|
||
);
|
||
})();
|
||
</script>
|
||
|
||
<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;
|
||
|
||
function visibleSection() {
|
||
var els = [].slice.call(
|
||
document.querySelectorAll("section[id], footer"),
|
||
);
|
||
var mid = window.innerHeight / 2;
|
||
var best = null;
|
||
var 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: "Solutions section",
|
||
story: "How it works section",
|
||
news: "Insights section",
|
||
pricing: "Pricing section",
|
||
customization: "Customization section",
|
||
};
|
||
return names[best.id] || best.id || "footer";
|
||
}
|
||
|
||
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));
|
||
}
|
||
|
||
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";
|
||
}
|
||
|
||
function r(label, value) {
|
||
var k = (label + ": ").slice(0, 14);
|
||
return k + " " + value;
|
||
}
|
||
|
||
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");
|
||
}
|
||
|
||
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 () {});
|
||
}
|
||
|
||
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 modalBox = document.getElementById("modal-box");
|
||
var form = document.getElementById("trial-form");
|
||
var confirmDiv = document.getElementById("modal-confirm");
|
||
var planField = document.getElementById("modal-plan");
|
||
var productField = document.getElementById("modal-product");
|
||
var defaultProduct = productField.value;
|
||
|
||
function openModal(plan) {
|
||
planField.value = plan || "General Free Trial";
|
||
productField.value = plan || defaultProduct;
|
||
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();
|
||
planField.value = "General Free Trial";
|
||
productField.value = defaultProduct;
|
||
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.querySelectorAll(".open-modal").forEach(function (el) {
|
||
el.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
openModal(el.getAttribute("data-plan"));
|
||
});
|
||
});
|
||
|
||
document.getElementById("modal-close").addEventListener("click", closeModal);
|
||
overlay.addEventListener("click", function (e) {
|
||
if (e.target === overlay || !modalBox.contains(e.target)) 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...";
|
||
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>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
|
||
</body>
|
||
</html>
|