{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-image-right",
  "type": "registry:block",
  "title": "Hero Image Right",
  "description": "Full-bleed marketing hero with a gradient-highlighted headline, body copy, primary/optional-secondary CTAs, and an opt-in background photo revealed by a diagonal gradient on the right.",
  "dependencies": [
    "@mantine/core@^9"
  ],
  "docs": "Adapted from Mantine UI HeroImageRight at ffbf61c559f374a7ea28fcf00355e84dcbe9a908; the hardcoded Unsplash photo became an opt-in backgroundImageUrl prop (unset by default), the headline split into three props around the gradient highlight, and an optional secondary CTA was added alongside upstream's single button.",
  "registryDependencies": [
    "@house/mantine-ui-license"
  ],
  "files": [
    {
      "path": "registry/mantine-ui/hero-image-right/hero-image-right.tsx",
      "type": "registry:ui",
      "content": "/**\n * Adapted from Mantine UI's HeroImageRight at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n\nimport { Button, Container, Group, Text, Title } from \"@mantine/core\";\n\nimport classes from \"./hero-image-right.module.css\";\n\nexport interface HeroImageRightProps {\n  /** Text rendered before the highlighted word/phrase. */\n  titleBefore?: string;\n  /** Highlighted word/phrase in the headline, rendered with a gradient. */\n  highlightedText?: string;\n  /** Text rendered after the highlighted word/phrase. */\n  titleAfter?: string;\n  description?: string;\n  primaryButtonLabel?: string;\n  primaryButtonHref?: string;\n  onPrimaryButtonClick?: () => void;\n  /** Optional secondary CTA; omitted entirely unless a label is supplied. */\n  secondaryButtonLabel?: string;\n  secondaryButtonHref?: string;\n  onSecondaryButtonClick?: () => void;\n  /**\n   * URL of the photo shown behind the gradient overlay on the right side of\n   * the hero. Upstream hardcodes an Unsplash photo here; this port ships\n   * with none so the hero renders as a plain gradient panel until a\n   * consumer opts into a third-party (or self-hosted) image host.\n   */\n  backgroundImageUrl?: string;\n}\n\nexport function HeroImageRight({\n  titleBefore = \"A\",\n  highlightedText = \"fully featured\",\n  titleAfter = \"React components library\",\n  description = \"Build fully functional accessible web applications with ease – Mantine includes more than 100 customizable components and hooks to cover you in any situation\",\n  primaryButtonLabel = \"Get started\",\n  primaryButtonHref,\n  onPrimaryButtonClick,\n  secondaryButtonLabel,\n  secondaryButtonHref,\n  onSecondaryButtonClick,\n  backgroundImageUrl,\n}: HeroImageRightProps) {\n  return (\n    <div\n      className={classes.root}\n      style={\n        backgroundImageUrl\n          ? {\n              backgroundImage: `linear-gradient(250deg, rgba(130, 201, 30, 0) 0%, #062343 70%), url(${backgroundImageUrl})`,\n            }\n          : undefined\n      }\n    >\n      <Container size=\"lg\">\n        <div className={classes.inner}>\n          <div className={classes.content}>\n            <Title className={classes.title}>\n              {titleBefore}{\" \"}\n              <Text\n                component=\"span\"\n                inherit\n                variant=\"gradient\"\n                gradient={{ from: \"pink\", to: \"yellow\" }}\n              >\n                {highlightedText}\n              </Text>{\" \"}\n              {titleAfter}\n            </Title>\n\n            <Text className={classes.description} mt={30}>\n              {description}\n            </Text>\n\n            <Group mt={40}>\n              {primaryButtonHref ? (\n                <Button\n                  component=\"a\"\n                  href={primaryButtonHref}\n                  variant=\"gradient\"\n                  gradient={{ from: \"pink\", to: \"yellow\" }}\n                  size=\"xl\"\n                  className={classes.control}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              ) : (\n                <Button\n                  onClick={onPrimaryButtonClick}\n                  variant=\"gradient\"\n                  gradient={{ from: \"pink\", to: \"yellow\" }}\n                  size=\"xl\"\n                  className={classes.control}\n                >\n                  {primaryButtonLabel}\n                </Button>\n              )}\n\n              {secondaryButtonLabel &&\n                (secondaryButtonHref ? (\n                  <Button\n                    component=\"a\"\n                    href={secondaryButtonHref}\n                    variant=\"default\"\n                    size=\"xl\"\n                    className={classes.control}\n                  >\n                    {secondaryButtonLabel}\n                  </Button>\n                ) : (\n                  <Button\n                    onClick={onSecondaryButtonClick}\n                    variant=\"default\"\n                    size=\"xl\"\n                    className={classes.control}\n                  >\n                    {secondaryButtonLabel}\n                  </Button>\n                ))}\n            </Group>\n          </div>\n        </div>\n      </Container>\n    </div>\n  );\n}\n"
    },
    {
      "path": "registry/mantine-ui/hero-image-right/hero-image-right.module.css",
      "type": "registry:file",
      "target": "@ui/hero-image-right.module.css",
      "content": "/*\n * Adapted from Mantine UI's HeroImageRight at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n *\n * Upstream used postcss-preset-mantine's `$mantine-breakpoint-md`; this\n * registry ships plain CSS modules with no PostCSS preset, so the literal\n * `62em` default `md` breakpoint value is inlined instead (see\n * header-mega-menu.module.css for the same convention at the `sm`\n * breakpoint). Upstream's `.image` class is dropped: it was never\n * referenced from HeroImageRight.tsx (the \"image on the right\" effect\n * comes entirely from the `.root` background photo revealed by the\n * diagonal gradient below, not from a separate DOM node), so it was dead\n * CSS. The background photo itself is applied inline by the component\n * (see `backgroundImageUrl`) rather than as a hardcoded `url(...)` here,\n * so this rule renders a clean gradient panel with no photo by default.\n */\n.root {\n  background-color: #11284b;\n  background-size: cover;\n  background-position: center;\n  background-image: linear-gradient(250deg, rgba(130, 201, 30, 0) 0%, #062343 70%);\n  padding-top: calc(var(--mantine-spacing-xl) * 3);\n  padding-bottom: calc(var(--mantine-spacing-xl) * 3);\n}\n\n.inner {\n  display: flex;\n  justify-content: space-between;\n}\n\n@media (max-width: 62em) {\n  .inner {\n    flex-direction: column;\n  }\n}\n\n.content {\n  padding-top: calc(var(--mantine-spacing-xl) * 2);\n  padding-bottom: calc(var(--mantine-spacing-xl) * 2);\n  margin-right: calc(var(--mantine-spacing-xl) * 3);\n}\n\n@media (max-width: 62em) {\n  .content {\n    margin-right: 0;\n  }\n}\n\n.title {\n  color: var(--mantine-color-white);\n  font-family: var(--mantine-font-family-headings);\n  font-weight: 500;\n  line-height: 1.05;\n  max-width: 500px;\n  font-size: 48px;\n}\n\n@media (max-width: 62em) {\n  .title {\n    max-width: 100%;\n    font-size: 34px;\n    line-height: 1.15;\n  }\n}\n\n.description {\n  color: var(--mantine-color-white);\n  opacity: 0.75;\n  max-width: 500px;\n}\n\n@media (max-width: 62em) {\n  .description {\n    max-width: 100%;\n  }\n}\n\n.control {\n  padding-left: 50px;\n  padding-right: 50px;\n  font-family: var(--mantine-font-family);\n  font-size: 22px;\n}\n\n@media (max-width: 62em) {\n  .control {\n    width: 100%;\n  }\n}\n"
    }
  ],
  "meta": {
    "mantine": {
      "requires": ">=9",
      "provider": "MantineProvider",
      "props": {
        "HeroImageRight": [
          {
            "name": "titleBefore",
            "type": "string",
            "required": false,
            "default": "\"A\"",
            "description": "Text rendered before the highlighted phrase in the headline."
          },
          {
            "name": "highlightedText",
            "type": "string",
            "required": false,
            "default": "\"fully featured\"",
            "description": "The gradient-highlighted phrase in the headline."
          },
          {
            "name": "titleAfter",
            "type": "string",
            "required": false,
            "default": "\"React components library\"",
            "description": "Text rendered after the highlighted phrase in the headline."
          },
          {
            "name": "description",
            "type": "string",
            "required": false,
            "description": "Supporting body copy below the headline."
          },
          {
            "name": "primaryButtonLabel",
            "type": "string",
            "required": false,
            "default": "\"Get started\"",
            "description": "Label for the always-rendered primary CTA."
          },
          {
            "name": "primaryButtonHref",
            "type": "string",
            "required": false,
            "description": "Renders the primary CTA as an anchor instead of a button when set."
          },
          {
            "name": "onPrimaryButtonClick",
            "type": "() => void",
            "required": false,
            "description": "Click handler for the primary CTA when no href is set."
          },
          {
            "name": "secondaryButtonLabel",
            "type": "string",
            "required": false,
            "description": "Label for an optional secondary CTA; the button renders only when this is supplied."
          },
          {
            "name": "secondaryButtonHref",
            "type": "string",
            "required": false,
            "description": "Renders the secondary CTA as an anchor instead of a button when set."
          },
          {
            "name": "onSecondaryButtonClick",
            "type": "() => void",
            "required": false,
            "description": "Click handler for the secondary CTA when no href is set."
          },
          {
            "name": "backgroundImageUrl",
            "type": "string",
            "required": false,
            "description": "URL of a photo shown behind the gradient overlay on the right side of the hero; with no value the hero renders as a plain gradient/navy panel with no third-party host dependency."
          }
        ]
      },
      "usage": {
        "path": "registry/mantine-ui/hero-image-right/hero-image-right.usage.tsx",
        "content": "import { HeroImageRight } from \"@/components/ui/hero-image-right\";\n\nexport function MarketingHero() {\n  return (\n    <HeroImageRight\n      titleBefore=\"A\"\n      highlightedText=\"fully featured\"\n      titleAfter=\"component library for your product\"\n      description=\"Build fully functional, accessible interfaces faster — a complete kit of components and hooks that cover you in any situation.\"\n      primaryButtonLabel=\"Get started\"\n      onPrimaryButtonClick={() => console.log(\"get started\")}\n      secondaryButtonLabel=\"View pricing\"\n      secondaryButtonHref=\"/pricing\"\n      backgroundImageUrl=\"https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1080&q=80\"\n    />\n  );\n}\n"
      }
    }
  }
}