[Web]: Optimization of campaign pages

[ssandino]

Is there an existing request for this feature?

• I have searched the existing issues

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

How does this feature help us achieve our primary goal of reaching the maximum number of people in need?

Optimized campaign pages drive higher funding, especially through recurring donations, enabling us to support even more individuals in need.

Tasks

Preview Give feedback

1. Make a form for website visitors to make their own fundraiser
2. Profile image: Adding the option to upload a image through the admin tool, that is presented as avatar in different places on the campaign page to make it more personal
3. Newsletter signup: Adding direct newsletter signup for users on the campaign page which signs them up for normal newsletter (without welcoming emails) and for an alert, when campaign, where they signup
4. Links below info texts: Adding option to have links in the informational text boxes
5. Optimize donation card: To make it more appealing to donate and specially attract recurring donations
6. Optimize progress bar: To better highlight important information

Details about tasks see below.

Describe the solution/feature

Profile image

• This should make the campaigns more personal
• The upload can be through the admin tool (firecms has an upload function)
• The profile image can use the avatar component of shadcn
• If no profile image is uploaded, it just ignores the div
  

Newsletter signup

• This should sign them up for the standard newsletter (like here), this without the welcome emails
• This should sign them up for future alerts on the campaign (like "campaign reached 90% help it to reach the goal")
• This feature should be added as an option (boolean) in the admin, cause there might be campaigns where this doesn't make sense (for example thematic fundraisers with no end etc.)
  

Links below info texts

• This is used to point to additional information, for examples social media accounts of the campaign owners
  

Optimize donation card

• Monthly donations now the default (and added ❤️ symbol)
• Selected options are now all blue (not yellow) and small aligning adjustments
• The field to enter custom amount only appears when clicking on "others"
• Donation amount should be mentioned in the button text for better information
• If someone makes a one-time donation, propose a cheaper recurring donation as last step (like Mozilla Foundation)

Optimize progress bar

• highlight amount of contributors in a badge to better show collective effort
• Get rid of the .00 in the numbers and small text size changes

Describe alternatives you've considered

No response

Criteria for Completion

No response

Anything else?

The Figma designs are here

Code of Conduct

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