Improving Trending Books and Book Categories section

[komalnalage]

#379
The issue says to "Improving New Arrivals and Trending Books section" but as told the Trending Books and Book Categories section is improved.

• This PR does the following:
  UI improved of the given sections and added hover effects .

Related Issues

Link any related issues using the format Fixes #issue_number.
This helps to automatically close related issues when the PR is merged.

• Placeholder: "Fixes Improving New Arrivals and Trending Books section #379 "

Testing Instructions

Detailed instructions on how to test the changes. Include any setup needed and specific test cases.

1. Pull this branch.
2. Run npm install to install dependencies.
3. Run npm test to execute the test suite.
4. Verify that ...

Install Dependencies
First, install dependencies in the root project directory if needed:

npm install
Then, navigate to the client directory and install its dependencies:
cd client
npm install
Run the Application
Start the application by running:
npm start
Verify the Changes
Open your application in a web browser (usually at http://localhost:3000).
Navigate to the component/page where the trending books section is displayed.

Specific test cases:
1.Hover Effects:
Hover over each book container and verify the following:
The shadow expands (hover:shadow-xl).
The container scales up slightly (hover:scale-105).
The background color changes to the specified hover color (light gray in normal mode and dark gray in dark mode).
2.Verify that the book images are fully visible and not cropped.
3.Navigation Links:
Click on each book link to verify that it redirects to the correct page. Check that:
The URL matches the intended path (e.g., /where-the-crawdads-sing).
The page loads correctly without any errors.

Video:

OnlineBooksVideo.mp4

Additional Context

Any additional context or information that reviewers should be aware of.

• This PR is based on the following...

Checklist

Make sure to check off all the items before submitting. Mark with [x] if done.

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I am working on this issue under GSSOC

[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! 😊

[komalnalage]

Hi @Trisha-tech I have done the changes can you accept my pull request of the issue that was assigned to me