fix footer's dark and light mode toggle

[JaYRaNa213]

Fixes #1122

Description

The footer currently stays in dark mode for both light and dark theme toggles, which causes an inconsistent UI experience compared to the rest of the landing page.

The footer should properly switch styles based on the active theme (light or dark).

Current Behavior

• Footer background is always dark
• Text colors do not adapt to light mode
• Theme toggle has no effect on the footer

Expected Behavior

• Footer should be light in light mode
• Footer should be dark in dark mode
• Colors should smoothly transition with theme toggle

---

Proposed Fix

Update Footer.jsx to support Tailwind dark: classes.

Files Affected

Footer.jsx

Before:

<footer className="relative bg-black text-white py-8 overflow-hidden">

After :

<footer className="relative bg-white dark:bg-black text-gray-900 dark:text-white py-8 overflow-hidden transition-colors duration-300 border-t border-gray-100 dark:border-gray-900">

Screenshots

Before (Footer always dark) :

---

After (Footer adapts to light & dark mode)

Record

• I agree to follow this project's Code of Conduct

Summary by CodeRabbit

• Style
  • Updated footer with improved dark mode support, revised color scheme for backgrounds and borders, enhanced gradient typography effects, and refined interactive hover states.

[coderabbitai]

📝 Walkthrough

Walkthrough

The footer component is updated to support light and dark mode themes using Tailwind CSS dark mode classes. The background transitions from permanently dark to white in light mode and dark in dark mode, with accompanying adjustments to text colors, borders, and icon styling to match the active theme.

Changes

Cohort / File(s)	Summary
Footer Theme Support landing-page/src/Pages/Footer/Footer.tsx	Updated footer to respect light/dark theme toggle using Tailwind dark: classes. Background changes from black to white with dark variant, text colors adapt to theme, border colors updated with gray variants, and transitions added for smooth theme switching.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested labels

bug, UI

Suggested reviewers

• rahulharpal1603

Poem

🐰 The footer once sat in endless night,
But now it dances—dark and light!
With Tailwind's touch and theme support,
Our little hopper brings delight,
No more the darkness cold and tight! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix footer's dark and light mode toggle' clearly and concisely describes the primary change in the PR, matching the main objective of fixing the footer's theme responsiveness.
Linked Issues check	✅ Passed	The PR code changes directly address all objectives from issue #1122: footer now uses Tailwind dark: classes for light/dark mode support, includes transition-colors for smooth transitions, and updates text/border colors to adapt to theme changes.
Out of Scope Changes check	✅ Passed	All changes in Footer.tsx are directly related to fixing the dark/light mode toggle functionality as specified in issue #1122; no unrelated or out-of-scope modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}