BP Centered Hero (Editorial Logo + CTA)

Calm centered editorial hero: large brand logo, single-sentence headline (max 20ch), generous subhead, dark primary CTA + secondary text link, micro-copy guarantee strip below. Zero JS. Extracted from the Beautiful Possibilities /bp2 production landing page.

Preview

Open in new tab

Source

tsx

export interface BpCenteredHeroProps {
  logoSrc?: string;
  logoAlt?: string;
  headline?: string;
  subhead?: string;
  primaryCta?: { label: string; href: string };
  secondaryLink?: { label: string; href: string };
  microCopy?: string;
}

export default function BpCenteredHero({
  logoSrc = "/heroes/bp/logo.png",
  logoAlt = "Beautiful Possibilities",
  headline = "Your website should move as fast as your ideas.",
  subhead = "I rebuild WordPress sites using AI and a modern web stack — so you can launch new pages, offers, and experiments the same day you think of them. Faster. Safer. Actually yours.",
  primaryCta = { label: "Get my free site review", href: "#" },
  secondaryLink = { label: "See how it works", href: "#how-it-works" },
  microCopy = "10-day migrations · 30-day rollback guarantee · Zero lock-in, ever",
}: BpCenteredHeroProps) {
  return (
    <section className="px-6 py-20 lg:py-28 bg-white text-slate-900">
      <div className="mx-auto max-w-[1040px] text-center">
        <img
          src={logoSrc}
          alt={logoAlt}
          width={144}
          height={144}
          className="h-28 sm:h-36 w-auto mx-auto mb-12 sm:mb-16"
          loading="eager"
          fetchPriority="high"
          decoding="async"
        />
        <h1 className="font-medium text-[32px] sm:text-[44px] lg:text-[52px] leading-[1.05] tracking-[-0.02em] text-slate-900 max-w-[20ch] mx-auto">
          {headline}
        </h1>
        <p className="mt-8 text-[17px] sm:text-[18px] font-normal leading-[1.6] text-slate-700 max-w-[58ch] mx-auto">
          {subhead}
        </p>
        <div className="mt-10 flex flex-wrap items-center justify-center gap-x-7 gap-y-4">
          <a
            href={primaryCta.href}
            className="inline-flex items-center gap-2 bg-slate-900 text-white px-7 py-3.5 text-[15px] font-medium rounded-md transition-opacity hover:opacity-90"
          >
            {primaryCta.label}
            <span aria-hidden="true" className="text-[0.9em]">↗</span>
          </a>
          <a
            href={secondaryLink.href}
            className="inline-flex items-center gap-1.5 text-[15px] font-normal text-slate-700 hover:text-slate-900 transition-colors"
          >
            {secondaryLink.label}
            <span aria-hidden="true">→</span>
          </a>
        </div>
        <p className="mt-10 text-[13px] font-normal text-slate-500 leading-[1.5]">
          {microCopy}
        </p>
      </div>
    </section>
  );
}

Claude Code Instructions

CLI Install

npx innovations add bp-centered

Where to use it

Use this when you want maximum focus on a single sentence + brand identity. Especially good for personal brands, services, agencies, or anywhere you need a calm centered hero with no visual competition. In Astro: --- import BpCenteredHero from '../components/innovations/heroes/bp-centered'; --- <BpCenteredHero /> In Next.js: import BpCenteredHero from '@/components/innovations/heroes/bp-centered'; No client:* required — server-renderable, ships zero JS. CUSTOMIZATION: <BpCenteredHero logoSrc="/your-logo.png" headline="Your single-sentence promise." subhead="Two-or-three-sentence elaboration..." primaryCta={{ label: "Get started", href: "/start" }} secondaryLink={{ label: "How it works", href: "#how" }} microCopy="Trust signal · Trust signal · Trust signal" /> LOGO: replace logoSrc with your brand. The current 28-36 height (h-28 sm:h-36) reads as a strong, intentional brand statement — not a tiny corner mark. Keep aspect ratio similar (square-ish or slightly tall). HEADLINE: max-w-[20ch] keeps the headline at ~20 characters per line for that "wraps at the right beat" editorial feel. If your headline is longer, it'll naturally wrap; the constraint just gives line breaks rhythm. PALETTE: pure white bg + slate text + slate-900 CTA. To rebrand, swap the slate Tailwind classes for your accent + body palette.