@theguild/components
Version:
79 lines (78 loc) • 3.62 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Button } from "./button";
import { Image } from "./image";
import CubeBL from "../static/illustrations/marketplace-cube-bl.png";
import CubeBR from "../static/illustrations/marketplace-cube-br.png";
import CubeTL from "../static/illustrations/marketplace-cube-tl.png";
import CubeTR from "../static/illustrations/marketplace-cube-tr.png";
import IllustrationDesktop from "../static/illustrations/marketplace-desktop.png";
import IllustrationMobile from "../static/illustrations/marketplace-mobile.png";
const Shadow = ({ className }) => {
return /* @__PURE__ */ jsx(
"span",
{
className: clsx(
"absolute size-[750px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
className
)
}
);
};
const Cube = ({ className, src }) => {
return /* @__PURE__ */ jsx(
Image,
{
className: clsx("absolute -translate-x-1/2 -translate-y-1/2", className),
src,
alt: "Cube"
}
);
};
const HeroMarketplace = ({
title,
description,
link,
className,
image
}) => /* @__PURE__ */ jsx("section", { className: clsx("overflow-hidden bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxs(
"div",
{
className: "absolute inset-0 overflow-hidden bg-black dark:bg-dark",
style: { "--colorA": "#ff34ae", "--colorB": "#1cc8ee" },
children: [
/* @__PURE__ */ jsx(Shadow, { className: "left-[-30px] top-[-175px] [background:var(--colorA)] md:left-[-60px] md:top-[-150px]" }),
/* @__PURE__ */ jsx(Shadow, { className: "bottom-[-800px] right-[-700px] hidden [background:var(--colorA)] md:block" }),
/* @__PURE__ */ jsx(Shadow, { className: "bottom-[-600px] left-[-30px] [background:var(--colorB)] md:bottom-[-700px] md:left-5" })
]
}
),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(Cube, { src: CubeTL, className: "-top-2.5 left-6 md:left-10 md:top-6" }),
/* @__PURE__ */ jsx(Cube, { src: CubeTR, className: "-bottom-60 -right-52 top-auto md:bottom-auto md:top-20" }),
/* @__PURE__ */ jsx(Cube, { src: CubeBR, className: "-bottom-32 -right-20 hidden md:block" }),
/* @__PURE__ */ jsx(Cube, { src: CubeBL, className: "-bottom-40 left-10 hidden md:block" })
] }),
/* @__PURE__ */ jsxs("div", { className: "container mb-28 mt-16 flex max-w-[90rem] flex-wrap items-center pb-1 pt-20 md:mb-20 md:mt-7 md:flex-nowrap md:pt-0", children: [
/* @__PURE__ */ jsxs(
"picture",
{
className: "z-[1] order-last -mb-20 -ml-8 mt-5 w-full max-w-md md:order-first md:-mb-24 md:-ml-12 md:mt-0 md:w-auto md:max-w-none lg:-ml-14 lg:w-2/3",
...image,
children: [
/* @__PURE__ */ jsx("source", { media: "(min-width:768px)", srcSet: IllustrationDesktop }),
/* @__PURE__ */ jsx(Image, { className: "mx-auto w-auto", src: IllustrationMobile, alt: "Products List" })
]
}
),
/* @__PURE__ */ jsxs("div", { className: "relative z-[1]", children: [
/* @__PURE__ */ jsx("h2", { className: "mb-2.5 max-w-lg text-2xl font-bold text-white md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx("p", { className: "max-w-lg text-base text-gray-300 opacity-70", children: description }),
link && /* @__PURE__ */ jsx("div", { className: "relative z-[1] mt-4 hidden items-center text-xs md:mt-9 md:flex", children: /* @__PURE__ */ jsx(Button, { ...link }) })
] })
] })
] }) });
export {
HeroMarketplace
};