-[TODO](https://TODO.stability.nexus/) is a ... TODO: Project Description.
+A lightweight React component library for displaying **Support us page** in a clean and customizable way. It provides pre-built UI components to showcase support us page with tier-based layouts, theme support, and Tailwind CSS styling, making it easy to integrate a professional support us page into any project or website.
---
-## ð Features
+# ð Features
-TODO: List your main features here:
+- **ðĻ Tier-based Layouts**: Display sponsors in different tiers with logos and links, styled according to the selected theme.
-- **Feature 1**: Description
-- **Feature 2**: Description
-- **Feature 3**: Description
-- **Feature 4**: Description
+- **ðĻ Theme Support**: Choose from **light**, **dark**, **minimal**, **corporate**, or **AOSSIE** themes for consistent branding.
----
+- **ðĻ Customizable Styling**: Tailwind CSS classes for easy customization of the support us page.
-## ðŧ Tech Stack
+- **ðĨïļ Responsive Design**: Built with responsive design principles for optimal viewing on all devices.
-TODO: Update based on your project
+- **ð§Đ Easy Integration**: Simple to integrate into any project or website with a single component.
-### Frontend
-- React / Next.js / Flutter / React Native
-- TypeScript
-- TailwindCSS
+- **ðĶ ESM + CommonJS + UMD builds**: Supports various module systems for flexible integration.
-### Backend
-- Flask / FastAPI / Node.js / Supabase
-- Database: PostgreSQL / SQLite / MongoDB
+- **ð§ TypeScript support included**: Provides type definitions for seamless development.
-### AI/ML (if applicable)
-- LangChain / LangGraph / LlamaIndex
-- Google Gemini / OpenAI / Anthropic Claude
-- Vector Database: Weaviate / Pinecone / Chroma
-- RAG / Prompt Engineering / Agent Frameworks
+- **ðĻ Styled with Tailwind (no global resets)**: Uses Tailwind CSS for styling with no global resets.
-### Blockchain (if applicable)
-- Solidity / solana / cardano / ergo Smart Contracts
-- Hardhat / Truffle / foundry
-- Web3.js / Ethers.js / Wagmi
-- OpenZeppelin / alchemy / Infura
+- **ðŠķ Lightweight and optimized**: Lightweight and optimized for performance.
---
-## â Project Checklist
-
-TODO: Complete applicable items based on your project type
-
-- [ ] **The protocol** (if applicable):
- - [ ] has been described and formally specified in a paper.
- - [ ] has had its main properties mathematically proven.
- - [ ] has been formally verified.
-- [ ] **The smart contracts** (if applicable):
- - [ ] were thoroughly reviewed by at least two knights of The Stable Order.
- - [ ] were deployed to: [Add deployment details]
-- [ ] **The mobile app** (if applicable):
- - [ ] has an _About_ page containing the Stability Nexus's logo and pointing to the social media accounts of the Stability Nexus.
- - [ ] is available for download as a release in this repo.
- - [ ] is available in the relevant app stores.
-- [ ] **The AI/ML components** (if applicable):
- - [ ] LLM/model selection and configuration are documented.
- - [ ] Prompts and system instructions are version-controlled.
- - [ ] Content safety and moderation mechanisms are implemented.
- - [ ] API keys and rate limits are properly managed.
+# ðŧ Tech Stack
----
+**[React](https://react.dev/)** â For building reusable UI components
-## ð Repository Links
+**[TypeScript](https://www.typescriptlang.org/)** â For type safety and better developer experience
-TODO: Update with your repository structure
+**[Tailwind CSS](https://tailwindcss.com/)** â For modern, utility-first styling
-1. [Main Repository](https://github.com/AOSSIE-Org/TODO)
-2. [Frontend](https://github.com/AOSSIE-Org/TODO/tree/main/frontend) (if separate)
-3. [Backend](https://github.com/AOSSIE-Org/TODO/tree/main/backend) (if separate)
+**[Rollup](https://rollupjs.org/)** â For bundling and optimizing the package for distribution
+
+**[Node.js](https://nodejs.org/) & [npm](https://www.npmjs.com/)** â For package management and publishing
---
-## ðïļ Architecture Diagram
+# ð Repository Links
-TODO: Add your system architecture diagram here
+- [Main Repository](https://github.com/AOSSIE-Org/SupportUsButton)
+- [NPM Package](https://www.npmjs.com/package/@aossie/support-us-button)
+- [CDN](https://cdn.jsdelivr.net/npm/@aossie/support-us-button@latest/dist/index.umd.js)
+---
+
+# Installation
+
+You can install and use this package either through **npm** (recommended for Node.js projects) or directly via a **CDN**.
+
+## Using npm
+
+Install the package using npm:
+
+```bash
+# Install the package
+npm install @aossie/support-us-button
```
-[Architecture Diagram Placeholder]
-```
-You can create architecture diagrams using:
-- [Draw.io](https://draw.io)
-- [Excalidraw](https://excalidraw.com)
-- [Lucidchart](https://lucidchart.com)
-- [Mermaid](https://mermaid.js.org) (for code-based diagrams)
+## Using CDN
+
+You can also use the component directly in the browser via a CDN:
-Example structure to include:
-- Frontend components
-- Backend services
-- Database architecture
-- External APIs/services
-- Data flow between components
+```html
+
+```
+
+Once included, the component will be available to use in your project.
---
-## ð User Flow
+# Usage
+
+## Using npm
+
+```tsx
+// Import the component in your project:
+import SupportUsButton from "@aossie/support-us-button";
-TODO: Add user flow diagrams showing how users interact with your application
+// Import the styles in your project:
+import "@aossie/support-us-button/style.css";
+// Import the types in your project:
+import type { supportUsButtonProps } from "@aossie/support-us-button";
+
+// Use the component in your project:
+; // props is an object of type supportUsButtonProps
```
-[User Flow Diagram Placeholder]
+
+## Using CDN
+
+```html
+
+
+// Import the styles in your project:
+
+
+// Use the component in your project:
+
```
-### Key User Journeys
+Once included, the component will be available to use in your project.
+
+---
-TODO: Document main user flows:
+## Example Usage
+
+Below is an example configuration for the `SupportUsButton` component.
+Replace the placeholder text (titles, descriptions, images, links, etc.) with your own project information.
+
+```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",
+
+ 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",
+ },
+
+ 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",
+ },
+
+ 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.",
+ },
+ },
+
+ // List of sponsors
+ 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",
+ },
+ ],
+
+ 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.",
+
+ 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,
+ },
+ ],
+ },
+
+ // Button styling variant
+ buttonVariant: "AOSSIE",
+};
+
+// Component usage
+;
+```
-1. **User Journey 1**: Description
- - Step 1
- - Step 2
- - Step 3
+---
-2. **User Journey 2**: Description
- - Step 1
- - Step 2
- - Step 3
+
Props API
-3. **User Journey 3**: Description
- - Step 1
- - Step 2
- - Step 3
+
+ Show details
+
+## Available API
+
+| Prop | Type | Required | Description |
+| ------------------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
+| `Theme` | string | No | Theme for the button, can be one of "AOSSIE", "light", "dark", "minimal", or "corporate" |
+| `pattern` | string | No | Optional background pattern for the button, can be one of "dots", "grid", "AOSSIE", or "none" |
+| `hero` | object | Yes | Information about the Hero section, including title, description, sponsor label, and optional background Image |
+| `organizationInformation` | object | Yes | Information about the organization, including name, description, logo, and project information |
+| `sponsors` | array of objects | No | List of current sponsors, each with name, optional logo, link, and sponsorship tier |
+| `ctaSection` | object | Yes | Information about the call-to-action section, including title, description, and sponsor links |
+| `classNames` | object | No | Optional additional CSS class for custom styling |
+| `buttonVariant` | string | No | Optional button variant for styling the call-to-action buttons |
+
+
---
-## ïŋ―ð Getting Started
+# Prop Options Reference
-### Prerequisites
+
+Show details
+All available options for configurable props in the component.
-TODO: List what developers need installed
+## Theme
-- Node.js 18+ / Python 3.9+ / Flutter SDK
-- npm / yarn / pnpm
-- [Any specific tools or accounts needed]
+
+Show details
-### Installation
+Controls the overall visual appearance of the widget.
-TODO: Provide detailed setup instructions
+| Value | Description |
+| ----------- | ---------------------------------------- |
+| `AOSSIE` | Default theme styled for AOSSIE branding |
+| `corporate` | Corporate styled layout |
+| `dark` | Dark mode UI |
+| `light` | Light mode UI |
+| `minimal` | Minimal clean design |
-#### 1. Clone the Repository
+
-```bash
-git clone https://github.com/AOSSIE-Org/TODO.git
-cd TODO
-```
+## Pattern
-#### 2. Install Dependencies
+
+Show details
-```bash
-npm install
-# or
-yarn install
-# or
-pnpm install
-```
+Adds a decorative background pattern to the hero section.
-#### 3. Configure Environment Variables(.env.example)
+| Value | Description |
+| -------- | ------------------------- |
+| `AOSSIE` | Square and Circle pattern |
+| `dots` | Dot pattern background |
+| `grid` | Subtle grid pattern |
+| `none` | None |
-Create a `.env` file in the root directory:
+
-```env
-# Add your environment variables here
-API_KEY=your_api_key
-DATABASE_URL=your_database_url
-```
+## hero
-#### 4. Run the Development Server
+
+Show details
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+Controls the top section of the widget.
+
+| Value | Type | Required | Description |
+| -------------- | ------- | -------- | --------------------------- |
+| `Image` | `Image` | No | Background or hero image |
+| `title` | string | Yes | Main heading |
+| `description` | string | Yes | Hero description |
+| `sponsorLabel` | string | No | Label above sponsor section |
+
+
+
+## Image
+
+
+Show details
+
+Used in hero images and organization logos.
+
+| Value | Type | Required | Description |
+| ----- | ------ | -------- | ---------------- |
+| `src` | string | No | Imag URl |
+| `alt` | string | No | Alternative text |
+
+
+
+## buttonVariant
+
+
+Show details
+
+Controls the styling of the call-to-action buttons.
+
+| Value | Description |
+| ----------- | -------------------------- |
+| `AOSSIE` | Default styled button |
+| `primary` | Primary action button |
+| `secondary` | Secondary button style |
+| `ghost` | Transparent minimal button |
+| `gradient` | Gradient styled button |
+
+
+
+## organizationInformation
+
+
+Show details
-#### 5. Open your Browser
+Information about the organization and project.
-Navigate to [http://localhost:3000](http://localhost:3000) to see the application.
+| Value | Type | Required | Description |
+| -------------------- | -------------------- | -------- | ------------------------ |
+| `name` | string | Yes | Organization name |
+| `description` | string | Yes | Organization description |
+| `logo` | `Image` / string | No | Organization logo |
+| `projectInformation` | `projectInformation` | Yes | Project details |
-For detailed setup instructions, please refer to our [Installation Guide](./docs/INSTALL_GUIDE.md) (if you have one).
+
+
+## projectInformation
+
+
+Show details
+
+Details about the project being sponsored.
+
+| Value | Type | Required | Description |
+| ------------- | ------ | -------- | ------------------- |
+| `name` | string | Yes | Project name |
+| `description` | string | Yes | Project description |
+
+
+
+## sponsors
+
+
+Show details
+
+List of sponsors displayed in the widget.
+
+| Value | Type | Required | Description |
+| ----------------- | ------ | -------- | --------------- |
+| `name` | string | Yes | Sponsor name |
+| `logo` | string | No | Sponsor logo |
+| `link` | string | No | Sponsor website |
+| `sponsorshipTier` | `Tier` | No | Sponsor tier |
+
+
+
+## Tier
+
+
+Show details
+
+Used inside the sponsors array to visually differentiate sponsors.
+
+| Value | Description |
+| ---------- | -------------------- |
+| `Platinum` | Highest tier sponsor |
+| `Gold` | High level sponsor |
+| `Silver` | Mid level sponsor |
+| `Bronze` | Entry level sponsor |
+
+
+
+## ctaSection
+
+
+Show details
+
+Call-to-action section encouraging sponsorship.
+
+| Value | Type | Required | Description |
+| ------------- | --------------- | -------- | ----------------------------- |
+| `title` | string | Yes | CTA title |
+| `description` | string | Yes | CTA description |
+| `sponsorLink` | `sponsorLink[]` | Yes | List of sponsorship platforms |
+
+
+
+## sponsorLink
+
+
+Show details
+
+Platform links for sponsorship (Patreon, GitHub Sponsors, etc).
+
+| Value | Type | Required | Description |
+| ----------- | --------- | -------- | --------------------- |
+| `name` | string | Yes | Platform name |
+| `url` | string | Yes | Sponsorship URL |
+| `icon` | ReactNode | No | Icon for the platform |
+| `className` | string | No | Custom CSS class |
+| `newTab` | boolean | No | Open link in new tab |
+
+
+
+## classNames
+
+
+Show details
+
+Allows custom styling of different widget sections.
+
+| Value | Description |
+| ------------------------- | ---------------------------- |
+| `container` | Root container styling |
+| `Hero` | Hero section styling |
+| `organizationInformation` | Organization section styling |
+| `sponsors` | Sponsors section styling |
+| `ctaSection` | CTA section styling |
+
+
+
+
---
-## ðą App Screenshots
+# ðą App Screenshots
+
+## AOSSIE-Theme
+
+
+Show details
+
+AOSSIE-Theme mobile screen preview.
+
+
+
+
---
@@ -257,10 +587,8 @@ Thank you for considering contributing to this project! Contributions are highly
## âĻ Maintainers
-TODO: Add maintainer information
-
-- [Maintainer Name](https://github.com/username)
-- [Maintainer Name](https://github.com/username)
+- [Rahul vyas](https://github.com/rahul-vyas-dev/)
+- [Zahnentferner](https://github.com/Zahnentferner)
---
@@ -273,8 +601,8 @@ See the [LICENSE](LICENSE) file for details.
## ðŠ Thanks To All Contributors
-Thanks a lot for spending your time helping TODO grow. Keep rocking ðĨ
+Thanks a lot for spending your time helping **SupportUsButton** grow. Keep rocking ðĨ
-[](https://github.com/AOSSIE-Org/TODO/graphs/contributors)
+[](https://github.com/AOSSIE-Org/SupportUsButton/graphs/contributors)
-ÂĐ 2025 AOSSIE
+ÂĐ 2026 AOSSIE
diff --git a/public/AOSSIE_THEME-SPONSOR.jpeg b/public/AOSSIE_THEME-SPONSOR.jpeg
new file mode 100644
index 0000000..2b4d4a8
Binary files /dev/null and b/public/AOSSIE_THEME-SPONSOR.jpeg differ
diff --git a/public/AOSSIE_THEME.jpeg b/public/AOSSIE_THEME.jpeg
new file mode 100644
index 0000000..48b0b91
Binary files /dev/null and b/public/AOSSIE_THEME.jpeg differ
diff --git a/public/AOSSIE_THEME_CTA.jpeg b/public/AOSSIE_THEME_CTA.jpeg
new file mode 100644
index 0000000..3e5c016
Binary files /dev/null and b/public/AOSSIE_THEME_CTA.jpeg differ
diff --git a/public/DARK_THEME.jpeg b/public/DARK_THEME.jpeg
new file mode 100644
index 0000000..f2f7324
Binary files /dev/null and b/public/DARK_THEME.jpeg differ
diff --git a/public/DARK_THEME_CTA.jpeg b/public/DARK_THEME_CTA.jpeg
new file mode 100644
index 0000000..f71fcf4
Binary files /dev/null and b/public/DARK_THEME_CTA.jpeg differ
diff --git a/public/DARK_THEME_SPONSOR.png b/public/DARK_THEME_SPONSOR.png
new file mode 100644
index 0000000..7a10441
Binary files /dev/null and b/public/DARK_THEME_SPONSOR.png differ
diff --git a/public/LIGHT_THEME.jpeg b/public/LIGHT_THEME.jpeg
new file mode 100644
index 0000000..4e7c585
Binary files /dev/null and b/public/LIGHT_THEME.jpeg differ
diff --git a/public/LIGHT_THEME_CTA.jpeg b/public/LIGHT_THEME_CTA.jpeg
new file mode 100644
index 0000000..4cf6e28
Binary files /dev/null and b/public/LIGHT_THEME_CTA.jpeg differ
diff --git a/public/LIGHT_THEME_SPONSOR.png b/public/LIGHT_THEME_SPONSOR.png
new file mode 100644
index 0000000..cf9f353
Binary files /dev/null and b/public/LIGHT_THEME_SPONSOR.png differ
- 
+ 
+ 
+
+ 
+ 
+
+ 
+ 
+