BlogCard layout and image optimization

[Adnaan-786]

Summary
Updated the BlogCard component to use the Next.js fill prop strategy instead of hardcoded dimensions. This fixes layout misalignment issues where cards had varying heights based on image aspect ratios.

Changes Made

• Fixed Grid Alignment: Wrapped the image in a div with aspect-video to ensure all blog cards maintain a uniform 16:9 ratio, preventing grid breakage.
• Improved Performance: Replaced fixed width/height with fill and added the sizes prop to optimize LCP (Largest Contentful Paint) and responsive loading.
• Visual Fix: Changed h-auto to object-cover to ensure images fill the card area without distortion or empty space.

Type of Change

• Bug fix (layout alignment)
• Performance improvement

Summary by CodeRabbit

• Style
  • Enhanced dark mode styling for blog post titles with improved hover states and color transitions for better visual consistency across themes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR adds dark mode styling to the blog card's title element, extending the className with dark mode text colors, hover state gradients, and color transitions. No functional behavior changes—purely visual styling enhancements.

Changes

Cohort / File(s)	Summary
Dark mode styling enhancement components/blog-card.tsx	Adds dark mode hover styling to blog post title (h2): extends className with dark:text-gray-100, dark:group-hover color transitions, and dark mode gradient states alongside existing light-mode hover gradients.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Visual verification of dark mode styling behavior and color transitions may require testing in dark mode UI
• Ensure Tailwind utility classes are correctly applied and compatible with existing group-hover states

Possibly related PRs

• Card ui changes #9: Also modifies styling in components/blog-card.tsx, related to card layout and title className adjustments.

Suggested reviewers

• ceilican

Poem

🐰 A dash of dark, a hint of glow,
The bunny's blog now steals the show,
With midnight gradients, smooth and bright,
The card hops gracefully through the night! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title mentions 'layout and image optimization' which aligns with the PR's main objective of fixing layout misalignment and optimizing images through Next.js Image fill strategy and aspect ratio enforcement.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 113d28d and 2fcb783.

📒 Files selected for processing (1)

• components/blog-card.tsx (1 hunks)

🔇 Additional comments (1)

components/blog-card.tsx (1)

47-52: Dark-mode title styling looks good; please verify Image/layout objectives are actually implemented.

The dark:text-gray-100 + dark hover gradient additions are fine and should behave consistently with the existing group-hover:* gradient-to-text pattern.
However, the PR objectives mention switching the Image to fill + sizes and enforcing aspect-video/object-cover, but this file still shows width/height and object-contain—can you confirm whether those changes are included (or adjust the PR description)?

---

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.}