Merge pull request #24 from Sarthakkad05/fix/hero-image-fit

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

Author: rahul-vyas-dev

README.md

@@ -175,6 +175,7 @@ const props: supportUsButtonProps = {
         description: "",    // ← your subheading
         sponsorLabel: "",   // ← optional label above org info
         Image: { src: "", alt: "" }, // ← hero background image, Note: Remove the prop if you do not require a hero image.
+        fit: "", // ← use "cover" for full-width images, "contain" for logo-style images to avoid cropping
     },
 
     organizationInformation: {    
@@ -198,7 +199,7 @@ const props: supportUsButtonProps = {
         description: "",    // ← why people should sponsor
         sponsorLink: [
             {
-              name: "Examplename"
+              name: "Examplename",
               className: "sponsor-link",
               url: "https://example.com/sponsor",
               icon: null, // This Accepts ReactNode element(JSX)

src/components/SupportUsButton.tsx

@@ -76,13 +76,15 @@ function SupportUsButton({
       className={`w-full font-sans justify-center items-center text-center ${Theme == "light" || Theme == "dark" ? classAccordingToTheme(Theme) : "bg-black text-white"} ${classNames.container}`}
     >
       {/* Hero section with optional background image*/}
-      <div className="relative w-full h-[50vh] flex justify-center">
+      <div className="relative w-full h-[40vh] flex justify-center">
         {hero.Image && (
           <img
             src={hero.Image.src}
             alt={hero.Image.alt}
             title={hero.Image.alt}
-            className="w-full h-full object-cover object-center pointer-none:cursor-none select-none"
+            className={`w-full h-full  ${
+              hero.fit === "contain" ? "object-contain" : "object-cover"
+            } object-center pointer-none:cursor-none select-none`}
           />
         )}
         {/* Gradient overlay */}

src/types/index.ts

@@ -31,6 +31,7 @@ export type Hero = {
 
   title: string;
   description: string;
+  fit?: "cover" | "contain";
 
   /** Label like: YOU'RE SPONSORING */
   sponsorLabel?: string;