Oliver/my-biz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
oliver
2026-04-25 05:55:03 -03:00
parent 61ca437c83
commit 3ac948e01b
3 changed files with 669 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about.html
+324
View File
@@ -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>