With Carousel

Feature highlights in a swipeable carousel, one slide per capability with copy and a visual. Fits many features into a small space without a long scroll.

import { Card, CardContent } from '@/components/ui/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import { Badge } from '@/components/ui/badge';
import { Bot, Cloud, Code, Lock } from 'lucide-react';

const features = [
  {
    title: 'AI Integration',
    description: 'Powerful AI capabilities built right into your workflow',
    icon: Bot,
    image: 'https://placehold.co/800x600/jpeg',
    benefits: [
      'Smart Automation',
      'Predictive Analytics',
      'Natural Language Processing',
    ],
  },
  {
    title: 'Cloud Infrastructure',
    description: 'Scale your application with cloud-native architecture',
    icon: Cloud,
    image: 'https://placehold.co/800x600/jpeg',
    benefits: ['Auto Scaling', 'Global CDN', 'High Availability'],
  },
  {
    title: 'Developer Experience',
    description: 'Built by developers, for developers',
    icon: Code,
    image: 'https://placehold.co/800x600/jpeg',
    benefits: ['Modern Stack', 'Great DX', 'Extensive Docs'],
  },
  {
    title: 'Enterprise Security',
    description: 'Bank-grade security for your applications',
    icon: Lock,
    image: 'https://placehold.co/800x600/jpeg',
    benefits: ['End-to-end Encryption', 'Role-based Access', 'Audit Logs'],
  },
];

export default function FeatureSectionWithCarousel() {
  return (
    <section className="container mx-auto space-y-8 px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="space-y-4 text-center">
        <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
          Powerful features for modern teams
        </h2>
        <p className="text-muted-foreground mx-auto max-w-[700px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
          Everything you need to build and scale your application
        </p>
      </div>

      <Carousel
        opts={{
          align: 'start',
          loop: true,
        }}
        className="mx-auto w-[87%]"
      >
        <CarouselContent className="-ml-2 md:-ml-4">
          {features.map((feature, index) => (
            <CarouselItem
              key={index}
              className="flex flex-col pl-2 md:basis-1/2 md:pl-4 lg:basis-1/3"
            >
              <Card className="relative flex flex-1 flex-col overflow-hidden p-0">
                <div className="relative aspect-video">
                  <img
                    src={feature.image}
                    alt={feature.title}
                    className="object-cover"
                  />
                  <div className="from-background/80 to-background/0 absolute inset-0 bg-gradient-to-t" />
                  <div className="absolute bottom-4 left-4">
                    <Badge variant="secondary" className="gap-1">
                      <feature.icon className="size-3" />
                      {feature.title}
                    </Badge>
                  </div>
                </div>
                <CardContent className="flex-1 p-6 pt-0">
                  <h3 className="mb-2 text-xl font-semibold">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground mb-4">
                    {feature.description}
                  </p>
                  <ul className="space-y-2">
                    {feature.benefits.map((benefit) => (
                      <li
                        key={benefit}
                        className="flex items-center gap-2 text-sm"
                      >
                        <div className="bg-primary size-1.5 rounded-full" />
                        {benefit}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </section>
  );
}

About this block

With Carousel opens with a centered heading and a supporting sentence, then hands control to a looping carousel. Each card in the carousel holds a 16:9 image with a labeled icon badge overlaid at the bottom left, followed by a title, a short description sentence, and a short bulleted list of three benefit points. Previous and next arrow buttons flank the track, and the carousel shows one card on mobile, two on medium screens, and three on large screens at once.

All four demo cards are independent entries in a plain array, so you can add or remove cards freely. The heading copy, the description copy, and every card title, description, image, icon, and benefit list are all separate values you can rewrite without touching the layout.

When to use

Reach for this block when a creative agency or studio needs to walk prospective clients through several distinct service areas without pushing them into a long vertical scroll. The carousel format keeps the page tight while giving each capability its own visual moment, which suits a services overview, a capabilities page, or a mid-page highlight section between a hero and a call to action. Where a static grid like Card Grid shows everything at once, the carousel invites interaction and works better when each feature needs a little breathing room.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to establish the brand before the feature detail
Feature Stats if you want to lead with proof before the service breakdown

After

A testimonials section so social proof follows the capability overview
A CTA section to convert interest generated by the carousel

What you can display

One carousel card per service or capability your agency offers, each paired with a representative image. A few other ways to use the frame:

Portfolio work by category. Swap the benefit list for project outcomes and use the image slot to show a campaign or brand result.
Tool or platform highlights. Place a screenshot or mockup in the image area and use the benefit bullets to call out three key differentiators for each tool.
Team specialisms. Dedicate one card per discipline, such as strategy, design, and production, so visitors understand the full range of skills on offer.

Tip: keep the benefit list to three short items per card so the cards stay close in height and the carousel track feels consistent.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to establish the brand before the feature detail
Feature Stats if you want to lead with proof before the service breakdown

After

A testimonials section so social proof follows the capability overview
A CTA section to convert interest generated by the carousel

What you can display

One carousel card per service or capability your agency offers, each paired with a representative image. A few other ways to use the frame:

Portfolio work by category. Swap the benefit list for project outcomes and use the image slot to show a campaign or brand result.
Tool or platform highlights. Place a screenshot or mockup in the image area and use the benefit bullets to call out three key differentiators for each tool.
Team specialisms. Dedicate one card per discipline, such as strategy, design, and production, so visitors understand the full range of skills on offer.

Tip: keep the benefit list to three short items per card so the cards stay close in height and the carousel track feels consistent.

With Carousel

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display