feat: notification for 2022 orgs

src/components/notification.jsx

@@ -9,15 +9,14 @@ const Notification = () => {
   return (
     <Message positive style={style}>
       <Message.Header>
-        Data for the organizations which participated in 2021{" "}
-        <u>
-          <a
-            href="https://twitter.com/nishantwrp/status/1433895794596143105"
-            target="_blank"
-          >
-            will be added soon
-          </a>
-        </u>
+        Official ogranizations for GSoC 2022 have been announced. You can check
+        them{" "}
+        <a
+          href="https://summerofcode.withgoogle.com/programs/2022/organizations"
+          target="_blank"
+        >
+          <u>here</u>
+        </a>
         .
       </Message.Header>
     </Message>

src/pages/index.jsx

@@ -9,6 +9,7 @@ import "./index.css"
 import Layout from "../layouts/layout"
 import OrgCard from "../components/org-card"
 import SEO from "../components/seo"
+import Notification from "../components/notification"
 import { Grid } from "semantic-ui-react"
 import { useAppDispatch, useAppSelector } from "../store"
 import { getSearch, setSearch } from "../store/search"
@@ -242,6 +243,9 @@ const IndexPage = ({ data, location }) => {
   return (
     <Layout>
       <SEO title={"Home"} meta={meta} />
+      <Grid className="index-org-cards-grid">
+        <Notification />
+      </Grid>
       <div style={{ marginTop: "1rem", textAlign: "center" }}>
         <a className="ui orange label">{orgCards.length} results</a>
       </div>