From 498d7449863b32c1158bd5451f98fa6fd495f328 Mon Sep 17 00:00:00 2001
From: Mik-TF <logismos@protonmail.ch>
Date: Tue, 4 Jun 2024 20:19:55 -0400
Subject: [PATCH] updated features

---
 src/navigation.js        |   5 +-
 src/pages/features.astro | 289 ++++++++++++++++++---------------------
 src/pages/index.astro    |   4 +-
 3 files changed, 136 insertions(+), 162 deletions(-)

diff --git a/src/navigation.js b/src/navigation.js
index 76033dc..0866ade 100644
--- a/src/navigation.js
+++ b/src/navigation.js
@@ -27,11 +27,10 @@ export const footerData = {
     {
       title: 'Features',
       links: [
-        { text: 'Hero AI Assistant', href: '/features' },
+        { text: 'Zero-OS', href: '/features' },
         { text: 'Mycelium Network', href: '/features' },
         { text: 'Quantum Safe Filesystem', href: '/features' },
-        { text: 'Self-Healing Zero-OS', href: '/features' },
-
+        { text: 'TFChain', href: '/features' },
       ],
     },
     {
diff --git a/src/pages/features.astro b/src/pages/features.astro
index 648e158..4355383 100644
--- a/src/pages/features.astro
+++ b/src/pages/features.astro
@@ -5,9 +5,12 @@ import Hero from '~/components/widgets/Hero.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import Steps2 from '~/components/widgets/Steps2.astro';
 import Layout from '~/layouts/PageLayout.astro';
+import Steps from '~/components/widgets/Steps.astro';
+import Content from '~/components/widgets/Content.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
-  title: 'About us',
+  title: 'Features',
 };
 ---
 
@@ -15,214 +18,186 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
-    tagline="About us"
-    image={{
-      src: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
-      alt: 'Caos Image',
-    }}
+    tagline="Features"
   >
     <Fragment slot="title">
-      Elevate your online presence with our <br />
-      <span class="text-accent dark:text-white highlight"> Beautiful Website Templates</span>
+      Our technology enables <br>a planetary-scale grid of interconnected nodes
+      <span class="text-accent dark:text-white highlight"> </span>
     </Fragment>
 
     <Fragment slot="subtitle">
-      Donec efficitur, ipsum quis congue luctus, mauris magna convallis mauris, eu auctor nisi lectus non augue. Donec
-      quis lorem non massa vulputate efficitur ac at turpis. Sed tincidunt ex a nunc convallis, et lobortis nisi tempus.
-      Suspendisse vitae nisi eget tortor luctus maximus sed non lectus.
+      <br><br>Over years of research and development, we've built a worldwide peer-to-peer and energy-efficient network of interconnected nodes with endless possibilities. <br><br>Mycelium Network allows for the shorter distance to be made at all time, Zero-OS allows for self-healing and autonomous cloud services, Quantum Safe File System ensures data is never lost and our blockchain TFChain makes sure transactions are fair and objective.<br> <br>Our stack is complete and we can be the foundational layer for most projects out there. <br><br> Let's build altogether. Let's together create the Unbreakable Internet.
     </Fragment>
   </Hero>
+  <!-- Content Widget **************** -->
 
-  <!-- Stats Widget ****************** -->
-
-  <Stats
-    title="Statistics about us"
-    stats={[
-      { title: 'Offices', amount: '4' },
-      { title: 'Employees', amount: '248' },
-      { title: 'Templates', amount: '12' },
-      { title: 'Awards', amount: '24' },
-    ]}
-  />
-
-  <!-- Features3 Widget ************** -->
-
-  <Features3
-    title="Our templates"
-    subtitle="Etiam scelerisque, enim eget vestibulum luctus, nibh mauris blandit nulla, nec vestibulum risus justo ut enim. Praesent lacinia diam et ante imperdiet euismod."
+  <Content
+    isReversed
+    id="about"
     columns={3}
-    isBeforeContent={true}
     items={[
       {
-        title: 'Educational',
-        description:
-          'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.',
-        icon: 'tabler:template',
+        icon: 'tabler:check',
+        description: 'Self-Healing',
       },
       {
-        title: 'Interior Design',
-        description:
-          'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.',
-        icon: 'tabler:template',
+        icon: 'tabler:check',
+        description: 'Autonomous',
       },
       {
-        title: 'Photography',
-        description:
-          'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
-        icon: 'tabler:template',
-      },
-    ]}
-  />
-
-  <!-- Features3 Widget ************** -->
-
-  <Features3
-    columns={3}
-    isAfterContent={true}
-    items={[
-      {
-        title: 'E-commerce',
-        description:
-          'Rutrum non odio at vehicula. Proin ipsum justo, dignissim in vehicula sit amet, dignissim id quam. Sed ac tincidunt sapien.',
-        icon: 'tabler:template',
-      },
-      {
-        title: 'Blog',
-        description:
-          'Nullam efficitur volutpat sem sed fringilla. Suspendisse et enim eu orci volutpat laoreet ac vitae libero.',
-        icon: 'tabler:template',
-      },
-      {
-        title: 'Business',
-        description:
-          'Morbi et elit finibus, facilisis justo ut, pharetra ipsum. Donec efficitur, ipsum quis congue luctus, mauris magna.',
-        icon: 'tabler:template',
-      },
-      {
-        title: 'Branding',
-        description:
-          'Suspendisse vitae nisi eget tortor luctus maximus sed non lectus. Cras malesuada pretium placerat. Nullam venenatis dolor a ante rhoncus.',
-        icon: 'tabler:template',
-      },
-      {
-        title: 'Medical',
-        description:
-          'Vestibulum malesuada lacus id nibh posuere feugiat. Nam volutpat nulla a felis ultrices, id suscipit mauris congue. In hac habitasse platea dictumst.',
-        icon: 'tabler:template',
-      },
-      {
-        title: 'Fashion Design',
-        description:
-          'Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus.',
-        icon: 'tabler:template',
+        icon: 'tabler:check',
+        description: 'Linux Kernel',
       },
     ]}
     image={{
-      src: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
+      src: '~/assets/images/partners.png',
       alt: 'Colorful Image',
+      loading: 'eager',
     }}
-  />
+  >
+    <Fragment slot="content">
+      <h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Zero-OS</h2>
+      <p>
+        Zero-OS is a stateless and lightweight operating system designed to host anything that runs on Linux, in a decentralized way. Once installed, Zero-OS locks the hardware and dedicates its capacity to the grid via the ThreeFold blockchain, TFChain.  Zero-OS requires no maintenant or administration and is thus accessible to all.
+      </p>
+    </Fragment>
 
-  <!-- Steps2 Widget ****************** -->
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content>
 
-  <Steps2
-    title="Our values"
-    subtitle="Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus. Nulla facilisi. Vestibulum malesuada lacus."
+  <!-- Content Widget **************** -->
+
+  <Content
+    id="about"
+    columns={3}
     items={[
       {
-        title: 'Customer-centric approach',
-        description:
-          'Donec id nibh neque. Quisque et fermentum tortor. Fusce vitae dolor a mauris dignissim commodo. Ut eleifend luctus condimentum.',
+        icon: 'tabler:check',
+        description: 'End-to-end Encrypted',
       },
       {
-        title: 'Constant Improvement',
-        description:
-          'Phasellus laoreet fermentum venenatis. Vivamus dapibus pulvinar arcu eget mattis. Fusce eget mauris leo.',
+        icon: 'tabler:check',
+        description: 'Shortest Path Route',
       },
       {
-        title: 'Ethical Practices',
-        description:
-          'Vestibulum imperdiet libero et lectus molestie, et maximus augue porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+        icon: 'tabler:check',
+        description: 'Decentralized Resiliency',
       },
     ]}
-  />
-
-  <!-- Steps2 Widget ****************** -->
-
-  <Steps2
-    title="Achievements"
-    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla."
-    isReversed={true}
-    callToAction={{
-      text: 'See more',
-      href: '/',
+    image={{
+      src: '~/assets/images/p2ppromotion.png',
+      alt: 'Colorful Image',
+      loading: 'eager',
     }}
+  >
+    <Fragment slot="content">
+      <h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Mycelium</h2>
+      <p>
+        Mycelium is the future of secure, efficient, and scalable networking. Mycelium connects nodes and enables efficient data transfer and communication without relying on a single central authority.
+      </p>
+      <p>
+        With Mycelium, data travels along the most efficient paths, reducing latency and optimizing resource utilization.
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content>
+
+  <Content
+    isReversed
+    id="about"
+    columns={3}
     items={[
       {
-        title: 'Global reach',
-        description: 'Nam malesuada urna in enim imperdiet tincidunt. Phasellus non tincidunt nisi, at elementum mi.',
-        icon: 'tabler:globe',
+        icon: 'tabler:check',
+        description: 'Ultra-Reliable + Scalable',
       },
       {
-        title: 'Positive customer feedback and reviews',
-        description:
-          'Cras semper nulla leo, eget laoreet erat cursus sed. Praesent faucibus massa in purus iaculis dictum.',
-        icon: 'tabler:message-star',
+        icon: 'tabler:check',
+        description: 'Hacker-Proof + Safe',
       },
       {
-        title: 'Awards and recognition as industry experts',
-        description:
-          'Phasellus lacinia cursus velit, eu malesuada magna pretium eu. Etiam aliquet tellus purus, blandit lobortis ex rhoncus vitae.',
-        icon: 'tabler:award',
+        icon: 'tabler:check',
+        description: 'Low Overhead + Self-Healing',
       },
     ]}
-  />
+    image={{
+      src: '~/assets/images/partners.png',
+      alt: 'Colorful Image',
+      loading: 'eager',
+    }}
+  >
+    <Fragment slot="content">
+      <h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Quantum-Safe File System</h2>
+      <p>
+        Quantum computers are theoretically capable of doing huge calculations in a short period of time and represent a great potential threat to future online safety. ThreeFold solves this future problem before it even becomes a reality. Our operating system can compress, encrypt, and disperse data across the grid ensuring redundancy.
+      </p>
+    </Fragment>
 
-  <!-- Features2 Widget ************** -->
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content>
 
-  <Features2
-    title="Our locations"
-    tagline="Find us"
-    columns={4}
+  <!-- Content Widget **************** -->
+
+  <Content
+    id="about"
+    columns={3}
     items={[
       {
-        title: 'EE.UU',
-        description: '1234 Lorem Ipsum St, 12345, Miami',
+        icon: 'tabler:check',
+        description: 'Distributed',
       },
       {
-        title: 'Spain',
-        description: '5678 Lorem Ipsum St, 56789, Madrid',
+        icon: 'tabler:check',
+        description: 'Public Ledger',
       },
       {
-        title: 'Australia',
-        description: '9012 Lorem Ipsum St, 90123, Sydney',
-      },
-      {
-        title: 'Brazil',
-        description: '3456 Lorem Ipsum St, 34567, São Paulo',
+        icon: 'tabler:check',
+        description: 'Permissionless',
       },
     ]}
-  />
+    image={{
+      src: '~/assets/images/p2ppromotion.png',
+      alt: 'Colorful Image',
+      loading: 'eager',
+    }}
+  >
+    <Fragment slot="content">
+      <h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">TFChain</h2>
+      <p>
+        TFChain is a blockchain developed by the ThreeFold Foundation that supports smart contracts and serves as the underlying technology and database for managing the grid. Built on Parity Substrate, it is responsible for storing information related to the grid, including nodes and cloud service provider details, digital twin registry, and more.
+      </p>
+    </Fragment>
 
-  <!-- Features2 Widget ************** -->
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content>
 
-  <Features2
-    title="Technical Support"
-    tagline="Contact us"
-    columns={2}
-    items={[
+
+
+  <!-- CallToAction Widget *********** -->
+
+  <CallToAction
+    actions={[
       {
-        title: 'Chat with us',
-        description:
-          'Integer luctus laoreet libero, auctor varius purus rutrum sit amet. Ut nec molestie nisi, quis eleifend mi.',
-        icon: 'tabler:messages',
-      },
-      {
-        title: 'Call us',
-        description:
-          'Mauris faucibus finibus orci, in posuere elit viverra non. In hac habitasse platea dictumst. Cras lobortis metus a hendrerit congue.',
-        icon: 'tabler:headset',
+        variant: 'primary',
+        target: '_blank',
+        text: 'Get INCA Nodes',
+        href: 'https://threefold.io',
+        icon: 'tabler:brand-minecraft',
       },
     ]}
-  />
+  >
+    <Fragment slot="title">Expand the Grid with Us</Fragment>
+
+    <Fragment slot="subtitle">
+      We have the technology for a planetary-scale alternative<br> to mainstream cloud and current monopolistic markets.<br><br>The Project INCA is the Unbreakable Internet.
+    </Fragment>
+  </CallToAction>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5012992..71555a7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -57,8 +57,8 @@ const metadata = {
   <Features
     id="features"
     tagline="Features"
-    title="The perfect DePIN Partner"
-    subtitle="We really believe that the project INCA is 100% compatible with the DePIN space: <br>we can work in parallel and under many if not all projects in the space!"
+    title="The Perfect Cloud Partner"
+    subtitle="We believe that the project INCA is 100% compatible with the DePIN space: <br>we can work in parallel and under many if not all projects in the space!"
     items={[
       {
         title: 'Zero-OS',