blockchain/apps/portal/components/marketing/page-hero.tsx

import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

interface PageHeroProps {
  eyebrow?: string;
  title: string;
  description: string;
  children?: ReactNode;
  className?: string;
}

export function PageHero({
  eyebrow,
  title,
  description,
  children,
  className,
}: PageHeroProps) {
  return (
    <section
      className={cn(
        "bg-[radial-gradient(ellipse_at_top_left,rgb(149_32_130_/_0.12),transparent_55%),radial-gradient(ellipse_at_bottom_right,rgb(0_157_99_/_0.08),transparent_50%)]",
        className,
      )}
    >
      <div className="mx-auto max-w-6xl px-5 py-16 lg:px-8 lg:py-24">
        {eyebrow ? (
          <p className="mb-4 text-xs font-medium uppercase tracking-[0.18em] text-accent-hover">
            {eyebrow}
          </p>
        ) : null}
        <h1 className="font-display max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-[3.25rem] lg:leading-[1.1]">
          {title}
        </h1>
        <p className="prose-measure mt-5 text-base leading-relaxed text-muted-foreground sm:text-lg">
          {description}
        </p>
        {children ? <div className="mt-8">{children}</div> : null}
      </div>
    </section>
  );
}