[WEB-6599] feat: instance not ready ui revamp (#8755)

* feat: instance not ready ui revamp

* chore: code refactoring

* chore: code refactoring

apps/web/core/components/instance/not-ready-view.tsx

@@ -4,57 +4,55 @@
  * See the LICENSE file for details.
  */
 
-import type { FC } from "react";
 import Link from "next/link";
-import { useTheme } from "next-themes";
 import { GOD_MODE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
-import { PlaneLockup } from "@plane/propel/icons";
 // assets
-import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
+import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
-import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
+import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
-import PlaneTakeOffImage from "@/app/assets/plane-takeoff.png?url";
+import DefaultLayout from "@/layouts/default-layout";
+import { PlaneLockup } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
 
 export function InstanceNotReady() {
-  const { resolvedTheme } = useTheme();
-  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
-
   return (
-    <div className="relative">
+    <DefaultLayout>
-      <div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
+      <div className="relative z-10 flex h-screen w-screen overflow-hidden">
-        <div className="z-50 container mx-auto flex h-[110px] flex-shrink-0 items-center justify-between gap-5 px-5 lg:px-0">
+        {/* Background decorations */}
-          <div className="flex items-center gap-x-2 py-10">
+        <img
-            <Link href={`/`}>
+          src={GradientBgLogo}
-              <PlaneLockup className="h-7 w-auto text-primary" />
+          className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
-            </Link>
+          alt=""
+          aria-hidden="true"
+        />
+        <img
+          src={GradientBgLogo}
+          className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
+          alt=""
+          aria-hidden="true"
+        />
+        {/* Main content */}
+        <div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
+          <div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
+            <PlaneLockup height={20} width={95} className="text-primary" />
           </div>
-        </div>
+          <div className="flex h-full w-full flex-col items-center justify-center gap-7">
-
+            <div className="flex flex-col items-center gap-11">
-        <div className="absolute inset-0 z-0">
+              <img src={GradientLogo} className="h-24 w-40 object-contain" alt="Plane Logo" />
-          <img src={patternBackground} className="h-full w-full object-cover" alt="Plane background pattern" />
+              <div className="flex max-w-124 flex-col items-center gap-3">
-        </div>
+                <h1 className="text-h2-semibold text-primary">Welcome to Plane</h1>
-
+                <p className="text-center text-body-md-regular text-secondary">
-        <div className="relative z-10 mb-[110px] flex-grow">
+                  Set up your instance and create your first workspace to begin managing projects and work.
-          <div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
-            <div className="relative w-auto max-w-2xl space-y-8 py-10">
-              <div className="relative flex flex-col items-center justify-center space-y-4">
-                <h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
-                <img src={PlaneTakeOffImage} className="h-full w-full object-cover" alt="Plane Logo" />
-                <p className="text-14 font-medium text-placeholder">
-                  Get started by setting up your instance and workspace
                 </p>
               </div>
-              <div>
-                <a href={GOD_MODE_URL}>
-                  <Button size="xl" className="w-full">
-                    Get started
-                  </Button>
-                </a>
-              </div>
             </div>
+            <a href={GOD_MODE_URL} className="w-72">
+              <Button variant="primary" className="w-full" size="xl">
+                Get started
+              </Button>
+            </a>
           </div>
         </div>
       </div>
-    </div>
+    </DefaultLayout>
   );
 }