From 2ffe8e34d29139886ac0d4e7f47ce7369a918b03 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@datopian.com>
Date: Thu, 10 Mar 2022 22:19:00 +0100
Subject: [PATCH] [site/home][m]: add guide and library section to home page.

---
 site/components/Home/Features.js | 72 ++++++++++++++++++++++++++++++++
 site/config/siteConfig.js        |  2 +-
 site/pages/index.js              |  2 +
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 site/components/Home/Features.js

diff --git a/site/components/Home/Features.js b/site/components/Home/Features.js
new file mode 100644
index 0000000..3daa12c
--- /dev/null
+++ b/site/components/Home/Features.js
@@ -0,0 +1,72 @@
+export default function Features() {
+  return (
+    <div className="relative bg-white dark:bg-transparent pt-16 pb-32 overflow-hidden">
+      <div className="relative">
+        <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
+          <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
+            <div>
+              <div className="mt-6">
+                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
+                  A Guide to Crypto and Web3
+                </h2>
+                <p className="mt-4 text-lg text-gray-500">
+                  Blockchain, tokens, NFTs, DAOs - what does it all mean? Our guide provides an accessible overview of the key concepts in Crypto and Web3. 
+                </p>
+                <div className="mt-6">
+                  <a
+                    href="/guide/"
+                    className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
+                  >
+                    Discover
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="mt-12 sm:mt-16 lg:mt-0">
+            <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+              <img
+                className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
+                src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646739494/Web3/undraw_mind_map_re_nlb6_qh0jel.svg"
+                alt="Discover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-24">
+        <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
+          <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
+            <div>
+              <div className="mt-6">
+                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
+                  Library
+                </h2>
+                <p className="mt-4 text-lg text-gray-500">
+                  Want to learn more? We are maintaining a comprehensive library of articles, papers, books and other materials related to the space and the surrounding discourse. It provides deeper background on specific topics along with everything you need to fully engage with, and evaluate, Web3 and the claims being made about it. 
+                </p>
+                <div className="mt-6">
+                  <a
+                    href="/library/"
+                    className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
+                  >
+                    Explore
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
+            <div className="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+              <img
+                className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
+                src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646739688/Web3/undraw_road_to_knowledge_m8s0_eexffs.svg"
+                alt="Library"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/site/config/siteConfig.js b/site/config/siteConfig.js
index c213549..1d008d8 100644
--- a/site/config/siteConfig.js
+++ b/site/config/siteConfig.js
@@ -8,7 +8,7 @@ const siteConfig = {
   // url to author
   authorUrl: 'https://lifeitself.us/',
   // Google analytics key e.g. G-XXXX
-  analytics: '',
+  analytics: 'G-9DL50W4DN9',
   // optional additional nextSeo content set on each page
   // see https://github.com/garmeeh/next-seo
 //  nextSeo: {
diff --git a/site/pages/index.js b/site/pages/index.js
index 35ca75d..395556a 100644
--- a/site/pages/index.js
+++ b/site/pages/index.js
@@ -1,11 +1,13 @@
 import { Hero } from 'components/Home/Hero'
 import { Latest } from 'components/Home/Latest'
+import Features from 'components/Home/Features'
 
 export default function Home(props) {
   return (
     <>
       <Hero />
       <Latest />
+      <Features />
     </>
   )
 }