diff --git a/packages/website/data/pages/index/assets/decentralized-internet-skynet.svg b/packages/website/data/pages/index/assets/decentralized-internet-skynet.svg
new file mode 100644
index 00000000..f321824b
--- /dev/null
+++ b/packages/website/data/pages/index/assets/decentralized-internet-skynet.svg
@@ -0,0 +1,31 @@
+
diff --git a/packages/website/data/pages/index/assets/decentralized-storage-benefits.svg b/packages/website/data/pages/index/assets/decentralized-storage-benefits.svg
new file mode 100644
index 00000000..38a689d6
--- /dev/null
+++ b/packages/website/data/pages/index/assets/decentralized-storage-benefits.svg
@@ -0,0 +1,26 @@
+
diff --git a/packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg b/packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg
new file mode 100644
index 00000000..495ffe01
--- /dev/null
+++ b/packages/website/data/pages/index/assets/decentralized-storage-without-wallet.svg
@@ -0,0 +1,30 @@
+
diff --git a/packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg b/packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg
new file mode 100644
index 00000000..a23cf13b
--- /dev/null
+++ b/packages/website/data/pages/index/assets/empower-global-citizens-skynet.svg
@@ -0,0 +1,35 @@
+
diff --git a/packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg b/packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg
new file mode 100644
index 00000000..64323f3f
--- /dev/null
+++ b/packages/website/data/pages/index/assets/fight-corporate-control-skynet.svg
@@ -0,0 +1,37 @@
+
diff --git a/packages/website/data/pages/index/assets/monetization-skynet.svg b/packages/website/data/pages/index/assets/monetization-skynet.svg
new file mode 100644
index 00000000..81a4cf37
--- /dev/null
+++ b/packages/website/data/pages/index/assets/monetization-skynet.svg
@@ -0,0 +1,34 @@
+
diff --git a/packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg b/packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg
new file mode 100644
index 00000000..74fd3cfa
--- /dev/null
+++ b/packages/website/data/pages/index/assets/skynet-decentralized-storage-speed.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/website/data/pages/index/assets/skynet-storage-free-use.svg b/packages/website/data/pages/index/assets/skynet-storage-free-use.svg
new file mode 100644
index 00000000..5b109ea8
--- /dev/null
+++ b/packages/website/data/pages/index/assets/skynet-storage-free-use.svg
@@ -0,0 +1,25 @@
+
diff --git a/packages/website/data/pages/index/pages-index.yml b/packages/website/data/pages/index/pages-index.yml
new file mode 100644
index 00000000..91bc353c
--- /dev/null
+++ b/packages/website/data/pages/index/pages-index.yml
@@ -0,0 +1,31 @@
+- etosCards:
+ - title: Build a better web
+ src: ./assets/decentralized-internet-skynet.svg
+ alt: The top of a wrench and a cube representing a new kind of Internet
+ - title: Fight corporate control of user data
+ src: ./assets/fight-corporate-control-skynet.svg
+ alt: Symbol of a strong person stretching arms out of screen
+ - title: Empower global citizens
+ src: ./assets/empower-global-citizens-skynet.svg
+ alt: Symbol of a fist in the air
+- ecosystemCards:
+ - title: Easy to use
+ src: ./assets/decentralized-storage-without-wallet.svg
+ alt: Image of a finger pushing a button
+ text: Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps.
+ - title: Fast
+ src: ./assets/skynet-decentralized-storage-speed.svg
+ alt: Image of a speedometer
+ text: Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!
+ - title: Free to use
+ src: ./assets/skynet-storage-free-use.svg
+ alt: Image of a server database and a shield
+ text: Focus on building, not overhead server costs. When users own their data, developers aren't asked to pay for it.
+ - title: Monetization
+ src: ./assets/monetization-skynet.svg
+ alt: Image of a coin symbol
+ text: Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.
+ - title: Persistence
+ src: ./assets/decentralized-storage-benefits.svg
+ alt: Abstract image of a shield and a graph line
+ text: Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down.
diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js
index 4417a21f..08b3f812 100644
--- a/packages/website/src/pages/index.js
+++ b/packages/website/src/pages/index.js
@@ -1,72 +1,31 @@
import * as React from "react";
+import { graphql } from "gatsby";
import { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout";
import { Carousel } from "../components/Carousel/Carousel";
import Seo from "../components/seo";
import CommunitySection from "../components/CommunitySection";
import Uploader from "../components/Uploader";
import { ArrowRight } from "../components/Icons";
-import SkynetToolBig from "../components/Icons/SkynetToolBig.svg";
-import SkynetUserBig from "../components/Icons/SkynetUserBig.svg";
-import SkynetPowerBig from "../components/Icons/SkynetPowerBig.svg";
-import SkynetMonetizationSmall from "../components/Icons/SkynetMonetizationSmall.svg";
-import SkynetPersistenceSmall from "../components/Icons/SkynetPersistenceSmall.svg";
-import SkynetSpeedSmall from "../components/Icons/SkynetSpeedSmall.svg";
-import SkynetUsageSmall from "../components/Icons/SkynetUsageSmall.svg";
-import SkynetSiaSmall from "../components/Icons/SkynetSiaSmall.svg";
import Link from "../components/Link";
-const etosCards = [
- {
- src: SkynetToolBig,
- title: "Build a better web",
- alt: "The top of a wrench and a cube representing a new kind of Internet",
- },
- {
- src: SkynetUserBig,
- title: "Fight corporate control of user data",
- alt: "Symbol of a strong person stretching arms out of screen",
- },
- {
- src: SkynetPowerBig,
- title: "Empower global citizens",
- alt: "Symbol of a fist in the air",
- },
-];
+const IndexPage = ({ data }) => {
+ const etosCards = React.useMemo(
+ () =>
+ data.allPagesIndexYaml.edges[0].node.etosCards.map((card) => ({
+ ...card,
+ src: card.src.publicURL,
+ })),
+ [data]
+ );
+ const ecosystemCards = React.useMemo(
+ () =>
+ data.allPagesIndexYaml.edges[1].node.ecosystemCards.map((card) => ({
+ ...card,
+ src: card.src.publicURL,
+ })),
+ [data]
+ );
-const ecosystemCards = [
- {
- src: SkynetUsageSmall,
- title: "Easy to use",
- text: "Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps.",
- alt: "Image of a finger pushing a button",
- },
- {
- src: SkynetSpeedSmall,
- title: "Fast",
- text: "Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!",
- alt: "Image of a speedometer",
- },
- {
- src: SkynetSiaSmall,
- title: "Free to use",
- text: "Focus on building, not overhead server costs. When users own their data, developers aren't asked to pay for it.",
- alt: "Image of a server database and a shield",
- },
- {
- src: SkynetMonetizationSmall,
- title: "Monetization",
- text: "Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.",
- alt: "Image of a coin symbol",
- },
- {
- src: SkynetPersistenceSmall,
- title: "Persistence",
- text: "Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down.",
- alt: "Abstract image of a shield and a graph line",
- },
-];
-
-const IndexPage = () => {
return (
<>
@@ -166,4 +125,30 @@ const IndexPage = () => {
);
};
+export const query = graphql`
+ query MainPageQuery {
+ allPagesIndexYaml {
+ edges {
+ node {
+ etosCards {
+ title
+ alt
+ src {
+ publicURL
+ }
+ }
+ ecosystemCards {
+ title
+ alt
+ text
+ src {
+ publicURL
+ }
+ }
+ }
+ }
+ }
+ }
+`;
+
export default IndexPage;