I'll create a blog section with a carousel and detailed blog pages. Let's implement this with Next.js App Router.

This implementation creates a blog section with a carousel and detailed blog pages. Here's what I've built:

1. Main Page (app/page.tsx):

   • Displays a header with "Blog Post" title and "Blog and News" subtitle
   • Shows a carousel of blog posts

2. Blog Carousel Component:

   • Horizontal scrolling carousel with left/right navigation arrows
   • Each blog card shows an image, title, excerpt, and "Read Now" button
   • Clicking on a blog post or its "Read Now" button navigates to the detailed page

3. Blog Detail Page (app/blog/[slug]/page.tsx):

   • Shows the full blog post with title, date, reading time, and content
   • Displays a large cover image
   • Includes a "Back to Blog" button to return to the main page
   • Shows tags related to the blog post

4. Data Handling:

   • Mock data for blog posts with realistic cleaning service content
   • Functions to fetch all posts or a specific post by slug
   • Type definitions for blog post structure

The carousel is fully responsive and works on mobile devices. The navigation arrows allow users to scroll through blog posts, and clicking on any post will take them to the detailed view.

I'll update the carousel to show exactly 4 blog posts at a time on desktop screens. Let me modify the component:

I've updated the blog carousel to show exactly 4 blog posts at a time on desktop screens. Here are the key changes:

1. Responsive Display:

   • Shows 4 posts on large screens (1280px and above)
   • Shows 3 posts on medium-large screens (1024px to 1280px)
   • Shows 2 posts on medium screens (640px to 1024px)
   • Shows 1 post on small screens (below 640px)

2. Improved Navigation:

   • The previous/next buttons now move the carousel by the number of visible posts
   • This creates a cleaner pagination experience where you see completely new posts with each click

3. Dynamic Width Calculation:

   • Each post card's width is calculated based on the number of visible posts
   • This ensures the posts fit perfectly within the container with proper spacing

4. Enhanced Responsiveness:

   • Added a resize listener to adjust the number of visible posts when the screen size changes
   • The carousel automatically adapts to different screen sizes

The carousel now provides a better user experience with exactly 4 posts visible at once on desktop, while maintaining responsiveness on smaller devices.