Sticky CTA

A banner that stays fixed as the visitor scrolls, keeping a button always in view. Useful for long portfolio pages where the offer should stay reachable.

import { useState, useEffect } from 'react';

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

export default function PortfolioCTAStickyBanner() {
  const [isVisible, setIsVisible] = useState(true);
  const [isScrolled, setIsScrolled] = useState(false);

  // Handle scroll to toggle sticky behavior
  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      setIsScrolled(scrollPosition > 300);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  if (!isVisible) return null;

  return (
    <div
      className={`fixed right-0 bottom-0 left-0 z-50 transform transition-transform duration-300 ${isScrolled ? 'translate-y-0' : 'translate-y-full md:translate-y-0'}`}
    >
      <div className="bg-background border-border border-t px-4 py-3 shadow-lg md:py-4">
        <div className="container mx-auto">
          <div className="flex flex-col items-center justify-between gap-3 md:flex-row">
            {/* Close button (mobile only) */}
            <button
              onClick={() => setIsVisible(false)}
              className="text-muted-foreground hover:text-foreground absolute top-2 right-2 p-1 md:hidden"
              aria-label="Close banner"
            >
              <X className="h-4 w-4" />
            </button>

            <div className="flex-1 text-center md:text-left">
              <p className="text-sm font-medium md:text-base">
                Taking on new projects for Q3 2023.{' '}
                <span className="hidden md:inline">
                  Limited spots available.
                </span>
              </p>
            </div>

            <Button
              asChild
              size="sm"
              variant="default"
              className="group w-full md:w-auto"
            >
              <a href="#">
                Book Your Spot
                <ArrowRight className="ml-1 h-3 w-3 transition-transform group-hover:translate-x-1" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Sticky CTA is a fixed bottom bar that rides with the visitor as they scroll. It holds a single line of copy on the left and a button with an arrow icon on the right. On mobile the two stack vertically and a small dismiss button appears in the top corner so the bar does not block the page permanently. On wider screens the bar sits flat along the bottom edge and the dismiss control is hidden. After the visitor scrolls past 300 pixels the bar slides into view on mobile; on desktop it is present from the first moment.

The copy, the button label, and the scroll threshold are all yours to adjust. The dismiss logic and the scroll listener are self-contained, so you can swap the message or change the button destination without touching either behavior.

When to use

Reach for this block when your portfolio page is long and your core offer needs to stay in reach without pulling the visitor away from the work samples they are reading. It suits a creative agency or studio site where a visitor may scroll through several case studies before deciding to get in touch. The persistent bar keeps the booking or inquiry action visible without interrupting the reading flow the way a modal would.

A natural flow around it on a Portfolio page:

Before

A hero showcase to open the page and introduce the studio before the bar appears
Project Displays as the main scrolling content the bar rides alongside

After

A Contact Sections block at the bottom for visitors who dismiss the bar and scroll to the end instead

What you can customize

The bar has three moving parts you will likely want to tailor:

The availability message. Replace the demo copy with your own availability window or current offer so the bar reflects what is actually true right now.
The button label and destination. Point the button at a booking page, a contact form, or an email link depending on how your studio handles initial inquiries.
The scroll trigger depth. Raise or lower the pixel threshold to control exactly how far a mobile visitor scrolls before the bar slides in, giving earlier or later reinforcement.

Tip: keep the message to a single short sentence so it reads cleanly at the small text size and does not wrap on narrow phones.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

A hero showcase to open the page and introduce the studio before the bar appears
Project Displays as the main scrolling content the bar rides alongside

After

A Contact Sections block at the bottom for visitors who dismiss the bar and scroll to the end instead

What you can customize

The bar has three moving parts you will likely want to tailor:

The availability message. Replace the demo copy with your own availability window or current offer so the bar reflects what is actually true right now.
The button label and destination. Point the button at a booking page, a contact form, or an email link depending on how your studio handles initial inquiries.
The scroll trigger depth. Raise or lower the pixel threshold to control exactly how far a mobile visitor scrolls before the bar slides in, giving earlier or later reinforcement.

Tip: keep the message to a single short sentence so it reads cleanly at the small text size and does not wrap on narrow phones.

Sticky 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