feat(hero): add image fit prop to prevent SVG cropping

[Sarthakkad05]

Fix Hero Image Cropping & Add Image Fit Support

Problem

Hero images were using object-cover, which caused SVGs and logo-style images to be cropped.

Changes

• Added a new optional fit prop to the Hero type:

  fit?: "cover" | "contain";

• Updated hero image rendering to use:
  • object-cover (default)
  • object-contain when fit="contain"
• Added inline documentation for the fit prop.

Result

• Logos and SVGs are now fully visible without cropping.
• Maintains proper behavior for background images using cover.
• Improves flexibility and developer experience.

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

Release Notes

• New Features

  • Added fit option to hero images: select "cover" for full-width display or "contain" to fit entire images without cropping.

• Style

  • Reduced hero container height for improved layout proportions.

[coderabbitai]

Walkthrough

Added an optional fit property to the Hero type to support configurable image display modes ("cover" or "contain"), implemented conditional styling in the SupportUsButton component, and reduced hero container height while documenting the new capability.

Changes

Cohort / File(s)	Summary
Type Definition src/types/index.ts	Added optional fit?: "cover" | "contain" property to exported Hero type.
Component Implementation src/components/SupportUsButton.tsx	Reduced hero container height from h-[50vh] to h-[40vh] and implemented conditional object-fit styling based on hero.fit prop value.
Documentation README.md	Updated supportUsButtonProps example to include hero.fit prop documentation and adjusted formatting with trailing comma in ctaSection.sponsorLink example.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• chore: add TypeScript types for support us button component and updat… #5 — Establishes the initial Hero type that this PR extends with the new fit property.
• chore: add support us button component with customizable themes and b… #6 — Also modifies SupportUsButton component and Hero type together, sharing overlapping concerns.

Suggested labels

Typescript Lang, Documentation

Suggested reviewers

• rahul-vyas-dev

Poem

🐰 A hero image, now with flair,
Cover or contain, choose with care!
The rabbit hops, the types align,
Forty viewport-heights so fine! ✨

🚥 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 change: adding an optional image fit prop to the Hero component to control image scaling behavior (cover vs contain) and prevent unwanted cropping of SVGs and logos.

_{✏️ 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: 3

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@README.md`:
- Line 178: Replace the invalid example value for the typed property fit in the
README snippet (currently fit: "") with a valid union member such as "cover" or
"contain" so the example matches the declared type ("cover" | "contain") and is
safe to copy-paste; update the snippet line for the fit property accordingly
(e.g., set fit to "cover" for full-width images or "contain" for logo-style
images).

In `@src/components/SupportUsButton.tsx`:
- Around line 85-87: The className in SupportUsButton's JSX contains an invalid
Tailwind token "pointer-none:cursor-none"; update the class string in the
relevant JSX (the template literal building className) to use the correct
utilities "pointer-events-none cursor-none" instead, ensuring you keep the
existing conditional for hero.fit and other classes unchanged.
- Line 79: In the SupportUsButton component, remove the invalid Tailwind class
token "pointer-none:cursor-none" from the img elements and, if you intended to
disable pointer interactions, replace it with "pointer-events-none"; do not add
any "cursor-none" replacement since Tailwind has no such utility—update the img
elements in SupportUsButton (look for <img ... className=...> instances) to
remove "cursor-none" and use "pointer-events-none" only when needed.

🪄 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: 60e8b58d-2356-45ba-b716-4a138c541796

📥 Commits

Reviewing files that changed from the base of the PR and between 62828cd and ebe402f.

📒 Files selected for processing (3)

• README.md
• src/components/SupportUsButton.tsx
• src/types/index.ts