feat: implement the asyncapi financial summary page

[vishvamsinh28]

I have implemented the Financial Summary Page
users can view this page by clicking on finance in the footer

Figma Link - https://www.figma.com/file/MMOuTQ7QaPu6BL2TJrhjw5/AsyncAPI-Financial-Summary?type=design&node-id=0%3A1&mode=design&t=NvXEDC3PMTKDjrFP-1

fixes #1723

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	91e6425
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/6582cdc6f494a5000858f22b
😎 Deploy Preview	https://deploy-preview-2038--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	25
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-2038--asyncapi-website.netlify.app/

[Mayaleeeee]

Hello @vishvamsinh28, thank you for your hard work. I'm excited for the design to go live! I have included my review of the implementation below.

I will be starting with this section;

• Please use a font size of 32px for the header "Expenses Breakdown". This is the same font size used for other headers in each session, except for "AsyncAPI Financial Summary", which should be 36px.
• Kindly use this colour code 212526 for the body texts
• The icon inside the box has a size of 24px, while the box itself measures 56px. The box is positioned beside the icon, not on top of it. I can provide the icons for you.

• Thilie's name in the hiring section should have a clickable link, allowing those interested in our community manager to view her LinkedIn profile easily.

[Mayaleeeee]

Sponsorship Tiers

• We'll also use the font size and colours I mentioned earlier under this.
• The text under the Sponsorship Tiers is long; we could use three-line sentences so it will be consistent with the rest of the page.
• The text under the tiers (gold, silver), amounts, and benefits should be left-aligned instead of centred.
• Also, "Amounts" should not be placed under the texts displaying Benefits.

[vishvamsinh28]

@Mayaleeeee I have updated the design but not exactly because it is not possible to implement it exactly due to some spacing issues. For example look at this sponsorship tier I only added 2 cards in a row because adding 3 cards would make the body text look weird.

I have also updated the changes @derberg asked me to make

[akshatnema]

Hey @vishvamsinh28, you have done a commendable job in completing this PR. Kudos to you 🥳 . I do have some suggestions (not necessary to implement), I see that the React component you are making in each file has quite a different format than we normally use in our repo. Currently, in your PR, you have used reactFunctionExportComponent but we use reactFunctionComponent as our code practice in the repository. So, to provide uniformity in all files, kindly remove the export line at bottom and add the export default word file initialising the component function itself.

Also, we need the test files for the new components you created. Is it in your plan to add them in this PR or a separate PR?

[vishvamsinh28]

Thank you 😄 @akshatnema I have incorporated the changes you suggested, and I am comfortable with both options. However, I believe creating a separate pull request would be the more optimal choice. And any final reviews from @Mayaleeeee and @derberg

[akshatnema]

Sorry, some last minute reviews I got. In the heading of the Finance page, I see that there is an extra margin around it and also the font-size is not appropriate according to design. Take a look over it.

Current:

In Figma:

Also, I see that text center alignment is missing in the first paragraph after heading.

[vishvamsinh28]

@akshatnema I just saw that 😅 and was about to update the code for that, I will fix it

[derberg]

all good from my side, just make the final fix pointer from @akshatnema and lets merge this one

[vishvamsinh28]

@akshatnema @derberg I have made final changes

[derberg]

I'm fine if tests will followup in separate PR as this one is big enough and complicated to review. I think we can definitely trust @vishvamsinh28 that he will work on tests as he is a great contributor

approve and congrats from my side

@akshatnema @Mayaleeeee ?

[akshatnema]

@vishvamsinh28 Kindly have a close look over Figma for mobile view. You have to set the correct heading size order in mobile view. Currently, Sponsorship Tiers has a greater heading size than the AsyncAPI Financial Summary heading.

Also, try to make the implementation as similar to Figma design.

[vishvamsinh28]

@derberg and @akshatnema, thank you for approving this pull request! 😄

@akshatnema, I've implemented the changes you requested.

@Mayaleeeee, I've addressed your last review and made the necessary adjustments. However, I'm encountering difficulties with the final points you mentioned. The select box appears differently on Mac compared to Windows.

Here's how it looks on Windows:

And on Mac:

Unfortunately, I can't preview the changes on a Windows machine as I don't have access to one.

@derberg @akshatnema, do you have any suggestions for resolving this issue? I'm considering opening a pull request from my friend's Windows laptop once this one is merged. What do you think?

[derberg]

lgtm

[derberg]

/rtm

I think we can merge this one as this is a huge PR with lots of ping/pong - any further design improvements @Mayaleeeee you can push on the PR that @vishvamsinh28 will open to provide proper tests

@vishvamsinh28 man you demonstrated a lot of patience and great motivation to push this topic further 👏🏼

[Mayaleeeee]

/rtm

I think we can merge this one as this is a huge PR with lots of ping/pong - any further design improvements @Mayaleeeee you can push on the PR that @vishvamsinh28 will open to provide proper tests

@vishvamsinh28 man you demonstrated a lot of patience and great motivation to push this topic further 👏🏼

Yeah, he really did honestly.

Thank you @vishvamsinh28
You did great 🙌🙌🎉💯🥰