Update design on society and csp pages (#83)

Co-authored-by: Jan Kraus <16012+johny@users.noreply.github.com>

Author: ramavats

components/pages/society/society-start.tsx

@@ -30,57 +30,57 @@ 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
             Edgeware experts.
           </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
             interest and solve problems within distinct geographical areas.
           </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,
             <br />
             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>

pages/csp.tsx

@@ -76,30 +76,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>
     </>
   );