🚀 feat: large info section

[akshitarora921]

This PR:

This info section have: fixes #339

• [x] A Boolean attribute that flips the layout to either left or right
• [x] Animation that brings the content of the info box in from the right or left depending on the layout Boolean
• [x] A donate button that links the donate page
• [x] A read more link that links to a program page (not yet implemented)

Self-Review Checklist

• [x] PR title is clear with proper spelling and grammar
• [x] PR description contains a bulleted list of changes contained in the PR
• [x] PR links to relevant issues, with keywords to auto-close any issues fully resolved upon merge
• [x] All automated checks passed
• [x] Any variables introduced are named clearly and explicitly

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/margaritahumanitarian/helpafamily/6Tjoczcac117DCcfVNWfgvLFngpd
✅ Preview: https://helpafamily-git-fork-akshitarora92-00aeac-margaritahumanitarian.vercel.app

[codecov-commenter]

Codecov Report

Merging #347 (4fef839) into main (435f648) will decrease coverage by 0.85%. The diff coverage is 0.00%.

@@            Coverage Diff             @@
##             main     #347      +/-   ##
==========================================
- Coverage   11.18%   10.32%   -0.86%     
==========================================
  Files          40       42       +2     
  Lines         313      339      +26     
  Branches       21       23       +2     
==========================================
  Hits           35       35              
- Misses        259      283      +24     
- Partials       19       21       +2     

Impacted Files	Coverage Δ
components/LargeInfoSection.js	0.00% <0.00%> (ø)
hooks/useIntersectionObserver.js	0.00% <0.00%> (ø)
pages/index.js	0.00% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 435f648...4fef839. Read the comment docs.

[akshitarora921]

I have exported the Image from the figma but it contain small transparent margins.

[LowLifeArcade]

• [ ] Animation that brings the content of the info box in from the right or left depending on the layout Boolean

So what I should have said to be more clear is that the with the current design (which would be the default) which has the image on the left and the info section on the right, that info section and its content should animate into view from the right.

For this animation:

1. It should come in from a point (see image below) on the right in a revealing fashion like this video that I shared in the issue.
2. It should be css and come in smoothly with a fade in
3. The background should be dark matching the design.

[LowLifeArcade]

I have exported the Image from the figma but it contain small transparent margins.

Actually, the image was already in the public folder. Sorry, I should have told you that.

[akshitarora921]

• [ ] Animation that brings the content of the info box in from the right or left depending on the layout Boolean

So what I should have said to be more clear is that the with the current design (which would be the default) which has the image on the left and the info section on the right, that info section and its content should animate into view from the right.

For this animation:

1. It should come in from a point (see image below) on the right in a revealing fashion like this video that I shared in the issue.
2. It should be css and come in smoothly with a fade in
3. The background should be dark matching the design.

So, it should appear from red circle? Also should we use style jsx only or tailwind classes?

[akshitarora921]

Hi @LowLifeArcade, I have made the changes

• [x] add css using style jsx
• [x] add transition from right to left using box overlay
• [x] background color of info-box is same as of design
• [x] add a prop named mirrored to mirror the layout

Questions:

1. Info-box color will we same for the mobile view?
2. Should we add linear gradient to horizontal bar?

[LowLifeArcade]

Hi @LowLifeArcade, I have made the changes

• [x] add css using style jsx
• [x] add transition from right to left using box overlay
• [x] background color of info-box is same as of design
• [x] add a prop named mirrored to mirror the layout

Questions:

1. Info-box color will we same for the mobile view?
2. Should we add linear gradient to horizontal bar?

This is looking really good! As far as your questions:

1. I think that will be fine. I'd like to add some padding though. Some top and bottom and a little on the sides. Not too much but enough to give it some breathing room.
2. Hmm, I'd prefer not to use a gradient. BUT I'd like it to animate! Let's make it animate into frame from the right to the left as the content fades in. Basically do what you did in the info cards in the card carousel.

[akshitarora921]

Hi @LowLifeArcade, I have made the changes

• [x] add css using style jsx
• [x] add transition from right to left using box overlay
• [x] background color of info-box is same as of design
• [x] add a prop named mirrored to mirror the layout

Questions:

1. Info-box color will we same for the mobile view?
2. Should we add linear gradient to horizontal bar?

This is looking really good! As far as your questions:

1. I think that will be fine. I'd like to add some padding though. Some top and bottom and a little on the sides. Not too much but enough to give it some breathing room.
2. Hmm, I'd prefer not to use a gradient. BUT I'd like it to animate! Let's make it animate into frame from the right to the left as the content fades in. Basically do what you did in the info cards in the card carousel.

@LowLifeArcade, I have completed the changes, Please take a look.

Changes-

• [x] Add more padding to info-box in mobile view
• [x] Add width transition on horizontal bar

[LowLifeArcade]

@akshitarora921 this is great! Well done addressing all of the comments and making all of the adjustments. I'll talk to you soon, buddy. Merging.