Donation Page Frontend

[viraka]

UI Design & Implementation

Goals

• Navbar
• Footer
• Interactive Interface for donation.

Expected Outcome

Interactive UI through which users will be able to donate to mulearn and receive receipts

Acceptance Criteria

No response

Implementation Details

Refer mulearn/learning-circle , design in figma , implement in code.

Mockups/Wireframes

No response

Product Name

Donation

Domain

No response

Tech Skills Needed

Agile

Mentor(s)

@viraka @Jenin82

Complexity

Low

Category

Frontend

[vishakh-abhayan]

@viraka what's the update

[Jenin82]

Waiting for UI development, then will proceed to production

[AFarHitman7]

heywo 👍

[AFarHitman7]

Worked on the donation page design, do provide feedback!

https://www.figma.com/design/jGzd82sk0Kgju5UYvoOl0E/donation-page?node-id=0-1&t=exCG56WaFYowDvPV-0

[Jenin82]

@AFarHitman7 this looks good 👍

• Change USD to INR
• change enter payment info to donate and make the button same width as the input or bit bigger whichever looks better

[Jenin82]

@AFarHitman7 What is the progress on front-end development, could you share expected date of completion

[AFarHitman7]

The header and form is done, and footer is left. Minor styling left for the form.

The front-end functionality has some work, which will be forwarded after the UI is complete. I'll try to see if I can finish it by today. At max give me 48 hours.

[Jenin82]

@viraka when will we go for production ?

[viraka]

@Jenin82 dev-server pushed waiting for bug fixes so we could push for prod.

[Jenin82]

@viraka is it pushed to production ? Or waiting for bug fixes

[viraka]

Still waiting for bug fixes.

[viraka]

Persisting Issues:

1. Donation mulearn image takes alot of time to load ... should make it a webp format or lazy load it. (Solvable)
2. This page appears even after putting in contact details. (Try to fix)

3. After payment success no need to display the donation section instead show a thankyou for donating and in that section add a button to download the reciept.

4. Connect with backend devs to make sure the receipt design is of this format or if not solvable from backend then make a page for it on frontend.

[vishakh-abhayan]

@viraka cool

[Jenin82]

@viraka if you need more clarification on the contents of the receipt please do let me know

[GeorgeET15]

Hey, can I work on this?

[Jenin82]

@althafmu figma link

[Althafmu]

https://www.figma.com/design/mqLEVGygDn4WBflsbRQZzc/Untitled?node-id=1%3A2&t=5jVK6iXcUgurvukp-1

[vishakh-abhayan]

@Althafmu nice ui man