update footer

templates/layouts/solutions.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 {% include "partials/solutions/hero.html" %}
-{% include "partials/solutions/whatyoucando.html" %}
+{% include "partials/solutions/what.html" %}
 {% include "partials/solutions/portfolio.html" %}
 {% include "partials/home/cta.html" %}
 {% endblock content %}

templates/partials/home/faq.html

@@ -31,7 +31,7 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-01"
                         >
-                            <span class="text-xl">Is this a separate new Internet?</span>
+                            <span>Is this a separate new Internet?</span>
                             <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@@ -46,7 +46,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-lg">
+                            <p class="pb-3 text-gray-300 text-lg font-light">
                                 No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet while offering additional capabilities.
                             </p>
                         </div>
@@ -78,7 +78,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-lg">
+                            <p class="pb-3 text-gray-300 text-lg font-light">
                                 The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.
                             </p>
                         </div>
@@ -110,7 +110,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-lg">
+                            <p class="pb-3 text-gray-300 text-lg  font-light">
                                 For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and here to stay.
                             </p>
                         </div>
@@ -142,7 +142,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-lg font-light">
                                 TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid of capacity. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. We are now building generation 4 of the ThreeFold Grid of capacity and we need a new token to build this new generation. There will never be more than 3 billion INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 with a new reward scheme and ready to grow to millions of nodes.
                             </p>
                         </div>
@@ -174,7 +174,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-lg font-light">
                                 You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.
                             </p>
                         </div>
@@ -206,7 +206,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-lg font-light">
                                 Web4 is our evolution towards a decentralized, user-controlled, and secure Internet that respects privacy and minimizes environmental impact.
                             </p>
                         </div>
@@ -238,7 +238,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-lg font-light">
                                 No, we are NOT blockchain. We are using our own technology: Zero State technology combined with Quantum Safe Internetworking.
                             </p>
                         </div>

templates/partials/solutions/what.html

@@ -0,0 +1,82 @@
+<div class="bg-transparent">
+    <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
+      <div class="max-w-3xl px-16 pb-12">
+        <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
+        </h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
+        <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
+        <a href="/action" class="fade-in lg:text-4xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
+      </div>
+      <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
+        <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
+          <div class="">
+            <dt class="font-medium text-gray-200">Communicate securely</dt>
+            <dd class="mt-1 font-light text-gray-400 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd> 
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">Store effortlessly</dt>
+            <dd class="mt-1 ont-light text-gray-400 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">Restore authenticity</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Unlock limitless insights</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Streamline your interactions</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Take control of your digital presence</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
+         </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    /* Define the slow blinking animation */
+    @keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    
+      /* Apply the fade-in animation to elements with the 'fade-in' class */
+      .fade-in {
+        animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+      }
+    
+      /* Optional: Delay the animation for a more staggered effect */
+      h2 {
+        animation-delay: 0.5s; /* Delay for header */
+      }
+    
+      p {
+        animation-delay: 1s; /* Delay for paragraphs */
+      }
+      
+    @keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the blinking animation to the link */
+    .blinking-effect {
+      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+  </style>

templates/partials/why/team.html

@@ -10,11 +10,11 @@
         <div class="mt-12 grid grid-cols-1 gap-x-4 lg:gap-y-10 lg:gap-x-8 lg:grid-cols-4 gap-y-0">
 
             <!-- Team Member -->
-            <div class="group relative">
+            <div class="group relative fade-in">
               <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
                 <img src="/images/kristof_de_spiegeleer.jpeg" alt="kristof_de_spiegeleer" class="size-full object-cover">
               </div>
-              <h3 class="mt-4 text-2xl text-white">
+              <h3 class="mt-4 text-xl font-semibold text-white">
                   Kristof de Spiegeleer
               </h3>
               <p class="text-sm text-gray-300">Co-founder & CEO</p>
@@ -23,11 +23,11 @@
             </div>
 
             <!-- Team Member -->
-              <div class="group relative">
+              <div class="group relative fade-in">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
                   <img src="/images/people/adnan_fatayerji.jpg" alt="adnan_fatayerji" class="size-full object-cover">
                 </div>
-                <h3 class="mt-4 text-2xl text-white">
+                <h3 class="mt-4 text-xl font-semibold text-white">
                     Adnan Fatayerji
                 </h3>
                 <p class="text-sm text-gray-300">Co-founder</p>
@@ -36,11 +36,11 @@
               </div>
 
                 <!-- Team Member -->
-              <div class="group relative">
+              <div class="group relative fade-in">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
                   <img src="/images/people/jan_de_landtsheer.jpeg" alt="jan_de_landtsheer" class="size-full object-cover">
                 </div>
-                <h3 class="mt-4 text-2xl text-white">
+                <h3 class="mt-4 text-xl font-semibold text-white">
                     Jan De Landtsheer
                 </h3>
                 <p class="text-sm text-gray-300">Co-founder & CTO</p>
@@ -49,11 +49,11 @@
               </div>
                   
                     <!-- Team Member -->
-              <div class="group relative">
+              <div class="group relative fade-in">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
                   <img src="/images/people/florian_fournier.jpeg" alt="florian_fournier" class="size-full object-cover">
                 </div>
-                <h3 class="mt-4 text-2xl text-white">
+                <h3 class="mt-4 text-xl font-semibold text-white">
                     Florian Fournier
                 </h3>
                 <p class="text-sm text-gray-300">Co-founder & CMO</p>
@@ -62,7 +62,7 @@
               </div>
           </div>
      </div>
-     <div class="mt-12 flex items-center justify-center gap-x-6">
+     <div class="mt-8 flex items-center justify-center gap-x-6">
         <a href="/people" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Meet the Team</a>
       </div>
  </div>