@theguild/components
Version:
35 lines (34 loc) • 1.6 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../cn";
import { Heading } from "../heading";
import { CheckIcon } from "../icons";
import { HeroGradientDefs } from "./hero-gradient-defs";
import { HeroLogo } from "./hero-logo";
import { HeroDecorationFromLogo } from "./hero-decoration-from-logo";
const Hero = (props) => {
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"relative isolate flex max-w-[90rem] flex-col items-center justify-center gap-6 overflow-hidden rounded-3xl bg-blue-400 px-4 py-6 text-green-1000 max-sm:mt-2 sm:py-12 md:gap-8 lg:py-24",
props.className
),
children: [
props.top,
/* @__PURE__ */ jsx(Heading, { as: "h1", size: "xl", className: "mx-auto max-w-3xl text-balance text-center", children: props.heading }),
/* @__PURE__ */ jsx("p", { className: "mx-auto w-[512px] max-w-[80%] text-center leading-6 text-green-800", children: props.text }),
/* @__PURE__ */ jsx("ul", { className: "mx-auto flex list-none gap-x-6 gap-y-2 text-sm font-medium max-md:flex-col", children: props.checkmarks.map((text) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsx(CheckIcon, { className: "text-green-800" }),
text
] }, text)) }),
/* @__PURE__ */ jsx("div", { className: "flex w-full justify-center gap-2 px-0.5 max-sm:flex-col sm:gap-4", children: props.children }),
/* @__PURE__ */ jsx(HeroGradientDefs, {})
]
}
);
};
export {
Hero,
HeroDecorationFromLogo,
HeroLogo
};