fix:footer dark and light mode fixed

[saurabh007007]

---

Fix Footer Dark and Light Mode Styling

🛠️ Summary

This update enhances the footer on the landing page by adding proper support for both dark and light modes.
The styling and color scheme have been refined to ensure better visual consistency, readability, and an overall polished appearance across themes.

✨ Changes Made

• Added dark mode–compatible styles for the footer
• Improved color contrast for better accessibility
• Refined layout and spacing for a cleaner look
• Ensured consistent appearance across light and dark themes

🐛 Related Issue

Fixes #1122

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[coderabbitai]

📝 Walkthrough

Walkthrough

The Footer component receives a styling overhaul, transitioning from a black theme to a white theme with dark-mode support. Dark-aware CSS classes, transitions, and border utilities are added. The Discord link formatting is normalized to a single line.

Changes

Cohort / File(s)	Summary
Footer Styling & Dark Mode landing-page/src/Pages/Footer/Footer.tsx	Updated footer styling from black to white theme with dark-mode support. Added dark-aware classes (dark:bg-black, dark:text-white), transition utilities (transition-colors duration-300), and border styles (border-t, border-gray-100, dark:border-gray-900). Normalized Discord link HTML formatting to single-line structure.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested labels

bug, UI, good first issue

Suggested reviewers

• rahulharpal1603

Poem

🐰 A footer so fine, now dressed in white,
Dark mode gleams in the evening light,
Borders drawn with graceful care,
Discord links formatted fair!
From black to bright, a rabbit's delight ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title 'fix:footer dark and light mode fixed' directly addresses the main change: adding dark/light mode support to the footer component with appropriate styling classes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ 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.}

[Copilot]

Pull request overview

This PR adds dark and light mode support to the footer component in the landing page. The changes ensure the footer adapts to the user's theme preference with appropriate colors for both modes.

Changes:

• Added dark mode support to the footer element with responsive background, text, and border colors
• Added smooth transition effects for theme changes
• Minor code formatting improvements to the Discord link anchor tag

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

landing-page/src/Pages/Footer/Footer.tsx (1)

30-30: ⚠️ Potential issue | 🟡 Minor

Border color is not theme-aware.

The border-white class will be invisible in light mode (white border on white background) but visible in dark mode. This creates an inconsistent visual experience across themes.

🎨 Proposed fix to make the border theme-aware

-        <div className="mt-4 text-center border-t border-white pt-2">
+        <div className="mt-4 text-center border-t border-gray-200 dark:border-gray-800 pt-2">