oliver
4021 lines
142 KiB
HTML
4021 lines
142 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="How to manage a non-profit organization: donor reporting, grant compliance, and impact dashboards all in one back-office built for NGOs. Free 4-week trial."
|
||
/>
|
||
<meta name="robots" content="index, follow" />
|
||
<meta
|
||
property="og:title"
|
||
content="How to Manage a Non-Profit Organization | my-biz.app"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="How to manage a non-profit organization: donor reporting, grant compliance, and impact dashboards all in one back-office built for NGOs. Free 4-week trial."
|
||
/>
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://my-biz.app/" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta property="og:site_name" content="my-biz.app" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="How to Manage a Non-Profit Organization | my-biz.app" />
|
||
<meta name="twitter:description" content="How to manage a non-profit organization: donor reporting, grant compliance, and impact dashboards all in one back-office built for NGOs. Free 4-week trial." />
|
||
<link rel="canonical" href="https://my-biz.app/" />
|
||
<title>How to Manage a Non-Profit Organization | my-biz.app</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>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "my-biz.app",
|
||
"url": "https://my-biz.app",
|
||
"description": "Back-office ERP platform built for non-profit organizations — donor management, grant compliance, HR, and impact reporting on Odoo Community Edition."
|
||
}
|
||
</script>
|
||
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
|
||
/>
|
||
<script
|
||
defer
|
||
data-domain="my-biz.app"
|
||
src="https://plausible.odoo4projects.com/js/script.outbound-links.tagged-events.js"
|
||
></script>
|
||
<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.45;
|
||
}
|
||
|
||
.hero-bg-wrap::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(
|
||
circle at top right,
|
||
rgba(251, 140, 0, 0.18),
|
||
transparent 40%
|
||
),
|
||
linear-gradient(
|
||
135deg,
|
||
rgba(239, 235, 233, 0.55),
|
||
rgba(239, 235, 233, 0.72)
|
||
);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.hero-offer {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-top: 26px;
|
||
padding: 16px 26px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, rgba(230, 81, 0, 0.10), rgba(251, 140, 0, 0.08));
|
||
border: 1px solid rgba(230, 81, 0, 0.28);
|
||
max-width: 540px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: left;
|
||
}
|
||
|
||
.hero-offer-badge {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--gold-lo), var(--gold));
|
||
color: #fff;
|
||
font-size: 0.72rem;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
text-align: center;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.hero-offer-text {
|
||
font-size: 0.88rem;
|
||
color: var(--white);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.hero-offer-text strong {
|
||
color: var(--gold);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.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;
|
||
text-align: center;
|
||
}
|
||
|
||
.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;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.news-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.news-read-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
align-self: flex-start;
|
||
margin-top: auto;
|
||
padding: 10px 20px;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--gold);
|
||
border: 1px solid rgba(230, 81, 0, 0.24);
|
||
border-radius: 999px;
|
||
background: rgba(230, 81, 0, 0.06);
|
||
cursor: pointer;
|
||
transition: background 0.25s, color 0.25s, border-color 0.25s;
|
||
}
|
||
|
||
.news-read-btn:hover {
|
||
background: var(--gold);
|
||
color: #fff;
|
||
border-color: var(--gold);
|
||
}
|
||
|
||
.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 {
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 7px 12px;
|
||
border-radius: 999px;
|
||
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;
|
||
white-space: nowrap;
|
||
}
|
||
.pricing-card.featured {
|
||
position: relative;
|
||
}
|
||
|
||
.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);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
#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);
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
#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 option,
|
||
.modal-field optgroup {
|
||
background: var(--card);
|
||
color: var(--white);
|
||
}
|
||
|
||
.modal-field:focus {
|
||
border-color: var(--gold);
|
||
box-shadow: 0 0 0 3px var(--gold-glow);
|
||
}
|
||
|
||
.modal-select {
|
||
position: relative;
|
||
}
|
||
|
||
.modal-select-button {
|
||
position: relative;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
padding-right: 42px;
|
||
}
|
||
|
||
.modal-select-button::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 50%;
|
||
width: 14px;
|
||
height: 8px;
|
||
transform: translateY(-50%);
|
||
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: center;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.modal-select-button.is-placeholder {
|
||
color: var(--grey);
|
||
}
|
||
|
||
.modal-select-menu {
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 3;
|
||
max-height: 220px;
|
||
padding: 8px;
|
||
background: var(--card);
|
||
border: 1px solid rgba(230, 81, 0, 0.18);
|
||
border-radius: 16px;
|
||
box-shadow: 0 18px 40px rgba(62, 39, 35, 0.16);
|
||
overflow-y: auto;
|
||
display: none;
|
||
}
|
||
|
||
.modal-select.open .modal-select-menu {
|
||
display: block;
|
||
}
|
||
|
||
.modal-select-option {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
background: transparent;
|
||
color: var(--white);
|
||
text-align: left;
|
||
font: inherit;
|
||
cursor: pointer;
|
||
transition:
|
||
background 0.2s,
|
||
color 0.2s;
|
||
}
|
||
|
||
.modal-select-option:hover,
|
||
.modal-select-option:focus-visible,
|
||
.modal-select-option.is-selected {
|
||
outline: none;
|
||
background: rgba(230, 81, 0, 0.1);
|
||
color: var(--gold);
|
||
}
|
||
|
||
select.modal-field {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
color: var(--white);
|
||
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;
|
||
color-scheme: light;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
@keyframes articleFlyIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(60px) scale(0.96);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes articleOverlayIn {
|
||
0% { opacity: 0; }
|
||
100% { opacity: 1; }
|
||
}
|
||
|
||
#article-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9500;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
background: rgba(62, 39, 35, 0.88);
|
||
backdrop-filter: blur(18px);
|
||
-webkit-backdrop-filter: blur(18px);
|
||
}
|
||
|
||
#article-overlay.is-open {
|
||
display: flex;
|
||
animation: articleOverlayIn 0.3s ease-out;
|
||
}
|
||
|
||
#article-box {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 92vw;
|
||
height: 82vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fdf6ee;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||
box-shadow:
|
||
0 40px 100px rgba(0, 0, 0, 0.35),
|
||
0 0 0 1px rgba(255, 243, 224, 0.15);
|
||
animation: articleFlyIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||
}
|
||
|
||
#article-box .article-rule {
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--gold), var(--gold-hi), var(--gold));
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
#article-box .article-header {
|
||
padding: 32px 40px 0;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
border-bottom: 1px solid rgba(93, 64, 55, 0.12);
|
||
padding-bottom: 24px;
|
||
}
|
||
|
||
#article-box .article-header .article-area {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
font-weight: 400;
|
||
}
|
||
|
||
#article-box .article-header h2 {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 2rem;
|
||
line-height: 1.2;
|
||
color: #3e2723;
|
||
margin: 12px 0 10px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
#article-box .article-header .article-date {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 0.78rem;
|
||
color: #8d6e63;
|
||
font-style: italic;
|
||
}
|
||
|
||
#article-box .article-body {
|
||
padding: 28px 40px 40px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
min-height: 0;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 1.05rem;
|
||
line-height: 1.85;
|
||
color: #4e342e;
|
||
}
|
||
|
||
#article-box .article-body::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
#article-box .article-body::-webkit-scrollbar-track {
|
||
background: rgba(93, 64, 55, 0.06);
|
||
}
|
||
|
||
#article-box .article-body::-webkit-scrollbar-thumb {
|
||
background: rgba(230, 81, 0, 0.25);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
#article-box .article-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(230, 81, 0, 0.45);
|
||
}
|
||
|
||
#article-box .article-body h2,
|
||
#article-box .article-body h3 {
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-weight: 400;
|
||
color: #3e2723;
|
||
margin: 28px 0 12px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
#article-box .article-body h2 {
|
||
font-size: 1.35rem;
|
||
border-bottom: 1px solid rgba(93, 64, 55, 0.12);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
#article-box .article-body h3 {
|
||
font-size: 1.15rem;
|
||
}
|
||
|
||
#article-box .article-body p {
|
||
margin-bottom: 16px;
|
||
text-align: justify;
|
||
hyphens: auto;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
#article-box .article-body ul {
|
||
margin: 12px 0;
|
||
padding-left: 20px;
|
||
list-style: disc;
|
||
}
|
||
|
||
#article-box .article-body li {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
#article-box .article-body a.cta {
|
||
display: inline-block;
|
||
padding: 14px 28px;
|
||
background: var(--gold);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
font-weight: 700;
|
||
font-family: "Segoe UI", system-ui, sans-serif;
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.04em;
|
||
margin-top: 12px;
|
||
transition: background 0.25s;
|
||
}
|
||
|
||
#article-box .article-body a.cta:hover {
|
||
background: var(--gold-hi);
|
||
}
|
||
|
||
#article-box .article-body iframe {
|
||
width: 340px;
|
||
max-width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 16 / 9;
|
||
border-radius: 6px;
|
||
margin: 20px 0;
|
||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||
break-inside: avoid;
|
||
}
|
||
|
||
#article-close {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: rgba(93, 64, 55, 0.08);
|
||
color: #8d6e63;
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s, color 0.2s;
|
||
z-index: 2;
|
||
}
|
||
|
||
#article-close:hover {
|
||
background: rgba(230, 81, 0, 0.12);
|
||
color: var(--gold);
|
||
}
|
||
|
||
@media (max-width: 860px) {
|
||
#article-box {
|
||
height: 90vh;
|
||
max-width: 96vw;
|
||
border-radius: 4px;
|
||
}
|
||
#article-box .article-header {
|
||
padding: 24px 20px 18px;
|
||
}
|
||
#article-box .article-header h2 {
|
||
font-size: 1.5rem;
|
||
}
|
||
#article-box .article-body {
|
||
padding: 20px 20px 28px;
|
||
font-size: 0.95rem;
|
||
column-width: 280px;
|
||
}
|
||
}
|
||
|
||
#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="#news">Tutorials</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 plausible-event-name=Meeting"
|
||
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 plausible-event-name=Trial"
|
||
id="open-modal"
|
||
href="#"
|
||
>Free Trial</a
|
||
>
|
||
<a
|
||
class="nav-cta nav-cta-sm open-modal plausible-event-name=Trial"
|
||
href="#"
|
||
>Try Free</a
|
||
>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero" id="home">
|
||
<div class="hero-bg-wrap">
|
||
<img
|
||
class="hero-bg-img"
|
||
src="https://my-biz.app/content/images/bg/india.webp"
|
||
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"
|
||
>
|
||
Manage your non-profit organization —
|
||
<span class="accent">your mission deserves more than spreadsheets.</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"
|
||
>
|
||
Everything you need to manage a non-profit organization — donor reporting, grant compliance, and impact dashboards in one back-office. Pull audit-ready reports in minutes and spend more time on the ground.
|
||
</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"
|
||
>
|
||
<br />
|
||
<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 reconciling spreadsheets at midnight.</span
|
||
><span>Perfect donor communication.</span
|
||
><span>Plan your projects with your team.</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 for NGOs with ≤15 staff</strong>
|
||
</div>
|
||
<span class="trust-sep">·</span>
|
||
<div class="trust-card">
|
||
<strong>From $214</strong>
|
||
</div>
|
||
<span class="trust-sep">·</span>
|
||
<div class="trust-card">
|
||
<strong>Zero IT burden</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="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"
|
||
>
|
||
Be inspired with our tutorials.
|
||
</h2>
|
||
<p class="section-sub">
|
||
Practical guides on how to manage a non-profit organization — improve your operations, track impact, and focus on what matters most.
|
||
</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>
|
||
|
||
<div id="article-overlay">
|
||
<div id="article-box">
|
||
<button id="article-close" aria-label="Close article">×</button>
|
||
<div class="article-rule"></div>
|
||
<div class="article-header">
|
||
<div class="article-area" id="article-area"></div>
|
||
<h2 id="article-title"></h2>
|
||
<div class="article-date" id="article-date"></div>
|
||
</div>
|
||
<div class="article-body" id="article-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<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 back-office platform for non-profit organizations to build and grow 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 plausible-event-name=Meeting"
|
||
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 all businesses areas.
|
||
</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>
|
||
</ul>
|
||
<ul>
|
||
<li>CRM</li>
|
||
<li>Website</li>
|
||
<li>Inventory</li>
|
||
</ul>
|
||
<ul>
|
||
<li>Purchase</li>
|
||
<li>Point of Sale</li>
|
||
<li>Project</li>
|
||
</ul>
|
||
<ul>
|
||
<li>eCommerce</li>
|
||
<li>Manufacturing</li>
|
||
<li>Email Marketing</li>
|
||
</ul>
|
||
<ul>
|
||
<li>Timesheets</li>
|
||
<li>Expenses</li>
|
||
<li>Risk Management</li>
|
||
</ul>
|
||
</div>
|
||
<div class="modules-note">
|
||
In Odoo Community Edition there is no user
|
||
limitation.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="news">
|
||
<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 plausible-event-name=Trial"
|
||
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 plausible-event-name=Trial"
|
||
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 plausible-event-name=Trial"
|
||
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"
|
||
>
|
||
Implement it yourself—then rely on us when it matters.
|
||
</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 plausible-event-name=Trial"
|
||
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 plausible-event-name=eMail+Feedback"
|
||
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="#news">Tutorials</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="#" id="faq-chat-link">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. · This service
|
||
is powered by
|
||
<a
|
||
href="https://ODOO4projects.com"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>ODOO4projects</a
|
||
>
|
||
</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 4 weeks Free Trial</h2>
|
||
<p class="modal-subtitle">
|
||
Test drive your backoffice in a 4 weeks free trial.
|
||
</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 modal-select"
|
||
id="modal-location-select"
|
||
>
|
||
<label class="field-label" for="modal-location"
|
||
>Server Location</label
|
||
>
|
||
<button
|
||
type="button"
|
||
class="modal-field modal-select-button is-placeholder"
|
||
id="modal-location-button"
|
||
aria-haspopup="listbox"
|
||
aria-expanded="false"
|
||
aria-controls="modal-location-menu"
|
||
>
|
||
Select your server location
|
||
</button>
|
||
<div
|
||
class="modal-select-menu"
|
||
id="modal-location-menu"
|
||
role="listbox"
|
||
aria-labelledby="modal-location-button"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="modal-select-option"
|
||
data-value="Boston, US"
|
||
>
|
||
🇺🇸 Boston
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="modal-select-option"
|
||
data-value="Manchester, UK"
|
||
>
|
||
🇬🇧 Manchester
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="modal-select-option"
|
||
data-value="Mumbai, IN"
|
||
>
|
||
🇮🇳 Mumbai
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="modal-select-option"
|
||
data-value="Sao Paulo, BR"
|
||
>
|
||
🇧🇷 São Paulo
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="modal-select-option"
|
||
data-value="Meppel, NL"
|
||
>
|
||
🇳🇱 Meppel
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="modal-select-option"
|
||
data-value="Sydney, AU"
|
||
>
|
||
🇦🇺 Sydney
|
||
</button>
|
||
</div>
|
||
<input
|
||
type="hidden"
|
||
id="modal-location"
|
||
name="server_location"
|
||
value=""
|
||
required
|
||
/>
|
||
</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 params = new URLSearchParams(window.location.search);
|
||
var tracking = {
|
||
utm_source: params.get("utm_source") || "homepage",
|
||
utm_medium: params.get("utm_medium") || "direct",
|
||
utm_campaign: params.get("utm_campaign") || "none",
|
||
utm_term: params.get("utm_term") || "",
|
||
utm_content: params.get("utm_content") || "",
|
||
};
|
||
|
||
function isTrackableHref(href) {
|
||
return (
|
||
href &&
|
||
href.charAt(0) !== "#" &&
|
||
href.indexOf("mailto:") !== 0 &&
|
||
href.indexOf("tel:") !== 0 &&
|
||
href.indexOf("javascript:") !== 0
|
||
);
|
||
}
|
||
|
||
function applyToLink(link) {
|
||
var href = link.getAttribute("href");
|
||
var url;
|
||
if (!isTrackableHref(href)) return;
|
||
try {
|
||
url = new URL(href, window.location.href);
|
||
} catch (err) {
|
||
return;
|
||
}
|
||
Object.keys(tracking).forEach(function (key) {
|
||
if (tracking[key])
|
||
url.searchParams.set(key, tracking[key]);
|
||
});
|
||
if (url.origin === window.location.origin) {
|
||
link.setAttribute(
|
||
"href",
|
||
url.pathname + url.search + url.hash,
|
||
);
|
||
return;
|
||
}
|
||
link.setAttribute("href", url.toString());
|
||
}
|
||
|
||
function applyToLinks(root) {
|
||
var scope = root && root.querySelectorAll ? root : document;
|
||
scope.querySelectorAll("a[href]").forEach(applyToLink);
|
||
}
|
||
|
||
function applyToFields(root) {
|
||
if (!root || !root.querySelectorAll) return;
|
||
Object.keys(tracking).forEach(function (key) {
|
||
root.querySelectorAll(
|
||
'input[name="' + key + '"]',
|
||
).forEach(function (input) {
|
||
input.value = tracking[key];
|
||
});
|
||
});
|
||
}
|
||
|
||
function appendToFormData(formData) {
|
||
Object.keys(tracking).forEach(function (key) {
|
||
formData.set(key, tracking[key]);
|
||
});
|
||
return formData;
|
||
}
|
||
|
||
function extendPayload(payload) {
|
||
Object.keys(tracking).forEach(function (key) {
|
||
payload[key] = tracking[key];
|
||
});
|
||
return payload;
|
||
}
|
||
|
||
applyToFields(document);
|
||
applyToLinks(document);
|
||
|
||
function trackEvent(name, props) {
|
||
if (typeof window.plausible !== "function") return;
|
||
window.plausible(name, {
|
||
props: props || {},
|
||
});
|
||
}
|
||
|
||
window._mbsTracking = {
|
||
params: tracking,
|
||
applyToLinks: applyToLinks,
|
||
applyToFields: applyToFields,
|
||
appendToFormData: appendToFormData,
|
||
extendPayload: extendPayload,
|
||
trackEvent: trackEvent,
|
||
};
|
||
})();
|
||
</script>
|
||
|
||
<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']");
|
||
var formData = new FormData(form);
|
||
if (window._mbsTracking)
|
||
formData =
|
||
window._mbsTracking.appendToFormData(formData);
|
||
if (window._mbsTracking) {
|
||
window._mbsTracking.trackEvent("eMail Feedback", {
|
||
source: "footer",
|
||
});
|
||
}
|
||
status.textContent = "Sending...";
|
||
button.disabled = true;
|
||
fetch(WEBHOOK, {
|
||
method: "POST",
|
||
body: formData,
|
||
})
|
||
.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, index) {
|
||
return [
|
||
'<div class="news-card">',
|
||
post.image ? '<img class="news-card-image" src="https://my-biz.app/content/images/blog/' +
|
||
post.image +
|
||
'.webp" alt="' +
|
||
post.title.replace(/"/g, """) +
|
||
'">' : '',
|
||
'<div class="news-card-body">',
|
||
"<div>",
|
||
'<div class="news-card-header">',
|
||
'<div class="news-area">' + post.area + "</div>",
|
||
'<span class="news-date">' + formatDate(post.date) + "</span>",
|
||
"</div>",
|
||
'<h3 class="news-title">' + post.title + "</h3>",
|
||
'<p class="news-teaser">' + post.teaser + "</p>",
|
||
"</div>",
|
||
'<button class="news-read-btn" data-article-index="' + index + '">How to implement this →</button>',
|
||
"</div>",
|
||
"</div>",
|
||
].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(function(p, i) {
|
||
return postMarkup(p, currentPage * PAGE_SIZE + i);
|
||
}).join("");
|
||
}
|
||
if (window._mbsTracking)
|
||
window._mbsTracking.applyToLinks(grid);
|
||
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.title,
|
||
post.area,
|
||
post.teaser,
|
||
]
|
||
.join(" ")
|
||
.toLowerCase();
|
||
return haystack.indexOf(term) !== -1;
|
||
});
|
||
currentPage = 0;
|
||
render();
|
||
}
|
||
|
||
var searchTrackTimer = null;
|
||
|
||
function trackSearch() {
|
||
var term = (search.value || "").trim();
|
||
if (!term || !window._mbsTracking) return;
|
||
window._mbsTracking.trackEvent("Search", {
|
||
query: term,
|
||
});
|
||
}
|
||
|
||
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", function () {
|
||
applyFilter();
|
||
clearTimeout(searchTrackTimer);
|
||
searchTrackTimer = setTimeout(trackSearch, 450);
|
||
});
|
||
|
||
var articleOverlay = document.getElementById('article-overlay');
|
||
var articleClose = document.getElementById('article-close');
|
||
var articleTitle = document.getElementById('article-title');
|
||
var articleArea = document.getElementById('article-area');
|
||
var articleDate = document.getElementById('article-date');
|
||
var articleBody = document.getElementById('article-body');
|
||
|
||
function openArticle(index) {
|
||
var post = allPosts[index];
|
||
if (!post) return;
|
||
articleArea.textContent = post.area || '';
|
||
articleTitle.textContent = post.title || '';
|
||
articleDate.textContent = formatDate(post.date);
|
||
articleBody.innerHTML = post.content || '';
|
||
articleBody.scrollTop = 0;
|
||
articleOverlay.classList.add('is-open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeArticle() {
|
||
articleOverlay.classList.remove('is-open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
articleClose.addEventListener('click', closeArticle);
|
||
articleOverlay.addEventListener('click', function(e) {
|
||
if (e.target === articleOverlay) closeArticle();
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && articleOverlay.classList.contains('is-open')) closeArticle();
|
||
});
|
||
|
||
grid.addEventListener('click', function(e) {
|
||
var btn = e.target.closest('.news-read-btn');
|
||
if (!btn) return;
|
||
var idx = parseInt(btn.getAttribute('data-article-index'), 10);
|
||
openArticle(idx);
|
||
});
|
||
|
||
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 (!panel.dataset.trackedOpen && window._mbsTracking) {
|
||
panel.dataset.trackedOpen = "true";
|
||
window._mbsTracking.trackEvent("Chat Agent", {
|
||
entry: "open",
|
||
});
|
||
}
|
||
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");
|
||
delete panel.dataset.trackedOpen;
|
||
}
|
||
|
||
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) {
|
||
var payload;
|
||
text = (text || "").trim();
|
||
if (!text || busy) return;
|
||
busy = true;
|
||
|
||
if (window._mbsTracking) {
|
||
window._mbsTracking.trackEvent("Chat Agent", {
|
||
entry: "message",
|
||
});
|
||
}
|
||
|
||
appendMsg("user", text);
|
||
openPanel();
|
||
navInput.value = "";
|
||
|
||
var thinkEl = appendMsg("agent", "...");
|
||
thinkEl.classList.add("chat-thinking");
|
||
|
||
payload = {
|
||
action: "sendMessage",
|
||
chatid: CHAT_ID,
|
||
chatInput: text,
|
||
};
|
||
if (window._mbsTracking)
|
||
payload = window._mbsTracking.extendPayload(payload);
|
||
|
||
fetch(CHAT_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
.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);
|
||
});
|
||
}
|
||
|
||
var faqChatLink = document.getElementById("faq-chat-link");
|
||
if (faqChatLink) {
|
||
faqChatLink.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
window.setTimeout(function () {
|
||
openPanel();
|
||
if (navInput) navInput.value = "FAQ";
|
||
send("FAQ");
|
||
}, 0);
|
||
});
|
||
}
|
||
|
||
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) {
|
||
var payload;
|
||
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);
|
||
},
|
||
);
|
||
payload = {
|
||
action: "sendMessage",
|
||
chatid: chatId,
|
||
chatInput: buildMsg(geo),
|
||
};
|
||
if (window._mbsTracking)
|
||
payload = window._mbsTracking.extendPayload(payload);
|
||
|
||
fetch(CHAT_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
.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 locationField = document.getElementById("modal-location");
|
||
var locationSelect = document.getElementById(
|
||
"modal-location-select",
|
||
);
|
||
var locationButton = document.getElementById(
|
||
"modal-location-button",
|
||
);
|
||
var locationMenu = document.getElementById(
|
||
"modal-location-menu",
|
||
);
|
||
var defaultProduct = productField.value;
|
||
|
||
function syncLocationLabel() {
|
||
var value = locationField.value || "";
|
||
var selected = null;
|
||
|
||
locationMenu
|
||
.querySelectorAll(".modal-select-option")
|
||
.forEach(function (option) {
|
||
var isSelected =
|
||
option.getAttribute("data-value") === value;
|
||
if (isSelected) selected = option;
|
||
option.classList.toggle("is-selected", isSelected);
|
||
option.setAttribute(
|
||
"aria-selected",
|
||
isSelected ? "true" : "false",
|
||
);
|
||
});
|
||
|
||
locationButton.textContent = selected
|
||
? selected.textContent.trim()
|
||
: "Select your server location";
|
||
locationButton.classList.toggle(
|
||
"is-placeholder",
|
||
!selected,
|
||
);
|
||
locationButton.setAttribute(
|
||
"aria-expanded",
|
||
locationSelect.classList.contains("open")
|
||
? "true"
|
||
: "false",
|
||
);
|
||
}
|
||
|
||
function closeLocationMenu() {
|
||
locationSelect.classList.remove("open");
|
||
syncLocationLabel();
|
||
}
|
||
|
||
function openLocationMenu() {
|
||
locationSelect.classList.add("open");
|
||
syncLocationLabel();
|
||
}
|
||
|
||
function openModal(plan) {
|
||
planField.value = plan || "General Free Trial";
|
||
productField.value = plan || defaultProduct;
|
||
if (window._mbsTracking)
|
||
window._mbsTracking.applyToFields(form);
|
||
closeLocationMenu();
|
||
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;
|
||
locationField.value = "";
|
||
if (window._mbsTracking)
|
||
window._mbsTracking.applyToFields(form);
|
||
closeLocationMenu();
|
||
var btn = form.querySelector(".modal-submit");
|
||
btn.textContent = "Start Free Trial";
|
||
btn.disabled = false;
|
||
}, 200);
|
||
}
|
||
|
||
locationButton.addEventListener("click", function () {
|
||
if (locationSelect.classList.contains("open"))
|
||
closeLocationMenu();
|
||
else openLocationMenu();
|
||
});
|
||
|
||
locationMenu
|
||
.querySelectorAll(".modal-select-option")
|
||
.forEach(function (option) {
|
||
option.addEventListener("click", function () {
|
||
locationField.value =
|
||
option.getAttribute("data-value") || "";
|
||
closeLocationMenu();
|
||
});
|
||
});
|
||
|
||
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") {
|
||
if (locationSelect.classList.contains("open")) {
|
||
closeLocationMenu();
|
||
return;
|
||
}
|
||
closeModal();
|
||
}
|
||
});
|
||
document.addEventListener("click", function (e) {
|
||
if (!locationSelect.contains(e.target)) closeLocationMenu();
|
||
});
|
||
document
|
||
.getElementById("modal-confirm-close")
|
||
.addEventListener("click", closeModal);
|
||
|
||
form.addEventListener("submit", function (e) {
|
||
e.preventDefault();
|
||
var btn = form.querySelector(".modal-submit");
|
||
var formData = new FormData(form);
|
||
if (window._mbsTracking)
|
||
formData =
|
||
window._mbsTracking.appendToFormData(formData);
|
||
if (window._mbsTracking) {
|
||
window._mbsTracking.trackEvent("Trial", {
|
||
source: planField.value || "General Free Trial",
|
||
});
|
||
}
|
||
btn.textContent = "Sending...";
|
||
btn.disabled = true;
|
||
|
||
fetch(WEBHOOK, { method: "POST", body: formData })
|
||
.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>
|