Develop

app/error.tsx

@@ -2,7 +2,7 @@
 
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { TriangleAlert } from "lucide-react";
 import { useEffect } from "react";
 import { SUPPORT_FACEBOOK } from "@/constants";
@@ -23,10 +23,9 @@ export default function Error({
     <div className="flex min-h-screen flex-col items-center justify-center gap-4">
       <Card className="flex flex-col gap-4 p-12">
         <img src="/error.png" alt="Error" className="mx-auto w-96" />
-        <div className="flex items-center gap-3">
-          <HeaderIcon icon={TriangleAlert} />
-          <HeaderText>Something went wrong.</HeaderText>
-        </div>
+        <HeaderTitle icon={TriangleAlert} className="mb-0">
+          Something went wrong.
+        </HeaderTitle>
         <span>
           Sorry for the inconvenience. Please{" "}
           <a href={SUPPORT_FACEBOOK}>contact us for support</a>.

app/hire/dashboard/page.tsx

@@ -16,7 +16,7 @@ import { Briefcase, Plus } from "lucide-react";
 import { useState, useRef, useEffect } from "react";
 import { useAuthContext } from "../authctx";
 import { Job } from "@/lib/db/db.types";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { useRouter } from "next/navigation";
 
 const SUPER_LISTING_CREATE_PATH =
@@ -89,13 +89,9 @@ function DashboardContent() {
           isMobile ? "px-1" : "px-4",
         )}
       >
-        <div
-          className="flex flex-row items-center gap-3 mb-2"
-          onClick={handleSecretSuperListingAccess}
-        >
-          <HeaderIcon icon={Briefcase} />
-          <HeaderText>Job listings</HeaderText>
-        </div>
+        <HeaderTitle icon={Briefcase} onClick={handleSecretSuperListingAccess}>
+          Job listings
+        </HeaderTitle>
         <div className="flex flex-col flex-1">
           <div>
             <div className="flex gap-4 mb-4">

app/hire/forgot-password/page.tsx

@@ -9,7 +9,7 @@ import { EmployerUserService } from "@/lib/api/services";
 import { cn } from "@/lib/utils";
 import { useAppContext } from "@/lib/ctx-app";
 import { AnimatePresence, motion } from "framer-motion";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { HelpCircle, MailCheck } from "lucide-react";
 import { useBlurTransition } from "@/components/animata/blur";
 
@@ -73,10 +73,7 @@ const ForgotPasswordForm = () => {
       <AnimatePresence>
         <motion.div {...blurTransition} className="w-full">
           <Card className="flex flex-col gap-4">
-            <div className="flex flex-row items-center gap-3 mb-2">
-              <HeaderIcon icon={HelpCircle} />
-              <HeaderText>Reset password</HeaderText>
-            </div>
+            <HeaderTitle icon={HelpCircle}>Reset password</HeaderTitle>
             {error && (
               <div className="mb-2 p-3 bg-red-50 border border-red-200 rounded-lg">
                 <p className="text-sm text-red-600 justify-center">{error}</p>

app/hire/help/page.tsx

@@ -15,7 +15,7 @@ import {
 } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { useBlurTransition } from "@/components/animata/blur";
 import {
   EMPLOYER_GUIDE,
@@ -43,10 +43,7 @@ export default function HelpPage() {
           )}
           {...blurTransition}
         >
-          <div className="flex flex-row items-center gap-3 mb-2">
-            <HeaderIcon icon={HelpCircle} />
-            <HeaderText>Help</HeaderText>
-          </div>
+          <HeaderTitle icon={HelpCircle}>Help</HeaderTitle>
           <div className="grid gap-2 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
             <Card className="flex flex-col gap-2">
               <h4 className="tracking-tighter">Contact us</h4>

app/hire/login/page.tsx

@@ -13,7 +13,7 @@ import { Card } from "@/components/ui/card";
 import { MailCheck, TriangleAlert, User } from "lucide-react";
 import { Loader } from "@/components/ui/loader";
 import { AnimatePresence, motion } from "framer-motion";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { useBlurTransition } from "@/components/animata/blur";
 
 export default function LoginPage() {
@@ -105,10 +105,7 @@ function LoginContent() {
         <div className="flex items-center w-full max-w-2xl h-full">
           <Card className="w-full">
             {/* Welcome Message */}
-            <div className="flex flex-row items-center gap-3 mb-2">
-              <HeaderIcon icon={User} />
-              <HeaderText>Log in</HeaderText>
-            </div>
+            <HeaderTitle icon={User}>Log in</HeaderTitle>
             {/* Error Message */}
             {error && (
               <div

app/hire/register/page.tsx

@@ -18,7 +18,7 @@ import { useAppContext } from "@/lib/ctx-app";
 import Link from "next/link";
 import { TriangleAlert, User } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { useBlurTransition } from "@/components/animata/blur";
 
 const [EmployerRegisterForm, useEmployerRegisterForm] =
@@ -187,10 +187,7 @@ const EmployerEditor = ({
       <AnimatePresence>
         <motion.div {...blurTransition} className="w-full">
           <Card>
-            <div className="flex flex-row items-center gap-3 mb-2">
-              <HeaderIcon icon={User} />
-              <HeaderText>Register</HeaderText>
-            </div>
+            <HeaderTitle icon={User}>Register</HeaderTitle>
             {missingFields.length > 0 && (
               <div
                 className={cn(

app/hire/reset-password/[hash]/page.tsx

@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
 import { useAppContext } from "@/lib/ctx-app";
 import { HelpCircle, MailCheck } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
-import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { useBlurTransition } from "@/components/animata/blur";
 
 /**
@@ -111,10 +111,7 @@ const ResetPasswordForm = ({ hash }: { hash: string }) => {
                 style={{ width: `${redirectProgress}%` }}
               />
             </div>
-            <div className="flex flex-row items-center gap-3 mb-2">
-              <HeaderIcon icon={MailCheck} />
-              <HeaderText>Password updated</HeaderText>
-            </div>
+            <HeaderTitle icon={MailCheck}>Password updated</HeaderTitle>
             <div className="mb-2 flex items-center gap-2 rounded-[0.33em] bg-emerald-600 px-4 py-3 text-white">
               <MailCheck className="h-5 w-5" />
               <p className="text-sm text-white">{success}</p>
@@ -135,10 +132,7 @@ const ResetPasswordForm = ({ hash }: { hash: string }) => {
     <AnimatePresence>
       <motion.div {...blurTransition} className="w-full">
         <Card className="flex flex-col gap-4 w-full">
-          <div className="flex flex-row items-center gap-3 mb-2">
-            <HeaderIcon icon={HelpCircle} />
-            <HeaderText>Reset password</HeaderText>
-          </div>
+          <HeaderTitle icon={HelpCircle}>Reset password</HeaderTitle>
           {error && (
             <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
               <p className="text-sm text-red-600 justify-center">{error}</p>

app/student/allowLanding.tsx

@@ -11,12 +11,23 @@ export default function AllowLanding({
 }) {
   const pathname = usePathname();
   const isStudentLanding = pathname === "/";
+  const isChallengePage =
+    pathname.startsWith("/challenges/") ||
+    pathname.startsWith("/student/challenges/");
   const hideSharedHeader =
-    isStudentLanding || pathname.startsWith("/companies/");
+    isStudentLanding || pathname.startsWith("/companies/") || isChallengePage;
+
+  if (hideSharedHeader) {
+    return (
+      <div className="min-h-full bg-gray-50 flex flex-col">{children}</div>
+    );
+  }
 
   return (
     <div className="h-[100svh] bg-gray-50 flex flex-col overflow-y-auto">
-      <Suspense>{!hideSharedHeader && <Header />}</Suspense>
+      <Suspense>
+        <Header />
+      </Suspense>
       <div className="flex-grow overflow-auto flex flex-col">{children}</div>
     </div>
   );

app/student/applications/page.tsx

@@ -19,7 +19,7 @@ import { Loader } from "@/components/ui/loader";
 import { Card } from "@/components/ui/card";
 import { JobHead, SuperListingBadge } from "@/components/shared/jobs";
 import { UserApplication } from "@/lib/db/db.types";
-import { HeaderText, HeaderIcon } from "@/components/ui/text";
+import { HeaderTitle } from "@/components/ui/text";
 import { Separator } from "@/components/ui/separator";
 import { PageError } from "@/components/ui/error";
 import { cn } from "@/lib/utils";
@@ -61,10 +61,7 @@ export default function ApplicationsPage() {
     <div className="h-full overflow-y-auto py-6 px-4">
       <div className="max-w-5xl mx-auto">
         <div className="mb-6 sm:mb-8 animate-fade-in">
-          <div className="flex flex-row items-center gap-3 mb-2">
-            <HeaderIcon icon={BookA}></HeaderIcon>
-            <HeaderText>My Applications</HeaderText>
-          </div>
+          <HeaderTitle icon={BookA}>My Applications</HeaderTitle>
           <div className="flex-1 flex-row">
             <p className="text-gray-600 text-sm sm:text-base mb-2">
               Track your internship applications and their status