From 47886dd025a8dff86dca621311bf3cfcf08f0e50 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 24 Apr 2026 11:55:15 -0300
Subject: [PATCH] feat: install MotionFlow CDN + add scroll animations, stagger
 grids, typing hero tagline

---
 index.html | 235 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 210 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 0b38ee5..cd8b182 100644
--- a/index.html
+++ b/index.html
@@ -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>