Blog Sections

A collection of beautiful, animated blog section blocks for your websites. Built with Framer Motion for smooth animations, responsive layouts, and light/dark theme support.

Grid Layout

A classic responsive grid layout with cards, author avatars, and staggered entrance animations.

Features:

• 3-column responsive grid
• Category badges
• Author avatars and read time
• Staggered entrance animations
• Image hover zoom effect
• "View All" CTA button

Featured Layout

A hero-style layout with one large featured post and smaller side posts.

Features:

• Large featured hero post
• Gradient overlay on image
• Author info with role
• Side post list with thumbnails
• Bookmark button with hover effect
• Date and read time metadata

Minimal List

A clean, typography-focused list layout with numbered entries.

Features:

• Numbered post entries
• Clean typography focus
• Arrow animation on hover
• Minimal aesthetic
• Border dividers
• "Load more" button

Magazine Layout

A multi-section magazine-style layout with trending sidebar and latest posts.

Features:

• Large main featured article
• Trending sidebar with view counts
• Percentage trend indicators
• Secondary post row
• Latest posts widget
• Multi-section design

Cards with Filters

Interactive cards with category filtering and colorful gradient hover effects.

Features:

• Category filter buttons
• Animated filter transitions
• Gradient overlay on hover
• Arrow icon reveal
• Tag badges on images
• Shadow hover effects

List Layout

A detailed list layout with horizontal cards, tags, and action buttons.

Features:

• Horizontal card layout
• Full metadata display
• Hashtag styling
• Bookmark and share buttons
• Numbered pagination
• Image hover zoom

Usage

All blog sections are built with React and Framer Motion. Install the required dependencies:

npm install framer-motion lucide-react

Import and use any blog section:

import BlogGrid from '@/components/blocks/blog/blog-grid';

export default function BlogPage() {
  return (
    <main>
      <BlogGrid />
    </main>
  );
}

Customization

Each blog section is fully customizable:

• Posts Data: Replace the sample posts array with your actual blog data
• Images: Update image URLs to your hosted images or use a CMS
• Categories: Modify category names and colors
• Animations: Adjust timing and effects in Framer Motion props
• Styling: Update colors and spacing with Tailwind classes

Blog Section Comparison

Integration Tips

1. CMS Integration: Replace static posts with data from your CMS (Contentful, Sanity, Strapi)
2. Image Optimization: Use Next.js Image component for optimized images
3. Pagination: Connect pagination to your API or use infinite scroll
4. Categories: Link category filters to actual category pages
5. Read Time: Calculate read time based on actual content length
6. Author Data: Pull author information from your user/author database