all animations start when in view

src/layouts/index.html

@@ -242,7 +242,7 @@
 <div class="section-divider teal-bg">
   <img src="/Images/pixel-section-divider.svg" style="pointer-events:none;" alt="">
 </div>
-<section class="teal-bg impact-section one-box">
+<section class="teal-bg impact-section two-boxes">
   <div class="container">
     <div class="row">
       <div class="col">
@@ -319,12 +319,17 @@
   <div class="section-divider">
     <img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
   </div>
-  <div class="container one-box-up">
+  <div class="container two-boxes-up">
+    <div class="row two-boxes-down">
+      <div class="col">
+        <h2 class="display-4 text-center">features</h2>
+      </div>
+    </div>
     <div class="row one-box-down">
       <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
           <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
-            <h2 class="display-4">tea magic</h2>
+            <h2 class="display-5">tea magic</h2>
-            <p class="lead">Easily access the entire open source ecosystem with tea. Simply prefix your commands with "tea" and if the tool isn't installed, tea will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow.</p>
+            <p>Easily access the entire open source ecosystem with tea. Simply prefix your commands with "tea" and if the tool isn't installed, tea will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow.</p>
           </div>
         </div>
       <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
@@ -366,101 +371,6 @@ bun install v0.4.0 (a94bba63)<br>
 [724.00ms] bun install<br><br>
 
 ` },
-          { input: "", output: `<span class="dark-gray">$ bun bun --use next</span><br><br>` },
-          { input: "", output: `bun-framework-next v12.2.5<br><br>
-          <span class="ms-3">10.50 KB   bun-framework-next/client.development.tsx [0]</span><br>
-          <span class="ms-3">2.97 KB   bun-framework-next/fallback.development.tsx [1]</span><br>
-          <span class="ms-3">3.34 KB   bun-framework-next/page-loader.ts [2]<br></span><br>` },
-          { input: "", output: `next v12.2.3<br><br>
-          0.16 KB   next/app.js [3]<br>
-1.04 KB   next/dist/client/add-base-path.js [4]<br>
-0.77 KB   next/dist/client/add-locale.js [5]<br>
-0.75 KB   next/dist/client/detect-domain-locale.js [6]<br>
-0.80 KB   next/dist/client/has-base-path.js [7]<br>
-4.85 KB   next/dist/client/head-manager.js [8]<br>
-1.12 KB   next/dist/client/normalize-trailing-slash.js [9]<br>
-4.50 KB   next/dist/client/page-loader.js [10]<br>
-1.01 KB   next/dist/client/remove-base-path.js [11]<br>
-0.74 KB   next/dist/client/remove-locale.js [12]<br>
-1.35 KB   next/dist/client/request-idle-callback.js [13]<br>
-8.49 KB   next/dist/client/route-loader.js [14]<br>
-4.78 KB   next/dist/client/router.js [15]<br>
-6.95 KB   next/dist/client/script.js [16]<br>
-1.22 KB   next/dist/client/trusted-types.js [17]<br>
-1.44 KB   next/dist/client/with-router.js [18]<br>
-12.15 KB   next/dist/compiled/path-to-regexp/index.js [19]<br>
-7.62 KB   next/dist/compiled/react-is/cjs/react-is.development.js [20]<br>
-0.24 KB   next/dist/compiled/react-is/index.js [21]<br>
-0.98 KB   next/dist/lib/is-error.js [22]<br>
-2.43 KB   next/dist/pages/_app.js [23]<br>
-0.65 KB   next/dist/shared/lib/amp-context.js [24]<br>
-0.42 KB   next/dist/shared/lib/amp-mode.js [25]<br>
-0.56 KB   next/dist/shared/lib/escape-regexp.js [26]<br>
-0.69 KB   next/dist/shared/lib/head-manager-context.js [27]<br>
-6.72 KB   next/dist/shared/lib/head.js [28]<br>
-0.87 KB   next/dist/shared/lib/i18n/normalize-locale-path.js [29]<br>
-0.71 KB   next/dist/shared/lib/is-plain-object.js [30]<br>
-0.71 KB   next/dist/shared/lib/mitt.js [31]<br>
-0.71 KB   next/dist/shared/lib/page-path/denormalize-page-path.js [32]<br>
-0.44 KB   next/dist/shared/lib/page-path/normalize-path-sep.js [33]<br>
-0.65 KB   next/dist/shared/lib/router-context.js [34]<br>
-51.00 KB   next/dist/shared/lib/router/router.js [35]<br>
-0.81 KB   next/dist/shared/lib/router/utils/add-locale.js [36]<br>
-0.63 KB   next/dist/shared/lib/router/utils/add-path-prefix.js [37]<br>
-12.70 KB   next/dist/shared/lib/router/utils/add-path-suffix.js [38]<br>
-1.27 KB   next/dist/shared/lib/router/utils/format-next-pathname-info.js [39]<br>
-3.58 KB   next/dist/shared/lib/router/utils/format-url.js [40]<br>
-0.57 KB   next/dist/shared/lib/router/utils/get-asset-path-from-route.js [41]<br>
-1.77 KB   next/dist/shared/lib/router/utils/get-next-pathname-info.js [42]<br>
-0.70 KB   next/dist/shared/lib/router/utils/index.js [43]<br>
-0.46 KB   next/dist/shared/lib/router/utils/is-dynamic.js [44]<br>
-0.91 KB   next/dist/shared/lib/router/utils/parse-path.js [45]<br>
-1.20 KB   next/dist/shared/lib/router/utils/parse-relative-url.js [46]<br>
-0.93 KB   next/dist/shared/lib/router/utils/parse-url.js [47]<br>
-0.63 KB   next/dist/shared/lib/router/utils/path-has-prefix.js [48]<br>
-1.62 KB   next/dist/shared/lib/router/utils/path-match.js [49]<br>
-6.75 KB   next/dist/shared/lib/router/utils/prepare-destination.js [50]<br>
-1.71 KB   next/dist/shared/lib/router/utils/querystring.js [51]<br>
-0.69 KB   next/dist/shared/lib/router/utils/remove-path-prefix.js [52]<br>
-0.47 KB   next/dist/shared/lib/router/utils/remove-trailing-slash.js [53]<br>
-3.85 KB   next/dist/shared/lib/router/utils/resolve-rewrites.js [54]<br>
-1.15 KB   next/dist/shared/lib/router/utils/route-matcher.js [55]<br>
-5.32 KB   next/dist/shared/lib/router/utils/route-regex.js [56]<br>
-5.42 KB   next/dist/shared/lib/router/utils/sorted-routes.js [57]<br>
-0.52 KB   next/dist/shared/lib/runtime-config.js [58]<br>
-3.21 KB   next/dist/shared/lib/side-effect.js [59]<br>
-5.53 KB   next/dist/shared/lib/utils.js [60]<br>
-0.16 KB   next/head.js [61]<br><br></span>` },
-{ input: "", output: `react v18.2.0<br><br>
-<span class="ms-3"> 30.58 KB   react/cjs/react-jsx-dev-runtime.development.js [62]</span><br>
-<span class="ms-3">64.50 KB   react/cjs/react.development.js [63]</span><br>
-<span class="ms-3">0.17 KB   react/index.js [64]</span><br>
-<span class="ms-3">0.20 KB   react/jsx-dev-runtime.js [65]<br></span><br>` },
-{ input: "", output: `  1.13 MB JavaScript
-       73 modules
-        6 packages
- 41492 LOC parsed x2
-    119ms elapsed
- Saved to ./node_modules.bun, ./node_modules.server.bun
-
-[2.41s] bun create next
-
-Come hang out in bun's Discord: https://bun.sh/discord
-
------
-
-A local git repository was created for you and dependencies were installed automatically.
-
-Created next project successfully
-
-# When dependencies change, run this to update node_modules.bun:
-
-  bun bun --use next
-
-# To get started, run:
-
-  cd app
-  bun dev` },
   ];
 
   let commandIndex2 = 0;
@@ -485,16 +395,24 @@ Created next project successfully
     setTimeout(typeCommand2, 100);
   }
 
-        document.querySelector("#start-btn").addEventListener("click", typeCommand2);
+  const observer2 = new IntersectionObserver((entries) => {
-    </script>
+    if (entries[0].isIntersecting) {
+      typeCommand2();
+      observer2.disconnect();
+    }
+  });
+  const target2 = document.querySelector("#terminal-output-2");
+  observer2.observe(target2);
+</script>
+
 
     <!-- Second -->
 
     <div class="row one-box">
       <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2 flex">
           <div class="feature-content pe-xl-5 pe-lg-3 pe-md-0 pe-sm-0 pe-0">
-            <h2 class="display-4">Developer Environments</h2>
+            <h2 class="display-5">Developer Environments</h2>
-            <p class="lead">Simplify your development environment setup with tea by automatically fetching the specific versions of tools your project needs. With a range of specifications, tea provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
+            <p>Simplify your development environment setup with tea by automatically fetching the specific versions of tools your project needs. With a range of specifications, tea provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
           </div>
         </div>
       <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1">
@@ -576,8 +494,8 @@ Created next project successfully
     <div class="row one-box">
       <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
           <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
-            <h2 class="display-4">tea scripts</h2>
+            <h2 class="display-5">tea scripts</h2>
-            <p class="lead">This is next-generation, cross-platform package management. With tea, you no longer have to install packages—just type the commands you need and tea does the rest. Enjoy seamless and flexible version control, with the full https://semver.org spec supported.</p>
+            <p>This is next-generation, cross-platform package management. With tea, you no longer have to install packages—just type the commands you need and tea does the rest. Enjoy seamless and flexible version control, with the full https://semver.org spec supported.</p>
           </div>
         </div>
       <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
@@ -635,13 +553,16 @@ Created next project successfully
     setTimeout(typeCommand4, 100);
   }
 
-      document.querySelector("#start-animation-4").addEventListener("click", function() {
+  const terminalOutput4 = document.querySelector("#terminal-output-4");
+  const observer4 = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting) {
       typeCommand4();
+      observer4.disconnect();
+    }
   });
-    </script>
+  observer4.observe(terminalOutput4);
+</script>
 
-  </div>
-</section>
 
 <!--
 <hr>
@@ -715,7 +636,7 @@ Created next project successfully
 
 <section class="gs-section">
   <div class="container">
-    <div class="row one-box">
+    <div class="row one-box-up">
       <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mb-5">
         <div class="gs-parent">
           <div class="gs-content">
@@ -793,7 +714,7 @@ Created next project successfully
 
       </div>
     </div>
-    <div class="row one-box">
+    <div class="row two-boxes-down">
       <div class="col">
         <div>
           <!-- terminal description -->

src/layouts/partials/footer-content.html

@@ -3,7 +3,7 @@
 <section>
   <div class="container">
     <div class="row one-box">
-      <div class="col-xl-4 col-lg-4 col-md-8 col-sm-12 col-12 me-5">
+      <div class="col-xl-4 col-lg-4 col-md-8 col-sm-12 col-12">
         <img class="mb-3" src="/Images/tea-logo-2.svg" alt="tea Logo (teal)" style="width:40px;">
         <p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <div class="social-icons flex-start">
@@ -22,7 +22,7 @@
 
         </div>
       </div>
-      <div class="col-2 pt-5">
+      <div class="col-xl-2 col-lg-2 col-md-4 col-sm-12 col-12 pt-5 mb-5 ps-5">
         <h6 class="white">Quick Links</h6>
         <a href="https://medium.com/teaxyz">blog</a><br>
         <a href="/press/">press</a><br>
@@ -30,7 +30,7 @@
         <a href="/privacy-policy/">privacy policy</a><br>
         <a href="/terms-of-use/">terms of use</a><br>
       </div>
-      <div class="col">
+      <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 ps-3">
         <div class="email-placeholder flex" style="height:100%;width:100%;background-color:#212121;">
           <p class="text-center" style="display:block;margin-left:auto;margin-right:auto;">email placeholder</p>
         </div>