diff --git a/README.md b/README.md
index dae6013..9556a64 100644
--- a/README.md
+++ b/README.md
@@ -160,146 +160,49 @@ Once included, the component will be available to use in your project.
---
-## Example Usage
+## Quick Start
-Below is an example configuration for the `SupportUsButton` component.
-Replace the placeholder text (titles, descriptions, images, links, etc.) with your own project information.
+Props template — fill in your own values:
```tsx
-// Example props configuration for SupportUsButton
-// Modify the values according to your project needs
-
const props: supportUsButtonProps = {
- // Theme of the widget (e.g., AOSSIE, light, dark, minimal)
- Theme: "AOSSIE",
-
- // Background pattern type (e.g., grid, dots)
- pattern: "grid",
+ Theme: "", // "AOSSIE" | "light" | "dark" | "minimal" | "corporate"
+ pattern: "", // "AOSSIE" | "dots" | "grid" | "none"
+ buttonVariant: "", // "AOSSIE" | "primary" | "secondary" | "ghost" | "gradient"
hero: {
- Image: {
- // Replace with your hero image
- src: "https://your-image-link.com/hero-image.png",
- alt: "Hero section image",
- },
-
- // Main title shown at the top of the widget
- title: "Your Title Here",
-
- // Short description about your project or mission
- description:
- "Write a brief description about your project, organization, or the purpose of sponsorship here.",
-
- // Label shown above the sponsors section
- sponsorLabel: "Your Sponsors",
+ 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 rquire a hero image.
},
organizationInformation: {
- // Name of your organization
- name: "Your Organization Name",
-
- // Short description about the organization
- description:
- "Describe your organization, its mission, and what it works on.",
-
- // Optional organization logo
- logo: {
- src: "https://your-image-link.com/logo.png",
- alt: "Organization Logo",
- },
-
+ name: "", // ← your organization name
+ description: "", // ← short org description
+ logo: { src: "", alt: "" }, // ← org logo (or pass a string for text fallback)
projectInformation: {
- // Name of the project that is being sponsored
- name: "Your Project Name",
-
- // Short description of the project
- description:
- "Provide a short description of the project that sponsors are supporting.",
+ name: "", // ← your project name
+ description: "",// ← short project description
},
},
- // List of sponsors
+ // Optional — remove if you have no sponsors yet
sponsors: [
- {
- name: "Sponsor Name",
- logo: "https://your-image-link.com/sponsor-logo.png",
- link: "https://sponsor-website.com",
-
- // Optional tier: Bronze | Silver | Gold | Platinum
- sponsorshipTier: "Bronze",
- },
- {
- name: "Another Sponsor",
- logo: "https://your-image-link.com/sponsor-logo.png",
- link: "https://sponsor-website.com",
- sponsorshipTier: "Silver",
- },
- {
- name: "Company Name",
- logo: "https://your-image-link.com/company-logo.png",
- link: "https://company-website.com",
- sponsorshipTier: "Gold",
- },
+ { name: "", logo: "", link: "", sponsorshipTier: "" },
+ // Tiers: "Platinum" | "Gold" | "Silver" | "Bronze" (higher → bigger card)
],
ctaSection: {
- // Call-to-action title
- title: "Support This Project",
-
- // Description encouraging users to sponsor the project
- description:
- "Explain why supporting your project matters and how people can help.",
-
+ title: "", // ← CTA heading
+ description: "", // ← why people should sponsor
sponsorLink: [
- {
- // Platform name
- name: "Patreon",
-
- // Sponsorship link
- url: "https://www.patreon.com/yourproject",
-
- // Optional icon for the platform
- icon: (
-
- ),
-
- // Optional custom class for styling
- className: "patreon-link",
-
- // Open link in a new tab
- newTab: true,
- },
- {
- name: "GitHub Sponsors",
- url: "https://github.com/sponsors/yourproject",
- icon: (
-
- ),
- className: "github-sponsors-link",
- newTab: true,
- },
+ { name: "", url: "", icon: null, newTab: true },
+ // Add one entry per sponsorship platform
],
},
-
- // Button styling variant
- buttonVariant: "AOSSIE",
};
-// Component usage
;
```