Extract page logic into custom hooks

[KKSurendran06]

Several page level components currently contain complex state management and side effect logic directly within their bodies. This violates the separation of concerns principle, making the components bloated and hard to maintain.

Below is an initial list of refactoring tasks and potential custom hooks

Pages to Refactor

• Home page: Extract animation logic and useRef hooks.
• About page: Move useRef logic to the Hero component or a dedicated hook.
• Team page: Extract animation variants and useRef hooks.
• Gallery page: Move useRef and useRouter logic into a custom hook.
• Clublife page: Extract animation variants into a shared location.

Suggested Custom Hooks to Create

• useScrollDirection (for Navbar)
• useNavbarColor (for Navbar)
• useOnClickOutside (for MenuDrawer)
• useScrollVisibility (for ScrollDown)
• useResponsiveGrid (for MembersAndAlumni)

[KKSurendran06]

This plan outlines a starting point for the refactor. Feel free to comment with suggestions or if you feel a particular change is unnecessary