gif

app.py

@@ -5,6 +5,82 @@ import glob
 import os
 import random
 
+
+def resources_section():
+    st.markdown("## Additional Resources")
+    st.write("For more information and updates, explore our blog posts or join our community channels:")
+
+    # Define a custom HTML string to create dark-themed card-style links in a flexbox layout
+    resources_html = """
+    <style>
+    .resource-cards {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      margin-top: 10px;
+    }
+    .resource-card {
+      background-color: #1f1f1f; /* Dark card background */
+      border: 1px solid #333333;
+      border-radius: 6px;
+      width: 220px;
+      padding: 12px;
+      text-align: center;
+      transition: box-shadow 0.2s ease;
+    }
+    .resource-card:hover {
+      box-shadow: 0 4px 8px rgba(255, 255, 255, 0.15);
+    }
+    .resource-card h4 {
+      margin: 0;
+      color: #ffffff;
+    }
+    .resource-card p {
+      color: #cccccc;
+      margin: 6px 0 0 0;
+      font-size: 14px;
+    }
+    .resource-card a {
+      text-decoration: none;
+      color: inherit; /* Inherits card's text color */
+    }
+    </style>
+
+    <div class="resource-cards">
+      <!-- Blog Post 1 -->
+      <a href="https://example.com/blog-post-1" target="_blank" class="resource-card">
+        <h4>Blog Post 1</h4>
+        <p>World Model Challenge Launch</p>
+      </a>
+
+      <!-- Blog Post 2 -->
+      <a href="https://example.com/blog-post-2" target="_blank" class="resource-card">
+        <h4>Blog Post 2</h4>
+        <p>Challenge Updates and Technical Details</p>
+      </a>
+
+      <!-- GitHub -->
+      <a href="https://github.com/1x-technologies/world-model-challenge" target="_blank" class="resource-card">
+        <h4>GitHub Repository</h4>
+        <p>View code and issues</p>
+      </a>
+
+      <!-- Hugging Face -->
+      <a href="https://huggingface.co/1x-technologies" target="_blank" class="resource-card">
+        <h4>Hugging Face Page</h4>
+        <p>Datasets and Models</p>
+      </a>
+
+      <!-- Discord -->
+      <a href="https://discord.gg/your-invite" target="_blank" class="resource-card">
+        <h4>Discord Channel</h4>
+        <p>Join the discussion</p>
+      </a>
+    </div>
+    """
+
+    st.markdown(resources_html, unsafe_allow_html=True)
+
 def scoring_section():
     # Title
     st.markdown("## Scoring")
@@ -242,17 +318,8 @@ def main():
         """
     )
     st.markdown("---")
-    st.markdown("## Resources")
-    st.markdown(
-        """
-        For more information and updates, please check out our previous blog posts and join our communities:
-        - [Blog Post: World Model Challenge Launch](https://example.com/blog-post-1)
-        - [Blog Post: Challenge Updates and Technical Details](https://example.com/blog-post-2)
-        - [GitHub Repository](https://github.com/1x-technologies/world-model-challenge)
-        - [Hugging Face Page](https://huggingface.co/1x-technologies)
-        - [Discord Channel](https://discord.gg/your-invite)
-        """
-    )
+    resources_section()
+ 
 
 
 if __name__ == '__main__':