8
Switch language to English

Header Section

السابقالتالي

Reusable header section component.

interface HeaderSectionProps {
  label?: string;
  title: string;
  subtitle?: string;
}

export function HeaderSection({ label, title, subtitle }: HeaderSectionProps) {
  return (
    <div className="flex flex-col items-center text-center">
      {label ? (
        <div className="text-gradient_indigo-purple mb-4">
          {label}
        </div>
      ) : null}
      <h2 className="font-heading">
        {title}
      </h2>
      {subtitle ? (
        <p className="mt-6 text-balance lead">
          {subtitle}
        </p>
      ) : null}
    </div>
  );
}

Installation

pnpm dlx codebase add header-section

Usage

import { HeaderSection } from "@/components/atom/header-section"
<HeaderSection />