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> </script>
<!-- MotionFlow — scroll animations, parallax, text effects -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css"
/>
<style> <style>
/* ── Reset ── */ /* ── Reset ── */
*, *,
@@ -1015,23 +1021,60 @@
<!-- HERO --> <!-- HERO -->
<section class="hero" id="home"> <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 &#10022; One Stop Shop &middot; Built for Real Businesses
</div> </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 Running a business is hard.<br /><em
>Your back-office shouldn&rsquo;t be.</em >Your back-office shouldn&rsquo;t be.</em
> >
</h1> </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, We eliminate the chaos behind the scenes &mdash; invoicing, HR,
inventory, CRM, reports &mdash; all in one place, set up for inventory, CRM, reports &mdash; all in one place, set up for
your exact industry, ready from day one. your exact industry, ready from day one.
</p> </p>
<p class="hero-tagline"> <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> </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="#" <a class="btn-primary" id="open-modal-hero" href="#"
>See Plans &amp; Pricing</a >See Plans &amp; Pricing</a
> >
@@ -1039,7 +1082,13 @@
>Find Your Vertical</a >Find Your Vertical</a
> >
</div> </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; Powered by <strong>Odoo Community Edition</strong> &middot;
Specialists for every industry &middot; From Specialists for every industry &middot; From
<strong>$214 / year</strong> <strong>$214 / year</strong>
@@ -1048,16 +1097,43 @@
<!-- VERTICALS --> <!-- VERTICALS -->
<section id="verticals"> <section id="verticals">
<span class="section-label">Our Verticals</span> <span
<h2 class="section-title"> 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. We speak your industry&rsquo;s language.
</h2> </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 Every vertical has a dedicated specialist who has lived through
your exact challenges. No generalists. No guessing. Just experts your exact challenges. No generalists. No guessing. Just experts
who get it. who get it.
</p> </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"> <div class="vertical-card">
<span class="vertical-icon">&#127757;</span> <span class="vertical-icon">&#127757;</span>
<div class="vertical-name">NGO &amp; Non-Profit</div> <div class="vertical-name">NGO &amp; Non-Profit</div>
@@ -1115,14 +1191,43 @@
<!-- NEWS --> <!-- NEWS -->
<section id="news"> <section id="news">
<span class="section-label">News from Our Verticals</span> <span
<h2 class="section-title">Insights from the front lines.</h2> class="section-label"
<p class="section-sub"> 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 Our specialists share what&rsquo;s actually working &mdash; no
fluff, no vendor noise. Real stories from real businesses in fluff, no vendor noise. Real stories from real businesses in
your space. your space.
</p> </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-card">
<div class="news-area">NGO</div> <div class="news-area">NGO</div>
<div class="news-title"> <div class="news-title">
@@ -1177,14 +1282,42 @@
<!-- PRICING --> <!-- PRICING -->
<section id="pricing"> <section id="pricing">
<span class="section-label">Simple Pricing</span> <span
<h2 class="section-title">Transparent. Honest. No surprises.</h2> class="section-label"
<p class="section-sub"> 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 Pick the plan that matches where your business is today. You can
always grow into more &mdash; on your timeline, not ours. always grow into more &mdash; on your timeline, not ours.
</p> </p>
<div class="pricing-grid"> <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-plan">Side Hustle</div>
<div class="pricing-price">$214</div> <div class="pricing-price">$214</div>
<div class="pricing-period"> <div class="pricing-period">
@@ -1203,7 +1336,14 @@
</ul> </ul>
<a class="pricing-cta open-modal" href="#">Get Started</a> <a class="pricing-cta open-modal" href="#">Get Started</a>
</div> </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-badge">Most Popular</div>
<div class="pricing-plan">On the Rise</div> <div class="pricing-plan">On the Rise</div>
<div class="pricing-price">$395</div> <div class="pricing-price">$395</div>
@@ -1229,14 +1369,43 @@
<!-- CUSTOMIZATION --> <!-- CUSTOMIZATION -->
<section id="customization"> <section id="customization">
<span class="section-label">Customization</span> <span
<h2 class="section-title">Need something more bespoke?</h2> class="section-label"
<p class="section-sub"> 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 Because we build on <strong>Odoo Community Edition</strong>, you
are never locked in. Choose the path that works best for your are never locked in. Choose the path that works best for your
team and budget. team and budget.
</p> </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"> <div class="custom-card">
<span class="custom-icon">&#127760;</span> <span class="custom-icon">&#127760;</span>
<div class="custom-title">Hire Any Odoo Developer</div> <div class="custom-title">Hire Any Odoo Developer</div>
@@ -1274,7 +1443,14 @@
<!-- FOOTER --> <!-- FOOTER -->
<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"> <div class="footer-brand">
<a class="footer-logo" href="#">my-biz<span>.app</span></a> <a class="footer-logo" href="#">my-biz<span>.app</span></a>
<p> <p>
@@ -1312,7 +1488,13 @@
</ul> </ul>
</div> </div>
</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> <span>&copy; 2025 my-biz.app &mdash; All rights reserved.</span>
<div class="footer-legal"> <div class="footer-legal">
<a href="#">Privacy</a> <a href="#">Privacy</a>
@@ -1461,5 +1643,8 @@
}); });
})(); })();
</script> </script>
<!-- MotionFlow JS — auto-initializes, no setup required -->
<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
</body> </body>
</html> </html>