Image Carousel Hero

A hero with a rotating image carousel next to a headline and CTA. Shows several product shots or screens at the top of a landing page in turn.

import { useState, useEffect } from 'react';

import { Button } from '@/components/ui/button';
import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';

export default function ImageCarouselHero() {
  const images = [
    {
      src: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
      alt: 'Team collaborating in a modern office space',
    },
    {
      src: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
      alt: 'Designer working on a digital interface',
    },
    {
      src: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
      alt: 'Modern workspace with digital devices',
    },
  ];

  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 5000);

    return () => clearInterval(interval);
  }, [images.length]);

  const goToNextImage = () => {
    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  const goToPreviousImage = () => {
    setCurrentImageIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    );
  };

  return (
    <div className="relative min-h-[600px] overflow-hidden">
      {/* Image Carousel */}
      <div className="absolute inset-0">
        {images.map((image, index) => (
          <div
            key={index}
            className={`absolute inset-0 transition-opacity duration-1000 ${
              index === currentImageIndex ? 'opacity-100' : 'opacity-0'
            }`}
          >
            <img
              src={image.src}
              alt={image.alt}
              className="object-cover"
            />
            <div className="absolute inset-0 bg-black/40"></div>
          </div>
        ))}

        {/* Navigation Arrows */}
        <button
          onClick={goToPreviousImage}
          className="bg-background/30 hover:bg-background/50 absolute top-1/2 left-4 z-20 hidden -translate-y-1/2 rounded-full p-2 backdrop-blur-sm transition-colors md:block"
          aria-label="Previous image"
        >
          <ChevronLeft className="h-6 w-6 text-white" />
        </button>

        <button
          onClick={goToNextImage}
          className="bg-background/30 hover:bg-background/50 absolute top-1/2 right-4 z-20 hidden -translate-y-1/2 rounded-full p-2 backdrop-blur-sm transition-colors md:block"
          aria-label="Next image"
        >
          <ChevronRight className="h-6 w-6 text-white" />
        </button>

        {/* Indicators */}
        <div className="absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-2">
          {images.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentImageIndex(index)}
              className={`h-2.5 w-2.5 rounded-full ${
                index === currentImageIndex
                  ? 'bg-white'
                  : 'bg-white/50 hover:bg-white/80'
              } transition-colors`}
              aria-label={`Go to image ${index + 1}`}
            />
          ))}
        </div>
      </div>

      {/* Content */}
      <div className="relative z-10 container mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-24 text-center md:px-6 md:py-32 2xl:max-w-[1400px]">
        <div className="max-w-3xl space-y-8">
          <div className="space-y-4">
            <div className="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm">
              <span>Launching Soon</span>
            </div>
            <h1 className="text-primary-foreground dark:text-primary text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
              Build exceptional digital experiences
            </h1>
            <p className="text-primary-foreground dark:text-primary text-xl">
              Our platform helps you create stunning websites and applications
              with ease, designed to engage your audience and drive results.
            </p>
          </div>

          <div className="flex flex-col justify-center gap-4 sm:flex-row">
            <Button
              size="lg"
              asChild
              variant="secondary"
              className="bg-primary-foreground text-primary dark:bg-primary dark:text-primary-foreground"
            >
              <a href="#">
                Get Started
                <ArrowRight className="ml-2 h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Image Carousel Hero fills the full viewport with a rotating full-bleed photo. Three images cycle automatically every five seconds, each dimmed by a dark overlay so the foreground copy stays legible. Centered over that backdrop sits a small frosted pill badge, a large headline, a supporting paragraph, and a single call-to-action button. Left and right arrow buttons appear on wider screens so visitors can step through the images manually, and a row of dot indicators at the bottom edge shows which slide is active and lets users jump directly to any image.

Every text element, the badge label, headline, body copy, and button are independent strings you can rewrite freely. The image array holds three entries by default, but you can add or remove slides and the arrows and indicators update automatically. The CTA renders as a single button; a second button can be added to the flex row without layout changes.

When to use

Reach for this block when the visual story of a space or environment matters as much as the headline. It suits a real estate marketplace landing page where cycling through lifestyle photography of properties or neighborhoods does more persuasion than a single static shot. Compared to a split layout that pins one image beside the text, the full-bleed carousel commands the whole viewport and gives the content room to breathe.

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

Before

An Announcement Banner to surface a new listing alert or open-house notice above the fold

After

A Feature Sections block to break down the platform benefits once visitors scroll past the hero
A Testimonials block to back up the pitch with buyer or seller quotes

What you can customize

The carousel, copy, and call to action are each independently adjustable without touching the others:

Slide images. Swap any of the three Unsplash sources for your own photography; each entry takes a src and an alt string so accessibility is maintained per image.
Badge and headline. The frosted pill badge carries a short status label ("Launching Soon" in the demo) and the headline sits beneath it; rewrite both to match your campaign without any layout side effects.
Auto-advance interval. The five-second timer is a single constant in the effect; raising or lowering it changes how long each image holds before the next fades in.

Tip: use photos with a clear subject near the center so the dark overlay and centered text do not compete with busy edges.

About this block

When to use

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

Before

An Announcement Banner to surface a new listing alert or open-house notice above the fold

After

A Feature Sections block to break down the platform benefits once visitors scroll past the hero
A Testimonials block to back up the pitch with buyer or seller quotes

What you can customize

The carousel, copy, and call to action are each independently adjustable without touching the others:

Slide images. Swap any of the three Unsplash sources for your own photography; each entry takes a src and an alt string so accessibility is maintained per image.
Badge and headline. The frosted pill badge carries a short status label ("Launching Soon" in the demo) and the headline sits beneath it; rewrite both to match your campaign without any layout side effects.
Auto-advance interval. The five-second timer is a single constant in the effect; raising or lowering it changes how long each image holds before the next fades in.

Tip: use photos with a clear subject near the center so the dark overlay and centered text do not compete with busy edges.

Image Carousel Hero

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize