...

poc_threefold/data.ms/VERSION

@@ -0,0 +1 @@
+1.10.3

poc_threefold/data.ms/instance-uid

@@ -0,0 +1 @@
+619301e7-3382-4a54-a5dc-f6a9389ca061

poc_threefold/static/css/faq.css

@@ -1,7 +1,3 @@
-/* Import Google Fonts - if not already imported in ourworld.css */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-/* Container styling */
 .faq-container {
     display: flex;
     gap: 2rem;
@@ -15,18 +11,18 @@
     flex: 1;
     padding-right: 2rem;
     border-right: 1px solid #a4b6ba;
+    font-family: var(--font-family);
 }
 
 /* Base styles for markdown content */
 .markdown-content {
-    font-family: 'Inter';
     font-weight: 200;
 }
 
 /* Heading styles */
 .markdown-content h2,
 .markdown-content h3 {
-    font-family: 'Inter';
+    font-family: var(--font-family);
 }
 
 /* Light theme colors */
@@ -65,8 +61,8 @@
 .markdown-content p,
 .markdown-content ul,
 .markdown-content li {
-    font-family: 'Inter', sans-serif;
     font-weight: 400;
+    font-family: var(--font-family);
 }
 
 /* Make list items and paragraphs consistent size */
@@ -89,18 +85,23 @@
 /* FAQ section styling */
 .faq-section {
     flex: 1;
+    font-family: var(--font-family);
+}
+
+.faq-section h4 {
+    font-family: var(--font-family);
 }
 
 details {
     border-bottom: 1px solid #ddd;
     padding: 1em 0;
     margin: 0;
+    font-family: var(--font-family);
 }
 
 summary {
-    font-family: 'Inter', sans-serif;
     font-size: 0.8rem;
-    font-weight: 200;
+    font-family: var(--font-family);
     cursor: pointer;
     list-style: none;
     margin: 0;
@@ -125,20 +126,20 @@ details[open] summary {
 }
 
 details p {
-    font-family: 'Inter', sans-serif;
     margin: 0.5em 0 0 0;
     color: #666;
     font-size: 0.8rem;
     line-height: 1.6;
     font-weight: 400;
     padding-left: 1.5rem;  /* Added indentation for FAQ answers */
+    font-family: var(--font-family);
 }
 
 /* Links styling */
 .markdown-content a,
 details a {
     font-size: 0.75rem;  /* Match paragraph font size */
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-weight: 200;
     text-decoration: none;
 }

poc_threefold/static/css/ourworld.css

@@ -1,5 +1,5 @@
 /* Import Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
 
 :root {
     /* Light theme variables */
@@ -18,6 +18,9 @@
     --hero-subtitle-text-light: white;
     --input-border-light:  var(--hero-background2-light);
 
+    --card-bg: rgba(20, 20, 20, 0.6);
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
     /* Dark theme variables */
     --body-background-dark: #1a1a1a;
     --body-text-dark: #ffffff;
@@ -51,6 +54,11 @@
     --input-border: var(--input-border-dark);
 }
 
+* {
+  font-family: var(--font-family);
+}
+
+
 /* Light theme class */
 .light-theme {
     --body-background: var(--body-background-light);
@@ -71,40 +79,36 @@
 
 /* Heading styles - using Inter */
 h1 {
-    font-family: 'Inter', sans-serif;
     font-size: 1.2rem;
     margin-bottom: 1rem;
     font-weight: 700;
     letter-spacing: -0.03em;
-    line-height: 1.1;
+    line-height: 1.5;
     text-transform: uppercase;
 }
 
 h2 {
-    font-family: 'Inter', sans-serif;
     font-size: 1.1rem;
     margin-bottom: 1rem;
     font-weight: 600;
     letter-spacing: -0.02em;
-    line-height: 1.2;
+    line-height: 1.5;
 }
 
 h3 {
-    font-family: 'Inter', sans-serif;
     font-size: 1rem;
     margin-bottom: 0.8rem;
     font-weight: 600;
     letter-spacing: -0.01em;
-    line-height: 1.3;
+    line-height: 1.5;
 }
 
 h4 {
-    font-family: 'Inter', sans-serif;
     font-size: 1rem;
     margin-bottom: 0.8rem;
     font-weight: 500;
     letter-spacing: -0.005em;
-    line-height: 1.4;
+    line-height: 1.5;
 }
 
 p ul {
@@ -117,9 +121,7 @@ p li {
     margin-bottom: 0.75em;
 }
 
-/* Paragraph styles - using Inter */
+p {    
-p {
-    font-family: 'Inter', sans-serif;
     font-size: 1rem;
     line-height: 1.6;
     margin-bottom: 1.5rem;
@@ -127,9 +129,7 @@ p {
     font-weight: 200;
 }
 
-/* Optional: styling for small or additional text */
+small {    
-small {
-    font-family: 'Inter', sans-serif;
     font-size: 0.9rem;
     font-weight: 200;
     color: #666;
@@ -147,10 +147,6 @@ a:hover {
     text-decoration: underline;
 }
 
-/* Navigation styles - using Inter */
-nav {
-    font-family: 'Inter';
-}
 
 nav a {
     font-size: 1rem;
@@ -172,7 +168,6 @@ main {
 }    
 
 body {
-    font-family: 'Inter';
     background-color: var(--body-background);
     color: var(--body-text);
     min-height: 100vh;

poc_threefold/static/css/tf.css

@@ -0,0 +1,316 @@
+:root {
+  --primary-bg: #0a0a0a;
+  --secondary-bg: #141414;
+  --text-color: #ffffff;
+  --text-muted: #a0a0a0;
+  --accent-color: #00abf4;
+  --section-padding: 3.6rem 1.2rem;
+  --nav-height: 42px;
+  --card-bg: rgba(20, 20, 20, 0.6);
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+* {
+  font-family: var(--font-family);
+}
+
+body {
+  font-family: var(--font-family);
+  line-height: 1.6;
+  background-color: var(--primary-bg);
+  color: var(--text-color);
+  margin: 0;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 0.9rem;
+}
+
+header {
+  background-color: rgba(10, 10, 10, 0.95);
+  backdrop-filter: blur(10px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--nav-height);
+  z-index: 1000;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+header nav {
+  max-width: 1400px;
+  margin: 0 auto;
+  height: 100%;
+}
+
+header nav ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  gap: 1.5rem;
+}
+
+header nav ul li a {
+  text-decoration: none;
+  color: var(--text-muted);
+  font-size: 0.57rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 0.3rem 0;
+  position: relative;
+  font-family: var(--font-family);
+}
+
+header nav ul li a:hover {
+  color: var(--text-color);
+}
+
+header nav ul li a::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background-color: var(--accent-color);
+  transition: width 0.3s ease;
+}
+
+header nav ul li a:hover::after {
+  width: 100%;
+}
+
+main.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--nav-height) 1.2rem 0;
+}
+
+section {
+  padding: var(--section-padding);
+  position: relative;
+}
+
+section#why {
+  min-height: calc(100vh - var(--nav-height));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: radial-gradient(circle at center, #141414 0%, #0a0a0a 100%);
+}
+
+section#why h1 {
+  font-family: var(--font-family);
+  font-size: 2.4rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 1.2rem;
+  background: linear-gradient(90deg, #ffffff 0%, #a0a0a0 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  max-width: 1000px;
+}
+
+section#why p {
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  max-width: 800px;
+  margin: 0.9rem auto;
+  font-weight: 300;
+}
+
+section#products {
+  background-color: var(--secondary-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+section#products::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+}
+
+section#products h2 {
+  font-family: var(--font-family);
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin-bottom: 0.9rem;
+  color: var(--text-color);
+  margin-left: 2.4rem;
+}
+
+section#products p {
+  font-family: var(--font-family);
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  max-width: 900px;
+  margin-bottom: 2.4rem;
+  font-weight: 300;
+  margin-left: 2.4rem;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  max-width: 1150px;
+  margin: 0 auto;
+  padding: 0 0.5rem;
+}
+
+.product-card {
+  background: var(--card-bg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 0.9rem 0.6rem;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.product-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.product-card h3 {
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-color);
+}
+
+.product-card p {
+  font-family: var(--font-family);
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+[role="button"] {
+  font-family: var(--font-family);
+  display: inline-block;
+  padding: 0.6rem 1.5rem;
+  background: var(--accent-color);
+  color: white;
+  text-decoration: none;
+  border-radius: 50px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+  font-size: 0.79rem;
+  margin-top: 1.2rem;
+}
+
+[role="button"]:hover {
+  background: #0090d4;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 171, 244, 0.2);
+}
+
+section#dive-deeper {
+  text-align: center;
+  background: linear-gradient(45deg, #141414, #1a1a1a);
+  min-height: 30vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+section#dive-deeper h2 {
+  font-family: var(--font-family);
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin-bottom: 1.2rem;
+  background: linear-gradient(90deg, #ffffff, #a0a0a0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+footer {
+  text-align: center;
+  padding: 1.8rem 0.6rem;
+  background-color: var(--secondary-bg);
+  color: var(--text-muted);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+footer ul {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  gap: 1.2rem;
+  margin-top: 0.9rem;
+}
+
+footer ul li a {
+  font-family: var(--font-family);
+  text-decoration: none;
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  transition: color 0.3s ease;
+}
+
+footer ul li a:hover {
+  color: var(--text-color);
+}
+
+@media (max-width: 1200px) {
+  .product-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --section-padding: 2.4rem 0.9rem;
+  }
+
+  section#why h1 {
+    font-size: 1.5rem;
+  }
+  
+  section#why p {
+    font-size: 0.79rem;
+  }
+
+  section#products h2 {
+    font-size: 1.5rem;
+  }
+
+  header nav ul {
+    padding: 0 0.6rem;
+    gap: 0.9rem;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    overflow-x: auto;
+  }
+
+  header nav ul::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .product-grid {
+    grid-template-columns: 1fr;
+  }
+}

poc_threefold/tf.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ThreeFold Products</title>
+  <link rel="icon" type="image/svg+xml" href="static/img/favicon.svg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;450;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="static/css/tf.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="#why">Why</a></li>
+        <li><a href="#products">Products</a></li>
+        <li><a href="#info">Info</a></li>
+        <li><a href="#get-3nodes">Get 3Nodes</a></li>
+        <li><a href="#newsroom">Newsroom</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main class="container">
+    <section id="why">
+      <h1>A Secure & Sovereign Infrastructure Layer for the Internet</h1>
+      <p>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>ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.</p>
+      <a href="#dive-deeper" role="button">Dive Deeper</a>
+    </section>
+    <section id="products">
+      <h2>What We've Built</h2>
+      <p>At Threefold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.</p>
+      <div class="product-grid">
+        <div class="product-card">
+          <h3>TF DASHBOARD</h3>
+          <p>A Graphical user interface (GUI) provided by ThreeFold for users to access and manage their ThreeFold Grid resources</p>
+        </div>
+        <div class="product-card">
+          <h3>TF CONNECT APP</h3>
+          <p>Your gateway to the ThreeFold ecosystem. Manage your digital assets and identity in one secure place.</p>
+        </div>
+        <div class="product-card">
+          <h3>3NODES</h3>
+          <p>The hardware backbone of the ThreeFold Grid, providing distributed compute and storage capacity.</p>
+        </div>
+        <div class="product-card">
+          <h3>TF DAO</h3>
+          <p>A decentralized governance system enabling community-driven decision making for the ThreeFold ecosystem.</p>
+        </div>
+        <div class="product-card">
+          <h3>TF CHAIN</h3>
+          <p>Our blockchain technology powering the decentralized internet infrastructure.</p>
+        </div>
+        <div class="product-card">
+          <h3>GATEWAY NODES</h3>
+          <p>Entry points to the ThreeFold Grid, enabling secure access to distributed services.</p>
+        </div>
+        <div class="product-card">
+          <h3>ZERO-OS V3</h3>
+          <p>Our stateless and autonomous operating system designed for secure and efficient computing.</p>
+        </div>
+        <div class="product-card">
+          <h3>MYCELIUM</h3>
+          <p>A decentralized network protocol enabling seamless communication across the Grid.</p>
+        </div>
+        <div class="product-card">
+          <h3>QUANTUM SAFE STORAGE</h3>
+          <p>Advanced data storage system ensuring the highest level of security and redundancy.</p>
+        </div>
+      </div>
+    </section>
+    <section id="dive-deeper">
+      <h2>Build the Internet of Tomorrow, Today.</h2>
+      <a href="#dive-deeper" role="button">Dive Deeper</a>
+    </section>
+  </main>
+  <footer>
+    <p>&copy; ThreeFold, All rights reserved.</p>
+    <ul>
+      <li><a href="#terms">Terms & Conditions</a></li>
+      <li><a href="#privacy">Privacy Policy</a></li>
+    </ul>
+  </footer>
+</body>
+</html>