Discover banners

app/(saas)/discover/_components/page-banner/page-banner.tsx

@@ -0,0 +1,58 @@
+import { Target } from "lucide-react";
+import Link from "next/link";
+import { useCallback } from "react";
+
+import { LiveHackathonCard } from "@/app/(saas)/osw/_components/live-hackathon-card/live-hackathon-card";
+
+import { HackathonReactQueryAdapter } from "@/core/application/react-query-adapter/hackathon";
+
+import { ErrorState } from "@/shared/components/error-state/error-state";
+import { NEXT_ROUTER } from "@/shared/constants/router";
+import { ListBanner } from "@/shared/features/list-banner/list-banner";
+import { Button } from "@/shared/ui/button";
+import { Skeleton } from "@/shared/ui/skeleton";
+
+export function PageBanner() {
+  const { data, isLoading, isError } = HackathonReactQueryAdapter.client.useGetHackathons({});
+
+  const renderLiveHackathon = useCallback(() => {
+    if (isLoading) {
+      return <Skeleton className="h-[254px] w-full" />;
+    }
+
+    if (isError) return <ErrorState />;
+
+    if (!data)
+      return (
+        <ListBanner
+          title={{
+            children: (
+              <>
+                Embark on an <span className="text-indigo-500">ODQuest</span> Adventure
+              </>
+            ),
+          }}
+          subtitle={{
+            children:
+              "Unlock epic rewards by conquering challenges and join a thriving community of adventurers on an exciting Quest!",
+          }}
+          logo={<Target className="size-16 text-indigo-500" />}
+          classNames={{
+            base: "bg-gradient-to-br from-indigo-900 to-transparent to-80%",
+          }}
+        >
+          <Button size="sm" asChild>
+            <Link href={NEXT_ROUTER.quests.root}>Join now</Link>
+          </Button>
+        </ListBanner>
+      );
+
+    const liveHackathon = data.hackathons.find(hackathon => hackathon.isLive());
+
+    if (!liveHackathon) return null;
+
+    return <LiveHackathonCard hackathon={liveHackathon} />;
+  }, [data, isError, isLoading]);
+
+  return renderLiveHackathon();
+}

app/(saas)/discover/_features/page-header/page-header.tsx

@@ -11,7 +11,7 @@ export function PageHeader() {
       <Image
         src={background}
         alt=""
-        className={"pointer-events-none absolute inset-0 -z-[1] h-auto w-full opacity-50"}
+        className={"pointer-events-none absolute inset-0 -z-[1] h-auto w-full rounded-t-2xl opacity-50"}
         loading="eager"
       />
       <div className="relative z-[1] mx-auto flex w-full max-w-[600px] flex-col items-center justify-center gap-6">

app/(saas)/discover/v2.tsx

@@ -1,8 +1,8 @@
+import { PageBanner } from "@/app/(saas)/discover/_components/page-banner/page-banner";
+
 import { NavigationBreadcrumb } from "@/shared/features/navigation/navigation.context";
 import { PageContainer } from "@/shared/features/page/page-container/page-container";
 import { PageInner } from "@/shared/features/page/page-inner/page-inner";
-import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
-import { TypographyP } from "@/shared/ui/typography";
 
 import { IssueCard } from "./_components/issue-card/issue-card";
 import { NewProjectCard } from "./_components/new-project-card/new-project-card";
@@ -57,6 +57,9 @@ export default function DiscoverPageV2() {
               />
             ))}
           </PageCarousel>
+
+          <PageBanner />
+
           <PageCarousel
             title="React projects"
             count={10}
@@ -99,6 +102,7 @@ export default function DiscoverPageV2() {
               forks={100}
               contributors={100}
             />
+
             <NewProjectCard
               className="min-h-full"
               name="OnlyRust"

shared/features/list-banner/list-banner.tsx

@@ -2,19 +2,29 @@ import { Paper } from "@/design-system/atoms/paper/variants/paper-default";
 import { Typo } from "@/design-system/atoms/typo/variants/typo-default";
 
 import { ListBannerProps } from "@/shared/features/list-banner/list-banner.types";
+import { cn } from "@/shared/utils";
+
+export function ListBanner({ title, subtitle, logo, classNames, children }: ListBannerProps) {
+  const { base, ...restClassNames } = classNames ?? {};
 
-export function ListBanner({ title, subtitle, logo }: ListBannerProps) {
   return (
     <Paper
       size="4xl"
       background="primary"
       border="primary"
       rounded="2xl"
-      classNames={{ base: "flex justify-between items-center gap-4xl overflow-hidden" }}
+      classNames={{
+        base: cn("flex justify-between items-center gap-4xl overflow-hidden", base),
+        ...restClassNames,
+      }}
     >
-      <div className="flex flex-col gap-md">
-        <Typo as="h1" variant={"heading"} size="md" weight="medium" {...title} />
-        <Typo as="p" size="sm" color="tertiary" {...subtitle} />
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-md">
+          <Typo as="h1" variant={"heading"} size="md" weight="medium" {...title} />
+          <Typo as="p" size="sm" color="tertiary" {...subtitle} />
+        </div>
+
+        {children ? <div>{children}</div> : null}
       </div>
 
       <div

shared/features/list-banner/list-banner.types.ts

@@ -1,9 +1,12 @@
-import { ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 
 import { TypoPort } from "@/design-system/atoms/typo";
 
-export type ListBannerProps = {
+export interface ListBannerProps extends PropsWithChildren {
   title: TypoPort<"h1">;
   subtitle: TypoPort<"p">;
   logo?: ReactNode;
-};
+  classNames?: {
+    base?: string;
+  };
+}