mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
Delete documentation/src/refine-theme/landing-playground.tsx
This commit is contained in:
Stefan Pejcic
GitHub
parent
794ee1cccf
commit
60cac9b31d
@ -1,465 +0,0 @@
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import { useLocation } from "@docusaurus/router";
|
||||
import { PlayOutlinedIcon } from "./icons/play-outlined";
|
||||
import { LandingPlaygroundModal } from "./landing-playground-modal";
|
||||
import { LandingRainbowButton } from "./landing-rainbow-button";
|
||||
|
||||
export const LandingPlayground = () => {
|
||||
const { search, hash } = useLocation();
|
||||
|
||||
const [playgroundVisible, setPlaygroundVisible] = React.useState(false);
|
||||
|
||||
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 (playgroundVisible) {
|
||||
scrollToItem();
|
||||
}
|
||||
}, [playgroundVisible]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={clsx("mb-12")}>
|
||||
<div className={clsx("w-full", "relative", "z-[1]")}>
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-landing-planar-grid-mobile",
|
||||
"landing-lg:bg-landing-planar-grid",
|
||||
"w-full",
|
||||
"h-[156px]",
|
||||
"-mt-[64px]",
|
||||
"-mb-[140px]",
|
||||
"mx-auto",
|
||||
"landing-md:-mb-[112px]",
|
||||
"landing-lg:mb-0",
|
||||
"landing-lg:-mt-[256px]",
|
||||
"landing-lg:h-[312px]",
|
||||
"max-w-screen-landing-2xl",
|
||||
"bg-[length:720px_156px]",
|
||||
"landing-lg:bg-[length:1440px_312px]",
|
||||
"bg-center bg-no-repeat",
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
id="playground"
|
||||
className={clsx(
|
||||
"my-12",
|
||||
"max-w-screen-landing-content",
|
||||
"w-full",
|
||||
"mx-auto",
|
||||
"flex flex-col items-center justify-center",
|
||||
"gap-6",
|
||||
"landing-lg:gap-12",
|
||||
)}
|
||||
style={{
|
||||
scrollMarginTop: "4rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"text-[1.5rem]",
|
||||
"leading-[2rem]",
|
||||
"landing-md:text-[2rem]",
|
||||
"landing-md:leading-[2.5rem]",
|
||||
"landing-lg:text-[2.5rem]",
|
||||
"landing-lg:leading-[3rem]",
|
||||
"font-semibold",
|
||||
"text-center",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={clsx(
|
||||
"block landing-md:inline",
|
||||
"bg-landing-text-bg",
|
||||
"bg-clip-text",
|
||||
"text-transparent",
|
||||
)}
|
||||
>
|
||||
Develop with your
|
||||
</span>{" "}
|
||||
<span
|
||||
className={clsx(
|
||||
"block landing-md:inline",
|
||||
"bg-landing-text-bg",
|
||||
"bg-clip-text",
|
||||
"text-transparent",
|
||||
)}
|
||||
>
|
||||
favorite tech stack
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"px-2 landing-md:px-0",
|
||||
"mx-auto",
|
||||
"w-full",
|
||||
"max-w-[464px]",
|
||||
"landing-md:max-w-[624px]",
|
||||
"h-[288px]",
|
||||
"landing-lg:max-w-[944px]",
|
||||
"landing-lg:h-[515px]",
|
||||
"flex",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex-1",
|
||||
"w-full",
|
||||
"h-full",
|
||||
"flex",
|
||||
"bg-landing-playground-bg",
|
||||
"border-opacity-50",
|
||||
"backdrop-blur-xl",
|
||||
"border-[1.5px]",
|
||||
"border-refine-landing-playground-border",
|
||||
"rounded-xl",
|
||||
"overflow-hidden",
|
||||
"relative",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"absolute",
|
||||
"left-0 top-0",
|
||||
"z-[2]",
|
||||
"flex-1",
|
||||
"w-full",
|
||||
"h-full",
|
||||
"hidden",
|
||||
"landing-lg:flex",
|
||||
"delay-200 transition-transform duration-200 ease-in-out",
|
||||
)}
|
||||
style={{
|
||||
pointerEvents: playgroundVisible
|
||||
? "initial"
|
||||
: "none",
|
||||
transform: playgroundVisible
|
||||
? "scale(1)"
|
||||
: "scale(0)",
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
src="https://refine.new/embed-form"
|
||||
className={clsx(
|
||||
"w-full",
|
||||
"h-full",
|
||||
"border-none",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex",
|
||||
"flex-1",
|
||||
"w-full",
|
||||
"h-full",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex-1",
|
||||
"min-w-[50%]",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"h-full w-full",
|
||||
"flex items-start justify-center",
|
||||
"flex-col",
|
||||
"py-14",
|
||||
"px-14",
|
||||
"gap-6",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full",
|
||||
"bg-landing-text-bg",
|
||||
"bg-clip-text",
|
||||
"text-transparent",
|
||||
"text-[16px]",
|
||||
"leading-[24px]",
|
||||
"landing-lg:text-[24px]",
|
||||
"landing-lg:leading-[32px]",
|
||||
"text-center",
|
||||
"landing-md:text-left",
|
||||
"max-w-[304px]",
|
||||
"mx-auto",
|
||||
"landing-md:mx-0",
|
||||
)}
|
||||
>
|
||||
Starting a new Refine project{" "}
|
||||
<span className="block landing-lg:inline font-semibold">
|
||||
takes less than one minute.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full",
|
||||
"text-[12px]",
|
||||
"leading-[16px]",
|
||||
"landing-lg:text-[16px]",
|
||||
"landing-lg:leading-[24px]",
|
||||
"text-gray-0",
|
||||
"text-center",
|
||||
"landing-md:text-left",
|
||||
"max-w-[240px]",
|
||||
"landing-md:max-w-[304px]",
|
||||
"mx-auto",
|
||||
"landing-md:mx-0",
|
||||
)}
|
||||
>
|
||||
Use the setup wizard to create
|
||||
tailor-made architectures for
|
||||
your project.
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full",
|
||||
"flex",
|
||||
"justify-center",
|
||||
"landing-md:justify-start",
|
||||
)}
|
||||
>
|
||||
<LandingRainbowButton
|
||||
onClick={() =>
|
||||
setPlaygroundVisible(
|
||||
true,
|
||||
)
|
||||
}
|
||||
>
|
||||
<PlayOutlinedIcon />
|
||||
<span className="text-base font-semibold">
|
||||
Start Now!
|
||||
</span>
|
||||
</LandingRainbowButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex-1",
|
||||
"hidden landing-md:block",
|
||||
"min-w-[50%]",
|
||||
"pointer-events-none",
|
||||
"select-none",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full h-full",
|
||||
"flex",
|
||||
"justify-end",
|
||||
"pr-8",
|
||||
"landing-lg:pr-16",
|
||||
"gap-4 landing-lg:gap-8",
|
||||
"animation-parent",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"-mt-[10%]",
|
||||
"h-[120%]",
|
||||
"w-[90px]",
|
||||
"landing-lg:w-[177px]",
|
||||
"overflow-hidden",
|
||||
"animation-parent",
|
||||
"landing-playground-slide-mask",
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
"translate3d(0,0,0) rotate(15deg)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col",
|
||||
"animate-playground-slide-down-mobile",
|
||||
"landing-lg:animate-playground-slide-down",
|
||||
"transition-transform duration-100 ease-in-out",
|
||||
"will-change-transform",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src="assets/landing-playground-slide-left.svg"
|
||||
className={clsx(
|
||||
"w-[90px]",
|
||||
"h-[1655px]",
|
||||
"landing-lg:w-[177px]",
|
||||
"landing-lg:h-[3329px]",
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
"translateZ(0)",
|
||||
perspective: "1000",
|
||||
backfaceVisibility:
|
||||
"hidden",
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src="assets/landing-playground-slide-left.svg"
|
||||
className={clsx(
|
||||
"w-[90px]",
|
||||
"h-[1655px]",
|
||||
"landing-lg:w-[177px]",
|
||||
"landing-lg:h-[3329px]",
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
"translateZ(0)",
|
||||
perspective: "1000",
|
||||
backfaceVisibility:
|
||||
"hidden",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"-mt-[10%]",
|
||||
"h-[120%]",
|
||||
"w-[90px]",
|
||||
"landing-lg:w-[177px]",
|
||||
"overflow-hidden",
|
||||
"animation-parent",
|
||||
"landing-playground-slide-mask",
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
"translate3d(0,0,0) rotate(15deg)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col",
|
||||
"animate-playground-slide-up-mobile",
|
||||
"landing-lg:animate-playground-slide-up",
|
||||
"will-change-transform",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src="assets/landing-playground-slide-right.svg"
|
||||
className={clsx(
|
||||
"w-[90px]",
|
||||
"h-[1655px]",
|
||||
"landing-lg:w-[177px]",
|
||||
"landing-lg:h-[3329px]",
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
"translateZ(0)",
|
||||
perspective: "1000",
|
||||
backfaceVisibility:
|
||||
"hidden",
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src="assets/landing-playground-slide-right.svg"
|
||||
className={clsx(
|
||||
"w-[90px]",
|
||||
"h-[1655px]",
|
||||
"landing-lg:w-[177px]",
|
||||
"landing-lg:h-[3329px]",
|
||||
)}
|
||||
style={{
|
||||
transform:
|
||||
"translateZ(0)",
|
||||
perspective: "1000",
|
||||
backfaceVisibility:
|
||||
"hidden",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"z-[-1]",
|
||||
"absolute",
|
||||
"w-full",
|
||||
"h-full",
|
||||
"left-0",
|
||||
"top-0",
|
||||
"flex items-center justify-center",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full",
|
||||
"max-w-[1440px]",
|
||||
"landing-lg:mt-[110px]",
|
||||
"h-[200px]",
|
||||
"bg-landing-linear-spectrum",
|
||||
"bg-center",
|
||||
"bg-no-repeat",
|
||||
"bg-[length:1200px]",
|
||||
"blur-[128px]",
|
||||
"opacity-50",
|
||||
)}
|
||||
style={{
|
||||
transform: "translateZ(0)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-landing-planar-grid-reversed-mobile",
|
||||
"landing-lg:bg-landing-planar-grid-reversed",
|
||||
"w-full",
|
||||
"h-[156px]",
|
||||
"-mt-[50px]",
|
||||
"landing-lg:mt-0",
|
||||
"-mb-[140px]",
|
||||
"mx-auto",
|
||||
"landing-lg:-mb-[240px]",
|
||||
"landing-lg:h-[312px]",
|
||||
"max-w-screen-landing-2xl",
|
||||
"bg-[length:720px_156px]",
|
||||
"landing-lg:bg-[length:1440px_312px]",
|
||||
"bg-center bg-no-repeat",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<LandingPlaygroundModal
|
||||
visible={playgroundVisible}
|
||||
close={() => setPlaygroundVisible(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user