update farmer

content/farmer/index.md

@@ -2,22 +2,42 @@
 title: "Become Farmer"
 description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
 insert_anchor_links: "left"
-template: "layouts/farmer.html"
+template: "page.html"
 extra:
  author: AIBOX
  imgPath: tf.png
 
 ---
+<!-- section 1 (Hero) -->
+
+<div class="fade-in lg:h-screen px-6 flex flex-col text-center pt-10 justify-center items-center">
+<div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
 
 
-<!--
-  This page is made by combining different 'section' (partial html pages) together. 
-  To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
-  To see the list of the section blocks in this page, add or remove some of the partial pages, 
-  go to: static/templates/layouts/index.html.
+![AIBox Specifications](/images/aibox_farming.png)
 
-HOMEPAGE (static/templates/layouts/about.html) contains:
 
-  1. Hero section: "templates/partials/about/about1.html
-  2. Hero section: "templates/partials/about/about2.html
+</div>
+
+# Own Your AI GPU <br>& Share Capacity
+
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- section 8 Cta -->
+
+{{ cta(
+    title_1="Own",
+    title_2="Your AI",
+    title_3="",  
+    button_text_1="Register Now",
+    button_link_1="/signup",
+    button_text_2="",
+    button_link_2="",
+    button_text_3="Learn More",
+    button_link_3="https://threefold.info/aibox/docs/"
+) }}
 

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 {

css/index.css

@@ -252,18 +252,18 @@ background-color:#5596f5 !important;
 
 @layer components {
   h1 {
-    @apply text-4xl font-semibold tracking-tight lg:text-6xl;
+    @apply  lg:text-[7.37rem] text-[3rem] font-medium tracking-tight leading-tight ;
     font-family: "Inter", sans-serif !important;
   }
   h2 {
-    @apply  lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black;
+    @apply  lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
   }
   h3 {
-    @apply lg:text-3xl text-xl leading-snug font-light tracking-tight text-black;
+    @apply lg:text-3xl text-xl leading-snug font-light tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h3 strong {

tailwind.config.js

@@ -20,9 +20,6 @@ module.exports = {
         'first', 'first:sm', 'first:md', 'first:lg', 
         'last', 'last:sm', 'last:md', 'last:lg'
       ],
-    },
-    {
-      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
     }
   ],
  

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>

templates/shortcodes/hero_animation.html

@@ -12,7 +12,7 @@
 <div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
     <div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
       <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
-        <h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
+        <h1 class="mt-10">
           {{ title }} 
           <span id="slides" class="slides"></span>
         </h1>