Merge pull request #31 from kudos-ink/feat/cta-banner

feat: CTA added

app/page.tsx

@@ -1,7 +1,9 @@
 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 { containerStyle } from "@/styles";
 import { SearchParams } from "@/types/filters";
 import {
   processNotionFilters,
@@ -27,13 +29,18 @@ export default async function Home({ searchParams }: IHomeProps) {
 
   return (
     <>
-      <section className="flex flex-col items-center text-center pt-10 pb-24 px-6 container mx-auto max-w-7xl">
+      <section
+        className={`flex flex-col items-center text-center pt-10 pb-24 ${containerStyle}`}
+      >
         <h1 className={title()}>Find Collaborations,</h1>
         <h1 className={title()}>Collect Kudos</h1>
       </section>
-      <div className="flex flex-col">
+      <section className={containerStyle}>
+        <CtaBanner />
+      </section>
+      <div className="flex flex-col pt-10">
         <Toolbar searchParams={searchParams} />
-        <section className="px-6 container mx-auto max-w-7xl">
+        <section className={containerStyle}>
           <ContributionsTable
             items={items}
             queries={{

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/filters/toolbar.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useRef } from "react";
 import {
   LANGUAGES_OPTIONS,
   INTERESTS_OPTIONS,
@@ -7,11 +8,11 @@ import {
 } from "@/data/filters";
 import { useFilters } from "@/hooks/useFilters";
 import useSticky from "@/hooks/useSticky";
+import { containerStyle } from "@/styles";
 import { SearchParams } from "@/types/filters";
 import CheckboxFilter from "./checkbox-filter";
 import ClearFilters from "./clear-filters";
 import SelectFilter from "./select-filter";
-import { useRef } from "react";
 interface IToolbarProps {
   searchParams: SearchParams;
 }
@@ -40,7 +41,7 @@ const Toolbar = ({ searchParams }: IToolbarProps) => {
       }`}
       ref={toolbarRef}
     >
-      <div className="container mx-auto max-w-7xl px-6 pt-6 flex flex-col gap-4">
+      <div className={`pt-6 flex flex-col gap-4 ${containerStyle}`}>
         <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
           <div className="flex flex-nowrap overflow-x-auto overflow-y-hidden gap-4 w-full sm:w-auto xl:overflow-visible">
             <SelectFilter

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,8 @@ 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/repository-classification/issues/new?labels=new-project&template=NEW_PROJECT.yaml&title=%5BAdd%5D%3A+",
   },
 };
 

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",

styles/index.ts

@@ -0,0 +1 @@
+export const containerStyle = "px-6 container mx-auto max-w-7xl";