UI Overhaul: Title Bar, Dark Mode, and Enhanced Visuals !!

[SrijaVuppala295]

Related Issue

[Cite any related issue(s) this pull request addresses. If none, simply state “None”]

Fixes: #4893

Description

1. Revamped Title Bar: Redesigned the title bar to improve visibility and aesthetics, ensuring a modern, clean look.
2. Dark Mode Toggle: Added a dark mode toggle for a seamless switch between light and dark themes, enhancing user experience.
3. Background Redesign: Updated the background styling to improve readability and visual appeal.
4. Improved Container Padding: Adjusted padding for a balanced layout and better content alignment.
5. Hover Effects on Cards: Introduced a new hover effect on cards, changing the background and text colors for an interactive, engaging feel.
6. Color Scheme Update: Enhanced colors to ensure consistency and accessibility across the interface.
7. Overall Page Optimization: Refined layout and visual elements to create a cohesive and user-friendly experience.

These updates collectively elevate the UI, making it more responsive, visually appealing, and accessible.

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Screenshots / videos (if applicable)

BEFORE:

AFTER:

Checklist:

• I have made this change from my own.
• I have taken help from some online resources.
• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers and screenshots after making the changes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
swapreads	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 10, 2024 8:58am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

✅ Deploy Preview for swapreadsconnect ready!

Name	Link
🔨 Latest commit	6fdef29
🔍 Latest deploy log	https://app.netlify.com/sites/swapreadsconnect/deploys/67309e079f23d100088a4a3f
😎 Deploy Preview	https://deploy-preview-4894--swapreadsconnect.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SrijaVuppala295]

@sailaja-adapa ,Add level 3 to this PR , For this pr , please increase the level #4824

[atmajaa]

@SrijaVuppala295

The cards are not aligned properly. Cant see the content

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 19 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 17 minutes (more than 100, code: "api-deployments-free-per-day").

[SrijaVuppala295]

@atmajaa , I have made some changes , please review it !!

[SrijaVuppala295]

@atmajaa @sailaja-adapa , please review and merge and add level 3 PR

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 57 minutes (more than 100, code: "api-deployments-free-per-day").

[abhi03ruchi]

#4880 has already resolved the issue , she has worked on the benefits section .