diff --git a/content/comingsoon/index.md b/content/comingsoon/index.md
new file mode 100644
index 000000000..32b6688ef
--- /dev/null
+++ b/content/comingsoon/index.md
@@ -0,0 +1,58 @@
+---
+title: "12.12.24"
+description: "12.12.24" # quotation marks to allow colons where used
+template: "layouts/121224.html"
+insert_anchor_links: "left"
+extra:
+ author: Your name here
+ imgPath: about/about_hero.png
+---
+
+
+
+
+
+
+
+
+
+
+<style>
+
+
+.rounded_img img {
+ border-radius: 8px;
+}
+
+
+.person img{
+ border-radius: 100%;
+ max-width:100px;
+ }
+
+
+.myscale{
+ transition: transform .5s;
+}
+
+
+.myscale:hover{
+ transform: scale(1.2);
+ background-color: whitesmoke;
+}
+
+
+.road_border{
+  
+     border-left: 1px solid rgb(156, 156, 156);
+
+
+   }
+
+
+ .white-gray{
+  color: #9f9f9f;
+}
+
+
+ </style>
\ No newline at end of file
diff --git a/templates/layouts/121224.html b/templates/layouts/121224.html
new file mode 100644
index 000000000..f24b3d75c
--- /dev/null
+++ b/templates/layouts/121224.html
@@ -0,0 +1,6 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/121224/hero.html" %}
+{% include "partials/home/cta.html" %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/121224/hero.html b/templates/partials/121224/hero.html
new file mode 100644
index 000000000..5d62727b6
--- /dev/null
+++ b/templates/partials/121224/hero.html
@@ -0,0 +1,40 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Secure & Sovereign Infrastructure Layer for the Internet</h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.             .</p>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
+        </p>
+        <div class="mt-12 flex items-center justify-center gap-x-6">
+          <a href="https://docs.threefold.io" 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">Dive Deeper</a>
+          
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    /* Define the fade-in 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 */
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/templates/partials/home/web4.html b/templates/partials/home/web4.html
index 941260ca9..3dcf9ae95 100644
--- a/templates/partials/home/web4.html
+++ b/templates/partials/home/web4.html
@@ -7,7 +7,7 @@
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Web 4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Blockchain was the first step to Web3 </p>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
-          <h2 class="fade-in mt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</h2>
+          <a href="121224.html" class="fade-in mt-8 text-balance text-3xl font-semibold tracking-tight text-whiye sm:text-4xl blinking-effect">12.12.2024</a>
         </div>
       </div>
     </div>