From 64cf405eb58c234c87534266502adbb556b24f6c Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Mon, 23 Jun 2025 17:50:26 +0300
Subject: [PATCH] finished home

---
 content/home/index.md                        | 75 ++++++++++++++++++--
 templates/shortcodes/animated_paragraph.html | 42 +++++++++++
 2 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 templates/shortcodes/animated_paragraph.html

diff --git a/content/home/index.md b/content/home/index.md
index a951549..3bbfaed 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -115,7 +115,7 @@ extra:
 
 <!----------------------------------------------------------------------------------------->
 
-<!-- Section 34 (Push the Limits) -->
+<!-- Section 4 (Push the Limits) -->
 
 <div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
 <div class="product mx-auto mb-8 " style="width:60%">
@@ -183,13 +183,71 @@ extra:
 </div>
 </div>
 
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 5 (Push the Limits) -->
+
+<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12 mb-10">
+
+<div class="typing px-6 mb-4">
+
+## Why Decentralized<br> AI Matters...
+
+</div>
+
+<div class="mx-auto max-w-3xl">
+
+{{ animated_paragraph(
+    id="1",
+    description="Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing..."
+) }}
+
+{{ animated_paragraph(
+    id="2",
+    description="AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications..."
+) }}
+
+{{ animated_paragraph(
+    id="3",
+    description="By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms..."
+) }}
+
+{{ animated_paragraph(
+    id="4",
+    description="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."
+) }}
+
+</div>
+</div>
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 6 (Coming Soon) -->
+
+<div class="lg:max-w-5xl text-center container mx-auto px-6 lg:px-8 lg:py-24 py-12">
+
+## AIBox is Coming Soon
+
+<br>
+
+### The future of computing is almost here.
+
+<br>
+
+We are preparing to launch AIBox, a powerful next-generation system designed to transform decentralized AI and edge computing. Built for performance, privacy, and autonomy, AIBox will enable users to contribute to the ThreeFold Grid and run AI workloads using their own hardware.
+
+<br>
+
+**Register and stay informed about launch details, setup options, and how to participate.**
+
+</div>
 
 
 <!----------------------------------------------------------------------------------------->
 
-<!-- Section 7 -->
+<!-- Section 7 (FAQ) -->
 
-<div class="lg:max-w-7xl container mx-auto px-4 lg:px-8 lg:py-24 py-12">
+<div class="lg:max-w-7xl container mx-auto px-6 lg:px-8 lg:py-24 py-12">
 
 ## Frequently Asked Questions
 
@@ -248,7 +306,6 @@ extra:
 
 </div>
 
-
 <!-- -------------------------------------------------------------------------------------------------------- -->
 
 
@@ -269,6 +326,16 @@ extra:
 
 <style>
 
+.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 */
+  }
+
 @media (max-width: 480px) {
   
   .product {
diff --git a/templates/shortcodes/animated_paragraph.html b/templates/shortcodes/animated_paragraph.html
new file mode 100644
index 0000000..8872105
--- /dev/null
+++ b/templates/shortcodes/animated_paragraph.html
@@ -0,0 +1,42 @@
+{% set id = id | default(value="") %}
+{% set description = description | default(value="") %}
+
+
+    <p id="{{ id }}" class="mt-0 mb-10 lg:mt-8 fade-in-up text-left lg:text-3xl text-lg leading-snug font-light tracking-tight text-black px-4 lg:px-10">
+        {{ description }}
+    </p>
+    
+
+<style>
+    .fade-in-up {
+        opacity: 0;
+        transform: translateY(20px);
+        position: absolute;
+        transition: opacity 1s ease-out, transform 1s ease-out;
+    }
+
+    .fade-in-up.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+</style>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const paragraphs = document.querySelectorAll(".fade-in-up");
+        let index = 0;
+  
+        function showNextParagraph() {
+            paragraphs.forEach((p, i) => {
+                p.classList.remove("show");
+            });
+
+            paragraphs[index].classList.add("show");
+
+            index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
+            setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
+        }
+  
+        showNextParagraph();
+    });
+</script>