Skip to content

Add hackathon detail page redesign (Figma link) #466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
0xdevcollins merged 1 commit into from
Mar 9, 2026
Merged

Add hackathon detail page redesign (Figma link) #466

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions app/(landing)/hackathons/[slug]/hackathon-detail-design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
Hackathon Detail Page Redesign
Issue: #414

Figma Design
https://www.figma.com/design/EMNGAQl1SGObXcsoa24krt/Boundless_Project-Details?node-id=0-1&t=A1ywRcn60Xyw0X6h-1

This design proposes a cleaner and more professional UI/UX for the hackathon detail page.

Included in the Figma file:
- Desktop layout
- Mobile layout
- Banner / hero placement proposal
- Redesigned hero section
- Sticky sidebar card
- Tab navigation
- All tab layouts (overview, participants, resources, announcements, submissions, discussions, find team, winners)
- Loading state
- Hackathon not found state

Banner Placement Proposal
The hackathon banner is placed as a full-width hero image at the top of the page, allowing it to visually represent the hackathon and improve page identity.

The sidebar becomes a compact summary card with key information and actions.
Comment on lines +20 to +23

@coderabbitai coderabbitai Bot Mar 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Document the banner-placement alternatives, not just the selected option.

Issue #414 asks for a banner-placement proposal with variants and the relationship to the sidebar image treatment. This section only records the chosen full-width hero approach, so reviewers lose the tradeoff/rationale behind the decision. Please add the alternate variants considered and a brief note on why this one won.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(landing)/hackathons/[slug]/hackathon-detail-design.md around lines 20 -
23, Update the "Banner Placement Proposal" section to enumerate the alternative
variants considered (e.g., full-width hero, contained banner within content
width, sidebar-centric image card, and background/accent strip) and for each
briefly note pros/cons and expected impact on layout and responsiveness;
explicitly state how each variant interacts with the sidebar image treatment
(full-size sidebar card vs compact summary card vs no sidebar image) and add a
short rationale sentence explaining why the full-width hero was chosen
(tradeoffs like brand presence, accessibility, mobile behavior, and impact on
sidebar prominence).


Design Goals
- Simpler UI and improved visual hierarchy
- Clear primary actions (Join, Submit, View Submission)
- Consistent spacing and typography
- Better mobile usability
- Professional and product-quality look
Comment on lines +1 to +30

@coderabbitai coderabbitai Bot Mar 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix the Markdown formatting so CI passes.

This file is currently failing the style check. Please run Prettier and convert the section titles into proper Markdown headings; while you're there, it would also be cleaner to format the Figma URL as a Markdown link.

🧹 Suggested cleanup 
-Hackathon Detail Page Redesign
-Issue: `#414`
+## Hackathon Detail Page Redesign
+
+Issue: `#414`

-Figma Design
-https://www.figma.com/design/EMNGAQl1SGObXcsoa24krt/Boundless_Project-Details?node-id=0-1&t=A1ywRcn60Xyw0X6h-1
+## Figma Design
+
+[Boundless Project Details Figma](https://www.figma.com/design/EMNGAQl1SGObXcsoa24krt/Boundless_Project-Details?node-id=0-1&t=A1ywRcn60Xyw0X6h-1)

-Banner Placement Proposal
+## Banner Placement Proposal

-Design Goals
+## Design Goals
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Hackathon Detail Page Redesign
Issue: #414
Figma Design
https://www.figma.com/design/EMNGAQl1SGObXcsoa24krt/Boundless_Project-Details?node-id=0-1&t=A1ywRcn60Xyw0X6h-1
This design proposes a cleaner and more professional UI/UX for the hackathon detail page.
Included in the Figma file:
- Desktop layout
- Mobile layout
- Banner / hero placement proposal
- Redesigned hero section
- Sticky sidebar card
- Tab navigation
- All tab layouts (overview, participants, resources, announcements, submissions, discussions, find team, winners)
- Loading state
- Hackathon not found state
Banner Placement Proposal
The hackathon banner is placed as a full-width hero image at the top of the page, allowing it to visually represent the hackathon and improve page identity.
The sidebar becomes a compact summary card with key information and actions.
Design Goals
- Simpler UI and improved visual hierarchy
- Clear primary actions (Join, Submit, View Submission)
- Consistent spacing and typography
- Better mobile usability
- Professional and product-quality look
## Hackathon Detail Page Redesign
Issue: `#414`
## Figma Design
[Boundless Project Details Figma](https://www.figma.com/design/EMNGAQl1SGObXcsoa24krt/Boundless_Project-Details?node-id=0-1&t=A1ywRcn60Xyw0X6h-1)
This design proposes a cleaner and more professional UI/UX for the hackathon detail page.
Included in the Figma file:
- Desktop layout
- Mobile layout
- Banner / hero placement proposal
- Redesigned hero section
- Sticky sidebar card
- Tab navigation
- All tab layouts (overview, participants, resources, announcements, submissions, discussions, find team, winners)
- Loading state
- Hackathon not found state
## Banner Placement Proposal
The hackathon banner is placed as a full-width hero image at the top of the page, allowing it to visually represent the hackathon and improve page identity.
The sidebar becomes a compact summary card with key information and actions.
## Design Goals
- Simpler UI and improved visual hierarchy
- Clear primary actions (Join, Submit, View Submission)
- Consistent spacing and typography
- Better mobile usability
- Professional and product-quality look
🧰 Tools
🪛 GitHub Actions: CI/CD Pipeline

[warning] 1-1: Code style issues found in the file. Run 'prettier --write' to fix.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(landing)/hackathons/[slug]/hackathon-detail-design.md around lines 1 -
30, The file's plain text section titles and raw URL are causing the Markdown
style check to fail—run Prettier on
app/(landing)/hackathons/[slug]/hackathon-detail-design.md and convert plain
titles like "Figma Design", "Banner Placement Proposal", and "Design Goals" into
proper Markdown headings (e.g., prefix with `#/`## as appropriate), format the
Figma URL as a Markdown link [Figma Design](https://www.figma.com/...), ensure
list items use proper Markdown list syntax and consistent spacing, then save the
file so CI's markdown/style checks pass.

Loading