Hero Image Right

BlockMantine ≥ 9MantineProvider

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.

Install

One command copies the item's source into your project, where you own and edit it.

npx manteen add @house/hero-image-right

Dependencies

• @mantine/core@^9npm

Installing this item also installs @house/mantine-ui-license from the registry.

Preview

Usage

A copy-ready example published by the registry author. Imports use the aliases Manteen configures at init.

hero-image-right.usage.tsx

import { HeroImageRight } from "@/components/ui/hero-image-right";

export function MarketingHero() {
  return (
    <HeroImageRight
      titleBefore="A"
      highlightedText="fully featured"
      titleAfter="component library for your product"
      description="Build fully functional, accessible interfaces faster — a complete kit of components and hooks that cover you in any situation."
      primaryButtonLabel="Get started"
      onPrimaryButtonClick={() => console.log("get started")}
      secondaryButtonLabel="View pricing"
      secondaryButtonHref="/pricing"
      backgroundImageUrl="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1080&q=80"
    />
  );
}

Props

Author-documented props, carried verbatim from the registry item.

Prop	Type	Default	Description
titleBefore	string	"A"	Text rendered before the highlighted phrase in the headline.
highlightedText	string	"fully featured"	The gradient-highlighted phrase in the headline.
titleAfter	string	"React components library"	Text rendered after the highlighted phrase in the headline.
description	string	—	Supporting body copy below the headline.
primaryButtonLabel	string	"Get started"	Label for the always-rendered primary CTA.
primaryButtonHref	string	—	Renders the primary CTA as an anchor instead of a button when set.
onPrimaryButtonClick	() => void	—	Click handler for the primary CTA when no href is set.
secondaryButtonLabel	string	—	Label for an optional secondary CTA; the button renders only when this is supplied.
secondaryButtonHref	string	—	Renders the secondary CTA as an anchor instead of a button when set.
onSecondaryButtonClick	() => void	—	Click handler for the secondary CTA when no href is set.
backgroundImageUrl	string	—	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.

* required

Styling

No public Styles API is declared. Installed CSS remains editable because your project owns the source; internal class names are implementation details, not a customization contract.

Source

2 installable files ship with this item.

registry/mantine-ui/hero-image-right/hero-image-right.tsxcomponent · 4.2 kB · tsx

/**
 * Adapted from Mantine UI's HeroImageRight at
 * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see
 * LICENSES/MANTINE-UI.txt after installation.
 */

import { Button, Container, Group, Text, Title } from "@mantine/core";

import classes from "./hero-image-right.module.css";

export interface HeroImageRightProps {
  /** Text rendered before the highlighted word/phrase. */
  titleBefore?: string;
  /** Highlighted word/phrase in the headline, rendered with a gradient. */
  highlightedText?: string;
  /** Text rendered after the highlighted word/phrase. */
  titleAfter?: string;
  description?: string;
  primaryButtonLabel?: string;
  primaryButtonHref?: string;
  onPrimaryButtonClick?: () => void;
  /** Optional secondary CTA; omitted entirely unless a label is supplied. */
  secondaryButtonLabel?: string;
  secondaryButtonHref?: string;
  onSecondaryButtonClick?: () => void;
  /**
   * URL of the photo shown behind the gradient overlay on the right side of
   * the hero. Upstream hardcodes an Unsplash photo here; this port ships
   * with none so the hero renders as a plain gradient panel until a
   * consumer opts into a third-party (or self-hosted) image host.
   */
  backgroundImageUrl?: string;
}

export function HeroImageRight({
  titleBefore = "A",
  highlightedText = "fully featured",
  titleAfter = "React components library",
  description = "Build fully functional accessible web applications with ease – Mantine includes more than 100 customizable components and hooks to cover you in any situation",
  primaryButtonLabel = "Get started",
  primaryButtonHref,
  onPrimaryButtonClick,
  secondaryButtonLabel,
  secondaryButtonHref,
  onSecondaryButtonClick,
  backgroundImageUrl,
}: HeroImageRightProps) {
  return (
    <div
      className={classes.root}
      style={
        backgroundImageUrl
          ? {
              backgroundImage: `linear-gradient(250deg, rgba(130, 201, 30, 0) 0%, #062343 70%), url(${backgroundImageUrl})`,
            }
          : undefined
      }
    >
      <Container size="lg">
        <div className={classes.inner}>
          <div className={classes.content}>
            <Title className={classes.title}>
              {titleBefore}{" "}
              <Text
                component="span"
                inherit
                variant="gradient"
                gradient={{ from: "pink", to: "yellow" }}
              >
                {highlightedText}
              </Text>{" "}
              {titleAfter}
            </Title>

            <Text className={classes.description} mt={30}>
              {description}
            </Text>

            <Group mt={40}>
              {primaryButtonHref ? (
                <Button
                  component="a"
                  href={primaryButtonHref}
                  variant="gradient"
                  gradient={{ from: "pink", to: "yellow" }}
                  size="xl"
                  className={classes.control}
                >
                  {primaryButtonLabel}
                </Button>
              ) : (
                <Button
                  onClick={onPrimaryButtonClick}
                  variant="gradient"
                  gradient={{ from: "pink", to: "yellow" }}
                  size="xl"
                  className={classes.control}
                >
                  {primaryButtonLabel}
                </Button>
              )}

              {secondaryButtonLabel &&
                (secondaryButtonHref ? (
                  <Button
                    component="a"
                    href={secondaryButtonHref}
                    variant="default"
                    size="xl"
                    className={classes.control}
                  >
                    {secondaryButtonLabel}
                  </Button>
                ) : (
                  <Button
                    onClick={onSecondaryButtonClick}
                    variant="default"
                    size="xl"
                    className={classes.control}
                  >
                    {secondaryButtonLabel}
                  </Button>
                ))}
            </Group>
          </div>
        </div>
      </Container>
    </div>
  );
}

registry/mantine-ui/hero-image-right/hero-image-right.module.cssstyle · 2.2 kB · css

/*
 * Adapted from Mantine UI's HeroImageRight at
 * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see
 * LICENSES/MANTINE-UI.txt after installation.
 *
 * Upstream used postcss-preset-mantine's `$mantine-breakpoint-md`; this
 * registry ships plain CSS modules with no PostCSS preset, so the literal
 * `62em` default `md` breakpoint value is inlined instead (see
 * header-mega-menu.module.css for the same convention at the `sm`
 * breakpoint). Upstream's `.image` class is dropped: it was never
 * referenced from HeroImageRight.tsx (the "image on the right" effect
 * comes entirely from the `.root` background photo revealed by the
 * diagonal gradient below, not from a separate DOM node), so it was dead
 * CSS. The background photo itself is applied inline by the component
 * (see `backgroundImageUrl`) rather than as a hardcoded `url(...)` here,
 * so this rule renders a clean gradient panel with no photo by default.
 */
.root {
  background-color: #11284b;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(250deg, rgba(130, 201, 30, 0) 0%, #062343 70%);
  padding-top: calc(var(--mantine-spacing-xl) * 3);
  padding-bottom: calc(var(--mantine-spacing-xl) * 3);
}

.inner {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 62em) {
  .inner {
    flex-direction: column;
  }
}

.content {
  padding-top: calc(var(--mantine-spacing-xl) * 2);
  padding-bottom: calc(var(--mantine-spacing-xl) * 2);
  margin-right: calc(var(--mantine-spacing-xl) * 3);
}

@media (max-width: 62em) {
  .content {
    margin-right: 0;
  }
}

.title {
  color: var(--mantine-color-white);
  font-family: var(--mantine-font-family-headings);
  font-weight: 500;
  line-height: 1.05;
  max-width: 500px;
  font-size: 48px;
}

@media (max-width: 62em) {
  .title {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.15;
  }
}

.description {
  color: var(--mantine-color-white);
  opacity: 0.75;
  max-width: 500px;
}

@media (max-width: 62em) {
  .description {
    max-width: 100%;
  }
}

.control {
  padding-left: 50px;
  padding-right: 50px;
  font-family: var(--mantine-font-family);
  font-size: 22px;
}

@media (max-width: 62em) {
  .control {
    width: 100%;
  }
}

Author notes

Adapted from Mantine UI HeroImageRight at ffbf61c559…; 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.