Redesign Hackathon Detail Page (`/hackathons/[slug]`) — Simpler, professional UI/UX and banner placement

[0xdevcollins]

Redesign the https://www.boundlessfi.xyz/hackathons/boundless-hack? hackathon detail page (the page for a single hackathon). Goals: simpler, more professional UI/UX and a clear, intentional treatment of the banner/hero image. Focus on layout, hierarchy, and visuals.

What the page is

• Purpose: Present one hackathon: overview, register/join, submit project, see participants, resources, announcements, submissions, discussions, find team, and winners.
• Who uses it: Visitors and participants (before/after registering).

Page structure (for design)

• Desktop:
  • Main column (left, ~2/3 width):
    • Hero / banner at top (currently: title, tagline, status, categories, countdown, participants, prize pool, and actions; the hackathon banner image is not shown here — it only appears in the right sidebar).
    • Tab bar (Overview, Participants, Resources, Announcements, Submissions, Discussions, Find Team, Winners — some tabs only if relevant).
    • Tab content below (overview text, timeline, prizes, map, etc.).
  • Sidebar (right, ~1/3 width, sticky):
    • Card with hackathon image, prize pool, key dates, and same main actions (Join, Leave, Submit, View submission, Find team).
• Mobile:
  • Hero block first, then tab bar, then tab content. Sidebar card is hidden; important actions live in the hero or elsewhere.

Banner / hero (priority)

• Current situation: The main hero is a card with gradient/wave background; it does not show the hackathon’s banner image. The banner image only appears in the right sidebar card.
• Design ask: Propose where and how the hackathon hero image should appear: e.g. full-bleed at the top, inside the hero card, or only in the sidebar — and how that ties to the sticky card and overall layout. Include a simple banner placement proposal (sketch or mockup) so the team can implement it consistently.

Sections / components to redesign

1. Hero / banner (main block)
   Title, tagline, status (e.g. Live / Upcoming / Ended), categories, countdown, participant count, prize pool, and primary actions (Join, Leave, Submit, View submission, Find team). Include your proposed use of the hackathon image (placement, size, overlap with content).

2. Sticky sidebar card
   Compact summary: image (currently the only place the banner image shows), prize pool, participation type, dates, and same actions. Align with your hero/banner strategy (e.g. same image treatment or simplified).

3. Tab bar
   Horizontal, scrollable on small screens. Tabs can have counts (e.g. number of submissions). Design selected state and spacing.

4. Overview tab
   Description (rich text), timeline (e.g. registration → submission → judging → winners), prizes (places and amounts), and optional venue/map for in-person hackathons. Consider hierarchy and map size.

5. Register / join modal
   Modal (or sheet) used when the user clicks Join. Design the flow and form layout so it feels part of the same system.

6. Participants tab
   Short explanation of “participant status” (e.g. green dot = submitted), then filters (search, sort, submission status, skills) and a grid of participants (avatar, name; green dot if submitted). Simplify the explanation block if needed.

7. Resources tab
   List or grid of resources (docs, links, videos) with icons and optional video player. Design cards/list and empty state.

8. Announcements tab
   List of announcements; some can be pinned. Sort (e.g. newest/oldest). Design list/cards and empty state.

9. Submissions tab
   List of approved submissions (cards with project name, team, etc.), “Add submission” flow, and a submission detail view (modal or panel). Design list/grid, form steps, and empty state.

10. Discussions tab
    Threaded comments with sort and a comment box. Match the tone of the hackathon page.

11. Find team tab
    Team recruitment posts (cards), “Create post” flow, and team/invitation details (modal or sheet). Design cards and flows.

12. Winners tab
    Grid of winner cards (rank, project, team, prize). Empty state when winners aren’t announced yet.

13. Loading state
    What users see while the hackathon data loads (e.g. skeleton or minimal loader). Keep it consistent with the new look.

14. “Hackathon not found” state
    Centered message when the hackathon doesn’t exist. Simple, on-brand error/empty state.

Design goals

• Simpler: Clear hierarchy and one obvious primary action (e.g. Join or Submit).
• Clear UI: Consistent typography, spacing, and use of the green accent.
• Better UX: Clear paths for register → submit → view submission and for moving between tabs; consider mobile.
• Professional: Trustworthy, product-quality look.
• Banner placement: Explicit, intentional use of the hackathon hero image (where it appears and how it relates to the sidebar card).

Deliverables

• Banner placement: Short proposal (and optional variants) for where the hackathon image appears, with a simple sketch or mockup.
• Layout: Desktop and mobile wireframes or mockups for the full page and all tabs.
• Component-level: Notes or mockups for hero, sidebar card, tab bar, and each tab (overview, participants, resources, announcements, submissions, discussions, find team, winners), plus loading and not-found states.
• Optional: Brief UX recommendations and copy suggestions for empty states.

Out of scope

• Code, file names, or technical implementation.
• Other hackathon pages (e.g. announcement detail, invite accept/reject) unless you add them.

[linear]

BOU-119

[coderabbitai]

🔗 Related PRs

#372 - Fix hackathon [merged]
#376 - Fix hackathon [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Awointa]

Hi maintainer 👋 I’d love to work on this hackathon detail page redesign.

I’ll redesign the page with a clear visual hierarchy, simplified layout, and a more professional UI/UX while proposing an intentional and consistent strategy for the hackathon banner/hero image. I’ll provide desktop and mobile wireframes, a clear banner placement proposal, and component-level mockups for the hero, sidebar, tab navigation, and all tab states (including loading and empty states).

I’ll also ensure the design emphasizes a clear primary action (Join / Submit), improves navigation between sections, and maintains consistency in typography, spacing, and visual language across the experience.

Happy to share progress updates and design iterations — please assign this issue to me if available 🙂

[Davidemulo]

Hi Maintainer, I am A UX Designer and I’d love to redesign the Hackathon Detail page with a simpler, more professional layout and a clear, intentional banner strategy. I’ll deliver desktop and mobile mockups covering the hero, sticky sidebar, all tabs, key flows (Join/Submit), plus loading and not-found states.

Portfolio: https://www.behance.net/nnaomaemulo

[Olowodarey]

Hello, I’m Darey Olowo, a frontend and smart contract developer with experience building and shipping reliable features. I’d like to take on this issue and deliver a solid solution within 24 hours.

[Christopherdominic]

Hi 👋

I’d like to work on this issue.

I’ve reviewed the description and acceptance criteria, and I’m confident I can implement the required changes following the project’s guidelines and coding standards. I’ll ensure proper testing and documentation where applicable.

Please assign this issue to me — I’ll get started right away. 🚀

Thank you!

[Christopherdominic]

Hi 👋

I’d like to work on this issue.

I’ve reviewed the description and acceptance criteria, and I’m confident I can implement the required changes following the project’s guidelines and coding standards. I’ll ensure proper testing and documentation where applicable.

Please assign this issue to me — I’ll get started right away. 🚀

Thank you!

[EDOHWARES]

Hi maintainer,

I’m interested in this issue. I’ll redesign the hackathon detail page to improve hierarchy, layout, and UX, propose intentional banner placement for the hero image (full-bleed or integrated with hero card), optimize the sticky sidebar, tab bar, and all tab content (overview, participants, resources, announcements, submissions, discussions, find team, winners), and create desktop/mobile wireframes with loading and not-found states.

ETA: 16 hours.