[FEATURE]:Implement Offline Detection Feature for Better User Interaction And Traffic

[laxmanp090404]

Is your feature request related to a problem? Please describe.
Yes, the problem arises when users lose internet connectivity while browsing the FinNews website. Currently, there is no indication that they are offline, which can cause confusion as the content may not load or update. This results in a poor user experience as they might assume the website is broken or slow, when in reality it's a connectivity issue.

Describe the solution you'd like
I would like to implement a feature that detects when a user goes offline using a custom React hook (window.navigator.onLine). This feature would display a dedicated "You are offline" page, notifying the user about their network status. The custom hook will listen for the online and offline events and update the app accordingly. The user will be redirected to the offline page whenever they lose connectivity, providing a clear message and a prompt to refresh the page once they regain internet access.

Screenshots
Since this feature hasn’t been implemented yet, here’s a mock-up of how the offline page could look:

1. A centered message that says, "You are currently offline. Please check your connection."
2. A retry or refresh button to reload the page when the user reconnects.

Similar to below:

Screenshots/Video of Feature
Once the feature is implemented, we can share a video showcasing the transition between online and offline states, highlighting the seamless user experience when the page detects connectivity issues.

Check List

• [x] I am contributing under GSSoC-ext
• [x] I am contributing under Hacktoberfest
• [x] I follow contribution guidelines

[laxmanp090404]

@divyansh-2005 Please look into the issue and assign me