[Web]: Highlighting campaigns on landing page

[ssandino]

Is your feature request related to a problem? Please describe.

Currently, people who hear about Social Income through a private fundraiser (e.g., Ismatu’s) and visit the website without a direct link to the campaign page are left lost. There is currently no way for them to find the campaign.

Problem: This results in donations going to the general program of Social Income instead of contributing toward the campaign’s goal.

Describe the solution/feature

Show a small badge on the landing page that leads to the campaign

Phase 1 (Hardcoded Content)

• Create a standard badge for a campaign with a goal, including hover effects.
• Create a loading badge that is shown initially with a small loading animation
• Ensure the loading badge is only displayed for 2 seconds after the section comes into the user's view (needs 'use client')

→ Ready to be deployed

Phase 2 (Dynamic Content, New PR)

• Display all fundraisers that have the featured boolean set to true.
• If more than 3 fundraisers are featured, display 3 randomly selected fundraisers.
• Fetch the name of fundraiser, number of contributors, total donations, link and goal set (to calculate the percentage toward the goal) and show it in the badge.
• Make a new field in campaigns for a profile image (or link to it). Currently the campaing image is saved in assets.

Describe alternatives you've considered

No response

Criteria for Completion

No response

Anything else?

Figma link

Code of Conduct

• I've read the Code of Conduct and understand my responsibilities as a member of the Social Income community