feat: new card for hackathon (#495)

* feat: new card for hackathon

* fix: changed to correct status

* fix: update the ogr button

Author: 0xdevcollins

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

@@ -95,13 +95,14 @@ export default function DraftPreviewPage({ params }: PreviewPageProps) {
           resolvedParams.orgId,
           resolvedParams.draftId
         );
-        let organizationData = { name: '', logo: '' };
+        let organizationData = { name: '', logo: '', slug: '' };
         try {
           const orgRes = await getOrganization(resolvedParams.orgId);
           if (orgRes) {
             organizationData = {
               name: orgRes.name,
               logo: orgRes.logo || '',
+              slug: orgRes.slug || '',
             };
           }
         } catch (orgErr) {
@@ -130,6 +131,7 @@ export default function DraftPreviewPage({ params }: PreviewPageProps) {
               id: resolvedParams.orgId,
               name: organizationData.name,
               logo: organizationData.logo,
+              slug: organizationData.slug,
             },
 
             status: 'DRAFT',

components/avatars/GroupAvatar.tsx

@@ -19,18 +19,15 @@ const GroupAvatar = ({ members }: GroupAvatarProps) => {
   return (
     <AvatarGroup>
       {visibleMembers.map((member, index) => (
-        <Avatar
-          key={index}
-          className='size-8 border-2 border-[#141517] sm:size-10'
-        >
+        <Avatar key={index} className='size-8 border-none! sm:size-6'>
           <AvatarImage src={member} alt={`Member ${index + 1}`} />
           <AvatarFallback className='bg-[#1E2329] text-[10px] text-white'>
             {member.slice(0, 2).toUpperCase()}
           </AvatarFallback>
         </Avatar>
       ))}
       {remainingCount > 0 && (
-        <AvatarGroupCount className='size-8 bg-[#1E2329] text-xs font-bold text-gray-400 ring-2 ring-[#141517] sm:size-10 sm:text-sm'>
+        <AvatarGroupCount className='bg-background text-foreground ring-border size-8 text-xs font-bold ring-2 sm:size-6 sm:text-xs'>
           +{remainingCount}
         </AvatarGroupCount>
       )}

components/hackathons/HackathonsPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import HackathonCard from '@/components/landing-page/hackathon/HackathonCard';
+import { HackathonCard } from '@/components/landing-page/hackathon/HackathonCard';
 import HackathonsFiltersHeader from '@/components/hackathons/HackathonsFiltersHeader';
 import LoadingSpinner from '@/components/LoadingSpinner';
 import { useHackathonFilters } from '@/hooks/hackathon/use-hackathon-filters';

components/landing-page/Explore.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 import Image from 'next/image';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import HackathonCard from './hackathon/HackathonCard';
+import { HackathonCard } from './hackathon/HackathonCard';
 import Link from 'next/link';
 import { getPublicHackathonsList } from '@/lib/api/hackathons';
 import type { Hackathon } from '@/lib/api/hackathons';

components/landing-page/Hero2.tsx

@@ -10,7 +10,7 @@ import {
 } from '../ui/shadcn-io/cursor';
 import Image from 'next/image';
 import { BoundlessButton } from '../buttons';
-import HackathonCard from '@/components/landing-page/hackathon/HackathonCard';
+import { HackathonCard } from '@/components/landing-page/hackathon/HackathonCard';
 import ProjectCard from '@/features/projects/components/ProjectCard';
 import { Crowdfunding } from '@/features/projects/types';
 

components/landing-page/hackathon/AnimatedUsersButton.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useRef } from 'react';
+import { gsap } from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { Users } from 'lucide-react';
+
+// Register the hook to prevent React strict-mode double-firing issues
+gsap.registerPlugin(useGSAP);
+
+export default function AnimatedUsersButton() {
+  const usersIconRef = useRef<SVGSVGElement>(null);
+
+  // 1. Mount Animation: Slides the background user in when the page loads
+  useGSAP(
+    () => {
+      if (!usersIconRef.current) return;
+
+      // Selects elements inside this specific SVG
+      const q = gsap.utils.selector(usersIconRef);
+
+      // Target the elements making up the background person
+      // (Lucide draws the foreground person first, so the last path/circle belong to the background)
+      gsap.from(q('path:last-of-type, circle:last-of-type'), {
+        x: 10,
+        opacity: 0,
+        duration: 0.6,
+        ease: 'back.out(1.5)',
+        delay: 0.1, // Slight delay so it feels natural after the page loads
+      });
+    },
+    { scope: usersIconRef }
+  );
+
+  // 2. Hover Animation: Makes both users "bounce" sequentially
+  const handleMouseEnter = () => {
+    if (!usersIconRef.current) return;
+
+    // Grab all the individual paths and circles inside the SVG
+    const svgParts = usersIconRef.current.children;
+
+    gsap.to(svgParts, {
+      y: -3,
+      duration: 0.2,
+      stagger: 0.05,
+      yoyo: true,
+      repeat: 1,
+      ease: 'power2.out',
+      transformOrigin: 'bottom center',
+    });
+  };
+
+  return (
+    <button
+      onMouseEnter={handleMouseEnter}
+      className='group flex w-fit items-center gap-3 rounded-xl border border-neutral-800 bg-neutral-900 px-5 py-3 text-neutral-300 transition-colors hover:border-blue-500/50 hover:bg-neutral-800 hover:text-white'
+    >
+      <Users ref={usersIconRef} className='size-5 text-blue-400' />
+      <span className='text-sm font-medium'>View Participants</span>
+    </button>
+  );
+}