ok

templates/index.html

@@ -3,6 +3,8 @@
 {% include "partials/hero/aihero1.html" %}
 {% include "partials/hero/aihero2.html" %}
 {% include "partials/hero/aihero3.html" %}
+{% include "partials/hero/aihero4.html" %}
+{% include "partials/hero/aihero5.html" %}
 {% include "partials/hero/myhero1.html" %}
 {% include "partials/hero/myhero3.html" %}
 {% include "partials/hero/myhero5.html" %}

templates/partials/hero/aihero2.html

@@ -5,7 +5,7 @@
             <h2 id="typing-text" class="mx-auto fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black">
             </h2>
         </div>        
-        <h3 class="mx-auto mt-8 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">Meet AIBox – a powerful and personalized AI experience, without limitations.
+        <h3 class="mx-auto mt-8 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">Meet <span class="font-medium">AIBox</span> – a powerful and personalized AI experience, without limitations.
         </h2>
       </div>
     </div>
@@ -80,24 +80,31 @@
     }
   </style>
   
-
   <script>
     document.addEventListener("DOMContentLoaded", function () {
         const text = "Take Control of Your AI Future";
         const textElement = document.getElementById("typing-text");
         let loopCount = 0;
-        const maxLoops = 1;
+        const maxLoops = 5;
   
         function typeText(i, callback) {
             if (i < text.length) {
                 textElement.textContent += text.charAt(i);
                 setTimeout(() => typeText(i + 1, callback), 100);
             } else {
-                setTimeout(callback, 200);
+                setTimeout(callback, 1000);
             }
         }
   
-        
+        function deleteText(callback) {
+            let currentText = textElement.textContent;
+            if (currentText.length > 0) {
+                textElement.textContent = currentText.substring(0, currentText.length - 1);
+                setTimeout(() => deleteText(callback), 50);
+            } else {
+                setTimeout(callback, 100);
+            }
+        }
   
         function loopTyping() {
             if (loopCount < maxLoops) {

templates/partials/hero/aihero4.html

@@ -0,0 +1,32 @@
+<div class="bg-white pt-12 lg:pt-24 pb-12">
+    <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
+        <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+            <div class="max-w-3xl">
+                <h2 class="fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black typing">
+                    Why Decentralized AI Matters
+                </h2>
+            </div> 
+        </div>
+    </div>
+</div>
+
+<style>
+  @keyframes typing {
+    from { max-width: 0 }
+    to { max-width: 100% }
+  }
+
+  @keyframes blink {
+    50% { border-color: transparent }
+  }
+
+  .typing {
+    display: inline-block;
+    overflow: hidden;
+    white-space: normal; /* Allows wrapping */
+    border-right: 4px solid black; /* Cursor effect */
+    animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite;
+    max-width: 100%; /* Ensures text expands naturally */
+    word-break: break-word; /* Allows words to break onto a new line */
+  }
+</style>

templates/partials/hero/aihero5.html

@@ -0,0 +1,21 @@
+<div class="bg-white pb-12">
+    <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
+      <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 ">      
+        <p id="1" class="mx-auto mt-8 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
+            Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing.
+        </p>
+
+        <p id="2" class="mx-auto mt-2  text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
+            AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications.
+        </p>
+
+        <p id="3" class="mx-auto mt-2 text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
+            By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms.
+        </p>
+
+        <p id="4" class="mx-auto mt-2 text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
+            As AI workloads continue to grow, self-hosted solutions like AI BOX provide a future-proof infrastructure, guaranteeing you always have cutting-edge computing power at your fingertips.
+        </p>
+      </div>
+    </div>
+  </div>