@theguild/components
Version:
32 lines (31 loc) • 1.13 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Button } from "./button";
import { Image } from "./image";
const HeroIllustration = ({
title,
description,
link,
image,
flipped,
className
}) => /* @__PURE__ */ jsx("section", { className: clsx("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"container flex flex-wrap items-center gap-8 py-8 md:flex-nowrap md:justify-around",
flipped && "md:flex-row-reverse"
),
children: [
/* @__PURE__ */ jsx(Image, { ...image, className: clsx("w-full max-w-md md:w-2/5", image.className) }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3", children: [
/* @__PURE__ */ jsx("h2", { className: "max-w-sm text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx("p", { className: "max-w-md text-base text-gray-500 dark:text-gray-400", children: description }),
link && /* @__PURE__ */ jsx(Button, { ...link })
] })
]
}
) });
export {
HeroIllustration
};