Feat/added bento cards for modern UI in blog website

[devlopharsh]

Related Tickets & Documents

Fixes: #3084 Added Bento style grid in the blog website

Description

This pull request enhances the Blog Landing Page UI/UX by implementing modern, bento-style blog cards and adding structured content sections. Previously, the landing page looked minimal with poor hierarchy and lacked content discoverability.
This update introduces a clean, modern layout inspired by SaaS-style bento grids and improves user experience across all screen sizes.

note : i have'nt use any content here as i have only passed the schema of the already used content of blog type. It must replaced with the original posts afterwards.

What this PR does

• Adds a Featured Posts section with highlighted bento-style cards.
• Adds a Latest Posts section using a responsive card grid.
• Implements modern card UI using TailwindCSS + shadcn/ui + optional Aceternity-like Bento layouts.
• Ensures cards display:
  • Cover Image
  • Title
  • Short excerpt
  • Author name
  • Read time
• Improves information hierarchy and page scannability.

Changes

• Implemented new Bento-style card component (PostBentoCard).
• Added “Featured Posts” section with larger highlighted layouts (tall/wide bento variations).
• Added “Latest Posts” section with a responsive grid.
• Integrated whileInView animations for smooth entry transitions.
• Added fallback demo data + safe data handling to prevent undefined crashes.
• Improved the landing page structure to follow modern blog UX patterns.
• Updated responsive behavior for small, medium, and large screens.

Type of Change

• New feature (adds functionality)
• UI improvement (visual or design changes)
• Bug fix (prevented node.title undefined error)
• Chore
• Breaking Change
• Documentation update
• Performance improvement
• CI
• Revert

Testing

Manual Testing Performed

• Verified that Featured Posts cards display correctly with tall/wide variations.
• Confirmed Latest Posts grid adapts correctly on mobile, tablet, and desktop.
• Tested mock data, missing fields, and API responses — no runtime errors.
• Verified smooth animations using whileInView with once: true.
• Checked cross-browser rendering (Chrome, Firefox).

Demo

• Added Bento-style UI screenshot.

• Added grid view demo.

Screen.Recording.2025-12-11.145511.1.mp4

• Verified mobile responsiveness.

Environment and Dependencies

• New Dependencies: None
• Configuration Changes: None

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have added visual evidence for UI updates
• I have tested on mobile & desktop
• I have added safe data checks
• Build passes without errors

[devlopharsh]

@amaan-bhati @Achanandhi-M
Hey there !!
i have raised a PR that is waiting for your review ! please review it and please acknowledge !!