diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js
index 30c69728..08b3f812 100644
--- a/packages/website/src/pages/index.js
+++ b/packages/website/src/pages/index.js
@@ -1,66 +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,
- SkynetToolBig,
- SkynetUserBig,
- SkynetPowerBig,
- SkynetMonetizationSmall,
- SkynetPersistenceSmall,
- SkynetSpeedSmall,
- SkynetUsageSmall,
- SkynetSiaSmall,
-} from "../components/Icons";
+import { ArrowRight } from "../components/Icons";
import Link from "../components/Link";
-const etosCards = [
- {
- Icon: SkynetToolBig,
- title: "Build a better web",
- },
- {
- Icon: SkynetUserBig,
- title: "Fight corporate control
of user data",
- },
- {
- Icon: SkynetPowerBig,
- title: "Empower global citizens",
- },
-];
+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 = [
- {
- Icon: 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.",
- },
- {
- Icon: 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!",
- },
- {
- Icon: 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.",
- },
- {
- Icon: SkynetMonetizationSmall,
- title: "Monetization",
- text: "Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.",
- },
- {
- Icon: 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.",
- },
-];
-
-const IndexPage = () => {
return (
<>
- Skynet is a content and application hosting platform bringing - decentralized storage to users, creators and app developers. + + Skynet is a hosting platform that makes it easy to join the decentralized + + internet movement. Start your free account today. - Skynet is a content and application hosting platform bringing decentralized storage to users, creators and - app developers. + Skynet is a hosting platform that makes it easy to join the decentralized internet movement. Start your + free account today.
Skynet apps pave the way for a new web that prioritizes the privacy, security, and experience of users. Join - our decentralized ecosystem and revolution. + our decentralized internet ecosystem and revolution.
{ ); }; +export const query = graphql` + query MainPageQuery { + allPagesIndexYaml { + edges { + node { + etosCards { + title + alt + src { + publicURL + } + } + ecosystemCards { + title + alt + text + src { + publicURL + } + } + } + } + } + } +`; + export default IndexPage;