diff --git a/documentation/src/refine-theme/demo-section.tsx b/documentation/src/refine-theme/demo-section.tsx
new file mode 100644
index 00000000..c1e661c6
--- /dev/null
+++ b/documentation/src/refine-theme/demo-section.tsx
@@ -0,0 +1,232 @@
+import React from "react";
+import clsx from "clsx";
+import { LandingStartActionIcon } from "./icons/landing-start-action";
+import { LandingCopyCommandButton } from "./landing-copy-command-button";
+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(
+                    "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",
+                    "min-h-[515px]",
+                )}
+            >
+                <LandingTryItOptionsSection
+                    onClick={onClick}
+                    className={clsx(
+                        "w-full",
+                        "transition-[transform,opacity,margin-bottom]",
+                        "duration-300",
+                        "ease-in-out"
+                    )}
+                />
+            </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>
+    );
+};