Hackathon details

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

@@ -20,7 +20,7 @@ export default function HackathonPage() {
 
   const {
     currentHackathon,
-    content,
+    // content,
     timelineEvents,
     participants,
     submissions,
@@ -70,7 +70,6 @@ export default function HackathonPage() {
   if (loading) {
     return <LoadingScreen />;
   }
-
   if (!currentHackathon) {
     return (
       <div className='flex min-h-screen items-center justify-center'>
@@ -91,7 +90,7 @@ export default function HackathonPage() {
       {/* Banner */}
       <HackathonBanner
         title={currentHackathon.title}
-        subtitle={currentHackathon.subtitle}
+        tagline={currentHackathon.tagline}
         deadline={currentHackathon.deadline}
         categories={currentHackathon.categories}
         status={currentHackathon.status}
@@ -112,7 +111,7 @@ export default function HackathonPage() {
       <div className='mx-auto max-w-7xl px-6 py-12 text-white'>
         {activeTab === 'overview' && (
           <HackathonOverview
-            content={content}
+            content={currentHackathon.description}
             timelineEvents={timelineEvents}
             prizes={prizes}
           />

app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx

@@ -106,7 +106,7 @@ export default function DraftPreviewPage({ params }: PreviewPageProps) {
           const hackathon: Hackathon = {
             id: transformed._id,
             title: transformed.information.title,
-            subtitle: transformed.participation?.about || '',
+            tagline: transformed.participation?.about || '',
             description: transformed.information.description,
             slug: transformed.information.slug || '',
             imageUrl: transformed.information.banner,
@@ -378,7 +378,7 @@ export default function DraftPreviewPage({ params }: PreviewPageProps) {
       {/* Banner */}
       <HackathonBanner
         title={previewHackathon.title}
-        subtitle={previewHackathon.subtitle}
+        tagline={previewHackathon.tagline}
         deadline={previewHackathon.deadline}
         categories={previewHackathon.categories}
         status={previewHackathon.status}

components/FeatureFuture.tsx

@@ -20,9 +20,11 @@ export function FutureFeature({
   badgeClassName,
 }: FutureFeatureProps) {
   return (
-    <div className={cn('relative inline-flex items-center', className)}>
-      <div className={disabledClass}>{children}</div>
-
+    <div className={cn('relative w-full', className)}>
+      {' '}
+      {/* Changed from inline-flex to w-full */}
+      <div className={cn('w-full', disabledClass)}>{children}</div>{' '}
+      {/* Added w-full */}
       <Badge
         variant='secondary'
         className={cn(

components/auth/LoginWrapper.tsx

@@ -171,11 +171,7 @@ const LoginWrapper = ({ setLoadingState }: LoginWrapperProps) => {
               setLoadingState(true);
             },
             onSuccess: async () => {
-              setIsLoading(false);
-              setLoadingState(false);
-
-              // Wait a bit for cookies to be set by Better Auth
-              await new Promise(resolve => setTimeout(resolve, 100));
+              await new Promise(resolve => setTimeout(resolve, 200));
 
               const session = await authClient.getSession();
 
@@ -204,8 +200,8 @@ const LoginWrapper = ({ setLoadingState }: LoginWrapperProps) => {
                 }
               }
 
-              // Use full page reload to ensure cookies are available in middleware
-              // Use callbackUrl if provided, otherwise redirect to home
+              // Keep loading state active during redirect
+              // The page will unmount when redirecting, so no need to set false
               window.location.href = callbackUrl;
             },
             onError: ctx => {

components/hackathons/hackathonBanner.tsx

@@ -4,12 +4,12 @@ import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { formatDate } from '@/lib/utils';
 import { useEffect, useState } from 'react';
-import { sanitizeHtml } from '@/lib/utils/renderHtml';
+// import { sanitizeHtml } from '@/lib/utils/renderHtml';
 
 interface HackathonBannerProps {
   title: string;
-  subtitle?: string | React.ReactNode;
   imageUrl?: string;
+  tagline?: string;
   deadline?: string;
   startDate?: string;
   endDate?: string;
@@ -61,7 +61,7 @@ function formatCountdown(time: TimeRemaining): string {
 
 export function HackathonBanner({
   title,
-  subtitle,
+  tagline,
   imageUrl,
   deadline,
   startDate,
@@ -245,18 +245,17 @@ export function HackathonBanner({
             <h1 className='text-left text-3xl leading-tight font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl'>
               {title}
             </h1>
-            {subtitle && typeof subtitle === 'string' ? (
-              <div
-                className='max-w-2xl text-left text-base text-gray-200 drop-shadow-md md:text-lg'
-                dangerouslySetInnerHTML={sanitizeHtml(subtitle)}
-              />
+            {tagline && typeof tagline === 'string' ? (
+              <span className='max-w-2xl text-left text-base text-gray-200 drop-shadow-md md:text-lg'>
+                {tagline}
+              </span>
             ) : (
               <div className='max-w-2xl text-left text-base text-gray-200 drop-shadow-md md:text-lg'>
-                {subtitle}
+                {tagline}
               </div>
             )}
 
-            {subtitle && (
+            {tagline && (
               <div className='h-1 w-20 rounded-full bg-[#a7f950] md:w-24' />
             )}
           </div>

components/hackathons/overview/hackathonOverview.tsx

@@ -1,5 +1,6 @@
 'use client';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { HackathonTimeline } from './hackathonTimeline';
 import { HackathonPrizes } from './hackathonPrizes';
 
@@ -33,19 +34,8 @@ export function HackathonOverview({
     <div className={`w-full py-8 ${className}`}>
       <article className='prose prose-sm sm:prose lg:prose-lg dark:prose-invert max-w-none text-left'>
         <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
           components={{
-            h1: ({ ...props }) => (
-              <h1 className='mb-6 text-4xl font-bold' {...props} />
-            ),
-            h2: ({ ...props }) => (
-              <h2 className='mt-8 mb-4 text-3xl font-bold' {...props} />
-            ),
-            h3: ({ ...props }) => (
-              <h3 className='mt-6 mb-3 text-2xl font-semibold' {...props} />
-            ),
-            p: ({ ...props }) => (
-              <p className='mb-4 text-base leading-7' {...props} />
-            ),
             ul: ({ ...props }) => (
               <ul
                 className='marker:text-primary mb-4 ml-4 list-inside list-disc space-y-2'
@@ -58,37 +48,34 @@ export function HackathonOverview({
                 {...props}
               />
             ),
-            li: ({ ...props }) => <li className='mb-1 text-base' {...props} />,
-            blockquote: ({ ...props }) => (
-              <blockquote
-                className='border-primary my-4 border-l-4 pl-4 text-gray-600 italic dark:text-gray-400'
+
+            table: ({ ...props }) => (
+              <table
+                className='w-full border border-gray-400 text-sm text-white'
                 {...props}
               />
             ),
-            code: ({ ...props }) => (
-              <code
-                className='rounded bg-gray-100 px-2 py-1 font-mono text-sm dark:bg-gray-800'
+            thead: ({ ...props }) => (
+              <thead
+                className='border-b border-gray-400 text-white'
                 {...props}
               />
             ),
-            pre: ({ ...props }) => (
-              <pre
-                className='mb-4 overflow-auto rounded bg-gray-100 p-4 dark:bg-gray-800'
-                {...props}
-              />
+            tbody: ({ ...props }) => (
+              <tbody className='text-white' {...props} />
             ),
-            table: ({ ...props }) => (
-              <table className='mb-4 w-full border-collapse' {...props} />
+            tr: ({ ...props }) => (
+              <tr className='border-b border-gray-400' {...props} />
             ),
             th: ({ ...props }) => (
               <th
-                className='border border-gray-300 bg-gray-100 px-4 py-2 dark:border-gray-700 dark:bg-gray-800'
+                className='border border-gray-400 px-3 py-2 text-left font-semibold text-white'
                 {...props}
               />
             ),
             td: ({ ...props }) => (
               <td
-                className='border border-gray-300 px-4 py-2 dark:border-gray-700'
+                className='border border-gray-400 px-3 py-2 text-white'
                 {...props}
               />
             ),

components/hackathons/overview/hackathonPrizes.tsx

@@ -1,13 +1,5 @@
 'use client';
 
-// interface Prize {
-//   title: string
-//   rank: string
-//   prize: string
-//   details: string[]
-//   icon?: string
-// }
-
 interface HackathonPrizesProps {
   title?: string;
   totalPrizes?: string;

components/landing-page/Explore.tsx

@@ -117,6 +117,7 @@ const tabs = [
   { name: 'Featured Projects', value: 'featured-projects' },
   { name: 'Ongoing Hackathons', value: 'ongoing-hackathons' },
   { name: 'Open Grants', value: 'open-grants' },
+  { name: 'Bounties', value: 'live-grants' },
 ];
 
 export default function Explore() {

components/landing-page/Hero2.tsx

@@ -118,6 +118,7 @@ export default function Hero2() {
         <div className='relative mx-auto hidden h-[500px] max-w-5xl md:block'>
           <div className='absolute top-12 left-0 z-10 w-72 -rotate-3 transform cursor-pointer shadow-xl transition-transform duration-300 hover:rotate-0'>
             <HackathonCard
+              tagline='Build the future of boundless'
               organizationName='Boundless'
               deadlineInDays={10}
               categories={['Web3', 'DeFi', 'Blockchain']}
@@ -167,6 +168,7 @@ export default function Hero2() {
 
           <div className='absolute bottom-0 left-1/2 z-20 w-96 -translate-x-1/2 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:scale-105'>
             <HackathonCard
+              tagline='Build the future of boundless'
               organizationName='Boundless'
               deadlineInDays={5}
               categories={['AI', 'Machine Learning', 'Open Source']}

components/landing-page/hackathon/HackathonCard.tsx

@@ -14,7 +14,8 @@ type HackathonCardProps = {
   organizerLogo: string;
   hackathonImage: string;
   hackathonTitle: string;
-  hackathonDescription: string;
+  tagline: string;
+  hackathonDescription?: string;
   status: 'Published' | 'Ongoing' | 'Completed' | 'Cancelled';
   deadlineInDays: number;
   categories: string[];
@@ -45,14 +46,15 @@ function HackathonCard({
   organizerLogo,
   hackathonImage,
   hackathonTitle,
-  hackathonDescription,
+  // hackathonDescription,
   status,
   deadlineInDays,
   categories,
   location,
   venueType,
   participants,
   prizePool,
+  tagline,
   isFullWidth = false,
   className,
 }: HackathonCardProps) {
@@ -255,9 +257,7 @@ function HackathonCard({
           <h2 className='line-clamp-2 text-base leading-tight font-semibold text-white sm:text-lg'>
             {hackathonTitle}
           </h2>
-          <p className='mt-1 line-clamp-2 text-sm text-gray-400'>
-            {hackathonDescription}
-          </p>
+          <p className='mt-1 line-clamp-2 text-sm text-gray-400'>{tagline}</p>
         </div>
 
         <div className='flex flex-wrap items-center justify-between border-t border-neutral-800 px-4 pt-3 text-sm text-gray-400 sm:px-5'>

components/organization/OrganizationAnalytics.tsx

@@ -123,7 +123,7 @@ const OrganizationAnalytics = () => {
 
   return (
     <div className='min-h-screen bg-black'>
-      <div className='mx-auto max-w-6xl px-6 py-8'>
+      <div className=' '>
         {/* Header */}
         <div className='mb-8'>
           <h1 className='mb-1 text-2xl font-medium text-white'>Analytics</h1>

components/organization/hackathons/new/NewHackathonTab.tsx

@@ -183,7 +183,7 @@ export default function NewHackathonTab({
 
   return (
     <div
-      className='bg-background-main-bg flex-1 overflow-hidden text-white'
+      className='bg-background-main-bg mx-auto max-w-6xl flex-1 overflow-hidden px-6 py-8 text-white'
       id={organizationId}
     >
       <Tabs

components/organization/hackathons/new/tabs/InfoTab.tsx

@@ -51,6 +51,7 @@ export default function InfoTab({
     defaultValues: {
       name: initialData?.name || '',
       banner: initialData?.banner || '',
+      tagline: initialData?.tagline || '',
       description: initialData?.description || '',
       categories: Array.isArray(initialData?.categories)
         ? initialData.categories
@@ -124,7 +125,27 @@ export default function InfoTab({
           name='banner'
           setValue={form.setValue}
         />
-
+        {/* Tagline */}
+        <FormField
+          control={form.control}
+          name='tagline'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className='text-sm font-medium text-white'>
+                Tagline <span className='text-red-500'>*</span>
+              </FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type='text'
+                  placeholder='Build the Future. Ship the Impossible. (Max of 200 char)'
+                  className='h-11 border-zinc-800 bg-zinc-900/50 text-white placeholder:text-zinc-600'
+                />
+              </FormControl>
+              <FormMessage className='text-xs text-red-500' />
+            </FormItem>
+          )}
+        />
         {/* Description */}
         <FormField
           control={form.control}

components/organization/hackathons/new/tabs/schemas/infoSchema.ts

@@ -42,6 +42,10 @@ export const infoSchema = z
     venueType: z.enum(['virtual', 'physical'], {
       message: 'Venue type is required',
     }),
+    tagline: z
+      .string()
+      .min(1, 'Tagline is required')
+      .max(200, 'Tagline must not exceed 200 characters'),
 
     country: z.string().optional(),
     state: z.string().optional(),