Feat/fund details page

[JoelVR17]

[feat] Add fund details page | Issue #94

---

Description

Create a new page which route will be: /app/fund/{fundid}, this page should be the fund details page. Please note that there are two different scenarios for this page depending on the funding state; please handle both scenarios.

Changes

1. Add fund details page

   • File: frontend/gostarkme-web/app/fund/[fundId]/page.tsx

   • Description: Created a new fund details page that dynamically displays content based on the fundId. Implemented a layout with a bounded container and a divider for visual separation.

     • Notes: This page currently displays static content for the fund based on its ID, which will be populated dynamically in future iterations.

2. Create Fund component

   • File: frontend/gostarkme-web/components/modules/Fund/Fund.tsx

   • Description: Added a Fund component that conditionally renders the FundDonate or FundVote components based on the selected type.

     • Notes: The default type is set to "donate" and includes a message prop to display relevant information.

3. Add ProgressBar component

   • File: frontend/gostarkme-web/components/ui/ProgressBar.tsx

   • Description: Implemented a ProgressBar component to visually indicate the funding progress.

     • Notes: The progress percentage is currently hardcoded for demonstration purposes.

4. Create Donate component

   • File: frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx

   • Description: Developed a FundDonate component to handle donation input and display the progress of the funding goal.

     • Notes: Includes an input for users to enter donation amounts and a button to submit donations.

5. Create Vote component

   • File: frontend/gostarkme-web/components/modules/Fund/FundVote.tsx

   • Description: Created a FundVote component that allows users to cast their votes for a fund.

     • Notes: Similar to the donate component but tailored for voting functionality.

6. Add Divider component

   • File: frontend/gostarkme-web/components/ui/Divider.tsx

   • Description: Introduced a simple Divider component for aesthetic separation in the layout.

     • Notes: Utilizes a horizontal line styled for visibility.

7. Create Bounded layout

   • File: frontend/gostarkme-web/components/ui/Bounded.tsx

   • Description: Created a Bounded layout component to encapsulate the header, main content, and footer for consistent styling.

     • Notes: Layout can be expanded with additional styling and elements in future iterations.

Notes

1. General notes:
   • This PR focuses on the design implementation only. Functionality will be added in subsequent updates.
   • Ensure to refer to the Figma prototype for design consistency.

Evidence

1. Screenshots of the fund details page and components:
   • Donate Page

• Vote Page

[adrianvrj]

@JoelVR17 great work, one observation only

[adrianvrj]

We can use the ASCII value of the star emoji so we do not have to load any image, could you take a look at this?

[adrianvrj]

I think it is this one for HTML display: &#127775

[JoelVR17]

I think it is this one for HTML display: &#127775

Of course, I could add that.

[JoelVR17]

@adrianvrj the change has been realized. If you need another thing, please let me know