blogs page revamp

[elyashium]

[Feature Request] Redesign Blog Section for a More Visual and Immersive Reading Experience

Description

This issue addresses the need to redesign the main blog listing page (/blogs) and the individual blog post pages (/blogs/[id]). The current implementation is functional but lacks the visual appeal and thoughtful design needed to create an immersive and enjoyable reading experience for our club members and visitors.

The goal is to transform the blog into a visually rich and content-focused section of the website, where the design enhances the stories being told, not distracts from them. This includes a better layout for browsing posts and a clean, focused reading view for individual articles, with clear attribution to the authors.

Objectives

• Create an Immersive Reading Environment: Redesign the blog post page to minimize distractions and prioritize readability through superior typography and layout.
• Enhance Visual Language: Introduce a strong visual identity for the blog with high-quality imagery, modern card layouts, and a professional aesthetic.
• Promote Club Authors: Integrate prominent author attribution and bio sections to connect readers with the writers and showcase the talent within our club.
• Improve User Experience: Ensure the blog is easy to navigate, responsive, and performs well, especially with image-heavy content.

---

1. Improvements for the Main Blog Listing Page (/blogs)

This page should feel like a modern, engaging digital magazine front page, encouraging users to discover and read articles.

a. Blog Card Redesign

• Visual-First Approach: Each blog card must feature a prominent, high-quality banner image from the article.
• Clear Information Hierarchy: The card should clearly display:
  • Blog Post Title
  • Author's Name and a small profile picture
  • Publication Date
  • A brief, compelling excerpt (1-2 lines)
  • Tags or Categories (optional but recommended)

b. Layout Improvements

• Featured Post Section: The top of the page should feature the latest or a specially selected "Featured Post" in a larger, more prominent card or banner.
• Grid Layout: The remaining posts should be displayed in a modern grid or masonry layout that is visually interesting and responsive.

2. Redesign of the Individual Blog Post Page (/blogs/[id])

This page is critical for the reading experience. The design should be clean, elegant, and focused entirely on the content.

a. Immersive Content Layout

• Focused Reading Area: The main body of the article should be presented in a single, centered column with an optimal line width for reading (typically 60-75 characters).
• Hero Section: The top of the page should feature a full-width hero or banner image with the blog post title, author's name, and publication date elegantly overlaid.
• Superior Typography: Special attention must be paid to font choice, font size, line height, and paragraph spacing to ensure maximum readability and reduce eye strain.

b. Author Attribution and Bio

• Prominent Author Info: The author's name should be clearly visible at the top of the article, near the title.
• Dedicated Author Bio Section: At the end of the article, include a dedicated "About the Author" component. This card should contain:
  • Author's profile picture.
  • Author's full name.
  • A short, 2-3 sentence biography.
  • Icon-based links to their relevant social/professional profiles (e.g., LinkedIn, GitHub, personal website, email via mailto:).

Implementation Notes

• Performance: All images must be optimized for the web to ensure fast page load times. Consider using modern image formats (like WebP) and lazy loading.
• Responsiveness: Both the listing and detail pages must be fully responsive, providing an excellent reading experience on mobile devices.
• Data Structure: The data model for a blog post should be updated to include fields for a bannerImageUrl, authorId (linking to an author model), and an excerpt.