Refactor feature section with parallax effectFeature section refactor

[sahadat-sk]

Fixes: #1674

Demo (Sorry for laggy video 😅):
keploy.webm

[nehagup]

good initiative @sahadat-sk !

• There's a lot of empty space over the first feature.
• Once you scroll to the second feature the GIF transition should happen once the text of second feature has come to the middle of the first image.
• In the small screen size this is completely breaking, please check the responsiveness.

[sahadat-sk]

Hey @nehagup can you review now?

[Hermione2408]

@sahadat-sk Please revert back the linting changes

[Hermione2408]

Hey @sahadat-sk Smooth transition kudos!

• Please keep the Heading Intact and inside the view when the transition is happening.
• Remove the empty space above first feature
• Also I noticed you have removed the text "Give your teams the tool they need to move faster Accelerate development with streamlined testing, capturing network calls, automating scenarios, and seamless tool integration." try to accommodate it

[sahadat-sk]

Hey @Hermione2408, I have made the requested changes, can you review them now?

[Hermione2408]

Hey @sahadat-sk everything looks fine just remove this division it is not going well with the UI

[sahadat-sk]

Done

[Hermione2408]

LGTM @nehagup

[nehagup]

Thanks for the PR @sahadat-sk ! A few changes.

• The section is breaking on md and sm screen sizes, please stick to the same old format for md and sm screen size.
• User needs to much scrolling from 1 feature to other, the second feature should start to appear as the first feature text comes to the top of container (attached screenshot)

• can you please center align the 3rd GIF in center?
• there's a lot of empty space after 3rd feature ends. Please reduce that to margins same as margins in other sections.

Rest looks good!

[sahadat-sk]

Thanks for the PR @sahadat-sk ! A few changes.

* The section is breaking on md and sm screen sizes, please stick to the same old format for md and sm screen size.

* User needs to much scrolling from 1 feature to other, the second feature should start to appear as the first feature text comes to the top of container (attached screenshot)

* can you please center align the 3rd GIF in center?

* there's a lot of empty space after 3rd feature ends. Please reduce that to margins same as margins in other sections.

Rest looks good!

I have made the changes, can you please review them!!

[nehagup]

@sahadat-sk Everything else looks good! Just that First feature fades away before the first GIF comes even to the center. It's fine to remove the 3rd GIF and scroll the features-text with just 2 GIFs so that text gets more time and GIFs doesn't change too soon.

[sahadat-sk]

@sahadat-sk Everything else looks good! Just that First feature fades away before the first GIF comes even to the center. It's fine to remove the 3rd GIF and scroll the features-text with just 2 GIFs so that text gets more time and GIFs doesn't change too soon.

Hey @nehagup, I have made the changes, do let me know if there is anything else I need to change!