Hackathon details

components/hackathons/hackathonBanner.tsx

@@ -4,10 +4,11 @@ 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';
 
 interface HackathonBannerProps {
   title: string;
-  subtitle?: string;
+  subtitle?: string | React.ReactNode;
   imageUrl?: string;
   deadline?: string;
   startDate?: string;
@@ -244,11 +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 && (
-              <p className='max-w-2xl text-left text-base text-gray-200 drop-shadow-md md:text-lg'>
-                {subtitle.slice(3)}
-              </p>
+            {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)}
+              />
+            ) : (
+              <div className='max-w-2xl text-left text-base text-gray-200 drop-shadow-md md:text-lg'>
+                {subtitle}
+              </div>
             )}
+
             {subtitle && (
               <div className='h-1 w-20 rounded-full bg-[#a7f950] md:w-24' />
             )}

components/wallet/WalletButton.tsx

@@ -115,7 +115,7 @@ export const WalletButton = () => {
   return (
     <Button
       onClick={handleConnect}
-      className='flex items-center gap-2 bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700'
+      className='bg-primary hover:bg-primary/60 flex items-center gap-2 text-black dark:bg-blue-600 dark:hover:bg-blue-700'
     >
       <Wallet className='h-4 w-4' />
       Connect Wallet

lib/utils/renderHtml.ts

@@ -0,0 +1,50 @@
+import DOMPurify from 'dompurify';
+
+export function sanitizeHtml(html: string | undefined | null) {
+  const dirty = html ?? '';
+
+  try {
+    const clean = DOMPurify.sanitize(dirty, {
+      ALLOWED_TAGS: [
+        'b',
+        'i',
+        'em',
+        'strong',
+        'a',
+        'p',
+        'ul',
+        'ol',
+        'li',
+        'br',
+        'span',
+        'div',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'img',
+        'code',
+        'pre',
+        'blockquote',
+        'small',
+        'sup',
+        'sub',
+      ],
+      ALLOWED_ATTR: [
+        'href',
+        'target',
+        'rel',
+        'class',
+        'id',
+        'title',
+        'alt',
+        'src',
+      ],
+    });
+    return { __html: clean };
+  } catch (err) {
+    console.error(err);
+    return { __html: dirty };
+  }
+}

package.json

@@ -94,6 +94,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.12",