Extract page logic into custom hooks

Several page level components currently contain complex state management and side effect logic directly within their bodies. This violates the [separation of concerns](https://www.freecodecamp.org/news/separation-of-concerns-react-container-and-presentational-components/) 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)