Banner With Background

A full width banner with a background image, headline, and button. Anchors a campaign message across the top or bottom of any marketing page.

import { Button } from '@/components/ui/button';

export default function BannerWithBackgroundCTA() {
  return (
    <>
      {/* Banner CTA Section */}
      <div className="bg-primary text-primary-foreground relative overflow-hidden py-16 md:py-24">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
          <img
            src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3"
            alt="Abstract digital technology background"
            className="object-cover opacity-20"
          />
        </div>

        <div className="relative z-10 container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
          <div className="mx-auto max-w-2xl space-y-6 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Ready to transform your business?
              </h2>
              <p className="text-primary-foreground/80 mx-auto max-w-[600px] md:text-xl">
                Join our platform today and see immediate results.
              </p>
            </div>
            <div className="space-x-4">
              <Button size="lg" variant="secondary" asChild>
                <a href="#">Get Started</a>
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-primary-foreground hover:bg-primary-foreground/10 text-primary-foreground hover:text-primary-foreground bg-transparent"
                asChild
              >
                <a href="#">Learn More</a>
              </Button>
            </div>
          </div>
        </div>
      </div>
      {/* End Banner CTA Section */}
    </>
  );
}

About this block

Banner With Background is a full width call to action panel. A muted background image spans the entire section behind a solid primary color fill, giving the surface visual depth without competing with the text. Centered on top of that are a large headline, a short supporting line, and two side by side buttons: a solid secondary button for the primary action and a ghost outline button for a secondary path.

The headline, supporting copy, and button labels are the only text elements, so each one can be rewritten independently. The two buttons are separate links and either can be removed without breaking the layout. The background image swap is straightforward and the primary color fill that overlays it means almost any image will work at the same low opacity.

When to use

Reach for this block when you need a strong visual break that signals a conversion moment without building a full hero. It works well as the closing section of a feature page or a mid page interrupt on a long landing page for an AI assistant product where the goal is to move a curious reader toward a trial or a demo. Because the background image is decorative and heavily subdued, this layout reads faster than an image with text block and makes the buttons the clear focus.

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

Before

A feature section to establish what the product does before asking for the click
A testimonials block so social proof lands just before the banner

After

A simple centered block if you want a quieter closing prompt after the bold banner
A footer to complete the page

What you can display

This panel is built for a direct conversion ask. A few content directions that work well in this frame:

Trial or signup prompt. Use the headline to name the outcome the reader gets and the primary button to start the free tier or request access.
Demo request. Point the primary button at a calendar link and the outline button at a product tour video so readers with different levels of intent both have a path.
Campaign or launch moment. Swap the copy to announce a new feature release and use the two buttons to send readers to the changelog and the upgrade page.

Tip: keep the headline to one short sentence and the supporting line under twelve words so the pair reads as a single glance at every viewport width.