Section Intro

Heroes

About

A centered heading block with an optional subtitle and one or two description paragraphs, used to introduce a page section.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Section Intro to your project and fits it to your theme.

Code

How Section Intro is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SectionIntro } from "@/components/ui/section-intro";

export default function SectionIntroDemo() {
  return (
    <div className="bg-background py-16 px-4">
      <SectionIntro
        title="Business Broadband"
        subtitle="Choosing the right type of internet broadband to support your business."
        description="Our fast and reliable connections keep you operating at all times. And when it comes to connectivity, the faster the better right?"
        secondaryDescription="Our team of business broadband specialists are here to deliver the right network and internet solutions for your business."
      />
    </div>
  );
}