[FEATURE] - Add scrollers for blogs on mental health well being.

[V2VaibhavVerma]

Feature Title

Scrolling blogs for more meditation, sleep, stress, and mental health resources.

Problem Statement

On the Serenifi website, the blog section for mental health and well-being content lacks scroll functionality. This limits accessibility and prevents users from easily browsing through multiple articles. Adding horizontal or vertical scroll bars to this section would improve user experience, allowing visitors to view a wider range of posts effortlessly. Implementing scroll functionality could enhance engagement with the content and help users discover more resources for mental health and well-being

Proposed Solution

1. Streamlit Components: Use Streamlit's st.container() or st.columns() for organizing blog posts and then set a fixed height. You can apply CSS to add scroll overflow for viewing more posts without altering the entire layout.
2. Custom CSS with Streamlit: Add custom CSS to control the blog section’s scroll behavior. Streamlit supports CSS injections, so you could use overflow-y: scroll for vertical scrolling.
3. Streamlit-Extras or Custom Plugins: Explore Streamlit-Extras or plugins like streamlit-scrollable-container if compatible, as they provide pre-made scroll elements optimized for Streamlit apps.

Alternatives Considered

No response

Additional Context

No response

[github-actions]

👋 Thank you! Welcome to the project! Please follow these guidelines for smooth collaboration:

1. After completing a task, add your name and details to the Contributors Table/List.
2. Attach relevant screenshots or videos of your contribution for transparency.
3. Tasks are assigned on a first-come, first-served basis.
   • Avoid spamming requests for already-assigned tasks.
   • Respect the queue and wait for new tasks.
4. Propose New Ideas: Discuss new features or suggestions in the "Ideas" channel before starting work.

[SatyamSingh8306]

can you assign me this issue i want to work on this under gssoc-exd