adding new readme

.github/workflows/release.yml

@@ -0,0 +1,26 @@
+name: Production Release
+on:
+  release:
+    types: published
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    env:
+      CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
+      CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 12.18.0
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.18.0"
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Building and deploying production
+        run: yarn deploy

README.md

@@ -1,14 +1,22 @@
 <!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
 <p align="center">
-  <a href="https://www.gatsbyjs.com">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
+  <a href="https://reflexer.finance" target="_blank">
+    <img alt="Reflexer" src="https://i.ibb.co/CtWRHQd/android-chrome-512x512.png" width="60" />
   </a>
 </p>
 <h1 align="center">
-  Gatsby's hello-world starter
+  Reflexer Website
 </h1>
 
-Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
+Reflexer website is built with [Gatsby](https://www.gatsbyjs.com/) and [Contentful CMS](https://www.contentful.com/).
+
+## Advantages of using this stack
+
+1. Gatsby is a framework built upon React and provides something called SSG (Static Site Generation) which means it generates HTML files at build time, and that is useful for SEO and Search Engines crawlers to rank the website since they do not read full js applications like normal react app.
+
+2. Gatsby connects with headless CMS called [Contentful](https://www.contentful.com/) which provides a great GUI where we can just add model and content and save it somewhere for free (Gives us 1GB of storage) also it renders GraphQL API that we use it in Gatsby to show our content.
+
+Bottom line is we are having the best of both, as Developer we use React like app and at the same time we are having some kind of a backend with an admin interface built for us for free to use it in content manipulation 🚀 and as non-developer I can go manipulate content from an admin interface without touching the code.
 
 _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
 
@@ -97,4 +105,5 @@ Looking for more guidance? Full documentation for Gatsby lives [on the website](
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world)
 
 <!-- AUTO-GENERATED-CONTENT:END -->
+
 # geb-website

src/components/ui/FAQsCollapse.js

@@ -5,12 +5,14 @@ import styled from "styled-components"
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
 import { INLINES } from "@contentful/rich-text-types"
 
-import useHomeFAQ from "../../hooks/useHomeFAQ"
+import useHome from "../../hooks/useHome"
 import { ExternalLinkArrow } from "../../styles/GlobalStyle"
 
 const FAQsCollapse = () => {
   const [collapseIndex, setCollapseIndex] = useState(0)
-  const homeFAQ = useHomeFAQ().map(item => item.node)
+
+  const { allContentfulHomeFaq } = useHome()
+  const homeFAQ = allContentfulHomeFaq.edges.map(item => item.node)
 
   const handleClick = i => {
     if (i === collapseIndex) {

src/components/ui/FeaturesBlocks.js

@@ -1,12 +1,13 @@
 import React from "react"
 import styled from "styled-components"
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
-import useHomeFeature from "../../hooks/useHomeFeature"
+import useHome from "../../hooks/useHome"
 import { ExternalLinkArrow } from "../../styles/GlobalStyle"
 import getPrefixedPath from "../../utils/getPrefixPath"
 
 const FeaturesBlocks = () => {
-  const homeFeature = useHomeFeature().map(item => item.node)
+  const { allContentfulHomeFeature } = useHome()
+  const homeFeature = allContentfulHomeFeature.edges.map(item => item.node)
 
   return (
     <>

src/components/ui/HeroBox.js

@@ -1,13 +1,13 @@
 import React from "react"
 import styled from "styled-components"
-import useHomeBoxes from "../../hooks/useHomeBoxes"
+import useHome from "../../hooks/useHome"
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
 import { ExternalLinkArrow } from "../../styles/GlobalStyle"
 import getPrefixedPath from "../../utils/getPrefixPath"
 
 const HeroBox = () => {
-  const homeBoxes = useHomeBoxes().map(item => item.node)
-
+  const { allContentfulHomeBoxes } = useHome()
+  const homeBoxes = allContentfulHomeBoxes.edges.map(item => item.node)
   return (
     <Container>
       <Row>

src/components/ui/HeroSeciton.js

@@ -1,15 +1,17 @@
 import React from "react"
 import styled from "styled-components"
+import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
+import useHome from "../../hooks/useHome"
 
 const HeroSeciton = () => {
+  const { allContentfulHomeHero } = useHome()
+  const homeHero = allContentfulHomeHero.edges.map(item => item.node)
+
   return (
     <Container>
       <Content>
-        <Heading>Leverage ETH using RAI</Heading>
-        <Text>
-          A decentralized, stable and non pegged currency made for the digital
-          economy
-        </Text>
+        <Heading>{homeHero[0].title}</Heading>
+        <Text>{documentToReactComponents(homeHero[0].content.json)}</Text>
       </Content>
     </Container>
   )

src/hooks/useHome.js

@@ -0,0 +1,84 @@
+import { graphql, useStaticQuery } from "gatsby"
+
+export default function useHome() {
+  const {
+    allContentfulHomeHero,
+    allContentfulHomeBoxes,
+    allContentfulHomeFeature,
+    allContentfulHomeFaq,
+  } = useStaticQuery(graphql`
+    query Home {
+      allContentfulHomeHero {
+        edges {
+          node {
+            id
+            title
+            content {
+              json
+            }
+          }
+        }
+      }
+
+      allContentfulHomeBoxes(sort: { fields: order }) {
+        edges {
+          node {
+            id
+            title
+            link {
+              name
+              link
+            }
+            image {
+              file {
+                url
+              }
+            }
+            content {
+              json
+            }
+          }
+        }
+      }
+
+      allContentfulHomeFeature(sort: { fields: order }) {
+        edges {
+          node {
+            id
+            title
+            link {
+              name
+              url
+            }
+            image {
+              file {
+                url
+              }
+            }
+            content {
+              json
+            }
+          }
+        }
+      }
+
+      allContentfulHomeFaq(sort: { fields: order }) {
+        edges {
+          node {
+            id
+            title
+            content {
+              json
+            }
+          }
+        }
+      }
+    }
+  `)
+  return {
+    allContentfulHomeHero,
+    allContentfulHomeBoxes,
+    allContentfulHomeFeature,
+    allContentfulHomeFaq,
+  }
+}