feat: CTA added

app/page.tsx

@@ -1,5 +1,6 @@
 import ContributionsTable from "@/components/contributions-table/table";
 import Toolbar from "@/components/filters/toolbar";
+import CtaBanner from "@/components/cta-banner";
 import { title } from "@/components/primitives";
 import { queryDatabase } from "@/lib/notion";
 import { SearchParams } from "@/types/filters";
@@ -31,7 +32,8 @@ export default async function Home({ searchParams }: IHomeProps) {
         <h1 className={title()}>Find Collaborations,</h1>
         <h1 className={title()}>Collect Kudos</h1>
       </section>
-      <div className="flex flex-col">
+      <CtaBanner />
+      <div className="flex flex-col pt-10">
         <Toolbar searchParams={searchParams} />
         <section className="px-6 container mx-auto max-w-7xl">
           <ContributionsTable

components/cta-banner.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Button } from "@nextui-org/button";
+import { Card, CardBody } from "@nextui-org/card";
+import { Link } from "@nextui-org/link";
+import { Skeleton } from "@nextui-org/skeleton";
+import { SITE_CONFIG } from "@/data/config";
+
+interface ICtaBannerProps {}
+
+const CtaBanner = ({}: ICtaBannerProps) => {
+  const [isClientReady, setIsClientReady] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+
+  const localStorageKey = "ctaBannerClosed";
+  const handleClose = () => {
+    setIsVisible(false);
+    localStorage.setItem(localStorageKey, "true");
+  };
+
+  useEffect(() => {
+    const isBannerClosed = localStorage.getItem(localStorageKey) === "true";
+    setIsClientReady(true);
+    setIsVisible(!isBannerClosed);
+  }, []);
+
+  if (!isClientReady) {
+    return (
+      <Skeleton className="w-full rounded-lg">
+        <div className="h-16 w-full rounded-lg bg-default-200"></div>
+      </Skeleton>
+    );
+  }
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Card
+      classNames={{
+        base: "bg-primary",
+        body: "flex flex-col items-center justify-center gap-4 lg:flex-row lg:gap-8",
+      }}
+    >
+      <CardBody>
+        <p className="text-center font-semibold">
+          Maintaining a project? Reach +1000 builders on the #1 Polkadot
+          ecosystem contribution hub
+        </p>
+        <div className="flex items-center gap-2">
+          <Link
+            isExternal
+            href={SITE_CONFIG.links.includeProject}
+            target="_blank"
+            aria-label="Include your project"
+            title="Include your project"
+          >
+            <Button className="font-semibold" color="danger">
+              Include your project
+            </Button>
+          </Link>
+          <Button
+            className="font-semibold border-large hover:underline"
+            color="danger"
+            variant="bordered"
+            onClick={handleClose}
+          >
+            Hide this
+          </Button>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CtaBanner;

components/navbar.tsx

@@ -55,6 +55,21 @@ export const Navbar = () => {
             </Tooltip>
           </Link>
         </NavbarItem>
+        <NavbarItem>
+          <Link
+            isExternal
+            href={SITE_CONFIG.links.includeProject}
+            target="_blank"
+            aria-label="Include your project"
+            title="Include your project"
+          >
+            <Tooltip content="Maintaining a project?">
+              <Button className="font-semibold" color="primary" size="sm">
+                Include your project
+              </Button>
+            </Tooltip>
+          </Link>
+        </NavbarItem>
       </NavbarContent>
     </NextUINavbar>
   );

data/config.ts

@@ -7,6 +7,7 @@ export const SITE_CONFIG = {
     twitter: "https://twitter.com/kudos_ink",
     bugReport:
       "https://github.com/kudos-ink/portal/issues/new?assignees=&labels=bug&projects=&template=bug_report.yml&title=",
+    includeProject: "https://github.com/kudos-ink/portal/issues",
   },
 };
 

package.json

@@ -13,12 +13,14 @@
     "@nextui-org/autocomplete": "^2.0.9",
     "@nextui-org/button": "2.0.26",
     "@nextui-org/checkbox": "^2.0.25",
+    "@nextui-org/card": "^2.0.24",
     "@nextui-org/chip": "^2.0.25",
     "@nextui-org/dropdown": "^2.1.16",
     "@nextui-org/image": "^2.0.24",
     "@nextui-org/link": "2.0.26",
     "@nextui-org/navbar": "2.0.27",
     "@nextui-org/select": "^2.1.20",
+    "@nextui-org/skeleton": "^2.0.24",
     "@nextui-org/slider": "^2.2.5",
     "@nextui-org/spinner": "^2.0.24",
     "@nextui-org/system": "2.0.15",