Add files via upload

index.html

@@ -120,6 +120,25 @@ <h1>
         Embrace True Digital Freedom
     </div>
 
+    <div class="future">
+        <div class="future-card">
+            <img class="future-img1" src="./img/f1.png">
+            A social network for sharing updates.
+        </div>
+        <div  class="future-card">
+            <img class="future-img2" src="./img/f2.png">
+            Global payments as easy as texting,<br>linking @username with wallet addresses.
+        </div>
+        <div  class="future-card">
+            <img class="future-img3" src="./img/f3.png">
+            Purchase content shares,<br>rewarding both buyers and creators.
+        </div>
+        <div  class="future-card">
+            <img class="future-img4" src="./img/f4.png">
+            Peer-to-peer chat based on cloud terminals.
+        </div>
+    </div>
+
     <div class="card">
 
         <div class="box" data-animation="zoomIn">

roadmap/index.html

@@ -58,7 +58,7 @@ <h1>The Future We Are Building</h1>
             </div>
             <div class="timeline__item-body" id="item1-ctrld" role="region" aria-labelledby="item1" aria-hidden="true">
                 <div class="timeline__item-body-content">
-                    <p class="timeline__item-p">We meticulously design the technical architecture of ICE CUBE 🧊 based on our vision.</p>
+                    <p class="timeline__item-p">We meticulously design the technical architecture of ICE CUBE 🧊 based on our vision. You can find <a href="https://forum.dfinity.org/t/proton-a-socialfi-dapp-totally-base-on-actor-model/24832" target="_blank" rel="noopener noreferrer">the post</a> that were published at that time on the developer forum.</p>
                 </div>
             </div>
         </div>

style.css

@@ -590,6 +590,49 @@ button:hover .button-text {
     width: 46%;
 }
 
+.future {
+    height: 100vh;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+.future-card {
+    width: 50%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.future .future-img1 {
+    margin-bottom: 1rem;
+    width: 15rem;
+}
+
+.future .future-img2 {
+    margin-bottom: 3rem;
+    width: 21rem;
+}
+
+.future .future-img3 {
+    margin-bottom: 1rem;
+    width: 15rem;
+}
+
+.future .future-img4 {
+    margin-bottom: 3rem;
+    width: 25rem;
+}
+
 footer {
     display: flex;
     flex-direction: row;
@@ -821,4 +864,35 @@ footer {
         margin-top: 10px;
     }
 
+    .future {
+        height: 117vh;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: column;
+    }
+
+    .future-card {
+        width: 100%;
+        font-size: 1.2rem;
+    }
+
+    .future .future-img1 {
+        margin-bottom: 0;
+        width: 13rem;
+    }
+
+    .future .future-img2 {
+        margin-bottom: 1rem;
+        width: 15rem;
+    }
+
+    .future .future-img3 {
+        margin-bottom: 1rem;
+        width: 13rem;
+    }
+
+    .future .future-img4 {
+        margin-bottom: 1rem;
+        width: 18rem;
+    }
 }