edit fx

templates/partials/hero/aihero1.html

@@ -5,7 +5,7 @@
           Your 
           <span id="slides" class="slides"></span>
         </h1>
-        <div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6 hidden"> 
+        <div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6"> 
           <a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
             Learn more <span aria-hidden="true">→</span>
           </a>

templates/partials/hero/aihero2.html

@@ -85,26 +85,19 @@
         const text = "Take Control of Your AI Future";
         const textElement = document.getElementById("typing-text");
         let loopCount = 0;
-        const maxLoops = 5;
+        const maxLoops = 1;
   
         function typeText(i, callback) {
             if (i < text.length) {
                 textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1, callback), 100);
+                setTimeout(() => typeText(i + 1), 100);
             } else {
-                setTimeout(callback, 1000);
+                setTimeout(callback, 2000);
             }
         }
   
-        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/aihero3.html

@@ -96,8 +96,8 @@
         const h2 = document.getElementById("blinking");
 
         setInterval(() => {
-            h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
+            h2.style.opacity = (h2.style.opacity == "1") ? "0.5" : "1";
-        }, 1000); // Blinks every 2 seconds
+        }, 1500); // Blinks every 2 seconds
   // Target all elements with the 'fade-in' class
   const fadeInElements = document.querySelectorAll('.fade-in');
 

templates/partials/hero/aihero5.html

@@ -45,7 +45,7 @@
             paragraphs[index].classList.add("show");
 
             index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
-            setTimeout(showNextParagraph, 3500); // Change paragraph every 3 seconds
+            setTimeout(showNextParagraph, 4000); // Change paragraph every 4 seconds
         }
   
         showNextParagraph();

templates/partials/hero/aihero6.html

@@ -3,7 +3,7 @@
         <div class="mx-auto max-w-7xl px-6  lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
             <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
                 <!-- Typing Text -->
-                <h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
+                <h1 class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What's Inside AIBox</h1>
                 
                 <!-- Specification List -->
                 <dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
@@ -38,6 +38,8 @@
         opacity: 1;
         transform: translateY(0);
     }
+
+    
 </style>
 
 <!-- Script -->
@@ -47,24 +49,12 @@
         const text = "What's Inside AIBox";
         const textElement = document.getElementById("typing-text2");
         let loopCount = 0;
-        const maxLoops = 5;
+        const maxLoops = 1;
 
         function typeText(i, callback) {
             if (i < text.length) {
                 textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1, callback), 100);
+                setTimeout(() => typeText(i + 1), 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);
             }
         }
 
@@ -92,11 +82,7 @@
                 index++;
                 setTimeout(showNextItem, 1000);
             } else {
-                setTimeout(() => {
+                image.classList.add("show");
-                    items.forEach(item => item.classList.remove("show"));
-                    index = 0;
-                    setTimeout(showNextItem, 1000);
-                }, 5000);
             }
         }
 

templates/partials/hero/aihero7.html

@@ -1 +1,82 @@
-{% include "partials/hero/pricing-hero.html" %}
+<div class="bg-white py-12 fade-in-box">
+    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8  fade-in-box">
+        <h2  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-black 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-6 max-w-2xl text-lg font-light text-pretty text-black 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="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
+                            <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
+                            <div class="mt-4 flex items-center gap-4">
+                                <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
+                                <div class="text-sm text-gray-600">
+                                </div>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
+                                <ul class="mt-3 space-y-2">
+                                    {% 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-6">
+                                <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
+                                <ul class="mt-3 space-y-2">
+                                    {% 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>
+

templates/partials/hero/pricing-hero.html

@@ -4,7 +4,7 @@
         <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black 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-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
     </div>
-    <div class="relative pt-16 sm:pt-24  fade-in-box">
+    <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">
@@ -82,7 +82,6 @@
 
 <script>
     document.addEventListener("DOMContentLoaded", function () {
-        const text = "";
         const textElement = document.getElementById("typing-text2");
         let loopCount = 0;
         const maxLoops = 5;

templates/shortcodes/storymap.html

@@ -1,7 +1,7 @@
 <div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
 
     <!-- Item #1 -->
-    <div class="relative hidden flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
         <!-- Icon -->
         {# <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
             <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">