Fixes #3084: Add FeaturedPosts and LatestPosts components with Bento-style layout

[Gouravjaat07]

Related Tickets & Documents

Fixes: #3084

Description

This PR improves the blog homepage by implementing a clear content hierarchy and modern post layouts. Key updates include:

• Added FeaturedPosts section to highlight important blogs.
• Added LatestPosts section with a responsive card grid for recent posts.
• Implemented Bento-style post cards in index.tsx and integrated them into both components.
• Each card displays image, title, short description, author, and read time.
• Styled components using Tailwind CSS and shadcn/ui, ensuring a clean, modern, and responsive design for both desktop and mobile.

Overall improvement in user experience and post discoverability.

• User Experience: Enhanced homepage navigation and readability with responsive Bento-style cards, modern styling, and clear content hierarchy for smooth browsing on all devices.
• Post Discoverability: Improved visibility of important and recent posts through Featured and Latest sections, making it easier for users to find and engage with content.

Changes

• Created FeaturedPosts and LatestPosts components.
• Implemented reusable Bento-style card layout for posts.
• Updated index.tsx to use the new components with proper data.
• Applied responsive styling for desktop and mobile views.

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

• 1️⃣ Install dependencies
  npm install
• 2️⃣ Copy environment variables
  cp .env.local.example .env.local
• 3️⃣ Start local development server
  npm run dev
• Verified homepage layout, responsive Bento-style cards, and proper display of images, titles, authors, and read times on desktop and mobile.

Demo

1. Video showing after issue fix

Keploy_UI.Improvement.mp4

2. Responsiveness across mobile, tablet and desktop screens

Blog-website_Responsiveness.mp4

Environment and Dependencies

• New Dependencies: npm package, npx tailwindcss init -p, shadcn/ui components (used for cards)
• 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 made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes

[Gouravjaat07]

Hi @amaan-bhati 👋,
I’ve completed the implementation for issue #3084, adding FeaturedPosts and LatestPosts components with Bento-style cards to enhance the blog homepage hierarchy and user experience.

Kindly review my PR when you get a chance. Thank you!

[amaan-bhati]

Hey @Gouravjaat07 thanks for raising this pr, can you please add a preview /screenshot before I do the final review on my local?

[Gouravjaat07]

Sure sir @amaan-bhati ! Here's the preview of the updated section 👇

Keploy_UI.Improvement.mp4

[Gouravjaat07]

I have read the CLA Document and I hereby sign the CLA

[Gouravjaat07]

Hey Sir @amaan-bhati ! Here's the screenshot of the updated section 👇

• FeaturedPosts : -

• LatestPosts :-

[Gouravjaat07]

Hi @amaan-bhati sir, I’ve completed this PR #191 (Add FeaturedPosts and LatestPosts components with Bento-style layout).
All checks have passed ✅.
Please review it when you get a chance. Thank you!

[amaan-bhati]

Hey @Gouravjaat07 thanks for raising the pr, its great that you added the featuredposts as well as the latestposts component but i think the bento grid part is still missing here, the cards are very simple and need a better styling, even ig you cant style it end to end, you should definitely try to make bento grid cards for both the components.

[Gouravjaat07]

okay sir @amaan-bhati i got it.

[Gouravjaat07]

Hey @amaan-bhati , I’ve adjusted the FeaturedPosts component—do you think it now follows a Bento-style card layout? If yes, I’ll go ahead and adjust LatestPosts in the same way.

FeaturedPosts: -