mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
416 lines
15 KiB
TypeScript
416 lines
15 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
import { LandingStartActionIcon } from "./icons/landing-start-action";
|
|
import { LandingCopyCommandButton } from "./landing-copy-command-button";
|
|
import { LandingPlaygroundModal } from "./landing-playground-modal";
|
|
import { useLocation } from "@docusaurus/router";
|
|
import { useColorMode } from "@docusaurus/theme-common";
|
|
import { useInView } from "framer-motion";
|
|
import Link from "@docusaurus/Link";
|
|
|
|
export const LandingTryItSection = ({ className }: { className?: string }) => {
|
|
const [wizardOpen, setWizardOpen] = React.useState(false);
|
|
|
|
const onClick = React.useCallback(() => {
|
|
setWizardOpen(true);
|
|
}, []);
|
|
|
|
const { search, hash } = useLocation();
|
|
|
|
const [params, setParams] = React.useState<Record<string, string>>({});
|
|
|
|
React.useEffect(() => {
|
|
const _params = new URLSearchParams(search);
|
|
const paramsObj: Record<string, string> = {};
|
|
|
|
// @ts-expect-error no downlevel iteration
|
|
for (const [key, value] of _params.entries()) {
|
|
paramsObj[key] = value;
|
|
}
|
|
|
|
setParams(paramsObj);
|
|
}, [search]);
|
|
|
|
const scrollToItem = React.useCallback(() => {
|
|
const playgroundElement = document.getElementById("playground");
|
|
if (playgroundElement) {
|
|
playgroundElement.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
inline: "nearest",
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (params.playground || hash === "#playground") {
|
|
scrollToItem();
|
|
}
|
|
}, [params.playground, hash]);
|
|
|
|
React.useEffect(() => {
|
|
if (wizardOpen) {
|
|
scrollToItem();
|
|
}
|
|
}, [wizardOpen]);
|
|
|
|
return (
|
|
<div
|
|
id="playground"
|
|
className={clsx(
|
|
"flex",
|
|
"flex-col",
|
|
"gap-8 landing-sm:gap-12 landing-md:gap-8 ",
|
|
className,
|
|
)}
|
|
style={{
|
|
scrollMarginTop: "6rem",
|
|
}}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex",
|
|
"flex-col",
|
|
"gap-4 landing-sm:gap-6",
|
|
"px-4 landing-sm:px-10",
|
|
)}
|
|
>
|
|
<h2
|
|
className={clsx(
|
|
"text-2xl landing-sm:text-[32px] landing-sm:leading-[40px]",
|
|
"font-bold",
|
|
"text-gray-900 dark:text-gray-0",
|
|
)}
|
|
>
|
|
Get started now!
|
|
</h2>
|
|
<p
|
|
className={clsx(
|
|
"text-base",
|
|
"font-normal",
|
|
"text-gray-600 dark:text-gray-400",
|
|
"landing-sm:max-w-[446px]",
|
|
)}
|
|
>
|
|
Choose OpenPanel Enterprise or Community edition and start
|
|
hosting websites in minutes.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"w-full",
|
|
"rounded-2xl landing-md:rounded-3xl",
|
|
"relative",
|
|
"overflow-hidden",
|
|
"transition-[min-height,height]",
|
|
"duration-300",
|
|
"ease-out",
|
|
wizardOpen && "min-h-[515px]",
|
|
)}
|
|
>
|
|
<LandingTryItWizardSection visible={wizardOpen} />
|
|
<LandingTryItOptionsSection
|
|
onClick={onClick}
|
|
className={clsx(
|
|
"w-full",
|
|
"transition-[transform,opacity,margin-bottom]",
|
|
"duration-300",
|
|
"ease-in-out",
|
|
wizardOpen && [
|
|
"pointer-events-none",
|
|
"select-none",
|
|
"landing-md:-translate-y-[300px]",
|
|
"landing-md:opacity-0",
|
|
"landing-md:origin-top",
|
|
"landing-md:-mb-[272px]",
|
|
],
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LandingTryItOptionsSection = ({
|
|
onClick,
|
|
className,
|
|
}: {
|
|
onClick: () => void;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"relative",
|
|
"flex",
|
|
"flex-col landing-md:flex-row",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex-1",
|
|
"rounded-2xl landing-md:rounded-3xl",
|
|
"landing-md:rounded-tr-none landing-md:rounded-br-none",
|
|
"flex",
|
|
"flex-col",
|
|
"gap-6 landing-sm:gap-10",
|
|
"pt-4 landing-sm:pt-10 landing-md:pt-16",
|
|
"px-4 landing-sm:px-10",
|
|
"pb-14 landing-sm:pb-20 landing-md:pb-16",
|
|
"bg-gray-50 dark:bg-gray-800",
|
|
"landing-md:bg-landing-wizard-option-bg-light dark:landing-md:bg-landing-wizard-option-bg-dark",
|
|
"landing-md:bg-landing-wizard-option-left landing-md:bg-landing-wizard-option",
|
|
)}
|
|
style={{
|
|
backgroundRepeat: "no-repeat, repeat",
|
|
}}
|
|
>
|
|
<p
|
|
className={clsx(
|
|
"text-base landing-sm:text-xl landing-md:text-base landing-lg:text-xl",
|
|
"font-semibold",
|
|
"text-gray-600 dark:text-gray-400",
|
|
"landing-md:max-w-[318px]",
|
|
"landing-lg:max-w-[446px]",
|
|
)}
|
|
>
|
|
Sign up for OpenPanel Enterprise version and offer premium features to your customers.
|
|
</p>
|
|
<Link
|
|
to="beta"
|
|
className={clsx(
|
|
"self-start",
|
|
"rounded-3xl",
|
|
"!text-gray-0 dark:!text-gray-900",
|
|
"bg-refine-blue dark:bg-refine-cyan-alt",
|
|
"transition-[filter]",
|
|
"duration-150",
|
|
"ease-in-out",
|
|
"hover:brightness-110",
|
|
"py-3",
|
|
"pl-7 pr-8",
|
|
"landing-md:px-8",
|
|
"landing-lg:pl-7 landing-lg:pr-8",
|
|
"flex",
|
|
"items-center",
|
|
"justify-center",
|
|
"gap-2",
|
|
"hover:!no-underline",
|
|
)}
|
|
>
|
|
<LandingStartActionIcon />
|
|
<span className={clsx("text-base", "font-semibold")}>
|
|
Go Enterprise
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"h-4 landing-md:h-full",
|
|
"w-full landing-md:w-0",
|
|
"relative",
|
|
"flex-shrink-0",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"hidden",
|
|
"landing-md:block",
|
|
"absolute",
|
|
"-left-2",
|
|
"skew-x-[14deg]",
|
|
"top-0",
|
|
"h-[272px]",
|
|
"w-2",
|
|
"bg-gray-0 dark:bg-gray-900",
|
|
)}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
"absolute",
|
|
"-top-6 left-8",
|
|
"landing-md:top-32 landing-md:-left-1",
|
|
"landing-md:-translate-x-1/2",
|
|
"landing-md:-translate-y-1/2",
|
|
"bg-gray-0 dark:bg-gray-900",
|
|
"text-gray-600 dark:text-gray-400",
|
|
"w-16 h-16 landing-md:w-[78px] landing-md:h-[78px]",
|
|
"rounded-full",
|
|
"text-base",
|
|
"uppercase",
|
|
"flex items-center justify-center",
|
|
)}
|
|
>
|
|
or
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"flex-1",
|
|
"rounded-2xl landing-md:rounded-3xl",
|
|
"flex flex-col",
|
|
"landing-md:rounded-tl-none landing-md:rounded-bl-none",
|
|
"pb-4 landing-sm:pb-10 landing-md:pb-16",
|
|
"px-4 landing-sm:px-10",
|
|
"pt-14 landing-sm:pt-20 landing-md:pt-16",
|
|
"bg-gray-50 dark:bg-gray-800",
|
|
"landing-md:bg-landing-wizard-option-bg-light dark:landing-md:bg-landing-wizard-option-bg-dark",
|
|
"landing-md:bg-landing-wizard-option-right landing-md:bg-landing-wizard-option",
|
|
"landing-md:items-end",
|
|
)}
|
|
style={{
|
|
backgroundRepeat: "no-repeat, repeat",
|
|
}}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"landing-md:max-w-[318px]",
|
|
"landing-lg:max-w-[446px]",
|
|
"flex",
|
|
"flex-col",
|
|
"gap-6 landing-sm:gap-10",
|
|
)}
|
|
>
|
|
<p
|
|
className={clsx(
|
|
"text-base landing-sm:text-xl landing-md:text-base landing-lg:text-xl",
|
|
"font-semibold",
|
|
"text-gray-600 dark:text-gray-400",
|
|
"landing-lg:max-w-[446px]",
|
|
)}
|
|
>
|
|
Get OpenPanel Community edition now and begin hosting websites within just 5 minutes.
|
|
</p>
|
|
<LandingCopyCommandButton />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LandingTryItWizardSection = ({
|
|
className,
|
|
visible,
|
|
}: {
|
|
className?: string;
|
|
visible: boolean;
|
|
}) => {
|
|
const ref = React.useRef<HTMLDivElement>(null);
|
|
const inView = useInView(ref, {
|
|
margin: "100px",
|
|
});
|
|
|
|
const iframeRef = React.useRef<HTMLIFrameElement>(null);
|
|
const { colorMode } = useColorMode();
|
|
|
|
React.useEffect(() => {
|
|
// when color mode changes, post a message to the iframe
|
|
// to update its color mode
|
|
if (iframeRef.current) {
|
|
iframeRef.current.contentWindow?.postMessage(
|
|
{
|
|
type: "colorMode",
|
|
colorMode,
|
|
},
|
|
"*",
|
|
);
|
|
}
|
|
}, [colorMode, visible]);
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"hidden",
|
|
"w-full",
|
|
"items-stretch",
|
|
"h-auto",
|
|
"landing-md:flex",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex-1",
|
|
"bg-gray-0 dark:bg-gray-900",
|
|
"opacity-0",
|
|
visible && "opacity-100",
|
|
"transition-[background-color,background,opacity]",
|
|
"duration-150",
|
|
"ease-in-out",
|
|
"bg-landing-wizard-side-bg-light dark:bg-landing-wizard-side-bg",
|
|
"bg-landing-wizard-side-left-position",
|
|
"bg-landing-wizard-side-size",
|
|
"bg-no-repeat",
|
|
)}
|
|
/>
|
|
<div
|
|
ref={ref}
|
|
className={clsx(
|
|
"box-content",
|
|
"flex-shrink-0",
|
|
"rounded-2xl landing-md:rounded-3xl",
|
|
"bg-gray-50 dark:bg-gray-800",
|
|
"border border-solid",
|
|
"transition-[border-color,width,height,opacity,background-color]",
|
|
"mx-auto",
|
|
"duration-300",
|
|
"ease-in-out",
|
|
"overflow-hidden",
|
|
"scrollbar-hidden",
|
|
!visible && ["pointer-events-none", "select-none"],
|
|
!visible && ["landing-md:border-transparent"],
|
|
visible && [
|
|
"landing-md:border-gray-200 dark:border-gray-700",
|
|
"landing-md:bg-gray-50 dark:bg-gray-800",
|
|
],
|
|
!visible && [
|
|
"landing-md:opacity-0",
|
|
"landing-md:h-0",
|
|
"landing-md:w-full",
|
|
],
|
|
visible && [
|
|
"landing-md:opacity-100",
|
|
"landing-md:h-[512px]",
|
|
"landing-md:w-[894px]",
|
|
"landing-lg:w-[944px]",
|
|
],
|
|
)}
|
|
>
|
|
{inView ? (
|
|
<iframe
|
|
ref={iframeRef}
|
|
src="https://refine.new/embed-form"
|
|
className={clsx(
|
|
"scrollbar-hidden",
|
|
"transition-opacity",
|
|
"duration-300",
|
|
"delay-300",
|
|
visible && "opacity-100",
|
|
!visible && "opacity-0",
|
|
"w-full",
|
|
"h-full",
|
|
"border-none",
|
|
"rounded-2xl landing-md:rounded-3xl",
|
|
)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"flex-1",
|
|
"bg-gray-0 dark:bg-gray-900",
|
|
"opacity-0",
|
|
visible && "opacity-100",
|
|
"transition-[background-color,background,opacity]",
|
|
"duration-150",
|
|
"ease-in-out",
|
|
"bg-landing-wizard-side-bg-light dark:bg-landing-wizard-side-bg",
|
|
"bg-landing-wizard-side-right-position",
|
|
"bg-landing-wizard-side-size",
|
|
"bg-no-repeat",
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|