# Install the package
npm install support-us-button

<script src="https://cdn.jsdelivr.net/npm/support-us-button@latest/dist/index.umd.js"></script>

// Import the component in your project:
import SupportUsButton from "support-us-button";

// Import the styles in your project:
import "support-us-button/style.css";

// Import the types in your project:
import type { supportUsButtonProps } from "support-us-button";

// Use the component in your project:
<SupportUsButton {...props} />; // props is an object of type supportUsButtonProps

<script src="https://cdn.jsdelivr.net/npm/support-us-button@latest/dist/index.umd.js"></script>

// Import the styles in your project:
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/support-us-button@latest/dist/style.css"
/>

// Use the component in your project:
<SupportUsButton />

const props: supportUsButtonProps = {
    Theme: "",              // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
    pattern: "",            // "AOSSIE" | "dots" | "grid" | "none"
    buttonVariant: "",      // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"

    hero: {
        title: "",          // ← your heading
        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: {    
        name: "",           // ← your organization name
        description: "",    // ← short org description
        logo: { src: "", alt: "" }, // ← Add file path to src and alt text for accessibility. Note: Accepts a string path/url.
        url: "https://example.com", // ← optional: if a valid https:// URL is provided, the logo becomes clickable
        projectInformation: {
            name: "",       // ← your project name
            description: "",// ← short project description
        },
    },

    // Optional — remove if you have no sponsors yet
    sponsors: [
        { name: "", logo: "", link: "", sponsorshipTier: "" },
        // Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
    ],

    ctaSection: {
        title: "",          // ← CTA heading
        description: "",    // ← why people should sponsor
        sponsorLink: [
            {
              name: "Examplename",
              className: "sponsor-link",
              url: "https://example.com/sponsor",
              icon: null, // This Accepts ReactNode element(JSX)
              newTab: true,
            },
            // Add one entry per sponsorship platform
        ],
    },
};

<SupportUsButton {...props} />;