# Landing Hero

> A marketing hero with one message and two actions, in four layouts: beside a live preview, over a wide product plate, beside two overlapped fragments, or type alone.

A shadcn/ui block from the [@miseui](https://miseui.junsu4621.workers.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/miseui/landing-hero).

- Page, with a live preview: https://shadcn.exchange/r/miseui/landing-hero
- Screenshot: https://shadcn.exchange/shot/miseui/landing-hero/light.png
- Registry item: https://miseui.junsu4621.workers.dev/r/landing-hero.json
- Categories: blocks
- Listed: 2026-11-05, source last changed 2026-11-05

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/miseui/landing-hero.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `motion`
- Registry items: `utils`, `https://miseui.junsu4621.workers.dev/r/motion.json`, `https://miseui.junsu4621.workers.dev/r/badge.json`, `https://miseui.junsu4621.workers.dev/r/button.json`, `https://miseui.junsu4621.workers.dev/r/card.json`, `https://miseui.junsu4621.workers.dev/r/materialize.json`, `https://miseui.junsu4621.workers.dev/r/shimmer-text.json`, `https://miseui.junsu4621.workers.dev/r/streaming-text.json`, `https://miseui.junsu4621.workers.dev/r/thinking-orb.json`

## Files

### `registry/miseui/blocks/landing-hero.tsx`

```tsx
import type * as React from "react"
import { cn } from "@/registry/miseui/lib/utils"
import { LandingHeroCentered } from "./landing-hero-centered"
import { DEFAULT_COPY, HeroActions, HeroHeading, type LandingHeroAction, type LandingHeroCopyProps } from "./landing-hero-copy"
import { LandingHeroMinimal } from "./landing-hero-minimal"
import { LandingHeroOverlap } from "./landing-hero-overlap"
import { LandingHeroPreview } from "./landing-hero-parts"

type LandingHeroVariant = "split" | "centered" | "overlap" | "minimal"

interface LandingHeroProps extends LandingHeroCopyProps {
  /** `split` text beside a live preview, `centered` a claim over a wide product plate, `overlap` two fragments beside the text, `minimal` type only. */
  variant?: LandingHeroVariant
  /** Your product, live, built from real components, on `split` and `centered`. Null collapses it to the text alone. */
  preview?: React.ReactNode
  /** Two pieces of your product on `overlap`: the one behind, then the one in front. */
  fragments?: readonly [React.ReactNode, React.ReactNode]
}

function LandingHeroSplit({
  headline = DEFAULT_COPY.headline,
  headlineQuiet = DEFAULT_COPY.headlineQuiet,
  description = DEFAULT_COPY.description,
  primaryAction = DEFAULT_COPY.primaryAction,
  secondaryAction = DEFAULT_COPY.secondaryAction,
  preview = <LandingHeroPreview />,
  className,
  ...props
}: LandingHeroCopyProps & { preview?: React.ReactNode }) {
  const hasPreview = preview !== null
  return (
    <section data-slot="landing-hero" data-variant="split" className={cn("@container w-full bg-muted dark:bg-background", className)} {...props}>
      <div
        className={cn(
          "mx-auto grid max-w-7xl items-center gap-12 px-6 py-16 @5xl:px-8",
          hasPreview && "@4xl:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] @5xl:gap-16",
        )}
      >
        <div className="flex min-w-0 flex-col items-start gap-6">
          <HeroHeading headline={headline} quiet={headlineQuiet} className="@md:text-4xl @6xl:text-5xl" />
          <p className="max-w-md text-[15px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
          <HeroActions primary={primaryAction} secondary={secondaryAction} />
        </div>
        {hasPreview ? <div className="min-w-0">{preview}</div> : null}
      </div>
    </section>
  )
}

function LandingHero({ variant, preview, fragments, ...props }: LandingHeroProps) {
  switch (variant) {
    case "centered":
      return <LandingHeroCentered preview={preview} {...props} />
    case "overlap":
      return <LandingHeroOverlap fragments={fragments} {...props} />
    case "minimal":
      return <LandingHeroMinimal {...props} />
    default:
      return <LandingHeroSplit preview={preview} {...props} />
  }
}

export { LandingHero, LandingHeroPreview, type LandingHeroAction, type LandingHeroProps, type LandingHeroVariant }
```

### `registry/miseui/blocks/landing-hero-parts.tsx`

```tsx
import type * as React from "react"
import { useEffect, useState } from "react"
import { motion, useReducedMotion } from "motion/react"
import { Check, RotateCcw } from "lucide-react"
import { SPRING_DEFAULT } from "@/registry/miseui/lib/motion"
import { cn } from "@/registry/miseui/lib/utils"
import { Badge } from "@/registry/miseui/ui/badge"
import { Button } from "@/registry/miseui/ui/button"
import { Card } from "@/registry/miseui/ui/card"
import { Materialize } from "@/registry/miseui/ui/materialize"
import { ShimmerText } from "@/registry/miseui/ui/shimmer-text"
import { StreamingText } from "@/registry/miseui/ui/streaming-text"
import { ThinkingOrb, type OrbState } from "@/registry/miseui/ui/thinking-orb"

type PreviewPhase = "thinking" | "writing" | "done"

/** Long enough to notice the orb working, short enough that nobody waits on a marketing page. */
const THINKING_MS = 1400
const STREAM_CHARS_PER_SECOND = 70
const ROW_STAGGER_SECONDS = 0.08
const ROW_RISE_PX = 8

/** The theme's own hairline, so the grid stays this faint in every palette, and it fades before it reaches an edge. */
const GRID_STYLE: React.CSSProperties = {
  backgroundImage:
    "linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px)",
  backgroundSize: "32px 32px",
  maskImage: "radial-gradient(closest-side, black, transparent)",
}
/** Tinted from the ink, and off in dark mode, where a light-tinted shadow would read as a glow. */
const SOFT_SHADOW_CLASS =
  "shadow-[0_1px_2px_color-mix(in_oklab,var(--foreground)_6%,transparent),0_16px_32px_-16px_color-mix(in_oklab,var(--foreground)_16%,transparent)] dark:shadow-none"

const SUMMARY =
  "The team agreed to drop the $9 tier and move existing customers to Starter in January. Support gets a heads-up before the email goes out."

const ACTION_ITEMS = [
  { owner: "Priya", task: "Send the revised tiers to sales", due: "Thu" },
  { owner: "Tomas", task: "Draft the customer email", due: "Mon" },
  { owner: "Wen", task: "Brief support on the January move", due: "Dec 18" },
] as const

const ORB_BY_PHASE: Record<PreviewPhase, OrbState> = { thinking: "thinking", writing: "speaking", done: "idle" }
const STATUS_BY_PHASE: Record<PreviewPhase, string> = {
  thinking: "Reading the transcript",
  writing: "Writing the summary",
  done: "38 min call, 5 people",
}

function SummaryText({ phase, onDone }: { phase: PreviewPhase; onDone: () => void }) {
  return (
    <p className="grid text-[15px] leading-relaxed text-pretty">
      {/* The full text holds the height from the start, so the card does not grow as words arrive. */}
      <span className={cn("col-start-1 row-start-1", phase !== "done" && "invisible")}>{SUMMARY}</span>
      {phase === "writing" ? (
        // Off: a live region on a marketing page would read the sample aloud, unasked, letter by letter.
        <StreamingText aria-live="off" className="col-start-1 row-start-1" text={SUMMARY} speed={STREAM_CHARS_PER_SECOND} onDone={onDone} />
      ) : null}
    </p>
  )
}

function ActionRows({ done, reduceMotion }: { done: boolean; reduceMotion: boolean }) {
  return (
    <ul className="flex flex-col divide-y border-t">
      {ACTION_ITEMS.map((item, index) => (
        <motion.li
          key={item.owner}
          data-testid="preview-action-item"
          aria-hidden={!done}
          initial={false}
          animate={{ opacity: done ? 1 : 0, y: done || reduceMotion ? 0 : ROW_RISE_PX }}
          transition={reduceMotion ? { duration: 0 } : { ...SPRING_DEFAULT, delay: done ? index * ROW_STAGGER_SECONDS : 0 }}
          className="flex items-center gap-3 py-3 text-[13px] leading-relaxed"
        >
          <Badge variant="secondary" className="font-normal">
            {item.owner}
          </Badge>
          <span className="min-w-0 flex-1 text-pretty">{item.task}</span>
          <span className="shrink-0 text-muted-foreground">{item.due}</span>
        </motion.li>
      ))}
    </ul>
  )
}

/** Plays once, or again on request. It marks a real sequence, so it does not loop for decoration. */
function LandingHeroPreview({ className }: { className?: string }) {
  const reduceMotion = Boolean(useReducedMotion())
  const [played, setPlayed] = useState<PreviewPhase>("thinking")
  const phase = reduceMotion ? "done" : played
  const done = phase === "done"

  useEffect(() => {
    if (phase !== "thinking") return
    const id = window.setTimeout(() => setPlayed("writing"), THINKING_MS)
    return () => window.clearTimeout(id)
  }, [phase])

  return (
    <div data-slot="landing-hero-preview" className={cn("relative isolate pt-12 pb-4", className)}>
      <div aria-hidden="true" data-testid="preview-grid" className="absolute inset-0 -z-10" style={GRID_STYLE} />
      <Card
        aria-hidden="true"
        data-testid="preview-back-card"
        className={cn("absolute top-0 right-4 -z-10 h-24 w-2/3 flex-row justify-between gap-3 rounded-2xl bg-background dark:bg-card p-3 text-[13px] text-muted-foreground", SOFT_SHADOW_CLASS)}
      >
        <span>Transcript</span>
        <span>38:12</span>
      </Card>
      <Card className={cn("relative gap-4 rounded-2xl bg-background dark:bg-card p-6", SOFT_SHADOW_CLASS)}>
        <div className="flex items-center gap-3">
          <ThinkingOrb state={ORB_BY_PHASE[phase]} size={40} label={STATUS_BY_PHASE[phase]} />
          <div className="min-w-0 flex-1 leading-relaxed">
            <p className="text-[15px]">Weekly pricing review</p>
            <p className="text-[13px] text-muted-foreground">
              {phase === "thinking" ? <ShimmerText>{STATUS_BY_PHASE.thinking}</ShimmerText> : STATUS_BY_PHASE[phase]}
            </p>
          </div>
          {done && !reduceMotion ? (
            <Button variant="ghost" size="icon" aria-label="Replay the summary" onClick={() => setPlayed("thinking")}>
              <RotateCcw />
            </Button>
          ) : null}
        </div>
        <SummaryText phase={phase} onDone={() => setPlayed("done")} />
        <ActionRows done={done} reduceMotion={reduceMotion} />
      </Card>
      <Materialize show={done} origin="0% 100%" className="absolute bottom-0 left-4">
        <Badge variant="outline" className={cn("gap-2 bg-popover px-3 py-1 text-[13px] font-normal", SOFT_SHADOW_CLASS)}>
          <Check />
          Sent to 5 people
        </Badge>
      </Materialize>
    </div>
  )
}

export { ACTION_ITEMS, LandingHeroPreview, SUMMARY }
```

### `registry/miseui/blocks/landing-hero-copy.tsx`

```tsx
import type * as React from "react"
import { ArrowRight } from "lucide-react"
import { cn } from "@/registry/miseui/lib/utils"
import { Button, type ButtonProps } from "@/registry/miseui/ui/button"

interface LandingHeroAction {
  label: string
  /** Renders a real link, so it can be opened in a new tab and read by crawlers. */
  href?: string
  onClick?: () => void
}

interface LandingHeroCopyProps extends Omit<React.ComponentProps<"section">, "title"> {
  /** With headlineQuiet, two lines at most: around 50 characters. A third line pushes the buttons down and the message apart. */
  headline?: string
  /** Continues the headline in the same size, one tone quieter. */
  headlineQuiet?: string
  /** One sentence, under 20 words. */
  description?: string
  primaryAction?: LandingHeroAction
  /** Null leaves one button, for a page with a single thing to do. */
  secondaryAction?: LandingHeroAction | null
}

const DEFAULT_COPY = {
  headline: "Calls that end in a plan.",
  headlineQuiet: "Written before you leave.",
  description: "It listens to the call, writes down who owns what, and sends it to everyone who was there.",
  primaryAction: { label: "Try it on your next call" },
  secondaryAction: { label: "See a sample summary" },
} as const

function HeroAction({ action, variant, children }: { action: LandingHeroAction; variant: ButtonProps["variant"]; children?: React.ReactNode }) {
  if (action.href) {
    return (
      <Button asChild size="lg" variant={variant}>
        <a href={action.href} onClick={action.onClick}>
          {action.label}
          {children}
        </a>
      </Button>
    )
  }
  return (
    <Button size="lg" variant={variant} onClick={action.onClick}>
      {action.label}
      {children}
    </Button>
  )
}

function HeroActions({ primary, secondary, className }: { primary: LandingHeroAction; secondary: LandingHeroAction | null; className?: string }) {
  return (
    <div className={cn("mt-2 flex flex-wrap gap-3", className)}>
      <HeroAction action={primary} variant="default">
        <ArrowRight />
      </HeroAction>
      {secondary ? <HeroAction action={secondary} variant="ghost" /> : null}
    </div>
  )
}

function HeroHeading({ headline, quiet, className }: { headline: string; quiet?: string; className?: string }) {
  return (
    <h1 className={cn("text-display text-3xl text-balance", className)}>
      {headline} {quiet ? <span className="text-muted-foreground">{quiet}</span> : null}
    </h1>
  )
}

export { DEFAULT_COPY, HeroActions, HeroHeading, type LandingHeroAction, type LandingHeroCopyProps }
```

### `registry/miseui/blocks/landing-hero-centered.tsx`

```tsx
import type * as React from "react"
import { useState } from "react"
import { Check } from "lucide-react"
import { cn } from "@/registry/miseui/lib/utils"
import { Badge } from "@/registry/miseui/ui/badge"
import { DEFAULT_COPY, HeroActions, HeroHeading, type LandingHeroCopyProps } from "./landing-hero-copy"
import { ACTION_ITEMS, SUMMARY } from "./landing-hero-parts"

type OwnerName = (typeof ACTION_ITEMS)[number]["owner"]

const TRANSCRIPT: ReadonlyArray<{ time: string; speaker: string; line: string; owner?: OwnerName }> = [
  { time: "08:26", speaker: "Ada", line: "Almost nobody is left on the $9 tier." },
  { time: "14:02", speaker: "Priya", line: "I can get the revised tiers to sales by Thursday.", owner: "Priya" },
  { time: "21:40", speaker: "Tomas", line: "I will draft the customer email. You will have it Monday.", owner: "Tomas" },
  { time: "33:15", speaker: "Wen", line: "Support needs a heads-up first. I will brief them by the 18th.", owner: "Wen" },
]

function TaskList({ owner, onSelect }: { owner: OwnerName; onSelect: (owner: OwnerName) => void }) {
  return (
    <ul className="flex flex-col gap-1">
      {ACTION_ITEMS.map((item) => (
        <li key={item.owner}>
          <button
            type="button"
            aria-pressed={item.owner === owner}
            onClick={() => onSelect(item.owner)}
            className={cn(
              "flex min-h-10 w-full items-center gap-3 rounded-lg px-2 py-2 text-start text-[13px] leading-relaxed outline-none transition-colors duration-(--duration-fast) ease-(--ease-mise) hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50",
              item.owner === owner && "bg-accent",
            )}
          >
            <Badge variant="secondary" className="font-normal">
              {item.owner}
            </Badge>
            <span className="min-w-0 flex-1 text-pretty">{item.task}</span>
            <span className="shrink-0 text-muted-foreground">{item.due}</span>
          </button>
        </li>
      ))}
    </ul>
  )
}

function TranscriptList({ owner }: { owner: OwnerName }) {
  return (
    <ol aria-label="Where each task was said" className="flex flex-col gap-1 border-t p-4 @2xl:p-6 @3xl:border-t-0 @3xl:border-l">
      {TRANSCRIPT.map((entry) => (
        <li
          key={entry.time}
          data-said={entry.owner === owner ? "true" : undefined}
          className={cn(
            "rounded-lg px-2 py-2 text-[13px] leading-relaxed text-pretty transition-colors duration-(--duration-fast) ease-(--ease-mise)",
            entry.owner === owner ? "bg-mise-soft" : "text-muted-foreground",
          )}
        >
          <span className="font-medium tabular-nums">{entry.time}</span> {entry.speaker}: {entry.line}
        </li>
      ))}
    </ol>
  )
}

/** Wide on purpose: the summary and the words it came from sit side by side, which a narrow card cannot show. */
function LandingHeroPlate() {
  const [owner, setOwner] = useState<OwnerName>(ACTION_ITEMS[0].owner)
  return (
    <div data-slot="landing-hero-plate" className="w-full max-w-5xl rounded-2xl border bg-background text-start dark:bg-card">
      <div className="flex flex-wrap items-center justify-between gap-3 border-b p-4 @2xl:px-6">
        <div className="min-w-0 leading-relaxed">
          <p className="text-[15px]">Weekly pricing review</p>
          <p className="text-[13px] text-muted-foreground">38 min call, 5 people</p>
        </div>
        <Badge variant="outline" className="gap-2 px-3 py-1 text-[13px] font-normal">
          <Check />
          Sent to 5 people
        </Badge>
      </div>
      <div className="grid grid-cols-[minmax(0,1fr)] @3xl:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
        <div className="flex flex-col gap-4 p-4 @2xl:p-6">
          <p className="text-[15px] leading-relaxed text-pretty">{SUMMARY}</p>
          <TaskList owner={owner} onSelect={setOwner} />
        </div>
        <TranscriptList owner={owner} />
      </div>
    </div>
  )
}

function LandingHeroCentered({
  headline = DEFAULT_COPY.headline,
  headlineQuiet = DEFAULT_COPY.headlineQuiet,
  description = DEFAULT_COPY.description,
  primaryAction = DEFAULT_COPY.primaryAction,
  secondaryAction = DEFAULT_COPY.secondaryAction,
  preview = <LandingHeroPlate />,
  className,
  ...props
}: LandingHeroCopyProps & { preview?: React.ReactNode }) {
  return (
    <section data-slot="landing-hero" data-variant="centered" className={cn("@container w-full bg-muted dark:bg-background", className)} {...props}>
      <div className="mx-auto flex max-w-7xl flex-col items-center gap-12 px-4 py-16 @md:px-6 @5xl:px-8">
        <div className="flex max-w-2xl min-w-0 flex-col items-center gap-6 text-center">
          <HeroHeading headline={headline} quiet={headlineQuiet} className="@md:text-4xl @4xl:text-5xl" />
          <p className="max-w-md text-[15px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
          <HeroActions primary={primaryAction} secondary={secondaryAction} className="justify-center" />
        </div>
        {preview !== null ? <div className="flex w-full min-w-0 justify-center">{preview}</div> : null}
      </div>
    </section>
  )
}

export { LandingHeroCentered }
```

### `registry/miseui/blocks/landing-hero-overlap.tsx`

```tsx
import type * as React from "react"
import { Check } from "lucide-react"
import { cn } from "@/registry/miseui/lib/utils"
import { Badge } from "@/registry/miseui/ui/badge"
import { Card } from "@/registry/miseui/ui/card"
import { DEFAULT_COPY, HeroActions, HeroHeading, type LandingHeroCopyProps } from "./landing-hero-copy"
import { ACTION_ITEMS } from "./landing-hero-parts"

const TRANSCRIPT_LINES = [
  { time: "14:02", speaker: "Priya", line: "I can get the revised tiers to sales by Thursday." },
  { time: "21:40", speaker: "Tomas", line: "I will draft the customer email. You will have it Monday." },
] as const

/** Black, because a shadow built from the ink turns into a glow in dark mode. */
const FRONT_SHADOW_CLASS =
  "shadow-[0_1px_2px_color-mix(in_oklab,var(--foreground)_6%,transparent),0_16px_32px_-16px_color-mix(in_oklab,var(--foreground)_16%,transparent)] dark:shadow-[0_16px_32px_-16px_black]"

/** The bottom padding is the part the front card lies over, so nothing readable gets cut off, at any width. */
function TranscriptFragment() {
  return (
    <Card aria-hidden="true" data-testid="fragment-back" className="gap-3 rounded-2xl p-4 pb-16 shadow-none @2xl:p-6 @2xl:pb-16">
      <div className="flex items-center justify-between gap-3 text-[13px] text-muted-foreground">
        <span>Transcript</span>
        <span className="tabular-nums">38:12</span>
      </div>
      {TRANSCRIPT_LINES.map((entry) => (
        <p key={entry.time} className="text-[13px] leading-relaxed text-pretty text-muted-foreground">
          <span className="font-medium text-foreground">{entry.speaker}</span> {entry.line}
        </p>
      ))}
    </Card>
  )
}

function PlanFragment() {
  return (
    <Card aria-hidden="true" data-testid="fragment-front" className={cn("gap-3 rounded-2xl bg-background p-4 @2xl:p-6 dark:bg-muted", FRONT_SHADOW_CLASS)}>
      <div className="flex flex-wrap items-center justify-between gap-2">
        <span className="text-[15px]">The plan</span>
        <Badge variant="mise">
          <Check />
          Sent to 5 people
        </Badge>
      </div>
      <ul className="flex flex-col divide-y border-t">
        {ACTION_ITEMS.map((item) => (
          <li key={item.owner} className="flex items-center gap-3 py-2 text-[13px] leading-relaxed">
            <span className="min-w-0 flex-1 text-pretty">{item.task}</span>
            <span className="shrink-0 text-muted-foreground">{item.owner}</span>
          </li>
        ))}
      </ul>
    </Card>
  )
}

function LandingHeroOverlap({
  headline = DEFAULT_COPY.headline,
  headlineQuiet = DEFAULT_COPY.headlineQuiet,
  description = DEFAULT_COPY.description,
  primaryAction = DEFAULT_COPY.primaryAction,
  secondaryAction = DEFAULT_COPY.secondaryAction,
  fragments = [<TranscriptFragment key="back" />, <PlanFragment key="front" />],
  className,
  ...props
}: LandingHeroCopyProps & { fragments?: readonly [React.ReactNode, React.ReactNode] }) {
  const [back, front] = fragments
  return (
    <section data-slot="landing-hero" data-variant="overlap" className={cn("@container w-full bg-muted dark:bg-background", className)} {...props}>
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 py-16 @4xl:grid-cols-2 @5xl:gap-16 @5xl:px-8">
        <div className="flex min-w-0 flex-col items-start gap-6">
          <HeroHeading headline={headline} quiet={headlineQuiet} className="@md:text-4xl @6xl:text-5xl" />
          <p className="max-w-md text-[15px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
          <HeroActions primary={primaryAction} secondary={secondaryAction} />
        </div>
        <div data-testid="hero-fragments" className="flex min-w-0 flex-col">
          <div className="w-11/12 min-w-0 @4xl:w-5/6">{back}</div>
          <div className="relative z-10 -mt-12 ml-auto w-11/12 min-w-0 @4xl:w-5/6">{front}</div>
        </div>
      </div>
    </section>
  )
}

export { LandingHeroOverlap }
```

### `registry/miseui/blocks/landing-hero-minimal.tsx`

```tsx
import { cn } from "@/registry/miseui/lib/utils"
import { HeroActions, HeroHeading, type LandingHeroAction, type LandingHeroCopyProps } from "./landing-hero-copy"

const EARLY_ACCESS: LandingHeroAction = { label: "Get early access" }

/** The sample copy is in the future tense: this variant is for a product that cannot be tried yet. */
function LandingHeroMinimal({
  headline = "Calls that end in a plan.",
  headlineQuiet = "We are building it now.",
  description = "It will listen to the call, write down who owns what, and send it to everyone who was there.",
  primaryAction = EARLY_ACCESS,
  secondaryAction = null,
  className,
  ...props
}: LandingHeroCopyProps) {
  return (
    <section data-slot="landing-hero" data-variant="minimal" className={cn("@container w-full bg-muted dark:bg-background", className)} {...props}>
      <div className="mx-auto flex max-w-5xl flex-col gap-8 px-6 py-16 @2xl:gap-12 @2xl:py-24 @5xl:px-8">
        <HeroHeading headline={headline} quiet={headlineQuiet} className="max-w-4xl text-4xl @2xl:text-5xl @5xl:text-6xl" />
        <div className="flex flex-col gap-6 border-t pt-6 @3xl:flex-row @3xl:items-start @3xl:justify-between @3xl:gap-12">
          <p className="max-w-md text-[15px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
          <HeroActions primary={primaryAction} secondary={secondaryAction} className="mt-0 shrink-0" />
        </div>
      </div>
    </section>
  )
}

export { LandingHeroMinimal }
```