Add cta on page header discover (#1048)

Co-authored-by: Hayden Cleary <[email protected]>
onlydustxyz · Mar 5, 2025 · 23c9b53 · 23c9b53
1 parent 9a383a7
commit 23c9b53
Showing 1 changed file with 53 additions and 6 deletions.
diff --git a/app/(saas)/discover/_features/page-header/page-header.tsx b/app/(saas)/discover/_features/page-header/page-header.tsx
@@ -1,11 +1,61 @@
 import background from "@/public/images/backgrounds/discover-header.png";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Bot, FolderSearch, LayoutList } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 
+import { NEXT_ROUTER } from "@/shared/constants/router";
 import { Button } from "@/shared/ui/button";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/shared/ui/card";
+import { GlowingEffect } from "@/shared/ui/glowing-effect";
 import { TypographyH2, TypographyP } from "@/shared/ui/typography";
 
-export function PageHeader() {
+function HasSufficentData() {
+  return (
+    <Button>
+      You don’t find your perfect fit ?
+      <ArrowRight />
+    </Button>
+  );
+}
+
+function NoSufficentData() {
+  return (
+    <div className="flex flex-col gap-4">
+      <TypographyP className="text-center">Didn’t find what you’re looking for?</TypographyP>
+      <div className="flex flex-row gap-4">
+        <Link href={NEXT_ROUTER.projects.root} className="flex-1 cursor-pointer transition-opacity hover:opacity-80">
+          <Card className="relative flex-1">
+            <GlowingEffect spread={40} glow={true} disabled={false} proximity={64} inactiveZone={0.01} />
+
+            <CardHeader className="flex flex-col gap-2">
+              <div className="flex flex-row items-center gap-2">
+                <FolderSearch className="size-5 text-cyan-200" />
+                <CardTitle className="text-left text-base text-cyan-100">Browse</CardTitle>
+              </div>
+              <CardDescription className="text-left">Explore projects on your own with Browse.</CardDescription>
+            </CardHeader>
+          </Card>
+        </Link>
+        <Link href={NEXT_ROUTER.odSay.root} className="flex-1 cursor-pointer transition-opacity hover:opacity-80">
+          <Card className="relative flex-1">
+            <GlowingEffect spread={40} glow={true} disabled={false} proximity={64} inactiveZone={0.01} />
+
+            <CardHeader className="flex flex-col gap-2">
+              <div className="flex flex-row items-center gap-2">
+                <Bot className="size-5 text-purple-200" />
+                <CardTitle className="text-left text-base text-purple-100">ODSay</CardTitle>
+              </div>
+              <CardDescription className="text-left">Let our chatbot help you find the right project.</CardDescription>
+            </CardHeader>
+          </Card>
+        </Link>
+      </div>
+    </div>
+  );
+}
+export function PageHeader({ hasSufficentData = false }: { hasSufficentData?: boolean }) {
+  const Footer = hasSufficentData ? HasSufficentData : NoSufficentData;
+
   return (
     <header className="relative z-[1] w-full py-16">
       <Image
@@ -26,10 +76,7 @@ export function PageHeader() {
             Get recommendations based on your profile and past contributions
           </TypographyP>
         </div>
-        <Button>
-          You don’t find your perfect fit ?
-          <ArrowRight />
-        </Button>
+        <Footer />
       </div>
     </header>
   );