From b0e4e83958597833bd31293b9c4ecd83d0fd0e1e Mon Sep 17 00:00:00 2001
From: EilidhRoss1 <98904290+EilidhRoss1@users.noreply.github.com>
Date: Wed, 6 Apr 2022 14:26:08 +0200
Subject: [PATCH] add get involved and fix images

---
 site/components/Home/Features.js     |  4 +-
 site/components/Home/Get-Involved.js | 84 ++++++++++++++++++++++++++++
 site/components/Home/Why.js          |  6 +-
 site/pages/index.js                  |  2 +
 4 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 site/components/Home/Get-Involved.js

diff --git a/site/components/Home/Features.js b/site/components/Home/Features.js
index 174f7cc..da68c76 100644
--- a/site/components/Home/Features.js
+++ b/site/components/Home/Features.js
@@ -59,7 +59,7 @@ export default function Features() {
           <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"
+                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-md"
                 src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646739680/Web3/undraw_bibliophile_re_xarc_ssxnqe.svg"
                 alt="Library"
               />
@@ -92,7 +92,7 @@ export default function Features() {
           <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"
+                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-md"
                 src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646745400/Web3/undraw_instant_analysis_re_mid5_i8r1hp.svg"
                 alt="Learn More"
               />
diff --git a/site/components/Home/Get-Involved.js b/site/components/Home/Get-Involved.js
new file mode 100644
index 0000000..60a2a78
--- /dev/null
+++ b/site/components/Home/Get-Involved.js
@@ -0,0 +1,84 @@
+export default function GetInvolved() {
+  return (
+  <div className="relative bg-white dark:bg-transparent pt-16 pb-32 overflow-hidden">
+    <div className="text-center">
+      <h2 className="text-3xl tracking-tight font-extrabold text-white sm:text-4xl">Get Involved</h2>
+      <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+      This is a collective effort and we’re keen to involve collaborators and contributors
+      </p>
+    </div>
+    <div className="mt-20">
+      <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">
+              Here's how you can get involved:
+              </h2>
+              <ul className="mt-4 text-lg text-gray-500 list-disc list-inside">
+                <li> Contribute to the <a href="/library" className="underline">library</a>, </li>
+                <li> Write up key concepts, </li>
+                <li> Proof edit articles and transcribe dialogs, </li>
+                <li> Share the work with others. </li>
+                </ul>
+              <div className="mt-6">
+                <a
+                  href="/contribute/"
+                  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"
+                >
+                  Get Involved
+                </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-md"
+              src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646745020/Web3/undraw_development_re_g5hq_dyesjo.svg"
+              alt="Get Involved"
+            />
+          </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">
+              We’d also love to have feedback through our forum:
+              </h2>
+              <ul className="mt-4 text-lg text-gray-500 list-disc list-inside">
+                <li> Are there particular topics or areas we should cover? </li>
+                <li> Do you disagree with any of our assessments? </li>
+                <li> Have we missed or misunderstood something? </li>
+                <li> Do you have feedback on how we structure or present the thinking? </li>
+                </ul>
+              <div className="mt-6">
+                <a
+                  href="https://github.com/life-itself/web3/discussions"
+                  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"
+                >
+                  Our Forum
+                </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-md"
+              src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1649244821/Web3/undraw_posts_re_ormv_bxhknn.svg"
+              alt="Our Forum"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  )
+}
diff --git a/site/components/Home/Why.js b/site/components/Home/Why.js
index c9aba29..8e9e5de 100644
--- a/site/components/Home/Why.js
+++ b/site/components/Home/Why.js
@@ -32,7 +32,7 @@ export default function Why() {
         <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"
+              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-md"
               src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646746321/Web3/undraw_nakamoto_-2-iv6_arq2lb.svg"
               alt="Read More"
             />
@@ -65,7 +65,7 @@ export default function Why() {
         <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"
+              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-md"
               src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744477/Web3/undraw_connected_world_wuay_amttde.svg"
               alt="Read More"
             />
@@ -98,7 +98,7 @@ export default function Why() {
         <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"
+              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-md"
               src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744695/Web3/undraw_team_collaboration_re_ow29_s8gvrf.svg"
               alt="Read More"
             />
diff --git a/site/pages/index.js b/site/pages/index.js
index b16f1eb..c7418c7 100644
--- a/site/pages/index.js
+++ b/site/pages/index.js
@@ -2,6 +2,7 @@ import { Hero } from 'components/Home/Hero'
 import { Latest } from 'components/Home/Latest'
 import Features from 'components/Home/Features'
 import Why from 'components/Home/Why'
+import GetInvolved from 'components/Home/Get-Involved'
 
 export default function Home(props) {
   return (
@@ -10,6 +11,7 @@ export default function Home(props) {
       <Latest />
       <Features />
       <Why />
+      <GetInvolved />
     </>
   )
 }