Enhance Chapter Card Descriptions for Better Alignment with Inspirational Book Titles and Their Themes

[SrijaVuppala295]

Related Issue

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

Fixes: #4829

Description

This PR introduces a hover effect for the chapter cards, improving user interaction and visual engagement. The following changes have been made:

• Card Background on Hover:

  • The background color of the cards changes to a light pink (#ffb6b9) when hovered.

• Title Hover Effect:

  • The card title becomes larger (2em), bold, and transitions to a darker shade of pink (#b36b6b) on hover for better visibility.

• Text and Subtitle Color:

  • The subtitle and content text color changes to white when the card is hovered, improving contrast against the background.

• Smooth Transitions:

  • All color and size transitions occur smoothly for a better user experience.

Changes Include:

• Updated CSS to apply the hover effect to .chapter-card and .card-title.
• Adjusted the transition properties for smooth color and size changes.

Type of PR

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

Screenshots / videos (if applicable)

BEFORE:

AFTER:

Added cursor effect , hovering effect and rechanged the cards styling and added content to the cards !!

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 9, 2024 8:55am

[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	7780224
🔍 Latest deploy log	https://app.netlify.com/sites/swapreadsconnect/deploys/672f237cc970230008cb3de9
😎 Deploy Preview	https://deploy-preview-4830--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.