Repository: spotify/backstage
File: plugins/home/src/homePageComponents/QuickStart/Content.tsx (TypeScript)

Code before:
  docsLink?: string;
  /** The video to play on the card */
  video?: React.JSX.Element;
  /** A quickstart image to display on the card */
  image: React.JSX.Element;
  /** The card description*/
  cardDescription?: string;
  /** A component used to download a quickStart image*/
  downloadImage?: React.JSX.Element;
};

/**
 * A component to display Quick Start info on the homepage.
 *
 * @public
 */
export const Content = (props: QuickStartCardProps): JSX.Element => {
  const styles = useStyles();
  return (
    <>
      <ContentModal
        modalContent={props.image}
        linkContent={props.modalTitle || 'Onboarding'}
      />
      <Typography variant="body1" paragraph>
        {props.cardDescription || "Get started with Backstage's Catalog"}
      </Typography>
      <ContentModal modalContent={props.image} linkContent={props.image} />
      <Grid
        container
        alignItems="center"
        className={styles.contentActionContainer}
      >
        {props.downloadImage && <Grid item>{props.downloadImage}</Grid>}
        <Grid item>
          <Link
            to={props.docsLink || 'https://backstage.io/docs/getting-started/'}
            data-testid="quick-start-link-to-docs"
            underline="none"
            variant="h6"
            className={styles.link}
          >
            {props.docsLinkTitle || 'Learn more'}
          </Link>
        </Grid>
      </Grid>
      {props.video && props.video}
    </>
  );
};


Review comment (suggestion):
```suggestion
        {props.cardDescription || "Get started with Backstage"}
```

What do you think about using this as default instead? just thinking that its the home page and not specifically the catalog page so might be valuable to keep it more generic

Code after:
  docsLink?: string;
  /** The video to play on the card */
  video?: React.JSX.Element;
  /** A quickstart image to display on the card */
  image: React.JSX.Element;
  /** The card description*/
  cardDescription?: string;
  /** A component used to download a quickStart image*/
  downloadImage?: React.JSX.Element;
};

/**
 * A component to display Quick Start info on the homepage.
 *
 * @public
 */
export const Content = (props: QuickStartCardProps): JSX.Element => {
  const styles = useStyles();
  return (
    <>
      <ContentModal
        modalContent={props.image}
        linkContent={props.modalTitle || 'Onboarding'}
      />
      <Typography variant="body1" paragraph>
        {props.cardDescription || 'Get started with Backstage'}
      </Typography>
      <ContentModal modalContent={props.image} linkContent={props.image} />
      <Grid
        container
        alignItems="center"
        className={styles.contentActionContainer}
      >
        {props.downloadImage && <Grid item>{props.downloadImage}</Grid>}
        <Grid item>
          <Link
            to={props.docsLink || 'https://backstage.io/docs/getting-started/'}
            data-testid="quick-start-link-to-docs"
            underline="none"
            variant="h6"
            className={styles.link}
          >
            {props.docsLinkTitle || 'Learn more'}
          </Link>
        </Grid>
      </Grid>
      {props.video && props.video}
    </>
  );
};