Skip to content

feat: Donation Page

feat(frontend): Donation Page

Description

Create a dedicated Donation Page that explains the purpose of donations and guides users on how to donate. This page is informational and motivational, with a clear call-to-action, and does not introduce or modify any backend or payment APIs.

Page Structure

1. Why to Donate

Purpose

  • Educate and emotionally motivate users to donate.

Content Guidelines

  • Explain why donations are important.
  • Highlight the impact of donations on people, communities, or causes.
  • Keep content concise, trustworthy, and user-friendly.

UI Expectations

  • Clean layout with proper spacing.
  • Headline with short descriptive text.
  • Optional icons or illustrations.
  • Fully responsive (mobile + desktop).

2. How to Donate

Purpose

  • Clearly guide users through the donation process.

Content Guidelines

  • Step-by-step explanation of how to donate.
  • Mention supported donation methods (no payment logic implementation).
  • Clear CTA such as “Donate Now” or “Proceed to Donation”.

UI Expectations

  • Simple, easy-to-follow flow.
  • Prominent CTA button.
  • CTA disabled or shown as placeholder if backend/payment is unavailable.

Constraints

  • Frontend-only implementation.
  • Do NOT change or invent backend APIs.
  • Reuse existing UI components, typography, colors, and design system.
  • Ensure accessibility (semantic HTML, readable text, proper contrast).

Acceptance Criteria

  • Donation page with two clear sections: Why to Donate and How to Donate
  • Responsive layout across devices
  • Clean, maintainable code aligned with existing frontend architecture
Edited by Kushal Lagichetty