From b03126fdff5975200b7199ec3593c9a6d609c9e7 Mon Sep 17 00:00:00 2001
From: Rama Shankar Jha <guy55222@gmail.com>
Date: Thu, 5 Oct 2023 22:57:53 +0530
Subject: [PATCH] updated society and csp

---
 components/pages/society/society-start.tsx | 20 ++++-----
 pages/csp.tsx                              | 50 +++++++++++-----------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/components/pages/society/society-start.tsx b/components/pages/society/society-start.tsx
index 080abdb..892c15c 100644
--- a/components/pages/society/society-start.tsx
+++ b/components/pages/society/society-start.tsx
@@ -30,8 +30,8 @@ export const SocietyStart = () => {
         </p>
       </div>
 
-      <div className="my-8 mx-auto grid max-w-6xl grid-cols-3 gap-4 text-center">
-        <div className="flex flex-col items-center p-4">
+      <div className="my-8 mx-auto grid max-w-6xl gap-2 text-center sm:grid-cols-2 md:grid-cols-3">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <OpenArmLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>
             Solve problems using the new world of blockchain and currency and collaborate with other
@@ -39,12 +39,12 @@ export const SocietyStart = () => {
           </p>
         </div>
 
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <FundsLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>Request funds from the Treasury to execute your mission.</p>
         </div>
 
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <EarthLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>
             Regional groups are designed to drive awareness of the network, research key areas of
@@ -52,27 +52,27 @@ export const SocietyStart = () => {
           </p>
         </div>
 
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <User4LineIcon className="my-4 h-8 w-8 fill-white" />
           <p>Whatever you want, really: Your community is self-determining.</p>
         </div>
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <CompassDiscoverLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>
             Utilise Commonwealth's open-source interface to organize your group, project or
             community initiative.
           </p>
         </div>
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <FingerprintFillIcon className="my-4 h-8 w-8 fill-white" />
           <p>Identity or Community-based solution groups: Minorities, Social Justice, or others.</p>
         </div>
 
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <ScalesLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>Organize your community into a political power within the network.</p>
         </div>
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <CommandLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>
             Specific technology applications,
@@ -80,7 +80,7 @@ export const SocietyStart = () => {
             Privacy for instance.
           </p>
         </div>
-        <div className="flex flex-col items-center p-4">
+        <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <Compass2LineIcon className="my-4 h-8 w-8 fill-white" />
           <p>Advance the community of EDG citizens.</p>
         </div>
diff --git a/pages/csp.tsx b/pages/csp.tsx
index e0dd8c4..4335289 100644
--- a/pages/csp.tsx
+++ b/pages/csp.tsx
@@ -69,30 +69,32 @@ export default function SocietyPage() {
             height="600px"
           />
         </div>
-        <p className="my-4 mx-auto max-w-3xl leading-relaxed">
-          Minted the NFT(s)? Claim your discord role and perks now:{' '}
-          <a
-            href="https://discord.gg/uNY622UGh4"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-blue-600 text-primary-500 underline"
-          >
-            click here
-          </a>
-          🤘
-        </p>
-        <p className="my-4 mx-auto max-w-3xl leading-relaxed">
-          To learn more about the Contributors' Support Program, please visit{' '}
-          <a
-            href="https://gov.edgewa.re/discussion/12279-contributors-support-program-csp"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-blue-600 text-primary-500 underline"
-          >
-            the governance forum thread
-          </a>
-          .
-        </p>
+        <div className="my-4 mx-auto flex max-w-4xl flex-col gap-4 rounded-lg border-2 border-grey-700 border-opacity-50 bg-grey-800 bg-opacity-30 p-5">
+          <h3 className="text-xl font-bold">Minted the NFT(s)?</h3>
+          <p className="leading-relaxed">
+            Claim your discord role and perks now:{' '}
+            <a
+              href="https://discord.gg/uNY622UGh4"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-blue-600 ml-2 rounded-lg bg-primary-500 px-4 py-1 text-white"
+            >
+              click here
+            </a>
+          </p>
+          <p className="leading-relaxed">
+            To learn more about the Contributors' Support Program, please visit{' '}
+            <a
+              href="https://gov.edgewa.re/discussion/12279-contributors-support-program-csp"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-blue-600 text-primary-500 underline"
+            >
+              the governance forum thread
+            </a>
+            .
+          </p>
+        </div>
       </section>
     </>
   );