feat: crown the winning projects and medal the runners-up

apps/web/src/components/award-badge.tsx

@@ -1,26 +1,19 @@
-import { CrownIcon, MedalIcon } from 'lucide-react'
-
 import { Badge } from '@/components/ui/badge'
+import { awardIcon } from '@/components/award-mark'
 import { placeLabel } from '@/lib/format'
 import type { Place } from '@/lib/types'
 
 const styles = {
-  first: {
-    icon: CrownIcon,
-    className: 'border-amber-500/50 bg-amber-500/10 text-amber-600 dark:text-amber-400',
-  },
-  'runner-up': {
-    icon: MedalIcon,
-    className: 'border-slate-400/60 bg-slate-400/10 text-slate-600 dark:text-slate-300',
-  },
+  first: 'border-award-first/50 bg-award-first/10 text-award-first',
+  'runner-up': 'border-award-runner-up/60 bg-award-runner-up/10 text-award-runner-up',
 } as const
 
 export function AwardBadge({ place }: { place: Place | null }) {
   if (!place) return null
-  const { icon: Icon, className } = styles[place]
+  const Icon = awardIcon[place]
 
   return (
-    <Badge variant="outline" className={className}>
+    <Badge variant="outline" className={styles[place]}>
       <Icon />
       {placeLabel[place]}
     </Badge>

apps/web/src/components/award-mark.tsx

@@ -0,0 +1,54 @@
+import { CrownIcon, MedalIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { placeLabel } from '@/lib/format'
+import type { Place } from '@/lib/types'
+import { cn } from '@/lib/utils'
+
+export const awardIcon = {
+  first: CrownIcon,
+  'runner-up': MedalIcon,
+} as const
+
+const tone = {
+  first: 'text-award-first',
+  'runner-up': 'text-award-runner-up',
+} as const
+
+export function AwardMark({ place, className }: { place: Place | null; className?: string }) {
+  if (!place) return null
+  const Icon = awardIcon[place]
+
+  return (
+    <span title={placeLabel[place]} className={cn('inline-flex shrink-0', tone[place], className)}>
+      <Icon className="size-full fill-current/25" aria-label={placeLabel[place]} />
+    </span>
+  )
+}
+
+export function AwardedAvatar({
+  place,
+  children,
+  className,
+}: {
+  place: Place | null
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <span className={cn('relative inline-flex shrink-0', className)}>
+      {children}
+      {place === 'first' && (
+        <AwardMark
+          place={place}
+          className="absolute -top-2.5 left-1/2 size-5 -translate-x-1/2 -rotate-12 drop-shadow-sm"
+        />
+      )}
+      {place === 'runner-up' && (
+        <span className="absolute -right-1 -bottom-1 grid size-4 place-items-center rounded-full bg-background ring-1 ring-border">
+          <AwardMark place={place} className="size-3" />
+        </span>
+      )}
+    </span>
+  )
+}

apps/web/src/components/brand/event-logo.tsx

@@ -1,13 +1,19 @@
-import { cn } from '@/lib/utils'
 import onDark from '@/assets/hackmeridian-light.png'
 import onLight from '@/assets/hackmeridian-dark.png'
-import { EVENT_NAME } from '@/lib/config'
+import { EVENT_NAME, EVENT_URL } from '@/lib/config'
+import { cn } from '@/lib/utils'
 
 export function EventLogo({ className }: { className?: string }) {
   return (
-    <>
-      <img src={onLight} alt={EVENT_NAME} className={cn('dark:hidden', className)} />
-      <img src={onDark} alt={EVENT_NAME} className={cn('hidden dark:block', className)} />
-    </>
+    <a
+      href={EVENT_URL}
+      target="_blank"
+      rel="noreferrer"
+      aria-label={EVENT_NAME}
+      className="shrink-0"
+    >
+      <img src={onLight} alt="" className={cn('dark:hidden', className)} />
+      <img src={onDark} alt="" className={cn('hidden dark:block', className)} />
+    </a>
   )
 }

apps/web/src/components/explorer/columns.tsx

@@ -9,6 +9,7 @@ import {
   ProjectLink,
 } from '@/components/links'
 import { AwardBadge } from '@/components/award-badge'
+import { AwardMark } from '@/components/award-mark'
 import { TierBadge } from '@/components/tier-badge'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -31,6 +32,7 @@ export const projectColumns: Column<Project>[] = [
     cell: (row) => (
       <div className="flex flex-col gap-0.5">
         <span className="flex items-center gap-2">
+          <AwardMark place={row.award} className="size-4" />
           <ProjectLink projectId={row.project_id} />
           {row.country && <span title={row.country}>{flagEmoji(row.country)}</span>}
           {!row.full_name && <Badge variant="outline">no repo</Badge>}

apps/web/src/components/explorer/project-card.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router'
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { AwardBadge } from '@/components/award-badge'
+import { AwardedAvatar } from '@/components/award-mark'
 import { TierBadge } from '@/components/tier-badge'
 import { TrackBadge } from '@/components/track-badge'
 import { Badge } from '@/components/ui/badge'
@@ -27,12 +28,14 @@ export function ProjectCard({ project, commits }: { project: Project; commits?:
     <Card size="sm" className="relative h-full transition-colors hover:bg-muted/40">
       <CardHeader>
         <div className="flex items-start gap-3">
-          <Avatar>
-            {project.owner_avatar && (
-              <AvatarImage src={project.owner_avatar} alt={project.owner ?? ''} />
-            )}
-            <AvatarFallback>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
-          </Avatar>
+          <AwardedAvatar place={project.award}>
+            <Avatar>
+              {project.owner_avatar && (
+                <AvatarImage src={project.owner_avatar} alt={project.owner ?? ''} />
+              )}
+              <AvatarFallback>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+            </Avatar>
+          </AwardedAvatar>
           <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
             <Link
               to={`/project/${project.project_id}`}

apps/web/src/components/wrapped/waffle.tsx

@@ -1,13 +1,20 @@
 import { motion } from 'motion/react'
 
+import { awardIcon } from '@/components/award-mark'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useStill } from '@/components/wrapped/use-still'
-import { projectName, tierLabel } from '@/lib/format'
+import { placeLabel, projectName, tierLabel } from '@/lib/format'
 import { EASE_SPRING, matchesLens, type Lens } from '@/lib/wrapped'
-import type { Project } from '@/lib/types'
+import type { Place, Project } from '@/lib/types'
 import { cn } from '@/lib/utils'
 
+function AwardGlyph({ place }: { place: Place }) {
+  const Icon = awardIcon[place]
+
+  return <Icon className="size-3/5 fill-award-foreground/25 text-award-foreground" />
+}
+
 interface WaffleProps {
   projects: Project[]
   lens: Lens | null
@@ -49,17 +56,20 @@ export function Waffle({ projects, lens, columns, delay = 0 }: WaffleProps) {
                   ease: EASE_SPRING,
                 }}
                 className={cn(
-                  'block size-full rounded-sm',
+                  'grid size-full place-items-center rounded-sm',
                   project.tier === 'verified' ? 'bg-primary' : 'bg-secondary',
                 )}
-              />
+              >
+                {project.award && <AwardGlyph place={project.award} />}
+              </motion.span>
             </TooltipTrigger>
             <TooltipContent>
               <Avatar size="sm">
                 {project.owner_avatar && <AvatarImage src={project.owner_avatar} alt="" />}
                 <AvatarFallback>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
               </Avatar>
               <span className="font-semibold">{name}</span>
+              {project.award && <span>{placeLabel[project.award]}</span>}
               <span className="opacity-70">
                 {tierLabel[project.tier]}
                 {project.language && ` · ${project.language}`}

apps/web/src/index.css

@@ -22,6 +22,9 @@
   --color-chart-3: var(--chart-3);
   --color-chart-2: var(--chart-2);
   --color-chart-1: var(--chart-1);
+  --color-award-first: var(--award-first);
+  --color-award-runner-up: var(--award-runner-up);
+  --color-award-foreground: var(--award-foreground);
   --color-ring: var(--ring);
   --color-input: var(--input);
   --color-border: var(--border);
@@ -119,6 +122,9 @@
   --input: #d6d2c4;
   --ring: #fdda24;
   --chart-1: #fdda24;
+  --award-first: #c98f00;
+  --award-runner-up: #6b7585;
+  --award-foreground: #0f0f0f;
   --chart-2: #00a7b5;
   --chart-3: #b7ace8;
   --chart-4: #002e5d;
@@ -183,6 +189,9 @@
   --input: #1a1917;
   --ring: #fdda24;
   --chart-1: #fdda24;
+  --award-first: #f5c518;
+  --award-runner-up: #c4cad4;
+  --award-foreground: #0f0f0f;
   --chart-2: #00a7b5;
   --chart-3: #b7ace8;
   --chart-4: #d6d2c4;

apps/web/src/lib/config.ts

@@ -3,3 +3,4 @@ export const API_URL = (import.meta.env.VITE_API_URL ?? '').replace(/\/$/, '')
 export const REPO_URL = 'https://github.com/devodii/hackproof'
 
 export const EVENT_NAME = 'HackMeridian 2026'
+export const EVENT_URL = 'https://www.hackmeridian.com/'

apps/web/src/pages/project.tsx

@@ -9,6 +9,7 @@ import { ProjectSkeleton } from '@/components/page-skeletons'
 import { DetailError } from '@/components/query-state'
 import { Section } from '@/components/section'
 import { AwardBadge } from '@/components/award-badge'
+import { AwardedAvatar } from '@/components/award-mark'
 import { TierBadge } from '@/components/tier-badge'
 import { TrackBadge } from '@/components/track-badge'
 import { Accordion } from '@/components/ui/accordion'
@@ -53,12 +54,14 @@ export function ProjectPage() {
     <div className="flex flex-col gap-8">
       <header className="flex flex-col gap-3">
         <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-          <Avatar className="shrink-0">
-            {project.owner_avatar && (
-              <AvatarImage src={project.owner_avatar} alt={project.owner ?? ''} />
-            )}
-            <AvatarFallback>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
-          </Avatar>
+          <AwardedAvatar place={project.award}>
+            <Avatar className="shrink-0">
+              {project.owner_avatar && (
+                <AvatarImage src={project.owner_avatar} alt={project.owner ?? ''} />
+              )}
+              <AvatarFallback>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+            </Avatar>
+          </AwardedAvatar>
           <h1 className="min-w-0 text-3xl leading-none wrap-break-word sm:text-5xl">{name}</h1>
           {project.country && <span title={project.country}>{flagEmoji(project.country)}</span>}
           <TierBadge tier={project.tier} />