fix: improve sponsor card UI consistency and layout

[Sarthakkad05]

Description

This PR improves the UI and consistency of the sponsor cards in the SupportUsButton component.

Previously, sponsor cards had inconsistent sizes, overflowing logos, and non-uniform styling across different sponsorship tiers. This update standardizes the layout and enhances visual clarity.

Before vs After

• Cards had inconsistent sizes → now uniform grid layout
• Logos were cropped/overflowing → now properly contained
• Styling felt unstructured → now clean and modern

Impact

• Better visual consistency across all sponsor tiers
• Improved responsiveness and layout stability
• Cleaner, more maintainable code

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

• Refactor
  • Organization logo is now displayed as a non-interactive visual element instead of a clickable link
  • Hero section height has been increased for improved visual balance and presentation
  • Sponsors section has been redesigned from flexible wrapping to a 2-column grid layout
  • Sponsor cards now feature fixed-size logo containers with automatic text fallback when logo images are unavailable

[coderabbitai]

Walkthrough

A single-file refactor of SupportUsButton.tsx that simplifies organization logo rendering by removing URL validation and conditional link wrapping, adjusts hero section height from 40vh to 50vh, removes responsive image-fit logic, and restructures sponsor cards from flex-wrap to grid layout with standardized logo containers.

Changes

Cohort / File(s)

Summary

Logo & Sponsor Refactoring src/components/SupportUsButton.tsx

Removed validateUrl helper and made organization logo always render as non-linked element (string as <span>, object as <img>). Refactored sponsor cards from flex-wrap to grid grid-cols-2 layout with fixed square logo containers (w-20 h-20). Updated hero section height from h-[40vh] to h-[50vh] and removed conditional object-contain/object-cover behavior. Restructured sponsors container wrapper to render conditionally only at inner list level rather than outer wrapper.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• PR #23: Directly opposes this change by adding URL validation to make logos conditionally clickable, whereas this PR removes validation and makes logos always non-linked.
• PR #6: Introduced the original SupportUsButton component with flex-wrap sponsor layout and logo handling logic that this PR refactors.
• PR #24: Directly reverses the hero image object-fit behavior that PR #24 introduced.

Suggested labels

Typescript Lang

Poem

🐰✨ The button hops anew, logos stand so true,
No validation needed when the grid shines through!
From flex to grid, the sponsors align,
Hero heights rise—forty to fifty, divine!

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes to sponsor card UI and layout, which aligns with the primary modifications in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/SupportUsButton.tsx`:
- Around line 278-282: The literal heading "Our Sponsors" in the SupportUsButton
component should be replaced with an i18n lookup; update the h2 in
SupportUsButton to call the project's translation function (e.g.,
t('ourSponsors') or useTranslations('supportUs').ourSponsors) instead of the
hardcoded string, import or use the existing i18n hook used across the codebase,
and add the "ourSponsors" key to the translation resource files with appropriate
entries and a sensible fallback so the heading renders when a translation is
missing.
- Around line 85-86: The img/className currently hard-codes "object-cover",
ignoring the Hero.fit?: "cover" | "contain" declared in the Hero type (see
Hero.fit in src/types/index.ts:34); restore conditional logic in the component
(SupportUsButton / the element with className="w-full h-full object-cover
object-center pointer-none:cursor-none select-none") to choose "object-cover"
when fit === "cover" and "object-contain" when fit === "contain" (or remove the
fit prop from the type if you intend to no longer support it) so consumers
passing fit:"contain" are respected.
- Around line 292-298: In SupportUsButton, avoid rendering an <a> with
href={sponsor.link} when sponsor.link is undefined: change the element that
wraps each sponsor to conditionally render an anchor only if sponsor.link is
present (preserve target, rel, title and key on that <a>), otherwise render a
non-link wrapper like a <div> or <button> with the same styling and key; ensure
you wrap the corresponding closing tag accordingly and move any click/aria
behavior into the non-link wrapper so accessibility and behavior remain correct.
- Around line 165-182: The render currently only checks typeof
organizationInformation.logo === "string" so when organizationInformation.logo
is undefined it falls into the <img> branch and produces a broken image; update
the conditional in SupportUsButton to first guard for a missing logo (e.g., if
(!organizationInformation.logo) render a safe fallback or null) and then handle
the string vs Image cases (keep the existing string branch for typeof
organizationInformation.logo === "string" and the <img> branch for when logo is
an Image with logo.src/logo.alt). Ensure you reference
organizationInformation.logo in the guard so no <img src={undefined}> is
rendered.
- Around line 240-247: The outer themed wrapper in the SupportUsButton component
is always rendered (the div using Theme and background classes) even when the
sponsors array is empty; update SupportUsButton to conditionally render the
entire sponsors section by checking that sponsors exists and has length (e.g.,
sponsors && sponsors.length > 0) and only then return the themed wrapper and its
inner content, so the background div is not emitted when there are no sponsors;
ensure the conditional encloses the whole block that begins with the current
Theme-based div and ends at its corresponding closing tag.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3150b393-6048-4536-88a6-169fc00b58bf

📥 Commits

Reviewing files that changed from the base of the PR and between f761f17 and 68ea236.

📒 Files selected for processing (1)

• src/components/SupportUsButton.tsx