Create Volunteer Sidebar Components (Sign Up, Contact, Share)

[jasonyu0705]

Overview

Develop three separate frontend components to be used in the volunteer sidebar as shown in the attached mockup.

Component Requirements

1. Sign Up to Volunteer Block

   • Rounded rectangle container.
   • Bold title: "SIGN UP TO VOLUNTEER"
   • Large blue "GO" button.

2. Who to Contact Block

   • Rounded rectangle container.
   • Bold title: "WHO TO CONTACT"
   • Displays a contact name (example: John Hallett).
   • Phone number with phone icon.
   • Email address with email icon.
   • Two buttons: "CALL" (blue) and "EMAIL" (olive green).

3. Share Block

   • Rounded rectangle container.
   • Bold title: "SHARE"
   • Blue "SHAREABLE LINK" button.

General Requirements

• Match the layout, font styling, button shapes, and iconography as depicted in the mockup.
• Maintain container spacing and rounded rectangle borders for all components.
• Components should be independently reusable.
• Ensure accessibility with appropriate aria-labels for buttons and icons.
• Design for responsive display.

Acceptance Criteria

• All three components are implemented as independent, reusable frontend modules.
• Styling closely matches the provided mockup.
• Ready for integration into the broader sidebar layout.
• Buttons and icons are properly accessible and labeled.