ok

templates/index.html

@@ -5,4 +5,5 @@
 {% include "partials/hero/aihero3.html" %}
 {% include "partials/hero/aihero4.html" %}
 {% include "partials/hero/aihero5.html" %}
+{% include "partials/hero/aihero6.html" %}
 {% endblock content %}

templates/partials/hero/aihero3.html

@@ -2,7 +2,7 @@
     <div class="mx-auto max-w-7xl px-6 lg:px-8 pb-10">
         <div class="mx-auto max-w-2xl lg:max-w-4xl">
             <div class="text-center">
-                <h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
+                <h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
             </div>
         </div>
     </div>
@@ -12,7 +12,7 @@
 
     <!-- Item #1 -->
     <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-black group-[.is-active]:bg-emerald-500 text-white 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">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 text-white group-[.is-active]:bg-emerald-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">
                 <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
             </svg>
@@ -32,7 +32,7 @@
 
     <!-- Item #2 -->
     <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active  py-4">
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-black group-[.is-active]:bg-emerald-500 text-white 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">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white 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">
                 <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
             </svg>
@@ -50,7 +50,7 @@
 
     <!-- Item #3 -->
     <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active  py-4">
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-black group-[.is-active]:bg-emerald-500 text-white 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">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white 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">
                 <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
             </svg>
@@ -86,6 +86,11 @@
 <script>
     // Get all the elements that need to be faded in
     document.addEventListener('DOMContentLoaded', function() {
+        const h2 = document.getElementById("blinking");
+
+        setInterval(() => {
+            h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
+        }, 1000); // Blinks every 2 seconds
   // Target all elements with the 'fade-in' class
   const fadeInElements = document.querySelectorAll('.fade-in');
 
@@ -106,8 +111,5 @@
   });
 });
 
-
-
-
 </script>
 

templates/partials/hero/aihero6.html

@@ -0,0 +1,110 @@
+<div class="fade-in">
+    <div class="relative isolate pt-14">
+        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
+            <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>
+                
+                <!-- Specification List -->
+                <dl class="mt-10 px-10 max-w-xl space-y-6 text-gray-900 lg:max-w-xl">
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ AMD CPU</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 64 GB Memory</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Integrated mini computer with relay and remote control</dt></div>
+                    <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">
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Styles -->
+<style>
+    /* Fade-in for Text & Image */
+    .fade-in-item, .fade-in-image {
+        opacity: 0;
+        transform: translateY(10px);
+        transition: opacity 1s ease-out, transform 1s ease-out;
+    }
+
+    .fade-in-item.show, .fade-in-image.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+</style>
+
+<!-- Script -->
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        /*** Typing Effect ***/
+        const text = "What's Inside AIBox";
+        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
+            }
+        }
+
+        /*** Fade-in Items One by One ***/
+        const items = document.querySelectorAll(".fade-in-item");
+        const image = document.querySelector(".fade-in-image");
+        let index = 0;
+
+        function showNextItem() {
+            if (index < items.length) {
+                items[index].classList.add("show");
+                index++;
+                setTimeout(showNextItem, 1000);
+            } else {
+                setTimeout(() => {
+                    items.forEach(item => item.classList.remove("show"));
+                    index = 0;
+                    setTimeout(showNextItem, 1000);
+                }, 5000);
+            }
+        }
+
+        /*** Initialize Everything ***/
+        loopTyping();
+        showNextItem();
+
+        // Fade-in Image after text animations
+        setTimeout(() => image.classList.add("show"), 1000);
+    });
+</script>