working
This commit is contained in:
oliver
+324
@@ -0,0 +1,324 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>About Us | my-biz.app</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
|
||||
/>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
: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.7;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
img { display: block; max-width: 100%; }
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
height: 62px;
|
||||
padding: 0 8vw;
|
||||
background: rgba(255, 243, 224, 0.94);
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
.nav-logo img { height: 36px; width: auto; }
|
||||
.nav-links { display: flex; gap: 18px; align-items: center; }
|
||||
.nav-links a, .nav-cta {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nav-links a { color: var(--silver); }
|
||||
.nav-cta {
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--gold);
|
||||
color: var(--gold);
|
||||
}
|
||||
.hero, section, footer { padding: 84px 8vw; }
|
||||
.hero {
|
||||
min-height: 52vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, rgba(232, 224, 218, 0.72), rgba(239, 235, 233, 0));
|
||||
}
|
||||
.wrap { max-width: 1120px; margin: 0 auto; }
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(230, 81, 0, 0.08);
|
||||
border: 1px solid rgba(230, 81, 0, 0.18);
|
||||
color: var(--gold);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
}
|
||||
h1 { font-size: clamp(2.8rem, 7vw, 5rem); max-width: 80%; margin-top: 18px; }
|
||||
.lead { max-width: 62ch; margin-top: 18px; color: var(--silver); font-size: 1rem; }
|
||||
.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
|
||||
.panel {
|
||||
background: rgba(255, 243, 224, 0.84);
|
||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||
border-radius: 28px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 18px 44px rgba(62, 39, 35, 0.08);
|
||||
}
|
||||
.panel h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
|
||||
.panel p { color: var(--silver); }
|
||||
.info-list { display: grid; gap: 16px; }
|
||||
.info-item { padding: 18px; border-radius: 22px; background: var(--lift); border: 1px solid rgba(93, 64, 55, 0.1); }
|
||||
.info-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
|
||||
.faq-wrap { display: grid; gap: 14px; }
|
||||
.faq-item {
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||
background: rgba(255, 243, 224, 0.88);
|
||||
}
|
||||
.faq-button {
|
||||
width: 100%;
|
||||
padding: 20px 22px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--white);
|
||||
}
|
||||
.faq-button strong {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1.2rem;
|
||||
text-align: left;
|
||||
}
|
||||
.faq-icon { color: var(--gold); font-size: 1rem; }
|
||||
.faq-panel {
|
||||
display: none;
|
||||
padding: 0 22px 22px;
|
||||
color: var(--silver);
|
||||
}
|
||||
.faq-panel.open { display: block; }
|
||||
.faq-panel ul { list-style: none; display: grid; gap: 10px; }
|
||||
.faq-panel li { padding-left: 18px; position: relative; }
|
||||
.faq-panel li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.65em;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--gold-lo), var(--gold), var(--gold-hi));
|
||||
}
|
||||
footer {
|
||||
background: var(--bg-deep);
|
||||
border-top: 3px solid var(--gold);
|
||||
}
|
||||
.footer-row {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-logo img { height: 34px; width: auto; }
|
||||
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||
.footer-links a, .footer-row span { color: var(--grey); font-size: 0.84rem; }
|
||||
@media (max-width: 900px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
nav, .hero, section, footer { padding-left: 5vw; padding-right: 5vw; }
|
||||
h1 { max-width: 100%; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a class="nav-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
||||
<div class="nav-links">
|
||||
<a href="index.html#verticals">Solutions</a>
|
||||
<a href="about.html">About Us</a>
|
||||
<a href="legal.html">Legal</a>
|
||||
<a class="nav-cta" href="index.html#pricing">Free Trial</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow">About Us</span>
|
||||
<h1>Built for businesses that want a calmer, more connected back-office.</h1>
|
||||
<p class="lead">
|
||||
my-biz.app helps teams bring finance, operations, people, and growth work into one practical system built on Odoo Community Edition. We focus on making everyday business management simpler, clearer, and easier to extend over time.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about-us">
|
||||
<div class="wrap grid-2">
|
||||
<div class="panel">
|
||||
<h2>What we believe</h2>
|
||||
<p>
|
||||
Good business software should reduce noise, not create more of it. Our approach is to start with a stable operational foundation, keep the user experience grounded in real work, and preserve flexibility so your stack can grow with your business.
|
||||
</p>
|
||||
</div>
|
||||
<div class="panel info-list">
|
||||
<div class="info-item">
|
||||
<h3>Open foundation</h3>
|
||||
<p>Built on Odoo Community Edition so your data and future options stay in your hands.</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h3>Practical delivery</h3>
|
||||
<p>We focus on systems people can actually adopt, use, and improve over time.</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h3>Ready to grow</h3>
|
||||
<p>Start with what matters now and expand later with modules, integrations, and custom work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq">
|
||||
<div class="wrap panel">
|
||||
<span class="eyebrow">FAQ</span>
|
||||
<h2 style="margin-top: 16px;">Questions people ask before they commit.</h2>
|
||||
<div class="faq-wrap" style="margin-top: 24px;">
|
||||
<div class="faq-item">
|
||||
<button class="faq-button" type="button"><strong>Commercial and Planning</strong><span class="faq-icon">+</span></button>
|
||||
<div class="faq-panel">
|
||||
<ul>
|
||||
<li>How pricing works across different stages of growth.</li>
|
||||
<li>When to start with the base plan versus a broader rollout.</li>
|
||||
<li>How to think about long-term ownership and platform flexibility.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-button" type="button"><strong>Setup and First Steps</strong><span class="faq-icon">+</span></button>
|
||||
<div class="faq-panel">
|
||||
<ul>
|
||||
<li>What information is needed to get the first instance ready.</li>
|
||||
<li>How teams choose modules, server location, and initial workflows.</li>
|
||||
<li>What a sensible first phase looks like for a new client.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-button" type="button"><strong>Managing My Instance</strong><span class="faq-icon">+</span></button>
|
||||
<div class="faq-panel">
|
||||
<ul>
|
||||
<li>How to keep data clean and users aligned after launch.</li>
|
||||
<li>What ongoing maintenance and governance can look like.</li>
|
||||
<li>How permissions, updates, and operational routines are handled.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-button" type="button"><strong>Professional Growth and Advanced Use</strong><span class="faq-icon">+</span></button>
|
||||
<div class="faq-panel">
|
||||
<ul>
|
||||
<li>How custom modules and integrations fit into a mature setup.</li>
|
||||
<li>When to bring in specialist developers or internal teams.</li>
|
||||
<li>How the system supports more demanding operational use cases.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="careers">
|
||||
<div class="wrap panel">
|
||||
<span class="eyebrow">Careers</span>
|
||||
<h2 style="margin-top: 16px;">We work with people who care about useful systems.</h2>
|
||||
<p style="margin-top: 16px; color: var(--silver);">
|
||||
This area is ready for your careers content. Use it to describe open roles, how you like to work, and what kind of people thrive in your environment.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="partners">
|
||||
<div class="wrap panel">
|
||||
<span class="eyebrow">Partners</span>
|
||||
<h2 style="margin-top: 16px;">Built to collaborate with specialists and trusted operators.</h2>
|
||||
<p style="margin-top: 16px; color: var(--silver);">
|
||||
This area is ready for partner content. Use it to explain agency partnerships, implementation support, referrals, ecosystem relationships, or co-delivery models.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="footer-row">
|
||||
<a class="footer-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
||||
<div class="footer-links">
|
||||
<a href="about.html#about-us">About Us</a>
|
||||
<a href="about.html#faq">FAQ</a>
|
||||
<a href="about.html#careers">Careers</a>
|
||||
<a href="about.html#partners">Partners</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var buttons = document.querySelectorAll(".faq-button");
|
||||
buttons.forEach(function (button) {
|
||||
button.addEventListener("click", function () {
|
||||
var panel = button.nextElementSibling;
|
||||
var icon = button.querySelector(".faq-icon");
|
||||
var open = panel.classList.contains("open");
|
||||
document.querySelectorAll(".faq-panel").forEach(function (item) {
|
||||
item.classList.remove("open");
|
||||
});
|
||||
document.querySelectorAll(".faq-icon").forEach(function (item) {
|
||||
item.textContent = "+";
|
||||
});
|
||||
if (!open) {
|
||||
panel.classList.add("open");
|
||||
icon.textContent = "−";
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+172
-51
@@ -1371,21 +1371,22 @@
|
||||
}
|
||||
|
||||
footer {
|
||||
background: var(--bg-deep);
|
||||
border-top: 3px solid var(--gold);
|
||||
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.3fr) repeat(3, minmax(140px, 1fr));
|
||||
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(--grey);
|
||||
color: var(--silver);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
@@ -1394,6 +1395,114 @@
|
||||
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;
|
||||
@@ -1557,6 +1666,10 @@
|
||||
.modules-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-contact-shell {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
@@ -1820,15 +1933,6 @@
|
||||
<section id="verticals">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<div
|
||||
class="section-label"
|
||||
data-mf-animation="fade-up"
|
||||
data-mf-animation-duration="600"
|
||||
data-mf-animation-distance="20"
|
||||
data-mf-animation-once="true"
|
||||
>
|
||||
Choose your lane
|
||||
</div>
|
||||
<h2
|
||||
class="section-title"
|
||||
data-mf-animation="fade-up"
|
||||
@@ -1970,7 +2074,6 @@
|
||||
data-mf-animation-distance="28"
|
||||
data-mf-animation-once="true"
|
||||
>
|
||||
<div class="story-label">How we reduce friction</div>
|
||||
<h2 class="story-title">We provide a hustle free backoffice plattform for you to build your business upon.</h2>
|
||||
<div class="story-copy">
|
||||
<p>
|
||||
@@ -2122,15 +2225,6 @@
|
||||
<section id="pricing">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<div
|
||||
class="section-label"
|
||||
data-mf-animation="fade-up"
|
||||
data-mf-animation-duration="600"
|
||||
data-mf-animation-distance="20"
|
||||
data-mf-animation-once="true"
|
||||
>
|
||||
Pricing that lowers hesitation
|
||||
</div>
|
||||
<h2
|
||||
class="section-title"
|
||||
data-mf-animation="fade-up"
|
||||
@@ -2220,15 +2314,6 @@
|
||||
<section id="customization">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<div
|
||||
class="section-label"
|
||||
data-mf-animation="fade-up"
|
||||
data-mf-animation-duration="600"
|
||||
data-mf-animation-distance="20"
|
||||
data-mf-animation-once="true"
|
||||
>
|
||||
Extend without fear
|
||||
</div>
|
||||
<h2
|
||||
class="section-title"
|
||||
data-mf-animation="fade-up"
|
||||
@@ -2284,12 +2369,24 @@
|
||||
data-mf-stagger-once="true"
|
||||
>
|
||||
<div class="footer-brand">
|
||||
<a class="footer-logo" href="#home">my-biz.app</a>
|
||||
<a class="footer-logo" href="#home"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
||||
<p>
|
||||
A calmer, industry-aware back-office for NGOs, startups,
|
||||
manufacturers, restaurants, and teams that need real operational clarity.
|
||||
A practical all-in-one back-office platform built to help businesses run with more clarity, less friction, and room to grow over time.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-contact-shell">
|
||||
<form class="footer-contact-form" id="footer-contact-form">
|
||||
<input type="hidden" name="source" value="my-biz.app" />
|
||||
<div class="footer-contact-input-row">
|
||||
<input type="email" name="email" placeholder="Email" required />
|
||||
</div>
|
||||
<div class="footer-contact-message-wrap">
|
||||
<textarea name="message" placeholder="Your message" required></textarea>
|
||||
<button type="submit" class="footer-contact-send" aria-label="Send">➤</button>
|
||||
</div>
|
||||
<div class="footer-contact-status" id="footer-contact-status"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
@@ -2300,29 +2397,21 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Contact</h4>
|
||||
<h4>About</h4>
|
||||
<ul>
|
||||
<li><a href="mailto:hello@my-biz.app">hello@my-biz.app</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Legal</h4>
|
||||
<ul>
|
||||
<li><a href="#">Privacy Policy</a></li>
|
||||
<li><a href="#">Terms of Service</a></li>
|
||||
<li><a href="#">Cookie Policy</a></li>
|
||||
<li><a href="#">Imprint</a></li>
|
||||
<li><a href="about.html#about-us">About Us</a></li>
|
||||
<li><a href="about.html#faq">FAQ</a></li>
|
||||
<li><a href="about.html#careers">Careers</a></li>
|
||||
<li><a href="about.html#partners">Partners</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 my-biz.app · All rights reserved.</span>
|
||||
<div class="footer-legal">
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Terms</a>
|
||||
<a href="#">Imprint</a>
|
||||
<a href="legal.html#privacy">Privacy</a>
|
||||
<a href="legal.html#terms">Terms</a>
|
||||
<a href="legal.html#imprint">Imprint</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -2451,6 +2540,38 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var WEBHOOK =
|
||||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/41f1356d-2b0b-443c-b381-37195f547198";
|
||||
var form = document.getElementById("footer-contact-form");
|
||||
var status = document.getElementById("footer-contact-status");
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
var button = form.querySelector("button[type='submit']");
|
||||
status.textContent = "Sending...";
|
||||
button.disabled = true;
|
||||
fetch(WEBHOOK, {
|
||||
method: "POST",
|
||||
body: new FormData(form),
|
||||
})
|
||||
.then(function () {
|
||||
status.textContent = "Message received. We will get back to you soon.";
|
||||
form.reset();
|
||||
})
|
||||
.catch(function () {
|
||||
status.textContent = "Message received. We will get back to you soon.";
|
||||
form.reset();
|
||||
})
|
||||
.finally(function () {
|
||||
button.disabled = false;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var POSTS_URL = "posts.json";
|
||||
|
||||
+173
@@ -0,0 +1,173 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Legal | my-biz.app</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
: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.7;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 62px;
|
||||
padding: 0 8vw;
|
||||
background: rgba(255, 243, 224, 0.94);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.nav-logo img { height: 36px; width: auto; display: block; }
|
||||
.nav-links { display: flex; gap: 18px; align-items: center; }
|
||||
.nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }
|
||||
.hero, section, footer { padding: 84px 8vw; }
|
||||
.wrap { max-width: 980px; margin: 0 auto; }
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(230, 81, 0, 0.08);
|
||||
border: 1px solid rgba(230, 81, 0, 0.18);
|
||||
color: var(--gold);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1, h2 {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
}
|
||||
h1 { font-size: clamp(2.8rem, 7vw, 5rem); max-width: 80%; margin-top: 18px; }
|
||||
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
|
||||
.lead { color: var(--silver); max-width: 62ch; margin-top: 18px; }
|
||||
.legal-stack { display: grid; gap: 20px; }
|
||||
.legal-card {
|
||||
padding: 28px;
|
||||
border-radius: 28px;
|
||||
background: rgba(255, 243, 224, 0.86);
|
||||
border: 1px solid rgba(93, 64, 55, 0.12);
|
||||
box-shadow: 0 18px 44px rgba(62, 39, 35, 0.08);
|
||||
}
|
||||
.legal-card p, .legal-card li { color: var(--silver); }
|
||||
.legal-card ul { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
|
||||
.legal-card li { position: relative; padding-left: 18px; }
|
||||
.legal-card li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.65em;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--gold-lo), var(--gold), var(--gold-hi));
|
||||
}
|
||||
footer { background: var(--bg-deep); border-top: 3px solid var(--gold); }
|
||||
.footer-row {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-logo img { height: 34px; width: auto; display: block; }
|
||||
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||
.footer-links a, .footer-row span { color: var(--grey); font-size: 0.84rem; }
|
||||
@media (max-width: 900px) {
|
||||
nav, .hero, section, footer { padding-left: 5vw; padding-right: 5vw; }
|
||||
h1 { max-width: 100%; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a class="nav-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
||||
<div class="nav-links">
|
||||
<a href="about.html">About Us</a>
|
||||
<a href="legal.html">Legal</a>
|
||||
<a href="index.html">Home</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow">Legal</span>
|
||||
<h1>We reorganized the legal area.</h1>
|
||||
<p class="lead">
|
||||
This page brings together the core legal and policy information for my-biz.app in one place.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap legal-stack">
|
||||
<div class="legal-card" id="imprint">
|
||||
<h2>Imprint</h2>
|
||||
<p>
|
||||
Placeholder company information for my-biz.app. Replace this block with the legal entity name, registered address, company registration details, and official contact details required for your jurisdiction.
|
||||
</p>
|
||||
</div>
|
||||
<div class="legal-card" id="terms">
|
||||
<h2>Terms of Service</h2>
|
||||
<p>
|
||||
These terms describe the use of the my-biz.app website, trial flows, and service interactions. Final legal language should be reviewed and approved before publication.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Use of the platform and site materials.</li>
|
||||
<li>Service availability and support expectations.</li>
|
||||
<li>Responsibilities for customer-managed environments.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="legal-card" id="privacy">
|
||||
<h2>Privacy and Cookies</h2>
|
||||
<p>
|
||||
This section covers how contact form submissions, trial requests, analytics-related activity, and cookies are handled across the site.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Information collected through contact and trial forms.</li>
|
||||
<li>How operational and communication data is used.</li>
|
||||
<li>How cookies and similar technologies support the site experience.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="footer-row">
|
||||
<a class="footer-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
||||
<div class="footer-links">
|
||||
<a href="legal.html#privacy">Privacy</a>
|
||||
<a href="legal.html#terms">Terms</a>
|
||||
<a href="legal.html#imprint">Imprint</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user