mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
Create docs-section.tsx
This commit is contained in:
Stefan Pejcic
GitHub
parent
9b9850a837
commit
ab2b8785fe
248
documentation/src/refine-theme/docs-section.tsx
Normal file
248
documentation/src/refine-theme/docs-section.tsx
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
import React from "react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { OpenPanelLogoIcon } from "./icons/openpanel-logo";
|
||||||
|
import Link from "@docusaurus/Link";
|
||||||
|
|
||||||
|
export const LandingTryItSection = ({ className }: { className?: string }) => {
|
||||||
|
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(
|
||||||
|
"w-full",
|
||||||
|
"rounded-2xl landing-md:rounded-3xl",
|
||||||
|
"relative",
|
||||||
|
"overflow-hidden",
|
||||||
|
"transition-[min-height,height]",
|
||||||
|
"duration-300",
|
||||||
|
"ease-out",
|
||||||
|
"min-h-[515px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<LandingTryItOptionsSection
|
||||||
|
className={clsx(
|
||||||
|
"w-full",
|
||||||
|
"transition-[transform,opacity,margin-bottom]",
|
||||||
|
"duration-300",
|
||||||
|
"ease-in-out"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const LandingTryItOptionsSection = ({
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
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-l landing-md:text-base landing-lg:text-l",
|
||||||
|
"font-semibold",
|
||||||
|
"text-gray-600 dark:text-gray-400",
|
||||||
|
"landing-md:max-w-[318px]",
|
||||||
|
"landing-lg:max-w-[446px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
OpenPanel offers a robust interface for end-users aiming to simplify the complexities of web and server management.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p
|
||||||
|
className={clsx(
|
||||||
|
"text-base landing-sm:text-l landing-md:text-base landing-lg:text-l",
|
||||||
|
"font-semibold",
|
||||||
|
"text-gray-600 dark:text-gray-400",
|
||||||
|
"landing-md:max-w-[318px]",
|
||||||
|
"landing-lg:max-w-[446px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
From adding domains to managing your websites, our documentation covers everything you need to seamlessly navigate through the interface.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to="/docs/panel/intro/"
|
||||||
|
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",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<OpenPanelLogoIcon />
|
||||||
|
<span className={clsx("text-base", "font-semibold")}>
|
||||||
|
OpenPanel Docs
|
||||||
|
</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-l landing-md:text-base landing-lg:text-l",
|
||||||
|
"font-semibold",
|
||||||
|
"text-gray-600 dark:text-gray-400",
|
||||||
|
"landing-lg:max-w-[446px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
OpenAdmin is tailored for administrators seeking fine-grained control over server configurations and management.
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className={clsx(
|
||||||
|
"text-base landing-sm:text-l landing-md:text-base landing-lg:text-l",
|
||||||
|
"font-semibold",
|
||||||
|
"text-gray-600 dark:text-gray-400",
|
||||||
|
"landing-lg:max-w-[446px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Our documentation provides in-depth knowledge to help you customize and secure your server environment.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
to="/docs/admin/intro/"
|
||||||
|
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",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<OpenPanelLogoIcon />
|
||||||
|
<span className={clsx("text-base", "font-semibold")}>
|
||||||
|
OpenAdmin Docs
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user