feat: enhance hackathon registration and overview features

- Removed unused image domain from next.config.ts.
- Integrated registration modal into HackathonPage for improved user experience.
- Updated HackathonBanner to include action buttons for registration and submission management.
- Refactored HackathonOverview to utilize markdown for content rendering and improved loading/error handling.
- Added validation utilities for hackathon step data to ensure meaningful input during creation.

Author: 0xdevcollins

app/(landing)/hackathons/[slug]/page.tsx

@@ -3,6 +3,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useRouter, useSearchParams, useParams } from 'next/navigation';
 import { useHackathonData } from '@/lib/providers/hackathonProvider';
+import { useRegisterHackathon } from '@/hooks/hackathon/use-register-hackathon';
+import { RegisterHackathonModal } from '@/components/hackathons/overview/RegisterHackathonModal';
 
 import { HackathonBanner } from '@/components/hackathons/hackathonBanner';
 import { HackathonNavTabs } from '@/components/hackathons/hackathonNavTabs';
@@ -64,6 +66,47 @@ export default function HackathonPage() {
 
   const hackathonId = params.slug as string;
   const [activeTab, setActiveTab] = useState('overview');
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+
+  // Registration logic
+  const { isRegistered, hasSubmitted, checkStatus } = useRegisterHackathon({
+    hackathonSlugOrId: hackathonId,
+    organizationId: undefined, // organizationId not available in currentHackathon type
+    autoCheck: !!hackathonId,
+  });
+
+  const isEnded = currentHackathon?.status === 'ended';
+
+  // Check if team formation is available
+  const isTeamHackathon =
+    currentHackathon?.participation?.participantType === 'team' ||
+    currentHackathon?.participation?.participantType === 'team_or_individual';
+
+  const isTeamFormationEnabled =
+    isTeamHackathon &&
+    currentHackathon?.participation?.tabVisibility?.joinATeamTab !== false;
+
+  // Button handlers
+  const handleJoinClick = () => {
+    setShowRegisterModal(true);
+  };
+
+  const handleRegisterSuccess = () => {
+    checkStatus();
+    router.push('?tab=submission');
+  };
+
+  const handleSubmitClick = () => {
+    router.push('?tab=submission');
+  };
+
+  const handleViewSubmissionClick = () => {
+    router.push('?tab=submission');
+  };
+
+  const handleFindTeamClick = () => {
+    router.push('?tab=team-formation');
+  };
 
   useEffect(() => {
     if (hackathonId) {
@@ -115,9 +158,29 @@ export default function HackathonPage() {
         participants={currentHackathon.participants}
         totalPrizePool={currentHackathon.totalPrizePool}
         imageUrl={currentHackathon.imageUrl}
-        startDate={currentHackathon.startDate} // if upcoming
+        startDate={currentHackathon.startDate}
+        endDate={currentHackathon.endDate}
+        isRegistered={isRegistered}
+        hasSubmitted={hasSubmitted}
+        isEnded={isEnded}
+        isTeamFormationEnabled={isTeamFormationEnabled}
+        onJoinClick={handleJoinClick}
+        onSubmitClick={handleSubmitClick}
+        onViewSubmissionClick={handleViewSubmissionClick}
+        onFindTeamClick={handleFindTeamClick}
       />
 
+      {/* Registration Modal */}
+      {hackathonId && (
+        <RegisterHackathonModal
+          open={showRegisterModal}
+          onOpenChange={setShowRegisterModal}
+          hackathonSlugOrId={hackathonId}
+          organizationId={undefined}
+          onSuccess={handleRegisterSuccess}
+        />
+      )}
+
       {/* Tabs */}
       <HackathonNavTabs
         tabs={hackathonTabs}

components/hackathons/hackathonBanner.tsx

@@ -2,8 +2,10 @@
 
 import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { formatDate } from '@/lib/utils';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { FileText, Users, ArrowRight } from 'lucide-react';
 // import { sanitizeHtml } from '@/lib/utils/renderHtml';
 
 interface HackathonBannerProps {
@@ -17,6 +19,15 @@ interface HackathonBannerProps {
   status?: string;
   participants?: number;
   totalPrizePool?: string;
+  // Action buttons
+  isRegistered?: boolean;
+  hasSubmitted?: boolean;
+  isEnded?: boolean;
+  isTeamFormationEnabled?: boolean;
+  onJoinClick?: () => void;
+  onSubmitClick?: () => void;
+  onViewSubmissionClick?: () => void;
+  onFindTeamClick?: () => void;
 }
 
 interface TimeRemaining {
@@ -59,6 +70,47 @@ function formatCountdown(time: TimeRemaining): string {
   }
 }
 
+const CategoriesDisplay = ({
+  categoriesList,
+}: {
+  categoriesList: string[];
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [showEllipsis, setShowEllipsis] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const check = () => setShowEllipsis(el.scrollWidth > el.clientWidth);
+
+    check();
+
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, [categoriesList]);
+
+  return (
+    <div className={`relative flex items-center overflow-hidden`}>
+      <div ref={ref} className='scrollbar-hide flex gap-1.5 overflow-x-auto'>
+        {categoriesList.map((cat, i) => (
+          <span
+            key={i}
+            className='rounded-md bg-neutral-800/70 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-gray-300'
+          >
+            {cat}
+          </span>
+        ))}
+      </div>
+      {showEllipsis && (
+        <div className='pointer-events-none absolute top-0 right-0 bottom-0 flex w-6 items-center justify-end bg-gradient-to-l from-[#030303] via-[#030303]/80 to-transparent pr-1'>
+          <span className='text-xs font-medium text-gray-500'>...</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
 export function HackathonBanner({
   title,
   tagline,
@@ -70,6 +122,14 @@ export function HackathonBanner({
   status,
   participants,
   totalPrizePool,
+  isRegistered = false,
+  hasSubmitted = false,
+  isEnded = false,
+  isTeamFormationEnabled = false,
+  onJoinClick,
+  onSubmitClick,
+  onViewSubmissionClick,
+  onFindTeamClick,
 }: HackathonBannerProps) {
   const [timeRemaining, setTimeRemaining] = useState<TimeRemaining>({
     days: 0,
@@ -203,9 +263,9 @@ export function HackathonBanner({
   };
 
   return (
-    <Card className='relative w-full overflow-hidden rounded-none border-0 p-0 shadow-none'>
+    <Card className='relative w-full overflow-hidden rounded-none border-0 bg-transparent p-0 shadow-none'>
       <div
-        className='relative h-64 md:h-80 lg:h-96'
+        className='relative h-64 rounded-4xl md:h-80 lg:h-96'
         style={{
           backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
           backgroundSize: 'cover',
@@ -260,23 +320,62 @@ export function HackathonBanner({
             )}
           </div>
 
-          {/* Bottom section: Deadline/Start/Ended and categories */}
+          {/* Bottom section: Deadline/Start/Ended, categories, and action buttons */}
           <div className='flex flex-col gap-2 md:gap-3'>
             {renderDateSection()}
             {categories && categories.length > 0 && (
               <div className='flex flex-wrap items-center gap-2'>
                 <span className='text-sm font-semibold text-[#a7f950]'>
                   Categories:
                 </span>
-                {categories.map(category => (
-                  <Badge
-                    key={category}
+                <CategoriesDisplay categoriesList={categories} />
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            {!isEnded && (
+              <div className='mt-2 flex flex-wrap items-center gap-3'>
+                {!isRegistered && onJoinClick && (
+                  <Button
+                    onClick={onJoinClick}
+                    className='bg-[#a7f950] font-semibold text-black hover:bg-[#8fd93f]'
+                  >
+                    Join Hackathon
+                    <ArrowRight className='ml-2 h-4 w-4' />
+                  </Button>
+                )}
+
+                {isRegistered && !hasSubmitted && onSubmitClick && (
+                  <Button
+                    onClick={onSubmitClick}
+                    className='bg-[#a7f950] font-semibold text-black hover:bg-[#8fd93f]'
+                  >
+                    <FileText className='mr-2 h-4 w-4' />
+                    Submit Project
+                    <ArrowRight className='ml-2 h-4 w-4' />
+                  </Button>
+                )}
+
+                {isRegistered && hasSubmitted && onViewSubmissionClick && (
+                  <Button
+                    onClick={onViewSubmissionClick}
+                    className='bg-[#a7f950] font-semibold text-black hover:bg-[#8fd93f]'
+                  >
+                    <FileText className='mr-2 h-4 w-4' />
+                    View Submission
+                  </Button>
+                )}
+
+                {isRegistered && isTeamFormationEnabled && onFindTeamClick && (
+                  <Button
+                    onClick={onFindTeamClick}
                     variant='outline'
-                    className='border-gray-400 text-xs text-gray-100'
+                    className='border-blue-500/50 font-semibold text-blue-400 hover:bg-blue-500/20'
                   >
-                    {category}
-                  </Badge>
-                ))}
+                    <Users className='mr-2 h-4 w-4' />
+                    Find Team
+                  </Button>
+                )}
               </div>
             )}
           </div>