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

feat: install MotionFlow CDN + add scroll animations, stagger grids, typing hero tagline

Browse Source
This commit is contained in:
oliver
2026-04-24 11:55:15 -03:00
parent 74aa890b5d
commit 47886dd025
1 changed files with 210 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+210 -25
View File
@@ -33,6 +33,12 @@
}
}
</script>
<!-- MotionFlow — scroll animations, parallax, text effects -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
/>
<style>
/* ── Reset ── */
*,
@@ -1015,23 +1021,60 @@
<!-- HERO -->
<section class="hero" id="home">
<div class="hero-eyebrow">
<div
class="hero-eyebrow"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-distance="24"
data-mf-animation-once="true"
>
&#10022; One Stop Shop &middot; Built for Real Businesses
</div>
<h1>
<h1
data-mf-animation="fade-up"
data-mf-animation-duration="900"
data-mf-animation-delay="130"
data-mf-animation-distance="32"
data-mf-animation-easing="ease-out-cubic"
data-mf-animation-once="true"
>
Running a business is hard.<br /><em
>Your back-office shouldn&rsquo;t be.</em
>
</h1>
<p class="hero-sub">
<p
class="hero-sub"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-delay="240"
data-mf-animation-distance="24"
data-mf-animation-once="true"
>
We eliminate the chaos behind the scenes &mdash; invoicing, HR,
inventory, CRM, reports &mdash; all in one place, set up for
your exact industry, ready from day one.
</p>
<p class="hero-tagline">
No duct tape. No spreadsheet nightmares. No expensive surprises.
<span
data-mf-text-type="typing"
data-mf-text-typing-speed="60"
data-mf-text-typing-delete-speed="30"
data-mf-text-typing-interval="1800"
data-mf-text-typing-cursor="true"
data-mf-text-typing-cursor-char="|"
><span>No duct tape.</span
><span>No spreadsheet nightmares.</span
><span>No expensive surprises.</span></span
>
</p>
<div class="hero-actions">
<div
class="hero-actions"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-delay="360"
data-mf-animation-distance="20"
data-mf-animation-once="true"
>
<a class="btn-primary" id="open-modal-hero" href="#"
>See Plans &amp; Pricing</a
>
@@ -1039,7 +1082,13 @@
>Find Your Vertical</a
>
</div>
<p class="hero-trust">
<p
class="hero-trust"
data-mf-animation="fade"
data-mf-animation-duration="600"
data-mf-animation-delay="500"
data-mf-animation-once="true"
>
Powered by <strong>Odoo Community Edition</strong> &middot;
Specialists for every industry &middot; From
<strong>$214 / year</strong>
@@ -1048,16 +1097,43 @@
<!-- VERTICALS -->
<section id="verticals">
<span class="section-label">Our Verticals</span>
<h2 class="section-title">
<span
class="section-label"
data-mf-animation="fade-left"
data-mf-animation-duration="600"
data-mf-animation-distance="24"
data-mf-animation-once="true"
>Our Verticals</span
>
<h2
class="section-title"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-delay="100"
data-mf-animation-once="true"
>
We speak your industry&rsquo;s language.
</h2>
<p class="section-sub">
<p
class="section-sub"
data-mf-animation="fade-up"
data-mf-animation-duration="600"
data-mf-animation-delay="180"
data-mf-animation-once="true"
>
Every vertical has a dedicated specialist who has lived through
your exact challenges. No generalists. No guessing. Just experts
who get it.
</p>
<div class="verticals-grid">
<div
class="verticals-grid"
data-mf-stagger-animation="fade-up"
data-mf-stagger-gap="90"
data-mf-stagger-duration="650"
data-mf-stagger-distance="40"
data-mf-stagger-easing="ease-out-cubic"
data-mf-stagger-once="true"
>
<div class="vertical-card">
<span class="vertical-icon">&#127757;</span>
<div class="vertical-name">NGO &amp; Non-Profit</div>
@@ -1115,14 +1191,43 @@
<!-- NEWS -->
<section id="news">
<span class="section-label">News from Our Verticals</span>
<h2 class="section-title">Insights from the front lines.</h2>
<p class="section-sub">
<span
class="section-label"
data-mf-animation="fade-left"
data-mf-animation-duration="600"
data-mf-animation-distance="24"
data-mf-animation-once="true"
>News from Our Verticals</span
>
<h2
class="section-title"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-delay="100"
data-mf-animation-once="true"
>
Insights from the front lines.
</h2>
<p
class="section-sub"
data-mf-animation="fade-up"
data-mf-animation-duration="600"
data-mf-animation-delay="180"
data-mf-animation-once="true"
>
Our specialists share what&rsquo;s actually working &mdash; no
fluff, no vendor noise. Real stories from real businesses in
your space.
</p>
<div class="news-grid">
<div
class="news-grid"
data-mf-stagger-animation="fade-up"
data-mf-stagger-gap="100"
data-mf-stagger-duration="650"
data-mf-stagger-distance="36"
data-mf-stagger-easing="ease-out-cubic"
data-mf-stagger-once="true"
>
<div class="news-card">
<div class="news-area">NGO</div>
<div class="news-title">
@@ -1177,14 +1282,42 @@
<!-- PRICING -->
<section id="pricing">
<span class="section-label">Simple Pricing</span>
<h2 class="section-title">Transparent. Honest. No surprises.</h2>
<p class="section-sub">
<span
class="section-label"
data-mf-animation="fade-left"
data-mf-animation-duration="600"
data-mf-animation-distance="24"
data-mf-animation-once="true"
>Simple Pricing</span
>
<h2
class="section-title"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-delay="100"
data-mf-animation-once="true"
>
Transparent. Honest. No surprises.
</h2>
<p
class="section-sub"
data-mf-animation="fade-up"
data-mf-animation-duration="600"
data-mf-animation-delay="180"
data-mf-animation-once="true"
>
Pick the plan that matches where your business is today. You can
always grow into more &mdash; on your timeline, not ours.
</p>
<div class="pricing-grid">
<div class="pricing-card">
<div
class="pricing-card"
data-mf-animation="fade-right"
data-mf-animation-duration="750"
data-mf-animation-distance="40"
data-mf-animation-easing="ease-out-cubic"
data-mf-animation-once="true"
>
<div class="pricing-plan">Side Hustle</div>
<div class="pricing-price">$214</div>
<div class="pricing-period">
@@ -1203,7 +1336,14 @@
</ul>
<a class="pricing-cta open-modal" href="#">Get Started</a>
</div>
<div class="pricing-card featured">
<div
class="pricing-card featured"
data-mf-animation="zoom-in"
data-mf-animation-duration="800"
data-mf-animation-delay="130"
data-mf-animation-easing="ease-out-back"
data-mf-animation-once="true"
>
<div class="pricing-badge">Most Popular</div>
<div class="pricing-plan">On the Rise</div>
<div class="pricing-price">$395</div>
@@ -1229,14 +1369,43 @@
<!-- CUSTOMIZATION -->
<section id="customization">
<span class="section-label">Customization</span>
<h2 class="section-title">Need something more bespoke?</h2>
<p class="section-sub">
<span
class="section-label"
data-mf-animation="fade-left"
data-mf-animation-duration="600"
data-mf-animation-distance="24"
data-mf-animation-once="true"
>Customization</span
>
<h2
class="section-title"
data-mf-animation="fade-up"
data-mf-animation-duration="700"
data-mf-animation-delay="100"
data-mf-animation-once="true"
>
Need something more bespoke?
</h2>
<p
class="section-sub"
data-mf-animation="fade-up"
data-mf-animation-duration="600"
data-mf-animation-delay="180"
data-mf-animation-once="true"
>
Because we build on <strong>Odoo Community Edition</strong>, you
are never locked in. Choose the path that works best for your
team and budget.
</p>
<div class="custom-grid">
<div
class="custom-grid"
data-mf-stagger-animation="fade-up"
data-mf-stagger-gap="130"
data-mf-stagger-duration="700"
data-mf-stagger-distance="44"
data-mf-stagger-easing="ease-out-cubic"
data-mf-stagger-once="true"
>
<div class="custom-card">
<span class="custom-icon">&#127760;</span>
<div class="custom-title">Hire Any Odoo Developer</div>
@@ -1274,7 +1443,14 @@
<!-- FOOTER -->
<footer>
<div class="footer-top">
<div
class="footer-top"
data-mf-stagger-animation="fade-up"
data-mf-stagger-gap="80"
data-mf-stagger-duration="600"
data-mf-stagger-distance="28"
data-mf-stagger-once="true"
>
<div class="footer-brand">
<a class="footer-logo" href="#">my-biz<span>.app</span></a>
<p>
@@ -1312,7 +1488,13 @@
</ul>
</div>
</div>
<div class="footer-bottom">
<div
class="footer-bottom"
data-mf-animation="fade"
data-mf-animation-duration="600"
data-mf-animation-delay="280"
data-mf-animation-once="true"
>
<span>&copy; 2025 my-biz.app &mdash; All rights reserved.</span>
<div class="footer-legal">
<a href="#">Privacy</a>
@@ -1461,5 +1643,8 @@
});
})();
</script>
<!-- MotionFlow JS — auto-initializes, no setup required -->
<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
</body>
</html>