event banner homepage

app/carnival/_components/EventBanner.tsx

@@ -18,6 +18,7 @@ const EventBanner = () => (
       height={662}
       width={775}
     />
+    <div className="absolute inset-0 pointer-events-none bg-gradient-to-r from-background/50 to-transparent"></div>
     <div className="relative flex flex-col gap-6 md:w-6/12">
       <div className="flex flex-col gap-1">
         <span className="text-xl text-primary italic">

app/carnival/page.tsx

@@ -264,10 +264,10 @@ export default async function SingleEventPage() {
             </div>
             <p>
               Kudos Carnival is a 6-week event (November 1st - December 15th)
-              exclusively for PBA Alumni, designed to enhance Alumni
-              contributions to the Polkadot ecosystem. Participants will solve
-              curated open issues from the Kudos platform, provided by ecosystem
-              partners, earning points for each issue they complete.
+              exclusively for PBA Alumni, designed to enhance contributions to
+              the Polkadot ecosystem. Participants will solve curated open
+              issues from the Kudos platform, provided by ecosystem partners,
+              earning points for each issue they complete.
             </p>
             <p>
               Throughout the event, weekly winners will be announced during
@@ -341,7 +341,7 @@ export default async function SingleEventPage() {
           Top Contributors
         </h2>
         <h3 className="text-xl text-default-600 mt-4">
-          Earn 1 point for every assigned issue you complete during the event.
+          Earn points for every assigned issue you complete during the event.
         </h3>
         <div className="flex flex-col gap-4 sm:flex-row mt-16">
           <div className="flex flex-col gap-2 basis-1/2">

app/page.tsx

@@ -15,6 +15,7 @@ import {
   DEFAULT_HOMEPAGE_PAGE_SIZE,
   DEFAULT_PAGINATED_RESPONSE,
 } from "@/data/fetch";
+import EventBanner from "@/components/event-banner";
 
 const EXPLORE_LABEL = "Explore Open Contributions";
 
@@ -44,6 +45,10 @@ export default async function Home() {
         </h2>
       </section>
 
+      <section className={`mb-16 ${container()}`}>
+        <EventBanner />
+      </section>
+
       <DefaultFiltersProvider>
         <div className="flex flex-col">
           <Toolbar label="Suggested Contributions" />

components/event-banner.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { Link as NuiLink } from "@nextui-org/link";
+import { Button } from "@nextui-org/button";
+import NextImage from "next/image";
+
+interface IEventBannerProps {}
+
+const EventBanner = ({}: IEventBannerProps) => {
+  return (
+    <div className="relative py-4 px-3 bg-default-100 rounded-md overflow-hidden">
+      <NextImage
+        className="pointer-events-none absolute -left-[5px] -top-[10px] h-[calc(100%_+_60px)] w-[calc(140%_+_10px)] md:w-[calc(104%_+_10px)] max-w-[initial] object-cover object-top"
+        src="/images/kudos-weeks.png"
+        alt="Event banner"
+        height={983}
+        width={1200}
+      />
+      <div className="absolute inset-0 pointer-events-none bg-gradient-to-r from-background/60 to-transparent"></div>
+      <div className="relative z-10 flex flex-col items-start w-8/12 md:w-6/12">
+        <h4 className="tracking-tight text-lg font-bold text-foreground">
+          Kudos Carnival
+        </h4>
+        <p className="mt-2">
+          A 6-week event (November 1st - December 15th), designed to enhance
+          contributions to the Polkadot ecosystem.
+        </p>
+        <NuiLink href="/carnival" title="Kudos Weeks event page" as={Link}>
+          <Button className="mt-4 font-black" color="primary">
+            Join in
+          </Button>
+        </NuiLink>
+      </div>
+    </div>
+  );
+};
+
+export default EventBanner;