ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modify sections

Browse Source
This commit is contained in:
samaradel
2021-09-17 07:46:08 +02:00
parent f3bb478404
commit 80711ed92e
14 changed files with 630 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/page/home/blogs/main/main.md
View File

@@ -1,5 +1,4 @@
---
id: blog_main
title: Discover what makes ThreeFold work
title: Featured Stories
---
Our core team holds 20+ years experience in the tech industry. After many successful exits, we realized that the only way to achieve a planet positive and data sovereign Internet was to start from scratch. So we did.

39
content/page/home/blogs/smart_contract_blog/smart_contract_blog.md
View File

@@ -1,40 +1,5 @@
---
id: smart_contract_blog
title: A Smart Contract for all IT workloads
tags: [threefold_grid, technology]
category: [farming, cloud, foundation, aci, twin]
image: ./smart_contract_blog.png
image_caption: smart contract for IT
excerpt: The Smart Contract for IT allows you, your company or your community to execute the storage and running of your files and applications securely with consensus and automatic billing.
author: Sacha Obeegadoo
authorImg: ./sacha_obeegadoo.jpg
path: /blog/post/smart_contract_blog/
created: 2021-05-25
autherUrl: /people/sacha_obeegadoo/
image: 'https://via.placeholder.com/300'
---
## Story behind the Smart Contract
ThreeFold was inspired by the blockchain burst when it was created in 2016. After doing a comprehensive scan of the technological space we realised that Blockchain holds the best technology to store (1) Smart Contracts and (2) Transactions in an immutable way. We created our own blockchain database: Rivine to host the Smart Contract layer before switching to the Parity Substrate of Polkadot and our Transactional blockchain to the Stellar Network.
While we use blockchain technology, ThreeFold is much more than just a blockchain as we apply many more revolutionary technologies. And we decided to use the Parity substrate as we don’t see the need to create something if there’s already great technologies out there that we can already use. Today we’re proud of our Smart Contract for IT layer and approach the ThreeFold Grid v3 release this year which will expose its full potential to interact with the primitives of the grid.
## So what is this Smart Contract for IT about?
The Smart Contract for IT allows you, your company or your community to execute the storage and running of your files and applications securely with consensus and automatic billing. You could compare it as a fingerprint check and your data would be accessible only if presenting your private key (fingerprint). Let’s maybe go through the process for a better idea of how this works.
The smart contracts are like recipes for chefs to cook exactly what you want. In that sense they need to be very accurate and as descriptive as possible to deliver what you need. In the case of ThreeFold, the smart contracts would define different sets of Internet resources you would need to store files, run applications, or communicate across the network.
Whenever you want to reserve more resources to store your latest album or run your applications, you will define the resources you need to your 3Bot or Digital Twin (your personal virtual system administrators) which will then look at different smart contracts that are available and choose the most appropriate package. For e.g. Reserve 3 PB of Storage in Switzerland across 7 nodes.
Following that, your 3Bot or Digital Twin will create and register the smart contract in the blockchain database in a few seconds, providing you with all your specific needs. It will also store and secure some instructions to the BCDB for the nodes to meet smart contract completion.
ThreeFold had to make sure that user data would remain ultra-secure. Inspired by storage and communication algorithms used in space, we integrated it between the Smart Contract layer and Zero OS. The algorithm splits data into unrecognizable ‘slices’ that are distributed via network connections to different nodes locally or across the world, and that can be reconstructed only with your fingerprint.
## More than the average Smart Contract
Via your Smart Contract for IT, you can also define a consensus mechanism and create multi-signatures for smart contract execution or completion to deliver appropriate digital services in for example work related activities.
The beauty of the Smart Contract for IT is that it can work with thousands of connected nodes for the proper execution of any digital requirements on the infrastructure, verify if consensus was reached or not, download the right files to execute the smart contract and verify them, make sure that no hacker or outsider can ever gain access or influence its execution and more.
If you want to learn more about ThreeFold’s Smart Contract for IT, read more [here](https://info.threefold.io/#/internet4__smartcontract_it).
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates provident nisi perspiciatis blanditiis, iusto temporibus beatae, officia odio veniam qui perferendis accusantium quia vel eos dolores veritatis doloribus deserunt quam!

26
content/page/home/blogs/threefold_regenerates/threefold_regenerates.md
View File

@@ -1,27 +1,5 @@
---
id: threefold_regenerates
title: ThreeFold’s planet positive plan
tags: [threefold_grid, digital_twin, why, technology, farming]
category: [farming, cloud, foundation, aci, twin]
image: ./threefold_regenerates.png
image_caption: planet positive plan
excerpt: ThreeFold is taking not just a sustainable approach, we’re setting the plan for a planet positive Internet.
author: Sam Taggart
created: 2021-05-15
authorImg: ./sam_taggart.jpg
path: /blog/post/threefold_regenerates/
autherUrl: /people/sam_taggart/
image: 'https://via.placeholder.com/300'
---
There’s no question that climate change is one of the biggest, if not the biggest threats facing humanity today. If we care at all about future generations and the health of our planet, we have no choice but to address these threats, and fast. That’s why one of our biggest aims is to lower the energy usage of our digital lives. But ThreeFold is taking not just a sustainable approach, we’re setting the plan for a planet positive Internet.
<br/>
<br/>
Recently, we released information on how our infrastructure saves up-to-90% on energy consumption compared to existing models. We achieve this mainly thanks to an extremely efficient storage system and the concept of a Digital Twin.
<br/>
<br/>
From [a storage standpoint](https://wiki.threefold.io/#/threefold__energy_savings_storage), we reduce energy by avoiding copies, implementing a multi-layer system, not using fast disks, through read/write caching, and more. With [Digital Twin](https://wiki.threefold.io/#/threefold__energy_savings_digital_twin), we have taken a very different approach to how we exist in today’s digital world. Rather than existing 100 times in a huge system of client-server architecture, now we exist only once. We believe that we can run 25 Digital Twins with [the same energy](https://wiki.threefold.io/#/threefold__bulb_comparison_twin) as used by one light bulb.
<br/>
<br/>
Saving energy is one thing, but there will still be remaining energy. This needs to be offset by carbon credits. Now, in order to regenerate our planet, we [work together with Take Action Global](https://wiki.threefold.io/#/threefold__carbon_negative) to let students farm carbon credits. This has the potential to offset energy usage 100% by the end of 2021, and we have as an aim to take 2x more carbon out of the air than we put in.
<br/>
<br/>
Our planet needs better solutions across industries. No more talking. Now is the time to act.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates provident nisi perspiciatis blanditiis, iusto temporibus beatae, officia odio veniam qui perferendis accusantium quia vel eos dolores veritatis doloribus deserunt quam!

54
content/page/home/blogs/zero_os_blog/zero_os_blog.md
View File

@@ -1,55 +1,5 @@
---
id: zero_os_blog
title: A scalable and secure operating system
tags: [threefold_grid, technology, ]
category: [farming, cloud, foundation, twin]
image: ./zero_os_blog.png
image_caption: zero os
excerpt: To create a new Internet from scratch, ThreeFold had to start at the operating system level.
author: Sacha Obeegadoo
created: 2021-05-18
authorImg: ./sacha_obeegadoo.jpg
path: /blog/post/zero_os_blog/
autherUrl: /people/sacha_obeegadoo/
image: 'https://via.placeholder.com/300'
---
Just like a brain is an interconnected network of neurons, the Internet (or internet) is a global interconnected network of computers and devices that communicate with each other via the [Internet protocol suite](https://en.wikipedia.org/wiki/Internet_protocol_suite) (TCP/IP). The communications infrastructure of the Internet consists of hardware components and a system of software layers that control various aspects of the architecture.
<br/>
<br/>
To create a new Internet from scratch, ThreeFold had to start at the operating system (OS) level. An operating system is a software that manages computer hardware, software resources, and provides common services for computer programs. And this is how Zero OS was born
## What makes Zero OS special?
Zero OS is a stateless and lightweight operating system. Given it has no shell, remote or server interface, it is much safer than the big majority of the OSs on the market. When storing your data on Zero OS, it is fingerprinted and made available only when requested by you or those you provide access to.
<br/>
<br/>
The state of an application represents its state of being in a given moment in time. Think of a stateless transaction as vending machines, a single request and a response. In ThreeFold’s Internet infrastructure, this can be represented as data being accessible only when requested.
The only way to access data on Zero OS is via the private key (or fingerprint) of a user. In that sense, the data is not accessible unless the data owner requests access to it.
## How does Zero OS apply to developers?
Thanks to its lightweight architecture, Zero OS is a perfect fit to run microservices architectures and emerging IT workloads such as IoT, Blockchains, Big Data, and more. A key benefit of microservices architecture is the freedom it offers you to choose the best runtime for the task at hand.
<br/>
<br/>
Let’s take the example of decentralizing service-oriented developing teams. A common challenge there is that most of the time they don’t really understand the applications they are exposing. But no one knows the data infrastructure of the applications better than those who craft them.
<br/>
<br/>
ThreeFold permits decentralized developer teams with the ability to share keys (access) to the developing environment on Zero OS and the gateways to the world wide web within the secure peer-to-peer overlay network. This is game changing. Also with all the automation frameworks provided, it creates the perfect environment to develop current and emerging technologies.
<br/>
<br/>
Put shortly, decentralized development and integration is now officially an organizational or cultural change, not a technical one anymore.
## Zero OS allows anyone to provide sovereign capacity
Given stateless systems separate the OS configuration and user data, Zero OS simplifies the maintenance and the deployment of digital workloads, while making it impossible to hack into user data on a hardware level.
<br/>
<br/>
3Nodes provide all the storage, compute and network primitives for a new internet infrastructure. Given they are booted with Zero OS, anyone can now participate in the Internet economy without jeopardizing user data sovereignty and security.
<br/>
<br/>
Conclusively, Zero OS is ultra secure, perfect to develop current and future technologies, and enables anyone to take part in the planet positive and data sovereign Internet brought by ThreeFold.
<br/>
<br/>
Learn more about Zero OS and the grid primitives [here](https://info.threefold.io/#/internet4__tfgrid_primitives).
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates provident nisi perspiciatis blanditiis, iusto temporibus beatae, officia odio veniam qui perferendis accusantium quia vel eos dolores veritatis doloribus deserunt quam!

2
content/page/home/brandPanel/brandPanel.md
View File

@@ -4,6 +4,8 @@ title: ZERO OS
subtitle: ''
sourceUrl: https://t.me/threefold
btnTxt: Get a Node
button2: Learn More
link2: '#'
image: zero_os.png # src/assets/brandPanel/..
---

30
content/page/home/cta/cta.md
View File

@@ -1,18 +1,18 @@
---
id: home_cta
title: Join the ThreeFold Movement
button: ThreeFold Connect
link: https://wiki.threefold.io/#/threefold__threefold_connect
button2: Buy the Token
link2: https://threefold.io/info/threefold#/threefold__how_to_buy_and_sell
button3: Grow the Grid
link3: https://threefold.io/farming
button4: Stay Updated
link4: https://t.me/threefoldnews
title: THE SOURCE CODE FOR
subtitle: A PEOPLE’S INTERNET
image: ./number_bg2.png
button: How it works
link: '#'
button2: Expand the grid
link2: '#'
button3: Peer-to-peer cloud
link3: '#'
button4: Developer Grants
link4: '#'
button5: The ThreeFold Token
link5: '#'
button6: Community Forum
link6: '#'
---
We are not a company, but more like humans helping other humans. Our mission is bold and motivates every step we take.
<!-- button2: Spread our Message
link: ''
button3: Join our Community
link: '' -->

BIN
content/page/home/cta/number_bg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

433
src/components/custom/sections/CallToAction.vue
View File

@@ -1,5 +1,10 @@
<template>
<section class="pb-10 px-4 bg-cover text-center">
<section
class="pb-10 px-4 bg-cover text-center"
:class="{
pink: id == 'home',
}"
>
<!-- why -->
<div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
<h2
@@ -112,15 +117,23 @@
<!-- home -->
<div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'home'">
<div class="w-full mx-auto mt-10 py-16" v-else-if="id == 'home'">
<h2
v-if="cta.title"
class="text-3xl mb-2 uppercase leading-tight font-semibold font-heading"
class="text-3xl uppercase leading-tight font-semibold font-heading"
>
{{ cta.title }}
</h2>
<div v-html="cta.content" class="mt-6 mb-8 text-gray-800"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<h2
v-if="cta.subtitle"
class="text-3xl uppercase leading-tight font-semibold font-heading"
>
{{ cta.subtitle }}
</h2>
<g-image :src="cta.image.src" />
<!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a
@click="toggleModal"
class="
@@ -140,173 +153,246 @@
"
>{{ cta.video_button }}</a
>
</div>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button && cta.link.includes('http')"
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button2 && cta.link2.includes('http')"
:href="cta.link2"
>{{ cta.button2 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link2"
>{{ cta.button2 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button3 && cta.link3.includes('http')"
:href="cta.link3"
>{{ cta.button3 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link3"
>{{ cta.button3 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button4 && cta.link4.includes('http')"
:href="cta.link4"
>{{ cta.button4 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
v-else
:href="cta.link4"
>{{ cta.button4 }}</a
>
</div>
</div> -->
<div class="max-w-7xl mx-auto grid grid-cols-3 gap-4">
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button && cta.link.includes('http')"
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link"
>{{ cta.button }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button2 && cta.link2.includes('http')"
:href="cta.link2"
>{{ cta.button2 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link2"
>{{ cta.button2 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button3 && cta.link3.includes('http')"
:href="cta.link3"
>{{ cta.button3 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link3"
>{{ cta.button3 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button4 && cta.link4.includes('http')"
:href="cta.link4"
>{{ cta.button4 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link4"
>{{ cta.button4 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button5 && cta.link5.includes('http')"
:href="cta.link5"
>{{ cta.button5 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link5"
>{{ cta.button5 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
target="_blank"
v-if="cta.button6 && cta.link6.includes('http')"
:href="cta.link4"
>{{ cta.button6 }}</a
>
<a
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
border-2
shadow
border-black
"
v-else
:href="cta.link6"
>{{ cta.button6 }}</a
>
</div>
</div>
<!-- tft -->
<div
class="w-full lg:max-w-4xl mx-auto lg:mt-20 lg:px-16 lg:py-10 tft_section"
@@ -563,3 +649,8 @@ export default {
},
};
</script>
<style scoped>
.pink {
background-color: #ea1ff7;
}
</style>

157
src/components/custom/sections/Features.vue
View File

@@ -156,6 +156,163 @@
</div>
</section>
<section class="py-12 px-4 text-center" v-else-if="id == 'oldhome'">
<h2 class="text-4xl leading-tight mb-6 font-bold font-heading uppercase">
{{ main.title }}
</h2>
<div
v-if="main.content"
class="mb-6 text-gray-700"
v-html="main.content"
></div>
<div class="flex flex-wrap items-center -mx-4 mb-6">
<div
v-for="(feature, index) in features"
:key="index"
class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
>
<div v-if="index == 1">
<div class="w-1/2 lg:w-full lg:h-full mx-auto px-2 order-1">
<g-image :src="feature.svg" :alt="feature.title" />
</div>
</div>
<div v-else>
<span v-if="index !== 4" class="img-border"></span>
<h5 class="capitalize">
{{ feature.title }}
</h5>
<div v-html="feature.content" class="text-gray-700"></div>
</div>
</div>
</div>
<div class="mx-auto mt-20" v-if="main.btn">
<a
v-if="main.link.includes('http')"
class="
inline-block
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
shadow
rounded-full
"
:href="main.link"
target="_blank"
>{{ main.btn }}
</a>
<a
v-else
class="
inline-block
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
shadow
rounded-full
"
:href="main.link"
>{{ main.btn }}
</a>
<a
v-if="main.link2.includes('http')"
class="
inline-block
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
shadow
rounded-full
"
:href="main.link2"
target="_blank"
>{{ main.btn2 }}
</a>
<a
v-else
class="
inline-block
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
shadow
rounded-full
"
:href="main.link2"
>{{ main.btn2 }}
</a>
<a
v-if="main.link3.includes('http')"
class="
inline-block
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
shadow
rounded-full
"
:href="main.link3"
target="_blank"
>{{ main.btn3 }}
</a>
<a
v-else
class="
inline-block
bg-blue-900
text-sm
learn-button
hover:bg-blue-800
text-gray-100
px-12
py-2
mr-5
mb-4
shadow
rounded-full
"
:href="main.link3"
>{{ main.btn3 }}
</a>
<!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
</div>
</section>
<section class="py-12 px-4" v-else>
<h2 class="text-4xl text-center mb-12 font-normal font-heading">
{{ main.title }}

8
src/components/marketing/sections/blog-sections/3_column_cards.vue
View File

@@ -50,12 +50,12 @@
{{ blog.title }}
</h3>
<div
v-html="blog.excerpt"
class="mt-3 text-base leading-6 text-gray-500"
v-html="blog.content"
class="mt-3 text-base leading-6 text-center text-gray-800"
></div>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="mt-6 flex items-center" v-if="blog.authorImg">
<div class="flex-shrink-0">
<a :href="blog.autherUrl">
<img
@@ -65,7 +65,7 @@
/>
</a>
</div>
<div class="ml-3">
<div class="ml-3" v-if="blog.author">
<p class="text-sm leading-5 font-medium text-gray-900">
<a :href="blog.autherUrl" class="hover:underline">
{{ blog.author }}

43
src/components/marketing/sections/cta-sections/BrandPanel.vue
View File

@@ -204,6 +204,49 @@
"
>{{ brand.btnTxt }}</a
>
<a
v-if="brand.button2 && brand.link2.includes('http')"
target="_blank"
:href="brand.link2"
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
>{{ brand.button2 }}</a
>
<a
v-else
:href="brand.link2"
class="
inline-block
bg-white
text-sm
learn-button
hover:bg-gray-400
bo
px-12
py-1
mr-5
mb-4
border-2
shadow
border-black
"
>{{ brand.button2 }}</a
>
</div>
</div>
</div>

134
src/components/marketing/sections/cta-sections/Map.vue
View File

@@ -1,6 +1,6 @@
<template>
<section
class="px-2 h-auto object-fi"
class="px-2 h-auto bg-center bg-contain"
:style="{ 'background-image': 'url(' + img(section.image) + ')' }"
>
<div class="flex flex-wrap p-12 text-center -mx-auto t">
@@ -26,28 +26,69 @@
{{ section.subtitle }}
</h2>
<div class="rounded-lg py-10 mt-10 lg:mt-0">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<dl class="">
<div
v-for="(item, index) in stats"
:key="index"
class="flex flex-col p-6 text-center"
>
<div v-for="(value, key) in item" :key="key">
<dd
class="leading-none font-bold green-color"
:class="{ green: index % 2 !== 0 }"
aria-describedby="item-1"
>
{{ value }}
</dd>
<dt class="mt-2 leading-6 text-black uppercase" id="item-1">
{{ key }}
</dt>
</div>
<div class="my-10 grid grid-cols-3 gap-4">
<div class="..."></div>
<div class="...">
<!-- capacity -->
<div class="leading-none font-extrabold text-6xl">
{{
stats[0].capacity
.toString()
.replace(/\B(?=(\d{2})+(?!\d))/g, ",")
}}
PB
<span class="block text-3xl uppercase">capacity</span>
</div>
</div>
<div class="..."></div>
<div class="...">
<!-- Nodes -->
<div
class="
rounded-full
h-60
w-60
inline-flex
items-center
justify-center
bg-green
"
>
<div class="leading-none font-extrabold text-6xl">
{{ stats[1].nodes }}
<span class="block text-2xl uppercase">nodes</span>
</div>
</dl>
</div>
</div>
<div class="..."></div>
<div class="...">
<div
class="
rounded-full
h-60
w-60
inline-flex
items-center
justify-center
bg-pink
"
>
<div class="leading-none font-extrabold text-6xl">
{{ stats[3].countries }}
<span class="block text-2xl uppercase">countries</span>
</div>
</div>
</div>
<div class="..."></div>
<div class="...">
<!-- capacity -->
<div class="leading-none font-extrabold text-6xl">
{{
stats[2].cores.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}}
<span class="block text-5xl uppercase">cores</span>
</div>
</div>
</div>
</div>
@@ -74,26 +115,25 @@ export default {
},
async mounted() {
try {
const getFarms = await axios.get(
"https://explorer.threefold.io/api/farms?network=all"
);
// const getFarms = await axios.get(
// "https://explorer.threefold.io/api/farms?network=all"
// );
const results = await axios.get(
"https://explorer.threefold.io/api/stats"
);
console.log(results.data);
let farms = getFarms.data.length;
// let farms = getFarms.data.length;
let nodes = results.data.onlinenodes;
let hru = (results.data.hru / 1000).toFixed(); // To TB
let sru = results.data.sru.toFixed();
let capacity = hru + sru;
let hru = (results.data.hru / 10000).toFixed(); // To TB
let sru = (results.data.sru / 10000).toFixed();
let capacity = ((hru + sru) / 1000).toFixed();
let cru = results.data.cru.toFixed();
let countries = results.data.countries;
this.stats.push(
{ farms: farms },
{ Nodes: nodes },
{ "Storage TB": capacity },
{ "Compute Cores": cru },
{ Countries: countries }
// { farms: farms },
{ capacity: capacity },
{ nodes: nodes },
{ cores: cru },
{ countries: countries }
);
} catch (error) {
console.log(error);
@@ -103,28 +143,18 @@ export default {
</script>
<style scoped>
.blue {
background-color: #313f92;
}
.light-blue {
background-color: #48489f;
}
dd {
height: 100px;
width: 100px;
display: inline-block;
margin: auto;
border-radius: 50%;
line-height: 100px;
border: 3px solid #847fc2;
background-color: #313f92;
color: #dacef5;
font-size: 1.5rem;
}
.green {
background-color: #92f5d9;
color: #313f92;
.bg-green {
background-color: #70dfc9;
}
.bg-pink {
background-color: #ea1ff7;
}
</style>

38
src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
View File

@@ -20,25 +20,43 @@
:href="product.url"
class="m-auto rounded overflow-hidden transition duration-500"
>
<div class="part text-center pb-8 my-5"
:class="{ active: idx !== 1 }"
>
<div class="part text-center pb-8 my-5" :class="{ active: idx !== 1 }">
<g-image :src="img(product.image)" />
<h3 class="font-bold text-2xl">{{ product.title }}</h3>
<div v-html="product.content" class="pb-4 px-5 "></div>
<div v-html="product.content" class="pb-4 px-5"></div>
<div v-if="product.button">
<a
v-if="product.url.includes('http')"
target="_blank"
:href="product.url"
class="bg-white text-sm learn-button hover:bg-gray-400 px-12 py-2 mb-5 shadows border-black border-2"
class="
bg-white
text-sm
learn-button
hover:bg-gray-400
px-12
py-2
mb-5
shadows
border-black border-2
"
>{{ product.button }}</a
>
<a
v-else
:href="product.url"
class="bg-white text-sm learn-button hover:bg-gray-400 px-12 py-2 mb-5 shadows border-black border-2"
class="
bg-white
text-sm
learn-button
hover:bg-gray-400
px-12
py-2
mb-5
shadows
border-black border-2
"
>{{ product.button }}</a
>
</div>
@@ -73,14 +91,10 @@ export default {
.part {
max-height: 570px;
background-color: #ea1ff7;
background-color: #70dfc9;
}
.active {
background-color: #70dfc9;
background-color: #ea1ff7;
}
</style>

51
src/pages/Index.vue
View File

@@ -18,9 +18,9 @@
</div>
<div class="container mx-auto sm:pxi-0 overflow-x-hidden">
<Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" />
<!-- <VideoPanel :card="$page.markdownPage.videoPanel" /> -->
<!-- <Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" /> -->
<ShowcaseProducts
v-if="
$page.markdownPage.productData &&
@@ -31,13 +31,13 @@
:products="$page.markdownPage.productData"
/>
<Features
<!-- <Features
:id="$page.markdownPage.id"
:main="$page.markdownPage.featuresMain2"
:features="$page.markdownPage.features2"
/>
/> -->
<Partenerships
<!-- <Partenerships
class="lg:mt-20"
v-if="
$page.markdownPage.partnerships &&
@@ -46,7 +46,7 @@
:main="$page.markdownPage.partenershipsMain"
:partnerships="$page.markdownPage.partnerships"
:id="$page.markdownPage.id"
/>
/> -->
<logoShowcase
v-if="$page.markdownPage.logos.length > 0"
@@ -54,13 +54,22 @@
:logos="$page.markdownPage.logos"
:main="$page.markdownPage.logosMain"
/>
</div>
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<CallToAction
v-if="$page.markdownPage.cta"
:id="$page.markdownPage.id"
:cta="$page.markdownPage.cta"
/>
</div>
<div class="container mx-auto sm:pxi-0 overflow-x-hidden">
<BrandPanel
:brand="$page.markdownPage.brandPanel"
:id="$page.markdownPage.id"
v-if="$page.markdownPage.brandPanel"
/>
<!-- <CallToAction
v-if="$page.markdownPage.cta2"
:cta="$page.markdownPage.cta2"
@@ -84,27 +93,27 @@
:blogs="$page.markdownPage.blogs"
/>
<InTheNews
<!-- <InTheNews
v-if="$page.markdownPage.inTheNews"
:news="$page.markdownPage.inTheNews"
/>
/> -->
<!-- <SignUp
v-if="$page.markdownPage.signup"
:signup="$page.markdownPage.signup"
/> -->
<g-image
<!-- <g-image
class="m-auto w-3/4 mt-8"
v-if="$page.markdownPage.solution_image"
:src="$page.markdownPage.solution_image.src"
/>
/> -->
<CallToAction
<!-- <CallToAction
v-if="$page.markdownPage.cta"
:id="$page.markdownPage.id"
:cta="$page.markdownPage.cta"
/>
/> -->
</div>
</Layout>
</template>
@@ -158,32 +167,30 @@
cta{
id
title
subtitle
image
content
button
button2
button3
button4
button5
button6
link
link2
link3
link4
link5
link6
}
BlogsMain{
id
title
content
}
blogs{
id
image
tags
title
path
author
autherUrl
authorImg
excerpt
created
content
}
cta2{
id
@@ -275,6 +282,8 @@
content
sourceUrl
btnTxt
button2
link2
image
}
brandPanel2{