diff --git a/templates/index.html b/templates/index.html
index caa7e79..75d93c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,4 +6,5 @@
 {% include "partials/hero/aihero4.html" %}
 {% include "partials/hero/aihero5.html" %}
 {% include "partials/hero/aihero6.html" %}
+{% include "partials/hero/aihero7.html" %}
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/hero/aihero6.html b/templates/partials/hero/aihero6.html
index 085f0c1..ba74778 100644
--- a/templates/partials/hero/aihero6.html
+++ b/templates/partials/hero/aihero6.html
@@ -16,7 +16,6 @@
                     <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
                 </dl>
             </div>
-            
             <!-- Image Section -->
             <div class="fade-in-image mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
                 <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
diff --git a/templates/partials/hero/aihero7.html b/templates/partials/hero/aihero7.html
new file mode 100644
index 0000000..0ab970c
--- /dev/null
+++ b/templates/partials/hero/aihero7.html
@@ -0,0 +1,317 @@
+<div class="bg-white py-12">
+    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
+        <h2 id="typing-text2" class=" fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Pre-order Your AIBox</h2>
+      <p class="mt-6 max-w-2xl text-lg font-medium text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
+    </div>
+    <div class="relative pt-16 sm:pt-24">
+      <div class="absolute inset-x-0 top-48 bottom-0"></div>
+      <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
+          <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+            <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
+              <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
+                <h2 class="text-sm font-semibold text-indigo-600">Starter <span class="sr-only">plan</span></h2>
+                <p class="mt-2 text-sm/6 text-pretty text-gray-600">Everything you need to get started.</p>
+                <div class="mt-8 flex items-center gap-4">
+                  <div class="text-5xl font-semibold text-gray-950">$19</div>
+                  <div class="text-sm text-gray-600">
+                    <p>USD</p>
+                    <p>per month</p>
+                  </div>
+                </div>
+                <div class="mt-8">
+                  <a href="#" aria-label="Start a free trial on the Starter plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
+                </div>
+                <div class="mt-8">
+                  <h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
+                  <ul class="mt-3 space-y-3">
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Custom domains
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Edge content delivery
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Advanced analytics
+                    </li>
+                    <li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+                      <span class="sr-only">Not included:</span>
+                      Quarterly workshops
+                    </li>
+                    <li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+                      <span class="sr-only">Not included:</span>
+                      Single sign-on (SSO)
+                    </li>
+                    <li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+                      <span class="sr-only">Not included:</span>
+                      Priority phone support
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+            <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
+              <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
+                <h2 class="text-sm font-semibold text-indigo-600">Growth <span class="sr-only">plan</span></h2>
+                <p class="mt-2 text-sm/6 text-pretty text-gray-600">All the extras for your growing team.</p>
+                <div class="mt-8 flex items-center gap-4">
+                  <div class="text-5xl font-semibold text-gray-950">$49</div>
+                  <div class="text-sm text-gray-600">
+                    <p>USD</p>
+                    <p>per month</p>
+                  </div>
+                </div>
+                <div class="mt-8">
+                  <a href="#" aria-label="Start a free trial on the Growth plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
+                </div>
+                <div class="mt-8">
+                  <h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
+                  <ul class="mt-3 space-y-3">
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Custom domains
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Edge content delivery
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Advanced analytics
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Quarterly workshops
+                    </li>
+                    <li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+                      <span class="sr-only">Not included:</span>
+                      Single sign-on (SSO)
+                    </li>
+                    <li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+                      <span class="sr-only">Not included:</span>
+                      Priority phone support
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+            <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
+              <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
+                <h2 class="text-sm font-semibold text-indigo-600">Scale <span class="sr-only">plan</span></h2>
+                <p class="mt-2 text-sm/6 text-pretty text-gray-600">Added flexibility at scale.</p>
+                <div class="mt-8 flex items-center gap-4">
+                  <div class="text-5xl font-semibold text-gray-950">$99</div>
+                  <div class="text-sm text-gray-600">
+                    <p>USD</p>
+                    <p>per month</p>
+                  </div>
+                </div>
+                <div class="mt-8">
+                  <a href="#" aria-label="Start a free trial on the Scale plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
+                </div>
+                <div class="mt-8">
+                  <h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
+                  <ul class="mt-3 space-y-3">
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Custom domains
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Edge content delivery
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Advanced analytics
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Quarterly workshops
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Single sign-on (SSO)
+                    </li>
+                    <li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                      <span class="inline-flex h-6 items-center">
+                        <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                          <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                        </svg>
+                      </span>
+  
+                      Priority phone support
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+
+
+  <style>
+    /* Fade-in animation for the grid items */
+    .fade-in-box {
+      opacity: 0;
+      animation: fadeIn 2.2s ease-in-out forwards;
+    }
+  
+    /* Fading in each grid item with a slight delay */
+    .fade-in-box:nth-child(1) { animation-delay: 0s; }
+    .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
+    .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
+    .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
+    .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
+    .fade-in-box:nth-child(6) { animation-delay: 1s; }
+    .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
+    .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
+    .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
+    .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
+    .fade-in-box:nth-child(11) { animation-delay: 2s; }
+    .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
+  
+    @keyframes fadeIn {
+      to {
+        opacity: 1;
+      }
+    }
+  </style>
+  
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const text = "";
+        const textElement = document.getElementById("typing-text2");
+        let loopCount = 0;
+        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, 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) {
+                typeText(0, () => {
+                    deleteText(() => {
+                        loopCount++;
+                        loopTyping();
+                    });
+                });
+            } else {
+                typeText(0, () => {}); // Final typing with no delete
+            }
+        }
+  
+        loopTyping();
+    });
+  </script>
\ No newline at end of file