Minimalist CTA

A spare hero with a short headline and one prominent call to action button. Use it when you want visitors to reach your work or contact fast.

import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";

export default function PortfolioHeroMinimalistCta() {
  return (
    <div className="bg-background">
      <div className="container mx-auto grid min-h-[75vh] place-items-center px-4 py-16 sm:py-24 md:px-6 2xl:max-w-[1400px]">
        <div className="grid gap-8 text-center md:max-w-3xl">
          <div className="space-y-4">
            <div className="bg-primary mx-auto h-0.5 w-12" />

            <h1 className="scroll-m-20 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
              <span className="block">Design is thinking</span>
              <span className="mt-1 block">
                made <span className="text-primary">visual</span>
              </span>
            </h1>
          </div>

          <p className="text-muted-foreground mx-auto max-w-xl text-lg">
            Freelance designer creating minimal, purposeful experiences for
            digital products that connect brands with their audience.
          </p>

          <div className="mx-auto">
            <Button size="lg" className="group gap-2 px-8 text-base">
              View Portfolio
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

          <div className="mt-16 grid gap-8 border-t pt-8 sm:grid-cols-3">
            <div className="text-center">
              <p className="text-muted-foreground text-sm font-medium">
                EXPERTISE
              </p>
              <p className="mt-1 font-medium">UI/UX Design</p>
            </div>

            <div className="text-center">
              <p className="text-muted-foreground text-sm font-medium">
                PROJECTS
              </p>
              <p className="mt-1 font-medium">100+ Completed</p>
            </div>

            <div className="text-center">
              <p className="text-muted-foreground text-sm font-medium">
                EXPERIENCE
              </p>
              <p className="mt-1 font-medium">8+ Years</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Minimalist CTA is a centered hero that leads with a thin horizontal rule, a large two-line headline with one word highlighted in the brand color, and a short paragraph of supporting copy. Below the copy sits a single prominent button with an animated arrow icon. A three-column stat strip sits beneath a dividing line at the bottom of the section, each column showing a small uppercase label and a one-line value such as expertise, project count, or years of experience.

All the text blocks are independent of one another, so you can rewrite the headline, swap the paragraph, relabel any of the three stat columns, or remove the stat strip entirely without changing the layout. The button label and destination are the only call to action, keeping the section uncluttered.

When to use

Reach for this block when the goal is a fast, frictionless handoff to a catalog or contact page. It works well as the opening section of a brand or studio site where the visitor already has intent, such as a direct-to-consumer storefront arriving from a campaign link, and the next step should be obvious within the first scroll. Compared to the split layout or carousel alternatives in this group, it removes every visual distraction so the button gets the full weight of the fold.

A natural flow around it on a Portfolio page:

Before

A persistent navigation bar or header to anchor the brand before the hero loads

After

Featured Work Highlights to immediately back up the headline claim with real project examples
Core Services Overview to expand on the expertise stat with concrete offerings

What you can customize

Three parts of the block invite direct replacement:

The headline and accent word. The two-line heading reads clearly at any length; swap the highlighted word to match the brand's core promise.
The stat strip. Each of the three columns takes a label and a value, so replace them with numbers that are meaningful to the business, such as average order value, countries served, or satisfaction score.
The button label and target. Point the call to action at a product catalog, a lookbook, or a contact form depending on where you want traffic to land first.

Tip: the stat strip works best when all three values are comparable in length so the three columns stay visually balanced at every viewport width.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

A persistent navigation bar or header to anchor the brand before the hero loads

After

Featured Work Highlights to immediately back up the headline claim with real project examples
Core Services Overview to expand on the expertise stat with concrete offerings

What you can customize

Three parts of the block invite direct replacement:

The headline and accent word. The two-line heading reads clearly at any length; swap the highlighted word to match the brand's core promise.
The stat strip. Each of the three columns takes a label and a value, so replace them with numbers that are meaningful to the business, such as average order value, countries served, or satisfaction score.
The button label and target. Point the call to action at a product catalog, a lookbook, or a contact form depending on where you want traffic to land first.

Tip: the stat strip works best when all three values are comparable in length so the three columns stay visually balanced at every viewport width.

Minimalist CTA

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize