Add tutorial step flow directive

[xames3]

• need to provide a custom directive which can render a step-by-step tutorial flow.
• the idea is to build a split screen view where one half of the screen will be scrollable while the other half will be responding to the corresponding image reveal. the initial plan is to fade-in-out images when the transition happens to keep the flow intuitive.

[xames3]

• attaching my expectations for reference below👇🏻

https://github.com/user-attachments/assets/44bf7aa1-0a2f-47c5-a35b-c1063f394d6e

[xames3]

• couldn't achieve the vertical transitions but was able to pull off through the horizontal carousel layout by incorporating the default carousel mechanism.