Merge pull request 'development_update' (#8) from development_update into development

Reviewed-on: tfgrid/www_projectinca#8

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' },
-
       ],
     },
     {
@@ -45,8 +44,8 @@ export const footerData = {
     {
       title: 'About',
       links: [
-        { text: 'Meet the Team', href: '/about' },
+        { text: 'Project INCA', href: '/about' },
-        { text: 'Our Values', href: '/about' },
+        { text: 'ThreeFold Grid', href: 'https://threefold.io' },
       ],
     },
     {

src/pages/about.astro

@@ -17,7 +17,7 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
-    tagline="About Us"
+    tagline="About"
     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',
@@ -36,12 +36,13 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
-    title="A Large-Scale Project"
+    title="A Planetary-Scale Project"
     stats={[
-      { title: 'Offices', amount: '5' },
-      { title: 'Employees', amount: '+80' },
       { title: 'Grid Generation', amount: '4th' },
+      { title: 'Offices', amount: '5' },
       { title: 'Partners', amount: '+20' },
+      { title: 'Employees', amount: '+80' },
+
     ]}
   />
 
@@ -231,7 +232,7 @@ const metadata = {
 
   <Features2
     title="Our Offices"
-    tagline="Find us"
+    tagline="Worldwide"
     columns={2}
     items={[
       {
@@ -242,18 +243,14 @@ const metadata = {
         title: 'Egypt',
         description: '9 Al Wardi street, Hegaz, Heliopolis, Cairo 11341',
       },
-      {
-        title: 'India',
-        description: 'Remote Office',
-      },
-      {
-        title: 'Mauritius',
-        description: 'Remote Office',
-      },
       {
         title: 'United Arab Emirates',
         description: 'Warehouse 88:89, Al Jadaf, P.O. Box 283182, Dubai',
       },
+      {
+        title: 'India & Mauritius',
+        description: 'Remote Offices',
+      },
     ]}
   />
 

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"
+    tagline="Features"
-    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',
-    }}
   >
     <Fragment slot="title">
-      Elevate your online presence with our <br />
+      Our technology enables <br>a planetary-scale grid of interconnected nodes
-      <span class="text-accent dark:text-white highlight"> Beautiful Website Templates</span>
+      <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
+      <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.
-      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.
     </Fragment>
   </Hero>
+  <!-- Content Widget **************** -->
 
-  <!-- Stats Widget ****************** -->
+  <Content
-
+    isReversed
-  <Stats
+    id="about"
-    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."
     columns={3}
-    isBeforeContent={true}
     items={[
       {
-        title: 'Educational',
+        icon: 'tabler:check',
-        description:
+        description: 'Self-Healing',
-          'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.',
-        icon: 'tabler:template',
       },
       {
-        title: 'Interior Design',
+        icon: 'tabler:check',
-        description:
+        description: 'Autonomous',
-          'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.',
-        icon: 'tabler:template',
       },
       {
-        title: 'Photography',
+        icon: 'tabler:check',
-        description:
+        description: 'Linux Kernel',
-          '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',
       },
     ]}
     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
+  <!-- Content Widget **************** -->
-    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
+    id="about"
+    columns={3}
     items={[
       {
-        title: 'Customer-centric approach',
+        icon: 'tabler:check',
-        description:
+        description: 'End-to-end Encrypted',
-          'Donec id nibh neque. Quisque et fermentum tortor. Fusce vitae dolor a mauris dignissim commodo. Ut eleifend luctus condimentum.',
       },
       {
-        title: 'Constant Improvement',
+        icon: 'tabler:check',
-        description:
+        description: 'Shortest Path Route',
-          'Phasellus laoreet fermentum venenatis. Vivamus dapibus pulvinar arcu eget mattis. Fusce eget mauris leo.',
       },
       {
-        title: 'Ethical Practices',
+        icon: 'tabler:check',
-        description:
+        description: 'Decentralized Resiliency',
-          'Vestibulum imperdiet libero et lectus molestie, et maximus augue porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
       },
     ]}
-  />
+    image={{
-
+      src: '~/assets/images/p2ppromotion.png',
-  <!-- Steps2 Widget ****************** -->
+      alt: 'Colorful Image',
-
+      loading: 'eager',
-  <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: '/',
     }}
+  >
+    <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',
+        icon: 'tabler:check',
-        description: 'Nam malesuada urna in enim imperdiet tincidunt. Phasellus non tincidunt nisi, at elementum mi.',
+        description: 'Ultra-Reliable + Scalable',
-        icon: 'tabler:globe',
       },
       {
-        title: 'Positive customer feedback and reviews',
+        icon: 'tabler:check',
-        description:
+        description: 'Hacker-Proof + Safe',
-          'Cras semper nulla leo, eget laoreet erat cursus sed. Praesent faucibus massa in purus iaculis dictum.',
-        icon: 'tabler:message-star',
       },
       {
-        title: 'Awards and recognition as industry experts',
+        icon: 'tabler:check',
-        description:
+        description: 'Low Overhead + Self-Healing',
-          'Phasellus lacinia cursus velit, eu malesuada magna pretium eu. Etiam aliquet tellus purus, blandit lobortis ex rhoncus vitae.',
-        icon: 'tabler:award',
       },
     ]}
-  />
+    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
+  <!-- Content Widget **************** -->
-    title="Our locations"
+
-    tagline="Find us"
+  <Content
-    columns={4}
+    id="about"
+    columns={3}
     items={[
       {
-        title: 'EE.UU',
+        icon: 'tabler:check',
-        description: '1234 Lorem Ipsum St, 12345, Miami',
+        description: 'Distributed',
       },
       {
-        title: 'Spain',
+        icon: 'tabler:check',
-        description: '5678 Lorem Ipsum St, 56789, Madrid',
+        description: 'Public Ledger',
       },
       {
-        title: 'Australia',
+        icon: 'tabler:check',
-        description: '9012 Lorem Ipsum St, 90123, Sydney',
+        description: 'Permissionless',
-      },
-      {
-        title: 'Brazil',
-        description: '3456 Lorem Ipsum St, 34567, São Paulo',
       },
     ]}
-  />
+    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"
+  <!-- CallToAction Widget *********** -->
-    columns={2}
+
-    items={[
+  <CallToAction
+    actions={[
       {
-        title: 'Chat with us',
+        variant: 'primary',
-        description:
+        target: '_blank',
-          'Integer luctus laoreet libero, auctor varius purus rutrum sit amet. Ut nec molestie nisi, quis eleifend mi.',
+        text: 'Get INCA Nodes',
-        icon: 'tabler:messages',
+        href: 'https://threefold.io',
-      },
+        icon: 'tabler:brand-minecraft',
-      {
-        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',
       },
     ]}
-  />
+  >
+    <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>

src/pages/index.astro

@@ -57,8 +57,8 @@ const metadata = {
   <Features
     id="features"
     tagline="Features"
-    title="The perfect DePIN Partner"
+    title="The Perfect Cloud 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!"
+    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',