Activate page

src/App.js

@@ -1,6 +1,6 @@
 import 'regenerator-runtime/runtime';
 import React from 'react';
 import { ToastContainer } from 'react-toastify';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import IndexPage from './pages/index';
 import ScoreboardPage from './pages/Scoreboard';
@@ -9,6 +9,7 @@
 import ProgressTracker from './components/common/ProgressTracker';
 import CustomHeader from './components/common/Header';
 import CustomFooter from './components/common/Footer';
+import ActivatePage from './pages/Activate';
 
 const Wrapper = ({ children }) => {
   return (
@@ -64,6 +65,14 @@
               </Wrapper>
             }
           />
+          <Route
+            path={URLs.ACTIVATE}
+            element={
+              <Wrapper>
+                <ActivatePage />
+              </Wrapper>
+            }
+          />
         </Routes>
       </Router>
     </>

src/components/common/Buttons.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const OutlineButton = ({ onClick, children, classes, disabled }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={
+        `rounded-md border border-gray-500 border-1 px-5 text-center py-2 font-light text-black shadow-sm ` +
+        classes
+      }
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const PrimaryButton = ({ onClick, children, classes, disabled }) => {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={
+        `rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-5 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700 ` +
+        classes
+      }
+    >
+      {children}
+    </button>
+  );
+};

src/components/common/DangerZone.jsx

@@ -1,11 +1,10 @@
 import React, { useState, Fragment, useEffect } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import { ExclamationIcon } from '../../images/ExclamationIcon';
-import { PrimaryButton } from './PrimaryButton';
-import { OutlineButton } from './OutlineButton';
+import { PrimaryButton, OutlineButton } from '../common/Buttons';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   handleErrorMessage,
   removeAllTokens,
   revokeSBTs,
   soulTransfer,
@@ -46,7 +45,7 @@
         dispatch(revokeSBTs());
       }
     }
   }, [continueLoop]);
 
   useEffect(() => {
     if (tokenRemoveSuccess && isConfirmationModalOpen) {
@@ -55,7 +54,7 @@
       dispatch(updateTokenRemoveStatus());
       setConfirmationModal(false);
     }
   }, [tokenRemoveSuccess, isConfirmationModalOpen]);
 
   return (
     <div className="mb-6">

src/components/common/Header.jsx

@@ -25,7 +25,7 @@
   const { isUserLogin, isAdmin, activePageIndex } = useSelector(
     (state) => state[ReducerNames.COMMON]
   );
   const [admin] = useAdmin();
 
   useEffect(() => {
     wallet
@@ -64,29 +64,43 @@
           onClick={() => {
             dispatch(setActivePageIndex(null));
             navigate('/');
+            setMobileMenuOpen(false);
           }}
           className={
             !isActive(URLs.SCOREBOARD) &&
             !isActive(URLs.SBTs) &&
-            !isNumber(activePageIndex)
+            !isNumber(activePageIndex) &&
+            !isActive(URLs.ACTIVATE)
               ? 'text-gradient'
               : ''
           }
         >
           Home
         </div>
         <div
-          onClick={() => navigate('/community-sbts')}
+          onClick={() => {
+            navigate(URLs.SBTs);
+            setMobileMenuOpen(false);
+          }}
           className={isActive(URLs.SBTs)}
         >
           Community SBTs
         </div>
+        <div
+          onClick={() => {
+            navigate(URLs.ACTIVATE);
+            setMobileMenuOpen(false);
+          }}
+          className={isActive(URLs.ACTIVATE)}
+        >
+          Activate
+        </div>
       </div>
     );
   };
 
   return (
-    <div className="isolate bg-white mx-auto max-w-7xl px-5 pt-10 mb-[20px] md:mb-[50px]">
+    <div className="isolate bg-white mx-auto max-w-7xl px-5 pt-10 mb-[50px] md:mb-[70px]">
       <nav
         className="flex h-9 items-center justify-between"
         aria-label="Global"

src/components/common/ImageTextBlock.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { PrimaryButton, OutlineButton } from './Buttons';
+
+const ImageTextBlock = ({
+  imageSrc,
+  title,
+  description,
+  isAvailable = false,
+  onClick,
+  buttonText = null,
+}) => {
+  return (
+    <div className="flex gap-6 hover-card p-4 md:p-5">
+      <img
+        className="max-w-[130px] object-cover md:max-w-[160px] md:h-auto rounded-lg object-cover h-fit self-center"
+        src={imageSrc}
+      />
+      <div className="flex flex-col gap-1 leading-1">
+        <p className="text-lg font-semibold text-black">{title}</p>
+        <p className="text-xs flex-1">{description}</p>
+        <div className="text-black">
+          {isAvailable ? (
+            <PrimaryButton onClick={onClick}>
+              <p className="text-sm">{buttonText ?? 'Apply Now'}</p>
+            </PrimaryButton>
+          ) : (
+            <OutlineButton classes="cursor-auto">
+              <p className="text-sm">{buttonText ?? 'Coming Soon'}</p>
+            </OutlineButton>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageTextBlock;

src/components/common/PageWrapper.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const PageWrapper = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export default PageWrapper;

src/components/common/ProgressTracker.jsx

@@ -35,7 +35,7 @@
 
   const getRegisteredPercentage = useCallback(
     () => (humansRegistered / ProgressMeterMax) * 100,
     [humansRegistered]
   );
 
   // to make sure the the right corner is not clipped much with increasing width
@@ -72,14 +72,25 @@
             </h2>
           </div>
 
-          <div className="p-2 w-full bg-gradient-to-r from-purple-600 to-indigo-600 flex justify-center gap-5">
+          <div className="p-2 w-full bg-gradient-to-r from-purple-600 to-indigo-600 flex justify-center gap-5 items-center">
             <h4 className="text-yellow-400 font-bold">
               JOIN THE HUMANS OF NEAR
             </h4>
             <p className="text-gray-300">
               Unlock Elections, Governance, & Community Treasury with{' '}
               {ReadableNumber} Humans on NEAR
             </p>
+            <button
+              className="bg-yellow-300 rounded-2xl py-1.5 px-2 text-sm"
+              onClick={() =>
+                window.open(
+                  'https://pages.near.org/blog/ndc-v1-governance-elections-faq/',
+                  '_blank'
+                )
+              }
+            >
+              Learn More
+            </button>
           </div>
         </>
       </div>

src/pages/Activate.jsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from 'react';
+import ImageTextBlock from '../components/common/ImageTextBlock';
+import { useDispatch } from 'react-redux';
+import { updateTrackerStatus } from '../redux/reducer/tracker';
+import HandLogo from '../images/HandLogo.png';
+import NDCLogo from '../images/NDCLogo.png';
+import NDCKudos from '../images/NDCKudos.png';
+import NDCPolls from '../images/NDCPolls.png';
+import NDCEvents from '../images/NDCEvents.png';
+import CommunityFund from '../images/CommunityFund.png';
+
+const ActivatePage = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(updateTrackerStatus(true));
+  }, []);
+
+  return (
+    <div className="isolate bg-white mx-auto max-w-7xl px-5 text-gray-600">
+      <div
+        className="bg-no-repeat bg-right-bottom bg-image"
+        style={{
+          backgroundImage: `url(${HandLogo})`,
+          zIndex: 10,
+        }}
+      >
+        <div className="flex flex-col gap-1 items-center text-center ">
+          <h2 className="text-3xl font-semibold text-black">
+            Activate as an I-AM-HUMAN Verified Human
+          </h2>
+          <p className="text-sm leading-5 mt-5">
+            As a verified human, not only could you build your on-chain
+            reputation through a number of Community Soul Bound Tokens, you have
+            access to on-chain voting on governance, participation in DAOs and
+            grassroots funding, and much more.
+            <br />
+            Engage in governance, build a strong on-chain reputation, and drive
+            grassroots funding. <br />
+            Shape the future of NEAR with meaningful and impactful actions.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-2 md:gap-5 md:grid-cols-2 lg:grid-cols-3 my-16">
+          <ImageTextBlock
+            imageSrc={NDCLogo}
+            isAvailable={true}
+            title="NDC Nomination"
+            description="Are you a dedicated OG member of the NEAR community? Nominate yourself for a seat in the NDC General Election. Realize your vision to grow the NEAR ecosystem. Verified humans, comment and upvote on your favorite candidates."
+            onClick={() =>
+              window.open(
+                'https://near.org/nomination.ndctools.near/widget/NDC.Nomination.Page',
+                '_blank'
+              )
+            }
+            buttonText="Participate Now"
+          />
+          <ImageTextBlock
+            imageSrc={NDCPolls}
+            isAvailable={true}
+            title="NDC Official Polls"
+            description="Explore polls officially conducted by the NDC. These polls are verified, authoritative, and can provide valuable insights on the ecosystem! Participating in the Official Polls will eventually contribute to your on-chain reputation. Your opinions matter. #Vote"
+            buttonText="Vote in Polls"
+            onClick={() =>
+              window.open(
+                'https://near.org/easypoll-v0.ndc-widgets.near/widget/EasyPoll?page=official_polls',
+                '_blank'
+              )
+            }
+          />
+          <ImageTextBlock
+            imageSrc={NDCLogo}
+            isAvailable={true}
+            title="NDC Gigs"
+            description="NDC regularly engages the community with NDC Gigs to onboard more contributors and to engage with community members who have a desire to support Open Source Development and to build public goods. Try your hand at a gig today!"
+            buttonText="Do a Gig"
+            onClick={() =>
+              window.open(
+                'https://near.org/neardigitalcollective.near/widget/Gigs',
+                '_blank'
+              )
+            }
+          />
+          <ImageTextBlock
+            imageSrc={NDCLogo}
+            isAvailable={false}
+            title="NEAR General Election"
+            description="The NDC is launching the inaugural ecosystem wide General Election to enable decentralized governance on-chain. #Vote in the September 8th General Election and mint your “I Voted” reputation Soul Bound Token!"
+          />
+          <ImageTextBlock
+            imageSrc={NDCKudos}
+            isAvailable={false}
+            title="NDC Kudos"
+            description='The NDC Kudos platform aims to create a reputation point system where humans can give each other recognition known as "Kudos." With enough social proof, you can mint a "Proof of Kudos" Soul Bound Token to display your contribution and your reputation in the NEAR ecosystem.'
+            buttonText="Give a Kudo"
+          />
+          <ImageTextBlock
+            imageSrc={NDCEvents}
+            isAvailable={true}
+            title="Join NDC @ Events"
+            description="Attend NDC sponsored blockchain events, hang out with the NEAR Digital Collective contributors, and collect the unique “Proof of Vibe” Soul Bound Tokens by passing vibe checks. It grants exclusive access to high-caliber gatherings, turning them into celebrations of our collective spirit."
+            onClick={() =>
+              window.open('https://t.me/+NjNy-5yl_KllNmYx', '_blank')
+            }
+            buttonText="See you IRL"
+          />
+          <ImageTextBlock
+            imageSrc={CommunityFund}
+            title="NDC CommunityFund"
+            description="The CommunityFund is an innovative public funding infrastructure designed to facilitate community-driven capital deployment by the NEAR community for the NEAR community. Propose your idea and receive community funding. "
+            onClick={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActivatePage;