diff --git a/documentation/src/components/banner/banner-modal.tsx.save b/documentation/src/components/banner/banner-modal.tsx.save
new file mode 100644
index 00000000..3d7d3c6d
--- /dev/null
+++ b/documentation/src/components/banner/banner-modal.tsx.save
@@ -0,0 +1,227 @@
+import React, { FC, Fragment, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { LandingRainbowButton } from "@site/src/refine-theme/landing-rainbow-button";
+import { ArrowRightIcon } from "@site/src/refine-theme/icons/arrow-right";
+import Link from "@docusaurus/Link";
+import { Dialog, Transition } from "@headlessui/react";
+import { CloseIcon } from "@site/src/refine-theme/icons/close";
+import useScrollTracker from "@site/src/hooks/use-scroll-tracker";
+import useLocalStorage from "@site/src/hooks/use-localstorage";
+import { useLocation } from "@docusaurus/router";
+
+const SCROLL_TRESHOLD = 79;
+const SCROLL_MAX = 100;
+const MAX_VISIT_COUNT = 9;
+
+type Props = {
+    title?: string;
+    variant?: "gray" | "purple";
+    image?: {
+        src?: string;
+        alt?: string;
+        href?: string;
+    };
+    button?: {
+        text: string;
+        href?: string;
+        onClick?: () => void;
+    };
+};
+
+export const BannerModal: FC<Props> = ({
+    title = "OpenPanel offers a distinct advantage over other hosting panels by providing each user with an isolated environment and tools to fully manage it. ",
+    variant = "purple",
+    image = {
+        src: "https://openpanel.co/img/panel/v1/dashboard/dashboard.png",
+        alt: "OpenPanel interface screenshot",
+        href: "https://openpanel.co/demo?ref=banner-modal",
+    },
+    button = {
+        text: "Try online",
+        href: "https://openpanel.co/demo?ref=banner-modal",
+        onClick: undefined,
+    },
+}) => {
+    const { pathname } = useLocation();
+    const [isOpen, setIsOpen] = useState(false);
+    const [visitCount, setVisitCount] = useLocalStorage("banner-modal", null);
+    const scrollTresholdExceeded = useRef(false);
+
+    const tracker = useScrollTracker();
+
+    useEffect(() => {
+        if (pathname === "/blog/" || pathname === "/blog") return;
+        if (scrollTresholdExceeded.current || isOpen) return;
+
+        if (tracker.scrollY > SCROLL_TRESHOLD && tracker.scrollY < SCROLL_MAX) {
+            scrollTresholdExceeded.current = true;
+
+            if (visitCount === MAX_VISIT_COUNT || visitCount === null) {
+                setIsOpen(true);
+                setVisitCount(0);
+            } else {
+                setVisitCount(visitCount + 1);
+                scrollTresholdExceeded.current = true;
+            }
+        }
+    }, [tracker.scrollY]);
+
+    useEffect(() => {
+        if (
+            isOpen &&
+            typeof window !== "undefined" &&
+            typeof window.gtag !== "undefined"
+        ) {
+            window.gtag("event", "view_banner", {
+                banner_name: "banner-modal",
+                banner_text: title,
+                banner_image: image.src,
+            });
+        }
+    }, [isOpen]);
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog
+                as="div"
+                className="relative z-modal"
+                onClose={() => setIsOpen(false)}
+            >
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-75"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-75"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-gray-900/70" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-start justify-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-75"
+                            enterFrom="opacity-0"
+                            enterTo="opacity-100"
+                            leave="ease-in duration-75"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                        >
+                            <Dialog.Panel
+                                className={clsx(
+                                    "w-full min-h-screen",
+                                    "flex flex-col justify-center items-center",
+                                )}
+                            >
+                                <div
+                                    className={clsx(
+                                        "relative",
+                                        "rounded-3xl",
+                                        "max-w-[576px]",
+                                        "py-8",
+                                        "px-4 md:px-8",
+                                        variant === "gray" &&
+                                            "bg-banner-examples-modal-gray",
+                                        variant === "purple" &&
+                                            "bg-banner-examples-modal-purple",
+                                    )}
+                                >
+                                    <div
+                                        className={clsx(
+                                            "flex",
+                                            "flex-col",
+                                            "items-center",
+                                            "gap-8",
+                                            "text-center",
+                                            "not-prose",
+                                        )}
+                                    >
+                                        <Link
+                                            to={image?.href ?? button?.href}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className={clsx(
+                                                "flex",
+                                                "h-auto xl:h-[192px]",
+                                                "flex-shrink-0",
+                                                "rounded-lg",
+                                                "overflow-hidden",
+                                                "focus:outline-none",
+                                            )}
+                                        >
+                                            <img
+                                                className={clsx(
+                                                    "object-contain",
+                                                )}
+                                                src={image?.src}
+                                                alt={image?.alt ?? title}
+                                                loading="lazy"
+                                            />
+                                        </Link>
+                                        <p
+                                            className={clsx(
+                                                "text-2xl",
+                                                "font-semibold",
+                                                variant === "gray" &&
+                                                    "bg-clip-text",
+                                                variant === "gray" &&
+                                                    "text-transparent",
+                                                variant === "gray" &&
+                                                    "bg-banner-examples-text",
+                                                variant === "purple" &&
+                                                    "text-gray-0",
+                                            )}
+                                        >
+                                            {title}
+                                        </p>
+                                        <LandingRainbowButton
+                                            className={clsx("w-max")}
+                                            buttonClassname={clsx(
+                                                "!px-4",
+                                                "!py-4",
+                                            )}
+                                            href={button.href}
+                                            onClick={button.onClick}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            <div
+                                                className={clsx(
+                                                    "text-gray-900",
+                                                    "text-base",
+                                                    "font-bold",
+                                                )}
+                                            >
+                                                {button.text}
+                                            </div>
+                                            <ArrowRightIcon
+                                                className={clsx("w-4", "h-4")}
+                                            />
+                                        </LandingRainbowButton>
+                                    </div>
+                                    <button
+                                        className={clsx(
+                                            "absolute",
+                                            "top-2 right-2",
+                                            "w-8 h-8",
+                                            "flex items-center justify-center flex-shrink-0",
+                                            "text-gray-0",
+                                            "rounded-full",
+                                            "bg-gray-900/20",
+                                        )}
+                                        onClick={() => setIsOpen(false)}
+                                    >
+                                        <CloseIcon className="w-4 h-4" />
+                                    </button>
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/documentation/src/utils/open-figma.ts b/documentation/src/utils/open-figma.ts
index 99296d4a..b247e226 100644
--- a/documentation/src/utils/open-figma.ts
+++ b/documentation/src/utils/open-figma.ts
@@ -1,5 +1,5 @@
 export const openFigma = () => {
     return window
-        .open("https://openpanel.co/contact", "_blank")
+        .open("https://openpanel.co/assets", "_blank")
         ?.focus();
 };