Fix rule-of-hooks violations in LandingLayout

[sugan0tech]

Summary
Fix React Hooks rule-of-hooks violations in LandingLayout so hooks are only called at the top level of a React component or a custom hook.

Context
ESLint flags useColorModeValue invoked inside callbacks in src/layouts/LandingLayout.tsx (around lines ~125, ~135, ~141). Hooks must not be called inside nested functions, conditionals, or loops.

Tasks

• Move all useColorModeValue calls to the top of the component body and assign their results to constants.
• If a callback needs values, pass them via parameters or props, or compute once with useMemo.
• Avoid calling hooks inside onClick, render callbacks, or array methods.
• Smoke test the page for visual parity in both color modes.

Acceptance Criteria

• npm run lint passes with no react-hooks/rules-of-hooks violations in LandingLayout.
• LandingLayout renders correctly and styles still reflect light/dark modes.
• No functional regressions (navigation and interactions still work).

Notes/Risks

• Color decisions computed once may slightly change timing; verify hover/active states still match the design.