diff --git a/content/_index.md b/content/_index.md
index a21fa28..89726c8 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -7,6 +7,66 @@ draft: false
 extra:
   author: ThreeFold
   imgPath: home/tf.png
+  title: "Pre-order Your AIBox"
+  subtitle: "Choose the box that's packed with the best features for your computing needs."
+  subtitle2: "The AI boxes are delivered by our hardware partners and they define the final price & specifications. Each AI boxes becomes part of the ThreeFold grid and earns rewards."
+  plans:
+    - name: "DIY"
+      description: "Add your own GPU's"
+      price: "1-1500"
+      features:
+        - name: "GPU your choice, minimal AMD Radeon RX 7900 XT"
+          included: true
+        - name: "64-128 GB Memory"
+          included: true
+        - name: "2-4 TB of SSD"
+          included: true
+        - name: "Integrated Mycelium"
+          included: true
+        - name: "Zero-OS"
+          included: false
+      rewards:
+        - name: "Proof of Capacity: between 500 and 2000 INCA per month depending on chosen GPU"
+        - name: "Proof of Utilization: 80% of INCA Revenue"
+    - name: "1 GPU"
+      description: "Enough for smaller but smart models and Smart Agents."
+      price: "2-2500"
+      features:
+        - name: "1x AMD Radeon RX 7900 XTX"
+          included: true
+        - name: "64-128 GB Memory"
+          included: true
+        - name: "2-4 TB of SSD"
+          included: true
+        - name: "Integrated Mycelium"
+          included: true
+        - name: "Zero-OS"
+          included: false
+      rewards:
+        - name: "Proof of Capacity: 1000 INCA per month"
+        - name: "Proof of Utilization: 80% of INCA Revenue"
+
+
+    - name: "2 GPU"
+      description: "Support for 48 GB models, a lot of power in your hands."
+      price: "4-5000"
+      features:
+        - name: "2x AMD Radeon RX 7900 XTX"
+          included: true
+        - name: "64-128 GB Memory"
+          included: true
+        - name: "2-4 TB of SSD"
+          included: true
+        - name: "Integrated Mycelium"
+          included: true
+        - name: "Zero-OS"
+          included: false
+      rewards:
+        - name: "Proof of Capacity: 2000 INCA per month"
+        - name: "Proof of Utilization: 80% of INCA Revenue"
+
+
+
 ---
 
 
@@ -45,8 +105,10 @@ ThreeFold is a peer-to-peer open-source Internet platform that connects users di
 
 {% end %}
 
-<!-- section 2 (Map) -->
+<!-- section 1.5 (Pricing) -->
+{% include "partials/hero/pricing-hero.html" %}
 
+<!-- section 2 (Map) -->
 
 {% grid_stats() %}
 
diff --git a/templates/partials/hero/aihero7.html b/templates/partials/hero/aihero7.html
index 4c50375..4a1ea84 100644
--- a/templates/partials/hero/aihero7.html
+++ b/templates/partials/hero/aihero7.html
@@ -1,317 +1 @@
-<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-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">Choose the box that’s packed with the best features for your computing needs.</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-black">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-black">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 necessities.</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-black">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
+{% include "partials/hero/pricing-hero.html" %}
diff --git a/templates/partials/hero/hero-title.html b/templates/partials/hero/hero-title.html
new file mode 100644
index 0000000..bbc2fd5
--- /dev/null
+++ b/templates/partials/hero/hero-title.html
@@ -0,0 +1 @@
+<h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{% if text %}{{ text }}{% else %}Pre-order Your AIBox{% endif %}</h2>
diff --git a/templates/partials/hero/pricing-hero.html b/templates/partials/hero/pricing-hero.html
new file mode 100644
index 0000000..3b9bed7
--- /dev/null
+++ b/templates/partials/hero/pricing-hero.html
@@ -0,0 +1,127 @@
+<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]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
+        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
+        <p class="mt-12 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</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">
+                {% for plan in section.extra.plans %}
+                <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-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
+                            <p class="mt-2 text-sm/6 text-pretty text-gray-600">{{ plan.description }}</p>
+                            <div class="mt-8 flex items-center gap-4">
+                                <div class="text-5xl font-semibold text-gray-950">${{ plan.price }}</div>
+                                <div class="text-sm text-gray-600">
+                                </div>
+                            </div>
+                            <div class="mt-8">
+                                <a href="#" aria-label="Start a free trial on the {{ plan.name }} 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">Includes:</h3>
+                                <ul class="mt-3 space-y-3">
+                                    {% for feature in plan.features %}
+                                    <li {% if not feature.included %}data-disabled="true"{% endif %} 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>
+                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
+                                        {{ feature.name }}
+                                    </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                            <div class="mt-8">
+                                <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
+                                <ul class="mt-3 space-y-3">
+                                    {% for feature in plan.rewards %}
+                                    <li {% if not feature.included %}data-disabled="true"{% endif %} 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>
+                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
+                                        {{ feature.name }}
+                                    </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </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; }
+
+    @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>